coreui / coreui-pro / 34884452059

96%

main: 94%

push

github

fix(Toaster)!: mirror the entry and exit edges in a right-to-left document (#1299)

The nine `.toast-container-{block}-{inline}` classes are pinned with logical
insets but declared a physical `--cui-toast-translate`, so in `dir="rtl"` a
`top-end` container stood at the left of the viewport while its toasts slid in
from the right, across the page instead of from beyond the nearest edge. The
inline-axis translates now mirror on the container's own direction, through a
new `rtl-self()` mixin: `rtl()` tests an ancestor, which parts ways with a
logical inset the moment a subtree, or the container itself, carries `dir`.

The `enter` and `leave` options move the other way: their values are physical
(`left` and `right` in place of `start` and `end`) and mean the same side in
both directions, so an author who picks a side keeps it.

Measured in Chromium as the first-frame offset against the resting position,
`top-end` with `enter: 'auto'`: RTL +350 px before and -350 px after, LTR
unchanged at +350 px, and the entry now points at the pinned edge for an LTR
island inside an RTL page and for a container carrying its own `dir` as well.
The new visual spec holds all four shapes, since only a browser with the
stylesheet can tell which edge the entry points at. The `center` columns keep
their physical exit, since they are neither start nor end.

5661 of 6315 branches covered (89.64%)

Branch coverage included in aggregate %.

1 of 1 new or added line in 1 file covered. (100.0%)

10955 of 11362 relevant lines covered (96.42%)

470.28 hits per line