coreui / coreui-pro / 35405608425

94%

main: 94%

push

github

feat(Transitions): add `.size`, the class that animates the box (#1365)

`.fade` moves the opacity alone, so a dismissed alert held its full height until
the JavaScript removed the element, and the page jumped up in one frame. `.size`
sits next to it and animates the height, the block padding, the block borders
and the block margin as well: the element grows from nothing when it is inserted
with `.show` on it, and collapses into the page when it loses `.show` or gains
`.hiding`. The hidden state is `display: none`, and `display` rides the
transition with `allow-discrete`, the same way the collapse holds a closing
panel on screen until its size reaches zero, so nothing is left as a clipped
but focusable strip.

The hidden state is emitted in the `utilities` layer. In `components` every
spacing utility outranked it: measured, `<div class="alert fade size show py-5
mb-5">` stopped at the padding and never moved the margin at all, which is the
jump the class exists to remove. The opacity is pinned there too, so an
`.opacity-*` utility cannot leave a collapsing element fully opaque.

The class waits for `interpolate-size: allow-keywords`, since a size the page
never set cannot interpolate without it, and it does nothing where the keyword
is missing. Under `border-box` a `block-size` of `0` still leaves the padding
and the border behind, so the hidden state zeroes them too, and the class clips
its own content for as long as it is on, which is why it is opt-in rather than
the default.

A component that declares its own transition outranks the class, so the alert
names the sizes in `--cui-alert-transition-property` when `.size` is on and
keeps its own duration and easing; its rule now passes `allow-discrete` so the
`display` in that list behaves. `.alert-instant` zeroes the class's duration
back, since the class does match an instant alert.

Measured in Chromium, seeking the transitions to their midpoint: a 93 px alert
exits 93 px to 39 px and enters 39 px to... (continued)

5762 of 6375 branches covered (90.38%)

Branch coverage included in aggregate %.

10973 of 11361 relevant lines covered (96.58%)

531.61 hits per line