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

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/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'],
+      },
+    },
+  },
 });