@charcuterie/ui 4.22.0 → 4.23.0

package/src/Picker/Picker.test.tsx

@@ -7,8 +7,13 @@ import { mountStory } from "../mountStory.testHelpers.ts"
 import { expectAgentDrivable } from "../testing/index.ts"
 import * as stories from "./Picker.stories.tsx"
 
-const { AllStates, Playground, Interactive, NextToText } =
-  composeStories(stories)
+const {
+  AllStates,
+  Playground,
+  Interactive,
+  NextToText,
+  Responsive,
+} = composeStories(stories)
 
 test("the trigger's accessible name carries the current value", async () => {
   const { canvas, canvasElement } =
@@ -108,3 +113,87 @@ test("a rich option label keeps a plain-string trigger via textValue", async ()
 
   await expectNoAxeViolations(canvasElement)
 })
+
+test("a stretched trigger puts the value at the start and the chevron at the end", async () => {
+  const { canvas, canvasElement } =
+    await mountStory(Responsive)
+
+  const trigger = expectAgentDrivable(canvas, {
+    name: "Language at 34rem: English",
+    role: "button",
+  })
+
+  const valueElement = canvas
+    .getAllByText("English")
+    .find((element: HTMLElement) =>
+      trigger.contains(element),
+    ) as HTMLElement
+
+  // The text's own box, not the span's: the span grows to fill the
+  // trigger, so its box would sit at the start even with centered text.
+  const valueRange = document.createRange()
+
+  valueRange.selectNodeContents(valueElement)
+
+  const valueBox = valueRange.getBoundingClientRect()
+  const triggerBox = trigger.getBoundingClientRect()
+  const chevronBox = (
+    trigger.querySelector("svg") as SVGElement
+  ).getBoundingClientRect()
+
+  const triggerStyle = getComputedStyle(trigger)
+  const contentStart =
+    triggerBox.left +
+    Number.parseFloat(triggerStyle.borderInlineStartWidth) +
+    Number.parseFloat(triggerStyle.paddingInlineStart)
+  const contentEnd =
+    triggerBox.right -
+    Number.parseFloat(triggerStyle.borderInlineEndWidth) -
+    Number.parseFloat(triggerStyle.paddingInlineEnd)
+
+  // The `Field` stretched the trigger well past its content, so a
+  // centered value would start far from the inline start.
+  await expect(
+    triggerBox.width - valueBox.width - chevronBox.width,
+  ).toBeGreaterThan(200)
+  await expect(
+    Math.abs(valueBox.left - contentStart),
+  ).toBeLessThan(1)
+  await expect(
+    Math.abs(chevronBox.right - contentEnd),
+  ).toBeLessThan(1)
+
+  await expectNoAxeViolations(canvasElement)
+})
+
+test("a value wider than the trigger truncates and keeps the chevron inside", async () => {
+  const { canvas } = await mountStory(Responsive)
+
+  const trigger = expectAgentDrivable(canvas, {
+    name: "Subtitles at 15rem: English (SDH, signs and songs, full dialogue)",
+    role: "button",
+  })
+
+  const valueElement = canvas
+    .getAllByText(
+      "English (SDH, signs and songs, full dialogue)",
+    )
+    .find((element: HTMLElement) =>
+      trigger.contains(element),
+    ) as HTMLElement
+
+  const triggerBox = trigger.getBoundingClientRect()
+  const chevronBox = (
+    trigger.querySelector("svg") as SVGElement
+  ).getBoundingClientRect()
+
+  await expect(valueElement.scrollWidth).toBeGreaterThan(
+    valueElement.clientWidth,
+  )
+  await expect(trigger.scrollWidth).toBe(
+    trigger.clientWidth,
+  )
+  await expect(chevronBox.right).toBeLessThanOrEqual(
+    triggerBox.right,
+  )
+})

package/src/Picker/Picker.tsx

@@ -13,6 +13,7 @@ import { Button } from "../Button/Button.tsx"
 import type { IntentAppearance } from "../intentStyles.ts"
 import type { ListboxItem } from "../Listbox/Listbox.tsx"
 import { Listbox } from "../Listbox/Listbox.tsx"
+import { toClassName } from "../toClassName.ts"
 
 export type PickerOption = ListboxItem
 
@@ -122,6 +123,21 @@ export type PickerProps = Omit<
  * mux-magic both moved to it while `id` was still being replaced — but
  * `id` is no longer a trap. Everything else on the button (`data-*`,
  * `onClick`, `form`, …) passes straight through.
+ *
+ * ### A stretched trigger reads like a select, not a button
+ *
+ * `Button` centers its content, which is right for an action and wrong
+ * for a value. Inside a `Field` (a `flex-col`, so the child stretches)
+ * or under `w-full`, the trigger used to become a bar with the value
+ * floating in the middle and the chevron beside it. The value now sits
+ * at the inline start, in a span that grows into the spare width and
+ * ends in an ellipsis when there is too little, and the chevron sits at
+ * the inline end. `justify-between` is passed through `className`, which
+ * `toClassName` merges over `Button`'s `justify-center` rather than
+ * leaving the two to stylesheet order — and the growing span makes the
+ * result correct even if a caller's `className` overrides it. A trigger
+ * at its content width has no spare width to distribute, so it renders
+ * exactly as it did before.
  */
 export const Picker = ({
   appearance = "outline",
@@ -154,6 +170,18 @@ export const Picker = ({
 
   const triggerText = currentText ?? placeholder ?? ""
 
+  const triggerContent =
+    currentOption === undefined
+      ? placeholder
+      : currentOption.label
+
+  // No content, no span: an empty flex item would still earn a `gap`
+  // before the chevron and widen a content-width trigger.
+  const hasTriggerContent =
+    triggerContent !== undefined &&
+    triggerContent !== null &&
+    triggerContent !== ""
+
   return (
     <Listbox
       // A disabled control must not open, and hiding the panel is a
@@ -170,7 +198,10 @@ export const Picker = ({
           {...buttonProps}
           appearance={appearance}
           aria-label={`${label}: ${triggerText}`}
-          className={className}
+          className={toClassName(
+            "justify-between",
+            className,
+          )}
           iconEnd={iconEnd}
           intent={intent}
           isDisabled={isDisabled}
@@ -182,9 +213,17 @@ export const Picker = ({
           size={size}
           type="button"
         >
-          {currentOption === undefined
-            ? placeholder
-            : currentOption.label}
+          {hasTriggerContent ? (
+            // Not `truncate`. Its `overflow: hidden` clips the
+            // anti-aliased edge pixels of glyphs and a rich label's
+            // badge, so a content-width trigger stopped rendering
+            // pixel-identically to the unwrapped one. `overflow-x-clip`
+            // leaves the block axis alone, and `-mx-1 px-1` moves the
+            // inline clip edge 4px outward without moving the text.
+            <span className="-mx-1 min-w-0 grow overflow-x-clip px-1 text-start text-ellipsis whitespace-nowrap">
+              {triggerContent}
+            </span>
+          ) : null}
         </Button>
       }
     />

package/src/index.ts

@@ -235,6 +235,14 @@ export type { FieldGroupProps } from "./Field/FieldGroup.tsx"
 export { FieldGroup } from "./Field/FieldGroup.tsx"
 export type { FileDropZoneProps } from "./FileDropZone/FileDropZone.tsx"
 export { FileDropZone } from "./FileDropZone/FileDropZone.tsx"
+export type {
+  GroupedListGroup,
+  GroupedListHeadingLevel,
+  GroupedListItem,
+  GroupedListProps,
+  GroupedListSize,
+} from "./GroupedList/GroupedList.tsx"
+export { GroupedList } from "./GroupedList/GroupedList.tsx"
 export type { HeaderProps } from "./Header/Header.tsx"
 export { Header } from "./Header/Header.tsx"
 export type { IconButtonProps } from "./IconButton/IconButton.tsx"

package/src/sourceRules.test.ts

@@ -623,7 +623,10 @@ test("the barrel is the only place components are re-exported", async () => {
   // TableViewport owns readable comparisons and full-window expansion.
   // MetricCard shares prominent values and category-coloured icons through Card.
   // ComparisonChart and TableColumns share compact comparisons and column controls.
-  expect(componentNames.length).toBe(77)
+  // GroupedList owns rows under group headings; castkit, tally-marks
+  // and whereabouts each drew it by hand. `GroupedListRow.tsx` is its
+  // member and stays out of this count by the `<Name>/<Name>.tsx` rule.
+  expect(componentNames.length).toBe(78)
 
   for (const name of componentNames) {
     expect(barrel).toContain(`export { ${name} }`)

package/src/Button/Button.test.tsx

@@ -1,114 +0,0 @@
-import {
-  composeStories,
-  composeStory,
-} from "@storybook/react"
-import { expect, fn, userEvent } from "storybook/test"
-import { test } from "vitest"
-
-import { mountStory } from "../mountStory.testHelpers.ts"
-import { expectAgentDrivable } from "../testing/index.ts"
-import meta, * as stories from "./Button.stories.tsx"
-
-const { AllStates, Playground, Loading } =
-  composeStories(stories)
-
-test("is drivable by role and name", async () => {
-  const { canvas } = await mountStory(Playground)
-
-  expectAgentDrivable(canvas, {
-    name: "Start rip",
-    role: "button",
-  })
-})
-
-/**
- * The keyboard contract, asserted rather than assumed: Tab reaches
- * it, Enter activates, Space activates. Every hand-rolled
- * `<div onClick>` in the fleet fails all three.
- */
-test("Tab reaches it, and Enter and Space both activate", async () => {
-  const onClick = fn()
-
-  const { canvas } = await mountStory(
-    composeStory(
-      { args: { children: "Start rip", onClick } },
-      meta,
-    ),
-  )
-
-  const button = expectAgentDrivable(canvas, {
-    name: "Start rip",
-    role: "button",
-  })
-
-  await userEvent.tab()
-
-  await expect(button).toHaveFocus()
-
-  await userEvent.keyboard("{Enter}")
-
-  await expect(onClick).toHaveBeenCalledTimes(1)
-
-  await userEvent.keyboard(" ")
-
-  await expect(onClick).toHaveBeenCalledTimes(2)
-})
-
-test("a disabled button is skipped by Tab and ignores a click", async () => {
-  const onClick = fn()
-
-  const { canvas } = await mountStory(
-    composeStory(
-      {
-        args: {
-          children: "Start rip",
-          isDisabled: true,
-          onClick,
-        },
-      },
-      meta,
-    ),
-  )
-
-  const button = canvas.getByRole("button", {
-    name: "Start rip",
-  })
-
-  await userEvent.click(button)
-
-  // A `<div role="button">` with a guard clause looks the same and
-  // is not the same: a real `disabled` is skipped by Tab, ignored
-  // by click, and reported to AT.
-  await expect(onClick).not.toHaveBeenCalled()
-  await expect(button).toBeDisabled()
-
-  await userEvent.tab()
-
-  await expect(button).not.toHaveFocus()
-})
-
-test("loading disables the button and announces the work", async () => {
-  const { canvas } = await mountStory(Loading)
-
-  const button = expectAgentDrivable(canvas, {
-    name: /Ripping disc 3/,
-    role: "button",
-  })
-
-  await expect(button).toBeDisabled()
-  await expect(button).toHaveAttribute("aria-busy", "true")
-
-  // The spinner's label lives in a `role="status"`, so a screen
-  // reader hears the work start rather than only seeing it.
-  await expect(
-    canvas.getByRole("status"),
-  ).toBeInTheDocument()
-})
-
-test("the states board really renders a busy button", async () => {
-  const { canvas } = await mountStory(AllStates)
-
-  await expect(
-    canvas.getByRole("button", { name: /loading/i }),
-  ).toHaveAttribute("aria-busy", "true")
-})