Add IconDirectionProvider to FluentProvider (#28803)

* Add IconDirectionProvider * change file * update value provided to IconDirectionProvider * api update * code review comments * api update * Update iconDirection
microsoft · Aug 28, 2023 · ecaa083 · ecaa083
1 parent 7d00038
commit ecaa083
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 14 deletions.
diff --git a/change/@fluentui-react-provider-0c6fd81b-10fb-4962-aafe-32fcf9a1970f.json b/change/@fluentui-react-provider-0c6fd81b-10fb-4962-aafe-32fcf9a1970f.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: Add IconDirectionProvider to FluentProvider",
+  "packageName": "@fluentui/react-provider",
+  "email": "ololubek@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-provider/etc/react-provider.api.md b/packages/react-components/react-provider/etc/react-provider.api.md
@@ -4,9 +4,12 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { CustomStyleHooksContextValue_unstable } from '@fluentui/react-shared-contexts';
+import type { IconDirectionContextValue } from '@fluentui/react-icons';
 import { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts';
 import type { PartialTheme } from '@fluentui/react-theme';
 import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
@@ -125,6 +128,7 @@ export type FluentProviderContextValues = Pick<FluentProviderState, 'customStyle
     provider: ProviderContextValue_unstable;
     themeClassName: ThemeClassNameContextValue_unstable;
     textDirection: 'ltr' | 'rtl';
+    iconDirection: IconDirectionContextValue;
     tooltip: TooltipVisibilityContextValue_unstable;
 };
 

diff --git a/packages/react-components/react-provider/package.json b/packages/react-components/react-provider/package.json
@@ -33,6 +33,7 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
+    "@fluentui/react-icons": "^2.0.207",
     "@fluentui/react-shared-contexts": "^9.7.2",
     "@fluentui/react-tabster": "^9.12.4",
     "@fluentui/react-theme": "^9.1.11",

diff --git a/...ges/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts b/...ges/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts
@@ -1,3 +1,4 @@
+import type { IconDirectionContextValue } from '@fluentui/react-icons';
 import type {
   OverridesContextValue_unstable as OverridesContextValue,
   ProviderContextValue_unstable as ProviderContextValue,
@@ -70,5 +71,6 @@ export type FluentProviderContextValues = Pick<
   provider: ProviderContextValue;
   themeClassName: ThemeClassNameContextValue;
   textDirection: 'ltr' | 'rtl';
+  iconDirection: IconDirectionContextValue;
   tooltip: TooltipVisibilityContextValue;
 };
diff --git a/...es/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx b/...es/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx
@@ -14,6 +14,7 @@ import {
   CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,
 } from '@fluentui/react-shared-contexts';
 import type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';
+import { IconDirectionContextProvider } from '@fluentui/react-icons';
 
 /**
  * Render the final JSX of FluentProvider
@@ -37,21 +38,23 @@ export const renderFluentProvider_unstable = (
           >
             <TooltipVisibilityProvider value={contextValues.tooltip}>
               <TextDirectionProvider dir={contextValues.textDirection}>
-                <OverridesProvider value={contextValues.overrides_unstable}>
-                  <state.root>
-                    {canUseDOM() ? null : (
-                      <style
-                        // Using dangerous HTML because react can escape characters
-                        // which can lead to invalid CSS.
-                        // eslint-disable-next-line react/no-danger
-                        dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}
-                        {...state.serverStyleProps.attributes}
-                      />
-                    )}
+                <IconDirectionContextProvider value={contextValues.iconDirection}>
+                  <OverridesProvider value={contextValues.overrides_unstable}>
+                    <state.root>
+                      {canUseDOM() ? null : (
+                        <style
+                          // Using dangerous HTML because react can escape characters
+                          // which can lead to invalid CSS.
+                          // eslint-disable-next-line react/no-danger
+                          dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}
+                          {...state.serverStyleProps.attributes}
+                        />
+                      )}
 
-                    {state.root.children}
-                  </state.root>
-                </OverridesProvider>
+                      {state.root.children}
+                    </state.root>
+                  </OverridesProvider>
+                </IconDirectionContextProvider>
               </TextDirectionProvider>
             </TooltipVisibilityProvider>
           </CustomStyleHooksProvider>

diff --git a/...components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts b/...components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts
@@ -18,6 +18,7 @@ export function useFluentProviderContextValues_unstable(state: FluentProviderSta
   const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);
   // "Tooltip" component mutates an object in this context, instance should be stable
   const [tooltip] = React.useState(() => ({}));
+  const iconDirection = React.useMemo(() => ({ textDirection: dir }), [dir]);
 
   return {
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -26,6 +27,7 @@ export function useFluentProviderContextValues_unstable(state: FluentProviderSta
     overrides_unstable,
     provider,
     textDirection: dir,
+    iconDirection,
     tooltip,
     theme,
     themeClassName: applyStylesToPortals ? root.className! : themeClassName,