Dechonk the UI: default controls to the small size variant

[wailingwombat]

Addresses PROD-4897 — dechonk the UI.

The theory behind this PR is that the console isn't chonky because its controls are badly designed, it's chonky because it defaults to the medium variant of controls that already ship a perfectly good small variant. Most call sites already know this: 302 of the 535 <Button> usages in assets/src pass small explicitly. This flips the defaults in the design system so the remaining ones come along too, rather than editing hundreds of call sites.

No call site was touched and no size variant was removed, so reverting is a matter of flipping the defaults back.

What changes

Controls now render at 32px instead of 38–40px.

Component	Before	After
Button	medium, 38px, 14px type	small, 32px, 12px type
Input2 (and ComboBox, which wraps it)	medium, 40px, 14px type	small, 32px, 12px type
Select / SelectButton	medium, 40px	small, 32px
Legacy honorable Input	40px, 14px type	32px, 12px type

Button and Input2 gain an explicit medium prop so anything that genuinely needs the old size can ask for it, and an explicit small still wins over it. large is untouched, and the 16 buttons that pass it stay large.

Dropdown menu rows got tighter. ListBoxItem was 8px vertical / 16px horizontal padding, making a 36px row hang off a control that is now 32px. It's now 4px / 12px, so a menu row matches the trigger that opened it. ListBoxFooter moves in step.

Multi-line inputs keep the larger type. Shrinking a textarea's font to 12px makes prose genuinely harder to write, so the smaller type is set on honorable's InputBase part rather than on the Input root — textareas render through the TextArea part and never see it. Worth knowing if you touch this: setting caption: true on the root does not work here, because honorable resolves those typography flags from props and its caption resolver runs after body2 regardless of declaration order, so caption silently wins. That's also why the 12px is written out as fontSize/letterSpacing instead of using the alias, which would drag its own 16px line height along with it.

Bug fix in Select: the content padding read size === 'medium' ? 9 : 5, so a size="large" select silently rendered with small padding. It's now large ? 13 : medium ? 9 : 5, which lines the three sizes up with Input2 at 32 / 40 / 48px.

What this deliberately does not touch

Chips are already dense at 24px, IconFrame's medium is 32px and now lines up with the new control height, and table rows, tabs and card padding are a separate axis of chonk. If the control-size change lands well, those are the natural follow-ups.

Test Plan

tsc --build, eslint, prettier and both vitest suites (design system + console, 167 tests) pass.

Beyond that this is a pure default-size change with no behavioral surface, so verification was visual. I ran the design system Storybook and measured the rendered results in the browser:

• Default buttons now render identically to explicitly-small ones, and large buttons are still visibly larger.
• Input boxes measured 48px for large, 32px for default, 32px for small, with 14/12/12px type respectively.
• The textarea in the Multiline story measured 14px, confirming prose inputs kept the larger type.
• Nothing clipped, and icons stayed vertically centred.

Buttons — items 3 and 4 are the default size, items 5 and 6 are explicitly small, and they now match:

Button story showing default buttons matching the small variant

Select with its dropdown open — trigger and menu rows are now the same scale:

Select story with an open dropdown menu

Inputs — the first pair is large, the rest are default and small:

Input story showing large, default and small input sizes

To try it locally, run yarn start in assets/. The vite config aliases @pluralsh/design-system straight to design-system/src, so no design-system build step is needed. Worth looking at: rows that mix a Button with an IconFrame or a Select, forms that mix legacy Input with Input2, and long dropdown menus with description text on their items.

Test environment: https://console.your-env.onplural.sh/

Checklist

• I have added a meaningful title and summary to convey the impact of this PR to a user.
• If required, I have updated the Plural documentation accordingly.
• I have added tests to cover my changes.
• I have deployed the agent to a test environment and verified that it works as expected (required only when changing agent code).

Plural Flow: console

_{To show artifacts inline, enable in settings.}

  

[soffi-ai]

Soffi AI Summary

This PR reduces the visual density ("dechonks") of the Console UI by flipping the default size variant for core form controls — Button, Input2/ComboBox, Select/SelectButton, and the legacy honorable Input — from medium (38–40px) to small (32px). Rather than editing hundreds of individual call sites (302 of 535 Button usages already passed small explicitly), the defaults are changed in the design system itself so all remaining usages automatically inherit the tighter size.

Accompanying changes tighten dropdown list-item padding (from 8px/16px to 4px/12px) so menu rows visually match their now-shorter 32px triggers, add an explicit medium prop to Button and Input2 so sites that genuinely need the old size can opt back in, and fix a long-standing bug in Select where a size="large" select silently fell through to small padding. A targeted fix also scopes the font-size reduction to single-line inputs only, preserving body2 type for multiline textareas where 12px text would hinder prose writing.

Changes

Compact UI controls (32px default size)

• Flips the default size variant for Button, Input2/ComboBox, and Select/SelectButton from medium to small, reducing their height from 38–40px to 32px. Adds an explicit medium prop to Button and Input2 so individual call sites can opt back into the old size without touching the default. Also adjusts the legacy honorable Input theme to match, including font-size and letter-spacing aligned to the caption text style. (4d195a3)
• Tightens ListBoxItem row padding from 8px vertical / 16px horizontal to 4px / 12px, and ListBoxFooter from 6px / 16px to 4px / 12px, so dropdown menu rows visually match the 32px trigger controls that open them. (33815a0)
• Refactors the size-resolution logic in Input2 to mirror the Button pattern: explicit size prop wins first, then large, then medium, then small as the new default. Also documents in a comment that the legacy small boolean prop is accepted but now has no effect since small is the default. (a16e946)
• Fixes the size precedence so that an explicit small prop always wins over medium, preventing the two props from conflicting when both are present. (aeace24)
• Scopes the font-size reduction in the legacy honorable Input theme to single-line inputs only. Multiline inputs (textareas) retain body2 sizing because reducing prose text to 12px degrades readability when writing longer content. (8a8327d)

---

Updated: 2026-08-31 17:04 UTC

Deploy in Soffi

[github-actions]

Storybook preview: https://6a8c1fbd32d6c1cc8fc131a5-nowihblckw.chromatic.com/

[michaeljguarino]

plural review this