From 93ce45b135fca540c1f6f31caeb772ce0049e47b Mon Sep 17 00:00:00 2001 From: kuzhelov Date: Mon, 23 Jul 2018 04:35:09 +0200 Subject: [PATCH 1/5] introduce dir attribute to support proper rtl text rendering --- src/components/Text/Text.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index cc69f5b39c..a1910d4ecd 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -67,7 +67,7 @@ class Text extends UIComponent { renderComponent({ ElementType, classes, rest }) { const { children, content } = this.props return ( - + {childrenExist(children) ? children : content} ) From 4ca1c777762ddd2490a7936050cf320fe2305f43 Mon Sep 17 00:00:00 2001 From: kuzhelov Date: Thu, 22 Nov 2018 17:19:08 +0300 Subject: [PATCH 2/5] update approach suggested --- src/components/Text/Text.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index 7885bfb349..04220abdca 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -85,9 +85,14 @@ class Text extends UIComponent, any> { renderComponent({ ElementType, classes, rest }): React.ReactNode { const { children, content } = this.props + + const hasChidlren = childrenExist(children) + + const maybeDirAuto = !hasChidlren && typeof content === 'string' ? { dir: 'auto' } : {} + return ( - - {childrenExist(children) ? children : content} + + {hasChidlren ? children : content} ) } From 94e885e0eb08ec061663b9be652cb4c3bb70b0e9 Mon Sep 17 00:00:00 2001 From: kuzhelov Date: Thu, 22 Nov 2018 17:29:35 +0300 Subject: [PATCH 3/5] address comments --- src/components/Text/Text.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index 04220abdca..c6c62a6614 100644 --- a/src/components/Text/Text.tsx +++ b/src/components/Text/Text.tsx @@ -88,10 +88,10 @@ class Text extends UIComponent, any> { const hasChidlren = childrenExist(children) - const maybeDirAuto = !hasChidlren && typeof content === 'string' ? { dir: 'auto' } : {} + const maybeDirAuto = !hasChidlren && typeof content === 'string' ? { dir: 'auto' } : null return ( - + {hasChidlren ? children : content} ) From 9bd7da55806ed804eb2cd71ad406faa9267926aa Mon Sep 17 00:00:00 2001 From: kuzhelov Date: Fri, 23 Nov 2018 03:50:48 +0300 Subject: [PATCH 4/5] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 012f4638a5..376d631671 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)) From fb1dded3e7ba80d848dd86f72d9c506ae57bf6c9 Mon Sep 17 00:00:00 2001 From: kuzhelov Date: Fri, 23 Nov 2018 16:05:40 +0300 Subject: [PATCH 5/5] introduce necessary description for RTL aspects --- src/components/Text/Text.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Text/Text.tsx b/src/components/Text/Text.tsx index c6c62a6614..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 @@ -86,13 +90,13 @@ class Text extends UIComponent, any> { renderComponent({ ElementType, classes, rest }): React.ReactNode { const { children, content } = this.props - const hasChidlren = childrenExist(children) + const hasChildren = childrenExist(children) - const maybeDirAuto = !hasChidlren && typeof content === 'string' ? { dir: 'auto' } : null + const maybeDirAuto = !hasChildren && typeof content === 'string' ? { dir: 'auto' } : null return ( - {hasChidlren ? children : content} + {hasChildren ? children : content} ) }