From 8bca3d4aae5270dbe8f4f4e658e09777409c7cd8 Mon Sep 17 00:00:00 2001 From: Julia Wegmayr Date: Mon, 15 Jan 2024 15:35:02 +0100 Subject: [PATCH 1/8] refactor theming of FilterBarButton --- demo/admin/comet-config.json | 1 + demo/api/block-meta.json | 61 +-------- demo/site/comet-config.json | 1 + packages/admin/admin/src/index.ts | 3 +- .../FilterBarButton.styles.tsx | 50 ------- .../filterBarButton/FilterBarButton.tsx | 122 +++++++++++++----- 6 files changed, 95 insertions(+), 143 deletions(-) create mode 120000 demo/admin/comet-config.json create mode 120000 demo/site/comet-config.json delete mode 100644 packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.styles.tsx diff --git a/demo/admin/comet-config.json b/demo/admin/comet-config.json new file mode 120000 index 0000000000..ffe3ce450d --- /dev/null +++ b/demo/admin/comet-config.json @@ -0,0 +1 @@ +../api/comet-config.json \ No newline at end of file diff --git a/demo/api/block-meta.json b/demo/api/block-meta.json index 3b491a06dc..9c6d39d841 100644 --- a/demo/api/block-meta.json +++ b/demo/api/block-meta.json @@ -1073,8 +1073,7 @@ "columns": "Columns", "anchor": "Anchor", "twoLists": "TwoLists", - "media": "Media", - "teaser": "Teaser" + "media": "Media" }, "nullable": false }, @@ -1131,8 +1130,7 @@ "columns": "Columns", "anchor": "Anchor", "twoLists": "TwoLists", - "media": "Media", - "teaser": "Teaser" + "media": "Media" }, "nullable": false }, @@ -1739,61 +1737,6 @@ } ] }, - { - "name": "Teaser", - "fields": [ - { - "name": "headline", - "kind": "Block", - "block": "Headline", - "nullable": false - }, - { - "name": "image", - "kind": "Block", - "block": "DamImage", - "nullable": false - }, - { - "name": "links", - "kind": "Block", - "block": "LinkList", - "nullable": false - }, - { - "name": "buttons", - "kind": "Block", - "block": "LinkList", - "nullable": false - } - ], - "inputFields": [ - { - "name": "headline", - "kind": "Block", - "block": "Headline", - "nullable": false - }, - { - "name": "image", - "kind": "Block", - "block": "DamImage", - "nullable": false - }, - { - "name": "links", - "kind": "Block", - "block": "LinkList", - "nullable": false - }, - { - "name": "buttons", - "kind": "Block", - "block": "LinkList", - "nullable": false - } - ] - }, { "name": "TextImage", "fields": [ diff --git a/demo/site/comet-config.json b/demo/site/comet-config.json new file mode 120000 index 0000000000..ffe3ce450d --- /dev/null +++ b/demo/site/comet-config.json @@ -0,0 +1 @@ +../api/comet-config.json \ No newline at end of file diff --git a/packages/admin/admin/src/index.ts b/packages/admin/admin/src/index.ts index 56eade5d8b..a80881ec70 100644 --- a/packages/admin/admin/src/index.ts +++ b/packages/admin/admin/src/index.ts @@ -149,8 +149,7 @@ export { FilterBarActiveFilterBadgeClassKey, FilterBarActiveFilterBadgeProps, } from "./table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge"; -export { FilterBarButton, FilterBarButtonProps } from "./table/filterbar/filterBarButton/FilterBarButton"; -export { FilterBarButtonClassKey } from "./table/filterbar/filterBarButton/FilterBarButton.styles"; +export { FilterBarButton, FilterBarButtonClassKey, FilterBarButtonProps } from "./table/filterbar/filterBarButton/FilterBarButton"; export { FilterBarMoreFilters, FilterBarMoreFiltersClassKey, diff --git a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.styles.tsx b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.styles.tsx deleted file mode 100644 index 0fa375ec16..0000000000 --- a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.styles.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import { buttonClasses, svgIconClasses, Theme } from "@mui/material"; -import createStyles from "@mui/styles/createStyles"; - -import { FilterBarButtonProps } from "./FilterBarButton"; - -/** - * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead. - */ -export type FilterBarButtonClassKey = "root" | "open" | "hasDirtyFields" | "filterBadge"; - -export const styles = (theme: Theme) => { - return createStyles({ - root: { - position: "relative", - cursor: "pointer", - display: "flex", - backgroundColor: theme.palette.common.white, - borderColor: theme.palette.grey[100], - borderRadius: 2, - - [`& .${buttonClasses.startIcon} .${svgIconClasses.root}, & .${buttonClasses.endIcon} .${svgIconClasses.root}`]: { - fontSize: 12, - }, - - "&:hover": { - borderColor: theme.palette.grey[100], - backgroundColor: theme.palette.common.white, - }, - - "&:focus": { - borderColor: theme.palette.primary.main, - backgroundColor: theme.palette.common.white, - }, - }, - open: { - borderColor: theme.palette.primary.main, - }, - hasDirtyFields: { - borderColor: theme.palette.grey[400], - fontWeight: theme.typography.fontWeightBold, - - "&:disabled": { - borderColor: theme.palette.grey[100], - }, - }, - filterBadge: { - marginLeft: "6px", - }, - }); -}; diff --git a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx index 9fc6a2e30b..0e8edf602a 100644 --- a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx +++ b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx @@ -1,58 +1,116 @@ import { ChevronDown } from "@comet/admin-icons"; -import { Button, ComponentsOverrides, Theme } from "@mui/material"; +import { Button, ComponentsOverrides } from "@mui/material"; import { ButtonProps } from "@mui/material/Button"; -import { WithStyles } from "@mui/styles"; -import withStyles from "@mui/styles/withStyles"; -import clsx from "clsx"; +import { css, styled, Theme } from "@mui/material/styles"; +import { useThemeProps } from "@mui/system"; +import { ThemedComponentBaseProps } from "helpers/ThemedComponentBaseProps"; import * as React from "react"; import { FilterBarActiveFilterBadge, FilterBarActiveFilterBadgeProps } from "../filterBarActiveFilterBadge/FilterBarActiveFilterBadge"; -import { FilterBarButtonClassKey, styles } from "./FilterBarButton.styles"; /** * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead. */ -export interface FilterBarButtonProps extends ButtonProps { + +export type FilterBarButtonClassKey = "root" | "open" | "hasDirtyFields" | "filterBadge"; + +type OwnerState = Pick; + +const Root = styled(Button, { + name: "CometAdminFilterBarButton", + slot: "root", + overridesResolver({ ownerState }: { ownerState: OwnerState }, styles) { + return [styles.root, styles.openPopover, styles.numberDirtyFields]; + }, +})<{ ownerState: OwnerState }>( + ({ theme, ownerState }) => css` + position: relative; + cursor: pointer; + display: flex; + background-color: ${theme.palette.common.white}; + border-color: ${theme.palette.grey[100]}; + border-radius: 2px; + + &:hover { + border-color: ${theme.palette.grey[100]}; + background-color: ${theme.palette.common.white}; + } + + &:focus { + border-color: ${theme.palette.primary.main}; + background-color: ${theme.palette.common.white}; + } + + ${ownerState.openPopover && + css` + border-color: ${theme.palette.primary.main}; + `} + + ${ownerState.numberDirtyFields && + css` + border-color: ${theme.palette.grey[400]}; + font-weight: ${theme.typography.fontWeightBold}; + + &:disabled { + border-color: ${theme.palette.grey[100]}; + } + `} + `, +); + +const FilterBadge = styled("span", { + name: "CometAdminFilterBarButton", + slot: "filterBadge", + overridesResolver(_, styles) { + return [styles.filterBadge]; + }, +})( + css` + margin-left: 6px; + `, +); + +export interface FilterBarButtonProps extends ThemedComponentBaseProps<{ root: typeof Button; filterBadge: "span" }>, ButtonProps { dirtyFieldsBadge?: React.ComponentType; numberDirtyFields?: number; openPopover?: boolean; } -const FilterBarButton = ({ - children, - dirtyFieldsBadge, - numberDirtyFields, - openPopover, - classes, - endIcon = , - className, - ...buttonProps -}: FilterBarButtonProps & WithStyles): React.ReactElement => { +export function FilterBarButtonWithStyles(inProps: FilterBarButtonProps) { + const { + children, + dirtyFieldsBadge, + numberDirtyFields, + openPopover, + classes, + endIcon = , + className, + slotProps, + ...restProps + } = useThemeProps({ + props: inProps, + name: "CometAdminFilterBarButton", + }); + + const ownerState: OwnerState = { + openPopover, + numberDirtyFields, + }; + const hasDirtyFields = !!(numberDirtyFields && numberDirtyFields > 0); const FilterBarActiveFilterBadgeComponent = dirtyFieldsBadge ? dirtyFieldsBadge : FilterBarActiveFilterBadge; return ( - + ); -}; - -/** - * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead. - */ -const FilterBarButtonWithStyles = withStyles(styles, { name: "CometAdminFilterBarButton" })(FilterBarButton); +} export { FilterBarButtonWithStyles as FilterBarButton }; From 116bbb2672db8fd6a284f27255bac1a2e6a6b7e2 Mon Sep 17 00:00:00 2001 From: Julia Wegmayr Date: Tue, 23 Jan 2024 10:42:19 +0100 Subject: [PATCH 2/8] apply feedback from review --- .../filterBarButton/FilterBarButton.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx index 0e8edf602a..d84a589762 100644 --- a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx +++ b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx @@ -1,6 +1,5 @@ import { ChevronDown } from "@comet/admin-icons"; -import { Button, ComponentsOverrides } from "@mui/material"; -import { ButtonProps } from "@mui/material/Button"; +import { Button, buttonClasses, ButtonProps, ComponentsOverrides, svgIconClasses } from "@mui/material"; import { css, styled, Theme } from "@mui/material/styles"; import { useThemeProps } from "@mui/system"; import { ThemedComponentBaseProps } from "helpers/ThemedComponentBaseProps"; @@ -20,7 +19,7 @@ const Root = styled(Button, { name: "CometAdminFilterBarButton", slot: "root", overridesResolver({ ownerState }: { ownerState: OwnerState }, styles) { - return [styles.root, styles.openPopover, styles.numberDirtyFields]; + return [styles.root, ownerState.openPopover && styles.open, ownerState.numberDirtyFields && styles.numberDirtyFields]; }, })<{ ownerState: OwnerState }>( ({ theme, ownerState }) => css` @@ -31,6 +30,10 @@ const Root = styled(Button, { border-color: ${theme.palette.grey[100]}; border-radius: 2px; + & .${buttonClasses.startIcon} .${svgIconClasses.root}, & .${buttonClasses.endIcon} .${svgIconClasses.root} { + font-size: 12px; + } + &:hover { border-color: ${theme.palette.grey[100]}; background-color: ${theme.palette.common.white}; @@ -101,10 +104,10 @@ export function FilterBarButtonWithStyles(inProps: FilterBarButtonProps) { const FilterBarActiveFilterBadgeComponent = dirtyFieldsBadge ? dirtyFieldsBadge : FilterBarActiveFilterBadge; return ( - + {children} {hasDirtyFields && ( - + )} @@ -112,6 +115,10 @@ export function FilterBarButtonWithStyles(inProps: FilterBarButtonProps) { ); } +/** + * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead. + */ + export { FilterBarButtonWithStyles as FilterBarButton }; declare module "@mui/material/styles" { From ae739f6236466b058d014cf4dd448980e1cae082 Mon Sep 17 00:00:00 2001 From: Julia Wegmayr Date: Wed, 24 Jan 2024 13:53:34 +0100 Subject: [PATCH 3/8] add feedback from review --- .../filterBarButton/FilterBarButton.tsx | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx index d84a589762..0510834ed8 100644 --- a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx +++ b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx @@ -1,5 +1,6 @@ import { ChevronDown } from "@comet/admin-icons"; -import { Button, buttonClasses, ButtonProps, ComponentsOverrides, svgIconClasses } from "@mui/material"; +import { buttonClasses, ButtonProps, ComponentsOverrides, svgIconClasses } from "@mui/material"; +import Button from "@mui/material/Button"; import { css, styled, Theme } from "@mui/material/styles"; import { useThemeProps } from "@mui/system"; import { ThemedComponentBaseProps } from "helpers/ThemedComponentBaseProps"; @@ -13,13 +14,13 @@ import { FilterBarActiveFilterBadge, FilterBarActiveFilterBadgeProps } from "../ export type FilterBarButtonClassKey = "root" | "open" | "hasDirtyFields" | "filterBadge"; -type OwnerState = Pick; +type OwnerState = { hasDirtyFields: boolean; openPopover: boolean | undefined }; const Root = styled(Button, { name: "CometAdminFilterBarButton", slot: "root", overridesResolver({ ownerState }: { ownerState: OwnerState }, styles) { - return [styles.root, ownerState.openPopover && styles.open, ownerState.numberDirtyFields && styles.numberDirtyFields]; + return [styles.root, ownerState.openPopover && styles.open, ownerState.hasDirtyFields && styles.hasDirtyFields]; }, })<{ ownerState: OwnerState }>( ({ theme, ownerState }) => css` @@ -30,7 +31,7 @@ const Root = styled(Button, { border-color: ${theme.palette.grey[100]}; border-radius: 2px; - & .${buttonClasses.startIcon} .${svgIconClasses.root}, & .${buttonClasses.endIcon} .${svgIconClasses.root} { + && .${buttonClasses.startIcon} .${svgIconClasses.root}, && .${buttonClasses.endIcon} .${svgIconClasses.root} { font-size: 12px; } @@ -49,7 +50,7 @@ const Root = styled(Button, { border-color: ${theme.palette.primary.main}; `} - ${ownerState.numberDirtyFields && + ${ownerState.hasDirtyFields && css` border-color: ${theme.palette.grey[400]}; font-weight: ${theme.typography.fontWeightBold}; @@ -95,14 +96,11 @@ export function FilterBarButtonWithStyles(inProps: FilterBarButtonProps) { name: "CometAdminFilterBarButton", }); - const ownerState: OwnerState = { - openPopover, - numberDirtyFields, - }; - const hasDirtyFields = !!(numberDirtyFields && numberDirtyFields > 0); const FilterBarActiveFilterBadgeComponent = dirtyFieldsBadge ? dirtyFieldsBadge : FilterBarActiveFilterBadge; + const ownerState: OwnerState = { hasDirtyFields, openPopover }; + return ( {children} @@ -118,7 +116,6 @@ export function FilterBarButtonWithStyles(inProps: FilterBarButtonProps) { /** * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead. */ - export { FilterBarButtonWithStyles as FilterBarButton }; declare module "@mui/material/styles" { From 0723fb4ab994f52dbf95ca63dbfe79998349e8fa Mon Sep 17 00:00:00 2001 From: Julia Wegmayr Date: Thu, 25 Jan 2024 10:09:20 +0100 Subject: [PATCH 4/8] remove classes and className props --- .../src/table/filterbar/filterBarButton/FilterBarButton.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx index 0510834ed8..4f4c4e072b 100644 --- a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx +++ b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx @@ -86,9 +86,7 @@ export function FilterBarButtonWithStyles(inProps: FilterBarButtonProps) { dirtyFieldsBadge, numberDirtyFields, openPopover, - classes, endIcon = , - className, slotProps, ...restProps } = useThemeProps({ From 84d319ea17e6615c60a0808f7ad67107c2b6d25d Mon Sep 17 00:00:00 2001 From: Julia Wegmayr Date: Thu, 25 Jan 2024 11:05:18 +0100 Subject: [PATCH 5/8] rename FilterBarButton function --- .../filterbar/filterBarButton/FilterBarButton.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx index 4f4c4e072b..44b75c79f2 100644 --- a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx +++ b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx @@ -80,7 +80,10 @@ export interface FilterBarButtonProps extends ThemedComponentBaseProps<{ root: t openPopover?: boolean; } -export function FilterBarButtonWithStyles(inProps: FilterBarButtonProps) { +/** + * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead. + */ +export function FilterBarButton(inProps: FilterBarButtonProps) { const { children, dirtyFieldsBadge, @@ -111,11 +114,6 @@ export function FilterBarButtonWithStyles(inProps: FilterBarButtonProps) { ); } -/** - * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead. - */ -export { FilterBarButtonWithStyles as FilterBarButton }; - declare module "@mui/material/styles" { interface ComponentNameToClassKey { CometAdminFilterBarButton: FilterBarButtonClassKey; From a2117d225f302d6faa77bd89645f91ca41d9d7e5 Mon Sep 17 00:00:00 2001 From: Julia Wegmayr Date: Fri, 26 Jan 2024 09:57:07 +0100 Subject: [PATCH 6/8] update FilterBarButton after rebasing --- .../src/table/filterbar/filterBarButton/FilterBarButton.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx index 44b75c79f2..bf5233f0a9 100644 --- a/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx +++ b/packages/admin/admin/src/table/filterbar/filterBarButton/FilterBarButton.tsx @@ -11,7 +11,6 @@ import { FilterBarActiveFilterBadge, FilterBarActiveFilterBadgeProps } from "../ /** * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead. */ - export type FilterBarButtonClassKey = "root" | "open" | "hasDirtyFields" | "filterBadge"; type OwnerState = { hasDirtyFields: boolean; openPopover: boolean | undefined }; @@ -74,6 +73,9 @@ const FilterBadge = styled("span", { `, ); +/** + * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead. + */ export interface FilterBarButtonProps extends ThemedComponentBaseProps<{ root: typeof Button; filterBadge: "span" }>, ButtonProps { dirtyFieldsBadge?: React.ComponentType; numberDirtyFields?: number; From 569d0cdde5c6be47f0c47df4ddb4e92a5c609dfc Mon Sep 17 00:00:00 2001 From: Julia Wegmayr Date: Tue, 30 Jan 2024 09:34:42 +0100 Subject: [PATCH 7/8] fix lint error --- demo/api/block-meta.json | 61 ++++++++++++++++++++++++++++++++++++++-- 1 file changed, 59 insertions(+), 2 deletions(-) diff --git a/demo/api/block-meta.json b/demo/api/block-meta.json index 9c6d39d841..3b491a06dc 100644 --- a/demo/api/block-meta.json +++ b/demo/api/block-meta.json @@ -1073,7 +1073,8 @@ "columns": "Columns", "anchor": "Anchor", "twoLists": "TwoLists", - "media": "Media" + "media": "Media", + "teaser": "Teaser" }, "nullable": false }, @@ -1130,7 +1131,8 @@ "columns": "Columns", "anchor": "Anchor", "twoLists": "TwoLists", - "media": "Media" + "media": "Media", + "teaser": "Teaser" }, "nullable": false }, @@ -1737,6 +1739,61 @@ } ] }, + { + "name": "Teaser", + "fields": [ + { + "name": "headline", + "kind": "Block", + "block": "Headline", + "nullable": false + }, + { + "name": "image", + "kind": "Block", + "block": "DamImage", + "nullable": false + }, + { + "name": "links", + "kind": "Block", + "block": "LinkList", + "nullable": false + }, + { + "name": "buttons", + "kind": "Block", + "block": "LinkList", + "nullable": false + } + ], + "inputFields": [ + { + "name": "headline", + "kind": "Block", + "block": "Headline", + "nullable": false + }, + { + "name": "image", + "kind": "Block", + "block": "DamImage", + "nullable": false + }, + { + "name": "links", + "kind": "Block", + "block": "LinkList", + "nullable": false + }, + { + "name": "buttons", + "kind": "Block", + "block": "LinkList", + "nullable": false + } + ] + }, { "name": "TextImage", "fields": [ From 263da799abecbc363c242a1e91652eb7ac04bf12 Mon Sep 17 00:00:00 2001 From: Julia Wegmayr Date: Tue, 30 Jan 2024 15:38:40 +0100 Subject: [PATCH 8/8] delete comet-config.json files --- demo/admin/comet-config.json | 1 - demo/site/comet-config.json | 1 - 2 files changed, 2 deletions(-) delete mode 120000 demo/admin/comet-config.json delete mode 120000 demo/site/comet-config.json diff --git a/demo/admin/comet-config.json b/demo/admin/comet-config.json deleted file mode 120000 index ffe3ce450d..0000000000 --- a/demo/admin/comet-config.json +++ /dev/null @@ -1 +0,0 @@ -../api/comet-config.json \ No newline at end of file diff --git a/demo/site/comet-config.json b/demo/site/comet-config.json deleted file mode 120000 index ffe3ce450d..0000000000 --- a/demo/site/comet-config.json +++ /dev/null @@ -1 +0,0 @@ -../api/comet-config.json \ No newline at end of file