Update `AvatarStack` component to use CSS modules behind the feature flag primer_react_css_modules_team #5012

jonrohan · 2024-09-24T00:06:31Z

Closes https://github.com/github/primer/issues/4024

Changelog

Changed

Update AvatarStack component to use CSS modules behind the feature flag primer_react_css_modules_team

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

…am feature flag

changeset-bot · 2024-09-24T00:06:35Z

🦋 Changeset detected

Latest commit: c34264f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-09-24T00:09:33Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	98.26 KB (+0.28% 🔺)
packages/react/dist/browser.umd.js	98.57 KB (+0.22% 🔺)

jonrohan · 2024-09-24T17:03:59Z

packages/react/src/internal/utils/toggleStyledComponent.tsx

+      if (sxProp !== defaultSxProp) {
+        return <Box as={BaseComponent} {...rest} sx={sxProp} ref={ref} />
+      }


@joshblack wanted to make this one change I noticed here, the wrapper function wasn't processing sx props when the flag was turned on and a prop was passed in.

@jonrohan LGTM!

joshblack

LGTM! Just had a couple of questions for the e2e tests

joshblack · 2024-09-24T19:15:04Z

packages/react/src/internal/utils/toggleStyledComponent.tsx

+      if (sxProp !== defaultSxProp) {
+        return <Box as={BaseComponent} {...rest} sx={sxProp} ref={ref} />
+      }


@jonrohan LGTM!

joshblack · 2024-09-24T19:17:13Z

e2e/components/AvatarStack.test.ts

-              colorScheme: theme,
-            },
-          })
+  for (const featureFlagOn of [true, false]) {


One question, how do you feel about using this format for defining tests and running them:

https://github.com/primer/react/blob/main/e2e/components/Link.test.ts#L5

Also wanted to ask if you knew how to filter tests by describe block names? I wasn't sure how to do it 🤔 It's why I've been using styled-components in the name so that I could filter by that in the test name when running playwright locally

.changeset/hot-chicken-tickle.md

Co-authored-by: Josh Black <[email protected]>

primer-integration · 2024-09-25T20:39:05Z

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/344069

jonrohan added 2 commits September 23, 2024 23:59

Convert AvatarStack to CSS modules behind primer_react_css_modules_te…

0e8b547

…am feature flag

Updating the tests to run with the feature flag on

6f6fbd1

github-actions bot added the staff Author is a staff member label Sep 24, 2024

Create hot-chicken-tickle.md

4f1c263

jonrohan temporarily deployed to github-pages September 24, 2024 00:09 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5012 September 24, 2024 00:09 Inactive

Fix tests

53f29df

jonrohan temporarily deployed to github-pages September 24, 2024 17:01 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5012 September 24, 2024 17:01 Inactive

jonrohan marked this pull request as ready for review September 24, 2024 17:02

jonrohan requested a review from a team as a code owner September 24, 2024 17:02

jonrohan requested review from joshblack and keithamus and removed request for keithamus September 24, 2024 17:02

jonrohan commented Sep 24, 2024

View reviewed changes

joshblack approved these changes Sep 24, 2024

View reviewed changes

Update hot-chicken-tickle.md

57feba3

Co-authored-by: Josh Black <[email protected]>

jonrohan temporarily deployed to github-pages September 24, 2024 19:35 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5012 September 24, 2024 19:36 Inactive

jonrohan added 2 commits September 24, 2024 12:40

Quiet warnings

8858370

Merge branch 'main' into css_modules_avatar_stack

056bdc7

jonrohan temporarily deployed to github-pages September 24, 2024 19:44 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5012 September 24, 2024 19:45 Inactive

Update CSS disables

c34264f

jonrohan enabled auto-merge September 24, 2024 20:01

jonrohan deployed to github-pages September 24, 2024 20:03 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-5012 September 24, 2024 20:03 View deployment

jonrohan added this pull request to the merge queue Sep 24, 2024

Merged via the queue into main with commit 954170b Sep 24, 2024
32 checks passed

jonrohan deleted the css_modules_avatar_stack branch September 24, 2024 20:21

primer bot mentioned this pull request Sep 24, 2024

Release tracking (rc) #5008

Merged

This was referenced Sep 26, 2024

Revert "Update AvatarStack component to use CSS modules behind the feature flag primer_react_css_modules_team" #5034

Merged

Release Tracking #5009

Closed

joshblack restored the css_modules_avatar_stack branch September 26, 2024 17:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update `AvatarStack` component to use CSS modules behind the feature flag primer_react_css_modules_team #5012

Update `AvatarStack` component to use CSS modules behind the feature flag primer_react_css_modules_team #5012

Uh oh!

jonrohan commented Sep 24, 2024

Uh oh!

changeset-bot bot commented Sep 24, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Sep 24, 2024 •

edited

Loading

Uh oh!

jonrohan Sep 24, 2024

Uh oh!

joshblack Sep 24, 2024

Uh oh!

joshblack left a comment

Uh oh!

joshblack Sep 24, 2024

Uh oh!

joshblack Sep 24, 2024

Uh oh!

Uh oh!

Uh oh!

primer-integration bot commented Sep 25, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Update AvatarStack component to use CSS modules behind the feature flag primer_react_css_modules_team #5012

Update AvatarStack component to use CSS modules behind the feature flag primer_react_css_modules_team #5012

Uh oh!

Conversation

jonrohan commented Sep 24, 2024

Changelog

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Sep 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Sep 24, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

jonrohan Sep 24, 2024

Choose a reason for hiding this comment

Uh oh!

joshblack Sep 24, 2024

Choose a reason for hiding this comment

Uh oh!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

joshblack Sep 24, 2024

Choose a reason for hiding this comment

Uh oh!

joshblack Sep 24, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

primer-integration bot commented Sep 25, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Update `AvatarStack` component to use CSS modules behind the feature flag primer_react_css_modules_team #5012

Update `AvatarStack` component to use CSS modules behind the feature flag primer_react_css_modules_team #5012

changeset-bot bot commented Sep 24, 2024 •

edited

Loading

github-actions bot commented Sep 24, 2024 •

edited

Loading