From ef8e846c976338ef5a6811e0fe88ea896883d6c1 Mon Sep 17 00:00:00 2001 From: Ricky Smith Date: Thu, 9 Jan 2025 18:13:45 +0100 Subject: [PATCH 1/4] Limit `Button` styles to those defined in the Comet design guidelines This removes the `color` prop entirely and only allows our custom values for the `variant` prop. --- .changeset/olive-fans-invite.md | 3 + .../admin/admin/src/common/buttons/Button.tsx | 39 +++++++-- storybook/src/admin/Button.stories.tsx | 81 +++++++++++++++++++ 3 files changed, 117 insertions(+), 6 deletions(-) create mode 100644 storybook/src/admin/Button.stories.tsx diff --git a/.changeset/olive-fans-invite.md b/.changeset/olive-fans-invite.md index 0f34233eb7..cd4f6e7e3a 100644 --- a/.changeset/olive-fans-invite.md +++ b/.changeset/olive-fans-invite.md @@ -4,6 +4,9 @@ Add new `Button` component to use in favor of MUI's `Button` component +This works the same as MUI's `Button` component, with the exception of the `variant` and `color` props that are not supported in the same way. +This `Button` only supports values for `variant` that are defined by the Comet design guidelines, the `color` prop cannot be used. + ```diff -import { Button } from "@mui/material"; +import { Button } from "@comet/admin"; diff --git a/packages/admin/admin/src/common/buttons/Button.tsx b/packages/admin/admin/src/common/buttons/Button.tsx index 95fe3220d9..552e503887 100644 --- a/packages/admin/admin/src/common/buttons/Button.tsx +++ b/packages/admin/admin/src/common/buttons/Button.tsx @@ -3,21 +3,48 @@ import { Button as MuiButton, ButtonProps as MuiButtonProps, ComponentsOverrides import { createComponentSlot } from "../../helpers/createComponentSlot"; import { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps"; -export type ButtonClassKey = "root"; +type Variant = "primary" | "secondary" | "outlined" | "descructive" | "success" | "textLight" | "textDark"; -export type ButtonProps = MuiButtonProps & +type Slot = "root" | "mobileTooltip"; +export type ButtonClassKey = Slot | Variant; + +export type ButtonProps = Omit & ThemedComponentBaseProps<{ root: typeof MuiButton; - }>; + }> & { + variant?: Variant; + }; + +type OwnerState = { + variant: Variant; +}; + +const variantToMuiProps: Record> = { + primary: { variant: "contained", color: "primary" }, + secondary: { variant: "contained", color: "secondary" }, + outlined: { variant: "outlined" }, + descructive: { variant: "outlined", color: "error" }, + success: { variant: "contained", color: "success" }, + textLight: { variant: "text", sx: { color: "white" } }, + textDark: { variant: "text", sx: { color: "black" } }, +}; export const Button = (inProps: ButtonProps) => { - const { slotProps, ...restProps } = useThemeProps({ props: inProps, name: "CometAdminButton" }); - return ; + const { slotProps, variant = "primary", ...restProps } = useThemeProps({ props: inProps, name: "CometAdminButton" }); + + const ownerState: OwnerState = { + variant, + }; + + return ; }; -const Root = createComponentSlot(MuiButton)({ +const Root = createComponentSlot(MuiButton)({ componentName: "Button", slotName: "root", + classesResolver(ownerState) { + return [ownerState.variant]; + }, })(); declare module "@mui/material/styles" { diff --git a/storybook/src/admin/Button.stories.tsx b/storybook/src/admin/Button.stories.tsx new file mode 100644 index 0000000000..6300d6de49 --- /dev/null +++ b/storybook/src/admin/Button.stories.tsx @@ -0,0 +1,81 @@ +import { Button, ButtonProps } from "@comet/admin"; +import { Favorite, Wrench } from "@comet/admin-icons"; +import { Box, Stack } from "@mui/material"; + +export default { + title: "@comet/admin/Button", +}; + +type DefaultStoryArgs = { + variant: ButtonProps["variant"]; + disabled: boolean; + startIcon: boolean; + endIcon: boolean; +}; + +export const Default = { + parameters: { + layout: "fullscreen", + }, + args: { + variant: "primary", + disabled: false, + startIcon: true, + endIcon: false, + }, + argTypes: { + variant: { + name: "Variant", + control: "select", + options: ["primary", "secondary", "outlined", "descructive", "success", "textLight", "textDark"], + }, + disabled: { + name: "Disabled", + control: "boolean", + }, + startIcon: { + name: "Start Icon", + control: "boolean", + }, + endIcon: { + name: "End Icon", + control: "boolean", + }, + }, + + render: ({ startIcon, endIcon, disabled, variant }: DefaultStoryArgs) => { + const showDarkBackground = variant === "textLight"; + + return ( + + + + ); + }, +}; + +export const AllVariants = { + render: () => { + return ( + + + + + + + + + + ); + }, +}; From 2f9eaaef946aafcb5d805b104e4bee0c662455fe Mon Sep 17 00:00:00 2001 From: Ricky Smith Date: Wed, 15 Jan 2025 12:52:08 +0100 Subject: [PATCH 2/4] Add responsive option to default button story --- storybook/src/admin/Button.stories.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/storybook/src/admin/Button.stories.tsx b/storybook/src/admin/Button.stories.tsx index 7db876a5a7..70aa805ee6 100644 --- a/storybook/src/admin/Button.stories.tsx +++ b/storybook/src/admin/Button.stories.tsx @@ -9,6 +9,7 @@ export default { type DefaultStoryArgs = { variant: ButtonProps["variant"]; + responsive: boolean; disabled: boolean; startIcon: boolean; endIcon: boolean; @@ -20,6 +21,7 @@ export const Default = { }, args: { variant: "primary", + responsive: false, disabled: false, startIcon: true, endIcon: false, @@ -30,6 +32,10 @@ export const Default = { control: "select", options: ["primary", "secondary", "outlined", "descructive", "success", "textLight", "textDark"], }, + responsive: { + name: "Responsive", + control: "boolean", + }, disabled: { name: "Disabled", control: "boolean", @@ -44,7 +50,7 @@ export const Default = { }, }, - render: ({ startIcon, endIcon, disabled, variant }: DefaultStoryArgs) => { + render: ({ startIcon, endIcon, disabled, variant, responsive }: DefaultStoryArgs) => { const showDarkBackground = variant === "textLight"; return ( @@ -57,6 +63,7 @@ export const Default = { endIcon={endIcon ? : undefined} disabled={disabled} variant={variant} + responsive={responsive} > This is a button From 9743998bce6a838f039a97acc5cc90c4f8b91c8b Mon Sep 17 00:00:00 2001 From: Ricky Smith Date: Wed, 15 Jan 2025 12:54:03 +0100 Subject: [PATCH 3/4] Typo --- packages/admin/admin/src/common/buttons/Button.tsx | 4 ++-- storybook/src/admin/Button.stories.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/admin/admin/src/common/buttons/Button.tsx b/packages/admin/admin/src/common/buttons/Button.tsx index 3e43a3b4af..c8dff38412 100644 --- a/packages/admin/admin/src/common/buttons/Button.tsx +++ b/packages/admin/admin/src/common/buttons/Button.tsx @@ -15,7 +15,7 @@ import { createComponentSlot } from "../../helpers/createComponentSlot"; import { ThemedComponentBaseProps } from "../../helpers/ThemedComponentBaseProps"; import { useWindowSize } from "../../helpers/useWindowSize"; -type Variant = "primary" | "secondary" | "outlined" | "descructive" | "success" | "textLight" | "textDark"; +type Variant = "primary" | "secondary" | "outlined" | "destructive" | "success" | "textLight" | "textDark"; type Slot = "root" | "mobileTooltip"; type ComponentState = Variant | "usingResponsiveBehavior"; export type ButtonClassKey = Slot | ComponentState; @@ -40,7 +40,7 @@ const variantToMuiProps: Record> = { primary: { variant: "contained", color: "primary" }, secondary: { variant: "contained", color: "secondary" }, outlined: { variant: "outlined" }, - descructive: { variant: "outlined", color: "error" }, + destructive: { variant: "outlined", color: "error" }, success: { variant: "contained", color: "success" }, textLight: { variant: "text", sx: { color: "white" } }, textDark: { variant: "text", sx: { color: "black" } }, diff --git a/storybook/src/admin/Button.stories.tsx b/storybook/src/admin/Button.stories.tsx index 70aa805ee6..05ae137b6b 100644 --- a/storybook/src/admin/Button.stories.tsx +++ b/storybook/src/admin/Button.stories.tsx @@ -30,7 +30,7 @@ export const Default = { variant: { name: "Variant", control: "select", - options: ["primary", "secondary", "outlined", "descructive", "success", "textLight", "textDark"], + options: ["primary", "secondary", "outlined", "destructive", "success", "textLight", "textDark"], }, responsive: { name: "Responsive", @@ -79,7 +79,7 @@ export const AllVariants = { - + From 955c0e6740792eeafecdd3d95147be9d622ebe1e Mon Sep 17 00:00:00 2001 From: Ricky Smith Date: Thu, 16 Jan 2025 11:02:39 +0100 Subject: [PATCH 4/4] Use correct button variants --- storybook/src/admin/toolbar/Toolbar.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/storybook/src/admin/toolbar/Toolbar.stories.tsx b/storybook/src/admin/toolbar/Toolbar.stories.tsx index 54ae707711..4e58472036 100644 --- a/storybook/src/admin/toolbar/Toolbar.stories.tsx +++ b/storybook/src/admin/toolbar/Toolbar.stories.tsx @@ -45,10 +45,10 @@ function Story() { - -