feat(AvatarStack): Convert AvatarStack to CSS modules behind team feature flag #5299

jonrohan · 2024-11-14T20:20:11Z

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

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

changeset-bot · 2024-11-14T20:20:15Z

🦋 Changeset detected

Latest commit: 7235818

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-11-14T20:20:48Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

jonrohan · 2024-11-20T00:30:10Z

Ok, this is ready again. This time I've fixed the issues we saw when shipping last time https://github.com/github/github/pull/351862

francinelucca

Mostly LGTM, just a few comment cleanup suggestions and one question:
I see integration PR is failing, is that just because it needs the new changes on the separate dotcom PR? 👀

non-blocking: I'm wondering if this story is working as supposed to. It behaves the same in prod but are the sizes even doing anything here? 😅

packages/react/src/AvatarStack/AvatarStack.module.css

hussam-i-am · 2024-11-20T18:55:55Z

packages/react/src/experimental/Skeleton/SkeletonAvatar.module.css

    line-height: 1;
    border-radius: 50%;
-    /* stylelint-disable-next-line primer/box-shadow */
-    box-shadow: 0 0 0 1px var(--avatar-borderColor);


Is this no longer needed?

I forget the explanation, The box-shadow "border" wasn't showing up in snapshots before, but when avatar stack was converted it started to fail.

packages/react/src/AvatarStack/AvatarStack.tsx

Co-authored-by: Marie Lucca <[email protected]> Co-authored-by: Hussam Ghazzi <[email protected]>

primer-integration · 2024-11-25T16:26:28Z

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

primer-integration · 2024-11-25T16:51:59Z

🔴 golden-jobs completed with status failure.

… team feature flag (#5299)" This reverts commit 8673664.

jonrohan and others added 24 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

Create hot-chicken-tickle.md

4f1c263

Fix tests

53f29df

Update hot-chicken-tickle.md

57feba3

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

Quiet warnings

8858370

Merge branch 'main' into css_modules_avatar_stack

056bdc7

Update CSS disables

c34264f

Merge branch 'main' into css_modules_avatar_stack

260dbba

Remove feature flag change

70f83e3

Revert package changes

cdd6c79

Revert module changes

6d02573

Merge branch 'main' into css_modules_avatar_stack

9e2ce13

Add span element to AvatarStackWrapper

dbf6800

Update snapshot

ba9b70a

Merge branch 'main' into css_modules_avatar_stack

928cb31

Merge branch 'main' into css_modules_avatar_stack

6e92067

Merge branch 'main' into css_modules_avatar_stack

af045d9

Merge branch 'main' into css_modules_avatar_stack

620365d

Fix weird merge problem

b564ae7

important on the box shadow until avatar removes sx

3c77e04

Update snapshot

62725ce

Reduce diff

48b4ca3

Move AvatarStackBody out of AvatarStack

dcb115d

github-actions bot added the staff Author is a staff member label Nov 14, 2024

Merge branch 'main' into css_modules_avatar_stack

8c2fcb5

github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Nov 14, 2024

jonrohan temporarily deployed to github-pages November 14, 2024 20:22 — with GitHub Actions Inactive

jonrohan added 2 commits November 19, 2024 22:30

Update snap

49cbad3

Remove box-shadow

f7f982a

jonrohan temporarily deployed to github-pages November 19, 2024 22:32 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5299 November 19, 2024 22:33 Inactive

jonrohan marked this pull request as ready for review November 20, 2024 00:29

jonrohan requested review from a team as code owners November 20, 2024 00:29

jonrohan requested review from francinelucca and tbenning November 20, 2024 00:29

jonrohan requested review from hussam-i-am and langermank and removed request for tbenning November 20, 2024 00:30

francinelucca reviewed Nov 20, 2024

View reviewed changes

packages/react/src/AvatarStack/AvatarStack.module.css Outdated Show resolved Hide resolved

packages/react/src/AvatarStack/AvatarStack.module.css Outdated Show resolved Hide resolved

packages/react/src/AvatarStack/AvatarStack.module.css Outdated Show resolved Hide resolved

hussam-i-am approved these changes Nov 20, 2024

View reviewed changes

Apply suggestions from code review

276bd5f

Co-authored-by: Marie Lucca <[email protected]> Co-authored-by: Hussam Ghazzi <[email protected]>

jonrohan temporarily deployed to github-pages November 25, 2024 15:55 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-5299 November 25, 2024 15:55 Inactive

hussam-i-am approved these changes Nov 25, 2024

View reviewed changes

Merge branch 'main' into css_modules_avatar_stack

7235818

jonrohan deployed to github-pages November 25, 2024 16:20 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-5299 November 25, 2024 16:20 View deployment

jonrohan added this pull request to the merge queue Nov 27, 2024

Merged via the queue into main with commit 8673664 Nov 27, 2024
43 checks passed

jonrohan deleted the css_modules_avatar_stack branch November 27, 2024 18:22

primer bot mentioned this pull request Nov 27, 2024

Release tracking (37.7.0) #5335

Merged

francinelucca added a commit that referenced this pull request Dec 5, 2024

Revert " feat(AvatarStack): Convert AvatarStack to CSS modules behind…

45b3149

… team feature flag (#5299)" This reverts commit 8673664.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(AvatarStack): Convert AvatarStack to CSS modules behind team feature flag #5299

feat(AvatarStack): Convert AvatarStack to CSS modules behind team feature flag #5299

Uh oh!

jonrohan commented Nov 14, 2024 •

edited

Loading

Uh oh!

changeset-bot bot commented Nov 14, 2024 •

edited

Loading

Uh oh!

github-actions bot commented Nov 14, 2024

Uh oh!

jonrohan commented Nov 20, 2024

Uh oh!

francinelucca left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hussam-i-am Nov 20, 2024

Uh oh!

jonrohan Nov 25, 2024

Uh oh!

Uh oh!

primer-integration bot commented Nov 25, 2024

Uh oh!

primer-integration bot commented Nov 25, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

feat(AvatarStack): Convert AvatarStack to CSS modules behind team feature flag #5299

feat(AvatarStack): Convert AvatarStack to CSS modules behind team feature flag #5299

Uh oh!

Conversation

jonrohan commented Nov 14, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Nov 14, 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 Nov 14, 2024

Uh oh!

jonrohan commented Nov 20, 2024

Uh oh!

francinelucca left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

hussam-i-am Nov 20, 2024

Choose a reason for hiding this comment

Uh oh!

jonrohan Nov 25, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

primer-integration bot commented Nov 25, 2024

Uh oh!

primer-integration bot commented Nov 25, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jonrohan commented Nov 14, 2024 •

edited

Loading

changeset-bot bot commented Nov 14, 2024 •

edited

Loading