Skip to content

Add Admin › Tests › Input Sizing test page#842

Draft
amcclain wants to merge 2 commits into
developfrom
input-sizing-audit
Draft

Add Admin › Tests › Input Sizing test page#842
amcclain wants to merge 2 commits into
developfrom
input-sizing-audit

Conversation

@amcclain
Copy link
Copy Markdown
Member

XH-facing diagnostic harness supporting the hoist-react input-sizing audit (xh/hoist-react#4287 and related tickets #3300, #4085, #2421). Lives alongside the other admin test panels - not shipped in the user-facing Toolbox app.

What it does

  • Renders a specimen per layout-capable desktop input (12 total: text/number/textArea/select/picker x2/dateInput/slider/segmentedControl/buttonGroupInput/codeInput/jsonInput) inside a configurable parent container (block / hbox / vbox, adjustable width / height / gap).
  • Sidebar controls for width, flex, minWidth, maxWidth applied uniformly to every specimen, so the same scenario can be compared across inputs at a glance.
  • Live per-specimen measurement: container content width vs. the input's rendered outer width, with a red mismatch indicator when a fill-expected prop (flex, width: '100%', width: null + CSS override) was set but the input didn't fill.
  • Free-form CSS override editor (codeInput, mode: 'css') whose rules auto-wrap in a .tb-input-sizing-test__specimen-container { ... } CSS-nesting block, so selectors only affect the specimens. Lets a developer type the exact CSS they'd try in their own app and see who stretches vs. clips.

What it already surfaces

With flex: 1 applied to every specimen in an hbox container:

  • Fill correctly: textInput, textArea, select, slider, buttonGroupInput, codeInput, jsonInput
  • Fail (short): numberInput, picker (single + multi), dateInput, segmentedControl

New finding beyond the tickets: Blueprint's NumericInput forwards style to the inner <input>, not the outer .bp6-numeric-input div - a third flavor of the "wrong element" problem the audit will address.

Companion PR

Requires the cssMode opt-in file landed in xh/hoist-react#4346.

XH-facing diagnostic harness for the desktop-input sizing audit
(xh/hoist-react#4287 and related). Not shipped in the user-facing
Toolbox app - lives alongside the other admin test panels.

- Renders a specimen per layout-capable desktop input (12 total) inside
  a configurable parent container (block / hbox / vbox, adjustable
  width/height/gap).
- Sidebar controls for `width`, `flex`, `minWidth`, `maxWidth` applied
  uniformly to every specimen, so the same scenario can be compared
  across inputs.
- Live per-specimen measurement: container content width vs. the
  input's rendered outer width, with a mismatch indicator when a
  fill-expected prop (flex, width:100%, width:null + CSS) is set.
- Free-form CSS override editor (codeInput, mode: css) whose rules are
  auto-wrapped in a `.tb-input-sizing-test__specimen-container { ... }`
  CSS-nesting block, so selectors only affect the specimens below.
  Requires the matching `@xh/hoist/desktop/cmp/input/modes/cssMode`
  opt-in import on the hoist side.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant