refactor(Avatar): Refactor Avatar component to use CSS modules behind feature flag #4885
Conversation
🦋 Changeset detectedLatest commit: 46da581 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
size-limit report 📦
|
jonrohan
temporarily deployed
to
github-pages
GitHub Actions
Inactive
jonrohan
temporarily deployed
to
github-pages
GitHub Actions
Inactive
jonrohan
temporarily deployed
to
github-pages
GitHub Actions
Inactive
packages/react/src/Avatar/Avatar.tsx
Outdated
| for (const [key, value] of Object.entries(size)) { | ||
| // @ts-ignore - css property | ||
| cssSizeVars[`--avatarSize-${key}`] = `${value}px` | ||
| } | ||
| } else { | ||
| // @ts-ignore - css property | ||
| cssSizeVars['--avatarSize-regular'] = `${size}px` | ||
| } |
There was a problem hiding this comment.
This is the biggest weirdness I was doing, trying to set CSS vars on the object if multiple sizes were passed in
There was a problem hiding this comment.
Makes sense to me 👍 This is very similar to what we do for ResponsiveValue with data attributes (e.g. data-gap-narrow, data-gap-regular) and makes a lot of sense to do CSS Custom Properties for values like this.
packages/react/src/Avatar/Avatar.tsx
Outdated
| for (const [key, value] of Object.entries(size)) { | ||
| // @ts-ignore - css property | ||
| cssSizeVars[`--avatarSize-${key}`] = `${value}px` | ||
| } | ||
| } else { | ||
| // @ts-ignore - css property | ||
| cssSizeVars['--avatarSize-regular'] = `${size}px` | ||
| } |
There was a problem hiding this comment.
Makes sense to me 👍 This is very similar to what we do for ResponsiveValue with data attributes (e.g. data-gap-narrow, data-gap-regular) and makes a lot of sense to do CSS Custom Properties for values like this.
Part of https://github.com/github/primer/issues/3877
Changelog
Changed
Converting
Avatarcomponent to use CSS modules behind theprimer_react_css_modules_teamfeature flagRollout strategy
Testing & Reviewing
Tests updated for in and outside of feature flag.
Merge checklist