Created by: ffoodd
Mostly a POC for now, here's a first try on using logical names for physical properties.
It's meant to:
- keep naming consistent between RTL and LTR (eg. prevent
.float-right { float: left; }
in RTL) - ease the switch to custom properties one day, since naming would already be logical.
There's still things to consider here, I'm not done with SCSS yet (missing components, carousel, dropdown, popovers or tooltips for the most noticeable) and it'd require to apply those changes in our JS as well as in our docs (and to be heavily documented in the migration page).
@twbs/css-review is this a way I should follow right away?
This is highly questionnable, being consistent requires to rename for example caret-down
to caret-block-end
, or to use new abreviations for our utilities (.mt
becomes .mbs
for block-start
, .etc). I tried to be consistent but there's an real amount of work here.
To do
-
update migration guide -
update docs everywhere -
update docs theming
Questions
What to do with:
-
RFS mixins?→ to tackle in RFS directly -
Dropdowns, popovers and tooltips, relying on Popper?→ JS related stuff, not only renaming… -
Carousels class names (eg .carousel-item-left
) → Rename. -
_position.scss
defines fixed and sticky helpers fortop
andbottom
. They're not impacted by RTL but will require refactor to useinset
values and subvalues (eg.inset-block-start
) when switching to logical properties. Should we rename classes to be consistent with the whole PR? → Do nothing.