feat(peer-deps): extend styled-components support to v6 (#1978)

Author: ze-flo

package-lock.json

@@ -57,7 +57,6 @@
     "@types/prop-types": "15.7.13",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
-    "@types/styled-components": "5.1.34",
     "@zendeskgarden/css-bedrock": "10.0.0",
     "@zendeskgarden/eslint-config": "44.0.1",
     "@zendeskgarden/scripts": "2.4.3",
@@ -100,7 +99,7 @@
     "rollup-plugin-delete": "2.1.0",
     "rollup-plugin-typescript2": "0.36.0",
     "storybook": "7.6.20",
-    "styled-components": "5.3.11",
+    "styled-components": "6.1.13",
     "stylelint": "16.10.0",
     "stylelint-order": "6.0.4",
     "temp": "0.9.4",

package.json

@@ -28,7 +28,7 @@
     "@zendeskgarden/react-theming": ">=9.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
     "@zendeskgarden/react-theming": "^9.0.0"

packages/.template/package.json

@@ -30,7 +30,7 @@
     "@zendeskgarden/react-theming": ">=9.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
     "@zendeskgarden/react-theming": "^9.2.0",

packages/accordions/package.json

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
+import styled, { css, ThemeProps, DefaultTheme, DataAttributes } from 'styled-components';
 import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'accordions.rotate_icon';
@@ -38,7 +38,7 @@ const colorStyles = ({
   `;
 };
 
-export const StyledRotateIcon = styled(StyledBaseIcon).attrs({
+export const StyledRotateIcon = styled(StyledBaseIcon).attrs<DataAttributes>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledRotateIcon>`

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

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import styled, { DefaultTheme, ThemeProps, css } from 'styled-components';
+import styled, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components';
 import { math } from 'polished';
 import { retrieveComponentStyles, StyledBaseIcon, getColor } from '@zendeskgarden/react-theming';
 
@@ -36,7 +36,7 @@ const colorStyles = ({ $surfaceColor, theme }: IStyledItemIcon & ThemeProps<Defa
 /**
  * 1. Odd sizing allows the timeline line to center respective of the circle icon.
  */
-export const StyledItemIcon = styled(StyledBaseIcon).attrs({
+export const StyledItemIcon = styled(StyledBaseIcon).attrs<DataAttributes>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledItemIcon>`

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

@@ -28,7 +28,7 @@
     "@zendeskgarden/react-theming": ">=9.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
     "@zendeskgarden/react-dropdowns": "^9.2.0",

packages/avatars/package.json

@@ -44,8 +44,8 @@ describe('StatusIndicator', () => {
   it('renders in RTL mode', () => {
     const { getByRole } = renderRtl(<StatusIndicator type="transfers">Caption</StatusIndicator>);
 
-    expect(getByRole('img')).toHaveStyleRule('transform', 'scale(-1,1)', {
-      modifier: "& > svg[data-icon-status='transfers']"
+    expect(getByRole('img')).toHaveStyleRule('transform', 'scale(-1, 1)', {
+      modifier: "&>svg[data-icon-status='transfers']"
     });
   });
 

packages/avatars/src/elements/StatusIndicator.spec.tsx

@@ -83,14 +83,14 @@ describe('StyledAvatar', () => {
     it('renders foreground color as expected', () => {
       const { container } = render(<StyledAvatar $foregroundColor="red" />);
 
-      expect(container.firstChild).toHaveStyleRule('color', 'red', { modifier: '> svg' });
+      expect(container.firstChild).toHaveStyleRule('color', 'red', { modifier: '&>svg' });
     });
 
     it('renders foreground color variable as expected', () => {
       const { container } = render(<StyledAvatar $foregroundColor="foreground.default" />);
 
       expect(container.firstChild).toHaveStyleRule('color', PALETTE.grey[900], {
-        modifier: '> svg'
+        modifier: '&>svg'
       });
     });
   });
@@ -99,37 +99,37 @@ describe('StyledAvatar', () => {
     it('renders extraextrasmall', () => {
       const { container } = render(<StyledAvatar $size="extraextrasmall" />);
 
-      expect(container.firstChild).toHaveStyleRule('width', '16px !important');
+      expect(container.firstChild).toHaveStyleRule('width', '16px!important');
     });
 
     it('renders extrasmall', () => {
       const { container } = render(<StyledAvatar $size="extrasmall" />);
 
-      expect(container.firstChild).toHaveStyleRule('width', '24px !important');
+      expect(container.firstChild).toHaveStyleRule('width', '24px!important');
     });
 
     it('renders small', () => {
       const { container } = render(<StyledAvatar $size="small" />);
 
-      expect(container.firstChild).toHaveStyleRule('width', '32px !important');
+      expect(container.firstChild).toHaveStyleRule('width', '32px!important');
     });
 
     it('renders medium', () => {
       const { container } = render(<StyledAvatar $size="medium" />);
 
-      expect(container.firstChild).toHaveStyleRule('width', '40px !important');
+      expect(container.firstChild).toHaveStyleRule('width', '40px!important');
     });
 
     it('renders large', () => {
       const { container } = render(<StyledAvatar $size="large" />);
 
-      expect(container.firstChild).toHaveStyleRule('width', '48px !important');
+      expect(container.firstChild).toHaveStyleRule('width', '48px!important');
     });
   });
 
   describe('badge', () => {
     const styleRuleOptions = {
-      modifier: `& > ${StyledStatusIndicator}`
+      modifier: `&>${StyledStatusIndicator}`
     };
 
     it('renders the status indicator correctly', () => {

packages/avatars/src/styled/StyledAvatar.spec.tsx

@@ -29,7 +29,7 @@
     "@zendeskgarden/react-theming": ">=9.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
     "@zendeskgarden/react-theming": "^9.2.0",

packages/breadcrumbs/package.json

@@ -6,6 +6,7 @@
  */
 
 import React, { Children, cloneElement, forwardRef, HTMLAttributes } from 'react';
+import ChevronRightStrokeIcon from '@zendeskgarden/svg-icons/src/12/chevron-right-stroke.svg';
 import { useBreadcrumb } from '@zendeskgarden/container-breadcrumb';
 import { useText } from '@zendeskgarden/react-theming';
 import {
@@ -38,7 +39,9 @@ export const Breadcrumb = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>((
       <>
         <StyledBreadcrumbItem>{child}</StyledBreadcrumbItem>
         <StyledCenteredBreadcrumbItem>
-          <StyledChevronIcon />
+          <StyledChevronIcon>
+            <ChevronRightStrokeIcon />
+          </StyledChevronIcon>
         </StyledCenteredBreadcrumbItem>
       </>
     );

packages/breadcrumbs/src/elements/Breadcrumb.tsx

@@ -5,22 +5,11 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React from 'react';
 import styled from 'styled-components';
 import { em } from 'polished';
-import { getColor } from '@zendeskgarden/react-theming';
-import ChevronRightStrokeIcon from '@zendeskgarden/svg-icons/src/12/chevron-right-stroke.svg';
+import { getColor, StyledBaseIcon } from '@zendeskgarden/react-theming';
 
-/**
- * Accepts all `<svg>` props
- */
-/* eslint-disable-next-line @typescript-eslint/no-unused-vars */
-export const StyledChevronIcon = styled(({ children, theme, ...props }) => (
-  <ChevronRightStrokeIcon {...props} />
-)).attrs({
-  role: 'presentation',
-  'aria-hidden': 'true'
-})`
+export const StyledChevronIcon = styled(StyledBaseIcon)`
   transform: ${p => p.theme.rtl && `rotate(180deg);`};
   margin: 0 ${p => em(p.theme.space.base, p.theme.fontSizes.md)};
   color: ${p => getColor({ variable: 'foreground.subtle', theme: p.theme })};

packages/breadcrumbs/src/styled/StyledChevronIcon.tsx

@@ -30,7 +30,7 @@
     "@zendeskgarden/react-theming": ">=9.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
     "@zendeskgarden/react-theming": "^9.2.0",

packages/buttons/package.json

@@ -5,13 +5,13 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import styled, { css, ThemeProps, DefaultTheme } from 'styled-components';
+import styled, { css, ThemeProps, DefaultTheme, DataAttributes } from 'styled-components';
 import { StyledBaseIcon, retrieveComponentStyles } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'buttons.icon';
 
 interface IStyledIconProps {
-  $isRotated: boolean;
+  $isRotated?: boolean;
   $position?: 'start' | 'end';
 }
 
@@ -32,7 +32,7 @@ const sizeStyles = (props: IStyledIconProps & ThemeProps<DefaultTheme>) => {
   );
 };
 
-export const StyledIcon = styled(StyledBaseIcon).attrs({
+export const StyledIcon = styled(StyledBaseIcon).attrs<DataAttributes>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })<IStyledIconProps>`

packages/buttons/src/styled/StyledIcon.ts

@@ -32,7 +32,7 @@
     "@zendeskgarden/react-theming": ">=9.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
     "@zendeskgarden/react-theming": "^9.2.0",

packages/chrome/package.json

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React from 'react';
+import React, { HTMLAttributes, RefObject } from 'react';
 import PropTypes from 'prop-types';
 import { IHeaderItemProps, PRODUCTS } from '../../types';
 import { StyledHeaderItem, StyledLogoHeaderItem } from '../../styled';
@@ -20,12 +20,12 @@ export const HeaderItem = React.forwardRef<HTMLButtonElement, IHeaderItemProps>(
     if (hasLogo) {
       return (
         <StyledLogoHeaderItem
-          ref={ref}
+          ref={ref as RefObject<HTMLDivElement>}
           $isRound={isRound}
           $maxX={maxX}
           $maxY={maxY}
           $product={product}
-          {...other}
+          {...(other as HTMLAttributes<HTMLDivElement>)}
         />
       );
     }

packages/chrome/src/elements/header/HeaderItem.tsx

@@ -6,7 +6,7 @@
  */
 
 import React, { useMemo } from 'react';
-import { ThemeProvider } from 'styled-components';
+import { ThemeProvider } from '@zendeskgarden/react-theming';
 import PropTypes from 'prop-types';
 import { INavProps } from '../../types';
 import { useChromeContext } from '../../utils/useChromeContext';

packages/chrome/src/elements/nav/Nav.tsx

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import styled, { DefaultTheme, ThemeProps, css } from 'styled-components';
+import styled, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components';
 import { retrieveComponentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.header_item_icon';
@@ -22,7 +22,7 @@ const sizeStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
   `;
 };
 
-export const StyledHeaderItemIcon = styled(StyledBaseIcon).attrs({
+export const StyledHeaderItemIcon = styled(StyledBaseIcon).attrs<DataAttributes>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`

packages/chrome/src/styled/header/StyledHeaderItemIcon.ts

@@ -5,7 +5,7 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import styled, { DefaultTheme, ThemeProps, css } from 'styled-components';
+import styled, { DataAttributes, DefaultTheme, ThemeProps, css } from 'styled-components';
 import { retrieveComponentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming';
 
 const COMPONENT_ID = 'chrome.nav_item_icon';
@@ -19,7 +19,7 @@ const sizeStyles = ({ theme }: ThemeProps<DefaultTheme>) => {
   `;
 };
 
-export const StyledNavItemIcon = styled(StyledBaseIcon).attrs({
+export const StyledNavItemIcon = styled(StyledBaseIcon).attrs<DataAttributes>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`

packages/chrome/src/styled/nav/StyledNavItemIcon.ts

@@ -37,7 +37,7 @@
     "@zendeskgarden/react-theming": ">=9.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
     "@types/lodash.isequal": "4.5.8",

packages/colorpickers/package.json

@@ -14,6 +14,7 @@ import React, {
   useRef,
   useState
 } from 'react';
+import CheckIcon from '@zendeskgarden/svg-icons/src/12/check-sm-fill.svg';
 import PropTypes from 'prop-types';
 import { mergeRefs } from 'react-merge-refs';
 import { ThemeContext } from 'styled-components';
@@ -150,7 +151,9 @@ export const ColorSwatch = forwardRef<HTMLTableElement, IColorSwatchProps>(
                           {...(gridCellProps as InputHTMLAttributes<HTMLInputElement>)}
                         />
                       </Tooltip>
-                      <StyledIcon />
+                      <StyledIcon>
+                        <CheckIcon />
+                      </StyledIcon>
                     </StyledColorSwatchLabel>
                   </StyledCell>
                 );

packages/colorpickers/src/elements/ColorSwatch/index.tsx

@@ -44,7 +44,7 @@ export const StyledColorSwatchLabel = styled(StyledButtonPreview).attrs({
   as: 'label',
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
-})`
+})<IStyledColorSwatchLabelProps>`
   position: relative;
   top: 0;
   border-radius: ${props => props.theme.borderRadii.md};

packages/colorpickers/src/styled/ColorSwatch/StyledColorSwatchLabel.ts

@@ -5,14 +5,13 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import styled from 'styled-components';
-import CheckIcon from '@zendeskgarden/svg-icons/src/12/check-sm-fill.svg';
-import { retrieveComponentStyles } from '@zendeskgarden/react-theming';
+import styled, { DataAttributes } from 'styled-components';
+import { retrieveComponentStyles, StyledBaseIcon } from '@zendeskgarden/react-theming';
 import { StyledColorSwatchInput } from './StyledColorSwatchInput';
 
 const COMPONENT_ID = 'colorpickers.colorswatch_check';
 
-export const StyledIcon = styled(CheckIcon as 'svg').attrs({
+export const StyledIcon = styled(StyledBaseIcon).attrs<DataAttributes>({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION
 })`

packages/colorpickers/src/styled/ColorSwatch/StyledIcon.ts

@@ -31,7 +31,7 @@
     "@zendeskgarden/react-theming": ">=9.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
     "@zendeskgarden/react-theming": "^9.2.0",

packages/datepickers/package.json

@@ -24,7 +24,7 @@ interface IStyledMenuWrapperProps {
 export const StyledMenuWrapper = styled.div.attrs<IStyledMenuWrapperProps>(props => ({
   'data-garden-id': COMPONENT_ID,
   'data-garden-version': PACKAGE_VERSION,
-  className: props.$isAnimated && 'is-animated'
+  className: props.$isAnimated ? 'is-animated' : undefined
 }))<IStyledMenuWrapperProps>`
   top: 0; /* [1] */
   left: 0; /* [1] */

packages/datepickers/src/styled/StyledMenuWrapper.ts

@@ -28,7 +28,7 @@
     "@zendeskgarden/react-theming": ">=9.0.0",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "styled-components": "^5.3.1"
+    "styled-components": "^5.3.1 || ^6.0.0"
   },
   "devDependencies": {
     "@dnd-kit/core": "6.1.0",