fix: disabled button; chore: demo cleanup

rcaferati · Oct 25, 2022 · ea7f54e · ea7f54e
1 parent 2adc0ce
commit ea7f54e
Show file tree

Hide file tree

Showing 24 changed files with 39 additions and 307 deletions.
diff --git a/dist/index.js b/dist/index.js
diff --git a/dist/styles.css b/dist/styles.css
diff --git a/dist/themes/theme-amber.css b/dist/themes/theme-amber.css
diff --git a/dist/themes/theme-blue.css b/dist/themes/theme-blue.css
diff --git a/dist/themes/theme-bojack.css b/dist/themes/theme-bojack.css
diff --git a/dist/themes/theme-c137.css b/dist/themes/theme-c137.css
diff --git a/dist/themes/theme-eric.css b/dist/themes/theme-eric.css
diff --git a/dist/themes/theme-flat.css b/dist/themes/theme-flat.css
diff --git a/dist/themes/theme-indigo.css b/dist/themes/theme-indigo.css
diff --git a/dist/themes/theme-red.css b/dist/themes/theme-red.css
diff --git a/dist/themes/theme-rickiest.css b/dist/themes/theme-rickiest.css
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-awesome-button",
-  "version": "7.0.3",
+  "version": "7.0.4",
   "description": "Performant, extendable, highly customisable, production ready React Component that renders an animated basic set of UI buttons",
   "main": "dist/index",
   "types": "dist/src/index.d.ts",

diff --git a/src/components/AwesomeButton/index.tsx b/src/components/AwesomeButton/index.tsx
@@ -72,9 +72,6 @@ const AwesomeButton = ({
   type = 'primary',
   visible = true,
 }: ButtonType) => {
-  const [isDisabled, setDisabled] = React.useState(
-    disabled || (placeholder && !children)
-  );
   const [pressPosition, setPressPosition] = React.useState(null);
   const button = React.useRef(null);
   const content = React.useRef(null);
@@ -91,6 +88,13 @@ const AwesomeButton = ({
     href,
   };
 
+  const isDisabled = React.useMemo(()=>{
+    if (placeholder === true && !children) {
+      return true;
+    }
+    return disabled;
+  },[placeholder, children, disabled])
+
   React.useEffect(() => {
     if (button?.current) {
       container.current = button.current.parentNode;
@@ -150,18 +154,6 @@ const AwesomeButton = ({
 
   React.useEffect(checkActive, [active]);
 
-  const checkDisabled = () => {
-    if (placeholder === true && !children) {
-      setDisabled(true);
-      return;
-    }
-    if (isDisabled !== disabled) {
-      setDisabled(disabled);
-    }
-  };
-
-  React.useEffect(checkDisabled, [placeholder, children, disabled]);
-
   const clearPressCallback = () => {
     pressed.current = 0;
     onReleased && onReleased(container.current);

diff --git a/src/styles/base/custom-properties.scss b/src/styles/base/custom-properties.scss
@@ -25,6 +25,8 @@
   --button-raise-level: #{$button-raise-level};
   --button-pressed-level: #{$button-pressed-level};
   --button-hover-pressure: #{$button-hover-pressure};
+  --button-shadow-color: #{$button-shadow-color};
+  --button-shadow-divisor: #{$button-shadow-divisor};
 
   --loading-transition-timing: #{$loading-transition-timing};
   --loading-transition-speed: #{$loading-transition-speed};

diff --git a/src/styles/base/lists.scss b/src/styles/base/lists.scss
@@ -52,15 +52,6 @@ $button-colors: (
     var(--button-disabled-color-active),
     var(--button-disabled-border)
   ),
-  (
-    'disabled',
-    var(--button-danger-color),
-    var(--button-danger-color-dark),
-    var(--button-danger-color-light),
-    var(--button-danger-color-hover),
-    var(--button-danger-color-active),
-    var(--button-danger-border)
-  ),
   (
     'placeholder',
     var(--button-placeholder-color),

diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss
@@ -224,10 +224,10 @@ button.#{$button-root} {
   }
   &:before {
     content: ' ';
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: var(--button-shadow-color);
     width: calc(100% - 2px);
-    height: calc(100% - (var(--button-raise-level) * 2));
-    bottom: calc(0px - (var(--button-raise-level) / 2));
+    height: calc(100% - (var(--button-raise-level) * var(--button-shadow-divisor)));
+    bottom: calc(0px - (var(--button-raise-level) / var(--button-shadow-divisor)));
     left: 1px;
     position: absolute;
     border-radius: var(--button-default-border-radius);

diff --git a/src/styles/base/variables/structure.scss b/src/styles/base/variables/structure.scss
@@ -16,6 +16,8 @@ $button-horizontal-padding: 16px;
 $button-raise-level: 4px;
 $button-pressed-level: 0px;
 $button-hover-pressure: 1;
+$button-shadow-color: rgba(0, 0, 0, 0.3);
+$button-shadow-divisor: 2;
 
 $loading-transition-speed: 6s;
 $loading-transition-timing: ease-out;

diff --git a/src/styles/themes/theme-bruce/config/colors.scss b/src/styles/themes/theme-bruce/config/colors.scss
@@ -34,13 +34,12 @@ $button-placeholder-color-hover: $button-placeholder-color;
 $button-placeholder-color-active: $button-placeholder-color;
 $button-placeholder-border: 2px solid $button-placeholder-border-color;
 
-$button-disabled-color: #302e3c;
-$button-disabled-border-color: #844d38;
-$button-disabled-color-dark: $button-disabled-border-color;
-$button-disabled-color-light: lighten($button-disabled-border-color, 5%);
+$button-disabled-color: #CACACA;
+$button-disabled-color-dark: darken($button-disabled-color, 20%);
+$button-disabled-color-light: darken($button-disabled-color, 15%);
 $button-disabled-color-hover: $button-disabled-color;
 $button-disabled-color-active: $button-disabled-color;
-$button-disabled-border: 2px solid $button-disabled-border-color;
+$button-disabled-border: 2px solid darken($button-disabled-color, 17.5%);
 
 $button-danger-color: $purple;
 $button-danger-color-dark: darken($button-danger-color, 15%);

diff --git a/src/styles/themes/theme-c137/config/colors.scss b/src/styles/themes/theme-c137/config/colors.scss
@@ -31,7 +31,7 @@ $button-disabled-color-dark: darken($button-disabled-color, 20%);
 $button-disabled-color-light: darken($button-disabled-color, 15%);
 $button-disabled-color-hover: $button-disabled-color;
 $button-disabled-color-active: $button-disabled-color;
-$button-disabled-border: none;
+$button-disabled-border: 2px solid darken($button-disabled-color, 17.5%);
 
 $button-danger-color: #3db64b;
 $button-danger-color-dark: #d2e054;

diff --git a/src/styles/themes/theme-eric/config/colors.scss b/src/styles/themes/theme-eric/config/colors.scss
@@ -30,13 +30,12 @@ $button-placeholder-color-hover: $button-placeholder-color;
 $button-placeholder-color-active: $button-placeholder-color;
 $button-placeholder-border: 1px solid $button-placeholder-border-color;
 
-$button-disabled-color: #302E3C;
-$button-disabled-border-color: #844D38;
-$button-disabled-color-dark: $button-disabled-border-color;
-$button-disabled-color-light: lighten($button-disabled-border-color, 5%);
+$button-disabled-color: #E0E0E0;
+$button-disabled-color-dark: darken($button-disabled-color, 20%);
+$button-disabled-color-light: darken($button-disabled-color, 15%);
 $button-disabled-color-hover: $button-disabled-color;
 $button-disabled-color-active: $button-disabled-color;
-$button-disabled-border: 1px solid $button-disabled-border-color;
+$button-disabled-border: 1px solid darken($button-disabled-color, 17.5%);
 
 $button-danger-color: #2D2D3A;
 $button-danger-color-dark: darken($button-danger-color, 15%);

diff --git a/src/styles/themes/theme-rickiest/config/colors.scss b/src/styles/themes/theme-rickiest/config/colors.scss
@@ -13,10 +13,10 @@ $button-secondary-color-hover: lighten($button-secondary-border-color, 35%);
 $button-secondary-color-active: lighten($button-secondary-border-color, 25%);
 $button-secondary-border: 2px solid #b3e5e1;
 
-$button-disabled-color: #e3fdd6;
-$button-disabled-border-color: #b3e39b;
-$button-disabled-color-dark: darken($button-disabled-border-color, 2%);
-$button-disabled-color-light: darken($button-disabled-border-color, 5%);
+$button-disabled-color: #e0e0e0;
+$button-disabled-border-color: #969696;
+$button-disabled-color-dark: #999999;
+$button-disabled-color-light: #9c9c9c;
 $button-disabled-color-hover: $button-disabled-color;
 $button-disabled-color-active: $button-disabled-color;
 $button-disabled-border: 2px solid $button-disabled-border-color;

diff --git a/webpack.demo.config.js b/webpack.demo.config.js
diff --git a/webpack.server.config.js b/webpack.server.config.js