Merge pull request #78 from reactioncommerce/74-chip-styles

fix(chip): chip height is 32; deletable chip colors are different.
reactioncommerce · Aug 22, 2019 · 79884fd · 79884fd
2 parents 8800eae + c375b21
commit 79884fd
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/package/src/components/Button/Button.md b/package/src/components/Button/Button.md
@@ -112,6 +112,42 @@ The error button is used for a destructive action that is difficult to recover f
 </div>
 ```
 
+#### Example
+
+##### Button groups
+
+- Follow these patterns for groups of buttons in Cards and the Primary AppBar:
+
+```jsx
+<div>
+  <Button style={{marginRight: "0.5rem"}} variant="default" color="primary">Discard</Button>
+  <Button style={{marginRight: "0.5rem"}} variant="outlined" color="primary">Save changes</Button>
+  <Button style={{marginRight: "0.5rem"}} variant="contained" color="primary">Publish</Button>
+</div>
+```
+
+```jsx
+<div>
+  <Button style={{marginRight: "0.5rem"}} variant="outlined" color="primary">Cancel</Button>
+  <Button style={{marginRight: "0.5rem"}} variant="contained" color="primary">OK</Button>
+</div>
+```
+
+
+```jsx
+<div>
+  <Button style={{marginRight: "0.5rem"}} variant="outlined" color="primary">Cancel</Button>
+  <Button style={{marginRight: "0.5rem"}} variant="contained" color="primary">Save</Button>
+</div>
+```
+
+```jsx
+<div>
+  <Button style={{marginRight: "0.5rem"}} variant="outlined" color="primary">Cancel</Button>
+  <Button style={{marginRight: "0.5rem"}} variant="contained" color="error">Delete</Button>
+</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
@@ -326,7 +326,7 @@ export const rawMuiTheme = {
       root: {
         fontSize: defaultFontSize * 0.875,
         letterSpacing: captionLetterSpacing,
-        height: 30
+        height: 32
       },
       deletable: {
         "&:hover": {
@@ -335,7 +335,7 @@ export const rawMuiTheme = {
       },
       deletableColorPrimary: {
         "backgroundColor": colors.black02,
-        "border": `1px solid ${colors.black30}`,
+        "border": `1px solid ${colors.coolGrey}`,
         "color": colors.coolGrey500,
         "&:hover, &:focus, &:active": {
           backgroundColor: colors.black05