fix: Preventing blanket selectors from Fabric component from being applied via new preventBlanketFontInheritance prop

change/@fluentui-react-58740d71-828a-4058-8da6-75706dd8794d.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Preventing blanket selectors from Fabric component from being applied via new preventBlanketFontInheritance prop.",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react/etc/react.api.md

@@ -5798,6 +5798,7 @@ export interface IFabricProps extends React_2.HTMLAttributes<HTMLDivElement>, Re
     // (undocumented)
     componentRef?: IRefObject<{}>;
     dir?: 'rtl' | 'ltr' | 'auto';
+    preventBlanketFontInheritance?: boolean;
     styles?: IStyleFunctionOrObject<IFabricStyleProps, IFabricStyles>;
     theme?: ITheme;
 }
@@ -6593,6 +6594,7 @@ export interface ILayerProps extends React_2.HTMLAttributes<HTMLDivElement>, Rea
     className?: string;
     componentRef?: IRefObject<ILayer>;
     eventBubblingEnabled?: boolean;
+    fabricProps?: IFabricProps;
     hostId?: string;
     insertFirst?: boolean;
     onLayerDidMount?: () => void;

packages/react/src/components/Fabric/Fabric.styles.ts

@@ -14,19 +14,19 @@ export interface IFabricClassNames {
 }
 
 export const getStyles = (props: IFabricStyleProps): IFabricStyles => {
-  const { theme, className, applyTheme } = props;
+  const { applyTheme, className, preventBlanketFontInheritance, theme } = props;
   const classNames = getGlobalClassNames(GlobalClassNames, theme);
   return {
     root: [
       classNames.root,
       theme.fonts.medium,
       {
         color: theme.palette.neutralPrimary,
-        selectors: {
-          '& button': inheritFont,
-          '& input': inheritFont,
-          '& textarea': inheritFont,
-        },
+      },
+      !preventBlanketFontInheritance && {
+        '& button': inheritFont,
+        '& input': inheritFont,
+        '& textarea': inheritFont,
       },
       // apply theme to only if applyTheme is true
       applyTheme && {

packages/react/src/components/Fabric/Fabric.types.ts

@@ -35,6 +35,18 @@ export interface IFabricProps extends React.HTMLAttributes<HTMLDivElement>, Reac
    * contextual theme object is set correctly so that css registered with merge-styles can be auto flipped correctly.
    */
   dir?: 'rtl' | 'ltr' | 'auto';
+
+  /**
+   * By default, the Fabric component has children selectors for button, input and textarea elements that apply the
+   * style `fontFamily: 'inherit'`. This is done so the font family is consistent across all of these elements under a
+   * Fabric component. However, this is expensive in style recalculation scenarios and it is not the responsibility of
+   * the Fabric component to ensure that non-Fluent elements within it have these styles.
+   * Setting this prop to true prevents the Fabric component from applying these children selectors. As long as only
+   * v8 Fluent components are being used within it, no changes should be apparent since all Fluent components already
+   * set the font family in their styles.
+   * @defaultvalue false
+   */
+  preventBlanketFontInheritance?: boolean;
 }
 
 export interface IFabricStyleProps extends IFabricProps {

packages/react/src/components/Layer/Layer.base.tsx

@@ -6,6 +6,7 @@ import * as ReactDOM from 'react-dom';
 import { Fabric } from '../../Fabric';
 import {
   classNamesFunction,
+  css,
   getDocument,
   setPortalAttribute,
   setVirtualParent,
@@ -30,26 +31,29 @@ export const LayerBase: React.FunctionComponent<ILayerProps> = React.forwardRef<
     const rootRef = React.useRef<HTMLSpanElement>(null);
     const mergedRef = useMergedRefs(rootRef, ref);
     const layerRef = React.useRef<HTMLDivElement>();
-    const fabricRef = React.useRef<HTMLDivElement>(null);
+    const fabricElementRef = React.useRef<HTMLDivElement>(null);
 
     // Tracks if the layer mount events need to be raised.
     // Required to allow the DOM to render after the layer element is added.
     const [needRaiseLayerMount, setNeedRaiseLayerMount] = React.useState(false);
 
     const {
-      eventBubblingEnabled,
-      styles,
-      theme,
-      className,
       children,
+      className,
+      eventBubblingEnabled,
+      fabricProps,
       hostId,
+      insertFirst,
       onLayerDidMount = () => undefined,
       // eslint-disable-next-line deprecation/deprecation
       onLayerMounted = () => undefined,
       onLayerWillUnmount,
-      insertFirst,
+      styles,
+      theme,
     } = props;
 
+    const fabricRef = useMergedRefs(fabricElementRef, fabricProps?.ref);
+
     const classNames = getClassNames(styles!, {
       theme: theme!,
       className,
@@ -166,7 +170,8 @@ export const LayerBase: React.FunctionComponent<ILayerProps> = React.forwardRef<
               {/* eslint-disable deprecation/deprecation */}
               <Fabric
                 {...(!eventBubblingEnabled && getFilteredEvents())}
-                className={classNames.content}
+                {...fabricProps}
+                className={css(classNames.content, fabricProps?.className)}
                 ref={fabricRef}
               >
                 {children}

packages/react/src/components/Layer/Layer.types.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import type { IFabricProps } from '../../Fabric';
 import type { IStyle, ITheme } from '../../Styling';
 import type { IRefObject, IStyleFunctionOrObject } from '../../Utilities';
 
@@ -70,6 +71,11 @@ export interface ILayerProps extends React.HTMLAttributes<HTMLDivElement>, React
    * By default, the layer will be appended at the end to the host
    */
   insertFirst?: boolean;
+
+  /**
+   * Props bag to forward to the Fabric component to allow customization of its behavior.
+   */
+  fabricProps?: IFabricProps;
 }
 
 /**