Add support for styled-components v6 #986

xuesichao · 2025-02-21T20:56:54Z

Issue #:

Description of changes:

Migrate styled-components from v5 to v6 in SDK
Add support for styled-components v6 in peerDependencies

Testing

Have you successfully run npm run build:release locally?
Yes
How did you test these changes?
npm run build:release passes.
I verified the following scenarios when installing styled-components v5 and v6 in the local React Component SDK:

Confirmed that the local Storybook appearance matches the production version, with no styled-components-related errors
Successfully tested the local meeting demo's end-to-end flow and UI after installing the React Component SDK tarball

When installing v6 in demo, both demo and SDK uses v6

❯ npm list styled-components
[email protected] /Users/sichax/Projects/amazon-chime-sdk/apps/meeting
├─┬ [email protected]
│ └── [email protected] deduped
└── [email protected]

When installing v5 in demo, both demo and SDK uses v5

❯ npm list styled-components     
[email protected] /Users/sichax/Projects/amazon-chime-sdk/apps/meeting
├─┬ [email protected]
│ └── [email protected] deduped
└─┬ [email protected]
  └─┬ [email protected]
    └── [email protected] deduped

If you made changes to the component library, have you provided corresponding documentation changes?
Yes

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

xuesichao · 2025-02-21T21:00:52Z

package.json

    "fast-memoize": "^2.5.2",
    "lodash.isequal": "^4.5.0",
    "react-popper": "^2.3.0",
+    "stylis": "^4.3.6",


This is a peer dependency used by styled-components v6, a CSS preprocessor

xuesichao · 2025-02-21T21:03:09Z

src/components/sdk/PreviewVideo/index.tsx

 import { BaseSdkProps } from '../Base';

-const StyledPreview = styled(VideoTile)`
+const StyledPreview = styled(VideoTile).withConfig(styledComponentsConfig)`


This is to handle a breaking change, in v5 the custom props such as isEnabledForScreenSharing is not forwarded to DOM element because it's not a native HTML attribute. So these non-native props are filtered. In v6 this filter is no longer provided by default, we follow the below guide to preserver the v5 behavior.

https://styled-components.com/docs/faqs#shouldforwardprop-is-no-longer-provided-by-default

xuesichao · 2025-02-21T21:03:59Z

src/components/ui/Chat/MessageAttachment/Styled.tsx

+    & a:visited,
+    & a:hover,
+    & a:active {


This is to handle https://styled-components.com/docs/faqs#nested-syntax-handling

xuesichao · 2025-02-21T21:04:28Z

src/components/ui/ControlBar/Styled.tsx

+      ${isVertical(props.layout) ? layoutMap['left'] : layoutMap['bottom']};
+      box-shadow: ${props.theme.controlBar.shadow};
      border: none;
-      height: ${(props: StyledControlBarProps) =>
-        isVertical(props.layout) && '100%'};
-      width: ${(props: StyledControlBarProps) =>
-        !isVertical(props.layout) && '100%'};
+      height: ${isVertical(props.layout) && '100%'};
+      width: ${!isVertical(props.layout) && '100%'};
    }

    ${({ theme }) => theme.mediaQueries.max.xs} {
-      justify-content: ${(props: StyledControlBarProps) =>
-        isVertical(props.layout) ? 'center' : 'space-around'};
+      justify-content: ${isVertical(props.layout) ? 'center' : 'space-around'};
      ${unsetPosition}
-      ${(props: StyledControlBarProps) =>
-        isVertical(props.layout) ? layoutMap['left'] : layoutMap['bottom']};
+      ${isVertical(props.layout) ? layoutMap['left'] : layoutMap['bottom']};


This is to handle breaking TypeScript change, it becomes more strict.

xuesichao · 2025-02-21T21:05:14Z

src/components/ui/Heading/Heading.mdx

  <GlobalStyles />
  <Canvas>
-    <Heading style={{ color: 'blue' }} level={3} tag="p">
+    <Heading style={{ color: 'blue' }} level={3} tag="span">


This is to handle a non-breaking error in storybook that a <p> can not be nested within another <p>

xuesichao · 2025-02-21T21:05:49Z

src/components/ui/Notification/Styled.tsx

      theme.colors[severity].primary};
    color: ${({ theme, severity }) =>
-      theme.notification[severity].closeButton.text}};
+      theme.notification[severity].closeButton.text};


Removed the extra }

xuesichao · 2025-02-21T21:06:43Z

src/components/ui/VideoTile/Styled.tsx

    width: 100%;
    height: 100%;
-    object-fit: ${(props) => props.objectFit || 'cover'}};
+    object-fit: ${(props) => props.objectFit || 'cover'};


Removed the extra }

