COM-296: Refactor theming of HoverActions

packages/admin/admin/src/common/HoverActions.tsx

@@ -1,61 +1,98 @@
-import { ComponentsOverrides, Grow, Theme } from "@mui/material";
-import { createStyles, WithStyles, withStyles } from "@mui/styles";
+import { ComponentsOverrides, css, Grow, styled, Theme, useThemeProps } from "@mui/material";
+import { ThemedComponentBaseProps } from "helpers/ThemedComponentBaseProps";
 import * as React from "react";
 
-export type HoverActionsProps = React.PropsWithChildren<{
+export interface HoverActionsProps
+    extends ThemedComponentBaseProps<{
+        root: "div";
+        hoverAreaExpansion: "div";
+        actions: "div";
+        children: "div";
+    }> {
     actions?: React.ReactNode;
-}>;
+    children?: React.ReactNode;
+}
+
+export type HoverActionsClassKey = "root" | "hoverAreaExpansion" | "actions" | "children";
 
-const HoverActions = ({ classes, actions, children }: HoverActionsProps & WithStyles<typeof styles>): React.ReactElement => {
+export const HoverActions = (inProps: HoverActionsProps) => {
+    const { actions, children, slotProps, ...restProps } = useThemeProps({ props: inProps, name: "CometAdminHoverActions" });
     const [isHovering, setIsHovering] = React.useState<boolean>(false);
 
     return (
-        <div className={classes.root} onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}>
-            <div className={classes.hoverAreaExpansion} />
+        <Root onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)} {...slotProps?.root} {...restProps}>
+            <HoverAreaExpansion {...slotProps?.hoverAreaExpansion} {...restProps} />
             <Grow in={Boolean(actions) && isHovering}>
-                <div className={classes.actions}>{actions}</div>
+                <Actions {...slotProps?.actions} {...restProps}>
+                    {actions}
+                </Actions>
             </Grow>
-            <div className={classes.children}>{children}</div>
-        </div>
+            <Children {...slotProps?.children} {...restProps}>
+                {children}
+            </Children>
+        </Root>
     );
 };
 
-export type HoverActionsClassKey = "root" | "hoverAreaExpansion" | "actions" | "children";
+const Root = styled("div", {
+    name: "CometAdminHoverActions",
+    slot: "root",
+    overridesResolver(_, styles) {
+        return [styles.root];
+    },
+})();
 
-const styles = ({ spacing }: Theme) => {
-    return createStyles<HoverActionsClassKey, HoverActionsProps>({
-        root: {},
-        hoverAreaExpansion: {
-            // This element expands the root's hover area to include the parent's full size, including padding.
-            // For example, when used inside a MuiTableCell, the whole cell can be hovered instead of only its text content.
-            position: "absolute",
-            top: 0,
-            bottom: 0,
-            right: 0,
-            left: 0,
-        },
-        actions: {
-            position: "absolute",
-            zIndex: 2,
-            top: 0,
-            bottom: 0,
-            right: 0,
-            paddingLeft: spacing(2),
-            paddingRight: spacing(2),
-            backgroundColor: "rgba(255, 255 ,255, 0.9)",
-            display: "flex",
-            alignItems: "center",
-        },
-        children: {
-            position: "relative",
-            zIndex: 1,
-        },
-    });
-};
+const HoverAreaExpansion = styled("div", {
+    name: "CometAdminHoverActions",
+    slot: "hoverAreaExpansion",
+    overridesResolver(_, styles) {
+        return [styles.hoverAreaExpansion];
+    },
+})(
+    css`
+        // This element expands the root's hover area to include the parent's full size, including padding.
+        // For example, when used inside a MuiTableCell, the whole cell can be hovered instead of only its text content.
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+    `,
+);
 
-const HoverActionsWithStyles = withStyles(styles, { name: "CometAdminHoverActions" })(HoverActions);
+const Actions = styled("div", {
+    name: "CometAdminHoverActions",
+    slot: "actions",
+    overridesResolver(_, styles) {
+        return [styles.actions];
+    },
+})(
+    ({ theme }) => css`
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        display: flex;
+        align-items: center;
+        padding-left: ${theme.spacing(2)};
+        padding-right: ${theme.spacing(2)};
+        background-color: rgba(255, 255, 255, 0.9);
+    `,
+);
 
-export { HoverActionsWithStyles as HoverActions };
+const Children = styled("div", {
+    name: "CometAdminHoverActions",
+    slot: "children",
+    overridesResolver(_, styles) {
+        return [styles.children];
+    },
+})(
+    css`
+        position: relative;
+        z-index: 1;
+    `,
+);
 
 declare module "@mui/material/styles" {
     interface ComponentNameToClassKey {