Add Admin › Tests › Input Sizing test page#842
Draft
amcclain wants to merge 2 commits into
Draft
Conversation
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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
block/hbox/vbox, adjustable width / height / gap).width,flex,minWidth,maxWidthapplied uniformly to every specimen, so the same scenario can be compared across inputs at a glance.flex,width: '100%',width: null+ CSS override) was set but the input didn't fill.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: 1applied to every specimen in an hbox container:New finding beyond the tickets: Blueprint's
NumericInputforwardsstyleto the inner<input>, not the outer.bp6-numeric-inputdiv - a third flavor of the "wrong element" problem the audit will address.Companion PR
Requires the
cssModeopt-in file landed in xh/hoist-react#4346.