@astryxdesign/core 0.1.3 → 0.1.4-canary.01e5b29

package/src/Icon/Icon.test.tsx

@@ -11,48 +11,48 @@
 
 import {describe, it, expect, vi} from 'vitest';
 import {render, screen} from '@testing-library/react';
-import {HomeIcon} from '@heroicons/react/24/outline';
+import {TestIcon} from '../__tests__/TestIcon';
 import {Icon} from './Icon';
 
 describe('Icon', () => {
   it('renders the icon component', () => {
-    render(<Icon icon={HomeIcon} data-testid="icon" />);
+    render(<Icon icon={TestIcon} data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
 
   it('renders as an SVG element', () => {
-    render(<Icon icon={HomeIcon} data-testid="icon" />);
+    render(<Icon icon={TestIcon} data-testid="icon" />);
     const icon = screen.getByTestId('icon');
     expect(icon.tagName.toLowerCase()).toBe('svg');
   });
 
   it('applies aria-hidden by default', () => {
-    render(<Icon icon={HomeIcon} data-testid="icon" />);
+    render(<Icon icon={TestIcon} data-testid="icon" />);
     expect(screen.getByTestId('icon')).toHaveAttribute('aria-hidden', 'true');
   });
 
   it('renders with different color variants', () => {
     const {rerender} = render(
-      <Icon icon={HomeIcon} color="primary" data-testid="icon" />,
+      <Icon icon={TestIcon} color="primary" data-testid="icon" />,
     );
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={HomeIcon} color="secondary" data-testid="icon" />);
+    rerender(<Icon icon={TestIcon} color="secondary" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={HomeIcon} color="accent" data-testid="icon" />);
+    rerender(<Icon icon={TestIcon} color="accent" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={HomeIcon} color="success" data-testid="icon" />);
+    rerender(<Icon icon={TestIcon} color="success" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={HomeIcon} color="error" data-testid="icon" />);
+    rerender(<Icon icon={TestIcon} color="error" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={HomeIcon} color="warning" data-testid="icon" />);
+    rerender(<Icon icon={TestIcon} color="warning" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={HomeIcon} color="inherit" data-testid="icon" />);
+    rerender(<Icon icon={TestIcon} color="inherit" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
 
@@ -70,50 +70,41 @@ describe('Icon', () => {
       'purple',
     ] as const;
     const {rerender} = render(
-      <Icon
-        icon={HomeIcon}
-        color={nonSemanticColors[0]}
-        data-testid="icon"
-      />,
+      <Icon icon={TestIcon} color={nonSemanticColors[0]} data-testid="icon" />,
     );
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
     for (const c of nonSemanticColors.slice(1)) {
-      rerender(<Icon icon={HomeIcon} color={c} data-testid="icon" />);
+      rerender(<Icon icon={TestIcon} color={c} data-testid="icon" />);
       expect(screen.getByTestId('icon')).toBeInTheDocument();
     }
   });
 
   it('renders with different size variants', () => {
     const {rerender} = render(
-      <Icon icon={HomeIcon} size="xsm" data-testid="icon" />,
+      <Icon icon={TestIcon} size="xsm" data-testid="icon" />,
     );
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={HomeIcon} size="sm" data-testid="icon" />);
+    rerender(<Icon icon={TestIcon} size="sm" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={HomeIcon} size="md" data-testid="icon" />);
+    rerender(<Icon icon={TestIcon} size="md" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
 
-    rerender(<Icon icon={HomeIcon} size="lg" data-testid="icon" />);
+    rerender(<Icon icon={TestIcon} size="lg" data-testid="icon" />);
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
 
   it('forwards ref correctly', () => {
     const ref = vi.fn();
-    render(<Icon icon={HomeIcon} ref={ref} />);
+    render(<Icon icon={TestIcon} ref={ref} />);
     expect(ref).toHaveBeenCalledWith(expect.any(SVGSVGElement));
   });
 
   it('passes additional SVG props', () => {
     render(
-      <Icon
-        icon={HomeIcon}
-        data-testid="icon"
-        role="img"
-        aria-label="Home"
-      />,
+      <Icon icon={TestIcon} data-testid="icon" role="img" aria-label="Home" />,
     );
     const icon = screen.getByTestId('icon');
     expect(icon).toHaveAttribute('role', 'img');
@@ -121,8 +112,29 @@ describe('Icon', () => {
   });
 
   it('uses default color and size when not specified', () => {
-    render(<Icon icon={HomeIcon} data-testid="icon" />);
+    render(<Icon icon={TestIcon} data-testid="icon" />);
     // The component should render without errors with defaults
     expect(screen.getByTestId('icon')).toBeInTheDocument();
   });
+
+  it('applies aria-hidden by default in string (registry) mode', () => {
+    render(<Icon icon="check" data-testid="icon" />);
+    expect(screen.getByTestId('icon')).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('lets a string-mode icon be made meaningful by overriding aria-hidden', () => {
+    render(
+      <Icon
+        icon="check"
+        data-testid="icon"
+        role="img"
+        aria-label="Done"
+        aria-hidden={false}
+      />,
+    );
+    const icon = screen.getByTestId('icon');
+    expect(icon).toHaveAttribute('role', 'img');
+    expect(icon).toHaveAttribute('aria-label', 'Done');
+    expect(icon).toHaveAttribute('aria-hidden', 'false');
+  });
 });

package/src/Icon/Icon.tsx

@@ -281,12 +281,16 @@ function IconFromRegistry({
 
   return (
     <span
+      // Decorative by default, but placed BEFORE the prop spread so consumers
+      // can override it (e.g. `aria-hidden={false}` + `role="img"` +
+      // `aria-label`) to expose a meaningful standalone icon. This matches
+      // component-mode Icon, which already sets aria-hidden before its spread.
+      aria-hidden="true"
       {...(spanProps as React.HTMLAttributes<HTMLSpanElement>)}
       {...mergeProps(
         themeProps('icon', {size, color}),
         stylex.props(styles.span, colorStyles[color], spanSizeStyles[size]),
-      )}
-      aria-hidden="true">
+      )}>
       {resolvedIcon}
     </span>
   );

package/src/InputGroup/InputGroup.tsx

@@ -201,11 +201,11 @@ export function InputGroup({
           labelTooltip={labelTooltip}>
           <div
             ref={ref}
+            data-testid={testId}
+            {...rest}
             role="group"
             aria-labelledby={labelID}
             aria-describedby={describedByIDs}
-            data-testid={testId}
-            {...rest}
             {...mergeProps(
               themeProps('input-group', {
                 size,

package/src/InteractiveRoleContext/InteractiveRoleContext.test.tsx

@@ -0,0 +1,185 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file InteractiveRoleContext.test.tsx
+ * @input Uses vitest, @testing-library/react, InteractiveRoleContext + useInteractiveRole
+ * @output Characterization tests for the interactive-role override context
+ * @position Testing; validates the role-override contract and its consumption
+ *   by useInteractiveRole
+ *
+ * SYNC: When InteractiveRoleContext.ts changes, update tests to match new behavior
+ */
+
+import {describe, it, expect} from 'vitest';
+import {renderHook} from '@testing-library/react';
+import {createElement, type ReactNode} from 'react';
+import {
+  InteractiveRoleContext,
+  useInteractiveRoleContext,
+} from './InteractiveRoleContext';
+import {
+  useInteractiveRole,
+  type InteractiveRole,
+} from '../hooks/useInteractiveRole';
+
+/** Wrap children in an InteractiveRoleContext provider set to `role`. */
+function withRole(role: InteractiveRole | null) {
+  return function Wrapper({children}: {children: ReactNode}) {
+    return (
+      <InteractiveRoleContext value={role}>{children}</InteractiveRoleContext>
+    );
+  };
+}
+
+describe('InteractiveRoleContext', () => {
+  describe('context primitive', () => {
+    it('defaults to null when read with no provider', () => {
+      const {result} = renderHook(() => useInteractiveRoleContext());
+      expect(result.current).toBeNull();
+    });
+
+    it('exposes a displayName for devtools', () => {
+      expect(InteractiveRoleContext.displayName).toBe('InteractiveRoleContext');
+    });
+
+    it('returns the provided role override', () => {
+      const {result} = renderHook(() => useInteractiveRoleContext(), {
+        wrapper: withRole('button'),
+      });
+      expect(result.current).toBe('button');
+    });
+
+    it('returns null when a provider explicitly supplies null', () => {
+      const {result} = renderHook(() => useInteractiveRoleContext(), {
+        wrapper: withRole(null),
+      });
+      expect(result.current).toBeNull();
+    });
+
+    it.each(['link', 'button', 'inert'] as const)(
+      'passes through the "%s" override verbatim',
+      role => {
+        const {result} = renderHook(() => useInteractiveRoleContext(), {
+          wrapper: withRole(role),
+        });
+        expect(result.current).toBe(role);
+      },
+    );
+
+    it('resolves to the nearest provider when nested', () => {
+      function Nested({children}: {children: ReactNode}) {
+        return (
+          <InteractiveRoleContext value="link">
+            <InteractiveRoleContext value="button">
+              {children}
+            </InteractiveRoleContext>
+          </InteractiveRoleContext>
+        );
+      }
+      const {result} = renderHook(() => useInteractiveRoleContext(), {
+        wrapper: Nested,
+      });
+      expect(result.current).toBe('button');
+    });
+
+    it('supports the createElement (no-JSX) provider form', () => {
+      const {result} = renderHook(() => useInteractiveRoleContext(), {
+        wrapper: ({children}: {children: ReactNode}) =>
+          createElement(InteractiveRoleContext, {value: 'button'}, children),
+      });
+      expect(result.current).toBe('button');
+    });
+  });
+
+  // useInteractiveRole is the real consumer of this context; these tests pin
+  // down how the context signal participates in the role-resolution priority.
+  describe('consumption via useInteractiveRole', () => {
+    it('href alone resolves to "link"', () => {
+      const {result} = renderHook(() =>
+        useInteractiveRole({href: '/somewhere'}),
+      );
+      expect(result.current).toBe('link');
+    });
+
+    it('onClick alone resolves to "button"', () => {
+      const {result} = renderHook(() =>
+        useInteractiveRole({onClick: () => {}}),
+      );
+      expect(result.current).toBe('button');
+    });
+
+    it('nothing interactive resolves to "inert"', () => {
+      const {result} = renderHook(() => useInteractiveRole({}));
+      expect(result.current).toBe('inert');
+    });
+
+    it('context override is used when neither href nor onClick is set', () => {
+      const {result} = renderHook(() => useInteractiveRole({}), {
+        wrapper: withRole('button'),
+      });
+      expect(result.current).toBe('button');
+    });
+
+    it('href wins over a context override (navigation has top priority)', () => {
+      const {result} = renderHook(() => useInteractiveRole({href: '/x'}), {
+        wrapper: withRole('button'),
+      });
+      expect(result.current).toBe('link');
+    });
+
+    it('onClick wins over a context override', () => {
+      const {result} = renderHook(
+        () => useInteractiveRole({onClick: () => {}}),
+        {wrapper: withRole('link')},
+      );
+      expect(result.current).toBe('button');
+    });
+
+    // NOTE — documents current behavior. The `isDisabled` JSDoc says a disabled
+    // href "falls back to button", but the implementation only *skips* the link
+    // branch when disabled — it does not force a button. With no onClick and no
+    // context override, a disabled href therefore resolves to "inert", not
+    // "button". (The doc-promised "button" fallback only holds when an onClick
+    // or a context override is also present — see the two tests below.)
+    it('a disabled href with nothing else resolves to "inert" (not "button" as the JSDoc implies)', () => {
+      const {result} = renderHook(() =>
+        useInteractiveRole({href: '/x', isDisabled: true}),
+      );
+      expect(result.current).toBe('inert');
+    });
+
+    it('a disabled href with an onClick resolves to "button" via the onClick branch', () => {
+      const {result} = renderHook(() =>
+        useInteractiveRole({href: '/x', isDisabled: true, onClick: () => {}}),
+      );
+      expect(result.current).toBe('button');
+    });
+
+    it('a disabled href with a context override falls through to that override', () => {
+      const {result} = renderHook(
+        () => useInteractiveRole({href: '/x', isDisabled: true}),
+        {wrapper: withRole('button')},
+      );
+      expect(result.current).toBe('button');
+    });
+
+    it('an "inert" context override is honored when nothing else is interactive', () => {
+      const {result} = renderHook(() => useInteractiveRole({}), {
+        wrapper: withRole('inert'),
+      });
+      expect(result.current).toBe('inert');
+    });
+
+    it('a null onClick is treated as absent (falls through to inert)', () => {
+      const {result} = renderHook(() => useInteractiveRole({onClick: null}));
+      expect(result.current).toBe('inert');
+    });
+
+    it('a null onClick still yields to a context override', () => {
+      const {result} = renderHook(() => useInteractiveRole({onClick: null}), {
+        wrapper: withRole('button'),
+      });
+      expect(result.current).toBe('button');
+    });
+  });
+});

package/src/Item/Item.tsx

@@ -470,9 +470,9 @@ export function Item({
   return (
     <Component
       ref={ref as React.Ref<never>}
+      {...restProps}
       aria-selected={isSelected || undefined}
       aria-disabled={isDisabled || undefined}
-      {...restProps}
       {...mergeProps(
         themeProps('item', {density, align}),
         stylex.props(

package/src/Layout/Layout.test.tsx

@@ -0,0 +1,285 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file Layout.test.tsx
+ * @input Uses vitest, @testing-library/react, Layout + layout contexts
+ * @output Characterization tests for the Layout page-shell component
+ * @position Testing; validates slot rendering, context provisioning, and
+ *   divider/padding/height wiring
+ *
+ * SYNC: When Layout.tsx changes, update tests to match new behavior
+ */
+
+import {describe, it, expect} from 'vitest';
+import {render, screen} from '@testing-library/react';
+import {use, createRef} from 'react';
+import {Layout} from './Layout';
+import {LayoutHeader} from './LayoutHeader';
+import {LayoutFooter} from './LayoutFooter';
+import {LayoutAreaContext} from './LayoutAreaContext';
+import {LayoutSlotsContext} from './LayoutSlotsContext';
+
+/** Reports which layout area it is rendered inside. */
+function AreaProbe({testid}: {testid: string}) {
+  const area = use(LayoutAreaContext);
+  return <span data-testid={testid}>{String(area)}</span>;
+}
+
+/** Reports the current LayoutSlots record as JSON. */
+function SlotsProbe() {
+  const slots = use(LayoutSlotsContext);
+  return <span data-testid="slots">{JSON.stringify(slots)}</span>;
+}
+
+/** The Layout root is the outermost element rendered by the component. */
+function root(container: HTMLElement): HTMLElement {
+  return container.firstElementChild as HTMLElement;
+}
+
+describe('Layout', () => {
+  describe('content / children resolution', () => {
+    it('renders the content prop', () => {
+      render(<Layout content={<div>main body</div>} />);
+      expect(screen.getByText('main body')).toBeInTheDocument();
+    });
+
+    it('renders children as a shorthand for the content slot', () => {
+      render(
+        <Layout>
+          <div>child body</div>
+        </Layout>,
+      );
+      expect(screen.getByText('child body')).toBeInTheDocument();
+    });
+
+    it('content wins when both content and children are provided', () => {
+      render(
+        <Layout content={<div>from-content</div>}>
+          <div>from-children</div>
+        </Layout>,
+      );
+      expect(screen.getByText('from-content')).toBeInTheDocument();
+      expect(screen.queryByText('from-children')).not.toBeInTheDocument();
+    });
+
+    it('renders an empty shell without crashing when no slots are given', () => {
+      const {container} = render(<Layout />);
+      expect(root(container)).toBeInTheDocument();
+    });
+  });
+
+  describe('slots', () => {
+    it('renders all four surrounding slots plus content', () => {
+      render(
+        <Layout
+          header={<div>the-header</div>}
+          start={<div>the-start</div>}
+          end={<div>the-end</div>}
+          footer={<div>the-footer</div>}
+          content={<div>the-content</div>}
+        />,
+      );
+      expect(screen.getByText('the-header')).toBeInTheDocument();
+      expect(screen.getByText('the-start')).toBeInTheDocument();
+      expect(screen.getByText('the-end')).toBeInTheDocument();
+      expect(screen.getByText('the-footer')).toBeInTheDocument();
+      expect(screen.getByText('the-content')).toBeInTheDocument();
+    });
+
+    it('does not render an area wrapper for an omitted slot', () => {
+      render(<Layout content={<AreaProbe testid="content" />} />);
+      // Only the content probe exists; header/start/end/footer probes absent.
+      expect(screen.getByTestId('content')).toHaveTextContent('content');
+    });
+  });
+
+  describe('LayoutAreaContext provisioning', () => {
+    it('tags each slot with its area name', () => {
+      render(
+        <Layout
+          header={<AreaProbe testid="h" />}
+          start={<AreaProbe testid="s" />}
+          end={<AreaProbe testid="e" />}
+          footer={<AreaProbe testid="f" />}
+          content={<AreaProbe testid="c" />}
+        />,
+      );
+      expect(screen.getByTestId('h')).toHaveTextContent('header');
+      expect(screen.getByTestId('s')).toHaveTextContent('start');
+      expect(screen.getByTestId('e')).toHaveTextContent('end');
+      expect(screen.getByTestId('f')).toHaveTextContent('footer');
+      expect(screen.getByTestId('c')).toHaveTextContent('content');
+    });
+  });
+
+  describe('LayoutSlotsContext provisioning', () => {
+    it('reports which slots are filled to descendants', () => {
+      render(
+        <Layout
+          header={<div>h</div>}
+          start={<div>s</div>}
+          content={<SlotsProbe />}
+        />,
+      );
+      const slots = JSON.parse(screen.getByTestId('slots').textContent ?? '{}');
+      expect(slots).toEqual({
+        hasHeader: true,
+        hasFooter: false,
+        hasStart: true,
+        hasEnd: false,
+      });
+    });
+
+    it('reports all-false when only content is present', () => {
+      render(<Layout content={<SlotsProbe />} />);
+      const slots = JSON.parse(screen.getByTestId('slots').textContent ?? '{}');
+      expect(slots).toEqual({
+        hasHeader: false,
+        hasFooter: false,
+        hasStart: false,
+        hasEnd: false,
+      });
+    });
+
+    it('reports every slot filled', () => {
+      render(
+        <Layout
+          header={<div>h</div>}
+          footer={<div>f</div>}
+          start={<div>s</div>}
+          end={<div>e</div>}
+          content={<SlotsProbe />}
+        />,
+      );
+      const slots = JSON.parse(screen.getByTestId('slots').textContent ?? '{}');
+      expect(slots).toEqual({
+        hasHeader: true,
+        hasFooter: true,
+        hasStart: true,
+        hasEnd: true,
+      });
+    });
+  });
+
+  describe('theme props (class + data attributes)', () => {
+    it('renders the astryx-layout class on the root', () => {
+      const {container} = render(<Layout content={<div>x</div>} />);
+      expect(root(container).className).toContain('astryx-layout');
+    });
+
+    it('defaults data-height to "fill"', () => {
+      const {container} = render(<Layout content={<div>x</div>} />);
+      expect(root(container).getAttribute('data-height')).toBe('fill');
+    });
+
+    it('reflects height="auto" as data-height', () => {
+      const {container} = render(
+        <Layout height="auto" content={<div>x</div>} />,
+      );
+      expect(root(container).getAttribute('data-height')).toBe('auto');
+    });
+  });
+
+  describe('defaultHasDividers → LayoutDividerContext', () => {
+    it('makes headers default to having a divider', () => {
+      render(
+        <Layout
+          defaultHasDividers
+          header={<LayoutHeader>H</LayoutHeader>}
+          content={<div>c</div>}
+        />,
+      );
+      const header = screen.getByText('H').closest('[data-divider]');
+      expect(header).not.toBeNull();
+      expect(header?.getAttribute('data-divider')).toBe('true');
+    });
+
+    it('makes footers default to having a divider', () => {
+      const {container} = render(
+        <Layout
+          defaultHasDividers
+          footer={<LayoutFooter>F</LayoutFooter>}
+          content={<div>c</div>}
+        />,
+      );
+      expect(
+        container.querySelector('.astryx-layout-footer[data-divider]'),
+      ).not.toBeNull();
+    });
+
+    it('does not force dividers when defaultHasDividers is unset', () => {
+      const {container} = render(
+        <Layout
+          header={<LayoutHeader>H</LayoutHeader>}
+          content={<div>c</div>}
+        />,
+      );
+      expect(
+        container.querySelector('.astryx-layout-header[data-divider]'),
+      ).toBeNull();
+    });
+
+    it('an explicit hasDivider={false} on a header overrides the context default', () => {
+      const {container} = render(
+        <Layout
+          defaultHasDividers
+          header={<LayoutHeader hasDivider={false}>H</LayoutHeader>}
+          content={<div>c</div>}
+        />,
+      );
+      expect(
+        container.querySelector('.astryx-layout-header[data-divider]'),
+      ).toBeNull();
+    });
+  });
+
+  describe('padding / contentWidth', () => {
+    it('accepts a numeric padding step without crashing', () => {
+      const {container} = render(<Layout padding={4} content={<div>c</div>} />);
+      expect(root(container)).toBeInTheDocument();
+    });
+
+    it('accepts padding={0} (full bleed) without crashing', () => {
+      const {container} = render(<Layout padding={0} content={<div>c</div>} />);
+      expect(root(container)).toBeInTheDocument();
+    });
+
+    it('accepts a numeric contentWidth without crashing', () => {
+      const {container} = render(
+        <Layout contentWidth={640} content={<div>c</div>} />,
+      );
+      expect(root(container)).toBeInTheDocument();
+    });
+
+    it('accepts a string contentWidth without crashing', () => {
+      const {container} = render(
+        <Layout contentWidth="60ch" content={<div>c</div>} />,
+      );
+      expect(root(container)).toBeInTheDocument();
+    });
+  });
+
+  describe('styling & ref', () => {
+    it('forwards ref to the root div', () => {
+      const ref = createRef<HTMLDivElement>();
+      render(<Layout ref={ref} content={<div>c</div>} />);
+      expect(ref.current).toBeInstanceOf(HTMLDivElement);
+      expect(ref.current?.className).toContain('astryx-layout');
+    });
+
+    it('merges a caller className onto the root', () => {
+      const {container} = render(
+        <Layout className="my-layout" content={<div>c</div>} />,
+      );
+      expect(root(container).className).toContain('my-layout');
+      expect(root(container).className).toContain('astryx-layout');
+    });
+
+    it('merges a caller inline style onto the root', () => {
+      const {container} = render(
+        <Layout style={{outline: '1px solid red'}} content={<div>c</div>} />,
+      );
+      expect(root(container).style.outline).toBe('1px solid red');
+    });
+  });
+});