Skip to content

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

Merged
jonrohan merged 37 commits into
mainfrom
css_modules_avatar_stack
Nov 27, 2024
Merged

feat(AvatarStack): Convert AvatarStack to CSS modules behind team feature flag#5299
jonrohan merged 37 commits into
mainfrom
css_modules_avatar_stack

Conversation

@jonrohan

@jonrohanjonrohan commented Nov 14, 2024•
edited
Loading

Copy link
Copy Markdown
Member

Closeshttps://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

jonrohanand others added 24 commits September 23, 2024 23:59
@jonrohan
Convert AvatarStack to CSS modules behind primer_react_css_modules_te…
0e8b547
…am feature flag
@jonrohan
Updating the tests to run with the feature flag on
6f6fbd1
@jonrohan
Create hot-chicken-tickle.md
4f1c263
@jonrohan
Fix tests
53f29df
@jonrohan@joshblack
Update hot-chicken-tickle.md
57feba3
Co-authored-by: Josh Black <joshblack@github.com>
@jonrohan
Quiet warnings
8858370
@jonrohan
Merge branch 'main' into css_modules_avatar_stack
056bdc7
@jonrohan
Update CSS disables
c34264f
@jonrohan
Merge branch 'main' into css_modules_avatar_stack
260dbba
@jonrohan
Remove feature flag change
70f83e3
@jonrohan
Revert package changes
cdd6c79
@jonrohan
Revert module changes
6d02573
@jonrohan
Merge branch 'main' into css_modules_avatar_stack
9e2ce13
@jonrohan
Add span element to AvatarStackWrapper
dbf6800
@jonrohan
Update snapshot
ba9b70a
@jonrohan
Merge branch 'main' into css_modules_avatar_stack
928cb31
@jonrohan
Merge branch 'main' into css_modules_avatar_stack
6e92067
@jonrohan
Merge branch 'main' into css_modules_avatar_stack
af045d9
@jonrohan
Merge branch 'main' into css_modules_avatar_stack
620365d
@jonrohan
Fix weird merge problem
b564ae7
@jonrohan
important on the box shadow until avatar removes sx
3c77e04
@jonrohan
Update snapshot
62725ce
@jonrohan
Reduce diff
48b4ca3
@jonrohan
Move AvatarStackBody out of AvatarStack
dcb115d
@changeset-bot

changeset-botBot commented Nov 14, 2024•
edited
Loading

Copy link
Copy Markdown

🦋 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
NameType
@primer/reactMinor

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-actionsgithub-actionsBot added the staff Author is a staff member label Nov 14, 2024
@github-actions

github-actionsBot commented Nov 14, 2024

Copy link
Copy Markdown
Contributor

👋 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!

@github-actionsgithub-actionsBot 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
@github-actions
github-actionsBottemporarily deployed to storybook-preview-5299 November 19, 2024 22:33 Inactive
@jonrohan
jonrohan marked this pull request as ready for review November 20, 2024 00:29
@jonrohan
jonrohan requested review from a team as code ownersNovember 20, 2024 00:29
@jonrohan

jonrohan commented Nov 20, 2024

Copy link
Copy Markdown
MemberAuthor

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

@jonrohan
jonrohan requested review from hussam-i-am and langermank and removed request for tbenningNovember 20, 2024 00:30
francinelucca
francinelucca reviewed Nov 20, 2024
View reviewed changes

@francineluccafrancinelucca left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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? 😅

Comment threadpackages/react/src/AvatarStack/AvatarStack.module.css Outdated
Comment threadpackages/react/src/AvatarStack/AvatarStack.module.css Outdated
Comment threadpackages/react/src/AvatarStack/AvatarStack.module.css Outdated
hussam-i-am
hussam-i-am approved these changes Nov 20, 2024
View reviewed changes
Comment threadpackages/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);

@hussam-i-amhussam-i-amNov 20, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this no longer needed?

@jonrohanjonrohanNov 25, 2024

Copy link
Copy Markdown
MemberAuthor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Comment threadpackages/react/src/AvatarStack/AvatarStack.tsx Outdated
@jonrohan@francinelucca@hussam-i-am
Apply suggestions from code review
276bd5f
Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Co-authored-by: Hussam Ghazzi <hussam-i-am@github.com>
@github-actions
github-actionsBottemporarily deployed to storybook-preview-5299 November 25, 2024 15:55 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-5299 November 25, 2024 16:20 Inactive
@primer-integration

primer-integrationBot commented Nov 25, 2024

Copy link
Copy Markdown

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

@primer-integration

primer-integrationBot commented Nov 25, 2024

Copy link
Copy Markdown

🔴 golden-jobs completed with status failure.

@jonrohan
jonrohan added this pull request to the merge queueNov 27, 2024
Merged via the queue into main with commit 8673664Nov 27, 2024
@jonrohan
jonrohan deleted the css_modules_avatar_stack branch November 27, 2024 18:22
@primerprimerBot mentioned this pull request Nov 27, 2024
Merged
francinelucca added a commit that referenced this pull request Dec 5, 2024
@francinelucca
Revert " feat(AvatarStack): Convert AvatarStack to CSS modules behind…
45b3149
… team feature flag (#5299)"
This reverts commit 8673664.
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@francineluccafrancineluccafrancinelucca left review comments
@hussam-i-amhussam-i-amhussam-i-am approved these changes
@langermanklangermankAwaiting requested review from langermank

Assignees

No one assigned

Labels

integration-tests: failingChanges in this PR cause breaking changes in gh/ghstaffAuthor is a staff member

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@jonrohan@hussam-i-am@francinelucca