@astryxdesign/core 0.6.2-canary.bfee8a4 → 0.6.2-canary.c8d5849

package/src/__tests__/pressState.ts

@@ -0,0 +1,93 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file pressState.ts
+ * @input Uses document.styleSheets (populated by StyleX runtime injection)
+ * @output Exports rulesDeclaredFor and expectPressedArm test helpers
+ * @position Shared test helper for asserting a control paints a pressed state
+ *
+ * jsdom does not compute `:active` (there is no real pointer), so a component
+ * test asserts the next-best thing: that the StyleX dev runtime injected a
+ * rule, keyed to the element's own classes, that paints the design system's
+ * pressed overlay token while the control is pressed. The selector shape is
+ * deliberately not pinned — a press may be read off the element itself
+ * (`.x:active`) or off an ancestor scope marker (`.x:where(.marker:active *)`).
+ *
+ * SYNC: When modified, update this header.
+ */
+
+const PRESSED_TOKEN = '--color-overlay-pressed';
+
+function walk(list: CSSRuleList, visit: (rule: CSSRule) => void): void {
+  for (const rule of Array.from(list)) {
+    visit(rule);
+    const nested = (rule as CSSGroupingRule).cssRules;
+    if (nested != null) {
+      walk(nested, visit);
+    }
+  }
+}
+
+/**
+ * Every injected style rule (rules nested in `@media` included) whose selector
+ * names one of the element's classes, as `selector {declarations}` text.
+ */
+export function rulesDeclaredFor(el: Element): string[] {
+  const classes = el.className
+    .split(/\s+/)
+    .filter(Boolean)
+    .map(name => `.${name}`);
+  const out: string[] = [];
+  for (const sheet of Array.from(document.styleSheets)) {
+    let rules: CSSRuleList;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    walk(rules, rule => {
+      if (!(rule instanceof CSSStyleRule)) {
+        return;
+      }
+      const selector = rule.selectorText;
+      if (classes.some(cls => selector.startsWith(cls))) {
+        out.push(`${selector} {${rule.style.cssText}}`);
+      }
+    });
+  }
+  return out;
+}
+
+/** The rules on `el` whose selector matches `pseudo` (e.g. `:active`). */
+export function rulesWithSelector(el: Element, pseudo: string): string[] {
+  return rulesDeclaredFor(el).filter(rule => {
+    const selector = rule.slice(0, rule.indexOf('{'));
+    return selector.includes(pseudo);
+  });
+}
+
+/**
+ * Does one of the element's own rules paint the pressed overlay token while
+ * `pseudo` matches? `pseudo` defaults to `:active`, the arm a mouse press
+ * takes.
+ */
+export function hasPressedArm(el: Element, pseudo = ':active'): boolean {
+  return rulesWithSelector(el, pseudo).some(rule =>
+    rule.includes(PRESSED_TOKEN),
+  );
+}
+
+/**
+ * Does one of the element's own classes paint the pressed overlay token
+ * unconditionally — no pseudo-class, no ancestor scope — because the component
+ * applies the class while it holds the press itself (a dragged slider thumb)?
+ * StyleX's specificity padding (`:not(#\#)`) is not a condition.
+ */
+export function declaresPressedOverlay(el: Element): boolean {
+  return rulesDeclaredFor(el).some(rule => {
+    const selector = rule
+      .slice(0, rule.indexOf('{'))
+      .replaceAll(':not(#\\#)', '');
+    return !selector.includes(':') && rule.includes(PRESSED_TOKEN);
+  });
+}

package/src/inputFontFloor.test.ts

