Skip to content

v0.13.0

Choose a tag to compare

@daopk daopk released this 03 Oct 01:26
· 48 commits to main since this release

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 hand xs down as they
    hand down every other size. A segmented control's track lands on 28px around 20px items.
    Pagination keeps its own scale, where sm is already 28px, so its links step down to 24px. A
    field keeps 16px type below 40rem at xs as 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 xs up in the API tables, the playground controls and llms-full.txt.

Changed

  • A Switch scales 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 a Checkbox's, Radio's or Switch'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.0

Full changelog: v0.12.3...v0.13.0