Refactor theming of FilterBarActiveFilterBadge (#1571)

<img width="160" alt="Screenshot 2024-01-15 at 13 29 01" src="https://github.com/vivid-planet/comet/assets/109900447/6451b8a0-557a-4449-9fc8-ece517dfd2ec"> --------- Co-authored-by: Julia Wegmayr <julia.wegmayr@vivid-planet.com>
vivid-planet · Jan 25, 2024 · 96eb8fb · 96eb8fb
1 parent 8a44ce9
commit 96eb8fb
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 40 deletions.
diff --git a/packages/admin/admin/src/index.ts b/packages/admin/admin/src/index.ts
@@ -145,8 +145,11 @@ export { useExportPagedTableQuery } from "./table/excelexport/useExportPagedTabl
 export { useExportTableQuery } from "./table/excelexport/useExportTableQuery";
 export { ExcelExportButton } from "./table/ExcelExportButton";
 export { FilterBar, FilterBarClassKey, FilterBarProps } from "./table/filterbar/FilterBar";
-export { FilterBarActiveFilterBadge, FilterBarActiveFilterBadgeProps } from "./table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge";
-export { FilterBarActiveFilterBadgeClassKey } from "./table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge.styles";
+export {
+    FilterBarActiveFilterBadge,
+    FilterBarActiveFilterBadgeClassKey,
+    FilterBarActiveFilterBadgeProps,
+} 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";

diff --git a/...dmin/src/table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge.styles.tsx b/...dmin/src/table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge.styles.tsx
diff --git a/...admin/admin/src/table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge.tsx b/...admin/admin/src/table/filterbar/filterBarActiveFilterBadge/FilterBarActiveFilterBadge.tsx
@@ -1,35 +1,62 @@
-import { ComponentsOverrides, Theme, Typography } from "@mui/material";
-import { WithStyles, withStyles } from "@mui/styles";
+import { ComponentsOverrides, Typography } from "@mui/material";
+import { css, styled, Theme, useThemeProps } from "@mui/material/styles";
+import { ThemedComponentBaseProps } from "helpers/ThemedComponentBaseProps";
 import * as React from "react";
 
-import { FilterBarActiveFilterBadgeClassKey, styles } from "./FilterBarActiveFilterBadge.styles";
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
+export type FilterBarActiveFilterBadgeClassKey = "hasValueCount";
+
+const HasValueCount = styled("div", {
+    name: "CometAdminFilterBarActiveFilterBadge",
+    slot: "hasValueCount",
+    overridesResolver(_, styles) {
+        return [styles.hasValueCount];
+    },
+})(
+    ({ theme }) => css`
+        display: flex;
+        align-items: center;
+        background-color: ${theme.palette.grey[100]};
+        box-sizing: border-box;
+        text-align: center;
+        border-radius: 4px;
+        padding: 4px 5px;
+        margin-top: -4px;
+        margin-bottom: -4px;
+        font-size: 12px;
+    `,
+);
 
 /**
  * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
  */
-export interface FilterBarActiveFilterBadgeProps {
+export interface FilterBarActiveFilterBadgeProps extends ThemedComponentBaseProps<{ hasValueCount: "div" }> {
     countValue: number;
 }
 
-function FilterBadge({ countValue, classes }: React.PropsWithChildren<FilterBarActiveFilterBadgeProps> & WithStyles<typeof styles>) {
+/**
+ * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
+ */
+export function FilterBarActiveFilterBadge(inProps: FilterBarActiveFilterBadgeProps) {
+    const { countValue, slotProps, ...restProps } = useThemeProps({
+        props: inProps,
+        name: "CometAdminFilterBarActiveFilterBadge",
+    });
     if (countValue > 0) {
         return (
-            <div className={classes.hasValueCount}>
+            <HasValueCount {...slotProps?.hasValueCount} {...restProps}>
                 <Typography variant="inherit" display="block">
                     {countValue}
                 </Typography>
-            </div>
+            </HasValueCount>
         );
     } else {
         return null;
     }
 }
 
-/**
- * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
- */
-export const FilterBarActiveFilterBadge = withStyles(styles, { name: "CometAdminFilterBarActiveFilterBadge" })(FilterBadge);
-
 declare module "@mui/material/styles" {
     interface ComponentNameToClassKey {
         CometAdminFilterBarActiveFilterBadge: FilterBarActiveFilterBadgeClassKey;