Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit fdfb8bf

Browse files
mnajdovamnajdova
authored
feat(rtl): add span element with dir: 'auto' for the strings used in the Stardust components (#704)
* -added factories for generating the content as a slot or as a react node -added examples in the Button and Header component * -fix expression in Header component * -changed some other components * -reverted ChatMessage changes * -reverted ChatItem changes * -refactored Slot component to generate Text component is the content is string -reverted changes in the other components that were using the Slot component * -checking for children string in the Slot and Text components * -checking for children string in the all components * -reverted changes for children in MenuItem * -added rtlProps -refactored components to use the rtlProps * -added rtlProps in the Button component * -added rtlProps in the ChatMessage component * -adding rtlProps to all other components * -added rtl props in the default behavior * -changed generation of span with dir auto * -refactored other components to use the rtlTransformedChildren|Content * -fixed regarding the prev changes * -added getRtlTransformedElement usages in some of the components * -added addRtlSupport services and used it in all components * -updated changelog * -added rtl attributes as part of the renderComponent * -fixed imports -added more refactorings * -changed all components to use the rtlAttributes * -fixes * -removed unnecessary rtl attributes -exported children dependent rtl attributes * -add childrenExists logic in the children dependent rtl attributes * -fix AccordionContent rtl issues * -fix header * -renamed RtlFunc to RtlAttributesProvider and exported it from the rtl's index file * -refactored components to use rtlTextContainer service * -refactored getAttributes method from rtlTextContainer -updated changelog
1 parent 2166d21 commit fdfb8bf

32 files changed

+219
-53
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
3030
- Add and export 'missed call' icon in Teams theme @codepretty ([#748](https://github.com/stardust-ui/react/pull/748))
3131
- Add `Indicator` component and used it in `MenuItem` and `AccordionTitle` @mnajdova ([#721](https://github.com/stardust-ui/react/pull/721))
3232
- Expose `renderItem` and `renderSelectedItem` callbacks API for `Dropdown` @layershifter ([#746](https://github.com/stardust-ui/react/pull/746))
33+
- Add RTL support for the strings used inside the components @mnajdova ([#704](https://github.com/stardust-ui/react/pull/704))
3334

3435
### Documentation
3536
- Refine Shorthand docs page content @kuzhelov ([#751](https://github.com/stardust-ui/react/pull/751))

‎src/components/Accordion/Accordion.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
UIComponentProps,
1010
ChildrenComponentProps,
1111
commonPropTypes,
12+
rtlTextContainer,
1213
} from '../../lib'
1314
import AccordionTitle from './AccordionTitle'
1415
import AccordionContent from './AccordionContent'
@@ -180,7 +181,12 @@ class Accordion extends AutoControlledComponent<ReactProps<AccordionProps>, any>
180181
const { children } = this.props
181182

182183
return (
183-
<ElementType {...accessibility.attributes.root} {...unhandledProps} className={classes.root}>
184+
<ElementType
185+
{...accessibility.attributes.root}
186+
{...rtlTextContainer.getAttributes({ forElements: [children] })}
187+
{...unhandledProps}
188+
className={classes.root}
189+
>
184190
{childrenExist(children) ? children : this.renderPanels()}
185191
</ElementType>
186192
)

‎src/components/Accordion/AccordionContent.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
ChildrenComponentProps,
1010
ContentComponentProps,
1111
commonPropTypes,
12+
rtlTextContainer,
1213
} from '../../lib'
1314
import { ReactProps, ComponentEventHandler } from '../../../types/utils'
1415

@@ -48,7 +49,11 @@ class AccordionContent extends UIComponent<ReactProps<AccordionContentProps>, an
4849
const { children, content } = this.props
4950

5051
return (
51-
<ElementType {...unhandledProps} className={classes.root}>
52+
<ElementType
53+
{...rtlTextContainer.getAttributes({ forElements: [children, content] })}
54+
{...unhandledProps}
55+
className={classes.root}
56+
>
5257
{childrenExist(children) ? children : content}
5358
</ElementType>
5459
)

‎src/components/Accordion/AccordionTitle.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,11 @@ import {
1111
ChildrenComponentProps,
1212
commonPropTypes,
1313
customPropTypes,
14+
rtlTextContainer,
1415
} from '../../lib'
1516
import { ReactProps, ComponentEventHandler, ShorthandValue } from '../../../types/utils'
1617
import Indicator from '../Indicator/Indicator'
18+
1719
export interface AccordionTitleProps
1820
extends UIComponentProps,
1921
ContentComponentProps,
@@ -70,12 +72,17 @@ class AccordionTitle extends UIComponent<ReactProps<AccordionTitleProps>, any> {
7072
styles: styles.indicator,
7173
},
7274
})}
73-
{content}
75+
{rtlTextContainer.createFor({ element: content })}
7476
</>
7577
)
7678

7779
return (
78-
<ElementType {...unhandledProps} className={classes.root} onClick={this.handleClick}>
80+
<ElementType
81+
{...rtlTextContainer.getAttributes({ forElements: [children] })}
82+
{...unhandledProps}
83+
className={classes.root}
84+
onClick={this.handleClick}
85+
>
7986
{childrenExist(children) ? children : contentElement}
8087
</ElementType>
8188
)

‎src/components/Box/Box.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import {
66
ContentComponentProps,
77
ChildrenComponentProps,
88
commonPropTypes,
9+
rtlTextContainer,
910
} from '../../lib'
1011
import createComponent, { CreateComponentReturnType } from '../../lib/createComponent'
1112
import { ReactProps } from '../../../types/utils'
@@ -32,7 +33,11 @@ const Box: CreateComponentReturnType<ReactProps<BoxProps>> = createComponent<Box
3233
const { children, content } = props
3334

3435
return (
35-
<ElementType {...unhandledProps} className={classes.root}>
36+
<ElementType
37+
{...rtlTextContainer.getAttributes({ forElements: [children, content] })}
38+
{...unhandledProps}
39+
className={classes.root}
40+
>
3641
{childrenExist(children) ? children : content}
3742
</ElementType>
3843
)

‎src/components/Button/Button.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {
1212
ContentComponentProps,
1313
ChildrenComponentProps,
1414
commonPropTypes,
15+
rtlTextContainer,
1516
} from '../../lib'
1617
import Icon from '../Icon/Icon'
1718
import Box from '../Box/Box'
@@ -137,12 +138,13 @@ class Button extends UIComponent<ReactProps<ButtonProps>, ButtonState> {
137138
onClick={this.handleClick}
138139
onFocus={this.handleFocus}
139140
{...accessibility.attributes.root}
141+
{...rtlTextContainer.getAttributes({ forElements: [children] })}
140142
{...unhandledProps}
141143
>
142144
{hasChildren && children}
143145
{!hasChildren && iconPosition !== 'after' && this.renderIcon(variables, styles)}
144146
{Box.create(!hasChildren && content, {
145-
defaultProps: { as: 'span', className: classes.content },
147+
defaultProps: { as: 'span', styles: styles.content },
146148
})}
147149
{!hasChildren && iconPosition === 'after' && this.renderIcon(variables, styles)}
148150
</ElementType>

‎src/components/Button/ButtonGroup.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
ChildrenComponentProps,
1212
ContentComponentProps,
1313
commonPropTypes,
14+
rtlTextContainer,
1415
} from '../../lib'
1516
import Button from './Button'
1617

@@ -51,11 +52,12 @@ class ButtonGroup extends UIComponent<ReactProps<ButtonGroupProps>, any> {
5152
styles,
5253
unhandledProps,
5354
}): React.ReactNode {
54-
const { children, content, buttons, circular } = this.props
55+
const { children, buttons, circular, content } = this.props
5556
if (_.isNil(buttons)) {
5657
return (
5758
<ElementType
5859
{...accessibility.attributes.root}
60+
{...rtlTextContainer.getAttributes({ forElements: [children, content] })}
5961
{...unhandledProps}
6062
className={classes.root}
6163
>

‎src/components/Chat/Chat.tsx

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@ import * as _ from 'lodash'
22
import * as PropTypes from 'prop-types'
33
import * as React from 'react'
44

5-
import { childrenExist, customPropTypes, UIComponent, commonPropTypes } from '../../lib'
5+
import {
6+
childrenExist,
7+
customPropTypes,
8+
UIComponent,
9+
commonPropTypes,
10+
rtlTextContainer,
11+
} from '../../lib'
612
import ChatItem from './ChatItem'
713
import ChatMessage from './ChatMessage'
814
import { ReactProps, ShorthandValue } from '../../../types/utils'
@@ -37,7 +43,10 @@ class Chat extends UIComponent<ReactProps<ChatProps>, any> {
3743
items: PropTypes.arrayOf(customPropTypes.itemShorthand),
3844
}
3945

40-
static defaultProps = { accessibility: chatBehavior, as: 'ul' }
46+
static defaultProps = {
47+
accessibility: chatBehavior,
48+
as: 'ul',
49+
}
4150

4251
static Item = ChatItem
4352
static Message = ChatMessage
@@ -54,6 +63,7 @@ class Chat extends UIComponent<ReactProps<ChatProps>, any> {
5463
className={classes.root}
5564
{...accessibility.attributes.root}
5665
{...accessibility.keyHandlers.root}
66+
{...rtlTextContainer.getAttributes({ forElements: [children] })}
5767
{...unhandledProps}
5868
>
5969
{childrenExist(children) ? children : _.map(items, item => ChatItem.create(item))}

‎src/components/Chat/ChatItem.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
ChildrenComponentProps,
1212
commonPropTypes,
1313
customPropTypes,
14+
rtlTextContainer,
1415
} from '../../lib'
1516
import Box from '../Box/Box'
1617
import { ComponentSlotStylesPrepared } from '../../themes/types'
@@ -55,7 +56,11 @@ class ChatItem extends UIComponent<ReactProps<ChatItemProps>, any> {
5556
const { children } = this.props
5657

5758
return (
58-
<ElementType {...unhandledProps} className={classes.root}>
59+
<ElementType
60+
{...rtlTextContainer.getAttributes({ forElements: [children] })}
61+
{...unhandledProps}
62+
className={classes.root}
63+
>
5964
{childrenExist(children) ? children : this.renderChatItem(styles)}
6065
</ElementType>
6166
)

‎src/components/Chat/ChatMessage.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
ContentComponentProps,
1515
commonPropTypes,
1616
isFromKeyboard,
17+
rtlTextContainer,
1718
} from '../../lib'
1819
import { ReactProps, ShorthandValue, ComponentEventHandler } from '../../../types/utils'
1920
import { chatMessageBehavior } from '../../lib/accessibility'
@@ -109,6 +110,7 @@ class ChatMessage extends UIComponent<ReactProps<ChatMessageProps>, ChatMessageS
109110
<ElementType
110111
{...accessibility.attributes.root}
111112
{...accessibility.keyHandlers.root}
113+
{...rtlTextContainer.getAttributes({ forElements: [children] })}
112114
{...unhandledProps}
113115
onFocus={this.handleFocus}
114116
className={className}

‎src/components/Divider/Divider.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
ColorComponentProps,
1111
ContentComponentProps,
1212
commonPropTypes,
13+
rtlTextContainer,
1314
} from '../../lib'
1415
import { ReactProps } from '../../../types/utils'
1516

@@ -53,7 +54,11 @@ class Divider extends UIComponent<ReactProps<DividerProps>, any> {
5354
const { children, content } = this.props
5455

5556
return (
56-
<ElementType {...unhandledProps} className={classes.root}>
57+
<ElementType
58+
{...rtlTextContainer.getAttributes({ forElements: [children, content] })}
59+
{...unhandledProps}
60+
className={classes.root}
61+
>
5762
{childrenExist(children) ? children : content}
5863
</ElementType>
5964
)

‎src/components/Form/Form.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
UIComponentProps,
1010
ChildrenComponentProps,
1111
commonPropTypes,
12+
rtlTextContainer,
1213
} from '../../lib'
1314
import { ComponentEventHandler, ReactProps, ShorthandValue } from '../../../types/utils'
1415
import FormField from './FormField'
@@ -62,6 +63,7 @@ class Form extends UIComponent<ReactProps<FormProps>, any> {
6263
className={classes.root}
6364
action={action}
6465
onSubmit={this.handleSubmit}
66+
{...rtlTextContainer.getAttributes({ forElements: [children] })}
6567
{...unhandledProps}
6668
>
6769
{childrenExist(children) ? children : this.renderFields()}

‎src/components/Grid/Grid.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
ChildrenComponentProps,
1010
commonPropTypes,
1111
ContentComponentProps,
12+
rtlTextContainer,
1213
} from '../../lib'
1314
import { ReactProps } from '../../../types/utils'
1415
import { Accessibility } from '../../lib/accessibility/types'
@@ -72,7 +73,11 @@ class Grid extends UIComponent<ReactProps<GridProps>, any> {
7273
const { children, content } = this.props
7374

7475
return (
75-
<ElementType className={classes.root} {...unhandledProps}>
76+
<ElementType
77+
className={classes.root}
78+
{...rtlTextContainer.getAttributes({ forElements: [children, content] })}
79+
{...unhandledProps}
80+
>
7681
{childrenExist(children) ? children : content}
7782
</ElementType>
7883
)

‎src/components/Header/Header.tsx

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
ContentComponentProps,
1111
commonPropTypes,
1212
ColorComponentProps,
13+
rtlTextContainer,
1314
} from '../../lib'
1415
import HeaderDescription from './HeaderDescription'
1516
import { ReactProps, ShorthandValue } from '../../../types/utils'
@@ -45,6 +46,7 @@ class Header extends UIComponent<ReactProps<HeaderProps>, any> {
4546
...commonPropTypes.createCommon({ color: true }),
4647
description: customPropTypes.itemShorthand,
4748
textAlign: PropTypes.oneOf(['left', 'center', 'right', 'justified']),
49+
rtlAttributes: PropTypes.func,
4850
}
4951

5052
static defaultProps = {
@@ -54,26 +56,29 @@ class Header extends UIComponent<ReactProps<HeaderProps>, any> {
5456
static Description = HeaderDescription
5557

5658
renderComponent({ ElementType, classes, variables: v, unhandledProps }) {
57-
const { children, content, description } = this.props
59+
const { children, description, content } = this.props
5860

59-
if (childrenExist(children)) {
60-
return (
61-
<ElementType {...unhandledProps} className={classes.root}>
62-
{children}
63-
</ElementType>
64-
)
65-
}
61+
const hasChildren = childrenExist(children)
62+
const contentElement = childrenExist(children) ? children : content
6663

6764
return (
68-
<ElementType {...unhandledProps} className={classes.root}>
69-
{content}
70-
{HeaderDescription.create(description, {
71-
defaultProps: {
72-
variables: {
73-
...(v.descriptionColor && { color: v.descriptionColor }),
74-
},
75-
},
65+
<ElementType
66+
{...rtlTextContainer.getAttributes({
67+
forElements: [children, content],
68+
condition: !description,
7669
})}
70+
{...unhandledProps}
71+
className={classes.root}
72+
>
73+
{rtlTextContainer.createFor({ element: contentElement, condition: !!description })}
74+
{!hasChildren &&
75+
HeaderDescription.create(description, {
76+
defaultProps: {
77+
variables: {
78+
...(v.descriptionColor && { color: v.descriptionColor }),
79+
},
80+
},
81+
})}
7782
</ElementType>
7883
)
7984
}

‎src/components/Header/HeaderDescription.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {
99
ContentComponentProps,
1010
commonPropTypes,
1111
ColorComponentProps,
12+
rtlTextContainer,
1213
} from '../../lib'
1314
import { ReactProps } from '../../../types/utils'
1415

@@ -39,7 +40,11 @@ class HeaderDescription extends UIComponent<ReactProps<HeaderDescriptionProps>,
3940
renderComponent({ ElementType, classes, unhandledProps }) {
4041
const { children, content } = this.props
4142
return (
42-
<ElementType {...unhandledProps} className={classes.root}>
43+
<ElementType
44+
{...rtlTextContainer.getAttributes({ forElements: [children, content] })}
45+
{...unhandledProps}
46+
className={classes.root}
47+
>
4348
{childrenExist(children) ? children : content}
4449
</ElementType>
4550
)

0 commit comments

Comments
 (0)