Skip to content
This repository has been archived by the owner on May 10, 2023. It is now read-only.

Writing mode & RTL layout issues #56

Open
hazem3500 opened this issue Aug 26, 2020 · 0 comments
Open

Writing mode & RTL layout issues #56

hazem3500 opened this issue Aug 26, 2020 · 0 comments
Labels
enhancement New feature or request

Comments

@hazem3500
Copy link
Contributor

hazem3500 commented Aug 26, 2020

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 😄.

@jxom jxom added the enhancement New feature or request label Aug 26, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants