@estiva-app/ui 0.12.9 → 0.12.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@estiva-app/ui",
-  "version": "0.12.9",
+  "version": "0.12.10",
   "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/Menu.test.tsx

@@ -326,3 +326,23 @@ describe('rows on a bare MenuPanel', () => {
     expect(screen.queryByRole('group')).toBeNull()
   })
 })
+
+/** As `Popover`: the padding is the content's, and a caller sets it there
+ *  (PLAN Finding 60 — Peek's Later menu asked for `p-1` on `className` and got
+ *  12px from 0.12.6 on). */
+describe('Menu, padding', () => {
+  it('takes a caller’s padding on contentClassName, instead of the 8px', async () => {
+    render(
+      <Menu trigger={<Button>Open</Button>} contentClassName="p-1">
+        <MenuItem label="Item one" onClick={() => {}} />
+      </Menu>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }))
+    const row = await screen.findByRole('menuitem', { name: 'Item one' })
+    // The scrolling content is the box that carries the separator rule.
+    const content = row.closest('[class*="role=separator"]') as HTMLElement
+    const classes = content.className.split(/\s+/)
+    expect(classes).toContain('p-1')
+    expect(classes).not.toContain('p-2')
+  })
+})

package/src/Menu.tsx

@@ -142,8 +142,18 @@ export interface MenuProps {
    *  closes the menu by itself, so this is only for content that is not one. */
   actionsRef?: RefObject<{ close: () => void; unmount: () => void } | null>
   children: ReactNode
-  /** On the menu's surface — its width, its internal rhythm. */
+  /** On the menu's surface — its width. **Not its padding**: see
+   *  `contentClassName`. */
   className?: string
+  /**
+   * The padding around the rows, as a class. Default `p-2`, 8px.
+   *
+   * It is on the scrolling content, not on the panel, so the scrollbar hugs the
+   * panel's edge (D63) — and so a padding class on `className` adds to it
+   * rather than replacing it. Peek's Later menu asked for `p-1` there and got
+   * 12px from `0.12.6` on (PLAN Finding 60). Set it here.
+   */
+  contentClassName?: string
 }
 
 /**
@@ -163,7 +173,7 @@ const VIEWPORT_PAD = 8
 const HOVER_OPEN_DELAY = 0
 const HOVER_CLOSE_DELAY = 150
 
-export function Menu({ trigger, align = 'left', openOnHover = false, open, onOpenChange, actionsRef, children, className }: MenuProps) {
+export function Menu({ trigger, align = 'left', openOnHover = false, open, onOpenChange, actionsRef, children, className, contentClassName }: MenuProps) {
   return (
     <BaseMenu.Root
       open={open}
@@ -227,9 +237,11 @@ export function Menu({ trigger, align = 'left', openOnHover = false, open, onOpe
              * as tall as Floating UI allowed.
              *
              * A caller's `className` still lands on the panel, so a caller
-             * asking for different padding needs `contentClassName` — which is
-             * what `MenuPanel` is for when one is used on its own. */}
-            <ScrollArea viewportClassName="max-h-[var(--available-height)]" contentClassName="flex flex-col p-2 [&>[role=separator]]:mx-0">
+             * asking for different padding needs `contentClassName`. That
+             * sentence was written at 0.12.6 and the prop was not: a `p-1` on
+             * `className` added 4px to these 8px instead of replacing them
+             * (PLAN Finding 60). The prop exists now. */}
+            <ScrollArea viewportClassName="max-h-[var(--available-height)]" contentClassName={cn('flex flex-col p-2 [&>[role=separator]]:mx-0', contentClassName)}>
               <MenuContext.Provider value={{ openOnHover }}>{children}</MenuContext.Provider>
             </ScrollArea>
           </BaseMenu.Popup>

package/src/Popover.mdx

@@ -64,8 +64,10 @@ import { Popover } from '@estiva-app/ui'
   force it. Leave them off and the panel keeps its own state.
 - `ariaLabel` names the panel. A panel with a visible heading can point at it
   with `aria-labelledby` instead.
-- Width, padding and internal rhythm are yours, through `className` — the
-  panel is a surface, not a layout.
+- **Width goes on `className`, padding on `contentClassName`.** The padding
+  sits on the scrolling content so the scrollbar hugs the panel's edge, and a
+  padding class on `className` adds to it rather than replacing it. Default
+  8px; **a toolbar asks for `contentClassName="p-1"`**.
 
 <Canvas of={PopoverStories.FromATrigger} />
 

