feat(rtl): add span element with dir: 'auto' for the strings used in the Stardust components

CHANGELOG.md

@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add and export 'missed call' icon in Teams theme @codepretty ([#748](https://github.com/stardust-ui/react/pull/748))
 - Add `Indicator` component and used it in `MenuItem` and `AccordionTitle` @mnajdova ([#721](https://github.com/stardust-ui/react/pull/721))
 - Expose `renderItem` and `renderSelectedItem` callbacks API for `Dropdown` @layershifter ([#746](https://github.com/stardust-ui/react/pull/746))
+- Add RTL support for the strings used inside the components @mnajdova ([#704](https://github.com/stardust-ui/react/pull/704))
 
 ### Documentation
 - Refine Shorthand docs page content @kuzhelov ([#751](https://github.com/stardust-ui/react/pull/751))

src/components/Accordion/Accordion.tsx

@@ -9,6 +9,7 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import AccordionTitle from './AccordionTitle'
 import AccordionContent from './AccordionContent'
@@ -180,7 +181,12 @@ class Accordion extends AutoControlledComponent<ReactProps<AccordionProps>, any>
     const { children } = this.props
 
     return (
-      <ElementType {...accessibility.attributes.root} {...unhandledProps} className={classes.root}>
+      <ElementType
+        {...accessibility.attributes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
+        {...unhandledProps}
+        className={classes.root}
+      >
         {childrenExist(children) ? children : this.renderPanels()}
       </ElementType>
     )

src/components/Accordion/AccordionContent.tsx

@@ -9,6 +9,7 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps, ComponentEventHandler } from '../../../types/utils'
 
@@ -48,7 +49,11 @@ class AccordionContent extends UIComponent<ReactProps<AccordionContentProps>, an
     const { children, content } = this.props
 
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
+      <ElementType
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...unhandledProps}
+        className={classes.root}
+      >
         {childrenExist(children) ? children : content}
       </ElementType>
     )

src/components/Accordion/AccordionTitle.tsx

@@ -11,9 +11,11 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
   customPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps, ComponentEventHandler, ShorthandValue } from '../../../types/utils'
 import Indicator from '../Indicator/Indicator'
+
 export interface AccordionTitleProps
   extends UIComponentProps,
     ContentComponentProps,
@@ -70,12 +72,17 @@ class AccordionTitle extends UIComponent<ReactProps<AccordionTitleProps>, any> {
             styles: styles.indicator,
           },
         })}
-        {content}
+        {rtlTextContainer.createFor({ element: content })}
       </>
     )
 
     return (
-      <ElementType {...unhandledProps} className={classes.root} onClick={this.handleClick}>
+      <ElementType
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
+        {...unhandledProps}
+        className={classes.root}
+        onClick={this.handleClick}
+      >
         {childrenExist(children) ? children : contentElement}
       </ElementType>
     )

src/components/Box/Box.tsx

@@ -6,6 +6,7 @@ import {
   ContentComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import createComponent, { CreateComponentReturnType } from '../../lib/createComponent'
 import { ReactProps } from '../../../types/utils'
@@ -32,7 +33,11 @@ const Box: CreateComponentReturnType<ReactProps<BoxProps>> = createComponent<Box
     const { children, content } = props
 
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
+      <ElementType
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...unhandledProps}
+        className={classes.root}
+      >
         {childrenExist(children) ? children : content}
       </ElementType>
     )

src/components/Button/Button.tsx

@@ -12,6 +12,7 @@ import {
   ContentComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Box from '../Box/Box'
@@ -137,12 +138,13 @@ class Button extends UIComponent<ReactProps<ButtonProps>, ButtonState> {
         onClick={this.handleClick}
         onFocus={this.handleFocus}
         {...accessibility.attributes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
       >
         {hasChildren && children}
         {!hasChildren && iconPosition !== 'after' && this.renderIcon(variables, styles)}
         {Box.create(!hasChildren && content, {
-          defaultProps: { as: 'span', className: classes.content },
+          defaultProps: { as: 'span', styles: styles.content },
         })}
         {!hasChildren && iconPosition === 'after' && this.renderIcon(variables, styles)}
       </ElementType>

src/components/Button/ButtonGroup.tsx

@@ -11,6 +11,7 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import Button from './Button'
 
@@ -51,11 +52,12 @@ class ButtonGroup extends UIComponent<ReactProps<ButtonGroupProps>, any> {
     styles,
     unhandledProps,
   }): React.ReactNode {
-    const { children, content, buttons, circular } = this.props
+    const { children, buttons, circular, content } = this.props
     if (_.isNil(buttons)) {
       return (
         <ElementType
           {...accessibility.attributes.root}
+          {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
           {...unhandledProps}
           className={classes.root}
         >

src/components/Chat/Chat.tsx

@@ -2,7 +2,13 @@ import * as _ from 'lodash'
 import * as PropTypes from 'prop-types'
 import * as React from 'react'
 
-import { childrenExist, customPropTypes, UIComponent, commonPropTypes } from '../../lib'
+import {
+  childrenExist,
+  customPropTypes,
+  UIComponent,
+  commonPropTypes,
+  rtlTextContainer,
+} from '../../lib'
 import ChatItem from './ChatItem'
 import ChatMessage from './ChatMessage'
 import { ReactProps, ShorthandValue } from '../../../types/utils'
@@ -37,7 +43,10 @@ class Chat extends UIComponent<ReactProps<ChatProps>, any> {
     items: PropTypes.arrayOf(customPropTypes.itemShorthand),
   }
 
-  static defaultProps = { accessibility: chatBehavior, as: 'ul' }
+  static defaultProps = {
+    accessibility: chatBehavior,
+    as: 'ul',
+  }
 
   static Item = ChatItem
   static Message = ChatMessage
@@ -54,6 +63,7 @@ class Chat extends UIComponent<ReactProps<ChatProps>, any> {
         className={classes.root}
         {...accessibility.attributes.root}
         {...accessibility.keyHandlers.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
       >
         {childrenExist(children) ? children : _.map(items, item => ChatItem.create(item))}

src/components/Chat/ChatItem.tsx

@@ -11,6 +11,7 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
   customPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import Box from '../Box/Box'
 import { ComponentSlotStylesPrepared } from '../../themes/types'
@@ -55,7 +56,11 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
     const { children } = this.props
 
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
+      <ElementType
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
+        {...unhandledProps}
+        className={classes.root}
+      >
         {childrenExist(children) ? children : this.renderChatItem(styles)}
       </ElementType>
     )

src/components/Chat/ChatMessage.tsx

@@ -14,6 +14,7 @@ import {
   ContentComponentProps,
   commonPropTypes,
   isFromKeyboard,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../../types/utils'
 import { chatMessageBehavior } from '../../lib/accessibility'
@@ -109,6 +110,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
       <ElementType
         {...accessibility.attributes.root}
         {...accessibility.keyHandlers.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
         onFocus={this.handleFocus}
         className={className}

src/components/Divider/Divider.tsx

@@ -10,6 +10,7 @@ import {
   ColorComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps } from '../../../types/utils'
 
@@ -53,7 +54,11 @@ class Divider extends UIComponent<ReactProps<DividerProps>, any> {
     const { children, content } = this.props
 
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
+      <ElementType
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...unhandledProps}
+        className={classes.root}
+      >
         {childrenExist(children) ? children : content}
       </ElementType>
     )

src/components/Form/Form.tsx

@@ -9,6 +9,7 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  rtlTextContainer,
 } from '../../lib'
 import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../../types/utils'
 import FormField from './FormField'
@@ -62,6 +63,7 @@ class Form extends UIComponent<ReactProps<FormProps>, any> {
         className={classes.root}
         action={action}
         onSubmit={this.handleSubmit}
+        {...rtlTextContainer.getAttributes({ forElements: [children] })}
         {...unhandledProps}
       >
         {childrenExist(children) ? children : this.renderFields()}

src/components/Grid/Grid.tsx

@@ -9,6 +9,7 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
   ContentComponentProps,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps } from '../../../types/utils'
 import { Accessibility } from '../../lib/accessibility/types'
@@ -72,7 +73,11 @@ class Grid extends UIComponent<ReactProps<GridProps>, any> {
     const { children, content } = this.props
 
     return (
-      <ElementType className={classes.root} {...unhandledProps}>
+      <ElementType
+        className={classes.root}
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...unhandledProps}
+      >
         {childrenExist(children) ? children : content}
       </ElementType>
     )

src/components/Header/Header.tsx

@@ -10,6 +10,7 @@ import {
   ContentComponentProps,
   commonPropTypes,
   ColorComponentProps,
+  rtlTextContainer,
 } from '../../lib'
 import HeaderDescription from './HeaderDescription'
 import { ReactProps, ShorthandValue } from '../../../types/utils'
@@ -45,6 +46,7 @@ class Header extends UIComponent<ReactProps<HeaderProps>, any> {
     ...commonPropTypes.createCommon({ color: true }),
     description: customPropTypes.itemShorthand,
     textAlign: PropTypes.oneOf(['left', 'center', 'right', 'justified']),
+    rtlAttributes: PropTypes.func,
   }
 
   static defaultProps = {
@@ -54,26 +56,29 @@ class Header extends UIComponent<ReactProps<HeaderProps>, any> {
   static Description = HeaderDescription
 
   renderComponent({ ElementType, classes, variables: v, unhandledProps }) {
-    const { children, content, description } = this.props
+    const { children, description, content } = this.props
 
-    if (childrenExist(children)) {
-      return (
-        <ElementType {...unhandledProps} className={classes.root}>
-          {children}
-        </ElementType>
-      )
-    }
+    const hasChildren = childrenExist(children)
+    const contentElement = childrenExist(children) ? children : content
 
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
-        {content}
-        {HeaderDescription.create(description, {
-          defaultProps: {
-            variables: {
-              ...(v.descriptionColor && { color: v.descriptionColor }),
-            },
-          },
+      <ElementType
+        {...rtlTextContainer.getAttributes({
+          forElements: [children, content],
+          condition: !description,
         })}
+        {...unhandledProps}
+        className={classes.root}
+      >
+        {rtlTextContainer.createFor({ element: contentElement, condition: !!description })}
+        {!hasChildren &&
+          HeaderDescription.create(description, {
+            defaultProps: {
+              variables: {
+                ...(v.descriptionColor && { color: v.descriptionColor }),
+              },
+            },
+          })}
       </ElementType>
     )
   }

src/components/Header/HeaderDescription.tsx

@@ -9,6 +9,7 @@ import {
   ContentComponentProps,
   commonPropTypes,
   ColorComponentProps,
+  rtlTextContainer,
 } from '../../lib'
 import { ReactProps } from '../../../types/utils'
 
@@ -39,7 +40,11 @@ class HeaderDescription extends UIComponent<ReactProps<HeaderDescriptionProps>,
   renderComponent({ ElementType, classes, unhandledProps }) {
     const { children, content } = this.props
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
+      <ElementType
+        {...rtlTextContainer.getAttributes({ forElements: [children, content] })}
+        {...unhandledProps}
+        className={classes.root}
+      >
         {childrenExist(children) ? children : content}
       </ElementType>
     )