Merge pull request #193 from rdjpalmer/button-styling

Update `<Btn />` styling
appearhere · Mar 10, 2017 · c6cb58c · c6cb58c
2 parents 416da15 + 3ccdc78
commit c6cb58c
Show file tree

Hide file tree

Showing 8 changed files with 221 additions and 54 deletions.
diff --git a/components/Btn/Btn.css b/components/Btn/Btn.css
@@ -1,25 +1,31 @@
 .root {
-  padding: var(--size-medium) var(--size-large);
-  background-color: var(--color-black);
-  color: var(--color-white);
-  border-width: 1px;
+  background-color: var(--color-greyDarker);
+  border-color: var(--color-greyDarker);
+  border-radius: 0;
+  border-radius: 2px;
   border-style: solid;
-  border-color: var(--color-black);
-  text-transform: uppercase;
-  composes: fontSmallI from '../../globals/typography.css';
-  line-height: 1.4;
+  border-width: 1px;
+  color: var(--color-white);
+  composes: fontRegular from '../../globals/typography.css';
   font-weight: var(--fontweight-demi);
   cursor: pointer;
-  transition: background-color 300ms, color 300ms;
-  transition-timing-function: cubic-bezier(0,1,.75,1);
-  border-radius: 0;
-  text-decoration: none;
   display: inline-block;
+  line-height: 1;
+  padding: var(--size-small) var(--size-medium);
+  text-decoration: none;
+  transition-timing-function: cubic-bezier(0,1,.75,1);
+  transition: background-color 300ms, color 300ms, border-color 300ms;
+  -webkit-font-smoothing: antialiased;
+}
+
+.root svg {
+  vertical-align: top;
 }
 
 .root:focus,
 .root:hover {
-  background-color: var(--color-black--light);
+  background-color: var(--color-greyDark);
+  border-color: var(--color-greyDark);
   color: var(--color-white);
 }
 
