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/Coachmark/__snapshots__/Coachmark.test.tsx.snap

@@ -18,15 +18,6 @@ exports[`Coachmark renders Coachmark (color properties) 1`] = `
             font-weight: 400;
             visibility: visible;
           }
-          & button {
-            font-family: inherit;
-          }
-          & input {
-            font-family: inherit;
-          }
-          & textarea {
-            font-family: inherit;
-          }
     >
       <div
         class=
@@ -251,15 +242,6 @@ exports[`Coachmark renders Coachmark (correctly) 1`] = `
             font-weight: 400;
             visibility: visible;
           }
-          & button {
-            font-family: inherit;
-          }
-          & input {
-            font-family: inherit;
-          }
-          & textarea {
-            font-family: inherit;
-          }
     >
       <div
         class=
@@ -486,15 +468,6 @@ exports[`Coachmark renders Coachmark (isCollapsed) 1`] = `
             font-weight: 400;
             visibility: visible;
           }
-          & button {
-            font-family: inherit;
-          }
-          & input {
-            font-family: inherit;
-          }
-          & textarea {
-            font-family: inherit;
-          }
     >
       <div
         class=

packages/react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap

@@ -686,15 +686,6 @@ exports[`ComboBox Renders correctly when open 1`] = `
               font-weight: 400;
               visibility: visible;
             }
-            & button {
-              font-family: inherit;
-            }
-            & input {
-              font-family: inherit;
-            }
-            & textarea {
-              font-family: inherit;
-            }
       >
         <div
           class=
@@ -1467,15 +1458,6 @@ exports[`ComboBox Renders correctly when opened in multi-select mode 1`] = `
               font-weight: 400;
               visibility: visible;
             }
-            & button {
-              font-family: inherit;
-            }
-            & input {
-              font-family: inherit;
-            }
-            & textarea {
-              font-family: inherit;
-            }
       >
         <div
           class=

packages/react/src/components/ContextualMenu/__snapshots__/ContextualMenu.test.tsx.snap

@@ -149,15 +149,6 @@ exports[`ContextualMenu ContextualMenu snapshot ContextualMenu should be present
               font-weight: 400;
               visibility: visible;
             }
-            & button {
-              font-family: inherit;
-            }
-            & input {
-              font-family: inherit;
-            }
-            & textarea {
-              font-family: inherit;
-            }
         onBlur={[Function]}
         onChange={[Function]}
         onClick={[Function]}

packages/react/src/components/Dialog/__snapshots__/Dialog.deprecated.test.tsx.snap

@@ -17,15 +17,6 @@ exports[`Dialog deprecated props renders Dialog with className 1`] = `
           font-weight: 400;
           visibility: visible;
         }
-        & button {
-          font-family: inherit;
-        }
-        & input {
-          font-family: inherit;
-        }
-        & textarea {
-          font-family: inherit;
-        }
     onBlur={[Function]}
     onChange={[Function]}
     onClick={[Function]}
@@ -330,15 +321,6 @@ exports[`Dialog deprecated props renders Dialog with containerClassName 1`] = `
           font-weight: 400;
           visibility: visible;
         }
-        & button {
-          font-family: inherit;
-        }
-        & input {
-          font-family: inherit;
-        }
-        & textarea {
-          font-family: inherit;
-        }
     onBlur={[Function]}
     onChange={[Function]}
     onClick={[Function]}
@@ -643,15 +625,6 @@ exports[`Dialog deprecated props renders Dialog with isBlocking set to true 1`]
           font-weight: 400;
           visibility: visible;
         }
-        & button {
-          font-family: inherit;
-        }
-        & input {
-          font-family: inherit;
-        }
-        & textarea {
-          font-family: inherit;
-        }
     onBlur={[Function]}
     onChange={[Function]}
     onClick={[Function]}
@@ -1090,15 +1063,6 @@ exports[`Dialog deprecated props renders Dialog with isDarkOverlay set to true 1
           font-weight: 400;
           visibility: visible;
         }
-        & button {
-          font-family: inherit;
-        }
-        & input {
-          font-family: inherit;
-        }
-        & textarea {
-          font-family: inherit;
-        }
     onBlur={[Function]}
     onChange={[Function]}
     onClick={[Function]}

packages/react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap

@@ -211,15 +211,6 @@ exports[`Dropdown multi-select Renders correctly when open 1`] = `
               font-weight: 400;
               visibility: visible;
             }
-            & button {
-              font-family: inherit;
-            }
-            & input {
-              font-family: inherit;
-            }
-            & textarea {
-              font-family: inherit;
-            }
       >
         <div
           class=
@@ -1415,15 +1406,6 @@ exports[`Dropdown single-select Renders correctly when open 1`] = `
               font-weight: 400;
               visibility: visible;
             }
-            & button {
-              font-family: inherit;
-            }
-            & input {
-              font-family: inherit;
-            }
-            & textarea {
-              font-family: inherit;
-            }
       >
         <div
           class=

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/Fabric/__snapshots__/Fabric.test.tsx.snap

@@ -12,15 +12,6 @@ exports[`Fabric renders a Fabric component correctly 1`] = `
         font-size: 14px;
         font-weight: 400;
       }
-      & button {
-        font-family: inherit;
-      }
-      & input {
-        font-family: inherit;
-      }
-      & textarea {
-        font-family: inherit;
-      }
 >
   test
 </div>
@@ -39,15 +30,6 @@ exports[`Fabric renders a Fabric component with applyTheme correctly 1`] = `
         font-size: 14px;
         font-weight: 400;
       }
-      & button {
-        font-family: inherit;
-      }
-      & input {
-        font-family: inherit;
-      }
-      & textarea {
-        font-family: inherit;
-      }
 >
   test
 </div>
@@ -65,14 +47,5 @@ exports[`Fabric renders as a span using the "as" prop 1`] = `
         font-size: 14px;
         font-weight: 400;
       }
-      & button {
-        font-family: inherit;
-      }
-      & input {
-        font-family: inherit;
-      }
-      & textarea {
-        font-family: inherit;
-      }
 />
 `;

packages/react/src/components/HoverCard/__snapshots__/HoverCard.test.tsx.snap

@@ -17,15 +17,6 @@ exports[`HoverCard renders ExpandingCard correctly 1`] = `
           font-weight: 400;
           visibility: visible;
         }
-        & button {
-          font-family: inherit;
-        }
-        & input {
-          font-family: inherit;
-        }
-        & textarea {
-          font-family: inherit;
-        }
     onBlur={[Function]}
     onChange={[Function]}
     onClick={[Function]}
@@ -188,15 +179,6 @@ exports[`HoverCard renders PlainCard correctly 1`] = `
           font-weight: 400;
           visibility: visible;
         }
-        & button {
-          font-family: inherit;
-        }
-        & input {
-          font-family: inherit;
-        }
-        & textarea {
-          font-family: inherit;
-        }
     onBlur={[Function]}
     onChange={[Function]}
     onClick={[Function]}

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}