Rework buttons (#93)

* Fix spacing * Fix colors * Add button with icon * Fix guide styles * Fix typography * Make hoverOutline defauls * Pass props to component's root * Use proper typography
saleor · Dec 8, 2021 · b5536e4 · b5536e4
1 parent 44fcc98
commit b5536e4
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 57 deletions.
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -43,7 +43,7 @@ function getButtonProps(
     case "secondary":
       return { variant: "outlined", color };
     default:
-      return { variant: "text", color };
+      return { variant: "outlined", size: "small", color };
   }
 }
 

diff --git a/src/Button/styles.ts b/src/Button/styles.ts
@@ -5,33 +5,35 @@ const useStyles = makeStyles(
     primary: {
       "&&": {
         "&:hover, &.Mui-focusVisible": {
-          background: theme.palette.saleor.errorAction[2],
+          color: theme.palette.saleor.errorAction[1],
         },
         "&:active": {
-          background: theme.palette.saleor.errorAction[3],
+          background: theme.palette.saleor.errorAction[5],
         },
       },
       background: theme.palette.saleor.errorAction[1],
+      borderColor: theme.palette.saleor.errorAction[1],
     },
     primaryDisabled: {
       "&&&": {
         background: theme.palette.saleor.errorAction[5],
+        borderColor: theme.palette.saleor.errorAction[5],
       },
     },
 
     secondary: {
       "&&": {
         "&:hover, &.Mui-focusVisible": {
-          background: theme.palette.saleor.errorAction[5],
           borderColor: theme.palette.saleor.errorAction[1],
+          color: theme.palette.saleor.errorAction[1],
         },
         "&:active": {
-          background: theme.palette.saleor.errorAction[4],
+          background: theme.palette.saleor.errorAction[5],
           borderColor: theme.palette.saleor.errorAction[1],
         },
       },
       borderColor: theme.palette.saleor.errorAction[4],
-      color: theme.palette.saleor.errorAction[1],
+      color: theme.palette.saleor.errorAction[2],
     },
     secondaryDisabled: {
       "&&&": {
@@ -43,16 +45,20 @@ const useStyles = makeStyles(
     tertiary: {
       "&&": {
         "&:hover, &.Mui-focusVisible": {
-          background: theme.palette.saleor.errorAction[5],
+          borderColor: theme.palette.saleor.errorAction[1],
+          color: theme.palette.saleor.errorAction[1],
         },
         "&:active": {
-          background: theme.palette.saleor.errorAction[4],
+          background: theme.palette.saleor.errorAction[5],
+          borderColor: theme.palette.saleor.errorAction[1],
         },
       },
-      color: theme.palette.saleor.errorAction[1],
+      borderColor: theme.palette.saleor.errorAction[4],
+      color: theme.palette.saleor.errorAction[2],
     },
     tertiaryDisabled: {
       "&&&": {
+        borderColor: theme.palette.saleor.errorAction[5],
         color: theme.palette.saleor.errorAction[5],
       },
     },

diff --git a/src/IconButton/IconButton.tsx b/src/IconButton/IconButton.tsx
@@ -17,7 +17,10 @@ export type IconButtonProps<T extends React.ElementType = "button"> = Omit<
 };
 
 export const IconButton: React.FC<IconButtonProps> = React.forwardRef(
-  ({ className, error, hoverOutline, variant = "primary", ...props }, ref) => {
+  (
+    { className, error, hoverOutline = true, variant = "primary", ...props },
+    ref
+  ) => {
     const classes = useStyles();
 
     if (variant === "secondary") {

diff --git a/src/IconButton/styles.ts b/src/IconButton/styles.ts
@@ -6,16 +6,15 @@ const useStyles = makeStyles(
     error: {
       "&&": {
         "&:hover, &.Mui-focusVisible": {
-          background: theme.palette.saleor.errorAction[5],
           borderColor: theme.palette.saleor.errorAction[1],
+          color: theme.palette.saleor.errorAction[1],
         },
         "&:active": {
-          background: theme.palette.saleor.errorAction[4],
-          borderColor: theme.palette.saleor.errorAction[1],
+          background: theme.palette.saleor.errorAction[5],
         },
       },
       borderColor: theme.palette.saleor.errorAction[4],
-      color: theme.palette.saleor.errorAction[1],
+      color: theme.palette.saleor.errorAction[2],
     },
     disabledError: {
       "&&&": {
@@ -28,6 +27,7 @@ const useStyles = makeStyles(
       "&$secondary": {
         "&:hover,&:focus-visible": {
           background: theme.palette.saleor.active[5],
+          borderColor: theme.palette.saleor.active[4],
         },
         "&:active": {
           background: theme.palette.saleor.active[4],

diff --git a/src/LayoutButton/styles.ts b/src/LayoutButton/styles.ts
@@ -17,11 +17,11 @@ const useStyles = makeStyles(
       borderRadius: 4,
       color: theme.palette.text.secondary,
       fontSize: theme.typography.body1.fontSize,
-      fontWeight: 600,
-      height: 48,
+      fontWeight: 500,
+      height: 40,
+      letterSpacing: "0.06rem",
       padding: theme.spacing(0.5, 2),
       textAlign: "center",
-      textTransform: "uppercase",
       transition: theme.transitions.duration.shorter + "ms",
     },
     hover: {},

diff --git a/src/NavigationCard/NavigationCard.tsx b/src/NavigationCard/NavigationCard.tsx
@@ -1,11 +1,11 @@
-import Card from "@material-ui/core/Card";
+import Card, { CardProps } from "@material-ui/core/Card";
 import CardContent from "@material-ui/core/CardContent";
 import Typography from "@material-ui/core/Typography";
 import React from "react";
 
 import useStyles from "./styles";
 
-export interface NavigationCardProps {
+export interface NavigationCardProps extends CardProps {
   title: string;
   description: string;
   icon: React.ReactNode;
@@ -15,11 +15,12 @@ export const NavigationCard: React.FC<NavigationCardProps> = ({
   icon,
   title,
   description,
+  ...rest
 }) => {
   const classes = useStyles();
 
   return (
-    <Card className={classes.card}>
+    <Card className={classes.card} {...rest}>
       <CardContent className={classes.cardContent}>
         <div className={classes.content}>
           <div className={classes.icon}>{icon}</div>

diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts
@@ -4,7 +4,8 @@ import { SaleorThemeColors } from "../types";
 
 export const buttonOverrides = (colors: SaleorThemeColors): Overrides => {
   const containedPrimaryHover = {
-    backgroundColor: colors.active[3],
+    backgroundColor: colors.background.paper,
+    color: colors.active[1],
   };
 
   return {
@@ -38,28 +39,36 @@ export const buttonOverrides = (colors: SaleorThemeColors): Overrides => {
       containedPrimary: {
         "&&:hover": containedPrimaryHover,
         "&&:active": {
-          backgroundColor: colors.active[4],
+          backgroundColor: colors.active[5],
         },
       },
       label: {
-        fontWeight: 600,
+        fontWeight: 500,
       },
       root: {
+        "&$disabled": {
+          borderColor: colors.disabled,
+        },
+        "&:hover": {
+          backgroundColor: undefined,
+        },
+        border: `1px solid ${colors.active[1]}`,
         borderRadius: 4,
         fontSize: "1.6rem",
         letterSpacing: "0.06rem",
         lineHeight: 1.55,
-        padding: "12px 16px",
+        padding: "7px 16px",
+        textTransform: "none",
       },
       text: {
         "&&$disabled": {
           color: colors.disabled,
         },
         "&:hover, &$focusVisible": {
-          background: colors.main[5],
+          borderColor: colors.main[1],
         },
         "&:active": {
-          background: colors.main[4],
+          background: colors.main[5],
         },
       },
       textPrimary: {
@@ -86,59 +95,67 @@ export const buttonOverrides = (colors: SaleorThemeColors): Overrides => {
         },
         "&:hover, &$focusVisible": {
           borderColor: colors.main[1],
-          backgroundColor: colors.main[5],
         },
         "&:active": {
-          backgroundColor: colors.main[4],
+          backgroundColor: colors.main[5],
+        },
+        "& svg": {
+          marginRight: 8,
         },
         background: colors.background.paper,
-        borderColor: colors.main[4],
-        borderWidth: 2,
+        borderColor: colors.main[5],
+        borderWidth: 1,
         borderStyle: "solid",
-        // 2px smaller because of border
-        padding: "10px 12px",
+        // 1px smaller because of border
+        padding: "7px 12px",
       },
       outlinedPrimary: {
         "&:hover, &$focusVisible": {
           borderColor: colors.active[1],
-          backgroundColor: colors.active[5],
+          color: colors.active[1],
         },
         "&:hover": {
           // Unsets border as it will require us to override borderWidth and
           // borderStyle over and over
           border: undefined,
+          backgroundColor: undefined,
         },
         "&:active": {
-          backgroundColor: colors.active[4],
+          backgroundColor: colors.active[5],
         },
         border: undefined,
-        borderColor: colors.active[4],
+        color: undefined,
+      },
+      outlinedSizeSmall: {
+        fontSize: "1.6rem",
+        padding: "2px 12px",
       },
     },
     MuiIconButton: {
       root: {
         "&:hover, &.Mui-focusVisible": {
           borderColor: colors.active[1],
-          backgroundColor: colors.active[5],
+          color: colors.active[1],
         },
         "&:hover": {
           // Unsets border as it will require us to override borderWidth and
           // borderStyle over and over
           border: undefined,
+          backgroundColor: undefined,
         },
         "&:active": {
-          backgroundColor: colors.active[4],
+          backgroundColor: colors.active[5],
         },
         "&$disabled": {
           border: undefined,
           borderColor: "transparent",
           color: colors.disabled,
         },
         background: colors.background.paper,
-        border: `2px solid ${colors.active[4]}`,
+        border: `1px solid ${colors.main[5]}`,
         borderRadius: 4,
-        color: colors.active[1],
-        padding: 10,
+        color: colors.main[1],
+        padding: 7,
         transition: "200ms",
       },
     },

diff --git a/src/utils/Decorator.tsx b/src/utils/Decorator.tsx
@@ -17,7 +17,7 @@ export const Decorator = (storyFn: any) => (
 );
 
 export const GuideDecorator = (storyFn: any) => (
-  <Card style={{ margin: "auto", width: 700 }}>
+  <Card style={{ margin: "auto", width: 800 }}>
     <CardContent>{storyFn()}</CardContent>
   </Card>
 );
diff --git a/stories/buttons.stories.tsx b/stories/buttons.stories.tsx
@@ -1,9 +1,9 @@
 import { FormControlLabel, Typography } from "@material-ui/core";
-import Delete from "@material-ui/icons/Delete";
+import { ArrowDownward } from "@material-ui/icons";
 import { Meta, Story } from "@storybook/react";
 import React from "react";
 
-import { Button, IconButton, PillLink, LayoutButton } from "../src";
+import { Button, IconButton, PillLink, LayoutButton, DeleteIcon } from "../src";
 import { Decorator, GuideDecorator } from "../src/utils/Decorator";
 import useGuideStyles from "./guideStyles";
 import { Cell } from "./utils/Cell";
@@ -31,10 +31,10 @@ const DefaultStory: React.FC = () => {
           </Cell>
           <Cell>
             <IconButton>
-              <Delete />
+              <DeleteIcon />
             </IconButton>
             <IconButton disabled>
-              <Delete />
+              <DeleteIcon />
             </IconButton>
           </Cell>
           <Cell>
@@ -46,6 +46,16 @@ const DefaultStory: React.FC = () => {
               Clickable Pill
             </PillLink>
           </Cell>
+          <Cell>
+            <Button variant="secondary">
+              <DeleteIcon />
+              With Icon
+            </Button>
+            <Button disabled variant="secondary">
+              <DeleteIcon />
+              With Icon
+            </Button>
+          </Cell>
         </div>
         <div>
           <Cell>
@@ -83,22 +93,27 @@ const DefaultStory: React.FC = () => {
             <FormControlLabel
               control={
                 <IconButton variant="secondary">
-                  <Delete />
+                  <DeleteIcon />
                 </IconButton>
               }
-              label="default"
+              label="Delete from list"
             />
             <FormControlLabel
               control={
-                <IconButton hoverOutline variant="secondary">
-                  <Delete />
+                <IconButton hoverOutline={false} variant="secondary">
+                  <ArrowDownward />
                 </IconButton>
               }
-              label="outlined"
+              label="Expand"
+            />
+            <FormControlLabel
+              control={
+                <IconButton disabled variant="secondary">
+                  <DeleteIcon />
+                </IconButton>
+              }
+              label="Disabled"
             />
-            <IconButton disabled variant="secondary">
-              <Delete />
-            </IconButton>
           </Cell>
         </div>
       </div>
@@ -138,10 +153,10 @@ const ErrorStory: React.FC = () => {
           </Cell>
           <Cell>
             <IconButton error>
-              <Delete />
+              <DeleteIcon />
             </IconButton>
             <IconButton error disabled>
-              <Delete />
+              <DeleteIcon />
             </IconButton>
           </Cell>
         </div>

diff --git a/stories/guideStyles.ts b/stories/guideStyles.ts
@@ -1,5 +1,3 @@
-import { fade } from "@material-ui/core/styles";
-
 import { makeStyles } from "../src/theme";
 
 const useStyles = makeStyles(