You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository has been archived by the owner on May 10, 2023. It is now read-only.
When adding direction="rtl" to the page some components layout looks broken.
And other components have prop values of left and right but when the direction changes the values aren't semantically correct.
To Reproduce
Playroom examples with broken layout when the direction is rtl:
Alert: Link
Group: Link
Blockquote: link
Code Block: link (I think this could have a fixed direction of ltr since code is written in ltr)
List: link
Badge: link (should be attached to the top-left)
Breadcrumb: link
Button with Icon: link
Callout: link (close icon should be on the left)
Card > Header with addons: link (the header and footer action buttons have a fixed margin-left)
Dialog: link
DropdownMenu: link
Menu: link
Pagination: link
Popover: link (ActionButtons have fixed margin-left)
Rating: link (accessibility: keyboard navigation is going in the opposite direction)
SideNav: link
Table: link (table has a default text-align with value left, would be better to have the value to be start)
Tabs: Link
Tag: link
Toast: link
TopNav: link (TopNav.Item last child has a fixed margin-right)
Autosuggest: link
Checkbox: link
CheckboxGroup: link (checkbox items have a fixed margin-left)
FieldStack: link
FieldWrapper: link
Radio: link
RadioGroup: link
Select: link
SelectMenu: link (the tags have a fixed margin-left)
Switch: link
Rover: link (accessibility: keyboard navigation is going in the opposite direction)
Components with prop values that aren't semantic with the writing direction:
Container (align): link
Set (alignX): link
Stack (alignX): link
Tabs.List (align): link
ToastManager (placement)?: link (couldn't find docs on the API of ToastManager)
Tooltip (placement, arrowProps.expand): link
Drawer (placement): link
Modal (placement): link
Overlay (placement): link
Expected behavior
For the components to use a writing mode agnostic CSS properties such as CSS Logical Properties and Values(margin-inline-start, padding-inline-end, etc.) and have prop values that respect the writing mode, ex. rather than left and right we could use start and end values.
I know that this will require changes across a lot of components so I am willing to help out 😄.
The text was updated successfully, but these errors were encountered:
Describe the bug
When adding
direction="rtl"
to the page some components layout looks broken.And other components have prop values of
left
andright
but when the direction changes the values aren't semantically correct.To Reproduce
Playroom examples with broken layout when the direction is
rtl
:Alert: Link
Group: Link
Blockquote: link
Code Block: link (I think this could have a fixed direction of
ltr
since code is written in ltr)List: link
Badge: link (should be attached to the top-left)
Breadcrumb: link
Button with Icon: link
Callout: link (close icon should be on the left)
Card > Header with addons: link (the header and footer action buttons have a fixed margin-left)
Dialog: link
DropdownMenu: link
Menu: link
Pagination: link
Popover: link (ActionButtons have fixed margin-left)
Rating: link (accessibility: keyboard navigation is going in the opposite direction)
SideNav: link
Table: link (table has a default
text-align
with valueleft
, would be better to have the value to bestart
)Tabs: Link
Tag: link
Toast: link
TopNav: link (
TopNav.Item
last child has a fixedmargin-right
)Autosuggest: link
Checkbox: link
CheckboxGroup: link (checkbox items have a fixed
margin-left
)FieldStack: link
FieldWrapper: link
Radio: link
RadioGroup: link
Select: link
SelectMenu: link (the tags have a fixed
margin-left
)Switch: link
Rover: link (accessibility: keyboard navigation is going in the opposite direction)
Components with prop values that aren't semantic with the writing direction:
Container (
align
): linkSet (
alignX
): linkStack (
alignX
): linkTabs.List (
align
): linkToastManager (
placement
)?: link (couldn't find docs on the API ofToastManager
)Tooltip (
placement
,arrowProps.expand
): linkDrawer (
placement
): linkModal (
placement
): linkOverlay (
placement
): linkExpected behavior
For the components to use a writing mode agnostic CSS properties such as CSS Logical Properties and Values(
margin-inline-start
,padding-inline-end
, etc.) and have prop values that respect the writing mode, ex. rather thanleft
andright
we could usestart
andend
values.I know that this will require changes across a lot of components so I am willing to help out 😄.
The text was updated successfully, but these errors were encountered: