Uh oh!
There was an error while loading. Please reload this page.
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 📦
|
| 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.
joshblack
left a comment
There was a problem hiding this comment.
LGTM! Just had a couple of questions and some feedback for the @ts-ignore if it's helpful 👍
| 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.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
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