Add IconDirectionProvider to FluentProvider

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"
+}

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;
 };
 

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.2",
     "@fluentui/react-theme": "^9.1.11",

packages/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;
 };

packages/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>

packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts

@@ -26,6 +26,7 @@ export function useFluentProviderContextValues_unstable(state: FluentProviderSta
     overrides_unstable,
     provider,
     textDirection: dir,
+    iconDirection: {},
     tooltip,
     theme,
     themeClassName: applyStylesToPortals ? root.className! : themeClassName,