COM-322: Refactor theming of FilterBarPopoverFilter

.changeset/tender-dots-warn.md

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

packages/admin/admin/src/index.ts

@@ -156,8 +156,11 @@ export {
     FilterBarMoreFiltersClassKey,
     FilterBarMoreFiltersProps,
 } from "./table/filterbar/filterBarMoreFilters/FilterBarMoreFilters";
-export { FilterBarPopoverFilter, FilterBarPopoverFilterProps } from "./table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter";
-export { FilterBarPopoverFilterClassKey } from "./table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.styles";
+export {
+    FilterBarPopoverFilter,
+    FilterBarPopoverFilterClassKey,
+    FilterBarPopoverFilterProps,
+} from "./table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter";
 export { TableLocalChangesToolbar } from "./table/LocalChangesToolbar";
 export { TablePagination } from "./table/Pagination";
 export { createOffsetLimitPagingAction } from "./table/paging/createOffsetLimitPagingAction";

packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx

@@ -1,20 +1,105 @@
 import { Check, Reset } from "@comet/admin-icons";
-import { Button, ButtonProps, ComponentsOverrides, Popover, Theme } from "@mui/material";
-import { WithStyles, withStyles } from "@mui/styles";
+import { Button, ButtonProps, ComponentsOverrides, Popover as MuiPopover, Theme } from "@mui/material";
+import { css, styled, useThemeProps } from "@mui/material/styles";
+import { ThemedComponentBaseProps } from "helpers/ThemedComponentBaseProps";
 import * as React from "react";
 import { Form, useForm } from "react-final-form";
 import { FormattedMessage } from "react-intl";
 
+import { Root as FieldContainerRoot } from "../../../form/FieldContainer";
 import { messages } from "../../../messages";
 import { dirtyFieldsCount } from "../dirtyFieldsCount";
 import { FilterBarActiveFilterBadgeProps } from "../filterBarActiveFilterBadge/FilterBarActiveFilterBadge";
 import { FilterBarButton, FilterBarButtonProps } from "../filterBarButton/FilterBarButton";
-import { FilterBarPopoverFilterClassKey, styles } from "./FilterBarPopoverFilter.styles";
 
 /**
  * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
  */
