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

src/components/Button/Button.tsx

@@ -14,11 +14,11 @@ import {
   commonPropTypes,
 } from '../../lib'
 import Icon from '../Icon/Icon'
-import Slot from '../Slot/Slot'
 import { buttonBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
 import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../../types/utils'
 import ButtonGroup from './ButtonGroup'
+import { generateContentSlot } from '../../lib/generateContent'
 
 export interface ButtonProps
   extends UIComponentProps,
@@ -141,9 +141,10 @@ class Button extends UIComponent<ReactProps<ButtonProps>, ButtonState> {
       >
         {hasChildren && children}
         {!hasChildren && iconPosition !== 'after' && this.renderIcon(variables, styles)}
-        {Slot.create(!hasChildren && content, {
-          defaultProps: { as: 'span', className: classes.content },
-        })}
+        {!hasChildren &&
+          generateContentSlot(content, {
+            defaultProps: { as: 'span', className: classes.content },
+          })}
         {!hasChildren && iconPosition === 'after' && this.renderIcon(variables, styles)}
       </ElementType>
     )

src/components/Header/Header.tsx

@@ -13,6 +13,7 @@ import {
 } from '../../lib'
 import HeaderDescription from './HeaderDescription'
 import { ReactProps, ShorthandValue } from '../../../types/utils'
+import { generateContentElement } from '../../lib/generateContent'
 
 export interface HeaderProps
   extends UIComponentProps,
@@ -66,7 +67,7 @@ class Header extends UIComponent<ReactProps<HeaderProps>, any> {
 
     return (
       <ElementType {...unhandledProps} className={classes.root}>
-        {content}
+        {generateContentElement(content)}
         {HeaderDescription.create(description, {
           defaultProps: {
             variables: {

src/lib/factories.ts

@@ -14,7 +14,7 @@ import { mergeStyles } from './mergeThemes'
 type HTMLTag = 'iframe' | 'img' | 'input'
 type ShorthandProp = 'children' | 'src' | 'type'
 
-interface CreateShorthandOptions {
+export interface CreateShorthandOptions {
   /** Default props object */
   defaultProps?: Props
 

src/lib/generateContent.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { ShorthandValue, ShorthandRenderCallback } from '../../types/utils'
+import { CreateShorthandOptions } from './factories'
+import Slot from '../components/Slot/Slot'
+import Text from '../components/Text/Text'
+
+export const generateContentSlot = (
+  content: ShorthandValue | ShorthandRenderCallback,
+  options: CreateShorthandOptions,
+) => {
+  if (typeof content === 'string') {
+    return Text.create(content, options)
+  }
+  return Slot.create(content, options)
+}
+
+export const generateContentElement = (content: React.ReactNode) => {
+  if (typeof content === 'string') {
+    return Text.create(content)
+  }
+  return content
+}