@os-design/core - npm Package Compare versions

Comparing version 0.0.42 to 0.0.43

lib/Button/index.d.ts

@@ -8,2 +8,3 @@ import React from 'react';
     loading?: boolean;
+    disabled?: boolean;
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -10,0 +11,0 @@ }

lib/Button/index.js

@@ -11,6 +11,6 @@ "use strict";
 const icons_1 = require("@os-design/icons");
-const color = p => core_1.css `
+const color = (p) => !p.disabledProp && core_1.css `
   color: ${p.darkMode ? p.theme.colorPrimary : '#fff'};
 `;
-const backgroundColor = p => !p.ghost && core_1.css `
+const backgroundColor = (p) => !p.disabledProp && !p.ghost && core_1.css `
   background-color: ${p.darkMode ? '#fff' : p.theme.colorPrimary};
@@ -25,3 +25,3 @@
 `;
-const ghost = p => p.ghost && core_1.css `
+const ghost = (p) => !p.disabledProp && p.ghost && core_1.css `
   background-color: transparent;
@@ -35,2 +35,7 @@
 `;
+const disabled = (p) => p.disabledProp && core_1.css `
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.4);
+  background-color: #eee;
+`;
 const shapeRounded = p => p.shape === 'rounded' && core_1.css `border-radius: ${p.theme.borderRadius}em;`;
@@ -44,3 +49,3 @@ const shapeRound = p => p.shape === 'round' && core_1.css `border-radius: ${p.theme.baseHeight / 2}em;`;
 `;
-const responsive = p => p.shape !== 'circle' && core_1.css `
+const responsive = (p) => p.shape !== 'circle' && core_1.css `
   ${utils_1.m.max.xxs} { 
@@ -51,3 +56,3 @@ width: 100%;
 exports.BUTTON_PADDING_HORIZONTAL_EM = 1.2;
-const StyledButton = styled_1.default('button', utils_1.omitProps(['ghost', 'shape', 'loading', 'darkMode', 'sizing'])) `
+const StyledButton = styled_1.default('button', utils_1.omitProps(['ghost', 'shape', 'loading', 'darkMode', 'sizing', 'disabledProp'])) `
   ${utils_1.resetButton};
@@ -67,2 +72,3 @@ cursor: pointer;
   ${ghost};
+  ${disabled}
   
@@ -78,4 +84,4 @@ ${shapeRounded};
 `;
-const Button = props => (react_1.default.createElement(StyledButton, { darkMode: props.darkMode, ghost: props.ghost, shape: props.shape || 'rounded', sizing: props.sizing, loading: props.loading, disabled: props.loading, onClick: props.onClick, className: props.className }, props.loading ? react_1.default.createElement(icons_1.Loading, null) : props.children));
+const Button = props => (react_1.default.createElement(StyledButton, { darkMode: props.darkMode, ghost: props.ghost, shape: props.shape || 'rounded', sizing: props.sizing, loading: props.loading, disabled: props.loading, disabledProp: props.disabled, onClick: props.onClick, className: props.className }, props.loading ? react_1.default.createElement(icons_1.Loading, null) : props.children));
 exports.default = Button;
 //# sourceMappingURL=index.js.map

lib/List/ListItem.js

@@ -21,11 +21,13 @@ "use strict";
 const hoverActions = core_1.css `
-  // Hide actions by default
-  & > div:nth-child(2) {
-    display: none;
+  @media (hover: hover) {
+    // Hide actions by default
+    & > div:nth-child(2) {
+      display: none;
+    }
+    
+    // Display actions on hover
+    &:hover > div:nth-child(2) {
+      display: flex;
+    }
   }
-  
-  // Display actions on hover
-  &:hover > div:nth-child(2) {
-    display: flex;
-  }
 `;
@@ -32,0 +34,0 @@ const LinkContainer = styled_1.default('div', utils_1.omitProps(['href'])) `

lib/List/ListItemActions.js

@@ -20,3 +20,3 @@ "use strict";
   @media (hover: hover) {
-    &:focus, &:hover {
+    &:hover {
       background-color: rgba(0,0,0,0.05);
@@ -23,0 +23,0 @@ color: ${p => utils_1.darken(p.theme.colorPrimary, 30)};

lib/Modal/index.d.ts

@@ -7,2 +7,3 @@ import React from 'react';
     okText?: string;
+    okDisabled?: boolean;
     onCancel?: () => void;
@@ -9,0 +10,0 @@ onOk?: () => void;

lib/Modal/index.js

@@ -33,3 +33,3 @@ "use strict";
             return props.footer;
-        return (react_1.default.createElement(ModalFooter_1.default, { okText: props.okText, onOk: props.onOk }));
+        return (react_1.default.createElement(ModalFooter_1.default, { okText: props.okText, okDisabled: props.okDisabled, onOk: props.onOk }));
     };
@@ -36,0 +36,0 @@ return (react_1.default.createElement(Portal_1.default, null,

lib/Modal/ModalFooter.d.ts

 import React from 'react';
 import { ModalProps } from './index';
-declare type ModalFooterProps = Pick<ModalProps, 'okText' | 'onOk'>;
+declare type ModalFooterProps = Pick<ModalProps, 'okText' | 'okDisabled' | 'onOk'>;
 declare const ModalFooter: React.FC<ModalFooterProps>;
 export default ModalFooter;
 //# sourceMappingURL=ModalFooter.d.ts.map

lib/Modal/ModalFooter.js

@@ -25,4 +25,4 @@ "use strict";
 const ModalFooter = props => (react_1.default.createElement(ModalFooterContainer, null,
-    react_1.default.createElement(Button_1.default, { onClick: props.onOk }, props.okText || 'OK')));
+    react_1.default.createElement(Button_1.default, { disabled: props.okDisabled, onClick: props.onOk }, props.okText || 'OK')));
 exports.default = ModalFooter;
 //# sourceMappingURL=ModalFooter.js.map

package.json

 {
   "name": "@os-design/core",
-  "version": "0.0.42",
+  "version": "0.0.43",
   "license": "MIT",
@@ -34,3 +34,3 @@ "main": "lib/index.js",
   },
-  "gitHead": "72db919a9997678258ffc47e0918c6b9b5fe4611"
+  "gitHead": "e6610a88f4ed422c2de4bfa825e686786384f546"
 }

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

172593

increased by0.47%

Lines of code

2182

increased by0.46%

No dependency changes