fix(ItemAction): theme support

Author: tenphi

src/components/actions/ItemAction/ItemAction.tsx

@@ -152,11 +152,11 @@ export const ItemAction = forwardRef(function ItemAction(
   allProps: CubeItemActionProps,
   ref: FocusableRef<HTMLElement>,
 ) {
-  const { type: contextType } = useItemActionContext();
+  const { type: contextType, theme: contextTheme } = useItemActionContext();
 
   const {
     type = contextType ?? 'neutral',
-    theme = 'default',
+    theme = contextTheme ?? 'default',
     icon,
     children,
     isLoading = false,
@@ -238,6 +238,10 @@ export const ItemAction = forwardRef(function ItemAction(
     return {};
   }, [tooltip]);
 
+  const finalType = useMemo(() => {
+    return theme !== 'default' && type === 'neutral' ? 'clear' : type;
+  }, [theme, type]);
+
   // Render function that accepts tooltip trigger props and ref
   const renderButton = (
     tooltipTriggerProps?: HTMLAttributes<HTMLElement>,
@@ -267,9 +271,9 @@ export const ItemAction = forwardRef(function ItemAction(
     return (
       <ItemActionElement
         {...mergedProps}
-        variant={`${theme}.${type}` as ItemActionVariant}
+        variant={`${theme}.${finalType}` as ItemActionVariant}
         data-theme={theme}
-        data-type={type}
+        data-type={finalType}
         tabIndex={finalTabIndex}
       >
         {finalIcon && <div data-element="Icon">{finalIcon}</div>}

src/components/actions/ItemActionContext.tsx

@@ -4,6 +4,7 @@ import { CubeItemBaseProps } from '../content/ItemBase';
 
 interface ItemActionContextValue {
   type?: CubeItemBaseProps['type'];
+  theme?: 'default' | 'danger' | 'success' | 'special' | (string & {});
 }
 
 const ItemActionContext = createContext<ItemActionContextValue | undefined>(
@@ -12,11 +13,13 @@ const ItemActionContext = createContext<ItemActionContextValue | undefined>(
 
 export interface ItemActionProviderProps {
   type?: CubeItemBaseProps['type'];
+  theme?: 'default' | 'danger' | 'success' | 'special' | (string & {});
   children: ReactNode;
 }
 
 export function ItemActionProvider({
   type,
+  theme,
   children,
 }: ItemActionProviderProps) {
   return (
@@ -28,6 +31,7 @@ export function ItemActionProvider({
             : type === 'secondary'
               ? 'clear'
               : type,
+        theme,
       }}
     >
       {children}

src/components/actions/ItemButton/ItemButton.tsx

@@ -168,7 +168,7 @@ const ItemButton = forwardRef(function ItemButton(
         }
       >
         {button}
-        <ItemActionProvider type={type}>
+        <ItemActionProvider type={type} theme={theme}>
           {showActionsOnHover ? (
             <DisplayTransition
               exposeUnmounted

src/components/actions/Menu/Menu.stories.tsx

@@ -1991,13 +1991,11 @@ export const ItemsWithActions = (props) => {
             <>
               <ItemAction
                 icon={<EditIcon />}
-                aria-label="Edit"
                 tooltip="Edit"
                 onPress={() => handleItemAction('file1', 'edit')}
               />
               <ItemAction
                 icon={<ClearIcon />}
-                aria-label="Delete"
                 tooltip="Delete"
                 onPress={() => handleItemAction('file1', 'delete')}
               />
@@ -2013,12 +2011,14 @@ export const ItemsWithActions = (props) => {
             <>
               <Menu.Item.Action
                 icon={<EditIcon />}
-                aria-label="Edit"
+                tooltip="Edit"
+                theme="danger"
                 onPress={() => handleItemAction('file2', 'edit')}
               />
               <Menu.Item.Action
                 icon={<ClearIcon />}
-                aria-label="Delete"
+                tooltip="Delete"
+                theme="danger"
                 onPress={() => handleItemAction('file2', 'delete')}
               />
             </>
@@ -2033,12 +2033,14 @@ export const ItemsWithActions = (props) => {
             <>
               <ItemAction
                 icon={<EditIcon />}
-                aria-label="Edit"
+                tooltip="Edit"
+                theme="success"
                 onPress={() => handleItemAction('file3', 'edit')}
               />
               <ItemAction
                 icon={<ClearIcon />}
-                aria-label="Delete"
+                tooltip="Delete"
+                theme="success"
                 onPress={() => handleItemAction('file3', 'delete')}
               />
             </>

src/components/content/ItemBase/ItemBase.tsx

@@ -840,7 +840,9 @@ const ItemBase = <T extends HTMLElement = HTMLDivElement>(
           {actions && (
             <div data-element="Actions" {...ACTIONS_EVENT_HANDLERS}>
               {actions !== true ? (
-                <ItemActionProvider type={type}>{actions}</ItemActionProvider>
+                <ItemActionProvider type={type} theme={theme}>
+                  {actions}
+                </ItemActionProvider>
               ) : null}
             </div>
           )}