idea: button color prop

chanzuckerberg · Jan 29, 2022 · 11af1da · 11af1da
1 parent d2e4a7a
commit 11af1da
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 20 deletions.
diff --git a/src/core/Button/index.tsx b/src/core/Button/index.tsx
@@ -1,25 +1,19 @@
 import { ButtonProps as RawButtonProps } from "@material-ui/core";
 import React from "react";
 import {
+  ExtraProps,
   PrimaryMinimalButton,
   RoundedButton,
   SecondaryMinimalButton,
   SquareButton,
   StyledButton,
 } from "./style";
 
-interface SdsProps {
-  isAllCaps?: boolean;
-  isRounded?: boolean;
-  sdsStyle?: "minimal" | "rounded" | "square";
-  sdsType?: "primary" | "secondary";
-}
-export type ButtonProps = RawButtonProps & SdsProps;
+export type ButtonProps = RawButtonProps & ExtraProps;
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (props: ButtonProps, ref): JSX.Element | null => {
-    const sdsStyle = props?.sdsStyle;
-    const sdsType = props?.sdsType;
+    const { color = "primary", sdsStyle, sdsType } = props;
 
     if (!sdsStyle || !sdsType) {
       // eslint-disable-next-line no-console
@@ -44,7 +38,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       case sdsStyle === "rounded" && sdsType === "primary":
         return (
           <RoundedButton
-            color="primary"
+            color={color}
             ref={ref}
             variant="contained"
             {...propsWithDefault}
@@ -53,7 +47,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       case sdsStyle === "rounded" && sdsType === "secondary":
         return (
           <RoundedButton
-            color="primary"
+            color={color}
             ref={ref}
             variant="outlined"
             {...propsWithDefault}
@@ -62,7 +56,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       case sdsStyle === "square" && sdsType === "primary":
         return (
           <SquareButton
-            color="primary"
+            color={color}
             ref={ref}
             variant="contained"
             {...propsWithDefault}
@@ -71,7 +65,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       case sdsStyle === "square" && sdsType === "secondary":
         return (
           <SquareButton
-            color="primary"
+            color={color}
             ref={ref}
             variant="outlined"
             {...propsWithDefault}
@@ -80,7 +74,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       case sdsStyle === "minimal" && sdsType === "primary":
         return (
           <PrimaryMinimalButton
-            color="primary"
+            color={color}
             ref={ref}
             variant="text"
             {...propsWithDefault}

diff --git a/src/core/Button/style.ts b/src/core/Button/style.ts
@@ -8,16 +8,31 @@ import {
   Props,
 } from "../styles";
 
-const sdsPropNames = ["isAllCaps", "isRounded", "sdsStyle", "sdsType"];
+export interface ExtraProps {
+  isAllCaps?: boolean;
+  isRounded?: boolean;
+  sdsStyle?: "minimal" | "rounded" | "square";
+  sdsType?: "primary" | "secondary";
+  color?: "success" | "error" | "warning" | "info";
+}
+
+// Please keep this in sync with the props used in `ExtraProps`
+const doNotForwardProps = [
+  "isAllCaps",
+  "isRounded",
+  "sdsStyle",
+  "sdsType",
+  "color",
+];
 
 const ButtonBase = styled(Button, {
   shouldForwardProp: (prop) => {
-    return !sdsPropNames.includes(prop.toString());
+    return !doNotForwardProps.includes(prop.toString());
   },
-})`
+})<ExtraProps>`
   box-shadow: none;
   ${(props) => {
-    const { variant } = props;
+    const { variant, color: colorProp } = props;
     const colors = getColors(props);
     const spacings = getSpaces(props);
 
@@ -30,13 +45,15 @@ const ButtonBase = styled(Button, {
 
     const padding = variant === "outlined" ? outlinedPadding : containedPadding;
 
+    const color = (colors && colors[colorProp]) || colors?.primary;
+
     return `
       padding: ${padding};
       min-width: 120px;
       height: 34px;
       &:hover, &:focus {
         color: white;
-        background-color: ${colors?.primary[500]};
+        background-color: ${color[500]};
         box-shadow: none;
       }
       &:focus {
@@ -45,7 +62,7 @@ const ButtonBase = styled(Button, {
       }
       &:active {
         color: white;
-        background-color: ${colors?.primary[600]};
+        background-color: ${color[600]};
         box-shadow: none;
       }
       &:disabled {