package/src/Popover.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react-vite'
 import { IconBold, IconItalic, IconLink } from '@tabler/icons-react'
-import { useRef, useState, type KeyboardEvent, useCallback } from 'react'
+import { useRef, useState, type KeyboardEvent } from 'react'
 import { Button } from './Button'
 import { MenuPanel } from './Menu'
 import { Popover } from './Popover'
@@ -105,7 +105,8 @@ export const AToolbar: Story = {
            when there is no room, which is the reason the placement is its job
            and not ours. */
         side="top"
-        className="w-auto min-w-0 p-1"
+        className="w-auto min-w-0"
+        contentClassName="p-1"
       >
         {/* The strip is a `Toolbar`, so the whole row is ONE Tab stop and the
             arrow keys walk it — four stops before, one after. */}
@@ -234,17 +235,18 @@ export const Capped: Story = {
   parameters: { controls: { disable: true }, layout: 'fullscreen' },
   render: function Capped() {
     /* Anchored and open, so the cap is the thing you see rather than a button
-       you have to press first. A rect is all an anchor needs. */
-    const [rect, setRect] = useState<DOMRect | null>(null)
-    const mark = useCallback((el: HTMLDivElement | null) => {
-      setRect(el ? el.getBoundingClientRect() : null)
-    }, [])
+       you have to press first. Anchored on the ELEMENT, held in state from a
+       callback ref: an element is re-measured. It used to be a rect read once
+       in the ref, and arriving at this story from another one read it before
+       the canvas was laid out — 0 × 0 at the corner, a 0px panel, only the
+       line of text showing (PLAN Finding 61). */
+    const [marker, setMarker] = useState<HTMLDivElement | null>(null)
     return (
       <div className="flex h-[420px] w-full items-center justify-center">
-        <div ref={mark} className="text-body-2 text-text-secondary">
+        <div ref={setMarker} className="text-body-2 text-text-secondary">
           twenty rows, capped at 160px
         </div>
-        <Popover anchor={rect} open ariaLabel="A long panel" className="w-[240px]" maxHeight="max-h-[160px]">
+        <Popover anchor={marker} open ariaLabel="A long panel" className="w-[240px]" maxHeight="max-h-[160px]">
           {Array.from({ length: 20 }, (_, i) => (
             <span key={i} className="text-body-2 text-text-primary py-1">
               Row {i + 1}

package/src/Popover.test.tsx

@@ -223,3 +223,41 @@ describe('Popover, centred on its anchor', () => {
     expect(positioner?.getAttribute('data-align')).toBe('center')
   })
 })
+
+/**
+ * The padding lives on the scrolling content, so the scrollbar hugs the panel
+ * (D63) — and a caller's padding has to land there too. At 0.12.6 a toolbar's
+ * `p-1` on `className` was added to the content's `p-2` instead of replacing
+ * it, and every toolbar in a Popover grew 8px a side (PLAN Finding 60).
+ * Measured in Chrome after the fix: the toolbar 5px inside the panel's edge,
+ * as on 0.12.5.
+ */
+describe('Popover, padding', () => {
+  // The scrolling content is the box that carries the separator rule.
+  const contentOf = (child: HTMLElement) => child.closest('[class*="role=separator"]') as HTMLElement
+
+  it('pads its content 8px by default', async () => {
+    render(
+      <Popover trigger={<Button>Open</Button>} ariaLabel="A panel">
+        <span>Inside</span>
+      </Popover>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }))
+    const content = contentOf(await screen.findByText('Inside'))
+    expect(content.className).toContain('p-2')
+  })
+
+  it('takes a caller’s padding on contentClassName, instead of the 8px', async () => {
+    render(
+      <Popover trigger={<Button>Open</Button>} ariaLabel="A toolbar" className="w-auto" contentClassName="p-1">
+        <span>Inside</span>
+      </Popover>,
+    )
+    await userEvent.click(screen.getByRole('button', { name: 'Open' }))
+    const content = contentOf(await screen.findByText('Inside'))
+    expect(content.className.split(/\s+/)).toContain('p-1')
+    expect(content.className.split(/\s+/)).not.toContain('p-2')
+    // And the panel carries none of it.
+    expect((await screen.findByRole('dialog')).className.split(/\s+/)).not.toContain('p-1')
+  })
+})

package/src/Popover.tsx

@@ -91,8 +91,23 @@ export interface PopoverProps {
    *  point at it instead, with `aria-labelledby`. */
   ariaLabel?: string
   children: ReactNode
-  /** On the panel's surface — its width, its internal rhythm. */
+  /**
+   * On the panel's surface — its width. **Not its padding**: see
+   * `contentClassName`.
+   */
   className?: string
+  /**
+   * The padding around the children, as a class. Default `p-2`, 8px — what a
+   * panel of rows or a small form wants. **A toolbar wants `p-1`.**
+   *
+   * The padding is on the scrolling content, not on the panel, so a scrollbar
+   * is drawn over it and hugs the panel's edge (D63). A padding class on
+   * `className` therefore does not replace this one — it adds to it: that is
+   * how every toolbar in a `Popover` grew 8px a side at `0.12.6`, measured 13px
+   * from the panel's edge to the toolbar where it had been 5px (PLAN Finding
+   * 60). Set it here.
+   */
+  contentClassName?: string
   /**
    * A cap on the scrolling box, as a class — `max-h-[360px]`. Without one the
    * panel grows to the room the positioner has, which is the right default for
@@ -121,7 +136,7 @@ export interface PopoverProps {
 const GAP = 4
 const VIEWPORT_PAD = 8
 
-export function Popover({ trigger, anchor, align = 'left', side = 'bottom', open, onOpenChange, finalFocus, actionsRef, ariaLabel, children, className, maxHeight }: PopoverProps) {
+export function Popover({ trigger, anchor, align = 'left', side = 'bottom', open, onOpenChange, finalFocus, actionsRef, ariaLabel, children, className, contentClassName, maxHeight }: PopoverProps) {
   /* A rect is not an element, so it becomes a virtual anchor — the one shape
      Floating UI takes besides an element. */
   const anchorTarget = useMemo(() => {
@@ -181,10 +196,11 @@ export function Popover({ trigger, anchor, align = 'left', side = 'bottom', open
             {/* As in Menu: the cap on the scrolling box, and the padding on the
                 content rather than the panel, so the bar is drawn over the
                 padding instead of 9px inside it (D63). A caller's `maxHeight`
-                replaces the cap — see the prop. */}
+                replaces the cap, and a caller's `contentClassName` the padding
+                — see the props. */}
             <ScrollArea
               viewportClassName={maxHeight ?? 'max-h-[var(--available-height)]'}
-              contentClassName="flex flex-col p-2 [&>[role=separator]]:mx-0"
+              contentClassName={cn('flex flex-col p-2 [&>[role=separator]]:mx-0', contentClassName)}
             >
               {children}
             </ScrollArea>

package/src/ReactionPicker.mdx

@@ -32,7 +32,7 @@ The reactions on offer, to choose one from — icon buttons holding emoji, on a
 ```tsx
 import { ReactionPicker } from '@estiva-app/ui'
 
-<Popover side="top" align="right" trigger={reactButton} ariaLabel="Reactions" className="w-auto p-1">
+<Popover side="top" align="right" trigger={reactButton} ariaLabel="Reactions" className="w-auto" contentClassName="p-1">
   <ReactionPicker
     surface={false}
     options={[

package/src/ReactionPicker.stories.tsx

@@ -62,7 +62,8 @@ export const FromATrigger: Story = {
             side="top"
             align="right"
             ariaLabel="Reactions"
-            className="w-auto min-w-0 p-1"
+            className="w-auto min-w-0"
+            contentClassName="p-1"
             trigger={
               <ToolbarButton aria-label="React" tooltip="React">
                 <IconMoodPlus size={16} stroke={1.5} />

package/src/Toolbar.stories.tsx

@@ -129,7 +129,8 @@ export const OnAnExistingSurface: Story = {
       /* Above the control that opened it: a strip acts on what is under it.
          `side` is the preference; Base UI flips it when there is no room. */
       side="top"
-      className="w-auto min-w-0 p-1"
+      className="w-auto min-w-0"
+      contentClassName="p-1"
     >
       <Toolbar aria-label="Formatting" surface={false}>
         <ToolbarButton aria-label="Item one" tooltip="Item one">{icon}</ToolbarButton>