twbs / bootstrap / 31046561498

94%

main: 96%

push

github

Fix transition tokens so every listed property animates (#42781)

* Emit transition longhands so every listed property animates

The composed `--*-transition` tokens put a property list and one duration
into the `transition` shorthand. In that shorthand the duration binds to
the last property only. A button therefore animated `box-shadow` but left
`color`, `background-color`, and `border-color` at `0s`.

Each component now declares `-property`, `-duration`, and `-timing` tokens.
A new `transition-longhand()` mixin emits the `transition-*` longhands.
Those longhands repeat one duration and easing across the full property
list, and each token stays independently overridable.

This affects buttons, nav links, accordions, form controls, range thumbs,
and floating labels.

* Gate transitions behind prefers-reduced-motion: no-preference

The transition mixins emitted a transition, then switched it off again in a
`prefers-reduced-motion: reduce` query. Each animated rule therefore paid for
an override block. The mixins now emit the transition inside a
`no-preference` query instead, which drops those blocks and shrinks the CSS.

Rules that force `transition: none` stay outside the query. Those rules
disable motion on purpose, so they must reach reduced-motion readers too.
The old guard tested `!= none`, which missed `none !important` because Sass
passes it as a two-item list. `list.index()` catches both spellings.

A browser without support for the media feature now gets no transition. The
migration guide records that trade-off.

Also rename `transition-longhand()` to `transition-props()`.

1751 of 1969 branches covered (88.93%)

Branch coverage included in aggregate %.

3603 of 3734 relevant lines covered (96.49%)

113.63 hits per line