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

[WIP] fix(components): fix RTL issues with components #14546

Merged

Conversation

tw15egan
Copy link
Collaborator

Closes #14544

Fixes to improve RTL support after switching to CSS Logical properties. WIP

Changelog

New

  • {{new thing}}

Changed

  • {{change thing}}

Removed

  • {{removed thing}}

Testing / Reviewing

{{ Add descriptions, steps or a checklist for how reviewers can verify this PR works or not }}

@tw15egan
Copy link
Collaborator Author

tw15egan commented Aug 30, 2023

@alisonjoseph latest changes should fix most of the issues, except Menu and MenuButton

@tw15egan tw15egan marked this pull request as ready for review August 30, 2023 20:31
@tw15egan tw15egan requested a review from a team as a code owner August 30, 2023 20:31
@tw15egan tw15egan requested review from alisonjoseph and andreancardona and removed request for a team August 30, 2023 20:31
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.

These all look great! 🔥Popover autoalign is the only one I noticed that still looked off (other than Menu/MenuButton)

Screenshot 2023-08-31 at 12 20 51 PM

@tw15egan

This comment was marked as outdated.

@tw15egan

This comment was marked as outdated.

@tw15egan
Copy link
Collaborator Author

@alisonjoseph I think the latest changes fixed it without needing to change anything inside Popover. We just needed to refresh the page when the modes were switched, as well as update the storybook styles to use logical properties as well

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.

🎉

@tw15egan tw15egan merged commit 6976e14 into carbon-design-system:logical-properties Sep 1, 2023
tw15egan added a commit that referenced this pull request Sep 5, 2023
* 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
tw15egan added a commit that referenced this pull request Sep 11, 2023
* 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
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
misiekhardcore pushed a commit to misiekhardcore/carbon that referenced this pull request Sep 18, 2023
…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
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants