feat(button): add css for disabled state

cft-group · Jul 14, 2020 · 7878e9b · 7878e9b
1 parent c4dceb5
commit 7878e9b
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/src/packages/core/src/button/button.css b/src/packages/core/src/button/button.css
@@ -41,3 +41,20 @@
   padding: 0 var(--S20);
   font: var(--H3);
 }
+
+._e_button_disabled {
+  cursor: default;
+  pointer-events: none;
+  background-color: var(--N50);
+  color: var(--N200);
+
+  &._e_button_appearance_primary {
+    background-color: var(--N200);
+    color: var(--N0);
+  }
+
+  &._e_button_appearance_danger {
+    background-color: var(--N200);
+    color: var(--N0);
+  }
+}
diff --git a/src/packages/core/src/button/button.html b/src/packages/core/src/button/button.html
@@ -15,3 +15,9 @@
   <button class="_e_button _e_button_size_large _e_button_appearance_primary">Click Me</button>
   <button class="_e_button _e_button_size_large _e_button_appearance_danger">Click Me</button>
 </p>
+
+<p>
+  <button disabled class="_e_button _e_button_disabled">Click Me</button>
+  <button disabled class="_e_button _e_button_disabled _e_button_appearance_primary">Click Me</button>
+  <button disabled class="_e_button _e_button_disabled _e_button_appearance_danger">Click Me</button>
+</p>
diff --git a/src/packages/core/src/button/button.stories.mdx b/src/packages/core/src/button/button.stories.mdx
@@ -8,7 +8,7 @@ import button from './button.html';
 # Button
 
 <Preview>
-  <Story name="default" height="240px" parameters={{ docs: { source: { code: pretty(button) } } }}>
+  <Story name="default" height="280px" parameters={{ docs: { source: { code: pretty(button) } } }}>
     { () => button }
   </Story>
 </Preview>