@estiva-app/ui 0.24.0 → 0.24.1

package/src/Skeleton.tsx

@@ -21,7 +21,7 @@ const ROW_BAR_WIDTHS = [150, 100, 170, 120, 90, 140, 110, 160]
 /** A 32px row: a 16px square and a bar, like a row with a face and a name. */
 export function SkeletonRow({ barWidth = 130 }: { barWidth?: number }) {
   return (
-    <div className="flex items-center gap-2 px-2 h-[32px] rounded-lg">
+    <div className="flex shrink-0 items-center gap-2 px-2 h-[32px] rounded-lg">
       <SkeletonBar className="w-4 h-4 shrink-0" />
       <SkeletonBar className="h-3.5" style={{ width: barWidth }} />
     </div>

package/src/TextInput.mdx

@@ -53,6 +53,7 @@ It does these by itself. Write none of them around it.
 | It does | So you never write | Refused when written by hand |
 |---|---|---|
 | Inside a `Field`, takes its name from the Field's label, and its error state | an `id` / `htmlFor` pair, or `aria-invalid` |  |
+| Keeps its height in a scrolling column | `shrink-0` |  |
 
 ## Props
 

package/src/TextInput.tsx

@@ -38,7 +38,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(function T
         'bg-bg-inset border border-border-default hover:border-border-strong focus:border-border-focus rounded-lg',
         // The small size is the small Select's trigger, class for class.
         size === 'default' && 'px-3 py-2 text-input-value',
-        size === 'small' && 'h-6 px-2 text-caption',
+        size === 'small' && 'h-6 min-h-6 px-2 text-caption',
         'text-text-primary placeholder:text-text-muted',
         'outline-none transition-colors',
         'disabled:pointer-events-none disabled:bg-bg-disabled disabled:text-text-disabled',

package/src/Toolbar.mdx

@@ -69,8 +69,8 @@ import { Toolbar, ToolbarButton, ToolbarSeparator } from '@estiva-app/ui'
 A toolbar floats over what it acts on — a card, a paragraph, an image — so it
 draws the elevated surface that separates it from that: **the same `MenuPanel`
 a `Menu` draws**, because a floating strip and a floating list are the same
-box. Peek had built this twice and the two had already drifted: one
-`rounded-sm` with `shadow-sm`, the other `rounded-lg` with `shadow-lg`.
+box. Built twice by hand, the two drift: one `rounded-sm` with `shadow-sm`,
+the other `rounded-lg` with `shadow-lg`.
 
 `surface={false}` for a strip inside something that draws that box already — a
 `Popover`, a dialog, a card's own panel.
@@ -82,6 +82,13 @@ why the placement is its job and not arithmetic of ours.
 
 <Canvas of={ToolbarStories.OnAnExistingSurface} />
 
+**A control that goes somewhere is a `ToolbarLink`** with an `href`: the
+strip's look, in the same walk, with a real address, so a Ctrl+click opens a
+new tab. A `ToolbarButton` cannot be a link. A place you cannot go is left out
+of the strip rather than disabled.
+
+<Canvas of={ToolbarStories.WithALink} />
+
 ## What it owns
 
 It does these by itself. Write none of them around it.

package/src/Toolbar.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
-import { IconArrowBackUp, IconArrowForwardUp, IconBold, IconItalic, IconLink, IconSquareRounded, IconUnderline } from '@tabler/icons-react'
+import { IconArrowBackUp, IconArrowForwardUp, IconArrowUpRight, IconBold, IconItalic, IconLink, IconSquareRounded, IconUnderline } from '@tabler/icons-react'
 import { useState } from 'react'
 import { IconButton } from './IconButton'
 import { Popover } from './Popover'
-import { Toolbar, ToolbarButton, ToolbarInput, ToolbarSeparator } from './Toolbar'
+import { Toolbar, ToolbarButton, ToolbarInput, ToolbarLink, ToolbarSeparator } from './Toolbar'
 
 /**
  * A strip of controls that behaves as **one** control: Tab in, arrow keys
@@ -100,6 +100,23 @@ export const WithADisabledControl: Story = {
   ),
 }
 
+/**
+ * A control that goes somewhere, beside controls that do something. The link
+ * has the buttons' look and joins the same walk; it has a real address, so a
+ * Ctrl+click opens a new tab.
+ */
+export const WithALink: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Toolbar aria-label="Item actions" surface={false}>
+      <ToolbarButton aria-label="Item one" tooltip="Item one">{icon}</ToolbarButton>
+      <ToolbarLink href="#item" aria-label="Open the item" tooltip="Open">
+        <IconArrowUpRight size={16} stroke={1.5} />
+      </ToolbarLink>
+    </Toolbar>
+  ),
+}
+
 /** Down rather than across: ↑ and ↓ walk it. */
 export const Vertical: Story = {
   parameters: { controls: { disable: true } },

package/src/Toolbar.test.tsx

@@ -7,7 +7,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import { cleanup, render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import { IconButton } from './IconButton'
-import { Toolbar, ToolbarButton, ToolbarInput, ToolbarSeparator } from './Toolbar'
+import { Toolbar, ToolbarButton, ToolbarInput, ToolbarLink, ToolbarSeparator } from './Toolbar'
 import { Menu, MenuItem } from './Menu'
 import { Popover } from './Popover'
 
@@ -176,6 +176,29 @@ describe('Toolbar', () => {
   })
 })
 
+describe('a link in the strip (F3)', () => {
+  it('is a real link, in the walk with the buttons beside it', async () => {
+    const user = userEvent.setup()
+    render(
+      <>
+        <button type="button">Before</button>
+        <Toolbar aria-label="Item actions">
+          <ToolbarButton aria-label="One">{dot}</ToolbarButton>
+          <ToolbarLink href="/somewhere" aria-label="Open" tooltip="Open">{dot}</ToolbarLink>
+        </Toolbar>
+      </>,
+    )
+    const link = screen.getByRole('link', { name: 'Open' })
+    expect(link.getAttribute('href')).toBe('/somewhere')
+    await user.click(screen.getByRole('button', { name: 'Before' }))
+    await user.tab()
+    expect(focused()).toBe('One')
+    await user.keyboard('{ArrowRight}')
+    expect(document.activeElement).toBe(link)
+    expect((await screen.findByRole('tooltip')).textContent).toBe('Open')
+  })
+})
+
 describe('a loose row, for comparison', () => {
   /** The measurement the component exists to change: the same three buttons
    *  outside a toolbar are three Tab stops. */

package/src/Toolbar.tsx

@@ -129,6 +129,28 @@ export function ToolbarButton({ ref, disabled, disabledReason, ...props }: Toolb
   )
 }
 
+/**
+ * A link in the strip: the strip's own look, and it goes somewhere. It has a
+ * real address, so a Ctrl+click or a middle click opens a new tab, which a
+ * button that navigates cannot do.
+ *
+ * It is `IconButton`'s `href` joined to the toolbar's walk: Base UI's
+ * `Toolbar.Link`. A `ToolbarButton` cannot be a link — Base UI expects a real
+ * button there and warns when it gets an anchor (UIG-14, finding F3).
+ *
+ * A link is never disabled: a place you cannot go is left out of the strip.
+ */
+export interface ToolbarLinkProps extends Omit<IconButtonProps, 'href' | 'disabled' | 'disabledReason' | 'pressed' | 'type' | 'ref'> {
+  href: string
+  ref?: Ref<HTMLAnchorElement>
+}
+
+/** An `IconButton` that is a link, and an item of a `Toolbar`: the arrow keys
+ *  reach it like the buttons beside it. */
+export function ToolbarLink({ ref, href, ...props }: ToolbarLinkProps) {
+  return <BaseToolbar.Link ref={ref} render={<IconButton href={href} {...props} />} />
+}
+
 /**
  * A text field inside the strip — the link editor in a selection toolbar.
  *

package/src/Tooltip.mdx

@@ -52,7 +52,8 @@ import { WithTooltip } from '@estiva-app/ui'
   `wrapperClassName="min-w-0 shrink"`.
 - **`inline`** for a trigger inside a line of text — a reference, a name in a
   sentence: the wrapper is a `<span>`, because a `<div>` is not allowed inside
-  a paragraph.
+  a paragraph. It sits at the top of the line by itself, so the line keeps its
+  height; add no wrapper of your own around it.
 - A label longer than 320px wraps onto more lines rather than running off the
   screen; a short one stays one line at 30px.
 - **`Button` and `IconButton` need no wrapper**: pass `tooltip` (or

package/src/Tooltip.test.tsx

@@ -78,6 +78,28 @@ describe('WithTooltip', () => {
     expect(errors).toEqual([])
   })
 
+  // F1: without `align-top` a chip in the wrapper drops 0.2px and its line grows
+  // from 19.6 to 20px; the apps may not add the class to the part, so it carries it.
+  it('inline: the wrapper sits at the top of the line by itself', () => {
+    render(
+      <p>
+        <WithTooltip inline label="Item one">
+          <span>Item one</span>
+        </WithTooltip>
+      </p>,
+    )
+    expect(screen.getByText('Item one').parentElement?.className.split(' ')).toContain('align-top')
+  })
+
+  it('a block wrapper is not moved', () => {
+    render(
+      <WithTooltip label="Item one">
+        <span>Item one</span>
+      </WithTooltip>,
+    )
+    expect(screen.getByText('Item one').parentElement?.className.split(' ')).not.toContain('align-top')
+  })
+
   it('takes wrapperClassName, which is what keeps a truncating label truncating', () => {
     const { container } = render(
       <WithTooltip label="A long name" wrapperClassName="min-w-0 shrink">

package/src/Tooltip.tsx

@@ -171,7 +171,7 @@ export function WithTooltip({ label, shortcut, placement = 'top', wrapperClassNa
           can carry the handlers for all of them. A control that IS the trigger
           (Button, IconButton) composes the part onto itself instead, which is
           what lets a `Dialog.Close` or a `Menu.Trigger` be one of those. */}
-      <BaseTooltip.Trigger delay={OPEN_DELAY} render={<Wrapper className={cn('inline-flex shrink-0', wrapperClassName)} />}>
+      <BaseTooltip.Trigger delay={OPEN_DELAY} render={<Wrapper className={cn('inline-flex shrink-0', inline && 'align-top', wrapperClassName)} />}>
         {children}
       </BaseTooltip.Trigger>
       <TooltipSurface label={label} shortcut={shortcut} placement={placement} />

package/src/TopBar.mdx

@@ -57,9 +57,16 @@ import { TopBar, IdentityMenu, SearchInput } from '@estiva-app/ui'
 - The frame is desktop-only for now — there is no narrow-screen
   behaviour; the menu button collapses panels, it does not open a drawer.
 
+- The bar is 52px tall, 20px in on the left and 26px on the right, 16px between
+  its slots.
+
 ## What it owns
 
-Nothing. It only draws. Clicks and keys are yours.
+It does these by itself. Write none of them around it.
+
+| It does | So you never write | Refused when written by hand |
+|---|---|---|
+| Keeps its 52px in a scrolling column | `shrink-0` |  |
 
 ## Props
 

package/src/heights.test.tsx

@@ -0,0 +1,78 @@
+// @vitest-environment jsdom
+/**
+ * A part with a set height keeps it in a scrolling column (UIG-15; UIG-14 cards
+ * T1, M4, M6). A scrolling flex column squashes any child that may shrink:
+ * measured in Chrome, a 32px SectionHeader went to 24px, a Skeleton row to 18px,
+ * a Button to 18px. jsdom draws nothing, so this pins the class that prevents it;
+ * the measurement is in the record.
+ *
+ * Rows that span their column refuse to shrink (`shrink-0`). Controls, which
+ * mostly sit in rows, keep a minimum height instead: `shrink-0` would also stop
+ * a row from narrowing them.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { cleanup, render, screen } from '@testing-library/react'
+import { Button } from './Button'
+import { PersonTrigger } from './PersonTrigger'
+import { RailItem } from './RailItem'
+import { Reaction } from './Reaction'
+import { SectionHeader } from './SectionHeader'
+import { Select } from './Select'
+import { SkeletonRow } from './Skeleton'
+import { TextInput } from './TextInput'
+
+afterEach(cleanup)
+
+const classes = (el: Element | null) => (el?.getAttribute('class') ?? '').split(' ')
+
+describe('a part with a set height keeps it in a scrolling column', () => {
+  it('SectionHeader: shrink-0', () => {
+    const { container } = render(<SectionHeader title="Group" />)
+    expect(classes(container.querySelector('[class*="h-[32px]"]'))).toContain('shrink-0')
+  })
+
+  it('SkeletonRow: shrink-0', () => {
+    const { container } = render(<SkeletonRow />)
+    expect(classes(container.firstElementChild)).toContain('shrink-0')
+  })
+
+  it('RailItem: a set 48px, and shrink-0', () => {
+    render(<RailItem href="#" label="Item" icon={<span />} />)
+    const tile = classes(screen.getByRole('link'))
+    expect(tile).toContain('h-12')
+    expect(tile).toContain('shrink-0')
+  })
+
+  it('Button: a minimum height at each size', () => {
+    render(
+      <>
+        <Button>Default</Button>
+        <Button size="small">Small</Button>
+      </>,
+    )
+    expect(classes(screen.getByRole('button', { name: 'Default' }))).toContain('min-h-8')
+    expect(classes(screen.getByRole('button', { name: 'Small' }))).toContain('min-h-6')
+  })
+
+  it('Select and TextInput, small: a minimum height', () => {
+    render(
+      <>
+        <Select size="small" value="a" onChange={() => {}} options={[{ value: 'a', label: 'A' }]} ariaLabel="Pick" />
+        <TextInput size="small" aria-label="Type" />
+      </>,
+    )
+    expect(classes(screen.getByRole('combobox', { name: 'Pick' }))).toContain('min-h-6')
+    expect(classes(screen.getByRole('textbox', { name: 'Type' }))).toContain('min-h-6')
+  })
+
+  it('PersonTrigger and Reaction: a minimum height', () => {
+    render(
+      <>
+        <PersonTrigger name="Ana Duarte" />
+        <Reaction emoji="👍" count={2} aria-label="Thumbs up" />
+      </>,
+    )
+    expect(classes(screen.getByRole('button', { name: /Ana Duarte/ }))).toContain('min-h-8')
+    expect(classes(screen.getByRole('button', { name: 'Thumbs up' }))).toContain('min-h-6')
+  })
+})

package/src/index.ts

@@ -68,7 +68,7 @@ export { NavItem, type NavItemProps } from './NavItem'
 export { Popover, type PopoverProps } from './Popover'
 export { ScrollArea, type ScrollAreaProps } from './ScrollArea'
 export { ReactionPicker, type ReactionOption, type ReactionPickerProps } from './ReactionPicker'
-export { Toolbar, ToolbarButton, ToolbarInput, ToolbarSeparator, type ToolbarProps, type ToolbarButtonProps, type ToolbarInputProps } from './Toolbar'
+export { Toolbar, ToolbarButton, ToolbarInput, ToolbarLink, ToolbarSeparator, type ToolbarProps, type ToolbarButtonProps, type ToolbarInputProps, type ToolbarLinkProps } from './Toolbar'
 export { PreviewCard, type PreviewCardProps } from './PreviewCard'
 export { Person, type PersonProps } from './Person'
 export { Rail, type RailProps } from './Rail'
@@ -81,6 +81,7 @@ export { Reaction, type ReactionProps } from './Reaction'
 export { SearchInput, type SearchInputProps } from './SearchInput'
 export { SectionHeader, type SectionAction, type SectionHeaderProps } from './SectionHeader'
 export { ContainerHeader, type ContainerHeaderProps } from './ContainerHeader'
+export { ListColumn, type ListColumnProps } from './ListColumn'
 export { CollapsibleSection, type CollapsibleSectionProps } from './CollapsibleSection'
 export { SectionLabel } from './SectionLabel'
 export { Tabs, type TabDef, type TabsProps } from './Tabs'

package/src/registry/registry.test.ts

@@ -45,17 +45,17 @@ describe('the registry builds', () => {
     expect(registry.entries.map((one) => one.name).sort()).toEqual(values.map((one) => one.name).sort())
   })
 
-  it('counts 82 names over 54 files: 75 components, 6 helpers and 1 hook (ContainerHeader joined in UIG-13)', () => {
+  it('counts 84 names over 55 files: 77 components, 6 helpers and 1 hook (ListColumn and ToolbarLink joined in UIG-14)', () => {
     // The reconciliation GATES.md §24 explains. If this changes, that changes.
     const kinds = registry.entries.reduce<Record<string, number>>((all, one) => ({ ...all, [one.kind]: (all[one.kind] ?? 0) + 1 }), {})
-    expect(kinds).toEqual({ component: 75, helper: 6, hook: 1 })
-    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(54)
+    expect(kinds).toEqual({ component: 77, helper: 6, hook: 1 })
+    expect(new Set(registry.entries.map((one) => one.sourceFile)).size).toBe(55)
   })
 
   it('gives every entry a purpose, from its own page or from the comment above it', () => {
     expect(registry.entries.filter((one) => one.purpose.trim() === '')).toEqual([])
-    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(54)
-    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(28)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'page').length).toBe(55)
+    expect(registry.entries.filter((one) => one.purposeFrom === 'comment').length).toBe(29)
   })
 
   it('takes a name with a page of its own from the page, and a name without one from the code', () => {
@@ -278,7 +278,7 @@ describe('the ids point at something', () => {
 describe('a second parser agrees', async () => {
   const docgen = await import('react-docgen').catch(() => null)
 
-  it.skipIf(!docgen)('finds the same props on all 75 components', async () => {
+  it.skipIf(!docgen)('finds the same props on all 77 components', async () => {
     if (!docgen) return
     const resolver = new docgen.builtinResolvers.FindExportedDefinitionsResolver({ limit: 0 })
     const byName = new Map(registry.entries.map((one) => [one.name, one]))
@@ -321,12 +321,14 @@ describe('a second parser agrees', async () => {
 const INHERITED_WITH_A_DEFAULT = new Set(['Button.type', 'IconButton.type', 'TextInput.type', 'SearchInput.placeholder'])
 
 /**
- * The twelve where **this registry is right and `react-docgen` is not**.
+ * The eighteen where **this registry is right and `react-docgen` is not**.
  *
  * `IdentityPanelProps extends Omit<IdentityMenuProps, 'compact'>` and
  * `PersonTriggerProps extends Omit<PersonProps, 'className'>`: docgen does not
  * follow a heritage clause wrapped in `Omit`, so it reports neither `me` nor
- * `signedIn`, which `IdentityPanel` *requires*. Checked against the source —
+ * `signedIn`, which `IdentityPanel` *requires*. `ToolbarLinkProps extends
+ * Omit<IconButtonProps, …>` (UIG-14, F3) is the same: docgen reports none of
+ * the IconButton props it keeps. Checked against the source —
  * `IdentityMenuProps` declares both, and `IdentityPanel` spreads `...rest`
  * straight into `IdentityRows`, which destructures them.
  *
@@ -346,6 +348,12 @@ const DOCGEN_STOPS_AT_OMIT = new Set([
   'PersonTrigger.picture',
   'PersonTrigger.fallback',
   'PersonTrigger.size',
+  'ToolbarLink.variant',
+  'ToolbarLink.glow',
+  'ToolbarLink.tooltip',
+  'ToolbarLink.tooltipShortcut',
+  'ToolbarLink.tooltipPlacement',
+  'ToolbarLink.children',
 ])
 
 describe('ui:find', () => {