-export interface FilterBarPopoverFilterProps {
+export type FilterBarPopoverFilterClassKey = "root" | "fieldBarWrapper" | "popoverContentContainer" | "buttonsContainer" | "popover";
+
+const Root = styled("div", {
+    name: "CometAdminFilterBarPopoverFilter",
+    slot: "root",
+    overridesResolver(_, styles) {
+        return [styles.root];
+    },
+})(
+    ({ theme }) => css`
+        background-color: ${theme.palette.common.white};
+        position: relative;
+        margin-bottom: 10px;
+        border-radius: 2px;
+        margin-right: 6px;
+    `,
+);
+
+const FieldBarWrapper = styled("div", {
+    name: "CometAdminFilterBarPopoverFilter",
+    slot: "fieldBarWrapper",
+    overridesResolver(_, styles) {
+        return [styles.fieldBarWrapper];
+    },
+})(
+    css`
+        position: relative;
+    `,
+);
+
+const PopoverContentContainer = styled("div", {
+    name: "CometAdminFilterBarPopoverFilter",
+    slot: "popoverContentContainer",
+    overridesResolver(_, styles) {
+        return [styles.popoverContentContainer];
+    },
+})(
+    css`
+        min-width: 300px;
+
+        & ${FieldContainerRoot} {
+            box-sizing: border-box;
+            padding: 20px;
+            margin-bottom: 0;
+        }
+    `,
+);
+
+const ButtonsContainer = styled("div", {
+    name: "CometAdminFilterBarPopoverFilter",
+    slot: "buttonsContainer",
+    overridesResolver(_, styles) {
+        return [styles.buttonsContainer];
+    },
+})(
+    ({ theme }) => css`
+        border-top: 1px solid ${theme.palette.grey[100]};
+        justify-content: space-between;
+        box-sizing: border-box;
+        padding: 10px 15px;
+        display: flex;
+        height: 60px;
+    `,
+);
+
+const Popover = styled(MuiPopover, {
+    name: "CometAdminFilterBarPopoverFilter",
+    slot: "popover",
+    overridesResolver(_, styles) {
+        return [styles.popover];
+    },
+})();
+
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
+export interface FilterBarPopoverFilterProps
+    extends ThemedComponentBaseProps<{
+        root: "div";
+        fieldBarWrapper: "div";
+        popoverContentContainer: "div";
+        buttonsContainer: "div";
+        contentContainer: "div";
+        popover: typeof Popover;
+    }> {
     label: string;
     dirtyFieldsBadge?: React.ComponentType<FilterBarActiveFilterBadgeProps>;
     calcNumberDirtyFields?: (values: Record<string, any>, registeredFields: string[]) => number;
@@ -23,16 +108,22 @@ export interface FilterBarPopoverFilterProps {
     filterBarButtonProps?: Partial<FilterBarButtonProps>;
 }
 
-function PopoverFilter({
-    children,
-    label,
-    dirtyFieldsBadge,
-    calcNumberDirtyFields = dirtyFieldsCount,
-    submitButtonProps,
-    resetButtonProps,
-    filterBarButtonProps,
-    classes,
-}: React.PropsWithChildren<FilterBarPopoverFilterProps> & WithStyles<typeof styles>) {
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
+export function FilterBarPopoverFilter(inProps: React.PropsWithChildren<FilterBarPopoverFilterProps>) {
+    const {
+        children,
+        label,
+        dirtyFieldsBadge,
+        calcNumberDirtyFields = dirtyFieldsCount,
+        submitButtonProps,
+        resetButtonProps,
+        filterBarButtonProps,
+        slotProps,
+        ...restProps
+    } = useThemeProps({ props: inProps, name: "CometAdminFilterBarPopoverFilter" });
+
     const outerForm = useForm();
     const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
     const open = Boolean(anchorEl);
@@ -42,7 +133,7 @@ function PopoverFilter({
     };
 
     return (
-        <div className={classes.root}>
+        <Root {...slotProps?.root} {...restProps}>
             <Form
                 onSubmit={(values) => {
                     for (const name in values) {
@@ -54,7 +145,7 @@ function PopoverFilter({
                 {({ form, values, handleSubmit, dirtyFields }) => {
                     const countValue = calcNumberDirtyFields(values, form.getRegisteredFields());
                     return (
-                        <div className={classes.fieldBarWrapper}>
+                        <FieldBarWrapper {...slotProps?.fieldBarWrapper}>
                             <FilterBarButton
                                 openPopover={open}
                                 numberDirtyFields={countValue}
@@ -67,6 +158,7 @@ function PopoverFilter({
                             <Popover
                                 open={open}
                                 anchorEl={anchorEl}
+                                {...slotProps?.popover}
                                 onClose={() => {
                                     setAnchorEl(null);
                                     handleSubmit();
@@ -75,16 +167,22 @@ function PopoverFilter({
                                     vertical: "bottom",
                                     horizontal: "left",
                                 }}
-                                PaperProps={{ square: true, elevation: 1 }}
-                                classes={{
-                                    paper: classes.paper,
+                                PaperProps={{
+                                    square: true,
+                                    elevation: 1,
+                                    ...slotProps?.popover?.PaperProps,
+                                    sx: {
+                                        marginLeft: "-1", //due to border of popover, but now overrideable with styling if needed
+                                        marginTop: "2", //due to boxShadow of popover to not overlap border of clickable fieldBar
+                                        ...slotProps?.popover?.PaperProps?.sx,
+                                    },
                                 }}
                                 elevation={2}
                                 keepMounted
                             >
-                                <div className={classes.popoverContentContainer}>
+                                <PopoverContentContainer {...slotProps?.popoverContentContainer}>
                                     {children}
-                                    <div className={classes.buttonsContainer}>
+                                    <ButtonsContainer {...slotProps?.buttonsContainer}>
                                         <Button
                                             type="reset"
                                             variant="text"
@@ -116,22 +214,17 @@ function PopoverFilter({
                                         >
                                             <FormattedMessage {...messages.apply} />
                                         </Button>
-                                    </div>
-                                </div>
+                                    </ButtonsContainer>
+                                </PopoverContentContainer>
                             </Popover>
-                        </div>
+                        </FieldBarWrapper>
                     );
                 }}
             </Form>
-        </div>
+        </Root>
     );
 }
 
-/**
- * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
- */
-export const FilterBarPopoverFilter = withStyles(styles, { name: "CometAdminFilterBarPopoverFilter" })(PopoverFilter);
-
 declare module "@mui/material/styles" {
     interface ComponentNameToClassKey {
         CometAdminFilterBarPopoverFilter: FilterBarPopoverFilterClassKey;