fix(Button): Update secondary button (#223)

According to input from Theresa.
nordnet · May 17, 2017 · 2f410d8 · 2f410d8
1 parent d86969a
commit 2f410d8
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 9 deletions.
diff --git a/src/components/button/button-styles.jsx b/src/components/button/button-styles.jsx
@@ -159,12 +159,12 @@ export default createStyleSheet('Button', theme => {
 
     secondary: {
       background: 'none',
-      color: palette.background.secondary,
-      border: `2px solid ${palette.background.secondary}`,
+      color: palette.color.grayDark,
+      border: `2px solid ${palette.color.gray}`,
 
       '&:hover': {
-        color: c(palette.background.secondary).darken(0.1).hex(),
-        borderColor: c(palette.background.secondary).darken(0.1).hex(),
+        color: c(palette.color.grayDark).darken(0.1).hex(),
+        borderColor: c(palette.color.gray).darken(0.1).hex(),
       },
 
       '&:disabled': {
@@ -177,6 +177,10 @@ export default createStyleSheet('Button', theme => {
         },
       },
 
+      '&.xs,&.sm': {
+        borderWidth: '1px',
+      },
+
       '&.action': buttonModifierFn(
         'secondary',
         palette.variant.primary,

diff --git a/src/components/button/button.jsx b/src/components/button/button.jsx
@@ -26,6 +26,7 @@ function Button({ variant, block, disabled, className, children, modifier, href,
       danger: isDanger,
     },
     classes[size],
+    size,
     className,
   );
 

diff --git a/src/components/button/button.md b/src/components/button/button.md
@@ -31,13 +31,46 @@ Secondary button:
     const style = {
       marginRight: 16,
     };
+    const groupstyle = {
+      marginTop: 16,
+    };
 
     <div>
-      <Button variant="secondary" style={ style }>Click Me</Button>
-      <Button variant="secondary" modifier="action" style={ style }>Click Me</Button>
-      <Button variant="secondary" modifier="danger" style={ style }>Click Me</Button>
-      <Button variant="secondary" modifier="warning" style={ style }>Click Me</Button>
-      <Button variant="secondary" modifier="success" style={ style }>Click Me</Button>
+      <div style={groupstyle}>
+        <div>size: xs</div>
+        <Button size="xs" variant="secondary" style={ style }>Click Me</Button>
+        <Button size="xs" variant="secondary" modifier="action" style={ style }>Click Me</Button>
+        <Button size="xs" variant="secondary" modifier="danger" style={ style }>Click Me</Button>
+        <Button size="xs" variant="secondary" modifier="warning" style={ style }>Click Me</Button>
+        <Button size="xs" variant="secondary" modifier="success" style={ style }>Click Me</Button>
+      </div>
+
+      <div style={groupstyle}>
+        <div>size: sm</div>
+        <Button size="sm" variant="secondary" style={ style }>Click Me</Button>
+        <Button size="sm" variant="secondary" modifier="action" style={ style }>Click Me</Button>
+        <Button size="sm" variant="secondary" modifier="danger" style={ style }>Click Me</Button>
+        <Button size="sm" variant="secondary" modifier="warning" style={ style }>Click Me</Button>
+        <Button size="sm" variant="secondary" modifier="success" style={ style }>Click Me</Button>
+      </div>
+
+      <div style={groupstyle}>
+        <div>size: md</div>
+        <Button size="md" variant="secondary" style={ style }>Click Me</Button>
+        <Button size="md" variant="secondary" modifier="action" style={ style }>Click Me</Button>
+        <Button size="md" variant="secondary" modifier="danger" style={ style }>Click Me</Button>
+        <Button size="md" variant="secondary" modifier="warning" style={ style }>Click Me</Button>
+        <Button size="md" variant="secondary" modifier="success" style={ style }>Click Me</Button>
+      </div>
+
+      <div style={groupstyle}>
+        <div>size: lg</div>
+        <Button size="lg" variant="secondary" style={ style }>Click Me</Button>
+        <Button size="lg" variant="secondary" modifier="action" style={ style }>Click Me</Button>
+        <Button size="lg" variant="secondary" modifier="danger" style={ style }>Click Me</Button>
+        <Button size="lg" variant="secondary" modifier="warning" style={ style }>Click Me</Button>
+        <Button size="lg" variant="secondary" modifier="success" style={ style }>Click Me</Button>
+      </div>
     </div>
 
 Secondary, disabled:
-Original file line number
+Diff line change
@@ Expand Up @@
           danger: isDanger,
         },
         classes[size],
+        size,
         className,
       );
@@ Expand Down @@