feat: adds styled icon base component (#1791)

Author: geotrev

packages/accordions/src/elements/accordion/components/Header.tsx

@@ -64,10 +64,10 @@ const HeaderComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement
       >
         {children}
         <StyledRotateIcon
-          isCompact={isCompact}
-          isHovered={isHovered}
-          isRotated={isExpanded}
-          isCollapsible={isCollapsible}
+          $isCompact={isCompact}
+          $isHovered={isHovered}
+          $isRotated={isExpanded}
+          $isCollapsible={isCollapsible}
           onMouseOver={composeEventHandlers(onMouseOver, () => setIsHovered(true))}
           onMouseOut={composeEventHandlers(onMouseOut, () => setIsHovered(false))}
         >

packages/accordions/src/elements/timeline/components/Content.tsx

@@ -17,7 +17,7 @@ const ContentComponent = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElemen
     return (
       <>
         <StyledSeparator>
-          <StyledItemIcon surfaceColor={surfaceColor}>{icon || <CircleIcon />}</StyledItemIcon>
+          <StyledItemIcon $surfaceColor={surfaceColor}>{icon || <CircleIcon />}</StyledItemIcon>
         </StyledSeparator>
         <StyledTimelineContent ref={ref} {...props} />
       </>

packages/accordions/src/styled/accordion/StyledRotateIcon.spec.tsx

@@ -26,39 +26,39 @@ describe('StyledRotateIcon', () => {
     );
   });
 
-  it('renders isRotated styling correctly', () => {
+  it('renders $isRotated styling correctly', () => {
     const { container } = render(
-      <StyledRotateIcon isRotated>
+      <StyledRotateIcon $isRotated>
         <svg />
       </StyledRotateIcon>
     );
 
     expect(container.firstChild).toHaveStyleRule('transform', 'rotate(+180deg)');
   });
 
-  it('renders isCompact styling correctly', () => {
+  it('renders $isCompact styling correctly', () => {
     const { container } = render(
-      <StyledRotateIcon isCompact>
+      <StyledRotateIcon $isCompact>
         <svg />
       </StyledRotateIcon>
     );
 
     expect(container.firstChild).toHaveStyleRule('padding', '6px 12px');
   });
 
-  it('renders isRotated styling correctly for RTL', () => {
+  it('renders $isRotated styling correctly for RTL', () => {
     const { container } = renderRtl(
-      <StyledRotateIcon isRotated>
+      <StyledRotateIcon $isRotated>
         <svg />
       </StyledRotateIcon>
     );
 
     expect(container.firstChild).toHaveStyleRule('transform', 'rotate(-180deg)');
   });
 
-  it('renders isHovered styling correctly', () => {
+  it('renders $isHovered styling correctly', () => {
     const { container } = render(
-      <StyledRotateIcon isHovered>
+      <StyledRotateIcon $isHovered>
         <svg />
       </StyledRotateIcon>
     );

packages/accordions/src/styled/accordion/StyledRotateIcon.ts

@@ -5,21 +5,28 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import { cloneElement, Children } from 'react';
 import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import {
+  getColorV8,
+  retrieveComponentStyles,
+  DEFAULT_THEME,
+  StyledBaseIcon
+} from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.rotate_icon';
 
 interface IStyledRotateIcon {
-  isCompact?: boolean;
+  $isCompact?: boolean;
+  $isRotated?: boolean;
+  $isHovered?: boolean;
+  $isCollapsible?: boolean;
 }
 
 const colorStyles = (props: ThemeProps<DefaultTheme> & any) => {
-  const showColor = props.isCollapsible || !props.isRotated;
+  const showColor = props.$isCollapsible || !props.$isRotated;
   let color = getColorV8('neutralHue', 600, props.theme);
 
-  if (showColor && props.isHovered) {
+  if (showColor && props.$isHovered) {
     color = getColorV8('primaryHue', 600, props.theme);
   }
 
@@ -32,21 +39,17 @@ const colorStyles = (props: ThemeProps<DefaultTheme> & any) => {
   `;
 };
 
-export const StyledRotateIcon = styled(
-  /* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-  ({ children, isRotated, isHovered, isCompact, isCollapsible, ...props }) =>
-    cloneElement(Children.only(children), props)
-).attrs({
+export const StyledRotateIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledRotateIcon>`
-  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.1s ease-in-out;
   box-sizing: content-box;
   padding: ${props =>
-    props.isCompact
+    props.$isCompact
       ? `${props.theme.space.base * 1.5}px ${props.theme.space.base * 3}px`
       : `${props.theme.space.base * 5}px`};
   width: ${props => props.theme.iconSizes.md};

packages/accordions/src/styled/timeline/StyledItemIcon.ts

@@ -5,31 +5,32 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import { cloneElement, Children } from 'react';
 import styled from 'styled-components';
 import { math } from 'polished';
-import { getColorV8, retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import {
+  getColorV8,
+  retrieveComponentStyles,
+  DEFAULT_THEME,
+  StyledBaseIcon
+} from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'timeline.icon';
 
 interface IStyledItemIcon {
-  surfaceColor?: string;
+  $surfaceColor?: string;
 }
 
 /**
  * 1. Odd sizing allows the timeline line to center respective of the circle icon.
  */
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const StyledItemIcon = styled(({ surfaceColor, children, ...props }) =>
-  cloneElement(Children.only(children), props)
-).attrs({
+export const StyledItemIcon = styled(StyledBaseIcon).attrs({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledItemIcon>`
   z-index: 1;
   box-sizing: content-box;
   background-color: ${props =>
-    props.surfaceColor || getColorV8('background', 600 /* default shade */, props.theme)};
+    props.$surfaceColor || getColorV8('background', 600 /* default shade */, props.theme)};
   padding: ${props => props.theme.space.base}px 0;
   width: ${props => math(`${props.theme.iconSizes.sm} + 1`)}; /* [1] */
   height: ${props => math(`${props.theme.iconSizes.sm} + 1`)}; /* [1] */

packages/theming/src/index.ts

@@ -24,6 +24,7 @@ export { useWindow } from './utils/useWindow';
 export { useText } from './utils/useText';
 export { default as menuStyles } from './utils/menuStyles';
 export { focusStyles, SELECTOR_FOCUS_VISIBLE } from './utils/focusStyles';
+export { StyledBaseIcon } from './utils/StyledBaseIcon';
 
 export {
   ARROW_POSITION,

packages/theming/src/utils/StyledBaseIcon.ts

@@ -0,0 +1,16 @@
+/**
+ * Copyright Zendesk, Inc.
+ *
+ * Use of this source code is governed under the Apache License, Version 2.0
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
+ */
+
+import styled from 'styled-components';
+import React, { Children } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars,garden-local/require-default-theme
+export const StyledBaseIcon = styled(({ children, theme, ...props }) =>
+  React.cloneElement(Children.only(children), props)
+)`
+  /* stylelint-disable no-empty-block */
+`;