coreui / coreui-pro / 32766260978

93%

main: 94%

push

github

feat(aspect-ratio)!: size elements with the CSS property, not a padding hack (#875)

The ratio helper predates `aspect-ratio` being usable. It built the shape from a
`::before` with a percentage `padding-top` and absolutely positioned the one
child that could live inside it — so holding a ratio cost a wrapper, and the
element you actually wanted sized was not the element carrying the class.

`.ratio-*` sets the CSS property now. The class names are unchanged; the markup
around them is one element shorter:

    <div class="ratio ratio-16x9"><iframe src="..."></iframe></div>
    <iframe class="w-100 ratio-16x9" src="...">

Two utilities rather than one, because a ratio the map does not name still has
to be reachable: `.ratio-16x9` sets `--cui-ratio`, and a separate rule reads it
from anything carrying such a class. `.ratio-auto` opts an element into the
reading rule so an inline `--cui-ratio: 2 / 1` works — the same shape upstream
settled on.

`$aspect-ratios` moves from `helpers/_ratio.scss` to `_config.scss`, and its
values become ratios instead of percentages, so the map now reads as what it
describes. The helper file is gone; the docs page moves to
`utilities/aspect-ratio` with the old URL redirecting.

Breaking: recorded in the class API removals with the markup change, and written
up in the v6 migration guide. A custom ratio moves from
`--cui-aspect-ratio: 50%` to `--cui-ratio: 2 / 1`.

4532 of 5097 branches covered (88.92%)

Branch coverage included in aggregate %.

8653 of 9054 relevant lines covered (95.57%)

400.08 hits per line