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

CHANGELOG.md

@@ -23,6 +23,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Rename `Slot` component to `Box` and export it @Bugaa92 ([#713](https://github.com/stardust-ui/react/pull/713))
+- Add rtl support for the strings used inside the components @mnajdova ([#704](https://github.com/stardust-ui/react/pull/704))
 
 <!--------------------------------[ v0.17.0 ]------------------------------- -->
 ## [v0.17.0](https://github.com/stardust-ui/react/tree/v0.17.0) (2019-01-17)

src/components/Accordion/Accordion.tsx

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

src/components/Accordion/AccordionContent.tsx

@@ -9,6 +9,7 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  addRtlSupport,
 } from '../../lib'
 import { ReactProps, ComponentEventHandler } from '../../../types/utils'
 
@@ -49,7 +50,7 @@ class AccordionContent extends UIComponent<ReactProps<AccordionContentProps>, an
 
     return (
       <ElementType {...unhandledProps} className={classes.root}>
-        {childrenExist(children) ? children : content}
+        {addRtlSupport(childrenExist(children) ? children : content)}
       </ElementType>
     )
   }

src/components/Accordion/AccordionTitle.tsx

@@ -10,6 +10,7 @@ import {
   ContentComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  addRtlSupport,
 } from '../../lib'
 import { ReactProps, ComponentEventHandler } from '../../../types/utils'
 
@@ -56,17 +57,9 @@ class AccordionTitle extends UIComponent<ReactProps<AccordionTitleProps>, any> {
   renderComponent({ ElementType, classes, unhandledProps }) {
     const { children, content } = this.props
 
-    if (childrenExist(children)) {
-      return (
-        <ElementType {...unhandledProps} className={classes.root} onClick={this.handleClick}>
-          {children}
-        </ElementType>
-      )
-    }
-
     return (
       <ElementType {...unhandledProps} className={classes.root} onClick={this.handleClick}>
-        {content}
+        {addRtlSupport(childrenExist(children) ? children : content)}
       </ElementType>
     )
   }

src/components/Box/Box.tsx

@@ -6,6 +6,7 @@ import {
   ContentComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  addRtlSupport,
 } from '../../lib'
 import createComponent, { CreateComponentReturnType } from '../../lib/createComponent'
 import { ReactProps } from '../../../types/utils'
@@ -28,12 +29,12 @@ const Box: CreateComponentReturnType<ReactProps<BoxProps>> = createComponent<Box
   },
 
   render(config, props) {
-    const { ElementType, classes, unhandledProps } = config
+    const { ElementType, classes, unhandledProps, accessibility } = config
     const { children, content } = props
 
     return (
-      <ElementType {...unhandledProps} className={classes.root}>
-        {childrenExist(children) ? children : content}
+      <ElementType {...accessibility.attributes.root} {...unhandledProps} className={classes.root}>
+        {addRtlSupport(childrenExist(children) ? children : content)}
       </ElementType>
     )
   },

src/components/Button/Button.tsx

@@ -12,6 +12,7 @@ import {
   ContentComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  addRtlSupport,
 } from '../../lib'
 import Icon from '../Icon/Icon'
 import Box from '../Box/Box'
@@ -139,10 +140,10 @@ class Button extends UIComponent<ReactProps<ButtonProps>, ButtonState> {
         {...accessibility.attributes.root}
         {...unhandledProps}
       >
-        {hasChildren && children}
+        {hasChildren && addRtlSupport(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,
+  addRtlSupport,
 } from '../../lib'
 import Button from './Button'
 
@@ -51,15 +52,15 @@ 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}
           {...unhandledProps}
           className={classes.root}
         >
-          {childrenExist(children) ? children : content}
+          {addRtlSupport(childrenExist(children) ? children : content)}
         </ElementType>
       )
     }

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,
+  addRtlSupport,
+} from '../../lib'
 import ChatItem from './ChatItem'
 import ChatMessage from './ChatMessage'
 import { ReactProps, ShorthandValue } from '../../../types/utils'
@@ -56,7 +62,9 @@ class Chat extends UIComponent<ReactProps<ChatProps>, any> {
         {...accessibility.keyHandlers.root}
         {...unhandledProps}
       >
-        {childrenExist(children) ? children : _.map(items, item => ChatItem.create(item))}
+        {childrenExist(children)
+          ? addRtlSupport(children)
+          : _.map(items, item => ChatItem.create(item))}
       </ElementType>
     )
   }

src/components/Chat/ChatItem.tsx

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

src/components/Chat/ChatMessage.tsx

@@ -13,6 +13,7 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  addRtlSupport,
   isFromKeyboard,
 } from '../../lib'
 import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../../types/utils'
