Add text color button variants (#84)

* Add text color button variants * Indicate variant in button label
saleor · Nov 25, 2021 · 9ae0107 · 9ae0107
1 parent 67cb115
commit 9ae0107
Show file tree

Hide file tree

Showing 5 changed files with 82 additions and 37 deletions.
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
@@ -9,14 +9,18 @@ import React from "react";
 import useStyles from "./styles";
 
 export type ButtonVariant = "primary" | "secondary" | "tertiary";
+// Aliasing "default" to "text" because "default" isn't actually default
+export type ButtonColor = "primary" | "secondary" | "text";
 
 interface ButtonInnerProps {
+  color?: ButtonColor;
   error?: boolean;
   variant?: ButtonVariant;
 }
 
 export interface ButtonTypeMap<P = {}, D extends React.ElementType = "button"> {
-  props: Omit<MuiButtonTypeMap<P, D>["props"], "variant"> & ButtonInnerProps;
+  props: Omit<MuiButtonTypeMap<P, D>["props"], "variant" | "color"> &
+    ButtonInnerProps;
   defaultComponent: D;
   classKey: never;
 }
@@ -27,19 +31,25 @@ export type ButtonProps<T extends React.ElementType = "button"> = Omit<
 > &
   ButtonInnerProps;
 
-function getButtonProps(variant: ButtonVariant): Partial<MuiButtonProps> {
+function getButtonProps(
+  colorProp: ButtonColor,
+  variant: ButtonVariant
+): Partial<MuiButtonProps> {
+  const color = colorProp === "text" ? "default" : colorProp;
+
   switch (variant) {
     case "primary":
-      return { variant: "contained", color: "primary" };
+      return { variant: "contained", color };
     case "secondary":
-      return { variant: "outlined", color: "primary" };
+      return { variant: "outlined", color };
     default:
-      return { variant: "text", color: "primary" };
+      return { variant: "text", color };
   }
 }
 
 const _Button: React.FC<ButtonProps> = ({
   className,
+  color = "primary",
   error,
   variant = "tertiary",
   ...props
@@ -61,7 +71,7 @@ const _Button: React.FC<ButtonProps> = ({
         [classes.tertiaryDisabled]:
           variant === "tertiary" && error && props.disabled,
       })}
-      {...getButtonProps(variant)}
+      {...getButtonProps(color, variant)}
       disableRipple
       {...props}
     />

diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts
@@ -55,6 +55,12 @@ export const buttonOverrides = (colors: SaleorThemeColors): Overrides => {
         "&&$disabled": {
           color: colors.disabled,
         },
+        "&:hover, &$focusVisible": {
+          background: colors.main[5],
+        },
+        "&:active": {
+          background: colors.main[4],
+        },
       },
       textPrimary: {
         "&:hover, &$focusVisible": {
@@ -73,8 +79,22 @@ export const buttonOverrides = (colors: SaleorThemeColors): Overrides => {
           borderColor: colors.disabled,
           color: colors.disabled,
         },
+        "&:hover": {
+          // Unsets border as it will require us to override borderWidth and
+          // borderStyle over and over
+          border: undefined,
+        },
+        "&:hover, &$focusVisible": {
+          borderColor: colors.main[1],
+          backgroundColor: colors.main[5],
+        },
+        "&:active": {
+          backgroundColor: colors.main[4],
+        },
         background: colors.background.paper,
-        border: `2px solid ${colors.active[4]}`,
+        borderColor: colors.main[4],
+        borderWidth: 2,
+        borderStyle: "solid",
         // 2px smaller because of border
         padding: "10px 12px",
       },
@@ -92,6 +112,7 @@ export const buttonOverrides = (colors: SaleorThemeColors): Overrides => {
           backgroundColor: colors.active[4],
         },
         border: undefined,
+        borderColor: colors.active[4],
       },
     },
     MuiIconButton: {

diff --git a/src/theme/createSaleorTheme/types.ts b/src/theme/createSaleorTheme/types.ts
@@ -36,7 +36,7 @@ export type SaleorThemeColors = Record<
   alert: AlertColors;
   theme: ThemeType;
   fail: Record<"dark" | "mid" | "light", string>;
-  main: Record<1 | 2 | 3 | 4, string>;
+  main: Record<1 | 2 | 3 | 4 | 5, string>;
   active: Record<1 | 2 | 3 | 4 | 5, string>;
   errorAction: Record<1 | 2 | 3 | 4 | 5, string>;
 };

diff --git a/src/theme/themes.ts b/src/theme/themes.ts
@@ -54,6 +54,7 @@ export const dark: SaleorThemeColors = {
     2: "rgba(252, 252, 252, 0.8)",
     3: "rgba(252, 252, 252, 0.6)",
     4: "rgba(252, 252, 252, 0.4)",
+    5: "rgba(252, 252, 252, 0.1)",
   },
   fail: {
     dark: "#B65757",
@@ -127,6 +128,7 @@ export const light: SaleorThemeColors = {
     2: "rgba(40, 35, 74, 0.8)",
     3: "rgba(40, 35, 74, 0.6)",
     4: "rgba(40, 35, 74, 0.4)",
+    5: "rgba(40, 35, 74, 0.1)",
   },
   fail: {
     dark: "#B65757",

diff --git a/stories/buttons.stories.tsx b/stories/buttons.stories.tsx
@@ -38,25 +38,13 @@ const DefaultStory: React.FC = () => {
             </IconButton>
           </Cell>
           <Cell>
-            <FormControlLabel
-              control={
-                <IconButton variant="secondary">
-                  <Delete />
-                </IconButton>
-              }
-              label="default"
-            />
-            <FormControlLabel
-              control={
-                <IconButton hoverOutline variant="secondary">
-                  <Delete />
-                </IconButton>
-              }
-              label="outlined"
-            />
-            <IconButton disabled variant="secondary">
-              <Delete />
-            </IconButton>
+            <PillLink href="#">Clickable Pill</PillLink>
+            <PillLink href="#" state="hover">
+              Clickable Pill
+            </PillLink>
+            <PillLink href="#" state="active">
+              Clickable Pill
+            </PillLink>
           </Cell>
         </div>
         <div>
@@ -65,15 +53,17 @@ const DefaultStory: React.FC = () => {
             <Button disabled variant="secondary">
               Secondary
             </Button>
+            <Button variant="secondary" color="text">
+              Secondary Text
+            </Button>
+            <Button disabled variant="secondary" color="text">
+              Secondary Text
+            </Button>
           </Cell>
           <Cell>
-            <PillLink href="#">Clickable Pill</PillLink>
-            <PillLink href="#" state="hover">
-              Clickable Pill
-            </PillLink>
-            <PillLink href="#" state="active">
-              Clickable Pill
-            </PillLink>
+            <LayoutButton>Layout</LayoutButton>
+            <LayoutButton state="hover">Layout</LayoutButton>
+            <LayoutButton state="active">Layout</LayoutButton>
           </Cell>
         </div>
         <div>
@@ -82,11 +72,33 @@ const DefaultStory: React.FC = () => {
             <Button disabled variant="tertiary">
               Tertiary
             </Button>
+            <Button variant="tertiary" color="text">
+              Tertiary Text
+            </Button>
+            <Button disabled variant="tertiary" color="text">
+              Tertiary Text
+            </Button>
           </Cell>
           <Cell>
-            <LayoutButton>Layout</LayoutButton>
-            <LayoutButton state="hover">Layout</LayoutButton>
-            <LayoutButton state="active">Layout</LayoutButton>
+            <FormControlLabel
+              control={
+                <IconButton variant="secondary">
+                  <Delete />
+                </IconButton>
+              }
+              label="default"
+            />
+            <FormControlLabel
+              control={
+                <IconButton hoverOutline variant="secondary">
+                  <Delete />
+                </IconButton>
+              }
+              label="outlined"
+            />
+            <IconButton disabled variant="secondary">
+              <Delete />
+            </IconButton>
           </Cell>
         </div>
       </div>