Repository navigation
v0.13.0
A new size under sm, and that is the one to read: every control, field and indicator takes an
xs, and a control at xs stands at 28px, one 4px step under sm, so a field and a button of the
same size still line up. Two class sets that only ever repeated another component's sizing go with
it.
Breaking
A picker's popover has no size classes of its own
- .rp-select__popover--lg .rp-list-box__item { … }
+ .rp-select__popover .rp-list-box--lg .rp-list-box__item { … }Select, ComboBox and Autocomplete now hand their size to the ListBox in their popover, so the
list box's own rp-list-box--{size} sizes the rows. A size set on the ListBox itself still wins,
as an Input's own size wins over its TextField's.
rp-select__popover--{sm,lg}, rp-combo-box__popover--{sm,lg} and
rp-autocomplete__popover--{sm,lg} are no longer emitted or styled, and comboBoxVariants has no
size variant. The classes go rather than stay behind as empty hooks: with the list box's size
winning, a popover class could name one size while the rows stood at another. Markup of your own
placed in the popover beside the list now reads at the popover's 14px at every size, as it does
beside a Dropdown's Menu.
@ropav/styles/utilities drops the field-line-* classes
.field-line-sm, .field-line-md and .field-line-lg, added in 0.12.3, are gone. Nothing in the
library used them, and they sit in the utilities layer, after components, so a field wearing one
would have had its own size overridden rather than stated. Markup that used one sets
padding-block, font-size and line-height itself, as each field's stylesheet does. The
reasoning they carried — the control scale, and the 16px type below 40rem that keeps mobile Safari
from zooming on focus — now opens input.css.
Added
- Every control steps down to 28px at
xs. A button, a toggle button, every field, a select, a
combo box and an autocomplete, and the rows of a list box, a menu and a picker's popover stand at
28px with 12px type. Button groups, toggle button groups and text fields handxsdown as they
hand down every other size. A segmented control's track lands on 28px around 20px items.
Pagination keeps its own scale, wheresmis already 28px, so its links step down to 24px. A
field keeps 16px type below 40rem atxsas at every size, and the padding gives back the
difference. - Every indicator takes an
xs. An avatar stands at 24px, a chip and a tag at 16px (the tag's
remove target still 24px), a progress circle at 12px, and a switch's track at 12 by 24px. Where a
whole step would leave nothing, the step is half: a spinner stops at 12px, a meter's and a
progress bar's track at 2px, and a badge at 12px with 8px type, enough for a dot or a digit. - Sizes list from
xsup in the API tables, the playground controls andllms-full.txt.
Changed
- A
Switchscales with the theme's spacing. Each size now sets the track's height alone, as
--switch-size, and the thumb, the checked position and the indents follow from it in multiples
of--rp-spacing. Under the default theme every pixel is where it was.
Fixed
- A toggle's error keeps its indent whichever file an app imports first.
field-error.css
zeroed the padding on aCheckbox's,Radio's orSwitch's error at the same specificity as
each toggle's own indent, so the file imported second won. The full entry never showed it, but an
app importing the component files one at a time in alphabetical order put every toggle's error
flush against the left edge, under the box rather than the label.
Built and tested against vue 3.6.0-rc.10; the peer range still starts at rc.8.
npm i ropav@0.13.0Full changelog: v0.12.3...v0.13.0