@astryxdesign/core 0.7.5 → 0.7.6-canary.0ef60dd

package/src/ProgressBar/ProgressBar.test.tsx

@@ -140,9 +140,9 @@ describe('ProgressBar', () => {
     expect(progressbar).toHaveAttribute('aria-valuenow', '0');
     expect(progressbar.getAttribute('aria-valuetext')).toBe('0%');
     expect(screen.queryByText(/NaN/)).not.toBeInTheDocument();
-    // The fill width must be a real percentage, not "NaN%".
+    // The filled share must be a real percentage, not "NaN%".
     const fill = progressbar.firstElementChild as HTMLElement;
-    expect(fill.style.width).toBe('0%');
+    expect(fill.style.getPropertyValue('--_progress-bar-fill')).toBe('0%');
   });
 
   it('treats a NaN max as an empty range instead of leaking "NaN"', () => {
@@ -653,16 +653,16 @@ describe('ProgressBar', () => {
       );
       const progressbar = screen.getByRole('progressbar');
       const fill = progressbar.firstElementChild as HTMLElement;
-      expect(fill.style.width).toBe('50%');
+      expect(fill.style.getPropertyValue('--_progress-bar-fill')).toBe('50%');
       expect(fill.classList.contains('astryx-progress-bar-mark')).toBe(false);
       expect(container.querySelectorAll(MARK)).toHaveLength(1);
     });
 
-    it('does not clip marks in determinate mode (track carries no overflow:hidden)', () => {
-      // In determinate mode the track must NOT clip, so a themed taller mark
-      // can overhang the bar. (Indeterminate mode re-adds the clip — covered
-      // separately — but marks are suppressed there, so nothing overhangs.)
-      render(
+    it('keeps marks outside the clipping track, so a themed tall mark can still overhang', () => {
+      // The track clips its fill to the rounded rail. Marks sit beside the
+      // track in its unclipped container, never inside it, so a theme that
+      // makes a mark taller than the bar still sees it overhang both edges.
+      const {container} = render(
         <ProgressBar
           value={50}
           label="Progress"
@@ -670,9 +670,36 @@ describe('ProgressBar', () => {
         />,
       );
       const progressbar = screen.getByRole('progressbar');
-      const trackClass = Array.from(progressbar.classList).find(c =>
-        c.startsWith('x'),
-      );
+      const marks = Array.from(container.querySelectorAll<HTMLElement>(MARK));
+      expect(marks).toHaveLength(1);
+      let css = '';
+      for (const sheet of Array.from(document.styleSheets)) {
+        for (const rule of Array.from(sheet.cssRules)) {
+          css += rule.cssText + '\n';
+        }
+      }
+      const clips = (el: Element) =>
+        Array.from(el.classList).some(cls =>
+          new RegExp(`\\.${cls}\\b[^{]*\\{[^}]*overflow:\\s*hidden`, 'i').test(
+            css,
+          ),
+        );
+      for (const mark of marks) {
+        expect(progressbar.contains(mark)).toBe(false);
+        // No ancestor between the mark and the bar's root clips it.
+        let node = mark.parentElement;
+        while (node != null && node !== container) {
+          expect(clips(node)).toBe(false);
+          node = node.parentElement;
+        }
+      }
+    });
+
+    it('clips the track in determinate mode (the fill slides in from the start)', () => {
+      // The determinate fill spans the whole track and is moved back by the
+      // unfilled share; the track's clip keeps the moved-out part hidden.
+      render(<ProgressBar value={30} label="Progress" />);
+      const progressbar = screen.getByRole('progressbar');
       let css = '';
       for (const sheet of Array.from(document.styleSheets)) {
         try {
@@ -683,34 +710,83 @@ describe('ProgressBar', () => {
           // ignore cross-origin sheets
         }
       }
-      css += Array.from(document.querySelectorAll('style'))
-        .map(s => s.textContent || '')
-        .join('\n');
-      // The atomic class that would set overflow:hidden must not be applied to
-      // the track. Sanity-check the bar still rendered with a StyleX class.
-      expect(trackClass).toBeDefined();
-      // No rule targeting the track's classes sets overflow:hidden. (StyleX
-      // atomic classes are unique per declaration; if overflow:hidden were on
-      // the track we'd see it applied. We assert the track element's computed
-      // intent by checking no overflow:hidden atomic is in its class list's
-      // rules — simplest robust check: the track style object omits it.)
       const trackHasOverflowHidden = Array.from(progressbar.classList).some(
-        cls => {
-          const re = new RegExp(
-            `\\.${cls}\\b[^{]*\\{[^}]*overflow:\\s*hidden`,
-            'i',
-          );
-          return re.test(css);
-        },
+        cls =>
+          new RegExp(`\\.${cls}\\b[^{]*\\{[^}]*overflow:\\s*hidden`, 'i').test(
+            css,
+          ),
       );
-      expect(trackHasOverflowHidden).toBe(false);
+      expect(trackHasOverflowHidden).toBe(true);
+    });
+
+    it('moves the determinate fill with a transform, not its width, except under forced colors', () => {
+      // A width transition lays out and repaints on the main thread every
+      // frame, so it stalls while a script runs; a transform transition runs
+      // on the compositor. The fill spans the track and its leading edge sits
+      // at the filled share, mirrored in RTL.
+      render(<ProgressBar value={30} label="Progress" />);
+      const fill = screen.getByRole('progressbar')
+        .firstElementChild as HTMLElement;
+      // The stylesheet's rules, apart and under forced colors.
+      let css = '';
+      let forcedCss = '';
+      const collect = (rules: CSSRuleList, forced: boolean) => {
+        for (const rule of Array.from(rules)) {
+          if ('cssRules' in rule && 'conditionText' in rule) {
+            collect(
+              (rule as CSSMediaRule).cssRules,
+              forced ||
+                /forced-colors:\s*active/.test(
+                  (rule as CSSMediaRule).conditionText,
+                ),
+            );
+          } else if (forced) {
+            forcedCss += rule.cssText + '\n';
+          } else {
+            css += rule.cssText + '\n';
+          }
+        }
+      };
+      for (const sheet of Array.from(document.styleSheets)) {
+        collect(sheet.cssRules, false);
+      }
+      const declarationsIn = (text: string) =>
+        Array.from(fill.classList)
+          .flatMap(cls =>
+            Array.from(
+              text.matchAll(new RegExp(`\\.${cls}\\b[^{]*\\{([^}]*)\\}`, 'g')),
+              m => m[1].trim(),
+            ),
+          )
+          .join('\n');
+      const joined = declarationsIn(css);
+      expect(fill.style.width).toBe('');
+      expect(fill.style.getPropertyValue('--_progress-bar-fill')).toBe('30%');
+      expect(joined).toMatch(/width:\s*100%/);
+      expect(joined).toMatch(/transition-property:\s*transform/);
+      expect(joined).not.toMatch(/transition-property:\s*width/);
+      expect(joined).toMatch(/will-change:\s*transform/);
+      expect(joined).toMatch(
+        /transform:\s*translateX\(calc\(var\(--_progress-bar-fill,\s*0%\) - 100%\)\)/,
+      );
+      expect(css).toMatch(
+        // The bar's own direction (`:dir(rtl)`), not any RTL ancestor.
+        /:dir\(rtl\)[^{]*\{[^}]*transform:\s*translateX\(calc\(100% - var\(--_progress-bar-fill,\s*0%\)\)\)/,
+      );
+      // Under forced colors the fill is sized to the value instead, so the
+      // track's clip never cuts its CanvasText outline (theme-tokens INV11);
+      // the Chromium spec checks the drawn outline.
+      const forced = declarationsIn(forcedCss);
+      expect(forced).toMatch(/width:\s*var\(--_progress-bar-fill,\s*0%\)/);
+      expect(forced).toMatch(/transform:\s*none/);
+      expect(forced).toMatch(/transition-property:\s*width/);
+      expect(forced).toMatch(/will-change:\s*auto/);
     });
 
     it('clips the track in indeterminate mode (the sliding fill must not escape)', () => {
       // Regression: the indeterminate fill slides from translateX -100% to
       // 250%, deliberately overshooting the track, and relies on the track
-      // clipping it to the visible window. Determinate mode drops the clip so
-      // marks can overhang — indeterminate mode must keep it.
+      // clipping it to the visible window.
       render(<ProgressBar isIndeterminate label="Loading" />);
       const progressbar = screen.getByRole('progressbar');
       let css = '';

package/src/ProgressBar/ProgressBar.tsx

@@ -17,7 +17,7 @@
  * - /packages/cli/assets/templates/blocks/components/ProgressBar/ (showcase blocks)
  */
 
-import {lazy, Suspense, useId} from 'react';
+import {lazy, Suspense, useId, type CSSProperties} from 'react';
 import * as stylex from '@stylexjs/stylex';
 
 import {
@@ -223,19 +223,37 @@ const styles = stylex.create({
     position: 'relative',
     width: '100%',
   },
-  // The semantic rail holds only the fill, which rounds its own corners.
+  // The semantic rail holds only the fill and clips it to the rounded rail:
+  // the determinate fill slides in from the inline-start side and the
+  // indeterminate one overshoots both ends. Marks live outside the track (in
+  // trackContainer), so the clip never cuts a themed tall mark.
   track: {
     width: '100%',
     height: '8px',
     backgroundColor: colorVars['--color-background-muted'],
     borderRadius: radiusVars['--radius-full'],
-  },
-  // The indeterminate fill overshoots the track on both sides and must be
-  // clipped to the visible rail. Marks are suppressed in this mode.
-  trackClipped: {
     overflow: 'hidden',
   },
+  // The determinate fill spans the whole track and slides along it with a
+  // transform, so a value change animates on the compositor and keeps moving
+  // while a script runs; animating `width` would lay out and repaint on the
+  // main thread every frame and stall with it. `--_progress-bar-fill` is the
+  // filled share of the track (set inline); the fill's leading edge sits
+  // exactly there, mirrored in RTL. The mirror follows the bar's own
+  // direction (`:dir(rtl)`, the nearest `dir`), not any RTL ancestor, so a bar
+  // in an LTR region of an RTL page fills from the left like its label and
+  // marks. The layer is declared up front so Safari has the whole bar painted
+  // before it first moves.
+  //
+  // Under forced colors the fill is sized to the value instead (its `width`,
+  // no transform), as before: the track's clip would cut the CanvasText
+  // outline's start cap off a slid fill, and that outline is what keeps the
+  // fill's shape visible there (architecture:theme-tokens INV11).
   fill: {
+    width: {
+      default: '100%',
+      '@media (forced-colors: active)': 'var(--_progress-bar-fill, 0%)',
+    },
     height: '100%',
     // Forced colors replace status fills with Canvas; this boundary keeps the
     // fill's shape visible (architecture:theme-tokens INV11).
@@ -247,8 +265,32 @@ const styles = stylex.create({
     },
     outlineOffset: {default: null, '@media (forced-colors: active)': '-1px'},
     borderRadius: radiusVars['--radius-full'],
-    transitionProperty: 'width',
-    transitionDuration: durationVars['--duration-medium'],
+    transform: {
+      default: 'translateX(calc(var(--_progress-bar-fill, 0%) - 100%))',
+      ':dir(rtl)': {
+        default: 'translateX(calc(100% - var(--_progress-bar-fill, 0%)))',
+        '@media (forced-colors: active)': 'none',
+      },
+      '@media (forced-colors: active)': 'none',
+    },
+    willChange: {
+      default: 'transform',
+      '@media (forced-colors: active)': 'auto',
+    },
+    transitionProperty: {
+      default: 'transform',
+      '@media (forced-colors: active)': 'width',
+    },
+    // Under reduced motion a new value lands at once, on every pointer: the
+    // fill never travels (design:reduced-motion DR1). The keys are the shared
+    // reduced-motion queries, a fine pointer's and a coarse pointer's, spelled
+    // as the record's other transitions spell them.
+    transitionDuration: {
+      default: durationVars['--duration-medium'],
+      '@media (prefers-reduced-motion: reduce) and (not (pointer: coarse))':
+        '0s',
+      '@media (prefers-reduced-motion: reduce) and (pointer: coarse)': '0s',
+    },
     transitionTimingFunction: easeVars['--ease-standard'],
   },
   indeterminateFill: {
@@ -383,6 +425,11 @@ const markOnTrackStyles = stylex.create({
   },
 });
 
+// `CSSProperties` has no index signature for custom properties, so the fill's
+// inline style — which publishes the filled share as the private
+// `--_progress-bar-fill` — needs this augmentation to typecheck.
+type FillStyle = CSSProperties & Record<'--_progress-bar-fill', string>;
+
 function defaultFormatValueLabel(value: number, max: number): string {
   const pct = max > 0 ? Math.round((value / max) * 100) : 0;
   return `${pct}%`;
@@ -462,6 +509,7 @@ export function ProgressBar({
   const showValueLabel = hasValueLabel && !isIndeterminate;
 
   const fillVariant = isDisabled ? 'disabled' : variant;
+  const fillStyle: FillStyle = {'--_progress-bar-fill': `${percentage}%`};
 
   // Marks make no sense without a determinate value, so they are only drawn
   // in determinate mode. Non-finite mark values are dropped; the rest are
@@ -536,7 +584,7 @@ export function ProgressBar({
           aria-valuetext={isIndeterminate ? undefined : valueText}
           {...mergeProps(
             themeProps('progress-bar-track'),
-            stylex.props(styles.track, isIndeterminate && styles.trackClipped),
+            stylex.props(styles.track),
           )}>
           {isIndeterminate ? (
             <div
@@ -554,7 +602,7 @@ export function ProgressBar({
                 themeProps('progress-bar-fill', {variant: fillVariant}),
                 stylex.props(styles.fill, variantStyles[fillVariant]),
               )}
-              style={{width: `${percentage}%`}}
+              style={fillStyle}
             />
           )}
         </div>

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

@@ -87,18 +87,30 @@ async function runState(
   });
 }
 
-test('every progressbar expectation is exercised by a ProgressBar 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 progressbar expectation is exercised by a ProgressBar state', () => {
+  test.describe.configure({mode: 'serial'});
   const results: BindingResult[] = [];
+
   for (const state of PROGRESSBAR_BINDING_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([]);
-  expect(unmatchedKnownFailures(PROGRESSBAR_KNOWN_FAILURES, 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(
+      PROGRESSBAR_BINDING_STATES.map(state => state.id).sort(),
+    );
+    expect(neverExercised(results)).toEqual([]);
+    expect(unmatchedKnownFailures(PROGRESSBAR_KNOWN_FAILURES, results)).toEqual(
+      [],
+    );
+  });
 });
 
 for (const state of PROGRESSBAR_BINDING_STATES) {