Merge pull request #1376 from vivid-planet/feature/refactor-admin-com…

…ponent-theming

[Feature] Refactor theming of Admin components to remove legacy `@mui/styles` package

.changeset/clever-clocks-smile.md

@@ -0,0 +1,5 @@
+---
+"@comet/admin-color-picker": major
+---
+
+Replace the `componentsProps` prop with `slotProps` in `ColorPicker` and remove the `ColorPickerComponentsProps` type

.changeset/cyan-drinks-enjoy.md

@@ -0,0 +1,8 @@
+---
+"@comet/admin": major
+---
+
+Change theming method of `Menu`
+
+-   Rename `permanent` class-key to `permanentDrawer` and `temporary` class-key to `temporaryDrawer`
+-   Replace the `permanentDrawerProps` and `temporaryDrawerProps` props with `slotProps`

.changeset/great-insects-reply.md

@@ -0,0 +1,7 @@
+---
+"@comet/admin": major
+---
+
+Remove the `FieldContainerComponent` component
+
+`FieldContainerComponent` was never intended to be exported, use `FieldContainer` instead.

.changeset/happy-ladybugs-smile.md

@@ -0,0 +1,5 @@
+---
+"@comet/admin": major
+---
+
+Rename the `FilterBarMoveFilersClassKey` type to `FilterBarMoreFiltersClassKey`

.changeset/khaki-cobras-trade.md

@@ -0,0 +1,7 @@
+---
+"@comet/admin": major
+---
+
+Remove the `disabled` class-key in `TabScrollButton`
+
+Use the `:disabled` selector instead when styling the disabled state.

.changeset/long-crabs-bake.md

@@ -0,0 +1,8 @@
+---
+"@comet/admin": major
+---
+
+Remove the `components` and `componentProps` props from `CopyToClipboardButton`
+
+Instead, for the icons, use the `copyIcon` and `successIcon` props to pass a `ReactNode` instead of separately passing in values to the `components` and `componentProps` objects. 
+Use `slotPops` to pass props to the remaining elements.

.changeset/proud-cheetahs-sleep.md

@@ -0,0 +1,9 @@
+---
+"@comet/admin-color-picker": patch
+"@comet/admin-react-select": patch
+"@comet/admin-date-time": patch
+"@comet/admin-rte": patch
+"@comet/admin": patch
+---
+
+Allow partial props in the theme's `defaultProps` instead of requiring all props when setting the `defaultProps` of a component

.changeset/quick-foxes-notice.md

@@ -0,0 +1,5 @@
+---
+"@comet/admin": major
+---
+
+Replace the `componentsProps` prop with `slotProps` in `FieldSet`

.changeset/serious-ravens-matter.md

@@ -0,0 +1,5 @@
+---
+"@comet/admin": major
+---
+
+Replace the `componentsProps` prop with `slotProps` in `InputWithPopper` and remove the `InputWithPopperComponentsProps` type

.changeset/strange-steaks-pull.md

@@ -0,0 +1,7 @@
+---
+"@comet/admin": major
+---
+
+Remove the `message` class-key from `Alert`
+
+Use the `.MuiAlert-message` selector instead to style the message of the underlying MUI `Alert` component.

.changeset/ten-turkeys-poke.md

@@ -0,0 +1,29 @@
+---
+"@comet/admin-date-time": major
+---
+
+Rename multiple props and class-keys and remove the `componentsProps` types:
+
+-   `DatePicker`:
+
+    -   Replace the `componentsProps` prop with `slotProps`
+    -   Remove the `DatePickerComponentsProps` type
+
+-   `DateRangePicker`:
+
+    -   Replace the `componentsProps` prop with `slotProps`
+    -   Remove the `DateRangePickerComponentsProps` type
+    -   Rename the `calendar` class-key to `dateRange`
+
+-   `DateTimePicker`:
+
+    -   Replace the `componentsProps` prop with `slotProps`
+    -   Remove the `DateTimePickerComponentsProps` type
+    -   Replace the `formControl` class-key with two separate class-keys: `dateFormControl` and `timeFormControl`
+
+-   `TimeRangePicker`:
+
+    -   Replace the `componentsProps` prop with `slotProps`
+    -   Remove the `TimeRangePickerComponentsProps` and `TimeRangePickerIndividualPickerProps` types
+    -   Replace the `formControl` class-key with two separate class-keys: `startFormControl` and `endFormControl`
+    -   Replace the `timePicker` class-key with two separate class-keys: `startTimePicker` and `endTimePicker`

.changeset/tender-dots-warn.md

@@ -0,0 +1,7 @@
+---
+"@comet/admin": major
+---
+
+Remove the `paper` class-key from `FilterBarPopoverFilter`
+
+Instead of using `styleOverrides` for `paper` in the theme, use the `slotProps` and `sx` props.

.changeset/thin-ligers-pull.md

@@ -0,0 +1,7 @@
+---
+"@comet/admin-react-select": major
+---
+
+Remove `ControlInput` component
+
+`ControlInput` was never intended to be exported, use MUI's `InputBase` instead.

.changeset/tough-zoos-refuse.md

@@ -0,0 +1,8 @@
+---
+"@comet/admin": major
+---
+
+Remove the `disabled` and `focusVisible` class-keys and rename the `inner` class-key to `content` in `AppHeaderButton`
+
+Use the `:disabled` selector instead when styling the disabled state.
+Use the `:focus` selector instead when styling the focus state.

.changeset/twelve-spoons-play.md

@@ -0,0 +1,7 @@
+---
+"@comet/admin": major
+---
+
+Remove the `disabled` class-key in `ClearInputButton`
+
+Use the `:disabled` selector instead when styling the disabled state.

