@astryxdesign/core 0.7.5 → 0.7.6-canary.00507ba

package/src/Badge/__tests__/BadgeLargerText.a11y.chromium.spec.ts

@@ -0,0 +1,260 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file BadgeLargerText.a11y.chromium.spec.ts
+ * @input The `Core/Badge` Larger Text story in a built Storybook, in Chromium
+ *   at an iPhone's page size (402 x 714), under the neutral theme and under
+ *   Butter (whose badges set their own height).
+ * @output Real-layout proof that a badge with a label is never shorter than one
+ *   line of it, and that nothing else about its size changes: at the default
+ *   size its geometry is exactly what it is without that minimum (the theme's
+ *   height, Butter's own 30px included); when its text grows (here by raising
+ *   the supporting text size on a wrapper) the pill grows with the label,
+ *   contains it and shows all
+ *   of it, with no width floor; a color-only badge keeps its size at every
+ *   text size; and where there is too little room (a crowded row, a cell
+ *   narrower than one line) the badge shrinks and stays inside
+ *   (component:Badge FR3).
+ * @position Run with `pnpm test:a11y-contract`. Line boxes and box sizes need
+ *   a real layout engine; jsdom has neither.
+ */
+
+import {expect, test, type Page} from '@playwright/test';
+import {
+  DEFAULT_STORYBOOK_DIR,
+  serveStorybook,
+  type StaticServer,
+} from '@astryxdesign/a11y-spec/storybook';
+
+// A phone's page size (an iPhone 17 Pro's): at a desktop width every row fits
+// on one line and a squeezed, truncated label would go unseen.
+test.use({viewport: {width: 402, height: 714}});
+
+let storybook: StaticServer;
+test.beforeAll(async () => {
+  storybook = await serveStorybook(
+    process.env.ASTRYX_STORYBOOK_DIR ?? DEFAULT_STORYBOOK_DIR,
+  );
+});
+test.afterAll(async () => {
+  await storybook?.close();
+});
+
+interface BadgeBox {
+  label: string;
+  /** The label is cut with an ellipsis: wider than the room it has. */
+  truncated: boolean;
+  width: number;
+  height: number;
+  lineHeight: number;
+  labelTop: number;
+  labelBottom: number;
+  top: number;
+  bottom: number;
+}
+
+async function badgesIn(page: Page, size: string): Promise<BadgeBox[]> {
+  return page.getByTestId(`badge-row-${size}`).evaluate(row =>
+    [...row.querySelectorAll<HTMLElement>('.astryx-badge')].map(badge => {
+      const box = badge.getBoundingClientRect();
+      const label = badge.lastElementChild as HTMLElement;
+      const labelBox = label.getBoundingClientRect();
+      return {
+        label: label.textContent ?? '',
+        truncated: label.scrollWidth > label.clientWidth,
+        width: box.width,
+        height: box.height,
+        lineHeight: Number.parseFloat(getComputedStyle(badge).lineHeight),
+        labelTop: labelBox.top,
+        labelBottom: labelBox.bottom,
+        top: box.top,
+        bottom: box.bottom,
+      };
+    }),
+  );
+}
+
+/**
+ * Each badge's size in the row, with and without the minimum this change adds:
+ * the "without" pass sets `min-height` back to what it was before (`auto`) on
+ * the element itself.
+ */
+async function withAndWithoutMinimums(page: Page, size: string) {
+  return page.getByTestId(`badge-row-${size}`).evaluate(row =>
+    [...row.querySelectorAll<HTMLElement>('.astryx-badge')].map(badge => {
+      const measure = () => {
+        const box = badge.getBoundingClientRect();
+        return {width: box.width, height: box.height};
+      };
+      const withMinimums = measure();
+      badge.style.minHeight = 'auto';
+      const without = measure();
+      badge.style.removeProperty('min-height');
+      return {label: badge.textContent ?? '', withMinimums, without};
+    }),
+  );
+}
+
+/**
+ * Each badge's natural width in the row: its content's width plus its own
+ * inline padding, measured with no minimum or maximum width and sized to its
+ * content (`max-content`). A badge with room is exactly this wide, so a width
+ * floor (or a stretch) shows up as a difference.
+ */
+async function naturalWidths(page: Page, size: string): Promise<number[]> {
+  return page.getByTestId(`badge-row-${size}`).evaluate(row =>
+    [...row.querySelectorAll<HTMLElement>('.astryx-badge')].map(badge => {
+      const {style} = badge;
+      style.setProperty('width', 'max-content');
+      style.setProperty('min-width', '0px');
+      style.setProperty('max-width', 'none');
+      const width = badge.getBoundingClientRect().width;
+      style.removeProperty('width');
+      style.removeProperty('min-width');
+      style.removeProperty('max-width');
+      return width;
+    }),
+  );
+}
+
+/** The neutral theme's badge height: its `--spacing-5`. */
+async function spacing5(page: Page): Promise<number> {
+  return page.evaluate(() => {
+    const probe = document.createElement('div');
+    probe.style.height = 'var(--spacing-5)';
+    document.body.append(probe);
+    const height = probe.getBoundingClientRect().height;
+    probe.remove();
+    return height;
+  });
+}
+
+const THEMES = [
+  {name: 'neutral', badgeHeight: spacing5},
+  // Butter's own badge height (themes/butter/src/butterTheme.ts,
+  // `components.badge.base.height`).
+  {name: 'butter', badgeHeight: async () => 30},
+];
+
+for (const {name, badgeHeight} of THEMES) {
+  test.describe(`a badge and its text, ${name} theme`, () => {
+    test.beforeEach(async ({page}) => {
+      await page.goto(
+        `${storybook.origin}/iframe.html?id=core-badge--larger-text&viewMode=story&globals=astryxTheme:${name}`,
+      );
+      await expect(page.getByTestId('badge-row-default')).toBeVisible();
+    });
+
+    test('keeps its exact geometry and the theme height at the default text size', async ({
+      page,
+    }) => {
+      const height = await badgeHeight(page);
+      const natural = await naturalWidths(page, 'default');
+      for (const [index, badge] of (
+        await withAndWithoutMinimums(page, 'default')
+      ).entries()) {
+        // The new minimum does not bind at the default size …
+        expect(badge.withMinimums.width, badge.label).toBeCloseTo(
+          badge.without.width,
+          2,
+        );
+        expect(badge.withMinimums.height, badge.label).toBeCloseTo(
+          badge.without.height,
+          2,
+        );
+        // … so the badge is as tall as its theme says, and as wide as its
+        // content and padding: a color-only badge is its padding alone
+        // (component:Badge FR1).
+        expect(badge.withMinimums.height, badge.label).toBeCloseTo(height, 1);
+        expect(badge.withMinimums.width, badge.label).toBeCloseTo(
+          natural[index],
+          1,
+        );
+      }
+      for (const badge of await badgesIn(page, 'default')) {
+        expect(badge.truncated, badge.label).toBe(false);
+      }
+    });
+
+    test('stays inside a cell narrower than one line of its text', async ({
+      page,
+    }) => {
+      const boxes = await page.getByTestId('narrow-cell').evaluateAll(cells =>
+        cells.map(cell => {
+          const badge = cell.querySelector('.astryx-badge');
+          const own = cell.getBoundingClientRect();
+          const box = badge?.getBoundingClientRect();
+          return {
+            label: cell.textContent ?? '',
+            cell: [own.left, own.right],
+            badge: box == null ? null : [box.left, box.right],
+          };
+        }),
+      );
+      expect(boxes).toHaveLength(1);
+      for (const {label, cell, badge} of boxes) {
+        expect(badge, label).not.toBeNull();
+        if (badge != null) {
+          expect(badge[0], label).toBeGreaterThanOrEqual(cell[0] - 0.5);
+          expect(badge[1], label).toBeLessThanOrEqual(cell[1] + 0.5);
+        }
+      }
+    });
+
+    test('stays inside a crowded row at 2.5rem text', async ({page}) => {
+      // A title that cannot shrink leaves the count less room than one line of
+      // its text is tall: the badge keeps its own width there, where a
+      // one-line minimum width would push it out of the row.
+      const box = await page.getByTestId('badge-row-crowded').evaluate(row => {
+        const badge = row.querySelector('.astryx-badge');
+        const own = row.getBoundingClientRect();
+        const rect = badge?.getBoundingClientRect();
+        return {
+          row: [own.left, own.right],
+          badge: rect == null ? null : [rect.left, rect.right],
+        };
+      });
+      expect(box.badge).not.toBeNull();
+      if (box.badge != null) {
+        expect(box.badge[1]).toBeLessThanOrEqual(box.row[1] + 0.5);
+      }
+    });
+
+    for (const size of ['1.25rem', '2.5rem']) {
+      test(`grows with its label at ${size} text, shows all of it, and has no width floor`, async ({
+        page,
+      }) => {
+        const height = await badgeHeight(page);
+        const badges = await badgesIn(page, size);
+        const natural = await naturalWidths(page, size);
+        expect(natural).toHaveLength(badges.length);
+        for (const [index, badge] of badges.entries()) {
+          if (badge.label === '') {
+            // A color-only badge has no text to hold: it keeps its theme
+            // height and its padding-only width (component:Badge FR1).
+            expect(badge.height).toBeCloseTo(height, 1);
+            expect(badge.width).toBeCloseTo(natural[index], 1);
+            continue;
+          }
+          // At least one line of its own text tall …
+          expect(badge.height, badge.label).toBeGreaterThanOrEqual(
+            badge.lineHeight - 0.5,
+          );
+          // … so the label stays inside the pill …
+          expect(badge.labelTop, badge.label).toBeGreaterThanOrEqual(
+            badge.top - 0.5,
+          );
+          expect(badge.labelBottom, badge.label).toBeLessThanOrEqual(
+            badge.bottom + 0.5,
+          );
+          // … whole rather than cut to an ellipsis, in rows that wrap as a
+          // layout must at these sizes …
+          expect(badge.truncated, badge.label).toBe(false);
+          // … and with no width floor: as wide as its own content and padding,
+          // a one-character count included.
+          expect(badge.width, badge.label).toBeCloseTo(natural[index], 1);
+        }
+      });
+    }
+  });
+}