@@ -0,0 +1,106 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file inputFontFloor.test.ts
+ * @input Uses node:fs and node:path to read the text-control sources
+ * @output Invariants for the 16px input floor shared by every text control
+ * @position Family-wide source test, in the source-reading style of
+ *   reset.test.ts. jsdom's CSSOM drops declarations nested inside @supports,
+ *   so the iOS branch cannot be asserted against injected rules — the
+ *   runtime half (no bare coarse-pointer floor) lives in TextInput.test.tsx.
+ */
+
+import {readFileSync, readdirSync} from 'node:fs';
+import path from 'node:path';
+
+import {describe, expect, it} from 'vitest';
+
+/**
+ * Every control that floors its text to 16px. iOS Safari zooms the page when
+ * a focused control renders under 16px; no other coarse-pointer browser does.
+ * `-webkit-touch-callout` is implemented by iOS WebKit alone, so each floor
+ * nests `@supports (-webkit-touch-callout: none)` inside the coarse-pointer
+ * query: iPhones and iPads keep the zoom guard, while Android and touch
+ * laptops keep the theme's own type scale instead of an inflated 16px.
+ */
+const FLOORED_CONTROLS = [
+  'Chat/ChatComposerInput.tsx',
+  'CommandPalette/CommandPaletteInput.tsx',
+  'ComplexSelector/ComplexSelector.tsx',
+  'DateInput/DateInput.tsx',
+  'DateInput/NativeDateField.tsx',
+  'DateInput/TouchDateField.tsx',
+  'DateRangeInput/DateRangeInput.tsx',
+  'DateTimeInput/DateTimeInput.tsx',
+  'DateTimeInput/TouchDateTimeField.tsx',
+  'DateTimeInput/nativePickerSegmentStyles.ts',
+  'Field/PanelSearchInput.tsx',
+  'FileInput/FileInput.tsx',
+  'NumberInput/NumberInput.tsx',
+  'Selector/Selector.tsx',
+  'TextArea/TextArea.tsx',
+  'TextInput/TextInput.tsx',
+  'TimeInput/TimeInput.tsx',
+  'Typeahead/BaseTypeahead.tsx',
+  // The rich-text package carries the same floor; its path is relative to
+  // packages/core/src.
+  '../../richtext/src/RichTextEditor.tsx',
+];
+
+/** A font floor applied to every coarse pointer, iOS or not. */
+const BARE_COARSE_FLOOR = `'@media (pointer: coarse)': \`max(1rem`;
+
+/** The same floor, gated to iOS WebKit inside the coarse-pointer query. */
+const IOS_GATED_FLOOR =
+  /'@media \(pointer: coarse\)': \{\s*'@supports \(-webkit-touch-callout: none\)': `max\(1rem, \$\{typeScaleVars\['--text-(?:body|label)-size'\]\}\)`/;
+
+/** Collect every non-test component source under `dir`, recursively. */
+function componentSources(dir: string): string[] {
+  const SOURCE_EXTENSIONS = ['.ts', '.tsx', '.js', '.jsx'];
+  const out: string[] = [];
+  for (const entry of readdirSync(dir, {withFileTypes: true})) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) {
+      out.push(...componentSources(full));
+    } else if (
+      SOURCE_EXTENSIONS.some(ext => entry.name.endsWith(ext)) &&
+      !entry.name.endsWith('.test.ts') &&
+      !entry.name.endsWith('.test.tsx') &&
+      !entry.name.endsWith('.doc.mjs')
+    ) {
+      out.push(full);
+    }
+  }
+  return out;
+}
+
+describe('the 16px input floor', () => {
+  it('gates every floored text control to iOS alone', () => {
+    // Guards the loop below against the list silently emptying out.
+    expect(FLOORED_CONTROLS.length).toBeGreaterThanOrEqual(18);
+    for (const file of FLOORED_CONTROLS) {
+      const source = readFileSync(path.resolve(__dirname, file), 'utf8');
+      expect(source, file).toMatch(IOS_GATED_FLOOR);
+      expect(source, file).not.toContain(BARE_COARSE_FLOOR);
+    }
+  });
+
+  it('leaves no bare coarse-pointer font floor anywhere in core or richtext', () => {
+    // Catches a new (or renamed) control reintroducing the ungated floor,
+    // wherever it lands — the list above only knows the current family. The
+    // rich-text package carries the same floor, so it is scanned too.
+    const scanRoots = [
+      __dirname,
+      path.resolve(__dirname, '../../richtext/src'),
+    ];
+    const offenders = scanRoots
+      .flatMap(root => componentSources(root))
+      .map(file => ({
+        file,
+        source: readFileSync(file, 'utf8'),
+      }))
+      .filter(({source}) => source.includes(BARE_COARSE_FLOOR))
+      .map(({file}) => path.relative(__dirname, file));
+    expect(offenders).toEqual([]);
+  });
+});

package/src/utils/interactionOverlay.stylex.ts

@@ -10,6 +10,11 @@
  * @output Exports reusable background-color and background-image state styles
  * @position Internal styling utility for interactive core surfaces
  *
+ * Every surface that paints a press composes one of these (or carries its own
+ * `:active` rule), so a change to how the system answers a press is made here
+ * once. `pressedBackgroundColor` is the press without the hover, for controls
+ * whose hover is a colour or nothing.
+ *
  * Keep the enabled guard outside the individual states. StyleX assigns an
  * extra priority bucket (and generated selector specificity) to media-nested
  * rules. Repeating `:active` inside the hover-capable branch gives hover and
@@ -71,4 +76,19 @@ export const interactionOverlayStyles = stylex.create({
       },
     },
   },
+  /**
+   * The pressed arm alone, for a control whose hover answer is its own — a
+   * text link changes colour, a disclosure row has none — so a press paints
+   * the system's pressed overlay without adding a hover surface the control
+   * never had. Same enabled guard as the paired states above.
+   */
+  pressedBackgroundColor: {
+    backgroundColor: {
+      default: null,
+      [ENABLED]: {
+        default: null,
+        ':active': colorVars['--color-overlay-pressed'],
+      },
+    },
+  },
 });