feat(ui): migrate Mosaic Icon to StyleX

.changeset/mosaic-icon-stylex.md

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

packages/swingset/src/stories/icon.mdx

@@ -2,7 +2,7 @@ import * as IconStories from './icon.stories';
 
 # Icon
 
-Icon renders a named glyph from Mosaic's icon set. It sizes through the `size` variant and inherits color from `currentColor`. Any glyph can be swapped per name through `appearance.icons` on `MosaicProvider`. Mosaic's styling applies to an override just like the built-in glyph — so swapped icons stay visually consistent — and the override also receives `data-cl-slot="icon"` for targeting.
+Icon renders a named glyph from Mosaic's icon set. It sizes through the `size` variant and inherits color from `currentColor`. Any glyph can be swapped per name through `appearance.icons` on `MosaicProvider`. Mosaic's styling applies to an override just like the built-in glyph — so swapped icons stay visually consistent — and the override also carries the `.cl-icon` class and `data-size` attribute for targeting.
 
 ## Playground
 
@@ -46,7 +46,7 @@ Icon renders a named glyph from Mosaic's icon set. It sizes through the `size` v
 
 ### Overriding a glyph
 
-Pass `appearance.icons` to `MosaicProvider` to replace a glyph by name. The override is a function receiving the resolved props — Mosaic's sizing/color `className` and `data-cl-slot` — which you spread onto your own element. Because Mosaic's styling applies to the override too, the replacement only supplies its `viewBox` and paths.
+Pass `appearance.icons` to `MosaicProvider` to replace a glyph by name. The override is a plain element; Mosaic clones it with the resolved sizing `className` and `data-size`, keeping any class the element already had. The replacement only supplies its `viewBox` and paths.
 
 <Story
   name='Override'

packages/swingset/src/stories/icon.stories.tsx

@@ -1,6 +1,6 @@
 /** @jsxImportSource @emotion/react */
 import type { IconProps } from '@clerk/ui/mosaic/components/icon';
-import { Icon, iconRecipe } from '@clerk/ui/mosaic/components/icon';
+import { Icon } from '@clerk/ui/mosaic/components/icon';
 import { iconRegistry } from '@clerk/ui/mosaic/icons/registry';
 import { MosaicProvider } from '@clerk/ui/mosaic/MosaicProvider';
 
@@ -13,8 +13,16 @@ export { default as __source } from './icon.stories?raw';
 export const meta: StoryMeta = {
   group: 'Components',
   title: 'Icon',
-  source: 'packages/ui/src/mosaic/components/icon.tsx',
-  styles: iconRecipe,
+  source: 'packages/ui/src/mosaic/components/icon/icon.tsx',
+  styleEngine: 'stylex',
+  styles: {
+    _variants: {
+      size: { sm: {}, md: {}, lg: {} },
+    },
+    _defaultVariants: {
+      size: 'md',
+    },
+  },
 };
 
 // Story functions accept Record<string,unknown> (knob values) and cast to IconProps.
