feat: adds StyledBaseIcon to various icon components (#1792)

Author: geotrev

package-lock.json

@@ -20,7 +20,7 @@ export const IconButton = forwardRef<HTMLButtonElement, IIconButtonProps>(
 
     return (
       <StyledIconButton ref={ref} {...otherProps} focusInset={otherProps.focusInset || focusInset}>
-        <StyledIcon isRotated={isRotated}>{children}</StyledIcon>
+        <StyledIcon $isRotated={isRotated}>{children}</StyledIcon>
       </StyledIconButton>
     );
   }

packages/buttons/src/elements/IconButton.tsx

@@ -9,7 +9,9 @@ import React from 'react';
 import { IButtonIconProps } from '../../types';
 import { StyledIcon } from '../../styled';
 
-const EndIconComponent = (props: IButtonIconProps) => <StyledIcon position="end" {...props} />;
+const EndIconComponent = ({ isRotated, ...props }: IButtonIconProps) => (
+  <StyledIcon $position="end" $isRotated={isRotated} {...props} />
+);
 
 EndIconComponent.displayName = 'Button.EndIcon';
 

packages/buttons/src/elements/components/EndIcon.tsx

@@ -9,7 +9,9 @@ import React from 'react';
 import { IButtonIconProps } from '../../types';
 import { StyledIcon } from '../../styled';
 
-const StartIconComponent = (props: IButtonIconProps) => <StyledIcon position="start" {...props} />;
+const StartIconComponent = ({ isRotated, ...props }: IButtonIconProps) => (
+  <StyledIcon $position="start" $isRotated={isRotated} {...props} />
+);
 
 StartIconComponent.displayName = 'Button.StartIcon';
 

packages/buttons/src/elements/components/StartIcon.tsx

@@ -33,7 +33,7 @@ describe('StyledIcon', () => {
 
   it('renders rotated styling if provided', () => {
     const { container } = render(
-      <StyledIcon isRotated>
+      <StyledIcon $isRotated>
         <TestIcon />
       </StyledIcon>
     );
@@ -43,7 +43,7 @@ describe('StyledIcon', () => {
 
   it('renders expected RTL styling', () => {
     const { container } = renderRtl(
-      <StyledIcon isRotated>
+      <StyledIcon $isRotated>
         <TestIcon />
       </StyledIcon>
     );

packages/buttons/src/styled/StyledIcon.spec.tsx

@@ -6,22 +6,25 @@
  */
 
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import React, { Children } from 'react';
-import { DEFAULT_THEME, retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import {
+  DEFAULT_THEME,
+  StyledBaseIcon,
+  retrieveComponentStyles
+} from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'buttons.icon';
 
 interface IStyledIconProps {
-  isRotated: boolean;
-  position?: 'start' | 'end';
+  $isRotated: boolean;
+  $position?: 'start' | 'end';
 }
 
 const sizeStyles = (props: IStyledIconProps & ThemeProps<DefaultTheme>) => {
   let marginProperty;
 
-  if (props.position === 'start') {
+  if (props.$position === 'start') {
     marginProperty = `margin-${props.theme.rtl ? 'left' : 'right'}`;
-  } else if (props.position === 'end') {
+  } else if (props.$position === 'end') {
     marginProperty = `margin-${props.theme.rtl ? 'right' : 'left'}`;
   }
 
@@ -33,14 +36,11 @@ const sizeStyles = (props: IStyledIconProps & ThemeProps<DefaultTheme>) => {
   );
 };
 
-/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-export const StyledIcon = styled(({ children, isRotated, theme, ...props }) =>
-  React.cloneElement(Children.only(children), props)
-).attrs({
+export const StyledIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledIconProps>`
-  transform: ${props => props.isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`};
+  transform: ${props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`};
   transition:
     transform 0.25s ease-in-out,
     color 0.25s ease-in-out;

packages/buttons/src/styled/StyledIcon.ts

@@ -274,7 +274,7 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
           <StyledTrigger {...triggerProps}>
             <StyledContainer>
               {startIcon && (
-                <StyledInputIcon isLabelHovered={isLabelHovered} isCompact={isCompact}>
+                <StyledInputIcon $isLabelHovered={isLabelHovered} $isCompact={isCompact}>
                   {startIcon}
                 </StyledInputIcon>
               )}
@@ -322,10 +322,10 @@ export const Combobox = forwardRef<HTMLDivElement, IComboboxProps>(
               </StyledInputGroup>
               {(hasChevron || endIcon) && (
                 <StyledInputIcon
-                  isCompact={isCompact}
-                  isEnd
-                  isLabelHovered={isLabelHovered}
-                  isRotated={hasChevron && isExpanded}
+                  $isCompact={isCompact}
+                  $isEnd
+                  $isLabelHovered={isLabelHovered}
+                  $isRotated={hasChevron && isExpanded}
                 >
                   {hasChevron ? <ChevronIcon /> : endIcon}
                 </StyledInputIcon>

packages/dropdowns/src/elements/combobox/Combobox.tsx

@@ -53,7 +53,7 @@ export const OptGroup = forwardRef<HTMLLIElement, IOptGroupProps>(
           {(content || legend) && (
             <StyledOption as="div" isCompact={isCompact} $type="header">
               {icon && (
-                <StyledOptionTypeIcon isCompact={isCompact} type="header">
+                <StyledOptionTypeIcon $isCompact={isCompact} $type="header">
                   {icon}
                 </StyledOptionTypeIcon>
               )}

packages/dropdowns/src/elements/combobox/OptGroup.tsx

@@ -73,7 +73,7 @@ const OptionComponent = forwardRef<HTMLLIElement, IOptionProps>(
           {...props}
           {...optionProps}
         >
-          <StyledOptionTypeIcon isCompact={isCompact} type={type}>
+          <StyledOptionTypeIcon $isCompact={isCompact} $type={type}>
             {renderActionIcon(type)}
           </StyledOptionTypeIcon>
           {icon && <StyledOptionIcon>{icon}</StyledOptionIcon>}

packages/dropdowns/src/elements/combobox/Option.tsx

@@ -90,7 +90,7 @@ const ItemComponent = forwardRef<HTMLLIElement, IItemProps>(
           {...itemProps}
           ref={mergeRefs([_itemRef, ref])}
         >
-          <StyledItemTypeIcon isCompact={isCompact} type={type}>
+          <StyledItemTypeIcon $isCompact={isCompact} $type={type}>
             {renderActionIcon(type)}
           </StyledItemTypeIcon>
           {icon && <StyledItemIcon>{icon}</StyledItemIcon>}