fix(button): Add danger disabled states and standardize class format (#…

…23)
wework · Feb 27, 2019 · b73ac87 · b73ac87
1 parent 5e1005a
commit b73ac87
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 28 deletions.
diff --git a/packages/ray/lib/components/button/_button.scss b/packages/ray/lib/components/button/_button.scss
@@ -40,13 +40,7 @@ $btn-border-radius: $border-radius;
     border-color: $color-blue70;
   }
 
-  &[disabled] {
-    background-color: $color-blue30;
-    border-color: $color-blue30;
-    color: rgba($color-white, 0.4);
-  }
-
-  &Danger {
+  &.#{$prefix}btn--danger {
     background-color: $color-red;
     border-color: $color-red;
 
@@ -59,6 +53,18 @@ $btn-border-radius: $border-radius;
       background-color: $color-red70;
       border-color: $color-red70;
     }
+
+    &[disabled] {
+      background-color: $color-red30;
+      border-color: $color-red30;
+      color: rgba($color-white, 0.4);
+    }
+  }
+
+  &[disabled] {
+    background-color: $color-blue30;
+    border-color: $color-blue30;
+    color: rgba($color-white, 0.4);
   }
 }
 
@@ -74,13 +80,7 @@ $btn-border-radius: $border-radius;
     background-color: $color-blue20;
   }
 
-  &[disabled] {
-    background-color: $color-white;
-    border-color: rgba($color-blue50, 0.4);
-    color: rgba($color-blue50, 0.4);
-  }
-
-  &Danger {
+  &.#{$prefix}btn--danger {
     border-color: $color-red;
     color: $color-red;
 
@@ -91,6 +91,18 @@ $btn-border-radius: $border-radius;
     &:focus {
       background-color: $color-red20;
     }
+
+    &[disabled] {
+      background-color: $color-white;
+      border-color: rgba($color-red50, 0.4);
+      color: rgba($color-red50, 0.4);
+    }
+  }
+
+  &[disabled] {
+    background-color: $color-white;
+    border-color: rgba($color-blue50, 0.4);
+    color: rgba($color-blue50, 0.4);
   }
 }
 
@@ -113,11 +125,7 @@ $btn-border-radius: $border-radius;
     color: $color-blue70;
   }
 
-  &[disabled] {
-    color: rgba($color-blue50, 0.4);
-  }
-
-  &Danger {
+  &.#{$prefix}btn--danger {
     color: $color-red;
 
     &:hover {
@@ -127,5 +135,13 @@ $btn-border-radius: $border-radius;
     &:focus {
       color: $color-red70;
     }
+
+    &[disabled] {
+      color: rgba($color-red50, 0.4);
+    }
+  }
+
+  &[disabled] {
+    color: rgba($color-blue50, 0.4);
   }
 }
diff --git a/packages/ray/stories/buttons.stories.js b/packages/ray/stories/buttons.stories.js
@@ -1,10 +1,8 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 
-import withPadding from './util/withPadding';
-
 const Divider = () => (
-  <span style={{ width: '30px', display: 'inline-block' }} />
+  <div style={{ marginBottom: '1rem', display: 'block' }} />
 );
 
 storiesOf('Buttons', module)
@@ -24,13 +22,20 @@ storiesOf('Buttons', module)
         Compact Disabled
       </button>
       <Divider />
-      <button className="ray--btn ray--btn--primary ray--btn--primaryDanger">
+      <button className="ray--btn ray--btn--primary ray--btn--danger">
         Click me danger
       </button>
       <Divider />
-      <button className="ray--btn ray--btn--primary ray--btn--compact ray--btn--primaryDanger">
+      <button className="ray--btn ray--btn--primary ray--btn--compact ray--btn--danger">
         Compact click me danger
       </button>
+      <Divider />
+      <button
+        className="ray--btn ray--btn--primary ray--btn--compact ray--btn--danger"
+        disabled
+      >
+        Compact click me danger disabled
+      </button>
     </>
   ))
   .addWithJSX('secondary', () => (
@@ -52,14 +57,20 @@ storiesOf('Buttons', module)
         Compact Disabled
       </button>
       <Divider />
-      <button className="ray--btn ray--btn--secondary ray--btn--secondaryDanger">
+      <button className="ray--btn ray--btn--secondary ray--btn--danger">
         Click me danger
       </button>
       <Divider />
-      <button className="ray--btn ray--btn--secondary ray--btn--compact ray--btn--secondaryDanger">
+      <button className="ray--btn ray--btn--secondary ray--btn--compact ray--btn--danger">
         Compact click me danger
       </button>
       <Divider />
+      <button
+        className="ray--btn ray--btn--secondary ray--btn--compact ray--btn--danger"
+        disabled
+      >
+        Compact click me danger disabled
+      </button>
     </>
   ))
   .addWithJSX('tertiary', () => (
@@ -81,13 +92,19 @@ storiesOf('Buttons', module)
         Compact disabled
       </button>
       <Divider />
-      <button className="ray--btn ray--btn--tertiary ray--btn--tertiaryDanger">
+      <button className="ray--btn ray--btn--tertiary ray--btn--danger">
         Click me danger
       </button>
       <Divider />
-      <button className="ray--btn ray--btn--tertiary ray--btn--compact ray--btn--tertiaryDanger">
+      <button className="ray--btn ray--btn--tertiary ray--btn--compact ray--btn--danger">
         Compact click me danger
       </button>
       <Divider />
+      <button
+        className="ray--btn ray--btn--tertiary ray--btn--compact ray--btn--danger"
+        disabled
+      >
+        Compact click me danger disabled
+      </button>
     </>
   ));