coreui / coreui-pro / 31219443898

93%

main: 94%

push

github

feat(stacks): responsive variants, read from the container (#714)

`.hstack` and `.vstack` were all-or-nothing: a stack that reads as a row on a
wide layout and a column on a narrow one meant writing the flex utilities twice.
`.hstack-{breakpoint}` and `.vstack-{breakpoint}` switch direction instead, and
`.stack-container` marks the ancestor they measure.

The width comes from that container rather than the viewport, so the same markup
can be a column in a sidebar and a row in the main content area of one page.

Plain `.hstack` and `.vstack` keep today's behaviour. Upstream expresses its
stacks through `--stack-*` tokens on a shared `[class*="stack"]` base, which
would have given `.hstack` `flex: 1 1 auto` and changed its `align-items` from
`center` to `flex-start` — two silent visual changes to markup that already
exists. Ours keeps the centring and the shrink-to-content width; only the shared
`display: flex` moves into a generated base selector.

Adapted from twbs/bootstrap's v6 stacks.

4267 of 4819 branches covered (88.55%)

Branch coverage included in aggregate %.

8281 of 8675 relevant lines covered (95.46%)

363.47 hits per line