@estiva-app/ui 0.12.2 → 0.12.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "description": "Estiva's design tokens (the contract) and a small set of primitives (a convenience) for every Estiva app.",
   "type": "module",
   "license": "MIT",

package/src/Button.tsx

@@ -66,7 +66,13 @@ export function Button({
       focusableWhenDisabled={!!disabledReason}
       className={(state) =>
         cn(
-          'inline-flex items-center justify-center gap-1 rounded-md transition-colors font-sans font-medium',
+          // `self-center` for the same reason as IconButton's: a flex parent
+          // with no `items-*` stretches its children, and a button stretched to
+          // a column's height is not a button. `h-8` and `h-6` below set the
+          // height, and stretching overrode them. No caller in the suite wants
+          // a stretched one — checked across both apps and this package on
+          // 2026-09-11, and none passes `w-full` either.
+          'inline-flex items-center justify-center gap-1 rounded-md transition-colors font-sans font-medium self-center',
           size === 'default' && 'h-8 text-btn-default',
           size === 'small' && 'h-6 text-btn-small',
           // Extra right padding beside a leading icon, for optical balance.

package/src/IconButton.stories.tsx

@@ -47,3 +47,19 @@ export const AllVariants: Story = {
     </div>
   ),
 }
+
+/**
+ * A button is the size of its icon and its padding, whatever box it is dropped
+ * into. A flex parent with no `items-*` of its own stretches whatever is in it,
+ * and this one is 260px tall; the button stays 24px square.
+ */
+export const InATallRow: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <div className="flex h-[260px] w-[200px] justify-end rounded-lg border border-border-subtle p-4">
+      <IconButton aria-label="Settings">
+        <IconSettings className="size-4" stroke={1.5} />
+      </IconButton>
+    </div>
+  ),
+}

package/src/IconButton.test.tsx

@@ -102,4 +102,20 @@ describe('IconButton', () => {
     await user.tab()
     expect(document.activeElement).toBe(screen.getByRole('button', { name: 'After' }))
   })
+
+  /*
+    A flex parent with no `items-*` stretches its children. `shrink-0` does
+    not stop that — it is the other direction — so this button grew to 228px
+    tall in a 260px row (Katerina, 2026-09-11). jsdom computes no layout, so
+    the class is what can be asserted here; the story beside it is what shows
+    the pixels.
+  */
+  it('keeps its own size in a flex parent that would stretch it', () => {
+    render(
+      <div className="flex h-[260px]">
+        <IconButton aria-label="Edit">{icon}</IconButton>
+      </div>,
+    )
+    expect(screen.getByRole('button', { name: 'Edit' }).className).toContain('self-center')
+  })
 })

package/src/IconButton.tsx

@@ -49,7 +49,12 @@ export function IconButton({
       focusableWhenDisabled={!!disabledReason}
       className={(state) =>
         cn(
-          'flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 cursor-pointer',
+          // `shrink-0` stops a flex parent squashing the button; `self-center`
+          // stops one stretching it. Two different failures, and both have
+          // happened here: a row with no `items-*` drew this 24 wide and 228
+          // tall in Peek's TopicMoreMenu story (Katerina, 2026-09-11). A button
+          // is the size of its icon and its padding, whatever box it lands in.
+          'flex items-center justify-center p-1 rounded-lg transition-colors shrink-0 self-center cursor-pointer',
           !state.disabled && variant === 'primary' && 'bg-accent-primary hover:bg-accent-hover text-text-inverse',
           !state.disabled && variant === 'muted' && 'text-text-secondary hover:bg-bg-hover hover:text-text-primary',
           !state.disabled && variant === 'outlined' && 'border border-border-default hover:bg-bg-hover text-text-secondary',

package/src/Menu.test.tsx

@@ -288,6 +288,19 @@ describe('rows on a bare MenuPanel', () => {
     expect(screen.queryByRole('menuitem')).toBeNull()
   })
 
+  it('a default row is never shorter than 36px, and a tall one never shorter than 40', () => {
+    render(
+      <MenuPanel>
+        <MenuItem label="Default" onClick={() => {}} />
+        <MenuItem size="tall" label="Tall" onClick={() => {}} />
+      </MenuPanel>,
+    )
+    // jsdom computes no layout, so the floor class is what it can assert;
+    // the story beside it is what shows the pixels.
+    expect(screen.getByRole('button', { name: 'Default' }).className).toContain('min-h-9')
+    expect(screen.getByRole('button', { name: 'Tall' }).className).toContain('min-h-10')
+  })
+
   it('its onClick still runs', async () => {
     const user = userEvent.setup()
     const onPick = vi.fn()

package/src/Menu.tsx

@@ -20,9 +20,9 @@ import { SectionLabel } from './SectionLabel'
  *
  * What every menu shares, kept exactly: an elevated container with a
  * hairline border, 8px radius, 8px padding and the large shadow; items that
- * are 8px-radius rows, `px-2 py-1.5`, hover fill, 14px text, destructive
- * ones in the error colour; section headings as a SectionLabel in a 32px
- * row; and the two exits every menu has — Escape and a click outside.
+ * are 8px-radius rows, `px-2 py-1.5` and never shorter than 36px, hover
+ * fill, 14px text, destructive ones in the error colour; section headings
+ * as a SectionLabel in a 32px row; and the two exits every menu has — Escape and a click outside.
  *
  * **What stage 4 changed, and it is the first thing a keyboard user notices:
  * the arrow keys walk the rows.** ↑ and ↓ move between items and wrap, Home
@@ -368,11 +368,14 @@ function menuItemClassName({ size, selected, className }: { size: 'default' | 't
     // on exactly the same :hover, so they cannot come apart, and a row
     // lights and unlights crisply as the pointer crosses it.
     'group flex w-full shrink-0 cursor-pointer items-center rounded-lg text-left outline-none hover:bg-bg-hover data-[highlighted]:bg-bg-hover',
-    // tall: as tall as its content, never shorter than 40px (Katerina,
-    // 2026-09-01) — a single-line picker row sits at 40, a row with a
-    // 32px face and a role line comes out at its natural 48. One rule,
-    // not a hand-picked height per file.
-    size === 'tall' ? 'min-h-10 gap-3 px-3 py-1.5' : 'gap-2 px-2 py-1.5',
+    // Both sizes are as tall as their content and never shorter than a
+    // floor: 36px for a default row (Katerina, 2026-09-11), 40px for a
+    // tall one (Katerina, 2026-09-01). A single-line action row sits at
+    // 36, a picker row at 40, a row with a 32px face and a role line
+    // comes out at its natural 48. One rule, not a hand-picked height
+    // per file — Peek's Later menu had been forcing `h-9` for exactly
+    // this 36px and was the only menu in either app out of step.
+    size === 'tall' ? 'min-h-10 gap-3 px-3 py-1.5' : 'min-h-9 gap-2 px-2 py-1.5',
     selected && 'bg-bg-hover',
     className,
   )