Merge pull request #56 from reactioncommerce/55-button-style

fix(button): add correct fontsize, fontweight and document
reactioncommerce · Aug 14, 2019 · ecd7805 · ecd7805
2 parents bb0cd66 + bc1b45e
commit ecd7805
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 40 deletions.
diff --git a/package/src/components/Button/Button.md b/package/src/components/Button/Button.md
@@ -1,85 +1,113 @@
-### Overview
-
-The Catalyst Button inherits from the Material-UI [Button component](https://material-ui.com/components/buttons/). Refer to the Material-UI [Button API docs](https://material-ui.com/api/button/) for more information. 
+```jsx noeditor
+<div style={{ marginBottom: "2rem", border: "1px solid #e6e6e6", padding: "1rem"}}>
+  <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-evently", marginBottom: "1rem" }}>
+    <div style={{marginRight: "1rem"}}>
+      <Button variant="contained" color="primary">Solid</Button>
+    </div>
+    <div style={{marginRight: "1rem"}}>
+      <Button variant="outlined" color="primary">Outlined</Button>
+    </div>
+    <div style={{marginRight: "1rem"}}>
+      <Button>Text-only</Button>
+    </div>
+    <div style={{marginRight: "1rem"}}>
+      <Button variant="contained" color="error">Error</Button>
+    </div>
+    <div style={{ marginRight: "1rem" }}>
+      <Button variant="outlined" color="error">Error</Button>
+    </div>
+  </div>
+  <div style={{ display: "flex", flexWrap: "wrap", justifyContent: "space-evently"}}>
+    <div style={{marginRight: "1rem"}}>
+      <Button size="small" variant="contained" color="primary">Solid</Button>
+    </div>
+    <div style={{marginRight: "1rem"}}>
+      <Button size="small" variant="outlined" color="primary">Outlined</Button>
+    </div>
+    <div style={{marginRight: "1rem"}}>
+      <Button size="small">Text-only</Button>
+    </div>
+    <div style={{marginRight: "1rem"}}>
+      <Button size="small" variant="contained" color="error">Error</Button>
+    </div>
+    <div style={{ marginRight: "1rem" }}>
+      <Button size="small" variant="outlined" color="error">Error</Button>
+    </div>
+  </div>
+</div>
+```
 
 ### Usage
 
+#### Types
 
-#### Default Catalyst button
-
-This is what a button with all the default prop options looks like:
+##### Contained buttons
 
 ```jsx
 <div style={{ display: "flex" }}>
   <div style={{ marginRight: "1rem" }}>
-    <Button>Text-only</Button>
+    <Button variant="contained" color="primary">Contained</Button>
   </div>
 </div>
 ```
 
-It's a button with `variant` set to `text`, `size` set to `medium`, `color` set to `default`.
-
-#### Material UI options
-
-- **Solid (Contained) button**: The solid button is used for a primary action in a modal, card, large view and generally throughout.
-- **Outline button**: The outline button is used for a secondary or dismissive action. The outline button should be paired with the solid button in cases such as dismissing a modal or canceling an action.
+##### Outlined buttons
 
 ```jsx
 <div style={{ display: "flex" }}>
   <div style={{ marginRight: "1rem" }}>
-    <Button>Text-only</Button>
-  </div>
-  <div style={{ marginRight: "1rem" }}>
-    <Button variant="contained">Solid</Button>
+    <Button variant="outlined" color="primary">Outlined</Button>
   </div>
   <div style={{ marginRight: "1rem" }}>
-    <Button variant="outlined">Outlined</Button>
+    <Button variant="outlined" color="error">Outlined</Button>
   </div>
 </div>
 ```
 
-- **Disabled**:
+##### Error buttons
+
+The error button is used for a destructive action that is difficult to recover from such as deleting information. The error button should be used at the point that the destructive action actually takes place.
 
 ```jsx
 <div style={{ display: "flex" }}>
   <div style={{ marginRight: "1rem" }}>
-    <Button variant="contained" disabled>Disabled</Button>
+    <Button variant="contained" color="error">Error</Button>
+  </div>
+  <div style={{ marginRight: "1rem" }}>
+    <Button variant="outlined" color="error">Error</Button>
   </div>
 </div>
 ```
 
-- **Full Width**:
+##### Text buttons
 
 ```jsx
-<div style={{ display: "block" }}>
-  <Button variant="contained" fullWidth>FullWidth</Button>
+<div style={{ display: "flex" }}>
+  <div style={{ marginRight: "1rem" }}>
+    <Button variant="text" color="primary">Text</Button>
+  </div>
 </div>
 ```
 
-#### Catalyst-custom buttons
-
-- **Error button**: The error button is used for a destructive action that is difficult to recover from such as deleting information. The error button should be used at the point that the destructive action actually takes place. For example, you can have a delete button as a secondary action on a page and in this case you would use a an outline button, the outline button would then trigger a modal confirmation, which is where you would use the error button.
+##### Small buttons
 
 ```jsx
 <div style={{ display: "flex" }}>
   <div style={{ marginRight: "1rem" }}>
-    <Button variant="contained" color="error">Error - Contained</Button>
+    <Button size="small" variant="contained" color="primary">Button</Button>
   </div>
   <div style={{ marginRight: "1rem" }}>
-    <Button variant="outlined" color="error">Error - Outlined</Button>
+    <Button size="small" variant="outlined" color="primary">Button</Button>
   </div>
-</div>
-```
-
-- **isWaiting**: The `isWaiting` prop combines `disabled` with a CircularProgress animation.
-
-```jsx
-<div style={{ display: "flex" }}>
   <div style={{ marginRight: "1rem" }}>
-    <Button variant="contained" isWaiting>isWaiting - Contained</Button>
+    <Button size="small" variant="outlined" color="error" size="small">Error - Small</Button>
   </div>
   <div style={{ marginRight: "1rem" }}>
-    <Button variant="outlined" isWaiting>isWaiting - Outlined</Button>
+    <Button variant="text" size="small">Text - Small</Button>
   </div>
 </div>
 ```
+
+### API
+
+The Catalyst Button inherits from the Material-UI [Button component](https://material-ui.com/components/buttons/). Refer to the Material-UI [Button API docs](https://material-ui.com/api/button/) for more information.
diff --git a/package/src/theme/defaultTheme.js b/package/src/theme/defaultTheme.js
@@ -55,8 +55,9 @@ export const rawMuiTheme = {
     fontWeightBold,
     useNextVariants: true,
     button: {
-      fontSize: 14,
-      letterSpacing: 0.8
+      fontSize: defaultFontSize,
+      letterSpacing: 0.3,
+      fontWeight: fontWeightSemiBold
     },
     h1: {
       color: colors.coolGrey500,
@@ -219,6 +220,8 @@ export const rawMuiTheme = {
       },
       text: {
         color: colors.coolGrey400,
+        fontWeight: fontWeightRegular,
+        fontSize: defaultFontSize * 0.875,
         padding: `${defaultSpacingUnit}px ${defaultSpacingUnit * 2}px`
       },
       outlined: {
@@ -228,10 +231,14 @@ export const rawMuiTheme = {
         padding: `${defaultSpacingUnit - 1}px ${defaultSpacingUnit * 2}px`
       },
       outlinedPrimary: {
-        border: `1px solid ${colorPrimaryMain}`
+        border: `1px solid ${colorPrimaryMain}`,
+        color: colors.coolGrey500
       },
       outlinedSecondary: {
         border: `1px solid ${colorSecondaryMain}`
+      },
+      sizeSmall: {
+        fontSize: defaultFontSize * 0.875
       }
     },
     MuiCard: {