refactor(ui): style interactive avatars in Avatar itself

.changeset/mosaic-avatar-interactive-styles.md

@@ -0,0 +1,2 @@
+---
+---

packages/swingset/src/stories/avatar.stories.tsx

@@ -1,7 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import type { AvatarProps } from '@clerk/ui/mosaic/components/avatar';
 import { Avatar } from '@clerk/ui/mosaic/components/avatar';
-import { Button } from '@clerk/ui/mosaic/components/button';
 import { Icon } from '@clerk/ui/mosaic/components/icon';
 
 import type { StoryMeta } from '@/lib/types';
@@ -79,11 +78,9 @@ export function Interactive(props: Record<string, unknown>) {
       {...knobsAsProps(props)}
       size='lg'
       render={
-        <Button
+        <button
+          type='button'
           aria-label='Edit profile picture'
-          color='neutral'
-          shape='circle'
-          variant='ghost'
         />
       }
     >

packages/ui/src/mosaic/components/avatar/avatar.styles.ts

@@ -10,8 +10,6 @@ const pulse = stylex.keyframes({
 export const styles = stylex.create({
   // root — sizes and positions its parts; fill comes from the image or fallback
   base: {
-    // An avatar used as a native button has no border shrinking the avatar inside it.
-    borderWidth: { default: null, ':is(button)': 0 },
     alignItems: 'center',
     aspectRatio: '1 / 1',
     display: 'inline-flex',
@@ -23,9 +21,20 @@ export const styles = stylex.create({
     position: 'relative',
     userSelect: 'none',
     verticalAlign: 'middle',
-    // Button's own largest size is smaller; non-button roots continue to follow the size axis.
-    minHeight: { default: null, ':is(button)': space['12'] },
-    minWidth: { default: null, ':is(button)': space['12'] },
+  },
+
+  interactive: {
+    // An avatar used as a native button has no border shrinking the avatar inside it.
+    borderWidth: 0,
+    outline: {
+      default: 'none',
+      ':focus-visible': `2px solid ${colorVars['--cl-color-primary']}`,
+    },
+    cursor: {
+      default: 'pointer',
+      ':is(:disabled, [aria-disabled="true"])': 'not-allowed',
+    },
+    outlineOffset: '2px',
   },
 
   // Carries the root's radius rather than leaning on the clip alone, so a part that paints its own
@@ -69,7 +78,6 @@ export const styles = stylex.create({
   },
 
   icon: {
-    '--_cl-icon-color': colorVars['--cl-color-avatar-icon'],
     borderColor: colorVars['--cl-color-border'],
     borderRadius: radiusVars['--cl-radius-full'],
     borderStyle: 'solid',
@@ -79,8 +87,8 @@ export const styles = stylex.create({
     backgroundColor: colorVars['--cl-color-card'],
     boxSizing: 'border-box',
     display: 'flex',
-    insetBlockEnd: `calc(0px - ${space['2']})`,
-    insetInlineStart: '-4.5px',
+    insetBlockEnd: `calc(${space['2']} * -1)`,
+    insetInlineStart: `calc(${space['1']} * -1)`,
     justifyContent: 'center',
     position: 'absolute',
     height: space['6'],

packages/ui/src/mosaic/components/avatar/avatar.test.tsx

@@ -4,7 +4,6 @@ import { flushSync } from 'react-dom';
 import { createRoot } from 'react-dom/client';
 import { afterEach, describe, expect, it, vi } from 'vitest';
 
-import { Button } from '../button';
 import { Icon } from '../icon';
 import { Avatar } from './avatar';
 
@@ -289,11 +288,9 @@ describe('Mosaic Avatar', () => {
         ref={ref}
         size='lg'
         render={
-          <Button
+          <button
+            type='button'
             aria-label='Edit profile picture'
-            color='neutral'
-            shape='circle'
-            variant='ghost'
           />
         }
       >
@@ -305,7 +302,7 @@ describe('Mosaic Avatar', () => {
     );
 
     const button = screen.getByRole('button', { name: 'Edit profile picture' });
-    expect(button).toHaveClass('cl-avatar', 'cl-button');
+    expect(button).toHaveClass('cl-avatar');
     expect(button).toHaveAttribute('data-size', 'lg');
     expect(ref.current).toBe(button);
     expect(button.querySelector('.cl-avatar-icon')).toHaveAttribute('aria-hidden', 'true');

packages/ui/src/mosaic/components/avatar/avatar.tsx

@@ -36,14 +36,15 @@ const AvatarRoot = React.forwardRef<HTMLSpanElement, AvatarProps>(function Mosai
 ) {
   const [status, setStatus] = React.useState<ImageLoadingStatus>('idle');
   const value = React.useMemo<AvatarContextValue>(() => ({ status, onStatusChange: setStatus }), [status]);
+  const interactive = Boolean(render);
   const element = useRender({
     defaultTagName: 'span',
     render,
     ref,
     props: {
       ...mergeStyleProps(
         themeProps('avatar', { shape, size }),
-        stylex.props(reset.base, styles.base, shapes[shape], sizes[size]),
+        stylex.props(reset.base, styles.base, shapes[shape], sizes[size], interactive && styles.interactive),
         className,
         style,
       ),

packages/ui/src/mosaic/components/icon/icon.test.tsx

@@ -41,14 +41,6 @@ describe('Mosaic Icon', () => {
     expect(svg).toHaveStyle({ marginTop: '8px' });
   });
 
-  it('renders the pen at the default 16px size with its native geometry', () => {
-    const { container } = wrap(<Icon name='pen' />);
-    const svg = container.querySelector('svg');
-    expect(svg).toHaveAttribute('data-size', 'md');
-    expect(svg).toHaveAttribute('viewBox', '0 0 12 12');
-    expect(svg?.querySelector('path')).toHaveAttribute('fill', 'currentColor');
-  });
-
   it('emits no placement attribute when the icon is not placed', () => {
     const { container } = wrap(<Icon name='chevron-right' />);
     expect(container.querySelector('svg')).not.toHaveAttribute('data-icon');

packages/ui/src/mosaic/icons/registry.tsx

@@ -96,12 +96,11 @@ const Plus = glyph(
 
 const Pen = glyph(
   <path
-    clipRule='evenodd'
-    d='M9.02209 2.97867C8.55345 2.50711 7.79511 2.50711 7.32647 2.97867L7.31857 2.98647L3.5273 6.65369C3.39533 6.78134 3.30375 6.94493 3.26392 7.12416L2.80602 9.1847L4.71264 8.73608C4.87966 8.69678 5.03269 8.6124 5.15506 8.49214L9.06427 4.65015C9.494 4.1715 9.47623 3.43565 9.02209 2.97867ZM6.53268 2.18146C7.44155 1.27145 8.91291 1.27285 9.82005 2.18566C10.7012 3.07231 10.7294 4.49927 9.88442 5.42042C9.87785 5.42757 9.87111 5.43455 9.86419 5.44135L5.94362 9.2945C5.67441 9.55909 5.33775 9.74472 4.97031 9.83117L2.19135 10.485C2.00293 10.5294 1.80496 10.4737 1.66724 10.3377C1.52953 10.2017 1.47142 10.0044 1.51341 9.81548L2.16571 6.88012C2.25333 6.48581 2.45481 6.12591 2.74514 5.84508L6.53268 2.18146Z'
+    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'
   />,
-  '0 0 12 12',
 );
 
 const LogOut = glyph(

packages/ui/src/mosaic/tokens.stylex.ts

@@ -46,7 +46,6 @@ const colorDefaults = {
 
   '--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))',
 
   '--cl-color-input': 'light-dark(oklch(1 0 0), oklch(0.2046 0 0))',
   '--cl-color-input-placeholder': '#a3a3a3',