refactor(@carbon/styles): use logical properties for better RTL support#14531
Merged
tw15egan merged 9 commits intoAug 30, 2023
Merged
Conversation
79c3b16 to
a24b733
Compare
✅ Deploy Preview for carbon-components-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-components-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Contributor
|
This looks great! Had a couple questions around what components should look like in rtl, these may be unrelated to this PR Should accordion title be right aligned?
same issue with skeleton state
... will keep reviewing starting with Modal later |
Contributor
Author
|
@alisonjoseph anything that uses |
Contributor
|
@tw15egan Agree this is already a huge PR. My only worry is that if teams are using RTL, and then we release this they will have broken components. I wonder if we could just keep this branch and open PR's to fix things into this branch, and then release all at once? |
Contributor
Author
|
Good point, I guess we should create a new branch and we can work off that until we can fix these issues |
6d573cd to
7964324
Compare
Contributor
Author
|
@alisonjoseph this is now pointing to a new |
15 tasks
Contributor
|
@tw15egan sounds good, lets merge it 👍 |
tw15egan
added a commit
that referenced
this pull request
Sep 5, 2023
…rt (#14531) * refactor(styles): update styles to use CSS logical properties * fix(styles): change padding-inline-end to padding-inline * fix(styles): run stylelint --fix on components * fix(styles): run stylelint --fix on utilities * fix(Select): test padding fix * chore(stylelint): run styelint on files outside @carbon/styles * fix(AspectRatio): remove unsupported float: inline-start * fix(ContainedList): redefine tag tokens in contained list * fix(ContainedList): keep story the same
tw15egan
added a commit
that referenced
this pull request
Sep 11, 2023
…rt (#14531) * refactor(styles): update styles to use CSS logical properties * fix(styles): change padding-inline-end to padding-inline * fix(styles): run stylelint --fix on components * fix(styles): run stylelint --fix on utilities * fix(Select): test padding fix * chore(stylelint): run styelint on files outside @carbon/styles * fix(AspectRatio): remove unsupported float: inline-start * fix(ContainedList): redefine tag tokens in contained list * fix(ContainedList): keep story the same
github-merge-queue Bot
pushed a commit
that referenced
this pull request
Sep 11, 2023
…upport (#14580) * refactor(@carbon/styles): use logical properties for better RTL support (#14531) * refactor(styles): update styles to use CSS logical properties * fix(styles): change padding-inline-end to padding-inline * fix(styles): run stylelint --fix on components * fix(styles): run stylelint --fix on utilities * fix(Select): test padding fix * chore(stylelint): run styelint on files outside @carbon/styles * fix(AspectRatio): remove unsupported float: inline-start * fix(ContainedList): redefine tag tokens in contained list * fix(ContainedList): keep story the same * [WIP] fix(components): fix RTL issues with components (#14546) * fix(components): fix RTL issues with components * style(components): more fixes for RTL styles * style(components): more fixes for RTL styles * fix(Popover): fix popover styles in RTL mode * fix(TreeView): fix RTL issues with TreeView * fix(Breadcrumb): fix small issue with overflow menu variant * fix(Popover): fix autoalign story issues * fix(menuButton): fix RTL issues with MenuButton (#14565) * fix(menuButton): fix RTL issues with MenuButton * fix(Menu): adjust caret rotation * refactor(menu): remove rtl override * fix(Menu): adjust story positioning, add CaretLeft for RTL mode * refactor(Menu): useLayoutContext to check if parent has direction set * style(React): fix linting issues with storybook styles * test(Accordion): update snapshots * fix(Tooltip): move border
github-merge-queue Bot
pushed a commit
that referenced
this pull request
Sep 12, 2023
* refactor(@carbon/styles): use logical properties for better RTL support (#14531) * refactor(styles): update styles to use CSS logical properties * fix(styles): change padding-inline-end to padding-inline * fix(styles): run stylelint --fix on components * fix(styles): run stylelint --fix on utilities * fix(Select): test padding fix * chore(stylelint): run styelint on files outside @carbon/styles * fix(AspectRatio): remove unsupported float: inline-start * fix(ContainedList): redefine tag tokens in contained list * fix(ContainedList): keep story the same * [WIP] fix(components): fix RTL issues with components (#14546) * fix(components): fix RTL issues with components * style(components): more fixes for RTL styles * style(components): more fixes for RTL styles * fix(Popover): fix popover styles in RTL mode * fix(TreeView): fix RTL issues with TreeView * fix(Breadcrumb): fix small issue with overflow menu variant * fix(Popover): fix autoalign story issues * fix(menuButton): fix RTL issues with MenuButton (#14565) * fix(menuButton): fix RTL issues with MenuButton * fix(Menu): adjust caret rotation * refactor(menu): remove rtl override * fix(Menu): adjust story positioning, add CaretLeft for RTL mode * refactor(Menu): useLayoutContext to check if parent has direction set * style(React): fix linting issues with storybook styles * test(Accordion): update snapshots * fix(Tooltip): move border * fix(components): fix a few more RTL issues with components * fix(Slider): adjust positioning logic when rtl mode is enabled * chore(test): remove console.log * test(Slider): update tests * fix(ProgressBar): reverse indeterminate animation in RTL mode
This was referenced Jan 22, 2025
Merged
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #13619
Updates the repo to use CSS Logical Properties. This will help users render the components in RTL mode without the need for post-processors like RTLCSS
Changelog
New
stylelint-use-logicaladded tostylelint-config-carbonChanged
left,right,top, etc...Testing / Reviewing
Ensure there are no visual regressions. Select
rtlvia theText directiondropdown via storybook and ensure components render as expected.I have encountered one issue with
Popover, which we can address in a separate PR. Since we usebottom-right,top-leftetc, these styles are broken when RTL mode is enabled