refactor(@carbon/styles): use logical properties for better RTL support #14531

tw15egan · 2023-08-29T13:55:28Z

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-logical added to stylelint-config-carbon
Enabled linting to ensure logical properties are used going forward

Changed

Updated all layout styles to use logical properties rather than left, right, top, etc...

Testing / Reviewing

Ensure there are no visual regressions. Select rtl via the Text direction dropdown 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 use bottom-right, top-left etc, these styles are broken when RTL mode is enabled

netlify · 2023-08-29T14:00:21Z

✅ Deploy Preview for carbon-components-react ready!

Name	Link
🔨 Latest commit	`79c3b16`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/64edf8d2cceb2b0008b6c970
😎 Deploy Preview	https://deploy-preview-14531--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2023-08-29T14:03:10Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`79c3b16`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/64edf8d37995810008a822d6
😎 Deploy Preview	https://deploy-preview-14531--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2023-08-29T14:04:22Z

✅ Deploy Preview for carbon-components-react ready!

Name	Link
🔨 Latest commit	`6d573cd`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/64ee3dc5c8f7c90008beb707
😎 Deploy Preview	https://deploy-preview-14531--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify · 2023-08-29T14:10:08Z

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	`6d573cd`
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/64ee3dc515931300090661fd
😎 Deploy Preview	https://deploy-preview-14531--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

alisonjoseph · 2023-08-29T19:27:54Z

tw15egan · 2023-08-29T19:30:09Z

@alisonjoseph anything that uses Tooltip or Popover will be broken in RTL 😬 . I'm more concerned with making sure the components aren't broken in LTR. I think it might be best to fix the RTL-specific issues in a separate PR, what do you think? I just don't want to make this PR any harder to review`

alisonjoseph · 2023-08-29T19:33:28Z

@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?

tw15egan · 2023-08-29T19:36:52Z

Good point, I guess we should create a new branch and we can work off that until we can fix these issues

tw15egan · 2023-08-30T13:13:05Z

@alisonjoseph this is now pointing to a new logical-properties branch, should we merge this and push new fixes for the RTL issues to that branch? We can create an issue for outstanding issues we come across

alisonjoseph · 2023-08-30T13:41:26Z

@tw15egan sounds good, lets merge it 👍

…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

…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

* 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

…upport (carbon-design-system#14580) * refactor(@carbon/styles): use logical properties for better RTL support (carbon-design-system#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 (carbon-design-system#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 (carbon-design-system#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

…em#14635) * refactor(@carbon/styles): use logical properties for better RTL support (carbon-design-system#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 (carbon-design-system#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 (carbon-design-system#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

tw15egan force-pushed the use-logical-properties branch from 79c3b16 to a24b733 Compare August 29, 2023 13:57

tw15egan marked this pull request as ready for review August 29, 2023 17:08

tw15egan requested a review from a team as a code owner August 29, 2023 17:08

tw15egan requested review from andreancardona and guidari August 29, 2023 17:08

tw15egan added the status: ready for review 👀 label Aug 29, 2023

tw15egan assigned alisonjoseph and tay1orjones and unassigned alisonjoseph and tay1orjones Aug 29, 2023

tw15egan requested review from alisonjoseph and tay1orjones August 29, 2023 17:09

tw15egan changed the base branch from main to logical-properties August 30, 2023 13:05

tw15egan added 9 commits August 30, 2023 09:11

refactor(styles): update styles to use CSS logical properties

5a8a7d2

fix(styles): change padding-inline-end to padding-inline

eebe26d

fix(styles): run stylelint --fix on components

d4512f8

fix(styles): run stylelint --fix on utilities

2d042ad

fix(Select): test padding fix

e376a82

chore(stylelint): run styelint on files outside @carbon/styles

b75064b

fix(AspectRatio): remove unsupported float: inline-start

9b9786a

fix(ContainedList): redefine tag tokens in contained list

dcaf97c

fix(ContainedList): keep story the same

7964324

tw15egan force-pushed the use-logical-properties branch from 6d573cd to 7964324 Compare August 30, 2023 13:11

tw15egan mentioned this pull request Aug 30, 2023

Fix outstanding issues in RTL mode after switching to CSS Logical Properties #14544

Closed

15 tasks

tw15egan merged commit b6fedd7 into carbon-design-system:logical-properties Aug 30, 2023
1 check passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(@carbon/styles): use logical properties for better RTL support #14531

refactor(@carbon/styles): use logical properties for better RTL support #14531

tw15egan commented Aug 29, 2023 •

edited

Loading

netlify bot commented Aug 29, 2023

netlify bot commented Aug 29, 2023

netlify bot commented Aug 29, 2023 •

edited

Loading

netlify bot commented Aug 29, 2023 •

edited

Loading

alisonjoseph commented Aug 29, 2023

tw15egan commented Aug 29, 2023 •

edited

Loading

alisonjoseph commented Aug 29, 2023

tw15egan commented Aug 29, 2023

tw15egan commented Aug 30, 2023

alisonjoseph commented Aug 30, 2023

refactor(@carbon/styles): use logical properties for better RTL support #14531

refactor(@carbon/styles): use logical properties for better RTL support #14531

Conversation

tw15egan commented Aug 29, 2023 • edited Loading

Changelog

Testing / Reviewing

netlify bot commented Aug 29, 2023

✅ Deploy Preview for carbon-components-react ready!

netlify bot commented Aug 29, 2023

✅ Deploy Preview for carbon-elements ready!

netlify bot commented Aug 29, 2023 • edited Loading

✅ Deploy Preview for carbon-components-react ready!

netlify bot commented Aug 29, 2023 • edited Loading

✅ Deploy Preview for carbon-elements ready!

alisonjoseph commented Aug 29, 2023

tw15egan commented Aug 29, 2023 • edited Loading

alisonjoseph commented Aug 29, 2023

tw15egan commented Aug 29, 2023

tw15egan commented Aug 30, 2023

alisonjoseph commented Aug 30, 2023

tw15egan commented Aug 29, 2023 •

edited

Loading

netlify bot commented Aug 29, 2023 •

edited

Loading

netlify bot commented Aug 29, 2023 •

edited

Loading

tw15egan commented Aug 29, 2023 •

edited

Loading