xuesichao · 2025-02-21T21:10:30Z

src/components/ui/WithTooltip/WithTooltip.mdx

@@ -1,4 +1,5 @@
 import { WithTooltip } from '.'
+import { Meta } from '@storybook/blocks';


This page is broken now, this change fix it:
https://aws.github.io/amazon-chime-sdk-component-library-react/?path=/docs/ui-components-withtooltip--page

xuesichao · 2025-02-21T21:54:33Z

package.json

-    "styled-components": "^5.3.9",
+    "styled-components": "^6.1.15",
    "styled-system": "^5.1.5",
+    "stylis": "^4.3.6",


This is a CSS preprocessor, styled-components v6 requires this package

CHANGELOG.md

xuesichao · 2025-02-26T19:02:07Z

src/utils/style.ts

+    // Forward custom props
+    if (additionalProps.includes(prop)) return true;
+
+    return isPropValid(prop);


For nested styled components, we add withConfig only to the bottom most one for the filtering. This way it won't block any react props being passing through a styled components.

For example:

const StyledVideoTile = styled.div.withConfig()`...`; // React component const VideoTile = (props) => { return props.isActive? <StyledVideoTile/> : null } // Styled react component const ContentTile = styled(VideoTile)`...`; // Do not use withConfig, because StyledVideoTile already have it, this way isActive will not be filtered. <StyledContentTile isActive={true} />

integration/app/test-demo/package-lock.json

package.json

ziyiz-amzn · 2025-02-26T20:14:17Z

src/utils/style.ts

+ * @returns Configuration object with shouldForwardProp function
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export const createStyledConfig = (additionalProps: string[] = []) => ({


no need to export this func?

export is needed. The idea is that other components can use this function to forward custom props via additionalProps if needed. It's not being use at this moment.

xuesichao requested a review from a team as a code owner February 21, 2025 20:56

xuesichao force-pushed the styled-component-v6 branch 2 times, most recently from ebcb247 to 9fba533 Compare February 21, 2025 21:09

xuesichao commented Feb 21, 2025

View reviewed changes

xuesichao force-pushed the styled-component-v6 branch from 9fba533 to 5af0fdf Compare February 21, 2025 21:53

xuesichao commented Feb 21, 2025

View reviewed changes

xuesichao force-pushed the styled-component-v6 branch 2 times, most recently from bc2a79a to cf6daad Compare February 24, 2025 18:39

ziyiz-amzn reviewed Feb 24, 2025

View reviewed changes

CHANGELOG.md Show resolved Hide resolved

ziyiz-amzn previously approved these changes Feb 24, 2025

View reviewed changes

xuesichao dismissed ziyiz-amzn’s stale review via 4177aa4 February 24, 2025 22:05

xuesichao force-pushed the styled-component-v6 branch from cf6daad to 4177aa4 Compare February 24, 2025 22:05

xuesichao added 2 commits February 24, 2025 16:56

Add support of styled-components v6

d3aaa76

Bump styled-components to v6

5417b69

xuesichao force-pushed the styled-component-v6 branch from 4177aa4 to e606e05 Compare February 25, 2025 20:24

Improve ui components migration

89e1639

xuesichao force-pushed the styled-component-v6 branch from e606e05 to a071c13 Compare February 26, 2025 17:47

xuesichao commented Feb 26, 2025

View reviewed changes

xuesichao requested review from michhyun1 and ziyiz-amzn February 26, 2025 19:19

ziyiz-amzn reviewed Feb 26, 2025

View reviewed changes

integration/app/test-demo/package-lock.json Outdated Show resolved Hide resolved

Upgrade styled-components to v6 in test demo

a07feae

xuesichao force-pushed the styled-component-v6 branch from a071c13 to a07feae Compare February 26, 2025 20:08

michhyun1 reviewed Feb 26, 2025

View reviewed changes

package.json Show resolved Hide resolved

xuesichao requested review from michhyun1 and ziyiz-amzn February 26, 2025 20:13

ziyiz-amzn reviewed Feb 26, 2025

View reviewed changes

ziyiz-amzn approved these changes Feb 26, 2025

View reviewed changes

michhyun1 approved these changes Feb 26, 2025

View reviewed changes

xuesichao merged commit 9246a0d into main Feb 26, 2025
1 of 2 checks passed

xuesichao deleted the styled-component-v6 branch February 26, 2025 21:16

		@@ -1,4 +1,5 @@
		import { WithTooltip } from '.'
		import { Meta } from '@storybook/blocks';

Add support for styled-components v6 #986

Add support for styled-components v6 #986

Uh oh!

Conversation

xuesichao commented Feb 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

xuesichao commented Feb 21, 2025 •

edited

Loading