@@ -78,8 +86,8 @@ export function Override() {
   return (
     <MosaicProvider
       appearance={{
-        // Overrides are elements now, not render functions: Mosaic injects its sizing className and
-        // `data-cl-slot` into the element via cloneElement, so the replacement only needs its viewBox
+        // Overrides are elements, not render functions: Mosaic injects its sizing className and
+        // `data-size` into the element via cloneElement, so the replacement only needs its viewBox
         // + paths. Passing an element (vs a function) also lets overrides be supplied from a Server
         // Component, since elements serialize across the RSC boundary.
         icons: {

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

@@ -0,0 +1,13 @@
+import * as stylex from '@stylexjs/stylex';
+
+import { space } from '../../tokens.stylex';
+
+export const styles = stylex.create({
+  base: { display: 'inline-block', flexShrink: 0 },
+});
+
+export const sizes = stylex.create({
+  sm: { height: space['3.5'], width: space['3.5'] },
+  md: { height: space['4'], width: space['4'] },
+  lg: { height: space['5'], width: space['5'] },
+});

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

@@ -0,0 +1,115 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+import { describe, expect, it } from 'vitest';
+
+import type { MosaicAppearance } from '../../appearance';
+import { MosaicProvider } from '../../MosaicProvider';
+import { Icon } from './icon';
+
+const wrap = (ui: React.ReactElement, appearance?: MosaicAppearance) =>
+  render(<MosaicProvider appearance={appearance}>{ui}</MosaicProvider>);
+
+const override: MosaicAppearance = {
+  icons: { 'chevron-right': <span data-testid='override' /> },
+};
+
+describe('Mosaic Icon', () => {
+  it('renders the default glyph for a known name', () => {
+    const { container } = wrap(<Icon name='chevron-right' />);
+    const svg = container.querySelector('svg.cl-icon');
+    expect(svg).not.toBeNull();
+    expect(svg?.querySelector('path')).not.toBeNull();
+  });
+
+  it('applies the default size when none is passed', () => {
+    const { container } = wrap(<Icon name='chevron-right' />);
+    expect(container.querySelector('svg')).toHaveAttribute('data-size', 'md');
+  });
+
+  it('wires the size variant and consumer className/style through to the element', () => {
+    const { container } = wrap(
+      <Icon
+        name='chevron-right'
+        size='lg'
+        className='my-icon'
+        style={{ marginTop: '8px' }}
+      />,
+    );
+    const svg = container.querySelector('svg');
+    expect(svg).toHaveAttribute('data-size', 'lg');
+    expect(svg).toHaveClass('cl-icon', 'my-icon');
+    expect(svg).toHaveStyle({ marginTop: '8px' });
+  });
+
+  it('renders the override element instead of the default glyph', () => {
+    const { getByTestId, container } = wrap(<Icon name='chevron-right' />, override);
+    expect(getByTestId('override')).not.toBeNull();
+    expect(container.querySelector('svg')).toBeNull();
+  });
+
+  it('applies the same slot class and size variant to an override as to the built-in glyph', () => {
+    const { getByTestId } = wrap(
+      <Icon
+        name='chevron-right'
+        size='lg'
+      />,
+      override,
+    );
+    const el = getByTestId('override');
+    expect(el).toHaveClass('cl-icon');
+    expect(el).toHaveAttribute('data-size', 'lg');
+  });
+
+  it("merges the override element's own className rather than clobbering it", () => {
+    const { getByTestId } = wrap(
+      <Icon
+        name='chevron-right'
+        className='call-site'
+      />,
+      {
+        icons: {
+          'chevron-right': (
+            <span
+              data-testid='override'
+              className='consumer-glyph'
+            />
+          ),
+        },
+      },
+    );
+    expect(getByTestId('override')).toHaveClass('cl-icon', 'call-site', 'consumer-glyph');
+  });
+
+  it('forwards svg props from the Icon call site onto the override element', () => {
+    const { getByTestId } = wrap(
+      <Icon
+        name='chevron-right'
+        aria-label='Next'
+      />,
+      override,
+    );
+    expect(getByTestId('override')).toHaveAttribute('aria-label', 'Next');
+  });
+
+  it('falls through to the default when a different name is overridden', () => {
+    const { container, queryByTestId } = wrap(<Icon name='chevron-right' />, {
+      icons: { 'chevron-left': <span data-testid='override' /> },
+    });
+    expect(queryByTestId('override')).toBeNull();
+    expect(container.querySelector('svg.cl-icon')).not.toBeNull();
+  });
+
+  it('forwards arbitrary props and the ref to the built-in glyph', () => {
+    const ref = React.createRef<SVGSVGElement>();
+    const { container } = wrap(
+      <Icon
+        ref={ref}
+        name='chevron-right'
+        aria-label='Next'
+      />,
+    );
+    const svg = container.querySelector('svg');
+    expect(ref.current).toBe(svg);
+    expect(svg).toHaveAttribute('aria-label', 'Next');
+  });
+});