Uh oh!
There was an error while loading. Please reload this page.
refactor(ui): style interactive avatars in Avatar itself - #9413
Conversation
Apply an `interactive` StyleX style when `Avatar.Root` composes onto another element, instead of relying on the Mosaic Button. Drops the `--cl-color-avatar-icon` token and updates the pen glyph to the 16px grid.
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 28bb829 The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types 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 |
| d='M12.03 3.972a1.59 1.59 0 0 0-2.261 0l-.01.01-5.056 4.89a1.25 1.25 0 0 0-.351.627l-.61 2.747 2.542-.598a1.25 1.25 0 0 0 .59-.325L12.085 6.2c.573-.638.549-1.62-.057-2.228M8.71 2.909a3.09 3.09 0 0 1 4.383.005 3.126 3.126 0 0 1 .06 4.341l-5.228 5.138a2.75 2.75 0 0 1-1.298.715l-3.705.872a.75.75 0 0 1-.904-.893l.87-3.914a2.75 2.75 0 0 1 .772-1.38z' | ||
| fill='currentColor' | ||
| fillRule='evenodd' | ||
| clipRule='evenodd' | ||
| />, |
There was a problem hiding this comment.
this icon is not the same as what we were pulling from causing issues. we shouldn't need to specify a viewBox override to get things to align. will need to get a fix from design.
| '--cl-color-card': 'light-dark(oklch(1 0 0), oklch(0.205 0 0))', | ||
| '--cl-color-card-foreground': 'light-dark(oklch(0.145 0 0), oklch(0.985 0 0))', | ||
| '--cl-color-avatar-icon': 'light-dark(oklch(0.145 0 0), oklch(0.985 0 0))', |
There was a problem hiding this comment.
Lets avoid adding to many specific vars like this.
926c92a
into
austin/user-profile-03-avatar-buttonUh oh!
There was an error while loading. Please reload this page.
Description
Stacked on #9378.
Avatar.Rootnow owns its interactive appearance instead of borrowing it from the MosaicButton. When arenderprop composes the root onto another element, the root applies aninteractiveStyleX style: no border, pointer cursor (not-allowedwhen disabled), and afocus-visibleoutline. The:is(button)selectors that patched the border and min-size aroundButtonare gone, and demos compose onto a plain<button>.Also removes the
--cl-color-avatar-icontoken (the icon slot inherits its color) and replaces the pen glyph with a 16px-grid path, so it no longer needs aviewBoxoverride.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change