@multiplatform.one/forms 7.88.6 → 7.88.8

package/src/Button/Button.outlinedInkFlip.spec.tsx

@@ -0,0 +1,305 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * FZ-9608: an outlined solid-palette Button (the `accent` prop or
+ * `theme="accent"`) inks its label on the host (MPO-447). That ink was a
+ * literal from the scheme current at render: `useAccentOnSurface()` under the
+ * default textAccent, `hostScoped()` of `$color11` under low and medium. A
+ * flip that moves only the root's t_light/t_dark class, which never
+ * re-renders the Button, left the old scheme's ink on the new page.
+ *
+ * jsdom cascades no Tamagui CSS, so this reads what each node asks for: the
+ * atomic class, the injected rule behind it, a `--mp-host-*` alias on the
+ * ancestor that declares it, and for a `var(--token)` rule the house theme
+ * table of the scope that paints it.
+ */
+
+import { act, cleanup, render, screen } from "@testing-library/react";
+import {
+  createDefaultThemeConfig,
+  createThemesBuilder,
+  defaultAccentTheme,
+  defaultBaseTheme,
+  defaultBuilderOptions,
+  type Knobs,
+  Preset,
+} from "@multiplatform.one/theme";
+import { type ReactElement, type ReactNode, useState } from "react";
+import { TamaguiProvider, YStack } from "tamagui";
+import { afterEach, describe, expect, it } from "vitest";
+import { Button, type ButtonProps } from "./index";
+
+afterEach(cleanup);
+
+const houseConfig = createDefaultThemeConfig();
+const houseThemes = createThemesBuilder(
+  defaultBaseTheme,
+  defaultAccentTheme,
+  defaultBuilderOptions,
+).themes() as Record<string, Record<string, string>>;
+
+const FLIPS = [
+  ["light", "dark"],
+  ["dark", "light"],
+] as const;
+type Scheme = (typeof FLIPS)[number][number];
+
+const VARIANTS: { name: string; props: Partial<ButtonProps> }[] = [
+  { name: 'theme="accent" outlined', props: { theme: "accent", outlined: true } },
+  { name: "accent outlined", props: { accent: true, outlined: true } },
+];
+const TEXT_ACCENTS = ["low", "medium", "high"] as const;
+const STATES = [
+  { name: "enabled", disabled: false },
+  { name: "dimWhole disabled", disabled: true },
+] as const;
+
+function injectedRuleValue(className: string, property: string): string {
+  for (const sheet of Array.from(document.styleSheets)) {
+    for (const rule of Array.from(sheet.cssRules)) {
+      if (!(rule instanceof CSSStyleRule)) continue;
+      if (!rule.selectorText.endsWith(`.${className}`)) continue;
+      const value = rule.style.getPropertyValue(property);
+      if (value) return value.trim();
+    }
+  }
+  throw new Error(`no injected ${property} rule for .${className}`);
+}
+
+function scopeOf(el: Element): string | null {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    const names = Array.from(node.classList)
+      .filter((c) => c.startsWith("t_") && c !== "t_sub_theme")
+      .map((c) => c.slice(2))
+      .filter((c) => c !== "light" && c !== "dark");
+    if (names.length) return names.sort((a, b) => b.length - a.length)[0];
+  }
+  return null;
+}
+
+function resolveInScope(value: string, scheme: Scheme, scope: string | null): string {
+  const token = value.match(/^var\(--([\w-]+)\)$/)?.[1];
+  if (!token) return value;
+  const chain: string[] = [];
+  if (scope) {
+    const parts = scope.split("_");
+    for (let i = parts.length; i > 0; i--) chain.push(`${scheme}_${parts.slice(0, i).join("_")}`);
+  }
+  chain.push(scheme);
+  for (const name of chain) {
+    const hit = houseThemes[name]?.[token];
+    if (hit) return hit;
+  }
+  throw new Error(`--${token} resolves in none of ${chain.join(", ")}`);
+}
+
+function declaredOn(el: Element, property: string): HTMLElement | null {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node.style.getPropertyValue(property)) return node;
+  }
+  return null;
+}
+
+/** What `el` paints for one atomic property, or null when it asks for none. */
+function painted(el: Element, prefix: string, property: string, scheme: Scheme): string | null {
+  const cls = Array.from(el.classList).find(
+    (c) => c.startsWith(prefix) && !/^_[a-z]+-0(hover|active|focus|press)/.test(c),
+  );
+  if (!cls) return null;
+  const value = injectedRuleValue(cls, property);
+  const alias = value.match(/^var\((--[\w-]+)\)$/)?.[1];
+  const declarer = alias ? declaredOn(el, alias) : null;
+  return alias && declarer
+    ? resolveInScope(declarer.style.getPropertyValue(alias).trim(), scheme, scopeOf(declarer))
+    : resolveInScope(value, scheme, scopeOf(el));
+}
+
+function schemeOf(el: Element): Scheme | null {
+  for (let node = el.parentElement; node; node = node.parentElement) {
+    if (node.classList.contains("t_dark")) return "dark";
+    if (node.classList.contains("t_light")) return "light";
+  }
+  return null;
+}
+
+function paintOf(text: string, scheme: Scheme) {
+  const label = screen.getByText(text);
+  const frame = label.closest("[role=button]") as Element;
+  return {
+    scheme: schemeOf(frame),
+    ink: painted(label, "_col-", "color", scheme),
+    frameInk: painted(frame, "_col-", "color", scheme),
+    fill: painted(frame, "_bg-", "background-color", scheme),
+    border: painted(frame, "_btc-", "border-top-color", scheme),
+  };
+}
+
+let flipScheme: (scheme: Scheme) => void = () => {};
+
+function SchemeRoot({ initial, children }: { initial: Scheme; children: ReactNode }) {
+  const [scheme, setScheme] = useState<Scheme>(initial);
+  flipScheme = setScheme;
+  return (
+    <TamaguiProvider config={houseConfig.tamagui} defaultTheme={scheme} disableInjectCSS>
+      {children}
+    </TamaguiProvider>
+  );
+}
+
+function swapSchemeClass(from: Scheme, to: Scheme) {
+  for (const el of Array.from(document.querySelectorAll(`.t_${from}`))) {
+    el.classList.replace(`t_${from}`, `t_${to}`);
+  }
+}
+
+function onHost(knobs: Partial<Knobs>, button: ReactElement) {
+  return (
+    <Preset overrides={knobs}>
+      <YStack backgroundColor="$background">{button}</YStack>
+    </Preset>
+  );
+}
+
+function expectFlipFollows(from: Scheme, to: Scheme, tree: ReactElement, text: string) {
+  render(<SchemeRoot initial={to}>{tree}</SchemeRoot>);
+  const fresh = paintOf(text, to);
+  cleanup();
+  render(<SchemeRoot initial={from}>{tree}</SchemeRoot>);
+  swapSchemeClass(from, to);
+  try {
+    expect(paintOf(text, to)).toEqual(fresh);
+  } finally {
+    swapSchemeClass(to, from);
+  }
+}
+
+function expectProviderFlipFollows(from: Scheme, to: Scheme, tree: ReactElement, text: string) {
+  render(<SchemeRoot initial={to}>{tree}</SchemeRoot>);
+  const fresh = paintOf(text, to);
+  cleanup();
+  render(<SchemeRoot initial={from}>{tree}</SchemeRoot>);
+  act(() => flipScheme(to));
+  expect(paintOf(text, to)).toEqual(fresh);
+}
+
+describe("FZ-9608 MPO-447: an outlined solid-palette Button's ink follows a scheme flip", () => {
+  for (const [from, to] of FLIPS) {
+    for (const variant of VARIANTS) {
+      for (const textAccent of TEXT_ACCENTS) {
+        for (const state of STATES) {
+          const tree = onHost(
+            { textAccent, disabledStyle: "dimWhole" },
+            <Button {...variant.props} disabled={state.disabled}>
+              Sign in
+            </Button>,
+          );
+          const label = `${from} -> ${to} ${variant.name} textAccent ${textAccent} ${state.name}`;
+
+          it(`${label}: a flip that never re-renders it paints what a fresh ${to} mount paints`, () => {
+            expectFlipFollows(from, to, tree, "Sign in");
+          });
+
+          it(`${label}: a provider flip paints what a fresh ${to} mount paints`, () => {
+            expectProviderFlipFollows(from, to, tree, "Sign in");
+          });
+        }
+      }
+    }
+  }
+});
+
+describe("FZ-9608 MPO-447: the default textAccent inks the label with the host's accentOnSurface", () => {
+  for (const [scheme] of FLIPS) {
+    for (const variant of VARIANTS) {
+      it(`${scheme} ${variant.name}`, () => {
+        render(
+          <SchemeRoot initial={scheme}>
+            {onHost({ textAccent: "high" }, <Button {...variant.props}>Sign in</Button>)}
+          </SchemeRoot>,
+        );
+        const host = houseThemes[scheme]?.accentOnSurface;
+        expect(host).toMatch(/^#|^rgb|^hsl/);
+        const paint = paintOf("Sign in", scheme);
+        expect(paint.ink).toBe(host);
+        expect(paint.frameInk).toBe(host);
+      });
+    }
+  }
+});
+
+const KNOB_SPACE = {
+  fillStyle: ["filled", "outlined"],
+  borderRadius: ["none", "small", "medium", "large", "full"],
+  borderWidth: ["none", "small", "medium", "large"],
+  elevation: ["none", "small", "medium", "large"],
+  textAccent: ["low", "medium", "high"],
+  disabledStyle: ["keepLabel", "dimWhole"],
+} as const;
+
+function knobFuzz(seed: number, count: number): Partial<Knobs>[] {
+  let state = seed;
+  const next = () => {
+    state = (state + 0x6d2b79f5) | 0;
+    let t = Math.imul(state ^ (state >>> 15), 1 | state);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+  return Array.from(
+    { length: count },
+    () =>
+      Object.fromEntries(
+        Object.entries(KNOB_SPACE).map(([knob, values]) => [
+          knob,
+          values[Math.floor(next() * values.length)],
+        ]),
+      ) as Partial<Knobs>,
+  );
+}
+
+describe('FZ-9608: seeded knob draws of a theme="accent" Button follow a flip with no re-render', () => {
+  for (const knobs of knobFuzz(9608, 3)) {
+    for (const [from, to] of FLIPS) {
+      for (const state of STATES) {
+        it(`${from} -> ${to} ${state.name.split(" ").pop()} ${JSON.stringify(knobs)}`, () => {
+          expectFlipFollows(
+            from,
+            to,
+            onHost(
+              knobs,
+              <Button theme="accent" disabled={state.disabled}>
+                Sign in
+              </Button>,
+            ),
+            "Sign in",
+          );
+        });
+      }
+    }
+  }
+});
+
+describe("FZ-9608: a focused outlined solid-palette Button keeps its node and focus", () => {
+  for (const variant of VARIANTS) {
+    it(`${variant.name}: across a scheme flip and when it turns disabled`, () => {
+      const view = (disabled: boolean) => (
+        <SchemeRoot initial="light">
+          {onHost(
+            { disabledStyle: "dimWhole" },
+            <Button {...variant.props} disabled={disabled}>
+              Go
+            </Button>,
+          )}
+        </SchemeRoot>
+      );
+      const { rerender } = render(view(false));
+      const frame = screen.getByText("Go").closest("[role=button]") as HTMLElement;
+      frame.focus();
+      act(() => flipScheme("dark"));
+      expect(screen.getByText("Go").closest("[role=button]")).toBe(frame);
+      expect(document.activeElement).toBe(frame);
+      rerender(view(true));
+      expect(screen.getByText("Go").closest("[role=button]")).toBe(frame);
+      expect(document.activeElement).toBe(frame);
+    });
+  }
+});

package/src/Button/Button.scopeFlip.native.spec.tsx

@@ -0,0 +1,208 @@
+/**
+ * @vitest-environment jsdom
+ *
+ * FZ-9617 on native: no CSS variables, so every host-scope paint stays a
+ * literal resolved at render, and a scheme flip re-renders. The one change is
+ * the media plate's scope: its disabled wash and ring now come from the dark
+ * scope the plate sits in, the scope web resolves them in, where native read
+ * the page.
+ */
+
+import { cleanup, render, screen } from "@testing-library/react";
+import { createDefaultThemeConfig, type Knobs, Preset } from "@multiplatform.one/theme";
+import type { ReactNode } from "react";
+import { getVariableValue, TamaguiProvider, Theme, useTheme, YStack } from "tamagui";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { Button } from "./index";
+
+const platform = vi.hoisted(() => ({ web: false }));
+vi.mock("tamagui", async (importOriginal) => ({
+  ...(await importOriginal<typeof import("tamagui")>()),
+  get isWeb() {
+    return platform.web;
+  },
+}));
+
+afterEach(cleanup);
+
+const config = createDefaultThemeConfig();
+const SCHEMES = ["light", "dark"] as const;
+const LITERAL = /^#|^rgb|^hsl/;
+
+function IconProbe({ color }: { size?: number; color?: string }) {
+  return <span data-testid="icon" data-color={color ?? ""} />;
+}
+
+function ScopeProbe({ id }: { id: string }) {
+  const theme = useTheme();
+  const read = (key: string) =>
+    String(getVariableValue((theme as unknown as Record<string, unknown>)[key]));
+  return (
+    <span
+      data-testid={id}
+      data-color3={read("color3")}
+      data-color6={read("color6")}
+      data-color11={read("color11")}
+      data-color12={read("color12")}
+      data-outline={read("outlineColor")}
+    />
+  );
+}
+
+function* styleRules(rules: CSSRuleList): Generator<CSSStyleRule> {
+  for (const rule of Array.from(rules)) {
+    if (rule instanceof CSSStyleRule) yield rule;
+    else if ("cssRules" in rule) yield* styleRules((rule as CSSGroupingRule).cssRules);
+  }
+}
+
+function injectedRuleValue(className: string, property: string): string | undefined {
+  const selector = new RegExp(`\\.${className.replace(/[^\w-]/g, "\\$&")}(?![\\w-])`);
+  for (const sheet of Array.from(document.styleSheets)) {
+    for (const rule of styleRules(sheet.cssRules)) {
+      if (!selector.test(rule.selectorText)) continue;
+      const value = rule.style.getPropertyValue(property);
+      if (value) return value.trim();
+    }
+  }
+  return undefined;
+}
+
+function painted(el: Element, prefix: string, property: string, pseudo?: string) {
+  const cls = Array.from(el.classList).find((c) =>
+    pseudo
+      ? c.startsWith(`${prefix}0${pseudo}-`)
+      : c.startsWith(prefix) && !/^_[a-zA-Z]+-0(hover|active|focus|press|focus-visible)-/.test(c),
+  );
+  return cls ? injectedRuleValue(cls, property) : undefined;
+}
+
+function mount(scheme: (typeof SCHEMES)[number], children: ReactNode) {
+  return render(
+    <TamaguiProvider config={config.tamagui} defaultTheme={scheme} disableInjectCSS>
+      <YStack backgroundColor="$background">{children}</YStack>
+    </TamaguiProvider>,
+  );
+}
+
+function frameOf(name: string): HTMLElement {
+  return screen.getByRole("button", { name });
+}
+
+const WASH_KNOBS: Partial<Knobs> = {
+  disabledStyle: "keepLabel",
+  fillStyle: "filled",
+  borderWidth: "medium",
+};
+
+describe("FZ-9617: a native disabled accent media plate washes from the dark scope", () => {
+  it.each(SCHEMES)("%s page: fill, edge and glyph are the dark scope's literals", (scheme) => {
+    mount(
+      scheme,
+      <>
+        <Theme name="dark">
+          <ScopeProbe id="dark" />
+        </Theme>
+        <Preset overrides={WASH_KNOBS}>
+          <Button accent disabled plate="media" icon={IconProbe} aria-label="Play" />
+        </Preset>
+      </>,
+    );
+    const dark = screen.getByTestId("dark").dataset;
+    expect(dark.color3).toMatch(LITERAL);
+    const frame = frameOf("Play");
+    expect({
+      fill: painted(frame, "_bg-", "background-color"),
+      edge: painted(frame, "_btc-", "border-top-color"),
+      glyph: screen.getByTestId("icon").dataset.color,
+    }).toEqual({ fill: dark.color3, edge: dark.color6, glyph: dark.color11 });
+  });
+});
+
+describe("FZ-9617: native keeps every host-scope paint a literal", () => {
+  it.each(SCHEMES)("%s: no node declares a --mp-host-* alias", (scheme) => {
+    mount(
+      scheme,
+      <>
+        <Button accent>Go</Button>
+        <Button>Plain</Button>
+        <Button icon={IconProbe} aria-label="Add" />
+      </>,
+    );
+    for (const el of Array.from(document.querySelectorAll<HTMLElement>("[style]"))) {
+      expect(el.getAttribute("style") ?? "").not.toContain("--mp-host-");
+    }
+  });
+
+  it.each(SCHEMES)("%s: the ring is the page's literal $outlineColor", (scheme) => {
+    mount(
+      scheme,
+      <>
+        <ScopeProbe id="page" />
+        <Button>Plain</Button>
+        <Button accent>Go</Button>
+      </>,
+    );
+    const page = screen.getByTestId("page").dataset;
+    expect(page.outline).toMatch(LITERAL);
+    for (const name of ["Plain", "Go"]) {
+      expect(painted(frameOf(name), "_outlineColor-", "outline-color", "focus-visible")).toBe(
+        page.outline,
+      );
+    }
+  });
+
+  it.each(SCHEMES)("%s: a media plate's ring is the dark scope's literal", (scheme) => {
+    mount(
+      scheme,
+      <>
+        <Theme name="dark">
+          <ScopeProbe id="dark" />
+        </Theme>
+        <Button plate="media" icon={IconProbe} aria-label="Play" />
+      </>,
+    );
+    expect(painted(frameOf("Play"), "_outlineColor-", "outline-color", "focus-visible")).toBe(
+      screen.getByTestId("dark").dataset.outline,
+    );
+  });
+
+  it.each(SCHEMES)(
+    "%s: a framed circle inks its plate with the page's literal $color12",
+    (scheme) => {
+      mount(
+        scheme,
+        <>
+          <ScopeProbe id="page" />
+          <Button circular icon={IconProbe} aria-label="Add" />
+        </>,
+      );
+      const page = screen.getByTestId("page").dataset;
+      expect(page.color12).toMatch(LITERAL);
+      expect(painted(frameOf("Add"), "_col-", "color")).toBe(page.color12);
+      expect(screen.getByTestId("icon").dataset.color).toBe(page.color12);
+    },
+  );
+
+  it.each(SCHEMES)(
+    "%s: a bar glyph and its frame take the house glyph tint, $color12, as a literal",
+    (scheme) => {
+      mount(
+        scheme,
+        <>
+          <ScopeProbe id="page" />
+          <Button chromeless accentInk icon={IconProbe} aria-label="Add" />
+        </>,
+      );
+      const page = screen.getByTestId("page").dataset;
+      expect(page.color12).toMatch(LITERAL);
+      expect(screen.getByTestId("icon").dataset.color).toBe(page.color12);
+      expect(painted(frameOf("Add"), "_col-", "color")).toBe(page.color12);
+    },
+  );
+
+  it.each(SCHEMES)("%s: an icon button's hover stays transparent", (scheme) => {
+    mount(scheme, <Button icon={IconProbe} aria-label="Add" />);
+    expect(painted(frameOf("Add"), "_bg-", "background-color", "hover")).toBe("transparent");
+  });
+});