Refactor theming of FilterBarMoreFilters (#1588)

<img width="474" alt="Screenshot 2024-01-17 at 13 56 26"
src="https://github.com/vivid-planet/comet/assets/109900447/a16adc13-ff2a-45bf-9755-f65da4639a8a">
<img width="163" alt="Screenshot 2024-01-17 at 13 56 31"
src="https://github.com/vivid-planet/comet/assets/109900447/29f92594-2723-450c-a062-1f900642c8be">

---------

Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com>

.changeset/happy-ladybugs-smile.md

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

packages/admin/admin/src/index.ts

@@ -152,8 +152,11 @@ export {
 } from "./table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge";
 export { FilterBarButton, FilterBarButtonProps } from "./table/filterbar/filterBarButton/FilterBarButton";
 export { FilterBarButtonClassKey } from "./table/filterbar/filterBarButton/FilterBarButton.styles";
-export { FilterBarMoreFilters, FilterBarMoreFiltersProps } from "./table/filterbar/filterBarMoreFilters/FilterBarMoreFilters";
-export { FilterBarMoveFilersClassKey } from "./table/filterbar/filterBarMoreFilters/FilterBarMoreFilters.styles";
+export {
+    FilterBarMoreFilters,
+    FilterBarMoreFiltersClassKey,
+    FilterBarMoreFiltersProps,
+} from "./table/filterbar/filterBarMoreFilters/FilterBarMoreFilters";
 export { FilterBarPopoverFilter, FilterBarPopoverFilterProps } from "./table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter";
 export { FilterBarPopoverFilterClassKey } from "./table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.styles";
 export { TableLocalChangesToolbar } from "./table/LocalChangesToolbar";

packages/admin/admin/src/table/filterbar/filterBarMoreFilters/FilterBarMoreFilters.tsx

@@ -1,47 +1,80 @@
 import { Filter } from "@comet/admin-icons";
-import { ComponentsOverrides, Theme } from "@mui/material";
-import { WithStyles, withStyles } from "@mui/styles";
+import { ComponentsOverrides } from "@mui/material";
+import { css, styled, Theme, useThemeProps } from "@mui/material/styles";
+import { ThemedComponentBaseProps } from "helpers/ThemedComponentBaseProps";
 import * as React from "react";
 import { FormattedMessage } from "react-intl";
 
 import { FilterBarButton } from "../filterBarButton/FilterBarButton";
-import { FilterBarMoveFilersClassKey, styles } from "./FilterBarMoreFilters.styles";
 
 /**
  * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
  */
-export interface FilterBarMoreFiltersProps {
+export type FilterBarMoreFiltersClassKey = "root" | "button";
+
+const Root = styled("div", {
+    name: "CometAdminFilterBarMoreFilters",
+    slot: "root",
+    overridesResolver(_, styles) {
+        return [styles.root];
+    },
+})(
+    css`
+        margin-bottom: 10px;
+        margin-right: 6px;
+    `,
+);
+
+const StyledFilterBarButton = styled(FilterBarButton, {
+    name: "CometAdminFilterBarMoreFilters",
+    slot: "button",
+    overridesResolver(_, styles) {
+        return [styles.button];
+    },
+})(
+    ({ theme }) => css`
+        font-weight: ${theme.typography.fontWeightBold};
+    `,
+);
+
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
+export interface FilterBarMoreFiltersProps extends ThemedComponentBaseProps<{ root: "div"; button: typeof FilterBarButton }> {
     icon?: React.ReactNode;
 }
 
-export function MoreFilters({
-    children,
-    icon = <Filter />,
-    classes,
-}: React.PropsWithChildren<FilterBarMoreFiltersProps> & WithStyles<typeof styles>): React.ReactElement {
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
+export function FilterBarMoreFilters(inProps: React.PropsWithChildren<FilterBarMoreFiltersProps>) {
+    const {
+        children,
+        icon = <Filter />,
+        slotProps,
+        ...restProps
+    } = useThemeProps({
+        props: inProps,
+        name: "CometAdminFilterBarMoreFilters",
+    });
     const [hasExtended, setHasExtended] = React.useState(false);
 
     if (hasExtended) {
         return <>{children}</>;
     }
 
     return (
-        <div className={classes.root}>
-            <FilterBarButton className={classes.button} onClick={() => setHasExtended(true)} startIcon={icon} endIcon={null}>
+        <Root {...slotProps?.root} {...restProps}>
+            <StyledFilterBarButton {...slotProps?.button} onClick={() => setHasExtended(true)} startIcon={icon} endIcon={null}>
                 <FormattedMessage id="comet.filterbar.moreFilter" defaultMessage="More Filter" />
-            </FilterBarButton>
-        </div>
+            </StyledFilterBarButton>
+        </Root>
     );
 }
 
-/**
- * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
- */
-export const FilterBarMoreFilters = withStyles(styles, { name: "CometAdminFilterBarMoreFilters" })(MoreFilters);
-
 declare module "@mui/material/styles" {
     interface ComponentNameToClassKey {
-        CometAdminFilterBarMoreFilters: FilterBarMoveFilersClassKey;
+        CometAdminFilterBarMoreFilters: FilterBarMoreFiltersClassKey;
     }
 
     interface ComponentsPropsList {