COM-303 Refactor theming of SplitButton

packages/admin/admin/src/common/buttons/split/SplitButton.tsx

@@ -1,12 +1,22 @@
 import { ChevronDown } from "@comet/admin-icons";
-import { Button, ButtonGroup, ButtonGroupProps, MenuItem, MenuList, Popover, PopoverProps } from "@mui/material";
-import { withStyles } from "@mui/styles";
+import {
+    Button,
+    ButtonGroup as MuiButtonGroup,
+    ButtonGroupProps,
+    MenuItem as MuiMenuItem,
+    MenuList as MuiMenuList,
+    Popover as MuiPopover,
+    PopoverProps,
+} from "@mui/material";
+import { styled, useThemeProps } from "@mui/material/styles";
 import * as React from "react";
 import { PropsWithChildren } from "react";
 
 import { useStoredState } from "../../../hooks/useStoredState";
 import { SplitButtonContext } from "./SplitButtonContext";
 
+export type SplitButtonClassKey = "buttonGroup" | "activeButton" | "popover" | "menuList" | "menuItem";
+
 export interface SplitButtonProps extends ButtonGroupProps<any> {
     selectIcon?: React.ReactNode;
     selectedIndex?: number;
@@ -18,19 +28,61 @@ export interface SplitButtonProps extends ButtonGroupProps<any> {
     popoverProps?: Partial<PopoverProps>;
 }
 
+const ButtonGroup = styled(MuiButtonGroup, {
+    name: "CometAdminSplitButton",
+    slot: "buttonGroup",
+    overridesResolver(_, styles) {
+        return [styles.buttonGroup];
+    },
+})();
+
+const ActiveButton = styled(Button, {
+    name: "CometAdminSplitButton",
+    slot: "activeButton",
+    overridesResolver(_, styles) {
+        return [styles.activeButton];
+    },
+})();
+
+const Popover = styled(MuiPopover, {
+    name: "CometAdminSplitButton",
+    slot: "popover",
+    overridesResolver(_, styles) {
+        return [styles.popover];
+    },
+})();
+
+const MenuList = styled(MuiMenuList, {
+    name: "CometAdminSplitButton",
+    slot: "menuList",
+    overridesResolver(_, styles) {
+        return [styles.menuList];
+    },
+})();
+
+const MenuItem = styled(MuiMenuItem, {
+    name: "CometAdminSplitButton",
+    slot: "menuItem",
+    overridesResolver(_, styles) {
+        return [styles.menuItem];
+    },
+})();
+
 // Based on https://v4.mui.com/components/button-group/#split-button
-const SplitBtn = ({
-    selectIcon = <ChevronDown />,
-    selectedIndex,
-    onSelectIndex,
-    children,
-    showSelectButton,
-    localStorageKey,
-    storage,
-    autoClickOnSelect = true,
-    popoverProps,
-    ...restProps
-}: PropsWithChildren<SplitButtonProps>) => {
+export function SplitButton(inProps: PropsWithChildren<SplitButtonProps>) {
+    const {
+        selectIcon = <ChevronDown />,
+        selectedIndex,
+        onSelectIndex,
+        children,
+        showSelectButton,
+        localStorageKey,
+        storage,
+        autoClickOnSelect = true,
+        popoverProps,
+        ...restProps
+    } = useThemeProps({ props: inProps, name: "CometAdminSplitButton" });
+
     const [showSelectButtonState, setShowSelectButtonState] = React.useState<boolean | undefined>(undefined);
 
     const childrenArray = React.Children.toArray(children);
@@ -79,15 +131,15 @@ const SplitBtn = ({
             <ButtonGroup variant={activeChildVariant} color={activeChildColor} {...restProps} ref={anchorRef}>
                 {ActiveChild}
                 {(showSelect ?? childrenArray.length > 1) && (
-                    <Button
+                    <ActiveButton
                         variant={activeChildVariant}
                         color={activeChildColor}
                         size="small"
                         classes={ActiveChild.props.classes}
                         onClick={handleToggle}
                     >
                         {selectIcon}
-                    </Button>
+                    </ActiveButton>
                 )}
             </ButtonGroup>
             <Popover
@@ -115,9 +167,7 @@ const SplitBtn = ({
             </Popover>
         </SplitButtonContext.Provider>
     );
-};
-
-export const SplitButton = withStyles({}, { name: "CometAdminSplitButton" })(SplitBtn);
+}
 
 declare module "@mui/material/styles" {
     interface ComponentsPropsList {

packages/admin/admin/src/index.ts

@@ -22,7 +22,7 @@ export { DeleteButton, DeleteButtonClassKey, DeleteButtonProps } from "./common/
 export { OkayButton, OkayButtonClassKey, OkayButtonProps } from "./common/buttons/okay/OkayButton";
 export { SaveButton, SaveButtonProps } from "./common/buttons/save/SaveButton";
 export { SaveButtonClassKey } from "./common/buttons/save/SaveButton.styles";
-export { SplitButton, SplitButtonProps } from "./common/buttons/split/SplitButton";
+export { SplitButton, SplitButtonClassKey, SplitButtonProps } from "./common/buttons/split/SplitButton";
 export { SplitButtonContext, SplitButtonContextOptions } from "./common/buttons/split/SplitButtonContext";
 export { useSplitButtonContext } from "./common/buttons/split/useSplitButtonContext";
 export { ClearInputAdornment, ClearInputAdornmentProps } from "./common/ClearInputAdornment";