From efbdf50643290a1549164469601d3030fe6a7f0e Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Fri, 9 Jun 2023 00:31:57 -0400 Subject: [PATCH 1/6] feat(theme/Button): creating theming from new DS --- .../gatsby-plugin/components/Button.ts | 175 +++++++++--------- .../components/components.utils.ts | 2 - .../gatsby-plugin/foundations/colors.ts | 2 +- .../gatsby-plugin/foundations/shadows.ts | 3 +- src/components/Button/Button.stories.tsx | 112 +++++++++-- src/components/Button/index.tsx | 22 ++- src/components/ButtonLink.tsx | 23 ++- 7 files changed, 220 insertions(+), 119 deletions(-) diff --git a/src/@chakra-ui/gatsby-plugin/components/Button.ts b/src/@chakra-ui/gatsby-plugin/components/Button.ts index b07ac4e7d0d..224408d29c8 100644 --- a/src/@chakra-ui/gatsby-plugin/components/Button.ts +++ b/src/@chakra-ui/gatsby-plugin/components/Button.ts @@ -1,99 +1,77 @@ import { defineStyle, defineStyleConfig } from "@chakra-ui/react" -import { buttonDefaultTheme, defineMergeStyles } from "./components.utils" -const { - baseStyle: defaultBaseStyle, - sizes: defaultSizes, - variants: defaultVariants, - defaultProps, -} = buttonDefaultTheme +/** + * This selector over the more specific `& .chakra-button__icon` accounts + * for icons used both as a singleton (in IconButton) and as aside element + * with text. The mention classname is not used for the singleton. + * + * And because the icons `fontSize` is different than the text, the icon size + * needs to stay the same when a singleton. + */ +const ICON_SELECTOR = "& svg" -const baseStyle = defineMergeStyles(defaultBaseStyle, { - fontWeight: "normal", +const getBaseColor = (isSecondary: boolean) => + !isSecondary ? "primary" : "body" + +const baseStyle = defineStyle((props) => ({ borderRadius: "base", + color: getBaseColor(props.isSecondary), + transitionProperty: "common", + transitionDuration: "normal", + whiteSpace: "normal", + _focusVisible: { + outline: "4px solid", + outlineColor: "primaryHover", + outlineOffset: -1, + }, + _disabled: { + color: "disabled", + pointerEvents: "none", + }, _hover: { - textDecoration: "none", - boxShadow: "primary", - _disabled: { - boxShadow: "none", - }, + color: "primaryHover", }, - _focus: { - boxShadow: "outline", - outline: 0, + p: { + m: 0, }, -}) +})) -const disabledStylesSolid = defineStyle({ - bg: "disabled", - opacity: 1, -}) +const HOVER_BOX_SHADOW = "buttonHover" -const disabledStylesOutline = defineStyle({ - color: "disabled", - borderColor: "disabled", - opacity: 1, +const variantSolid = defineStyle({ + color: "background", + bg: "primary", + _hover: { + color: "background", + bg: "primaryHover", + boxShadow: HOVER_BOX_SHADOW, + }, + _active: { + boxShadow: "none", + }, }) -const commonOutline = defineStyle({ +const variantOutline = defineStyle({ border: "1px", - color: "text", - bg: "transparent", - borderColor: "text", _hover: { - color: "primary", - bg: "background", - borderColor: "primary", - _disabled: { - ...disabledStylesOutline, - }, + boxShadow: HOVER_BOX_SHADOW, }, _active: { - color: "primary", - bg: "primaryLight", - borderColor: "primary", - }, - _focus: { - color: "primary", - borderColor: "background", - _disabled: { - ...disabledStylesOutline, - }, - }, - _disabled: { - ...disabledStylesOutline, + boxShadow: "none", }, }) -const variantSolid = defineStyle((props) => - defineMergeStyles(defaultVariants?.solid(props), { - color: "buttonColor", - bg: "primary", - border: 0, - _hover: { - bg: "primary", - opacity: 0.8, - _disabled: { - ...disabledStylesSolid, - }, - }, - _active: { - bg: "primaryHover", - }, - _disabled: { - ...disabledStylesSolid, - }, - }) -) - -const variantOutline = defineStyle((props) => - defineMergeStyles(defaultVariants?.outline(props), commonOutline) -) +const variantGhost = {} -const variantOutlineColor = defineStyle({ - ...commonOutline, +const variantLink = defineStyle({ color: "primary", - borderColor: "primary", + fontWeight: 700, + textDecor: "underline", + py: 0, + px: 1, + _active: { + color: "primary", + }, }) const variantIcon = defineStyle({ @@ -109,20 +87,39 @@ const variantIcon = defineStyle({ }, }) +const sizes = { + md: { + py: "2 !important", + px: "4 !important", + [ICON_SELECTOR]: { + fontSize: "2xl", + }, + }, + sm: { + fontSize: "xs", + py: "1.5 !important", + px: "2 !important", + lineHeight: "3xs", + [ICON_SELECTOR]: { + fontSize: "md", + }, + }, +} + +const variants = { + solid: variantSolid, + outline: variantOutline, + ghost: variantGhost, + link: variantLink, + icon: variantIcon, +} + export const Button = defineStyleConfig({ baseStyle, - sizes: defineMergeStyles(defaultSizes, { - md: { - h: "42px", - }, - }), - variants: { - ...buttonDefaultTheme.variants, - // solid is the default variant used by chakra - solid: variantSolid, - outline: variantOutline, - "outline-color": variantOutlineColor, - icon: variantIcon, + sizes, + variants, + defaultProps: { + size: "md", + variant: "solid", }, - defaultProps, }) diff --git a/src/@chakra-ui/gatsby-plugin/components/components.utils.ts b/src/@chakra-ui/gatsby-plugin/components/components.utils.ts index 3016b7964c6..611efb6a91a 100644 --- a/src/@chakra-ui/gatsby-plugin/components/components.utils.ts +++ b/src/@chakra-ui/gatsby-plugin/components/components.utils.ts @@ -6,7 +6,6 @@ const { Avatar: avatarDefaultTheme, Badge: badgeDefaultTheme, Breadcrumb: breadcrumbDefaultTheme, - Button: buttonDefaultTheme, Checkbox: checkboxDefaultTheme, CloseButton: closeButtonDefaultTheme, Code: codeDefaultTheme, @@ -33,7 +32,6 @@ export { avatarDefaultTheme, badgeDefaultTheme, breadcrumbDefaultTheme, - buttonDefaultTheme, checkboxDefaultTheme, closeButtonDefaultTheme, codeDefaultTheme, diff --git a/src/@chakra-ui/gatsby-plugin/foundations/colors.ts b/src/@chakra-ui/gatsby-plugin/foundations/colors.ts index ed0766c393d..4c974ea197a 100644 --- a/src/@chakra-ui/gatsby-plugin/foundations/colors.ts +++ b/src/@chakra-ui/gatsby-plugin/foundations/colors.ts @@ -21,7 +21,7 @@ const colors = { 300: "#ffb991", 500: "#ff7324", 600: "#c95d20", - 800: "#6a3301", + 800: "#352313", }, red: { 100: "#f7c8c8", diff --git a/src/@chakra-ui/gatsby-plugin/foundations/shadows.ts b/src/@chakra-ui/gatsby-plugin/foundations/shadows.ts index d360e35f119..2d0d7bec58c 100644 --- a/src/@chakra-ui/gatsby-plugin/foundations/shadows.ts +++ b/src/@chakra-ui/gatsby-plugin/foundations/shadows.ts @@ -20,8 +20,9 @@ const shadows = { gridBlueBowShadow: "8px 8px 0px 0px var(--eth-colors-gridBlue)", // * Part of new DS - // TODO: From current theme. Rename to 'buttonHover' + // TODO: From current theme. Deprecate for 'buttonHover' primary: "4px 4px 0px 0px var(--eth-colors-primaryLight)", + buttonHover: "4px 4px 0 0 var(--eth-colors-primaryLowContrast)", tooltip: "0 0 16px var(--eth-colors-tooltipShadow)", } diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx index 7ed65549beb..b1167b1c51d 100644 --- a/src/components/Button/Button.stories.tsx +++ b/src/components/Button/Button.stories.tsx @@ -1,33 +1,115 @@ +import * as React from "react" +import { HStack, IconButton, ThemingProps, VStack } from "@chakra-ui/react" +import { getThemingArgTypes } from "@chakra-ui/storybook-addon" import { Meta, StoryObj } from "@storybook/react" +import { MdExpandMore, MdChevronRight } from "react-icons/md" import Button from "." +import theme from "../../@chakra-ui/gatsby-plugin/theme" -export default { - component: Button, -} as Meta +type ButtonType = typeof Button -export const Solid: StoryObj = { +const meta: Meta = { + title: "Atoms / Forms / Buttons", + component: Button, args: { children: "What is Ethereum?", }, + argTypes: { + isSecondary: { + defaultValue: false, + type: "boolean", + name: "Is a secondary color?", + if: { arg: "variant", neq: "solid" }, + }, + }, } -export const Outline: StoryObj = { - args: { - children: "More on digital money", - variant: "outline", +export default meta + +type Story = StoryObj + +const variants: ThemingProps<"Button">["variant"][] = [ + "solid", + "outline", + "ghost", + "link", +] + +export const StyleVariants: Story = { + argTypes: { + size: { + //@ts-expect-error + ...getThemingArgTypes(theme, "Button")?.size, + defaultValue: "md", + }, }, + render: (args) => ( + + {variants.map((variant, idx) => { + if (args.isSecondary && variant === "solid") return + return ) From 1858a8a8a0f79bfc4b25bee3f75b3b179029f920 Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Sun, 18 Jun 2023 12:00:26 -0400 Subject: [PATCH 2/6] refactor(theme/button): remove hover shadow constant --- src/@chakra-ui/gatsby-plugin/components/Button.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/@chakra-ui/gatsby-plugin/components/Button.ts b/src/@chakra-ui/gatsby-plugin/components/Button.ts index aa8bc176b73..7222e1801f9 100644 --- a/src/@chakra-ui/gatsby-plugin/components/Button.ts +++ b/src/@chakra-ui/gatsby-plugin/components/Button.ts @@ -36,15 +36,13 @@ const baseStyle = defineStyle((props) => ({ }, })) -const HOVER_BOX_SHADOW = "buttonHover" - const variantSolid = defineStyle({ color: "background.base", bg: "primary.base", _hover: { color: "background.base", bg: "primary.hover", - boxShadow: HOVER_BOX_SHADOW, + boxShadow: "buttonHover", }, _active: { boxShadow: "none", @@ -54,7 +52,7 @@ const variantSolid = defineStyle({ const variantOutline = defineStyle({ border: "1px", _hover: { - boxShadow: HOVER_BOX_SHADOW, + boxShadow: "buttonHover", }, _active: { boxShadow: "none", From 97907aea81369fa035f912407425bde82abcb3b6 Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Sun, 18 Jun 2023 12:21:11 -0400 Subject: [PATCH 3/6] chore(theme/button): mark `icon` variant for deprecation --- src/@chakra-ui/gatsby-plugin/components/Button.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/@chakra-ui/gatsby-plugin/components/Button.ts b/src/@chakra-ui/gatsby-plugin/components/Button.ts index 7222e1801f9..34b08697098 100644 --- a/src/@chakra-ui/gatsby-plugin/components/Button.ts +++ b/src/@chakra-ui/gatsby-plugin/components/Button.ts @@ -72,6 +72,10 @@ const variantLink = defineStyle({ }, }) +/** + * @deprecated This is no longer needed. Styling for just the icon is not + * unique compared to the variants used for text (as of the new DS) + */ const variantIcon = defineStyle({ appearance: "none", background: "inherit", From 3a0e603349c7bc713f72102d73f4cc546648098d Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Fri, 30 Jun 2023 00:51:25 -0400 Subject: [PATCH 4/6] refactor(theme/Button): remove base style descendent selector for paragraph elements --- src/@chakra-ui/gatsby-plugin/components/Button.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/@chakra-ui/gatsby-plugin/components/Button.ts b/src/@chakra-ui/gatsby-plugin/components/Button.ts index 34b08697098..2b589c3e706 100644 --- a/src/@chakra-ui/gatsby-plugin/components/Button.ts +++ b/src/@chakra-ui/gatsby-plugin/components/Button.ts @@ -31,9 +31,6 @@ const baseStyle = defineStyle((props) => ({ _hover: { color: "primary.hover", }, - p: { - m: 0, - }, })) const variantSolid = defineStyle({ From b563d3fff7c70c843d03db1a117186cf80211d83 Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Fri, 30 Jun 2023 00:55:44 -0400 Subject: [PATCH 5/6] refactor(theme/Button): allow a border in multiple variants for consistent height. --- src/@chakra-ui/gatsby-plugin/components/Button.ts | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/@chakra-ui/gatsby-plugin/components/Button.ts b/src/@chakra-ui/gatsby-plugin/components/Button.ts index 2b589c3e706..f4403db01cd 100644 --- a/src/@chakra-ui/gatsby-plugin/components/Button.ts +++ b/src/@chakra-ui/gatsby-plugin/components/Button.ts @@ -15,6 +15,7 @@ const getBaseColor = (isSecondary: boolean) => const baseStyle = defineStyle((props) => ({ borderRadius: "base", + border: "1px", color: getBaseColor(props.isSecondary), transitionProperty: "common", transitionDuration: "normal", @@ -47,7 +48,6 @@ const variantSolid = defineStyle({ }) const variantOutline = defineStyle({ - border: "1px", _hover: { boxShadow: "buttonHover", }, @@ -56,9 +56,12 @@ const variantOutline = defineStyle({ }, }) -const variantGhost = {} +const variantGhost = { + borderColor: "transparent", +} const variantLink = defineStyle({ + borderColor: "transparent", color: "primary.base", fontWeight: 700, textDecor: "underline", From 45f67d1a745a26368c0ecc2f83d97967135f966d Mon Sep 17 00:00:00 2001 From: tylerapfledderer Date: Fri, 30 Jun 2023 01:12:25 -0400 Subject: [PATCH 6/6] refactor(theme/Button): update line-height declarations --- src/@chakra-ui/gatsby-plugin/components/Button.ts | 2 +- src/components/Button/Button.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/@chakra-ui/gatsby-plugin/components/Button.ts b/src/@chakra-ui/gatsby-plugin/components/Button.ts index f4403db01cd..633db2b5999 100644 --- a/src/@chakra-ui/gatsby-plugin/components/Button.ts +++ b/src/@chakra-ui/gatsby-plugin/components/Button.ts @@ -17,6 +17,7 @@ const baseStyle = defineStyle((props) => ({ borderRadius: "base", border: "1px", color: getBaseColor(props.isSecondary), + lineHeight: "1.6", transitionProperty: "common", transitionDuration: "normal", whiteSpace: "normal", @@ -101,7 +102,6 @@ const sizes = { fontSize: "xs", py: "1.5 !important", px: "2 !important", - lineHeight: "3xs", [ICON_SELECTOR]: { fontSize: "md", }, diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx index c144e3fa84f..62588bcfefd 100644 --- a/src/components/Button/Button.stories.tsx +++ b/src/components/Button/Button.stories.tsx @@ -9,7 +9,7 @@ import theme from "../../@chakra-ui/gatsby-plugin/theme" type ButtonType = typeof Button const meta: Meta = { - title: "Atoms / Forms / Buttons", + title: "Atoms / Form / Buttons", component: Button, args: { children: "What is Ethereum?",