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(menuButton): fix RTL issues with MenuButton #14565

Merged

Conversation

tw15egan
Copy link
Member

@tw15egan tw15egan commented Sep 1, 2023

Fixes some positioning logic inside Menu and MenuButton.

Changelog

Changed

  • Adjusted positioning logic based on RTL

Testing / Reviewing

Check Menu and MenuButton stories in both LTR and RTL modes. Should render as expected.

One note: I'm seeing an issue where the state seems to be stale if you go from MenuButton to Menu with RTL enabled. It appears on the wrong side. However, once you refresh it is fixed. Any ideas? Can probably be fixed later

@tw15egan tw15egan requested a review from a team as a code owner September 1, 2023 14:46
@tw15egan tw15egan requested review from andreancardona and guidari and removed request for a team September 1, 2023 14:46
@tw15egan
Copy link
Member Author

tw15egan commented Sep 5, 2023

All issues should be fixed with Menu and MenuButton in RTL mode

Copy link
Member

@tay1orjones tay1orjones left a comment

Choose a reason for hiding this comment

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

Looks good, just one minor thought

packages/react/src/components/Menu/MenuItem.js Outdated Show resolved Hide resolved
@tw15egan tw15egan merged commit 6ec1cda into carbon-design-system:logical-properties Sep 5, 2023
1 check passed
tw15egan added a commit that referenced this pull request Sep 5, 2023
* 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
tw15egan added a commit that referenced this pull request Sep 11, 2023
* 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
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