fix(unicode-chars): Unicode characters used as arrows in the components are not RTL aware

CHANGELOG.md

@@ -20,6 +20,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Add `on` and `mouseLeaveDelay` props to `Popup` component @mnajdova ([#622](https://github.com/stardust-ui/react/pull/622))
 
+### Fixes
+- Fix unicode arrow characters to be RTL aware ([#690](https://github.com/stardust-ui/react/pull/690))
+
 <!--------------------------------[ v0.16.0 ]------------------------------- -->
 ## [v0.16.0](https://github.com/stardust-ui/react/tree/v0.16.0) (2019-01-07)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.15.0...v0.16.0)

src/themes/teams/components/Accordion/accordionTitleStyles.ts

@@ -1,17 +1,19 @@
 import { ICSSInJSStyle } from '../../../types'
+import { getSideArrow } from '../../utils'
 
 const accordionTitleStyles = {
   root: ({ props, theme }): ICSSInJSStyle => {
     const { active } = props
-    const { arrowDown, arrowRight } = theme.siteVariables
+    const { arrowDown } = theme.siteVariables
+    const sideArrow = getSideArrow(theme)
     return {
       display: 'inline-block',
       verticalAlign: 'middle',
       padding: '.5rem 0',
       cursor: 'pointer',
       '::before': {
         userSelect: 'none',
-        content: active ? `"${arrowDown}"` : `"${arrowRight}"`,
+        content: active ? `"${arrowDown}"` : `"${sideArrow}"`,
       },
     }
   },

src/themes/teams/components/Menu/menuItemStyles.ts

@@ -1,4 +1,4 @@
-import { pxToRem } from '../../utils'
+import { pxToRem, getSideArrow } from '../../utils'
 import { ComponentSlotStyleFunction, ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { MenuVariables } from './menuVariables'
 import { MenuItemProps, MenuItemState } from '../../../../components/Menu/MenuItem'
@@ -252,7 +252,8 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
 
   root: ({ props, variables: v, theme }): ICSSInJSStyle => {
     const { active, iconOnly, isFromKeyboard, pointing, primary, underlined, vertical } = props
-    const { arrowDown, arrowRight } = theme.siteVariables
+    const { arrowDown } = theme.siteVariables
+    const sideArrow = getSideArrow(theme)
 
     return {
       color: 'inherit',
@@ -338,7 +339,7 @@ const menuItemStyles: ComponentSlotStylesInput<MenuItemPropsAndState, MenuVariab
           float: 'right',
           left: pxToRem(10),
           userSelect: 'none',
-          content: props.vertical ? `"${arrowRight}"` : `"${arrowDown}"`,
+          content: props.vertical ? `"${sideArrow}"` : `"${arrowDown}"`,
         }),
       },
     }

src/themes/teams/siteVariables.ts

@@ -104,3 +104,4 @@ export const bodyLineHeight = lineHeightBase
 //
 export const arrowRight = '\u25B8'
 export const arrowDown = '\u25BE'
+export const arrowLeft = '\u25C2'

src/themes/teams/utils/index.ts

@@ -1,5 +1,12 @@
 import { pxToRem as basePxToRem } from '../../../lib'
+import { ThemeInput } from '../../types'
 
 const themeFontSizeInPx = 14
 
 export const pxToRem = (sizeInPx: number) => basePxToRem(sizeInPx, themeFontSizeInPx)
+
+export const getSideArrow = (theme: ThemeInput) => {
+  const { rtl, siteVariables } = theme
+  const { arrowLeft, arrowRight } = siteVariables
+  return rtl ? arrowLeft : arrowRight
+}