💄 Adjust disabled styling for action button icon

Previously, the entire action button would have its opacity reduced when in a disabled state. This change refactors the styling to apply disabled opacity specifically to the icon slot within the action button.

This provides more granular control over the visual appearance of disabled action buttons, allowing the button's text and background to maintain full opacity while only the icon fades. A transition has also been added for a smoother visual effect when the icon's disabled state changes.

Author: Jannik Weise

packages/core/src/components/multi-action-button/action-button/ActionButton.styles.ts

@@ -163,7 +163,6 @@ export const StyledActionButton = styled.button<StyledActionButtonProps>`
         $isInteractionDisabled &&
         css`
             cursor: default;
-            opacity: 0.5;
         `}
 
     /* Optional pulse overlay used by status. */
@@ -185,7 +184,6 @@ export const StyledActionButton = styled.button<StyledActionButtonProps>`
 
     &:disabled {
         cursor: default;
-        opacity: 0.5;
     }
 
     ${({ $isInteractionDisabled, $backgroundColor, theme }) =>
@@ -207,12 +205,14 @@ export const StyledActionContent = styled.span`
     z-index: 1;
 `;
 
-export const StyledIconSlot = styled.span<{ $height: number }>`
+export const StyledIconSlot = styled.span<{ $height: number; $isDisabled?: boolean }>`
     align-items: center;
     display: inline-flex;
     flex: 0 0 auto;
     height: ${({ $height }) => $height}px;
     justify-content: center;
+    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};
+    transition: opacity 0.2s ease;
     width: ${({ $height }) => $height}px;
 `;
 

packages/core/src/components/multi-action-button/action-button/ActionButton.tsx

@@ -64,7 +64,7 @@ const ActionButton: FC<ActionButtonProps> = ({
 
     const actionContent = (
         <StyledActionContent>
-            <StyledIconSlot $height={height}>
+            <StyledIconSlot $height={height} $isDisabled={isActionDisabled}>
                 {typeof action.icon === 'string' ? (
                     <Icon icons={[action.icon]} color={actionColor} size={iconSize} />
                 ) : (