bumbag-ui
bumbag-ui copied to clipboard
jxom
Writing mode & RTL layout issues
Describe the bug
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 😄.
