Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(styles): CSS logical properties cleanup fixes #14635

Merged

Conversation

tw15egan
Copy link
Collaborator

Closes #14627

Fixes some outstanding issues with a few components when RTL mode is enabled

Changelog

Changed

  • Adjusted Slider logic to check if document is in RTL mode, and positions the Thumb and Progress track accordingly.
  • Tweaked a few other styles in Checkbox, CodeSnippet, Pagination and ProgressBar

Testing / Reviewing

Test Checkbox, CodeSnippet, Pagination, ProgressBar, and Slider in RTL mode and ensure they render as expected. Ensure there are not regressions in LTR mode.

…rt (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
…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
…#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
@netlify
Copy link

netlify bot commented Sep 11, 2023

Deploy Preview for v11-carbon-react ready!

Name Link
🔨 Latest commit 2011fcb
🔍 Latest deploy log https://app.netlify.com/sites/v11-carbon-react/deploys/65006238ad25880008da72d4
😎 Deploy Preview https://deploy-preview-14635--v11-carbon-react.netlify.app
📱 Preview on mobile
Toggle QR Code...

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
Copy link

netlify bot commented Sep 11, 2023

Deploy Preview for carbon-elements ready!

Name Link
🔨 Latest commit 2011fcb
🔍 Latest deploy log https://app.netlify.com/sites/carbon-elements/deploys/6500623877a0e80008179baa
😎 Deploy Preview https://deploy-preview-14635--carbon-elements.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link
Member

@alisonjoseph alisonjoseph left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All LGTM!

@tw15egan tw15egan changed the title Logical properties cleanup fixes fix(styles): CSS logical properties cleanup fixes Sep 11, 2023
Copy link
Contributor

@andreancardona andreancardona left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Super random question - doesn't necessarily affect this PR but do we want the Progressbar Intermediate to directionally traverse from right to the left in RTL mode

Screen.Recording.2023-09-11.at.16.48.49.mov

@tw15egan tw15egan force-pushed the logical-properties-cleanup-fixes branch from e0a2823 to 2011fcb Compare September 12, 2023 13:05
@tw15egan
Copy link
Collaborator Author

@andreancardona great catch! I fixed that here as well 😄

@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to no response for status checks Sep 12, 2023
@tw15egan tw15egan added this pull request to the merge queue Sep 12, 2023
Merged via the queue into carbon-design-system:main with commit efcbf90 Sep 12, 2023
15 checks passed
@tw15egan tw15egan deleted the logical-properties-cleanup-fixes branch September 12, 2023 15:28
misiekhardcore pushed a commit to misiekhardcore/carbon that referenced this pull request Sep 18, 2023
…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
@m4olivei m4olivei mentioned this pull request Sep 20, 2023
22 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Fix outstanding quirks with RTL mode after converting to CSS Logical Proeprties
3 participants