From 125b7e373840dae044af72a523424525c4fa8e24 Mon Sep 17 00:00:00 2001 From: Timmy Huang Date: Fri, 28 Jan 2022 17:01:49 -0800 Subject: [PATCH 1/5] idea: button color prop --- src/core/Button/index.tsx | 22 ++++++++-------------- src/core/Button/style.ts | 29 +++++++++++++++++++++++------ 2 files changed, 31 insertions(+), 20 deletions(-) diff --git a/src/core/Button/index.tsx b/src/core/Button/index.tsx index 8b4d0bcb2..e9ae46d2d 100644 --- a/src/core/Button/index.tsx +++ b/src/core/Button/index.tsx @@ -1,6 +1,7 @@ import { ButtonProps as RawButtonProps } from "@material-ui/core"; import React from "react"; import { + ExtraProps, PrimaryMinimalButton, RoundedButton, SecondaryMinimalButton, @@ -8,18 +9,11 @@ import { 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( (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( case sdsStyle === "rounded" && sdsType === "primary": return ( ( case sdsStyle === "rounded" && sdsType === "secondary": return ( ( case sdsStyle === "square" && sdsType === "primary": return ( ( case sdsStyle === "square" && sdsType === "secondary": return ( ( case sdsStyle === "minimal" && sdsType === "primary": return ( { - return !sdsPropNames.includes(prop.toString()); + return !doNotForwardProps.includes(prop.toString()); }, -})` +})` 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]; + 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 { From 70a3f68a19e3975a1e547c9d177e312bfbce83d7 Mon Sep 17 00:00:00 2001 From: Timmy Huang Date: Fri, 28 Jan 2022 17:57:03 -0800 Subject: [PATCH 2/5] update ts --- src/core/Button/style.ts | 20 ++++++++++++-------- 1 file changed, 12 insertions(+), 8 deletions(-) diff --git a/src/core/Button/style.ts b/src/core/Button/style.ts index e319429bd..4246f61ce 100644 --- a/src/core/Button/style.ts +++ b/src/core/Button/style.ts @@ -1,5 +1,5 @@ import styled from "@emotion/styled"; -import { Button } from "@material-ui/core"; +import { Button, ButtonProps } from "@material-ui/core"; import { fontCapsXxxs, getColors, @@ -13,7 +13,7 @@ export interface ExtraProps { isRounded?: boolean; sdsStyle?: "minimal" | "rounded" | "square"; sdsType?: "primary" | "secondary"; - color?: "success" | "error" | "warning" | "info"; + color?: "primary" | "secondary" | "success" | "error" | "warning" | "info"; } // Please keep this in sync with the props used in `ExtraProps` @@ -27,12 +27,12 @@ const doNotForwardProps = [ const ButtonBase = styled(Button, { shouldForwardProp: (prop) => { - return !doNotForwardProps.includes(prop.toString()); + return !doNotForwardProps.includes(String(prop)); }, -})` +})` box-shadow: none; - ${(props) => { - const { variant, color: colorProp } = props; + ${(props: Props & ExtraProps & Omit) => { + const { variant, color: colorProp = "primary" } = props; const colors = getColors(props); const spacings = getSpaces(props); @@ -47,6 +47,10 @@ const ButtonBase = styled(Button, { const color = colors && colors[colorProp]; + if (!color) { + throw new Error(`Button color not found: ${colorProp}`); + } + return ` padding: ${padding}; min-width: 120px; @@ -92,7 +96,7 @@ interface IsAllCaps extends Props { const MinimalButton = styled(Button, { shouldForwardProp: (prop) => { - return !sdsPropNames.includes(prop.toString()); + return !doNotForwardProps.includes(String(prop)); }, })` ${(props: IsAllCaps) => { @@ -161,7 +165,7 @@ interface IsRounded extends Props { } export const StyledButton = styled(Button, { shouldForwardProp: (prop) => { - return !sdsPropNames.includes(prop.toString()); + return !doNotForwardProps.includes(String(prop)); }, })` &:focus { From fd8b92743a8bfbd0beb3d142a0759aa5fe1c43a8 Mon Sep 17 00:00:00 2001 From: Jerry Fu Date: Mon, 31 Jan 2022 09:32:14 -0800 Subject: [PATCH 3/5] Fix ts issue --- src/core/Button/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/Button/index.tsx b/src/core/Button/index.tsx index e9ae46d2d..015291316 100644 --- a/src/core/Button/index.tsx +++ b/src/core/Button/index.tsx @@ -9,7 +9,7 @@ import { StyledButton, } from "./style"; -export type ButtonProps = RawButtonProps & ExtraProps; +export type ButtonProps = Omit & ExtraProps; const Button = React.forwardRef( (props: ButtonProps, ref): JSX.Element | null => { From a356661dd361889d5567a308d4eced46bb071c5c Mon Sep 17 00:00:00 2001 From: Jerry Fu Date: Mon, 31 Jan 2022 09:33:30 -0800 Subject: [PATCH 4/5] Add error border style for error 600 --- src/core/styles/common/defaultTheme.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/core/styles/common/defaultTheme.ts b/src/core/styles/common/defaultTheme.ts index 971575d7a..debdc42f6 100644 --- a/src/core/styles/common/defaultTheme.ts +++ b/src/core/styles/common/defaultTheme.ts @@ -73,6 +73,7 @@ const defaultThemeColors = { const borders = { error: { "400": `1px solid ${defaultThemeColors.error["400"]}`, + "600": `1px solid ${defaultThemeColors.error["600"]}`, }, gray: { "100": `1px solid ${defaultThemeColors.gray["100"]}`, From a8a05c8d1ba5042005cdfd4dd3c77e9b345f0e83 Mon Sep 17 00:00:00 2001 From: Jerry Fu Date: Mon, 31 Jan 2022 09:35:07 -0800 Subject: [PATCH 5/5] Button style updates --- src/core/Button/style.ts | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/core/Button/style.ts b/src/core/Button/style.ts index 4246f61ce..7d182db76 100644 --- a/src/core/Button/style.ts +++ b/src/core/Button/style.ts @@ -2,6 +2,7 @@ import styled from "@emotion/styled"; import { Button, ButtonProps } from "@material-ui/core"; import { fontCapsXxxs, + getBorders, getColors, getCorners, getSpaces, @@ -9,11 +10,11 @@ import { } from "../styles"; export interface ExtraProps { + color?: "primary" | "error"; isAllCaps?: boolean; isRounded?: boolean; sdsStyle?: "minimal" | "rounded" | "square"; sdsType?: "primary" | "secondary"; - color?: "primary" | "secondary" | "success" | "error" | "warning" | "info"; } // Please keep this in sync with the props used in `ExtraProps` @@ -33,6 +34,7 @@ const ButtonBase = styled(Button, { box-shadow: none; ${(props: Props & ExtraProps & Omit) => { const { variant, color: colorProp = "primary" } = props; + const borders = getBorders(props); const colors = getColors(props); const spacings = getSpaces(props); @@ -45,19 +47,26 @@ const ButtonBase = styled(Button, { const padding = variant === "outlined" ? outlinedPadding : containedPadding; + const border = borders && borders[colorProp]; const color = colors && colors[colorProp]; + if (!border) { + throw new Error(`Button border not found: ${colorProp}`); + } if (!color) { throw new Error(`Button color not found: ${colorProp}`); } return ` + background-color: ${color[400]}; + border: ${border[400]}; + color: white; padding: ${padding}; min-width: 120px; height: 34px; &:hover, &:focus { color: white; - background-color: ${color[500]}; + background-color: ${color[600]}; box-shadow: none; } &:focus { @@ -67,6 +76,7 @@ const ButtonBase = styled(Button, { &:active { color: white; background-color: ${color[600]}; + border: ${border[600]}; box-shadow: none; } &:disabled {