feat(react): add support for layout and text direction

[joshblack]

This PR is a preview of potential changes we could make to better support bidirectional layout and text in Carbon.

For those seeing this work for the first time, you may be familiar with the dir or direction property in HTML and CSS. This direction is commonly seen as the way to enable LTR (left to right) or RTL (right to left) experiences on the web. However, one common misconception is that you will want a page to always be LTR or RTL. In certain situations, you may want the layout direction to be different than the text direction.

The localization section on Material has a great example of this from Google Docs: https://material.io/design/usability/bidirectionality.html#localization In this example, they show that the editor is in a LTR mode but when editing RTL text you will want the text and controls to be mirrored, as appropriate.

This PR looks to add in a distinction between layout and text direction and provides a primitive type, Text, that can be used to automatically infer text direction and override it, when appropriate. These primitives include:

• LayoutDirection for setting the layout direction in a part of an application
• TextDirection for setting the text direction in a part of an application
• Text for applying the correct dir attribute on a particular text node based on the TextDirection, defaulting to auto

This draft also includes an update for what this will look like for RadioButton and RadioButtonGroup. The tl;dr of these changes is to replace any location where text can be rendered with a Text component.

The storybook includes several demos:

• A default example with simple Text direction support
• A layout direction example with a default LTR mode switching to RTL for a paragraph written in Arabic
• A text direction override example that allows a consumer to force the text direction of any particular text in the sub-tree

[netlify]

✔️ Deploy Preview for carbon-react-next ready!

🔨 Explore the source changes: 0090929

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/61154328e1950f0008145dff

😎 Browse the preview: https://deploy-preview-9013--carbon-react-next.netlify.app

[netlify]

✔️ Deploy Preview for carbon-elements ready!

🔨 Explore the source changes: 0090929

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/61154328e5ade900075b75d9

😎 Browse the preview: https://deploy-preview-9013--carbon-elements.netlify.app

[netlify]

✔️ Deploy Preview for carbon-components-react ready!
Built without sensitive environment variables

🔨 Explore the source changes: 0090929

🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/611543285ac5250007906337

😎 Browse the preview: https://deploy-preview-9013--carbon-components-react.netlify.app

[joshblack]

cc @jnm2377 @andreancardona let me know if you have any questions!

[jnm2377]

Phew that was a lot to wrap my head around lol but really awesome!

[kubijo]

Hello.

I'm just working on RTL layout for our web written in (React version) of CDS & I have quite a lot of style overrides, so I was looking for some tracking ticket regarding this whole topic so that I have at least some kind of handle on things that might start moving under my feet… and where I can potentially share my patches should there be any desire for that.

Do you know if there is such one place?

[joshblack]

@kubijo one quick win will be to use RTLCSS which will help out with most of the transformations. This is currently our recommendation but let us know if this isn't covering all of your use-cases!

[kubijo]

Well, that's just a one possible helping hand for making the hacks necessary for CDS to work, but doesn't address the underlying fact that there is a need for those.

To be clear, I'm not expecting anyone to get up and start fixing it for me, but if there is an initiative to fix up CDS components to work properly under RTL layout, I'd like to know about it to be able to monitor potential changes & needed clean-up on our side…

To illustrate what I'm talking about, here are a few of the things I had to do:
(the methods in rtl module are my little helpers in lieu of RTLCSS from my understanding of that tool)

// RTL checkbox
.bx--checkbox-label {
    @include rtl.prop(padding, $left: 1.75rem, $right: 0);

    &::before {
        @include rtl.position($left: 0);
        @include rtl.prop(margin, $right: 0.125rem, $left: 0.1875rem);
    }
    &::after {
        @include rtl.position($left: 0.4375rem);
    }
}

// Menu items in dropdowns
.bx--list-box__menu-item__option {
    @include rtl.prop(padding, $right: 1.5rem, $left: 0);
}

// Tag
.bx--tag--filter {
    @include rtl.prop(padding, $left: 0.5rem, $right: 0, $important: true);
}
.bx--tag__close-icon {
    @include rtl.prop(margin, $left: 0.125rem, $right: 0, $important: true);
}

// Radio button element spacing
.bx--radio-button__appearance {
    @include rtl.prop(margin, $left: 0.125rem, $right: 0.5rem);
}

[joshblack]

@kubijo got it! Wasn't sure what background there was and wanted to provide context.

In terms of meaningful changes, I think that in terms of styles the biggest switch in v11 will be the use of logical properties. We'll also be adding previews for RTL directly in storybook 👍

[kubijo]

I see, that sounds foreign to me, but like something that aims at what I'm after :)... Is there already anything can subscribe too?