.changeset/two-lions-promise.md

@@ -0,0 +1,5 @@
+---
+"@comet/admin": major
+---
+
+`MenuItem` no longer supports props from MUI's `ListItem` but those from `ListItemButton` instead

.changeset/violet-wombats-try.md

@@ -0,0 +1,8 @@
+---
+"@comet/admin": major
+---
+
+Remove the `popoverPaper` class-key and rename the `popoverRoot` class-key to `popover` in `AppHeaderDropdown`
+
+Instead of using `styleOverrides` for `popoverPaper` in the theme, use the `slotProps` and `sx` props.
+Use the `popover` prop instead of `popoverRoot` to override styles.

.changeset/yellow-houses-talk.md

@@ -0,0 +1,106 @@
+---
+"@comet/admin-color-picker": major
+"@comet/admin-react-select": major
+"@comet/admin-date-time": major
+"@comet/blocks-admin": major
+"@comet/admin-theme": major
+"@comet/admin-rte": major
+"@comet/cms-admin": major
+"@comet/admin": major
+---
+
+Change the method of overriding the styling of Admin components
+
+-   Remove dependency on the legacy `@mui/styles` package in favor of `@mui/material/styles`.
+-   Add the ability to style components using [MUI's `sx` prop](https://mui.com/system/getting-started/the-sx-prop/).
+-   Add the ability to style individual elements (slots) of a component using the `slotProps` and `sx` props.
+-   The `$` syntax in the theme's `styleOverrides` is no longer supported, see: https://mui.com/material-ui/migration/v5-style-changes/#migrate-theme-styleoverrides-to-emotion
+
+```diff
+ const theme = createCometTheme({
+     components: {
+         CometAdminMyComponent: {
+             styleOverrides: {
+-                root: {
+-                    "&$hasShadow": {
+-                        boxShadow: "2px 2px 5px 0 rgba(0, 0, 0, 0.25)",
+-                    },
+-                    "& $header": {
+-                        backgroundColor: "lime",
+-                    },
+-                },
++                hasShadow: {
++                    boxShadow: "2px 2px 5px 0 rgba(0, 0, 0, 0.25)",
++                },
++                header: {
++                    backgroundColor: "lime",
++                },
+             },
+         },
+     },
+ });
+```
+
+-   Overriding a component's styles using `withStyles` is no longer supported. Use the `sx` and `slotProps` props instead:
+
+```diff
+-import { withStyles } from "@mui/styles";
+-
+-const StyledMyComponent = withStyles({
+-    root: {
+-        backgroundColor: "lime",
+-    },
+-    header: {
+-        backgroundColor: "fuchsia",
+-    },
+-})(MyComponent);
+-
+-// ...
+-
+-<StyledMyComponent title="Hello World" />;
++<MyComponent
++    title="Hello World"
++    sx={{
++        backgroundColor: "lime",
++    }}
++    slotProps={{
++        header: {
++            sx: {
++                backgroundColor: "fuchsia",
++            },
++        },
++    }}
++/>
+```
+
+-   The module augmentation for the `DefaultTheme` type from `@mui/styles/defaultTheme` is no longer needed and needs to be removed from the admins theme file, usually located in `admin/src/theme.ts`:
+
+```diff
+-declare module "@mui/styles/defaultTheme" {
+-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+-    export interface DefaultTheme extends Theme {}
+-}
+```
+
+-   Class-keys originating from MUI components have been removed from Comet Admin components, causing certain class-names and `styleOverrides` to no longer be applied.
+    The components `root` class-key is not affected. Other class-keys will retain the class-names and `styleOverrides` from the underlying MUI component.
+    For example, in `ClearInputAdornment` (when used with `position="end"`) the class-name `CometAdminClearInputAdornment-positionEnd` and the `styleOverrides` for `CometAdminClearInputAdornment.positionEnd` will no longer be applied.
+    The component will retain the class-names `MuiInputAdornment-positionEnd`, `MuiInputAdornment-root`, and `CometAdminClearInputAdornment-root`.
+    Also, the `styleOverrides` for `MuiInputAdornment.positionEnd`, `MuiInputAdornment.root`, and `CometAdminClearInputAdornment.root` will continue to be applied.
+
+    This affects the following components:
+
+    -   `AppHeader`
+    -   `AppHeaderMenuButton`
+    -   `ClearInputAdornment`
+    -   `Tooltip`
+    -   `CancelButton`
+    -   `DeleteButton`
+    -   `OkayButton`
+    -   `SaveButton`
+    -   `StackBackButton`
+    -   `DatePicker`
+    -   `DateRangePicker`
+    -   `TimePicker`
+
+-   For more details, see MUI's migration guide: https://mui.com/material-ui/migration/v5-style-changes/#mui-styles

demo/admin/package.json

@@ -36,7 +36,6 @@
         "@mui/icons-material": "^5.0.0",
         "@mui/lab": "^5.0.0-alpha.76",
         "@mui/material": "^5.0.0",
-        "@mui/styles": "^5.0.0",
         "@mui/system": "^5.0.0",
         "@mui/x-data-grid": "^5.15.2",
         "@mui/x-data-grid-pro": "^5.15.2",

demo/admin/src/theme.ts

@@ -1,10 +1,4 @@
 import { createCometTheme } from "@comet/admin-theme";
 import type {} from "@mui/lab/themeAugmentation";
-import { Theme } from "@mui/material";
 
 export default createCometTheme();
-
-declare module "@mui/styles/defaultTheme" {
-    // eslint-disable-next-line @typescript-eslint/no-empty-interface
-    export interface DefaultTheme extends Theme {}
-}