Skip to content

Commit

Permalink
Refactor theming of FilterBarPopoverFilter (#1586)
Browse files Browse the repository at this point in the history 
<img width="429" alt="Screenshot 2024-01-17 at 11 30 02"
src="https://github.com/vivid-planet/comet/assets/109900447/b31600b2-a0b1-482d-a0d3-70e6ade73a87">
<img width="241" alt="Screenshot 2024-01-17 at 11 30 12"
src="https://github.com/vivid-planet/comet/assets/109900447/cc62804b-fdea-4d89-88cc-d56cc6c28280">

---------

Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com>
Co-authored-by: Ricky James Smith <jamesricky@me.com>
  • Loading branch information
@juliawegmayr @jamesricky
3 people authored Jan 31, 2024
1 parent 4529359 commit d2e64d1
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 76 deletions.
7 changes: 7 additions & 0 deletions .changeset/tender-dots-warn.md
View file
Original file line number Diff line number Diff line change
@@ -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.
7 changes: 5 additions & 2 deletions packages/admin/admin/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
44 changes: 0 additions & 44 deletions .../admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.styles.tsx
View file

This file was deleted.

153 changes: 123 additions & 30 deletions packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
Expand All @@ -42,7 +133,7 @@ function PopoverFilter({
};

return (
<div className={classes.root}>
<Root {...slotProps?.root} {...restProps}>
<Form
onSubmit={(values) => {
for (const name in values) {
Expand All @@ -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}
Expand All @@ -67,6 +158,7 @@ function PopoverFilter({
<Popover
open={open}
anchorEl={anchorEl}
{...slotProps?.popover}
onClose={() => {
setAnchorEl(null);
handleSubmit();
Expand All @@ -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"
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit d2e64d1

Please sign in to comment.