package/src/BottomSheet/BottomSheet.test.tsx

@@ -1045,6 +1045,52 @@ describe('BottomSheet', () => {
   });
 
   describe('swipe to dismiss', () => {
+    it("a sheet opened from inside another sheet's content drags to dismiss by its own handle, and the covered host neither drags nor takes the pointer (FR6, FR7)", () => {
+      const onInnerOpenChange = vi.fn();
+      const onOuterOpenChange = vi.fn();
+      render(
+        <BottomSheet isOpen onOpenChange={onOuterOpenChange} label="Outer">
+          Outer content
+          <BottomSheet isOpen onOpenChange={onInnerOpenChange} label="Inner">
+            Inner content
+          </BottomSheet>
+        </BottomSheet>,
+      );
+      const dialogs = screen.getAllByRole('dialog', {hidden: true});
+      expect(dialogs).toHaveLength(2);
+      const [outerDialog, innerDialog] = dialogs;
+      // The inner sheet's dialog is rendered inside the outer sheet's body,
+      // so its events bubble through the outer body's gesture listeners.
+      expect(outerDialog.contains(innerDialog)).toBe(true);
+      const outerPanel = outerDialog.querySelector<HTMLElement>(
+        ':scope > .astryx-bottom-sheet',
+      )!;
+      const outerBody = outerPanel.querySelector<HTMLElement>(
+        ':scope > :not([aria-hidden])',
+      )!;
+      const innerHandle = innerDialog.querySelector<HTMLElement>(
+        '.astryx-bottom-sheet > [aria-hidden="true"]',
+      )!;
+      // `setPointerCapture` is a prototype stub here, so record who captures.
+      const captured: Element[] = [];
+      const capture = vi
+        .spyOn(Element.prototype, 'setPointerCapture')
+        .mockImplementation(function (this: Element) {
+          captured.push(this);
+        });
+      drag(innerHandle, [{y: 0}, {y: 40}, {y: 120}], 'touch');
+      capture.mockRestore();
+      // The inner sheet's own drag ran to its dismissal.
+      expect(onInnerOpenChange).toHaveBeenCalledWith(false);
+      // The covered host saw the same pointer bubble up and did nothing with
+      // it: no drag of its own (its panel keeps its resting transform) and no
+      // pointer capture, which would have cancelled the inner handle's drag.
+      expect(onOuterOpenChange).not.toHaveBeenCalled();
+      expect(captured).toContain(innerHandle);
+      expect(captured).not.toContain(outerBody);
+      expect(outerPanel.style.transform).toBe('');
+    });
+
     it('requests close when dragged past the dismiss threshold', () => {
       const onOpenChange = vi.fn();
       render(

package/src/BottomSheet/BottomSheet.tsx

@@ -99,7 +99,7 @@ import {
 } from '../theme/tokens.stylex';
 import {useDevWarning} from '../hooks/useDevWarning';
 import {useScrollLock} from '../hooks/useScrollLock';
-import {mergeProps} from '../utils';
+import {mergeProps} from '../utils/mergeProps';
 import {LayerDepthProvider} from '../Layer/LayerDepthContext';
 import {ModalAnnounceProvider} from '../hooks/ModalAnnounceProvider';
 import {useModalOutlet} from '../Layer/modalOutlet';

package/src/BottomSheet/BottomSheetPanel.tsx

@@ -48,7 +48,8 @@ import {
   sizeVars,
   spacingVars,
 } from '../theme/tokens.stylex';
-import {mergeProps, themeProps} from '../utils';
+import {mergeProps} from '../utils/mergeProps';
+import {themeProps} from '../utils/themeProps';
 import {focusOutlineStyles} from '../utils/focusOutline.stylex';
 import {layerTextReset} from '../Layer/layerTextReset.stylex';
 import {layerStructureReset} from '../Layer/layerStructureReset.stylex';

package/src/BottomSheet/useSheetGestures.test.ts

@@ -12,6 +12,7 @@
 import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest';
 import {act, renderHook} from '@testing-library/react';
 import {
+  isInsideNestedLayer,
   useSheetGestures,
   type UseSheetGesturesOptions,
 } from './useSheetGestures';
@@ -106,6 +107,27 @@ function up(hook: Hook, y: number, t: number, target: HTMLElement) {
   );
 }
 
+describe('isInsideNestedLayer', () => {
+  it("is true for a target inside a <dialog> rendered within the body, and false for the body's own content", () => {
+    const body = document.createElement('div');
+    const own = document.createElement('button');
+    body.append(own);
+    const nested = document.createElement('dialog');
+    const nestedHandle = document.createElement('div');
+    nested.append(nestedHandle);
+    body.append(nested);
+    expect(isInsideNestedLayer(own, body)).toBe(false);
+    expect(isInsideNestedLayer(body, body)).toBe(false);
+    expect(isInsideNestedLayer(nestedHandle, body)).toBe(true);
+    expect(isInsideNestedLayer(nested, body)).toBe(true);
+    // A dialog above the body (the sheet's own) does not count.
+    const ownDialog = document.createElement('dialog');
+    ownDialog.append(body);
+    expect(isInsideNestedLayer(own, body)).toBe(false);
+    expect(isInsideNestedLayer(null, body)).toBe(false);
+  });
+});
+
 describe('useSheetGestures', () => {
   it('dismisses on a fast downward flick (swipe-to-close)', () => {
     const {hook, onDismiss} = setup({snapHeights: () => [200]});
@@ -1213,6 +1235,36 @@ describe('useSheetGestures', () => {
       expect(hook.result.current.isDragging).toBe(true);
     });
 
+    it('leaves a touch that starts inside a nested <dialog> to that layer', () => {
+      // A sheet opened from this sheet's content renders its <dialog> inside
+      // the body, so its touches bubble here. The same pull-down from the
+      // body's own content promotes (see above); from the nested layer it
+      // must not.
+      const {hook} = setup({snapHeights: () => [200]});
+      const {body} = makeNested({
+        bodyScrollTop: 0,
+        innerScrollTop: 0,
+        innerScrollHeight: 200,
+      });
+      const nested = document.createElement('dialog');
+      const nestedHandle = document.createElement('div');
+      nested.appendChild(nestedHandle);
+      body.appendChild(nested);
+      act(() => hook.result.current.sheetRef(body));
+      act(() => hook.result.current.bodyProps.ref(body));
+      let start: Event | undefined;
+      let pull: Event | undefined;
+      act(() => {
+        start = touchOn(nestedHandle, body, 'touchstart', 100);
+        pull = touchOn(nestedHandle, body, 'touchmove', 160);
+      });
+      expect(start?.defaultPrevented).toBe(false);
+      expect(pull?.defaultPrevented).toBe(false);
+      expect(hook.result.current.isDragging).toBe(false);
+      expect(liveOffset(hook)).toBe(0);
+      expect(body.style.transform).toBe('');
+    });
+
     it('leaves a pull-up to a nested scroller with content below', () => {
       const {hook} = setup({snapHeights: () => [200]});
       const {body, tile} = makeNested({bodyScrollTop: 0, innerScrollTop: 100});

package/src/BottomSheet/useSheetGestures.ts

@@ -235,6 +235,33 @@ function isBlockScroller(element: HTMLElement): boolean {
   return overflowY === 'auto' || overflowY === 'scroll';
 }
 
+/**
+ * Whether a gesture that lands on `target` began inside another layer
+ * rendered in this sheet's content — a `<dialog>` between the target and the
+ * body. A sheet opened from inside a sheet's content, a Dialog opened there,
+ * renders its dialog as a descendant of the host's body, so its pointer and
+ * touch events bubble through the host's gesture listeners. That gesture is
+ * the layer's own: the host must neither arm a drag on it nor take pointer
+ * capture for it, which would cancel the drag the layer's own handle began
+ * (`component:BottomSheet` FR7: a swipe reaches only the top sheet of a
+ * stack; FR6: a covered sheet is blocked).
+ */
+export function isInsideNestedLayer(
+  target: EventTarget | null,
+  body: HTMLElement,
+): boolean {
+  for (
+    let element = target instanceof Element ? target : null;
+    element != null && element !== body;
+    element = element.parentElement
+  ) {
+    if (element.localName === 'dialog') {
+      return true;
+    }
+  }
+  return false;
+}
+
 /**
  * The scrollers a gesture that lands on `target` can scroll, innermost first
  * and the body last: every scrollable box between the target and the body,
@@ -1328,10 +1355,13 @@ export function useSheetGestures({
     if (event.button !== 0 || !event.isPrimary) {
       return;
     }
-    const scrollers = scrollChainUnder(
-      event.target,
-      event.currentTarget as HTMLElement,
-    );
+    const body = event.currentTarget as HTMLElement;
+    // A gesture inside a layer this sheet hosts belongs to that layer.
+    if (isInsideNestedLayer(event.target, body)) {
+      armedBodyRef.current = null;
+      return;
+    }
+    const scrollers = scrollChainUnder(event.target, body);
     if (!chainAtTop(scrollers)) {
       armedBodyRef.current = null;
       return;
@@ -1465,8 +1495,9 @@ export function useSheetGestures({
       // At the top, a pull DOWN hands off (collapse); at the bottom, a pull UP
       // hands off (expand). A gesture that starts mid-content is an ordinary
       // scroll, but it is tracked all the same: the scroller can run out of
-      // content while the finger is still down (see onTouchMove).
-      if (!touch) {
+      // content while the finger is still down (see onTouchMove). A touch
+      // inside a layer this sheet hosts is that layer's, never tracked here.
+      if (!touch || isInsideNestedLayer(event.target, body)) {
         touchDragRef.current = null;
         return;
       }

package/src/Breadcrumbs/__tests__/Breadcrumbs.a11y.chromium.spec.ts

@@ -97,15 +97,27 @@ async function runState(
   });
 }
 
-test('every Breadcrumb expectation is exercised by at least one state', async ({
-  page,
-}) => {
-  const cdp = await page.context().newCDPSession(page);
+// Checking coverage runs every state again, which on a loaded runner nears
+// the per-test timeout as one test. It runs as one serial part per state,
+// sharing their results, then one check over all of them.
+test.describe('every Breadcrumb expectation is exercised by at least one state', () => {
+  test.describe.configure({mode: 'serial'});
   const results: BindingResult[] = [];
+
   for (const state of BREADCRUMB_A11Y_STATES) {
-    results.push(await runState(page, cdp, state));
+    test(`runs ${state.id}`, async ({page}) => {
+      const cdp = await page.context().newCDPSession(page);
+      results.push(await runState(page, cdp, state));
+    });
   }
-  expect(neverExercised(results)).toEqual([]);
+
+  test('no expectation is left unexercised', () => {
+    // Every part ran in this worker; this test alone proves nothing.
+    expect(results.map(result => result.state).sort()).toEqual(
+      BREADCRUMB_A11Y_STATES.map(state => state.id).sort(),
+    );
+    expect(neverExercised(results)).toEqual([]);
+  });
 });
 
 for (const state of BREADCRUMB_A11Y_STATES) {

package/src/Button/Button.tsx

@@ -43,8 +43,8 @@ import {
   shadowVars,
   focusVars,
 } from '../theme/tokens.stylex';
-import {Spinner} from '../Spinner';
-import {VisuallyHidden} from '../VisuallyHidden';
+import {Spinner} from '../Spinner/Spinner';
+import {VisuallyHidden} from '../VisuallyHidden/VisuallyHidden';
 import {IconDefaultSizeProvider} from '../Icon/IconDefaultSizeContext';
 import {iconBoxSizeStyles, type IconSize} from '../Icon/IconSize.stylex';
 
@@ -57,7 +57,7 @@ import {
   groupStyles as inputGroupStyles,
   inputGroupItemProps,
 } from '../InputGroup/groupStyles';
-import {mergeProps} from '../utils';
+import {mergeProps} from '../utils/mergeProps';
 import {useMergedRefs} from '../hooks/useMergedRefs';
 import {useLinkComponent} from '../Link/useLinkComponent';
 import type {LinkComponentType} from '../Link/types';
@@ -65,7 +65,7 @@ import {themeProps} from '../utils/themeProps';
 import {focusOutlineProps} from '../utils/focusOutline.stylex';
 import {interactionOverlayStyles} from '../utils/interactionOverlay.stylex';
 import {usePressFeedback} from '../hooks/usePressFeedback';
-import {useTranslator} from '../i18n';
+import {useTranslator} from '../i18n/useTranslator';
 import type {ButtonVariantMap} from './index';
 
 /**