@@ -114,7 +115,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
         className={className}
       >
         {childrenPropExists ? (
-          children
+          addRtlSupport(children)
         ) : (
           <>
             {!mine &&

src/components/Divider/Divider.tsx

@@ -10,6 +10,7 @@ import {
   ColorComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  addRtlSupport,
 } from '../../lib'
 import { ReactProps } from '../../../types/utils'
 
@@ -54,7 +55,7 @@ class Divider extends UIComponent<ReactProps<DividerProps>, any> {
 
     return (
       <ElementType {...unhandledProps} className={classes.root}>
-        {childrenExist(children) ? children : content}
+        {addRtlSupport(childrenExist(children) ? children : content)}
       </ElementType>
     )
   }

src/components/Form/Form.tsx

@@ -9,6 +9,7 @@ import {
   UIComponentProps,
   ChildrenComponentProps,
   commonPropTypes,
+  addRtlSupport,
 } from '../../lib'
 import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../../types/utils'
 import FormField from './FormField'
@@ -64,7 +65,7 @@ class Form extends UIComponent<ReactProps<FormProps>, any> {
         onSubmit={this.handleSubmit}
         {...unhandledProps}
       >
-        {childrenExist(children) ? children : this.renderFields()}
+        {childrenExist(children) ? addRtlSupport(children) : this.renderFields()}
       </ElementType>
     )
   }

src/components/Grid/Grid.tsx

@@ -9,6 +9,7 @@ import {
   ChildrenComponentProps,
   commonPropTypes,
   ContentComponentProps,
+  addRtlSupport,
 } from '../../lib'
 import { ReactProps } from '../../../types/utils'
 import { Accessibility } from '../../lib/accessibility/types'
@@ -73,7 +74,7 @@ class Grid extends UIComponent<ReactProps<GridProps>, any> {
 
     return (
       <ElementType className={classes.root} {...unhandledProps}>
-        {childrenExist(children) ? children : content}
+        {addRtlSupport(childrenExist(children) ? children : content)}
       </ElementType>
     )
   }

src/components/Header/Header.tsx

@@ -10,6 +10,7 @@ import {
   ContentComponentProps,
   commonPropTypes,
   ColorComponentProps,
+  addRtlSupport,
 } from '../../lib'
 import HeaderDescription from './HeaderDescription'
 import { ReactProps, ShorthandValue } from '../../../types/utils'
@@ -54,26 +55,21 @@ 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)
 
     return (
       <ElementType {...unhandledProps} className={classes.root}>
-        {content}
-        {HeaderDescription.create(description, {
-          defaultProps: {
-            variables: {
-              ...(v.descriptionColor && { color: v.descriptionColor }),
+        {hasChildren ? addRtlSupport(children) : addRtlSupport(content)}
+        {!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,
+  addRtlSupport,
 } from '../../lib'
 import { ReactProps } from '../../../types/utils'
 
@@ -40,7 +41,7 @@ class HeaderDescription extends UIComponent<ReactProps<HeaderDescriptionProps>,
     const { children, content } = this.props
     return (
       <ElementType {...unhandledProps} className={classes.root}>
-        {childrenExist(children) ? children : content}
+        {addRtlSupport(childrenExist(children) ? children : content)}
       </ElementType>
     )
   }

src/components/ItemLayout/ItemLayout.tsx

@@ -9,6 +9,7 @@ import {
   UIComponentProps,
   commonPropTypes,
   ContentComponentProps,
+  addRtlSupport,
 } from '../../lib'
 import Layout from '../Layout/Layout'
 import { ComponentSlotClasses, ICSSInJSStyle } from '../../themes/types'
@@ -126,12 +127,12 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
           gap={pxToRem(8)}
           debug={debug}
           truncateMain={truncateHeader}
-          main={header}
+          main={addRtlSupport(header)}
           rootCSS={headerCSS}
           end={
             headerMedia && (
               <span style={headerMediaCSS} className={mediaClasses}>
-                {headerMedia}
+                {addRtlSupport(headerMedia)}
               </span>
             )
           }
@@ -153,11 +154,11 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
           debug={debug}
           truncateMain={truncateContent}
           rootCSS={contentCSS}
-          main={content}
+          main={addRtlSupport(content)}
           end={
             contentMedia && (
               <span style={contentMediaCSS} className={mediaClasses}>
-                {contentMedia}
+                {addRtlSupport(contentMedia)}
               </span>
             )
           }
@@ -190,15 +191,15 @@ class ItemLayout extends UIComponent<ReactProps<ItemLayoutProps>, any> {
         start={
           startArea && (
             <span style={mediaCSS} className={mergedMediaClasses}>
-              {startArea}
+              {addRtlSupport(startArea)}
             </span>
           )
         }
         main={mainArea}
         end={
           endArea && (
             <span style={endMediaCSS} className={mergedEndMediaClasses}>
-              {endArea}
+              {addRtlSupport(endArea)}
             </span>
           )
         }

src/components/Label/Label.tsx

@@ -11,6 +11,7 @@ import {
   ChildrenComponentProps,
   ContentComponentProps,
   commonPropTypes,
+  addRtlSupport,
   ColorComponentProps,
 } from '../../lib'
 
@@ -88,7 +89,7 @@ class Label extends UIComponent<ReactProps<LabelProps>, any> {
     if (childrenExist(children)) {
       return (
         <ElementType {...unhandledProps} className={classes.root}>
-          {children}
+          {addRtlSupport(children)}
         </ElementType>
       )
     }
@@ -126,7 +127,7 @@ class Label extends UIComponent<ReactProps<LabelProps>, any> {
               </>
             )
           }
-          main={content}
+          main={addRtlSupport(content)}
           end={
             hasEndElement && (
               <>