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

ze-flo · 2024-11-15T23:15:03Z

Description

This PR paves the way to making Garden compatible with [email protected].

Detail

Fix broken specs due to whitespace mismatches
Convert props to transient props when necessary
Fix stories to prevent invalid DOM attributes
Fix TS type errors

Checklist

👌 design updates will be Garden Designer approved (add the designer as a reviewer)
🌐 demo is up-to-date (npm start)
~~⬅️ renders as expected with reversed (RTL) direction~~
~~⚫ renders as expected in dark mode~~
~~🤘 renders as expected with Bedrock CSS (?bedrock)~~
💂‍♂️ includes new unit tests. Maintain existing coverage (always >= 96%)
~~♿ tested for WCAG 2.1 AA accessibility compliance~~
~~📝 tested in Chrome, Firefox, Safari, and Edge~~

… ze-flo/styled-components-v6

coveralls · 2024-11-15T23:24:30Z

coverage: 95.649% (-0.008%) from 95.657%
when pulling 07ecb06 on ze-flo/styled-components-v6
into f345fa1 on main.

jzempel · 2024-11-20T18:10:33Z

package.json

    "stylelint": "16.10.0",
    "stylelint-order": "6.0.4",
+    "stylis": "4.3.4",


I'm not seeing this added dependency used anywhere.

The migration docs are misleading. 🤔 stylis is a dependency of styled-component. Therefore, this can be removed. Good catch. 💯

packages/breadcrumbs/src/styled/StyledChevronIcon.tsx

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

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

jzempel · 2024-11-20T18:18:06Z

utils/build/styled.d.ts

+
+  export const ThemeContext: React.Context<DefaultTheme>;
+  export interface ThemeProviderProps<T extends object, U extends object = T> {
+    children?: React.ReactNode | undefined;


Suggested change

children?: React.ReactNode | undefined;

children?: ReactNode | undefined;

...with import { ReactNode } from 'react';

jzempel · 2024-11-20T18:54:34Z

packages/loaders/src/styled/StyledSkeleton.ts

+${props.theme.rtl ? '-45deg' : '45deg'},
+transparent,
+${getBackgroundColor},
+transparent
+);


Please restore indentation, if possible.

I've restored the indentation but extra whitespaces have to be accounted for when using toHaveStyleRule with styled-components@v6. Is that acceptable?

packages/notifications/src/elements/global-alert/GlobalAlert.tsx

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

packages/theming/src/utils/StyledBaseIcon.ts

… ze-flo/styled-components-v6

ze-flo · 2024-12-02T23:00:54Z

packages/breadcrumbs/src/elements/Breadcrumb.tsx

