diff --git a/CHANGELOG.md b/CHANGELOG.md index e17b9bd575..5480bd1a5b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm ### Features - Add `renderComponent` function in the public API @mnajdova ([#503](https://github.com/stardust-ui/react/pull/503)) +- Apply `dir=auto` attribute to string content of `Text` @kuzhelov ([#5](https://github.com/stardust-ui/react/pull/5)) ### Fixes - Fix the behaviour of `AutoControlledComponent` when `undefined` is passed as a prop value @layershifter ([#499](https://github.com/stardust-ui/react/pull/499)) diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index dc545a83d9..6d42fdfdd9 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -55,6 +55,10 @@ export interface TextProps * @accessibility * Text is how people read the content on your website. * Ensure that a contrast ratio of at least 4.5:1 exists between text and the background behind the text. + * + * To ensure that RTL mode will be properly handled for provided 'content' value, ensure that either: + * - 'content' is provided as plain string (then dir="auto" attribute will be applied automatically) + * - for other 'content' value types (i.e. that use elements inside) ensure that dir="auto" attribute is applied for all places in content where necessary */ class Text extends UIComponent, any> { static create: Function @@ -85,9 +89,14 @@ class Text extends UIComponent, any> { renderComponent({ ElementType, classes, rest }): React.ReactNode { const { children, content } = this.props + + const hasChildren = childrenExist(children) + + const maybeDirAuto = !hasChildren && typeof content === 'string' ? { dir: 'auto' } : null + return ( - - {childrenExist(children) ? children : content} + + {hasChildren ? children : content} ) }