Design system: density tiers via data-density and size props - #45
Merged
Conversation
Controls read their height, padding and type from per-tier role tokens (--ctl-h, --ctl-px, --ctl-fs, --btn-px, --btn-fs, --row-py, --row-px, --item-py, --th-fs, --gap, --gap-tight). A [data-density] attribute on any element sets them for its subtree; a component `size` prop sets them on one element via [data-size]. Tiers are xs, sm and md; an unset size inherits from the region, so Button no longer defaults to md. Button, Input, Textarea, Select (trigger and popup), Autocomplete, Tabs, Menu.Popup, Toolbar, Table and SearchBar take `size`. Table `compact` keeps its frameless look and now means size="sm"; a pill Input defaults to sm. Popups are portaled to <body>, so they take `size` rather than inheriting a mid-page region. vuetify.css restates min-height for Button and Tab, whose height the geometry reset zeroed now that it comes from --ctl-h rather than padding.
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
1 participant
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.
What
Controls take their height, side padding and type size from per-tier tokens in
tokens.css:--ctl-h,--ctl-px,--ctl-fs,--btn-px,--btn-fs,--row-py,--row-px,--item-py,--th-fs,--gap,--gap-tight. Tiers arexs,sm,md.Two ways to pick a tier, both plain CSS so static HTML, Solara and JupyterLab get them too:
data-density="comfortable" | "compact"on any element sets the tokens for its subtree (compact= thesmtier).size="xs" | "sm" | "md"on a component sets them on that one element viadata-size. An element's owndata-sizewins over an inherited region; unset, it inherits.sizeis on Button, Input, Textarea, Select.Trigger, Select.Popup, Autocomplete, Tabs.Root, Menu.Popup, Toolbar.Root, Table and SearchBar. Popups are portaled to<body>, so they takesizerather than inheriting a mid-page region.Behaviour changes
size="md"— an unset size inherits from the region. Explicit sizes are unchanged in meaning.compactkeeps the frameless look and now also meanssize="sm";sizealone keeps the frame.size="sm".size(width in characters) is dropped from Input, Textarea, Autocomplete and SearchBar props; the fields are 100% wide anyway.vuetify.css:min-height: var(--ctl-h)restated for Button and Tab, whose height the geometry reset would otherwise zero.Pixel changes at
md: Button 35→34 (sm 29→30); Select trigger 30→34, matching Input; table header 31→35 (padding 6/10 → 8/12); pill input 28→30. Everything else measures the same as before.Not in this PR
Tree, Chip, Pagination, SegmentedControl, Row and Field are untouched. No
<Theme>component; the data grid is separate.Checks
tsc --noEmit,eslint --max-warnings=0,prettier --check,vitest run src/design-system(251 tests),pytest tests(47 tests) all pass. Heights measured in the showcase as served and withdata-density="compact"on<html>: every control without an explicit size drops from the md to the sm tier; explicit sizes hold.