fix: Preventing blanket selectors from Fabric component from being ap…

…plied via new preventBlanketFontInheritance prop (microsoft#25453)

* fix: Removing blanket selectors from Fabric component and adding them to specific components that use them.

* Updating snapshots.

* Updating snapshots.

* Adding change file.

* Gating behavior behind preventBlanketFontInheritance prop.

* Updating change file.

* Fixing incorrect condition.

* Updating snapshots.

Co-authored-by: Humberto Makoto Morimoto Burgos <makotom@microsoft.com>
Co-authored-by: KHMakoto <humberto_makoto@hotmail.com>

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": "humberto_makoto@hotmail.com",
+ "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;
 }
 
 /**