Support Bidirectionality

[stephanerangaya]

✍️🐧 Feel free to edit this issue

🚀 Feature Proposal

Canvas Kit components need to support both Right-to-Left and Left-to-Right writing systems. This issue aims to centralize the work we will need to do to support bidirectionality.

For now, we're only looking at React components that are not in Labs, but we should discuss about the way we handle CSS before we start the work on React components.

Questions:

• What font should we use? Potentially https://www.google.com/get/noto/
• What prop should we use? We're already using isRTL, so probably keep doing this
• Should isRTL be propagated to children components? Let's say we use a IconButton with a Back Icon, should we do:

<IconButton title="Back">
   <SystemIcon icon={leftArrow} />
</IconButton>

<IconButton isRTL={true} title="Back">
   <SystemIcon icon={rightArrow} />
</IconButton>

or (my personal preference)

<IconButton title="Back">
   <SystemIcon icon={leftArrow} iconLTR={rightArrow}/>
</IconButton>
<IconButton isRTL={true} title="Back">
   <SystemIcon icon={leftArrow} iconLTR={rightArrow}/>
</IconButton>

or

<IconButton title="Back">
   <SystemIcon icon={leftArrow} iconLTR={rightArrow}/>
</IconButton>
<IconButton isRTL={true} title="Back">
   <SystemIcon icon={leftArrow} iconLTR={rightArrow} isRTL={true}/>
</IconButton>

Facts:

• A search icon is keep the same orientation because we hold with the right hand
• Numbers are still LTR in RTL languages.
• Some icons need to flip when in RTL like bullet lists, back button, etc... Some don't like the Play or Skip Track.
• Time goes the same direction, so loadings are also in the same direction. Same goes for Undo and Redo, icons should not flip.

Components

Action Bar

In RTL, the elements should be align to the right. The order of the elements in the bar should be reversed.

Avatar

This component supports bidirectionality out of the box.

Banner

In RTL, the order of the elements in the banner should be reversed. We should update to documentation to also recommend flipping the placement of the sticky Banner to the other side of the screen when in RTL.

❓Should we manage the placement of the sticky Banner?

Button

• Text: Icons placement should be reversed.

❓In RTL, if a button has a directional arrow, for example ← Home, it should be الرئيسيّة →, so not only the icon/text order is reversed, but the direction of the arrow is also different. We should update the documentation to recommend a isRTL icon when this occurs.

• Outline: This component supports bidirectionality out of the box.
• Dropdown: The arrow should be on the left.
• Icon Button

❓In RTL, if an Icon Button has a directional icon, for example a bullet list, it should be reversed. But for Button without a directional icon, they shouldn't. We should allow an isRTL icon.

• Icon Button Toggle Group: This component supports bidirectionality out of the box.

Card

In RTL, the alignement should change.

Common

This component supports bidirectionality out of the box.

Cookie Banner

In RTL, the order of the elements in the banner should be reversed.

Core

This component supports bidirectionality out of the box.

Form Field

• Label: Text should be aligned to the right
• Hint: Text should be aligned to the right
• Checkbox, Radio: Component input and text order should be reversed

❓In RTL, it seems the direction of the Checkbox mark should stay the same than in LTR, but to be confirmed.

• Color Input/Preview: Component input and text order should be reversed, but the # should still be kept to the left of the hex code.
• Select: Arrow and text order should be reversed
• Switch: Component input and text order should be reversed. The selected state should place the dot to the left, and the unselected state should put it to the the right (reversed to what it is currently).
• TextArea: Component should resize to the left, text should be aligned to the right
• TextInput: Text should be aligned to the right

Icon

We should allow an isRTL icon, for when the Icon direction should change depending on the text direction.

Layout

This component supports bidirectionality out of the box.

Loading Animation

This component supports bidirectionality out of the box.

Note: because a loading animation is showing basically showing progress over time and time is going forward, progress bars and loading animation are not reversed (same if we were building a Podcast player app, the progress would go the same direction, and the Play icon would also be the same direction).

Therefore, it makes sense to keep the dots animating at they are for all languages.

Modal & Popup

In RTL, the order of the elements in the main container should be reversed. The CTA should be on the right, the close icon should be on the left.

Page Header

In RTL, the order of the elements in the main container should be reversed.

Side Panel

In RTL, the Expand/Collapse icon should be on the left and flipped.

Sketelon

This component supports bidirectionality out of the box, but Complete should be flipped.

❓In RTL, should we also reverse the direction of the animation?

Status Indicator

In RTL, the order of the elements in the main container should be reversed.

Table

In RTL, the order of the columns should be reversed.

❓Number are tricky, roman number should be displayed in LTR but arabic numbers should not for example.

Toast

In RTL, the order of the elements in the main container should be reversed.

Tooltip

This component supports bidirectionality out of the box.

[anicholls]

Awesome work putting this together @stephanerangaya!

Is there ever a case where some components would be RTL and others not? I'm wondering if we should provide this from a higher order component rather than needing to pass the prop to every single component. We could build this into the CanvasProvider that I'm working on in #272. It would look something like:

import * as React from 'react';
import {CanvasProvider} from '@workday/canvas-kit-react';

<CanvasProvider isRTL={true}>
{/* All your components containing any Canvas components */}
</CanvasProvider>;

This flag would then be available to all components within the CanvasProvider using React's context API.

[stephanerangaya]

Yes, there are cases where some components would be RTL and some not. For example, if you have a progress bar that show an audio track, it wouldn't be RTL but LTR, but if it shows the space you use on your data plan, it should be RTL, even though technically it is the same underlaying component.

But maybe we could compose using CanvasProvider by nesting them?

[anicholls]

Ah, good point. Yeah that's how we do custom themes for a given component

[stephanerangaya]

Not supported with all browsers yet but it is nonetheless an interesting tag, we should use it when it makes sense https://developer.mozilla.org/en-US/docs/Web/HTML/Element/bdi

[NicholasBoll]

It looks like adding dir="auto" to an element of an unknown source can also isolate the directionality: https://stackoverflow.com/questions/58504199/difference-between-bdi-and-span-dir-auto

The dir attribute is still not supported on IE11 or non-blink Edge.