@os-design/core - npm Package Compare versions

Comparing version 0.0.28 to 0.0.29

lib/Button/index.d.ts

@@ -10,4 +10,5 @@ import React from 'react';
 }
+export declare const BUTTON_PADDING_HORIZONTAL_EM = 1.2;
 declare const Button: React.FC<ButtonProps>;
 export default Button;
 //# sourceMappingURL=index.d.ts.map

lib/Button/index.js

@@ -45,12 +45,11 @@ "use strict";
 const responsive = p => p.shape !== 'circle' && core_1.css `
-  width: 100%;
-  
-  ${utils_1.m.sm} { 
-    width: auto; 
+  ${utils_1.m.max.xxs} { 
+    width: 100%;
   }
 `;
+exports.BUTTON_PADDING_HORIZONTAL_EM = 1.2;
 const StyledButton = styled_1.default('button', utils_1.omitProps(['ghost', 'shape', 'loading', 'darkMode', 'sizing'])) `
   cursor: pointer;
   user-select: none;
-  padding: 0 1.2em;
+  padding: 0 ${exports.BUTTON_PADDING_HORIZONTAL_EM}em;
   height: ${p => p.theme.baseHeight}em;
@@ -60,3 +59,3 @@
   svg { 
-    transform: scale(1.2); 
+    transform: rotate(0) scale(1.2); 
   }
@@ -63,0 +62,0 @@

lib/Drawer/DrawerContent.d.ts

 /// <reference types="react" />
 /// <reference types="@emotion/core" />
 import { DrawerProps } from './index';
-declare const DrawerContent: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<DrawerProps, "visible" | "width" | "placement">, {
+declare const DrawerContent: import("@emotion/styled-base").StyledComponent<Pick<import("react").PropsWithChildren<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<import("..").ModalProps, "visible"> & {
+    theme?: {
+        colorPrimary: string;
+        colorBorder: string;
+        colorPlaceholder: string;
+        fontSize: number[];
+        sizing: {
+            small: number;
+            medium: number;
+            large: number;
+        };
+        baseHeight: number;
+        borderRadius: number;
+        transitionDelay: number;
+    } | undefined;
+}>, "hidden" | "visible" | "dir" | "slot" | "style" | "title" | "color" | "key" | "children" | "translate" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "theme"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, Pick<DrawerProps, "visible" | "width" | "placement">, {
     colorPrimary: string;
@@ -6,0 +23,0 @@ colorBorder: string;

lib/Drawer/DrawerContent.js

@@ -9,6 +9,3 @@ "use strict";
 const core_1 = require("@emotion/core");
-const visible = (p) => p.visible && core_1.css `
-  box-shadow: 0 0 16px rgba(0,0,0,0.25);
-  overflow-y: auto; // Makes the content scrollable
-`;
+const BaseModalContent_1 = __importDefault(require("../utils/BaseModalContent"));
 const placement = (p) => core_1.css `
@@ -20,18 +17,11 @@ ${p.placement === 'left' && core_1.css `left: 0;`};
 `;
-const DrawerContent = styled_1.default('div', utils_1.omitProps(['visible', 'placement', 'width'])) `
-  position: absolute;
+const DrawerContent = styled_1.default(BaseModalContent_1.default, utils_1.omitProps(['visible', 'placement', 'width'])) `
   top: 0;
   bottom: 0;
   
-  background-color: #fff;
-  box-shadow: none;
-  overflow: hidden;
   width: ${p => p.width || '15em'};
   
-  ${visible};
   ${placement};
-  
-  ${utils_1.transition('transform', 'box-shadow')};
 `;
 exports.default = DrawerContent;
 //# sourceMappingURL=DrawerContent.js.map

lib/Drawer/index.js

@@ -14,12 +14,12 @@ "use strict";
 const react_1 = __importStar(require("react"));
-const DrawerContainer_1 = __importDefault(require("./DrawerContainer"));
-const DrawerMask_1 = __importDefault(require("./DrawerMask"));
 const DrawerContent_1 = __importDefault(require("./DrawerContent"));
 const Portal_1 = __importDefault(require("../Portal"));
-const bodyScroll_1 = __importDefault(require("./bodyScroll"));
+const bodyScroll_1 = __importDefault(require("../utils/bodyScroll"));
+const BaseModalContainer_1 = __importDefault(require("../utils/BaseModalContainer"));
+const BaseModalMask_1 = __importDefault(require("../utils/BaseModalMask"));
 const Drawer = props => {
     react_1.useEffect(props.visible ? bodyScroll_1.default.disable : bodyScroll_1.default.enable, [props.visible]);
     return (react_1.default.createElement(Portal_1.default, null,
-        react_1.default.createElement(DrawerContainer_1.default, { visible: props.visible },
-            react_1.default.createElement(DrawerMask_1.default, { visible: props.visible, onClick: props.onClose }),
+        react_1.default.createElement(BaseModalContainer_1.default, { visible: props.visible },
+            react_1.default.createElement(BaseModalMask_1.default, { visible: props.visible, onClick: props.onClose }),
             react_1.default.createElement(DrawerContent_1.default, { visible: props.visible, placement: props.placement || 'left', width: props.width, className: props.className }, props.children))));
@@ -26,0 +26,0 @@ };

lib/GlobalStyles/typography.js

@@ -33,3 +33,3 @@ "use strict";
       // Sets the base font size and increase it on large screens
-      ${facepaint_1.default([utils_1.m.sm, utils_1.m.xxl])({ fontSize: theme.fontSize.map(s => `${s}px`) })};
+      ${facepaint_1.default([utils_1.m.min.sm, utils_1.m.min.xxl])({ fontSize: theme.fontSize.map(s => `${s}px`) })};
     }
@@ -47,5 +47,5 @@
     // Sets the font size of headings on large screens
-    ${utils_1.m.sm} { ${hFontSizeStyle(0.3)} };
+    ${utils_1.m.min.sm} { ${hFontSizeStyle(0.3)} };
 `;
 exports.default = typography;
 //# sourceMappingURL=typography.js.map

lib/index.d.ts

@@ -11,2 +11,3 @@ export { default as Alert } from './Alert';
 export { default as LogoContainer } from './LogoContainer';
+export { default as Modal } from './Modal';
 export { default as Portal } from './Portal';
@@ -21,2 +22,3 @@ export * from './Alert';
 export * from './LogoContainer';
+export * from './Modal';
 //# sourceMappingURL=index.d.ts.map

lib/index.js

@@ -26,2 +26,4 @@ "use strict";
 exports.LogoContainer = LogoContainer_1.default;
+var Modal_1 = require("./Modal");
+exports.Modal = Modal_1.default;
 var Portal_1 = require("./Portal");
@@ -37,2 +39,3 @@ exports.Portal = Portal_1.default;
 __export(require("./LogoContainer"));
+__export(require("./Modal"));
 //# sourceMappingURL=index.js.map

lib/Input/InputField.js

@@ -12,2 +12,4 @@ "use strict";
 const reset = core_1.css `
+  appearance: none;
+  
   &:focus {
@@ -14,0 +16,0 @@ outline: none;

package.json

 {
   "name": "@os-design/core",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "license": "MIT",
@@ -22,3 +22,3 @@ "main": "lib/index.js",
     "@os-design/styled": "^0.0.4",
-    "@os-design/utils": "^0.0.3",
+    "@os-design/utils": "^0.0.4",
     "facepaint": "^1.2.1"
@@ -33,3 +33,3 @@ },
   },
-  "gitHead": "05f8204961708652aabda6ef3d523628e5b0a769"
+  "gitHead": "1f82c7f88f8e722481bc0b58fb8aff9f25bb37b6"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

113917

increased by85.84%

Number of package files

126

increased by34.04%

Lines of code

1397

increased by52.68%

Dependency changes

• + Added@os-design/utils@0.0.4(transitive)

• - Removed@os-design/utils@0.0.3(transitive)

• Updated@os-design/utils@^0.0.4