@multiplatform.one/components 6.7.0 → 7.1.0

package/src/Chip/Chip.spec.tsx

@@ -0,0 +1,141 @@
+import { fireEvent } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { TagIcon } from "@phosphor-icons/react";
+import { Chip, chipTone } from "./index";
+
+describe("Chip", () => {
+  it("renders its label", () => {
+    const result = renderWithProviders(<Chip>Tag</Chip>);
+    expect(result.findTextElement("Tag")).toBeDefined();
+  });
+
+  it("disabled chip exposes aria-disabled on its frame", () => {
+    const result = renderWithProviders(<Chip disabled>Muted</Chip>);
+    expect(result.container.querySelector("[aria-disabled='true']")).not.toBeNull();
+  });
+
+  it("enabled chip carries no aria-disabled", () => {
+    const result = renderWithProviders(<Chip>Live</Chip>);
+    expect(result.container.querySelector("[aria-disabled='true']")).toBeNull();
+  });
+
+  it("disabled chip removes the dismiss affordance", () => {
+    const onDismiss = vi.fn();
+    const result = renderWithProviders(
+      <Chip disabled onDismiss={onDismiss}>
+        Locked
+      </Chip>,
+    );
+    expect(result.container.querySelector("[aria-label='Remove']")).toBeNull();
+  });
+
+  it("dismiss fires onDismiss when the click lands on the inner ring", () => {
+    const onDismiss = vi.fn();
+    const result = renderWithProviders(<Chip onDismiss={onDismiss}>Tag</Chip>);
+    const target = result.container.querySelector("[aria-label='Remove']") as HTMLElement;
+    expect(target).not.toBeNull();
+    const inner = (target.firstElementChild ?? target) as HTMLElement;
+    fireEvent.click(inner);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it("dismiss fires onDismiss on Enter", () => {
+    const onDismiss = vi.fn();
+    const result = renderWithProviders(<Chip onDismiss={onDismiss}>Tag</Chip>);
+    const target = result.container.querySelector("[aria-label='Remove']") as HTMLElement;
+    fireEvent.keyDown(target, { key: "Enter" });
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+  });
+
+  it("filled and ghost paint different surfaces (solid is no longer a synonym of subtle)", () => {
+    const filled = renderWithProviders(<Chip variant="filled">Solid</Chip>);
+    const ghost = renderWithProviders(<Chip variant="ghost">Tint</Chip>);
+    const filledFrame = filled.container.querySelector("[data-chip]") as HTMLElement;
+    const ghostFrame = ghost.container.querySelector("[data-chip]") as HTMLElement;
+    expect(filledFrame.className).toMatch(/_bg-/);
+    expect(ghostFrame.className).toMatch(/_bg-/);
+    expect(filledFrame.className).not.toEqual(ghostFrame.className);
+  });
+
+  it("maps solid/subtle/outline onto filled/ghost/outlined", () => {
+    expect(chipTone("solid")).toBe("filled");
+    expect(chipTone("subtle")).toBe("ghost");
+    expect(chipTone("outline")).toBe("outlined");
+    expect(chipTone("filled")).toBe("filled");
+  });
+
+  it("selected interactive chip is a pressed toggle and marks the fill", () => {
+    const onPress = vi.fn();
+    const result = renderWithProviders(
+      <Chip selected onPress={onPress}>
+        Fire
+      </Chip>,
+    );
+    const frame = result.container.querySelector("[data-chip]") as HTMLElement;
+    expect(frame.getAttribute("aria-pressed")).toBe("true");
+    expect(frame.getAttribute("data-selected")).toBe("true");
+    expect(frame.getAttribute("role")).toBe("button");
+    fireEvent.click(frame);
+    expect(onPress).toHaveBeenCalledTimes(1);
+  });
+
+  it("Enter activates an interactive chip (LC-50)", () => {
+    const onPress = vi.fn();
+    const result = renderWithProviders(<Chip onPress={onPress}>Assist</Chip>);
+    const frame = result.container.querySelector("[data-chip]") as HTMLElement;
+    fireEvent.keyDown(frame, { key: "Enter" });
+    expect(onPress).toHaveBeenCalledTimes(1);
+    fireEvent.keyDown(frame, { key: " " });
+    expect(onPress).toHaveBeenCalledTimes(2);
+  });
+
+  it("dismiss does not fire onPress (two focusables, two actions)", () => {
+    const onPress = vi.fn();
+    const onDismiss = vi.fn();
+    const result = renderWithProviders(
+      <Chip onPress={onPress} onDismiss={onDismiss}>
+        Both
+      </Chip>,
+    );
+    const dismiss = result.container.querySelector("[aria-label='Remove']") as HTMLElement;
+    fireEvent.click(dismiss);
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(onPress).not.toHaveBeenCalled();
+  });
+
+  it("LC-71: dismiss ring class is on the glyph box, not the 44px floor", () => {
+    const result = renderWithProviders(<Chip onDismiss={() => {}}>Tag</Chip>);
+    const floor = result.container.querySelector(".mp-chip-dismiss") as HTMLElement;
+    const ring = result.container.querySelector(".mp-chip-dismiss-ring") as HTMLElement;
+    expect(floor).not.toBeNull();
+    expect(ring).not.toBeNull();
+    expect(floor.contains(ring)).toBe(true);
+    expect(floor.className).not.toMatch(/mp-chip-dismiss-ring/);
+  });
+
+  it("LC-54: dismiss floor carries no hover/press background paint", () => {
+    const paintedStateAtom = /_bg-0(?:hover|active)-(?!transparent)/;
+    const result = renderWithProviders(<Chip onDismiss={() => {}}>Tag</Chip>);
+    const floor = result.container.querySelector("[aria-label='Remove']") as HTMLElement;
+    expect(floor.className).not.toMatch(paintedStateAtom);
+    const ring = floor.firstElementChild as HTMLElement;
+    expect(ring.className).toMatch(/_bg-0hover-color5/);
+  });
+
+  it("static chip is not a tab stop; interactive chip is", () => {
+    const idle = renderWithProviders(<Chip>Idle</Chip>);
+    expect(
+      (idle.container.querySelector("[data-chip]") as HTMLElement).getAttribute("tabindex"),
+    ).toBeNull();
+    const live = renderWithProviders(<Chip onPress={() => {}}>Go</Chip>);
+    expect(
+      (live.container.querySelector("[data-chip]") as HTMLElement).getAttribute("tabindex"),
+    ).toBe("0");
+  });
+
+  it("renders a leading icon slot", () => {
+    const result = renderWithProviders(<Chip icon={<TagIcon />}>Tagged</Chip>);
+    expect(result.container.querySelector("svg")).not.toBeNull();
+  });
+});

package/src/Chip/Chip.stories.tsx

@@ -1,6 +1,8 @@
 import { action } from "@multiplatform.one/storybook";
+import { CheckIcon, LightningIcon, TagIcon } from "@phosphor-icons/react";
 import type { Meta, StoryObj } from "@storybook/react-native-web-vite";
-import { XStack, YStack, Text } from "tamagui";
+import { useState } from "react";
+import { Text, XStack, YStack } from "tamagui";
 import { Chip, type ChipColor, type ChipSize, type ChipVariant } from "./index";
 
 const meta: Meta<typeof Chip> = {
@@ -11,7 +13,7 @@ const meta: Meta<typeof Chip> = {
     docs: {
       description: {
         component:
-          "A pill-shaped tag component for displaying labels, categories, or selected items. Supports multiple variants, colors, and dismissible functionality.",
+          "Catalog chip: filled / outlined / ghost (solid / outline / subtle aliases), semantic color, selected fill, leading icon, dismiss. Keyboard ring on the pill; dismiss ring on the glyph.",
       },
     },
   },
@@ -27,15 +29,18 @@ export const Default: Story = {
 
 export const Variants: Story = {
   render: () => {
-    const variants: ChipVariant[] = ["solid", "subtle", "outline"];
+    const variants: ChipVariant[] = ["filled", "ghost", "outlined"];
     return (
       <YStack gap="$3">
         {variants.map((variant) => (
           <XStack key={variant} gap="$2" alignItems="center">
-            <Text width={60} fontSize="$2" color="$color10">
+            <Text width={80} fontSize="$2" color="$color10">
               {variant}
             </Text>
             <Chip variant={variant}>Chip</Chip>
+            <Chip variant={variant} color="blue">
+              Blue
+            </Chip>
           </XStack>
         ))}
       </YStack>
@@ -48,7 +53,7 @@ export const Colors: Story = {
     const colors: ChipColor[] = ["gray", "red", "green", "blue", "yellow", "orange", "purple"];
     return (
       <YStack gap="$4">
-        {(["subtle", "outline"] as ChipVariant[]).map((variant) => (
+        {(["ghost", "outlined", "filled"] as ChipVariant[]).map((variant) => (
           <YStack key={variant} gap="$2">
             <Text fontWeight="600" fontSize="$2">
               {variant}
@@ -82,6 +87,64 @@ export const Sizes: Story = {
   },
 };
 
+export const Selected: Story = {
+  render: () => (
+    <XStack gap="$2" flexWrap="wrap" alignItems="center">
+      <Chip variant="outlined" selected={false} onPress={() => action("press")("idle")}>
+        Idle
+      </Chip>
+      <Chip variant="outlined" selected onPress={() => action("press")("on")}>
+        Selected
+      </Chip>
+      <Chip variant="outlined" selected onPress={() => action("press")("blue")} color="blue">
+        Blue selected
+      </Chip>
+    </XStack>
+  ),
+};
+
+export const Filter: Story = {
+  render: function FilterDemo() {
+    const [on, setOn] = useState<Record<string, boolean>>({
+      Fire: true,
+      Water: false,
+      Grass: true,
+      Electric: false,
+    });
+    return (
+      <XStack gap="$2" flexWrap="wrap">
+        {Object.keys(on).map((label) => (
+          <Chip
+            key={label}
+            variant="outlined"
+            selected={on[label]}
+            onPress={() => setOn((s) => ({ ...s, [label]: !s[label] }))}
+          >
+            {label}
+          </Chip>
+        ))}
+      </XStack>
+    );
+  },
+};
+
+export const WithIcon: Story = {
+  render: () => (
+    <XStack gap="$2" flexWrap="wrap" alignItems="center">
+      <Chip icon={<TagIcon />}>Tagged</Chip>
+      <Chip icon={<LightningIcon />} color="yellow" variant="filled">
+        Electric
+      </Chip>
+      <Chip icon={<CheckIcon />} color="green" selected onPress={() => {}}>
+        Ready
+      </Chip>
+      <Chip icon={<TagIcon />} onDismiss={() => action("onDismiss")("Tagged")} color="purple">
+        Removable
+      </Chip>
+    </XStack>
+  ),
+};
+
 export const Dismissible: Story = {
   render: () => (
     <XStack gap="$2" flexWrap="wrap">
@@ -96,6 +159,65 @@ export const Dismissible: Story = {
   ),
 };
 
+/**
+ * Long labels beside the dismiss affordance: on hover the dismiss ring
+ * paints at glyph scale INSIDE its reserved slot, so it never covers the
+ * label's trailing glyphs (the pre-fix 44px press-target paint did). The
+ * press target still measures the full LC-54 floor — it just stays
+ * transparent.
+ */
+export const LongLabelDismiss: Story = {
+  render: () => (
+    <YStack gap="$3" maxWidth={480}>
+      <XStack gap="$2" flexWrap="wrap">
+        <Chip onDismiss={() => action("onDismiss")("characterization")}>
+          Characterization requirements
+        </Chip>
+        <Chip onDismiss={() => action("onDismiss")("Tamagui")} color="purple">
+          Tamagui
+        </Chip>
+      </XStack>
+      <XStack gap="$2" flexWrap="wrap">
+        <Chip
+          onDismiss={() => action("onDismiss")("long-blue")}
+          color="blue"
+          size="$5"
+          maxWidth={220}
+        >
+          Extraordinarily long chip label
+        </Chip>
+        <Chip onDismiss={() => action("onDismiss")("tiny")} size="$2">
+          Minimum
+        </Chip>
+      </XStack>
+    </YStack>
+  ),
+};
+
+/**
+ * Dismiss ✕ across every size token: the ✕ box is the pill's end-cap square,
+ * so its gap to the chip's right edge equals its gap to top and bottom at
+ * each size (the optical-centering regression pinned by the Chip spec).
+ */
+export const DismissibleSizes: Story = {
+  render: () => (
+    <XStack gap="$2" flexWrap="wrap" alignItems="center">
+      <Chip size="$2" onDismiss={() => action("onDismiss")("$2")}>
+        Size $2
+      </Chip>
+      <Chip size="$3" onDismiss={() => action("onDismiss")("$3")} color="blue">
+        Size $3
+      </Chip>
+      <Chip size="$4" onDismiss={() => action("onDismiss")("$4")} color="green">
+        Size $4
+      </Chip>
+      <Chip size="$5" onDismiss={() => action("onDismiss")("$5")} color="purple">
+        Size $5
+      </Chip>
+    </XStack>
+  ),
+};
+
 export const Disabled: Story = {
   render: () => (
     <XStack gap="$2">
@@ -103,6 +225,9 @@ export const Disabled: Story = {
       <Chip disabled onDismiss={() => {}}>
         Disabled Dismissible
       </Chip>
+      <Chip disabled selected onPress={() => {}}>
+        Disabled selected
+      </Chip>
     </XStack>
   ),
 };
@@ -112,15 +237,15 @@ export const AllStates: Story = {
     <YStack gap="$6">
       <YStack gap="$2">
         <Text fontWeight="600">Variants</Text>
-        <XStack gap="$2">
-          <Chip variant="solid">Solid</Chip>
-          <Chip variant="subtle">Subtle</Chip>
-          <Chip variant="outline">Outline</Chip>
+        <XStack gap="$2" flexWrap="wrap">
+          <Chip variant="filled">Filled</Chip>
+          <Chip variant="ghost">Ghost</Chip>
+          <Chip variant="outlined">Outlined</Chip>
         </XStack>
       </YStack>
 
       <YStack gap="$2">
-        <Text fontWeight="600">Colors (subtle)</Text>
+        <Text fontWeight="600">Colors (ghost)</Text>
         <XStack gap="$2" flexWrap="wrap">
           <Chip color="gray">Gray</Chip>
           <Chip color="red">Red</Chip>
@@ -142,6 +267,34 @@ export const AllStates: Story = {
         </XStack>
       </YStack>
 
+      <YStack gap="$2">
+        <Text fontWeight="600">Selected</Text>
+        <XStack gap="$2" flexWrap="wrap">
+          <Chip variant="outlined" selected={false} onPress={() => {}}>
+            Idle
+          </Chip>
+          <Chip variant="outlined" selected onPress={() => {}}>
+            Selected
+          </Chip>
+          <Chip variant="outlined" selected onPress={() => {}} color="blue">
+            Blue
+          </Chip>
+        </XStack>
+      </YStack>
+
+      <YStack gap="$2">
+        <Text fontWeight="600">Icon</Text>
+        <XStack gap="$2" flexWrap="wrap">
+          <Chip icon={<TagIcon />}>Tagged</Chip>
+          <Chip icon={<LightningIcon />} color="yellow" variant="filled">
+            Electric
+          </Chip>
+          <Chip icon={<TagIcon />} onDismiss={() => action("dismiss")()} color="purple">
+            Removable
+          </Chip>
+        </XStack>
+      </YStack>
+
       <YStack gap="$2">
         <Text fontWeight="600">Dismissible</Text>
         <XStack gap="$2">