@@ -38,7 +39,9 @@ export const Breadcrumb = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>((
      <>
        <StyledBreadcrumbItem>{child}</StyledBreadcrumbItem>
        <StyledCenteredBreadcrumbItem>
-          <StyledChevronIcon />
+          <StyledChevronIcon>
+            <ChevronRightStrokeIcon />


Our SVGO config adds aria-hidden="true" to svgs.

packages/tags/src/elements/Avatar.tsx

ze-flo · 2024-12-02T23:16:44Z

packages/loaders/src/styled/StyledSkeleton.ts

+${props.theme.rtl ? '-45deg' : '45deg'},
+transparent,
+${getBackgroundColor},
+transparent
+);


I've restored the indentation but extra whitespaces have to be accounted for when using toHaveStyleRule with styled-components@v6. Is that acceptable?

packages/tags/src/elements/Avatar.tsx

jzempel · 2024-12-03T21:11:58Z

packages/theming/src/index.ts

@@ -24,7 +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 { StyledBaseIcon, type IStyledBaseIconProps } from './utils/StyledBaseIcon';


I'm ok with exporting this, but:

I wouldn't expect us to reuse within other packages; in other words, it's for consumers-only

it should be moved to the type export section below

packages/theming/src/utils/StyledBaseIcon.ts

jzempel

fantastic work here 🎉

ze-flo · 2024-12-05T18:51:20Z

The work done in #1985 helped me identify props rendered as invalid attributes. 😌

refactor(modal header): use transient props
c4b0b11

fix: prevent invalid DOM attributes
1370c7c

fix(splitter): prevent invalid DOM attrs
c64c2e0

In stories, HTML elements receiving theme colors render invalid color.light and color.dark attributes.

This will be resolved in a future PR.

jzempel

Does the theming package need its styled-components range expanded?

ze-flo · 2024-12-05T20:48:14Z

Does the theming package need its styled-components range expanded?

Good call out. Fixed. ✅

ze-flo added 5 commits November 12, 2024 11:07

deps: upgrade to styled-component v6

b579307

test: fix specs

60b14bf

chore: fix type errors

7d57f43

Merge branch 'main' of github.com:zendeskgarden/react-components into…

6806ba3

… ze-flo/styled-components-v6

test: fix specs

c3eb8e3

ze-flo added the PR: Internal 🌱 label Nov 15, 2024

ze-flo requested a review from a team as a code owner November 15, 2024 23:15

github-actions bot deployed to staging November 15, 2024 23:21 View deployment

jzempel requested changes Nov 20, 2024

View reviewed changes

ze-flo added 2 commits December 2, 2024 12:42

refactor: PR feedback

eeee419

Merge branch 'main' of github.com:zendeskgarden/react-components into…

6b59c31

… ze-flo/styled-components-v6

github-actions bot deployed to staging December 2, 2024 23:03 View deployment

chore: fix type error

10dc96a

github-actions bot deployed to staging December 2, 2024 23:15 View deployment

ze-flo commented Dec 2, 2024

View reviewed changes

jzempel requested changes Dec 3, 2024

View reviewed changes

refactor: PR feedback

c9bc4bd

github-actions bot deployed to staging December 4, 2024 00:05 View deployment

jzempel approved these changes Dec 4, 2024

View reviewed changes

ze-flo added 3 commits December 4, 2024 19:23

refactor(modal header): use transient props

c4b0b11

fix: prevent invalid DOM attributes

1370c7c

fix(splitter): prevent invalid DOM attrs

c64c2e0

github-actions bot deployed to staging December 5, 2024 18:07 View deployment

ze-flo mentioned this pull request Dec 5, 2024

refactor: [email protected] migration + stories specs [ DO NOT MERGE ] #1985

Closed

deps: add [email protected] as peerDependency option

7217b0b

ze-flo changed the title ~~chore: upgrade to [email protected]~~ feat(peer-deps): extend styled-components support to v6 Dec 5, 2024

ze-flo added PR: New Feature 🚀 and removed PR: Internal 🌱 labels Dec 5, 2024

github-actions bot deployed to staging December 5, 2024 20:14 View deployment

jzempel reviewed Dec 5, 2024

View reviewed changes

deps(theming): add [email protected] as peerDependency option

07ecb06

ze-flo force-pushed the ze-flo/styled-components-v6 branch from 902f12f to 07ecb06 Compare December 5, 2024 20:49

jzempel approved these changes Dec 5, 2024

View reviewed changes

github-actions bot deployed to staging December 5, 2024 20:52 View deployment

github-actions bot deployed to staging December 5, 2024 20:56 View deployment

ze-flo merged commit bc5c1d4 into main Dec 5, 2024
8 checks passed

ze-flo deleted the ze-flo/styled-components-v6 branch December 5, 2024 21:01

ze-flo mentioned this pull request Dec 6, 2024

feat(theming): add componentStyles utility #1986

Merged

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

ze-flo commented Nov 15, 2024 •

edited

Loading

coveralls commented Nov 15, 2024 •

edited

Loading

jzempel Nov 20, 2024

ze-flo Dec 2, 2024

jzempel Nov 20, 2024

jzempel Nov 20, 2024

ze-flo Dec 2, 2024

ze-flo Dec 2, 2024

ze-flo Dec 2, 2024

jzempel Dec 3, 2024

jzempel left a comment

ze-flo commented Dec 5, 2024 •

edited

Loading

jzempel left a comment

ze-flo commented Dec 5, 2024

	children?: React.ReactNode \| undefined;
	children?: ReactNode \| undefined;

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

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

Conversation

ze-flo commented Nov 15, 2024 • edited Loading

Description

Detail

Checklist

coveralls commented Nov 15, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jzempel left a comment

Choose a reason for hiding this comment

ze-flo commented Dec 5, 2024 • edited Loading

jzempel left a comment

Choose a reason for hiding this comment

ze-flo commented Dec 5, 2024

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

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

ze-flo commented Nov 15, 2024 •

edited

Loading

coveralls commented Nov 15, 2024 •

edited

Loading

ze-flo commented Dec 5, 2024 •

edited

Loading