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: f7f982a

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

francinelucca · 2024-11-20T17:08:42Z

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

+    /* 2. + the non-overlapping part of the third and fourth avatar;thiscalcexplained */
+    min-width: calc(


Suggested change

/* 2. + the non-overlapping part of the third and fourth avatar;thiscalcexplained */

min-width: calc(

/* 2. + the non-overlapping part of the third and fourth avatar */

min-width: calc(

francinelucca · 2024-11-20T17:08:56Z

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

+
+    /* 1. avatar size + the non-overlapping part of the second avatar */
+
+    /* 2. + the non-overlapping part of the third avatar;thiscalcexplained */


Suggested change

/* 2. + the non-overlapping part of the third avatar;thiscalcexplained */

/* 2. + the non-overlapping part of the third avatar */

francinelucca · 2024-11-20T17:09:12Z

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

+
+    /* 1. avatar size + the non-overlapping part of the second avatar */
+
+    /* 2. + the border widths of the first two avatars;thiscalcexplained */


Suggested change

/* 2. + the border widths of the first two avatars;thiscalcexplained */

/* 2. + the border widths of the first two avatars */

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

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

@@ -6,8 +6,6 @@
    /* stylelint-disable-next-line primer/typography */
    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?

hussam-i-am · 2024-11-20T19:02:20Z

packages/react/src/AvatarStack/AvatarStack.tsx

+      // @ts-ignore - it's not allowing CSS properties here
+      style={enabled ? (getResponsiveAvatarSizeStyles() as React.CSSProperties) : undefined}


I think you can get rid of the ts-ignore and the as React.CSSProperties since it is being aliased within the function

Suggested change

// @ts-ignore - it's not allowing CSS properties here

style={enabled ? (getResponsiveAvatarSizeStyles() as React.CSSProperties) : undefined}

style={enabled ? getResponsiveAvatarSizeStyles() : undefined}

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

Not important

dcedeec

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

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

Merge branch 'main' into css_modules_avatar_stack

ad8621a

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

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

jonrohan added 2 commits November 19, 2024 22:01

Add a link wrapper test

b1ce61b

Adjust css for when link wrapper occurs

5ba219d

jonrohan added the update snapshots label Nov 19, 2024

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

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

test(vrt): update snapshots

1c7c261

github-actions bot removed the update snapshots label Nov 19, 2024

primer bot temporarily deployed to github-pages November 19, 2024 22:13 Inactive

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

jonrohan added 2 commits November 19, 2024 22:30

Update snap

49cbad3

Remove box-shadow

f7f982a

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

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

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 tbenning and francinelucca 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

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

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

jonrohan commented Nov 14, 2024 •

edited

Loading

changeset-bot bot commented Nov 14, 2024 •

edited

Loading

github-actions bot commented Nov 14, 2024

jonrohan commented Nov 20, 2024

francinelucca left a comment

francinelucca Nov 20, 2024

francinelucca Nov 20, 2024

francinelucca Nov 20, 2024

hussam-i-am Nov 20, 2024

hussam-i-am Nov 20, 2024

		/* 2. + the non-overlapping part of the third and fourth avatar;thiscalcexplained */
		min-width: calc(


		/* 1. avatar size + the non-overlapping part of the second avatar */

		/* 2. + the non-overlapping part of the third avatar;thiscalcexplained */


		/* 1. avatar size + the non-overlapping part of the second avatar */

		/* 2. + the border widths of the first two avatars;thiscalcexplained */

		// @ts-ignore - it's not allowing CSS properties here
		style={enabled ? (getResponsiveAvatarSizeStyles() as React.CSSProperties) : undefined}

	// @ts-ignore - it's not allowing CSS properties here
	style={enabled ? (getResponsiveAvatarSizeStyles() as React.CSSProperties) : undefined}
	style={enabled ? getResponsiveAvatarSizeStyles() : undefined}

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

Are you sure you want to change the base?

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

Conversation

jonrohan commented Nov 14, 2024 • edited Loading

Changelog

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

changeset-bot bot commented Nov 14, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Nov 14, 2024

jonrohan commented Nov 20, 2024

francinelucca left a comment

Choose a reason for hiding this comment

francinelucca Nov 20, 2024

Choose a reason for hiding this comment

francinelucca Nov 20, 2024

Choose a reason for hiding this comment

francinelucca Nov 20, 2024

Choose a reason for hiding this comment

hussam-i-am Nov 20, 2024

Choose a reason for hiding this comment

hussam-i-am Nov 20, 2024

Choose a reason for hiding this comment

jonrohan commented Nov 14, 2024 •

edited

Loading

changeset-bot bot commented Nov 14, 2024 •

edited

Loading