@@ -32,19 +38,19 @@
 }
 
 .root.hollow {
-  color: var(--color-black);
+  color: var(--color-grey);
   background-color: transparent;
-  border-color: currentColor;
+  border-color: var(--color-greyLighter);
 }
 
 .root.hollow:focus,
 .root.hollow:hover {
-  background-color: var(--color-black);
-  color: var(--color-white);
+  border-color: var(--color-greyDark);
+  color: var(--color-greyDark);
 }
 
 .root.subtle {
-  color: var(--color-black);
+  color: var(--color-greyDarker);
   background-color: transparent;
   border-color: transparent;
   text-decoration: underline;
@@ -53,7 +59,7 @@
 
 .root.subtle:focus,
 .root.subtle:hover {
-  color: var(--color-primary--light);
+  color: var(--color-grey);
 }
 
 .primary {
@@ -76,16 +82,16 @@
 
 .primary.hollow:focus,
 .primary.hollow:hover {
-  background-color: var(--color-primary);
-  color: var(--color-white);
+  border-color: var(--color-primary--light);
+  color: var(--color-primary);
 }
 
 .primary.subtle {
   color: var(--color-primary);
   background-color: transparent;
   border-color: transparent;
   text-decoration: underline;
-  text-decoration-color: var(--color-black);
+  text-decoration-color: var(--color-greyLighter);
 }
 
 .primary.subtle:focus,
@@ -94,7 +100,49 @@
   background-color: transparent;
   border-color: transparent;
   text-decoration: underline;
-  text-decoration-color: var(--color-black);
+  text-decoration-color: var(--color-greyLighter);
+}
+
+.action {
+  background-color: var(--color-action);
+  color: var(--color-white);
+  border-color: var(--color-action);
+}
+
+.action:focus,
+.action:hover {
+  background-color: var(--color-action--light);
+  color: var(--color-white);
+  border-color: var(--color-action--light);
+}
+
+.action.hollow {
+  color: var(--color-action);
+  background-color: transparent;
+  border-color: var(--color-action);
+}
+
+.action.hollow:focus,
+.action.hollow:hover {
+  border-color: var(--color-action--light);
+  color: var(--color-action--light);
+}
+
+.action.subtle {
+  color: var(--color-action);
+  background-color: transparent;
+  border-color: transparent;
+  text-decoration: underline;
+  text-decoration-color: var(--color-greyLighter);
+}
+
+.action.subtle:focus,
+.action.subtle:hover {
+  color: var(--color-action--light);
+  background-color: transparent;
+  border-color: transparent;
+  text-decoration: underline;
+  text-decoration-color: var(--color-greyLighter);
 }
 
 .danger {
@@ -117,16 +165,16 @@
 
 .danger.hollow:focus,
 .danger.hollow:hover {
-  background-color: var(--color-danger);
-  color: var(--color-white);
+  border-color: var(--color-danger--light);
+  color: var(--color-danger--light);
 }
 
 .danger.subtle {
   color: var(--color-danger);
   background-color: transparent;
   border-color: transparent;
   text-decoration: underline;
-  text-decoration-color: var(--color-black);
+  text-decoration-color: var(--color-greyLighter);
 }
 
 .danger.subtle:focus,
@@ -135,42 +183,45 @@
   background-color: transparent;
   border-color: transparent;
   text-decoration: underline;
-  text-decoration-color: var(--color-black);
+  text-decoration-color: var(--color-greyLighter);
 }
 
 .whiteout {
-  color: var(--color-black);
-  background-color: var(--color-white);
-  border-color: var(--color-white);
+  background-color: var(--color-greyLightest);
+  border-color: var(--color-greyLightest);
+  color: var(--color-greyDarker);
 }
 
 .whiteout:focus,
 .whiteout:hover {
-  background-color: var(--color-black--light);
-  border-color: var(--color-black--light);
-  color: var(--color-white);
+  background-color: var(--color-white);
+  border-color: var(--color-white);
+  color: var(--color-greyDarkest);
 }
 
 .whiteout.hollow {
-  color: var(--color-white);
+  color: var(--color-greyLighter);
   background-color: transparent;
-  border-color: var(--color-white);
+  border-color: var(--color-greyLighter);
 }
 
 .whiteout.hollow:focus,
 .whiteout.hollow:hover {
-  background-color: var(--color-white);
-  color: var(--color-black);
+  background-color: transparent;
+  border-color: var(--color-white);
+  color: var(--color-white);
 }
 
 .whiteout.subtle {
-  color: var(--color-white);
+  color: var(--color-greyLighter);
   background-color: transparent;
   border-color: transparent;
-  text-decoration: none;
+  text-decoration: underline;
+  text-decoration-color: var(--color-greyLighter);
 }
 
 .whiteout.subtle:focus,
 .whiteout.subtle:hover {
-  color: var(--color-primary);
+  color: var(--color-white);
+  text-decoration-color: var(--color-white);
 }
diff --git a/components/Btn/Btn.js b/components/Btn/Btn.js
@@ -46,7 +46,7 @@ Btn.propTypes = {
   type: PropTypes.oneOf(['submit', 'reset', 'button', 'menu']),
   disabled: PropTypes.bool,
 
-  context: PropTypes.oneOf(['primary', 'danger', 'whiteout']),
+  context: PropTypes.oneOf(['primary', 'danger', 'action', 'whiteout']),
   variant: PropTypes.oneOf(['hollow', 'subtle']),
 };
 

diff --git a/components/Btn/Btn.story.js b/components/Btn/Btn.story.js
@@ -2,71 +2,100 @@ import React from 'react';
 import { storiesOf, action } from '@kadira/storybook';
 import Btn from './Btn';
 import m from '../../globals/modifiers.css';
+import Icon from '../Icon/Icon';
+import Loader from '../Loader/Loader';
 
 storiesOf('Btn', module)
   .add('Default button', () => (
     <Btn onClick={ action('Button clicked') }>
-      Like
+      Cancel
+    </Btn>
+  ))
+  .add('with Icon', () => (
+    <Btn onClick={ action('Button clicked') }>
+      <Icon className={ m.mrs } name="cross" />
+      Cancel
+    </Btn>
+  ))
+  .add('with Loader', () => (
+    <Btn onClick={ action('Button clicked') }>
+      <Loader className={ m.mrs } />
+      Cancel
     </Btn>
   ))
   .add('Primary context', () => (
     <Btn context="primary" onClick={ action('Button clicked') }>
-      Like
+      Submit
+    </Btn>
+  ))
+  .add('Action context', () => (
+    <Btn context="action" onClick={ action('Button clicked') }>
+      Submit
     </Btn>
   ))
   .add('Danger context', () => (
     <Btn context="danger" onClick={ action('Button clicked') }>
-      Like
+      Delete
     </Btn>
   ))
   .add('Hollow variant', () => (
     <Btn variant="hollow" onClick={ action('Button clicked') }>
-      Like
+      Cancel
     </Btn>
   ))
   .add('Subtle variant', () => (
     <Btn variant="subtle" onClick={ action('Button clicked') }>
-      Like
+      Cancel
     </Btn>
   ))
   .add('Primary hollow button', () => (
     <Btn context="primary" variant="hollow" onClick={ action('Button clicked') }>
-      Like
+      Submit
     </Btn>
   ))
   .add('Primary subtle button', () => (
     <Btn context="primary" variant="subtle" onClick={ action('Button clicked') }>
-      Like
+      Submit
+    </Btn>
+  ))
+  .add('Action hollow button', () => (
+    <Btn context="action" variant="hollow" onClick={ action('Button clicked') }>
+      Submit
+    </Btn>
+  ))
+  .add('Action subtle button', () => (
+    <Btn context="action" variant="subtle" onClick={ action('Button clicked') }>
+      Submit
     </Btn>
   ))
   .add('Danger hollow button', () => (
     <Btn context="danger" variant="hollow" onClick={ action('Button clicked') }>
-      Like
+      Delete
     </Btn>
   ))
   .add('Danger subtle button', () => (
     <Btn context="danger" variant="subtle" onClick={ action('Button clicked') }>
-      Like
+      Delete
     </Btn>
   ))
   .add('Whiteout button', () => (
     <div className={[m.pal, m.bgBlack].join(' ')}>
       <Btn context="whiteout" onClick={ action('Button clicked') }>
-        Like
+        Cancel
       </Btn>
     </div>
   ))
   .add('Whiteout hollow button', () => (
     <div className={[m.pal, m.bgBlack].join(' ')}>
       <Btn context="whiteout" variant="hollow" onClick={ action('Button clicked') }>
-        Like
+        Cancel
       </Btn>
     </div>
   ))
   .add('Whiteout subtle button', () => (
     <div className={[m.pal, m.bgBlack].join(' ')}>
       <Btn context="whiteout" variant="subtle" onClick={ action('Button clicked') }>
-        Like
+        Cancel
       </Btn>
     </div>
   ));