coreui / coreui-pro / 31219266513

93%

main: 94%

push

github

feat(Navbar, Table)!: components that answer to their own width (#713)

* feat(Navbar)!: collapse on the navbar's own width, not the window's

`.navbar-expand-*` asked the viewport how wide it was, which is the wrong
question: a navbar in a sidebar or a narrow dashboard column stayed expanded
because the browser window was wide. The navbar is a query container now, so it
collapses when *it* is narrower than the breakpoint. For a navbar that spans the
page — most of them — nothing changes, because its width is the viewport's.

BREAKING CHANGE: `flex-wrap: nowrap` and `justify-content: flex-start` move from
`.navbar-expand-*` onto its inner `.container*`. A container query styles
descendants of the container, never the container itself, and the inner
container is where the two took effect anyway — the navbar's children inherit
`flex-wrap`. A navbar written without an inner `.container`, `.container-fluid`
or `.container-{breakpoint}` no longer gets them.

Adapted from twbs/bootstrap's v6 navbar.

* feat(Table): query containers, and stacked tables

`.table-responsive*` is a query container now. It still scrolls horizontally
below its breakpoint — the addition is that what sits inside it can respond to
its width, which is what the new class needs.

`.table-stacked{-sm|-md|-lg|-xl|-xxl}` turns rows into stacked blocks below the
breakpoint: the header is hidden from sight and kept in the accessibility tree,
each row becomes a block, and every cell past the first prints its `data-cell`
label above the value. A table that scrolls sideways is still a table; on a
narrow screen one record at a time reads better.

Because the width comes from the `.table-responsive*` wrapper and not the
window, the same markup stacks inside a narrow column and stays a table in the
main content area.

Two CSS budgets move up a step (+732 B gzip for the pair of features).

Ported from twbs/bootstrap's v6 tables.

4267 of 4819 branches covered (88.55%)

Branch coverage included in aggregate %.

8281 of 8675 relevant lines covered (95.46%)

363.42 hits per line