fix(Menu): Change chevron icon for RTL (#18626)

* fix(Menu): Change chevron icon for RTL * Change files
microsoft · Jun 18, 2021 · 6166160 · 6166160
1 parent ca7bfda
commit 6166160
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/change/@fluentui-react-menu-f5d949e7-54a1-4a9b-9635-d63c3c266571.json b/change/@fluentui-react-menu-f5d949e7-54a1-4a9b-9635-d63c3c266571.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix(Menu): Change chevron icon for RTL",
+  "packageName": "@fluentui/react-menu",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-menu/src/components/MenuItem/useMenuItem.tsx b/packages/react-menu/src/components/MenuItem/useMenuItem.tsx
@@ -6,10 +6,11 @@ import {
   useEventCallback,
   shouldPreventDefaultOnKeyDown,
 } from '@fluentui/react-utilities';
+import { useFluent } from '@fluentui/react-shared-contexts';
 import { MenuItemProps, MenuItemState } from './MenuItem.types';
 import { useCharacterSearch } from './useCharacterSearch';
 import { useMenuTriggerContext } from '../../contexts/menuTriggerContext';
-import { ChevronRightIcon } from '../../utils/DefaultIcons';
+import { ChevronRightIcon, ChevronLeftIcon } from '../../utils/DefaultIcons';
 import { useMenuListContext } from '../../contexts/menuListContext';
 import { useMenuContext } from '../../contexts/menuContext';
 
@@ -36,12 +37,14 @@ export const useMenuItem = (
   const persistOnClickContext = useMenuContext(context => context.persistOnItemClick);
   const dismissedWithKeyboardRef = React.useRef(false);
 
+  const { dir } = useFluent();
+
   const state = mergeProps(
     {
       ref: useMergedRefs(ref, React.useRef(null)),
       icon: { as: 'span', children: hasIcons ? '' : undefined },
       checkmark: { as: 'span', children: hasCheckmarks ? '' : undefined },
-      submenuIndicator: { as: 'span', children: <ChevronRightIcon /> },
+      submenuIndicator: { as: 'span', children: dir === 'ltr' ? <ChevronRightIcon /> : <ChevronLeftIcon /> },
       content: { as: 'span', children: props.children },
       secondaryContent: { as: 'span' },
       role: 'menuitem',

diff --git a/packages/react-menu/src/utils/DefaultIcons.tsx b/packages/react-menu/src/utils/DefaultIcons.tsx
@@ -60,6 +60,12 @@ export const ChevronRightIcon = renderIcon(props => (
   </svg>
 ));
 
+export const ChevronLeftIcon = renderIcon(props => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" className={props.svgClasses} focusable="false">
+    <path d="M1443 2045L421 1024 1443 3l90 90-930 931 930 931-90 90z" />
+  </svg>
+));
+
 export const AcceptIcon = renderIcon(props => (
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2048 2048" className={props.svgClasses}>
     <path d="M640 1755L19 1133l90-90 531 530L1939 275l90 90L640 1755z" />