From 1138c397bd66af309f16f12bdec3fb432d1b80b7 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Wed, 2 Mar 2022 15:07:06 -0800
Subject: [PATCH 001/173] Add conformance tests for static classnames

This commit adds conformance tests for static class names. The tests:

1. Ensure that the static classnames object is exported
2. Ensure that the static classnames object is formatted correctly
3. Ensure that the static classnames are rendered in the component

The rules for static classnames are defined in RFC: Conventions for
static class names on slots (#21206).

Only Radio and RadioGroup have been updated to pass these test.
---
 .../src/defaultErrorMessages.tsx              |  96 +++++++++++++-
 .../react-conformance/src/defaultTests.tsx    | 117 ++++++++++++++++++
 packages/react-conformance/src/types.ts       |   3 +
 packages/react-radio/etc/react-radio.api.md   |   5 +-
 .../src/components/Radio/Radio.test.tsx       |   7 ++
 .../src/components/Radio/useRadioStyles.ts    |  45 ++++---
 .../RadioGroup/useRadioGroupStyles.ts         |   8 +-
 7 files changed, 256 insertions(+), 25 deletions(-)

diff --git a/packages/react-conformance/src/defaultErrorMessages.tsx b/packages/react-conformance/src/defaultErrorMessages.tsx
index eadfcf7f8c842c..d0016f97ce2219 100644
--- a/packages/react-conformance/src/defaultErrorMessages.tsx
+++ b/packages/react-conformance/src/defaultErrorMessages.tsx
@@ -510,7 +510,7 @@ export const defaultErrorMessages = {
         indexFile,
       )}.`,
       suggestions: [
-        `Make sure that your component's ${resolveInfo('index.ts')} file` +
+        `Make sure that your component's ${resolveInfo('index.ts')} file ` +
           `or a file with styles hook exports \`${resolveInfo(constantValue)}\``,
         `If the component is internal, consider enabling ${resolveInfo('isInternal')} in your isConformant test.`,
       ],
@@ -518,6 +518,100 @@ export const defaultErrorMessages = {
     });
   },
 
+  'component-has-static-classnames-object-exported': (
+    testInfo: IsConformantOptions,
+    error: Error,
+    componentClassName: string,
+    exportName: string,
+  ) => {
+    const { componentPath, displayName } = testInfo;
+    const { testErrorInfo, resolveInfo, testErrorPath } = errorMessageColors;
+    const indexFile = path.join(getPackagePath(componentPath), 'src', 'index.ts');
+
+    return getErrorMessage({
+      displayName,
+      overview: `static classNames object is not exported (${testErrorInfo(exportName)}) in: ${EOL}${testErrorPath(
+        indexFile,
+      )}.`,
+      suggestions: [
+        `Make sure that your component's ${resolveInfo('index.ts')} file ` +
+          `or a file with styles hook exports an object of type SlotClassNames<Slots>.`,
+        `If the component is internal, consider enabling ${resolveInfo('isInternal')} in your isConformant test.`,
+      ],
+      error,
+    });
+  },
+
+  'component-has-static-classnames-in-correct-format': (
+    testInfo: IsConformantOptions,
+    error: Error,
+    componentClassName: string,
+    exportName: string,
+  ) => {
+    const { componentPath, displayName } = testInfo;
+    const { testErrorInfo, resolveInfo, testErrorPath } = errorMessageColors;
+    const indexFile = path.join(getPackagePath(componentPath), 'src', 'index.ts');
+
+    return getErrorMessage({
+      displayName,
+      overview: `static classNames object is not formatted correctly (${testErrorInfo(
+        exportName,
+      )}) in: ${EOL}${testErrorPath(indexFile)}.`,
+      suggestions: [
+        `Make sure all classNames are for the form "fui-<ComponentName>__<SlotName>" ` +
+          `or "fui-<ComponentName>" for the root slot`,
+        `If the component is internal, consider enabling ${resolveInfo('isInternal')} in your isConformant test.`,
+      ],
+      error,
+    });
+  },
+
+  'component-has-static-classnames': (
+    testInfo: IsConformantOptions,
+    error: Error,
+    componentName: string,
+    missingClassNames: string,
+  ) => {
+    const { displayName } = testInfo;
+    const { testErrorInfo, failedError } = errorMessageColors;
+
+    return getErrorMessage({
+      displayName,
+      overview: `missing one or more static classNames on component (${testErrorInfo(componentName)}).`,
+      details: [`Missing the following classes after render:`, `    ${failedError(missingClassNames)}`],
+      suggestions: [`Ensure that each slot of the component has its corresponding static className.`],
+      error,
+    });
+  },
+
+  'as-renders-html': (testInfo: IsConformantOptions, error: Error) => {
+    const { displayName } = testInfo;
+    const { resolveInfo } = errorMessageColors;
+
+    // Message Description: Receives an error when attempting to render as a functional component
+    // or pass as to the next component.
+    //
+    // It appears that "displayName" "as" prop doesn't properly handle HTML tags.
+    // Possible solutions:
+    // - If your component doesn't have an "as" prop, enable isConformant's skipAsPropTests option.
+    // - Make sure that your component can correctly render as HTML tags.
+    // - Check if you are missing any requiredProps within the isConformant in your test file.
+    // - Make sure that your component's implementation contains a valid return statement.
+    // - Check to see if your component works as expected with Enzyme's mount().
+    return getErrorMessage({
+      displayName,
+      overview: `"as" prop doesn't properly handle HTML tags.`,
+      suggestions: [
+        `If your component doesn't have an "as" prop, enable isConformant's ${resolveInfo('skipAsPropTests')} option.`,
+        `Make sure that your component can correctly render as ${resolveInfo('HTML tags')}.`,
+        `Check if you are missing any ${resolveInfo('requiredProps')} within the isConformant in your test file.`,
+        `Make sure that your component's implementation contains a valid return statement.`,
+        `Check to see if your component works as expected with Enzyme's ${resolveInfo('mount()')}.`,
+      ],
+      error,
+    });
+  },
+
   'primary-slot-gets-native-props': (testInfo: IsConformantOptions, error: Error) => {
     const { displayName } = testInfo;
     const { resolveInfo } = errorMessageColors;
diff --git a/packages/react-conformance/src/defaultTests.tsx b/packages/react-conformance/src/defaultTests.tsx
index 890942500123aa..906bf1b346bf63 100644
--- a/packages/react-conformance/src/defaultTests.tsx
+++ b/packages/react-conformance/src/defaultTests.tsx
@@ -302,6 +302,123 @@ export const defaultTests: TestObject = {
     });
   },
 
+  'component-has-static-classnames-object': (componentInfo: ComponentDoc, testInfo: IsConformantOptions) => {
+    const {
+      componentPath,
+      Component,
+      wrapperComponent,
+      helperComponents = [],
+      requiredProps,
+      customMount = mount,
+    } = testInfo;
+
+    const componentName = componentInfo.displayName;
+    const componentClassName = `fui-${componentName}`;
+    let handledClassNamesObjectExport = false;
+
+    it('has static classnames exported at top-level (component-has-static-classnames-object)', () => {
+      if (testInfo.isInternal) {
+        return;
+      }
+
+      const exportName =
+        componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
+
+      try {
+        const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
+        const classNamesFromFile = indexFile[exportName];
+        expect(classNamesFromFile).toBeTruthy();
+        handledClassNamesObjectExport = true;
+      } catch (e) {
+        // Need to work on this error message
+        throw new Error(
+          defaultErrorMessages['component-has-static-classnames-object-exported'](
+            testInfo,
+            e,
+            componentClassName,
+            exportName,
+          ),
+        );
+      }
+    });
+
+    it('has static classnames in correct format (component-has-static-classnames-object)', () => {
+      if (!handledClassNamesObjectExport) {
+        return;
+      }
+
+      const exportName =
+        componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
+      const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
+      const classNamesFromFile = indexFile[exportName];
+
+      const expectedClassNames = Object.keys(classNamesFromFile).reduce(
+        (obj: { [key: string]: string }, key: string) => {
+          obj[key] = key === 'root' ? componentClassName : `${componentClassName}__${key}`;
+          return obj;
+        },
+        {},
+      );
+
+      try {
+        expect(classNamesFromFile).toEqual(expectedClassNames);
+      } catch (e) {
+        // Need to work on this error message
+        throw new Error(
+          defaultErrorMessages['component-has-static-classnames-in-correct-format'](
+            testInfo,
+            e,
+            componentClassName,
+            exportName,
+          ),
+        );
+      }
+    });
+
+    it(`has static classnames (component-has-static-classnames-object)`, () => {
+      if (!handledClassNamesObjectExport) {
+        return;
+      }
+
+      const { testOptions = {} } = testInfo;
+      const mergedProps = {
+        ...requiredProps,
+        ...(testOptions['has-static-classnames'] ?? {}),
+      };
+      const defaultEl = customMount(<Component {...mergedProps} />);
+      const defaultComponent = getComponent(defaultEl, helperComponents, wrapperComponent);
+
+      const exportName =
+        componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
+      const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
+      const classNamesFromFile = indexFile[exportName];
+
+      const missingClassNames = [];
+      let className;
+      let err: Error;
+      for (const key of Object.keys(classNamesFromFile)) {
+        className = classNamesFromFile[key];
+        try {
+          expect(defaultComponent.find(`.${className}`).length).toBeGreaterThanOrEqual(1);
+        } catch (e) {
+          err = e as Error;
+          missingClassNames.push(className);
+        }
+      }
+
+      if (missingClassNames.length > 0) {
+        throw new Error(
+          defaultErrorMessages['component-has-static-classnames'](
+            testInfo,
+            err!,
+            componentName,
+            missingClassNames.join(', '),
+          ),
+        );
+      }
+    });
+  },
+
   /** Constructor/component name matches filename */
   'name-matches-filename': (componentInfo: ComponentDoc, testInfo: IsConformantOptions) => {
     it(`Component/constructor name matches filename (name-matches-filename)`, () => {
diff --git a/packages/react-conformance/src/types.ts b/packages/react-conformance/src/types.ts
index 31eba78daa349e..0cbbe54ce249ff 100644
--- a/packages/react-conformance/src/types.ts
+++ b/packages/react-conformance/src/types.ts
@@ -14,6 +14,9 @@ export interface TestOptions {
   'consistent-callback-args'?: {
     ignoreProps?: string[];
   };
+  'has-static-classnames'?: {
+    [key: string]: string;
+  };
 }
 
 export interface IsConformantOptions<TProps = {}> {
diff --git a/packages/react-radio/etc/react-radio.api.md b/packages/react-radio/etc/react-radio.api.md
index 6fec70ebb1e8a3..e4f6825ac2372b 100644
--- a/packages/react-radio/etc/react-radio.api.md
+++ b/packages/react-radio/etc/react-radio.api.md
@@ -10,18 +10,19 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Radio: ForwardRefComponent<RadioProps>;
 
 // @public (undocumented)
-export const radioClassName = "fui-Radio";
+export const radioClassNames: SlotClassNames<RadioSlots>;
 
 // @public
 export const RadioGroup: ForwardRefComponent<RadioGroupProps>;
 
 // @public (undocumented)
-export const radioGroupClassName = "fui-RadioGroup";
+export const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
 
 // @public
 export const RadioGroupContext: React_2.Context<RadioGroupContextValue>;
diff --git a/packages/react-radio/src/components/Radio/Radio.test.tsx b/packages/react-radio/src/components/Radio/Radio.test.tsx
index 1bb76f3151bd14..9a75446c205a33 100644
--- a/packages/react-radio/src/components/Radio/Radio.test.tsx
+++ b/packages/react-radio/src/components/Radio/Radio.test.tsx
@@ -8,6 +8,13 @@ describe('Radio', () => {
     Component: Radio,
     displayName: 'Radio',
     primarySlot: 'input',
+    testOptions: {
+      'has-static-classnames': {
+        label: 'Test Label',
+      },
+      // TODO: https://github.com/microsoft/fluentui/issues/19618
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any,
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-radio/src/components/Radio/useRadioStyles.ts b/packages/react-radio/src/components/Radio/useRadioStyles.ts
index 0895d266b901ad..d2eaf8bd8c2158 100644
--- a/packages/react-radio/src/components/Radio/useRadioStyles.ts
+++ b/packages/react-radio/src/components/Radio/useRadioStyles.ts
@@ -1,11 +1,16 @@
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { RadioState } from './Radio.types';
+import type { RadioSlots, RadioState } from './Radio.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 export const radioClassName = 'fui-Radio';
-const indicatorClassName = 'fui-Radio__indicator';
-const labelClassName = 'fui-Radio__label';
+export const radioClassNames: SlotClassNames<RadioSlots> = {
+  root: 'fui-Radio',
+  indicator: 'fui-Radio__indicator',
+  input: 'fui-Radio__input',
+  label: 'fui-Radio__label',
+};
 
 // TODO replace these spacing constants with theme values once they're on the theme
 const spacingHorizontalS = '8px';
@@ -50,33 +55,33 @@ const useInputStyles = makeStyles({
     },
 
     // When unchecked, hide the circle icon (child of the indicator)
-    [`:not(:checked) ~ .${indicatorClassName} > *`]: {
+    [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {
       opacity: '0',
     },
 
     // Colors for the unchecked state
     ':enabled:not(:checked)': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${radioClassNames.label}`]: {
         color: tokens.colorNeutralForeground3,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${radioClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),
       },
 
       ':hover': {
-        [`& ~ .${labelClassName}`]: {
+        [`& ~ .${radioClassNames.label}`]: {
           color: tokens.colorNeutralForeground2,
         },
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${radioClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),
         },
       },
 
       ':hover:active': {
-        [`& ~ .${labelClassName}`]: {
+        [`& ~ .${radioClassNames.label}`]: {
           color: tokens.colorNeutralForeground1,
         },
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${radioClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),
         },
       },
@@ -84,23 +89,23 @@ const useInputStyles = makeStyles({
 
     // Colors for the checked state
     ':enabled:checked': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${radioClassNames.label}`]: {
         color: tokens.colorNeutralForeground1,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${radioClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorCompoundBrandStroke),
         color: tokens.colorCompoundBrandForeground1,
       },
 
       ':hover': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${radioClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),
           color: tokens.colorCompoundBrandForeground1Hover,
         },
       },
 
       ':hover:active': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${radioClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),
           color: tokens.colorCompoundBrandForeground1Pressed,
         },
@@ -109,10 +114,10 @@ const useInputStyles = makeStyles({
 
     // Colors for the disabled state
     ':disabled': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${radioClassNames.label}`]: {
         color: tokens.colorNeutralForegroundDisabled,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${radioClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
         color: tokens.colorNeutralForegroundDisabled,
       },
@@ -161,7 +166,7 @@ const useLabelStyles = makeStyles({
 export const useRadioStyles_unstable = (state: RadioState) => {
   const rootStyles = useRootStyles();
   state.root.className = mergeClasses(
-    radioClassName,
+    radioClassNames.root,
     rootStyles.base,
     rootStyles.focusIndicator,
     state.labelPosition === 'below' && rootStyles.vertical,
@@ -169,15 +174,15 @@ export const useRadioStyles_unstable = (state: RadioState) => {
   );
 
   const inputStyles = useInputStyles();
-  state.input.className = mergeClasses(inputStyles.base, state.input.className);
+  state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);
 
   const indicatorStyles = useIndicatorStyles();
-  state.indicator.className = mergeClasses(indicatorClassName, indicatorStyles.base, state.indicator.className);
+  state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
 
   const labelStyles = useLabelStyles();
   if (state.label) {
     state.label.className = mergeClasses(
-      labelClassName,
+      radioClassNames.label,
       labelStyles.base,
       state.labelPosition === 'below' && labelStyles.below,
       state.label.className,
diff --git a/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts b/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
index eb21272f801384..8e11856677dd08 100644
--- a/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
+++ b/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
@@ -1,7 +1,11 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
-import { RadioGroupState } from './RadioGroup.types';
+import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 export const radioGroupClassName = 'fui-RadioGroup';
+export const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {
+  root: 'fui-RadioGroup',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -20,7 +24,7 @@ const useStyles = makeStyles({
 export const useRadioGroupStyles_unstable = (state: RadioGroupState) => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    radioGroupClassName,
+    radioGroupClassNames.root,
     styles.root,
     state.layout === 'vertical' && styles.vertical,
     state.root.className,

From 4ce447b8003b6117ad8c14c85099948453b28a89 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 16:03:30 -0800
Subject: [PATCH 002/173] Update component creation template

Adds support for static class names objects to the component creation
template.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../{{componentName}}/use{{componentName}}Styles.ts.hbs  | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs b/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs
index d15a6c40364bc0..6937d849e8eee2 100644
--- a/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs
+++ b/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs
@@ -1,8 +1,15 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { {{componentName}}State } from './{{componentName}}.types';
+import type { {{componentName}}Slots, {{componentName}}State } from './{{componentName}}.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 
 export const {{componentNames.propertyName}}ClassName = 'fui-{{componentName}}'
+export const {{componentNames.propertyName}}ClassNames:SlotClassNames<{{componentName}}Slots> = {
+  root: 'fui-{{componentName}}'
+  // TODO: add class names for all slots on {{componentName}}Slots.
+  // Should be of the form `<slotName>: 'fui-{{componentName}}__<slotName>`
+};
+
 /**
  * Styles for the root slot
  */

From aa272302b250ca0665514e51e9977f942c69dbea Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 16:17:06 -0800
Subject: [PATCH 003/173] Add static classnames to Accordion

Updates the react-accordion package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../components/Accordion/useAccordionStyles.ts  | 11 +++++++++--
 .../AccordionHeader/AccordionHeader.test.tsx    |  5 +++++
 .../__snapshots__/AccordionHeader.test.tsx.snap |  4 ++--
 .../AccordionHeader/useAccordionHeaderStyles.ts | 17 +++++++++++++++--
 .../AccordionItem/useAccordionItemStyles.ts     | 11 +++++++++--
 .../AccordionPanel/useAccordionPanelStyles.ts   | 11 +++++++++--
 6 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts b/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
index 10bb30b4281c91..6a5250e01fe520 100644
--- a/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
+++ b/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
@@ -1,10 +1,17 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { mergeClasses } from '@griffel/react';
-import type { AccordionState } from './Accordion.types';
+import type { AccordionSlots, AccordionState } from './Accordion.types';
 
+/**
+ * @deprecated
+ */
 export const accordionClassName = 'fui-Accordion';
+export const accordionClassNames: SlotClassNames<AccordionSlots> = {
+  root: 'fui-Accordion',
+};
 
 export const useAccordionStyles_unstable = (state: AccordionState) => {
-  state.root.className = mergeClasses(accordionClassName, state.root.className);
+  state.root.className = mergeClasses(accordionClassNames.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx b/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
index e9eec27b560fcb..63704ed39da3f7 100644
--- a/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
+++ b/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
@@ -14,6 +14,11 @@ describe('AccordionHeader', () => {
     Component: AccordionHeader,
     displayName: 'AccordionHeader',
     helperComponents: [AccordionHeaderContext.Provider],
+    testOptions: {
+      'has-static-classnames': {
+        icon: 'Test Icon',
+      },
+    },
   });
 
   afterEach(() => {
diff --git a/packages/react-accordion/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap b/packages/react-accordion/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
index 8b902553c52158..d7d67797c40dd2 100644
--- a/packages/react-accordion/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
+++ b/packages/react-accordion/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
@@ -6,13 +6,13 @@ exports[`AccordionHeader renders a default state 1`] = `
 >
   <button
     aria-expanded={false}
-    className=""
+    className="fui-AccordionHeader__button"
     disabled={false}
     onClick={[Function]}
   >
     <span
       aria-hidden={true}
-      className=""
+      className="fui-AccordionHeader__expandIcon"
     >
       <svg
         aria-hidden={true}
diff --git a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
index acce4b16678bb1..3f4e200929f021 100644
--- a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
+++ b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
@@ -1,9 +1,19 @@
 import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-import type { AccordionHeaderState } from './AccordionHeader.types';
+import type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHeader.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const accordionHeaderClassName = 'fui-AccordionHeader';
+export const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots> = {
+  root: 'fui-AccordionHeader',
+  button: 'fui-AccordionHeader__button',
+  expandIcon: 'fui-AccordionHeader__expandIcon',
+  icon: 'fui-AccordionHeader__icon',
+};
 
 const useStyles = makeStyles({
   // TODO: this should be extracted to another package
@@ -88,7 +98,7 @@ const useStyles = makeStyles({
 export const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    accordionHeaderClassName,
+    accordionHeaderClassNames.root,
     styles.root,
     state.inline && styles.rootInline,
     state.disabled && styles.rootDisabled,
@@ -96,6 +106,7 @@ export const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) =
   );
 
   state.button.className = mergeClasses(
+    accordionHeaderClassNames.button,
     styles.resetButton,
     styles.button,
     styles.focusIndicator,
@@ -108,6 +119,7 @@ export const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) =
 
   if (state.expandIcon) {
     state.expandIcon.className = mergeClasses(
+      accordionHeaderClassNames.expandIcon,
       styles.expandIcon,
       state.expandIconPosition === 'start' && styles.expandIconStart,
       state.expandIconPosition === 'end' && styles.expandIconEnd,
@@ -116,6 +128,7 @@ export const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) =
   }
   if (state.icon) {
     state.icon.className = mergeClasses(
+      accordionHeaderClassNames.icon,
       styles.icon,
       state.expandIconPosition === 'end' && styles.iconExpandIconEnd,
       state.icon.className,
diff --git a/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts b/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
index 450679e3c32de8..8159d53d5777e3 100644
--- a/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
+++ b/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
@@ -1,10 +1,17 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { mergeClasses } from '@griffel/react';
-import type { AccordionItemState } from './AccordionItem.types';
+import type { AccordionItemSlots, AccordionItemState } from './AccordionItem.types';
 
+/**
+ * @deprecated
+ */
 export const accordionItemClassName = 'fui-AccordionItem';
+export const accordionItemClassNames: SlotClassNames<AccordionItemSlots> = {
+  root: 'fui-AccordionItem',
+};
 
 export const useAccordionItemStyles_unstable = (state: AccordionItemState) => {
-  state.root.className = mergeClasses(accordionItemClassName, state.root.className);
+  state.root.className = mergeClasses(accordionItemClassNames.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts b/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
index 74fe24da2cb236..4a78c7a14f80d7 100644
--- a/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
+++ b/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { AccordionPanelState } from './AccordionPanel.types';
+import type { AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';
 
+/**
+ * @deprecated
+ */
 export const accordionPanelClassName = 'fui-AccordionPanel';
+export const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots> = {
+  root: 'fui-AccordionPanel',
+};
 
 /**
  * Styles for the root slot
@@ -16,7 +23,7 @@ const useStyles = makeStyles({
 /** Applies style classnames to slots */
 export const useAccordionPanelStyles_unstable = (state: AccordionPanelState) => {
   const styles = useStyles();
-  state.root.className = mergeClasses(accordionPanelClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(accordionPanelClassNames.root, styles.root, state.root.className);
 
   return state;
 };

From 484f7a2770a69c956fd398ca26464c4874f9583e Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 16:26:41 -0800
Subject: [PATCH 004/173] Add static classnames to Avatar

Updates the react-avatar package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Avatar/Avatar.test.tsx     |  8 +++++
 .../src/components/Avatar/useAvatarStyles.ts  | 33 +++++++++++++++----
 packages/react-conformance/src/types.ts       |  2 +-
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/packages/react-avatar/src/components/Avatar/Avatar.test.tsx b/packages/react-avatar/src/components/Avatar/Avatar.test.tsx
index 4fce4c49e8db35..a1a08cdce616c1 100644
--- a/packages/react-avatar/src/components/Avatar/Avatar.test.tsx
+++ b/packages/react-avatar/src/components/Avatar/Avatar.test.tsx
@@ -7,6 +7,14 @@ describe('Avatar', () => {
   isConformant({
     Component: Avatar,
     displayName: 'Avatar',
+    testOptions: {
+      'has-static-classnames': {
+        image: { src: 'avatar.png', alt: 'test-image' },
+        initials: 'Test Initials',
+        icon: 'Test Icon',
+        badge: 'Test Badge',
+      },
+    },
   });
 
   /**
diff --git a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
index bbc5281c702441..c05f547636ddc5 100644
--- a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
+++ b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
@@ -1,8 +1,19 @@
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { AvatarState } from './Avatar.types';
+import type { AvatarSlots, AvatarState } from './Avatar.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const avatarClassName = 'fui-Avatar';
+export const avatarClassNames: SlotClassNames<AvatarSlots> = {
+  root: 'fui-Avatar',
+  image: 'fui-Avatar__image',
+  initials: 'fui-Avatar__initials',
+  icon: 'fui-Avatar__icon',
+  badge: 'fui-Avatar__badge',
+};
 
 //
 // TODO: All animation constants should go to theme or globals?
@@ -419,18 +430,23 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {
     }
   }
 
-  state.root.className = mergeClasses(avatarClassName, ...rootClasses, state.root.className);
+  state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);
 
   if (state.badge) {
-    state.badge.className = mergeClasses(styles.badge, size >= 64 && styles.badgeLarge, state.badge.className);
+    state.badge.className = mergeClasses(
+      avatarClassNames.badge,
+      styles.badge,
+      size >= 64 && styles.badgeLarge,
+      state.badge.className,
+    );
   }
 
   if (state.image) {
-    state.image.className = mergeClasses(styles.image, state.image.className);
+    state.image.className = mergeClasses(avatarClassNames.image, styles.image, state.image.className);
   }
 
   if (state.initials) {
-    state.initials.className = mergeClasses(styles.iconInitials, state.initials.className);
+    state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, state.initials.className);
   }
 
   if (state.icon) {
@@ -449,7 +465,12 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {
       iconSizeClass = styles.icon48;
     }
 
-    state.icon.className = mergeClasses(styles.iconInitials, iconSizeClass, state.icon.className);
+    state.icon.className = mergeClasses(
+      avatarClassNames.icon,
+      styles.iconInitials,
+      iconSizeClass,
+      state.icon.className,
+    );
   }
 
   return state;
diff --git a/packages/react-conformance/src/types.ts b/packages/react-conformance/src/types.ts
index 0cbbe54ce249ff..663996c4b731ba 100644
--- a/packages/react-conformance/src/types.ts
+++ b/packages/react-conformance/src/types.ts
@@ -15,7 +15,7 @@ export interface TestOptions {
     ignoreProps?: string[];
   };
   'has-static-classnames'?: {
-    [key: string]: string;
+    [key: string]: string | {};
   };
 }
 

From 33f0c4018691b32053bb9a392acbfd10f57c74ad Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 16:41:35 -0800
Subject: [PATCH 005/173] Add static classnames to Badge

Updates the react-badge package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Badge/Badge.test.tsx       |  5 +++++
 .../src/components/Badge/useBadgeStyles.ts    | 19 ++++++++++++++++---
 .../CounterBadge/CounterBadge.test.tsx        |  5 +++++
 .../CounterBadge/useCounterBadgeStyles.ts     | 16 +++++++++++++++-
 .../__snapshots__/PresenceBadge.test.tsx.snap |  4 +++-
 .../PresenceBadge/usePresenceBadgeStyles.ts   | 15 ++++++++++++++-
 6 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/packages/react-badge/src/components/Badge/Badge.test.tsx b/packages/react-badge/src/components/Badge/Badge.test.tsx
index db081cf3cee421..aaee966bd55ba5 100644
--- a/packages/react-badge/src/components/Badge/Badge.test.tsx
+++ b/packages/react-badge/src/components/Badge/Badge.test.tsx
@@ -8,6 +8,11 @@ describe('Badge', () => {
   isConformant({
     Component: Badge,
     displayName: 'Badge',
+    testOptions: {
+      'has-static-classnames': {
+        icon: 'Test Icon',
+      },
+    },
   });
 
   let wrapper: ReactWrapper | undefined;
diff --git a/packages/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
index a7ed187cf4020e..926eee830d4242 100644
--- a/packages/react-badge/src/components/Badge/useBadgeStyles.ts
+++ b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
@@ -1,8 +1,16 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { BadgeState } from './Badge.types';
+import type { BadgeSlots, BadgeState } from './Badge.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const badgeClassName = 'fui-Badge';
+export const badgeClassNames: SlotClassNames<BadgeSlots> = {
+  root: 'fui-Badge',
+  icon: 'fui-Badge__icon',
+};
 
 const useRootStyles = makeStyles({
   base: {
@@ -261,7 +269,7 @@ export const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {
   const rootStyles = useRootStyles();
 
   state.root.className = mergeClasses(
-    badgeClassName,
+    badgeClassNames.root,
     rootStyles.base,
     rootStyles[state.size],
     rootStyles[state.shape],
@@ -275,7 +283,12 @@ export const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {
 
   const iconStyles = useIconStyles();
   if (state.icon) {
-    state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);
+    state.icon.className = mergeClasses(
+      badgeClassNames.icon,
+      iconStyles.base,
+      iconStyles[state.size],
+      state.icon.className,
+    );
   }
 
   return state;
diff --git a/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx b/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
index ca023e85028b38..0979f4d65c2149 100644
--- a/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
+++ b/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
@@ -8,6 +8,11 @@ describe('CounterBadge', () => {
   isConformant({
     Component: CounterBadge,
     displayName: 'CounterBadge',
+    testOptions: {
+      'has-static-classnames': {
+        icon: 'Test Icon',
+      },
+    },
   });
 
   let wrapper: ReactWrapper | undefined;
diff --git a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
index 2eebfc42b0eab9..5db456cce63704 100644
--- a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
+++ b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
@@ -1,8 +1,17 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
+import { BadgeSlots } from '../Badge/Badge.types';
 import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';
 import type { CounterBadgeState } from './CounterBadge.types';
 
+/**
+ * @deprecated
+ */
 export const counterBadgeClassName = 'fui-CounterBadge';
+export const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {
+  root: 'fui-CounterBadge',
+  icon: 'fui-CounterBadge__icon',
+};
 
 const useStyles = makeStyles({
   dot: {
@@ -22,10 +31,15 @@ const useStyles = makeStyles({
 export const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    counterBadgeClassName,
+    counterBadgeClassNames.root,
     state.dot && styles.dot,
     !state.showZero && state.count === 0 && !state.dot && styles.hide,
     state.root.className,
   );
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);
+  }
+
   return useBadgeStyles_unstable(state) as CounterBadgeState;
 };
diff --git a/packages/react-badge/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap b/packages/react-badge/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap
index b78f582b95e28d..259f4e749489a2 100644
--- a/packages/react-badge/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap
+++ b/packages/react-badge/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap
@@ -5,7 +5,9 @@ exports[`PresenceBadge renders a default state 1`] = `
   aria-hidden={true}
   className="fui-PresenceBadge"
 >
-  <span>
+  <span
+    className="fui-PresenceBadge__icon"
+  >
     <svg
       aria-hidden={true}
       className=""
diff --git a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
index 644dc0f337eb0d..a5e5b7b785aecd 100644
--- a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
+++ b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
@@ -1,8 +1,17 @@
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { PresenceBadgeState } from './PresenceBadge.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
+import { BadgeSlots } from '../Badge/Badge.types';
 
+/**
+ * @deprecated
+ */
 export const presenceBadgeClassName = 'fui-PresenceBadge';
+export const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {
+  root: 'fui-PresenceBadge',
+  icon: 'fui-PresenceBadge__icon',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -81,7 +90,7 @@ const useStyles = makeStyles({
 export const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    presenceBadgeClassName,
+    presenceBadgeClassNames.root,
     styles.root,
     ['busy', 'doNotDisturb', 'unknown'].includes(state.status) && styles.statusBusy,
     state.status === 'away' && styles.statusAway,
@@ -100,5 +109,9 @@ export const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): Pres
     state.root.className,
   );
 
+  if (state.icon) {
+    state.icon.className = mergeClasses(presenceBadgeClassNames.icon, state.icon.className);
+  }
+
   return state;
 };

From dbca212db8f44012b84a1c9d2b9ec83d9fa0dde0 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 17:04:26 -0800
Subject: [PATCH 006/173] Add static classnames to Card

Updates the react-card package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Card/useCardStyles.ts      | 11 +++++--
 .../__snapshots__/CardFooter.test.tsx.snap    |  2 +-
 .../CardFooter/useCardFooterStyles.ts         | 14 ++++++--
 .../components/CardHeader/CardHeader.test.tsx |  5 +++
 .../__snapshots__/CardHeader.test.tsx.snap    |  8 +++--
 .../CardHeader/useCardHeaderStyles.ts         | 32 ++++++++++++++++---
 .../CardPreview/CardPreview.test.tsx          |  5 +++
 .../__snapshots__/CardPreview.test.tsx.snap   |  2 +-
 .../CardPreview/useCardPreviewStyles.ts       | 14 ++++++--
 9 files changed, 76 insertions(+), 17 deletions(-)

diff --git a/packages/react-card/src/components/Card/useCardStyles.ts b/packages/react-card/src/components/Card/useCardStyles.ts
index 2c16bc278882bb..54fe72d5b418b3 100644
--- a/packages/react-card/src/components/Card/useCardStyles.ts
+++ b/packages/react-card/src/components/Card/useCardStyles.ts
@@ -1,9 +1,16 @@
 import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { cardPreviewClassName } from '../CardPreview/index';
-import type { CardState } from './Card.types';
+import type { CardSlots, CardState } from './Card.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const cardClassName = 'fui-Card';
+export const cardClassNames: SlotClassNames<CardSlots> = {
+  root: 'fui-Card',
+};
 
 /**
  * Styles for the root slot
@@ -124,7 +131,7 @@ export const useCardStyles_unstable = (state: CardState): CardState => {
     state.root.onTouchEnd;
 
   state.root.className = mergeClasses(
-    cardClassName,
+    cardClassNames.root,
     styles.root,
     state.appearance === 'filled' && styles.filled,
     state.appearance === 'filled-alternative' && styles.filledAlternative,
diff --git a/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap b/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap
index e549ccc76536b8..11d4ba5e2fc2c5 100644
--- a/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap
+++ b/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`CardFooter renders a default state 1`] = `
   >
     Default CardFooter
     <div
-      class=""
+      class="fui-CardFooter__action"
     >
       Action slot
     </div>
diff --git a/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts b/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
index a83069ff8aa113..edb09fb50d7cc4 100644
--- a/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
+++ b/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
@@ -1,7 +1,15 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { CardFooterState } from './CardFooter.types';
+import type { CardFooterSlots, CardFooterState } from './CardFooter.types';
 
+/**
+ * @deprecated
+ */
 export const cardFooterClassName = 'fui-CardFooter';
+export const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {
+  root: 'fui-CardFooter',
+  action: 'fui-CardFooter__action',
+};
 
 /**
  * Styles for the root slot
@@ -22,10 +30,10 @@ const useStyles = makeStyles({
  */
 export const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(cardFooterClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
 
   if (state.action) {
-    state.action.className = mergeClasses(styles.action, state.action.className);
+    state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);
   }
 
   return state;
diff --git a/packages/react-card/src/components/CardHeader/CardHeader.test.tsx b/packages/react-card/src/components/CardHeader/CardHeader.test.tsx
index 9dc742cf7ec20a..7fb93decc8d34a 100644
--- a/packages/react-card/src/components/CardHeader/CardHeader.test.tsx
+++ b/packages/react-card/src/components/CardHeader/CardHeader.test.tsx
@@ -7,6 +7,11 @@ describe('CardHeader', () => {
   isConformant({
     Component: CardHeader,
     displayName: 'CardHeader',
+    testOptions: {
+      'has-static-classnames': {
+        header: 'Header Test',
+      },
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap b/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap
index 2232557b8bfbab..e69c93adfd1a18 100644
--- a/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap
+++ b/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap
@@ -6,17 +6,19 @@ exports[`CardHeader renders a default state 1`] = `
     class="fui-CardHeader"
   >
     <div
-      class=""
+      class="fui-CardHeader__image"
     >
       Image slot
     </div>
     <div
-      class=""
+      class="fui-CardHeader__content"
     >
       Title slot
       Description slot
     </div>
-    <div>
+    <div
+      class="fui-CardHeader__action"
+    >
       Action slot
     </div>
   </div>
diff --git a/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts b/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
index 9ace96d870eede..c1d30d319c6b18 100644
--- a/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
+++ b/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
@@ -1,7 +1,19 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { CardHeaderState } from './CardHeader.types';
+import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
 
+/**
+ * @deprecated
+ */
 export const cardHeaderClassName = 'fui-CardHeader';
+export const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {
+  root: 'fui-CardHeader',
+  image: 'fui-CardHeader__image',
+  content: 'fui-CardHeader__content',
+  header: 'fui-CardHeader__header',
+  description: 'fui-CardHeader__description',
+  action: 'fui-CardHeader__action',
+};
 
 /**
  * Styles for the root slot
@@ -48,14 +60,26 @@ const useStyles = makeStyles({
  */
 export const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(cardHeaderClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);
 
   if (state.image) {
-    state.image.className = mergeClasses(styles.image, state.image.className);
+    state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);
   }
 
   if (state.content) {
-    state.content.className = mergeClasses(styles.textContainer, state.content.className);
+    state.content.className = mergeClasses(cardHeaderClassNames.content, styles.textContainer, state.content.className);
+  }
+
+  if (state.header) {
+    state.header.className = mergeClasses(cardHeaderClassNames.header, state.header.className);
+  }
+
+  if (state.description) {
+    state.description.className = mergeClasses(cardHeaderClassNames.description, state.description.className);
+  }
+
+  if (state.action) {
+    state.action.className = mergeClasses(cardHeaderClassNames.action, state.action.className);
   }
 
   return state;
diff --git a/packages/react-card/src/components/CardPreview/CardPreview.test.tsx b/packages/react-card/src/components/CardPreview/CardPreview.test.tsx
index 2df6f9360e939c..ebdd6e2fe68cb5 100644
--- a/packages/react-card/src/components/CardPreview/CardPreview.test.tsx
+++ b/packages/react-card/src/components/CardPreview/CardPreview.test.tsx
@@ -7,6 +7,11 @@ describe('CardPreview', () => {
   isConformant({
     Component: CardPreview,
     displayName: 'CardPreview',
+    testOptions: {
+      'has-static-classnames': {
+        logo: 'Test Logo',
+      },
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap b/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
index b734ccb54fb5fd..f7009bc0f97902 100644
--- a/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
+++ b/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`CardPreview renders a default state 1`] = `
   >
     Default CardPreview
     <div
-      class=""
+      class="fui-CardPreview__logo"
     >
       Logo slot
     </div>
diff --git a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
index c57fe3e7ceb639..1b97bd74b78fd2 100644
--- a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
+++ b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
@@ -1,7 +1,15 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { CardPreviewState } from './CardPreview.types';
+import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
 
+/**
+ * @deprecated
+ */
 export const cardPreviewClassName = 'fui-CardPreview';
+export const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {
+  root: 'fui-CardPreview',
+  logo: 'fui-CardPreview__logo',
+};
 
 /**
  * Styles for the root slot
@@ -30,10 +38,10 @@ const useStyles = makeStyles({
  */
 export const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(cardPreviewClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
 
   if (state.logo) {
-    state.logo.className = mergeClasses(styles.logo, state.logo.className);
+    state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);
   }
 
   return state;

From 1a2cb629bad7cbaffda82e923d5866c2d7125770 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 17:09:51 -0800
Subject: [PATCH 007/173] Add static classnames to Checkbox

Updates the react-checkbox package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Checkbox/Checkbox.test.tsx |  5 ++
 .../__snapshots__/Checkbox.test.tsx.snap      | 10 ++--
 .../components/Checkbox/useCheckboxStyles.ts  | 56 +++++++++++--------
 3 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx b/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
index 29e17472cc0f86..2b42e5cf4f23f2 100644
--- a/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
+++ b/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
@@ -16,6 +16,11 @@ describe('Checkbox', () => {
     Component: Checkbox,
     displayName: 'Checkbox',
     primarySlot: 'input',
+    testOptions: {
+      'has-static-classnames': {
+        label: 'Test Label',
+      },
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index c4870e1c6044fe..47a3285c0a7f44 100644
--- a/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Checkbox renders a custom indicator 1`] = `
     class="fui-Checkbox"
   >
     <input
-      class=""
+      class="fui-Checkbox__input"
       id="checkbox-1"
       type="checkbox"
     />
@@ -34,7 +34,7 @@ exports[`Checkbox renders a default state 1`] = `
     class="fui-Checkbox"
   >
     <input
-      class=""
+      class="fui-Checkbox__input"
       id="checkbox-1"
       type="checkbox"
     />
@@ -67,7 +67,7 @@ exports[`Checkbox renders checked 1`] = `
   >
     <input
       checked=""
-      class=""
+      class="fui-Checkbox__input"
       id="checkbox-1"
       type="checkbox"
     />
@@ -105,7 +105,7 @@ exports[`Checkbox renders mixed 1`] = `
     class="fui-Checkbox"
   >
     <input
-      class=""
+      class="fui-Checkbox__input"
       id="checkbox-1"
       type="checkbox"
     />
@@ -143,7 +143,7 @@ exports[`Checkbox renders with a label 1`] = `
     class="fui-Checkbox"
   >
     <input
-      class=""
+      class="fui-Checkbox__input"
       id="checkbox-1"
       type="checkbox"
     />
diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
index 52253bbd22d8eb..1c0f5a1070606b 100644
--- a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
+++ b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
@@ -1,11 +1,19 @@
 import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-import { CheckboxState } from './Checkbox.types';
+import { CheckboxSlots, CheckboxState } from './Checkbox.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const checkboxClassName = 'fui-Checkbox';
-const indicatorClassName = 'fui-Checkbox__indicator';
-const labelClassName = 'fui-Checkbox__label';
+export const checkboxClassNames: SlotClassNames<CheckboxSlots> = {
+  root: 'fui-Checkbox',
+  label: 'fui-Checkbox__label',
+  input: 'fui-Checkbox__input',
+  indicator: 'fui-Checkbox__indicator',
+};
 
 // TODO replace these spacing constants with theme values once they're on the theme
 const spacingHorizontalS = '8px';
@@ -38,33 +46,33 @@ const useInputStyles = makeStyles({
     cursor: 'pointer',
 
     // When unchecked, hide the the checkmark icon (child of the indicator slot)
-    [`:not(:checked):not(:indeterminate) ~ .${indicatorClassName} > *`]: {
+    [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {
       opacity: 0,
     },
 
     // Colors for the unchecked state
     ':enabled:not(:checked):not(:indeterminate)': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${checkboxClassNames.label}`]: {
         color: tokens.colorNeutralForeground3,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${checkboxClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),
       },
 
       ':hover': {
-        [`& ~ .${labelClassName}`]: {
+        [`& ~ .${checkboxClassNames.label}`]: {
           color: tokens.colorNeutralForeground2,
         },
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),
         },
       },
 
       ':active:hover': {
-        [`& ~ .${labelClassName}`]: {
+        [`& ~ .${checkboxClassNames.label}`]: {
           color: tokens.colorNeutralForeground1,
         },
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),
         },
       },
@@ -72,24 +80,24 @@ const useInputStyles = makeStyles({
 
     // Colors for the checked state
     ':enabled:checked:not(:indeterminate)': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${checkboxClassNames.label}`]: {
         color: tokens.colorNeutralForeground1,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${checkboxClassNames.indicator}`]: {
         backgroundColor: tokens.colorCompoundBrandBackground,
         color: tokens.colorNeutralForegroundOnBrand,
         ...shorthands.borderColor(tokens.colorCompoundBrandBackground),
       },
 
       ':hover': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           backgroundColor: tokens.colorCompoundBrandBackgroundHover,
           ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),
         },
       },
 
       ':active:hover': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           backgroundColor: tokens.colorCompoundBrandBackgroundPressed,
           ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),
         },
@@ -98,23 +106,23 @@ const useInputStyles = makeStyles({
 
     // Colors for the mixed state
     ':enabled:indeterminate': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${checkboxClassNames.label}`]: {
         color: tokens.colorNeutralForeground1,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${checkboxClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorCompoundBrandStroke),
         color: tokens.colorCompoundBrandForeground1,
       },
 
       ':hover': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),
           color: tokens.colorCompoundBrandForeground1Hover,
         },
       },
 
       ':active:hover': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),
           color: tokens.colorCompoundBrandForeground1Pressed,
         },
@@ -124,10 +132,10 @@ const useInputStyles = makeStyles({
     ':disabled': {
       cursor: 'default',
 
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${checkboxClassNames.label}`]: {
         color: tokens.colorNeutralForegroundDisabled,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${checkboxClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
         color: tokens.colorNeutralForegroundDisabled,
       },
@@ -192,15 +200,15 @@ const useLabelStyles = makeStyles({
  */
 export const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {
   const rootStyles = useRootStyles();
-  state.root.className = mergeClasses(checkboxClassName, rootStyles.base, state.root.className);
+  state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);
 
   const inputStyles = useInputStyles();
-  state.input.className = mergeClasses(inputStyles.base, state.input.className);
+  state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, state.input.className);
 
   const indicatorStyles = useIndicatorStyles();
   if (state.indicator) {
     state.indicator.className = mergeClasses(
-      indicatorClassName,
+      checkboxClassNames.indicator,
       indicatorStyles.base,
       indicatorStyles[state.size],
       state.shape === 'circular' && indicatorStyles.circular,
@@ -211,7 +219,7 @@ export const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState
   const labelStyles = useLabelStyles();
   if (state.label) {
     state.label.className = mergeClasses(
-      labelClassName,
+      checkboxClassNames.label,
       labelStyles.base,
       labelStyles[state.size],
       state.label.className,

From 28e93c715edf5e646caf9b35cdd2f682b61540f4 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 17:12:26 -0800
Subject: [PATCH 008/173] Add static classnames to Dialog

Updates the react-dialog package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Dialog/useDialogStyles.ts         | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
index 9b305459c3a799..4ea61edb04c9ed 100644
--- a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
+++ b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
@@ -1,8 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { DialogState } from './Dialog.types';
+import type { DialogSlots, DialogState } from './Dialog.types';
 
+/**
+ * @deprecated
+ */
 export const dialogClassName = 'fui-Dialog';
-
+export const dialogClassNames: SlotClassNames<DialogSlots> = {
+  root: 'fui-Dialog',
+};
 /**
  * Styles for the root slot
  */
@@ -19,7 +25,7 @@ const useStyles = makeStyles({
  */
 export const useDialogStyles_unstable = (state: DialogState): DialogState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(dialogClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(dialogClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);

From 95e3e2699bf1e90b85b50343f5e7aed265e30cb7 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 17:18:36 -0800
Subject: [PATCH 009/173] Add static classnames to Divider

Updates the react-divider package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Divider/Divider.test.tsx      |  5 +++++
 .../Divider/__snapshots__/Divider.test.tsx.snap  | 11 +++++++++++
 .../src/components/Divider/useDividerStyles.ts   | 16 ++++++++++++++--
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/react-divider/src/components/Divider/Divider.test.tsx b/packages/react-divider/src/components/Divider/Divider.test.tsx
index 2835303292749d..40f7308bc27637 100644
--- a/packages/react-divider/src/components/Divider/Divider.test.tsx
+++ b/packages/react-divider/src/components/Divider/Divider.test.tsx
@@ -12,6 +12,11 @@ describe('Divider', () => {
   isConformant({
     Component: Divider,
     displayName: 'Divider',
+    testOptions: {
+      'has-static-classnames': {
+        children: 'Test Children',
+      },
+    },
   });
 
   it('renders a default divider', () => {
diff --git a/packages/react-divider/src/components/Divider/__snapshots__/Divider.test.tsx.snap b/packages/react-divider/src/components/Divider/__snapshots__/Divider.test.tsx.snap
index 706427042ce317..56918ea5d0a392 100644
--- a/packages/react-divider/src/components/Divider/__snapshots__/Divider.test.tsx.snap
+++ b/packages/react-divider/src/components/Divider/__snapshots__/Divider.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`Divider renders a brand appearance 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Brand
@@ -39,6 +40,7 @@ exports[`Divider renders a divider with content 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Default Divider
@@ -54,6 +56,7 @@ exports[`Divider renders a divider with inset 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Inset
@@ -74,6 +77,7 @@ exports[`Divider renders a horizontal divider with a fixed width 1`] = `
   }
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     fixed 100px width
@@ -89,6 +93,7 @@ exports[`Divider renders a strong appearance 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Strong
@@ -104,6 +109,7 @@ exports[`Divider renders a subtle appearance 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Subtle
@@ -132,6 +138,7 @@ exports[`Divider renders a vertical divider with a fixed height 1`] = `
   }
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     fixed 100px height
@@ -147,6 +154,7 @@ exports[`Divider renders a vertical divider with content 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Vertical
@@ -162,6 +170,7 @@ exports[`Divider renders content center aligned 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Center
@@ -177,6 +186,7 @@ exports[`Divider renders content end aligned 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     End
@@ -192,6 +202,7 @@ exports[`Divider renders content start aligned 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Start
diff --git a/packages/react-divider/src/components/Divider/useDividerStyles.ts b/packages/react-divider/src/components/Divider/useDividerStyles.ts
index 82d26e9952039c..ee1ff86fcbb1f3 100644
--- a/packages/react-divider/src/components/Divider/useDividerStyles.ts
+++ b/packages/react-divider/src/components/Divider/useDividerStyles.ts
@@ -1,8 +1,16 @@
 import { mergeClasses, shorthands, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { DividerState } from './Divider.types';
+import { DividerSlots, DividerState } from './Divider.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const dividerClassName = 'fui-Divider';
+export const dividerClassNames: SlotClassNames<DividerSlots> = {
+  root: 'fui-Divider',
+  wrapper: 'fui-Divider__wrapper',
+};
 
 const contentSpacing = '12px';
 const insetSpacing = '12px';
@@ -233,7 +241,7 @@ export const useDividerStyles_unstable = (state: DividerState): DividerState =>
   const { alignContent, appearance, inset, vertical } = state;
 
   state.root.className = mergeClasses(
-    dividerClassName,
+    dividerClassNames.root,
 
     // Base styles
     baseStyles.base,
@@ -258,5 +266,9 @@ export const useDividerStyles_unstable = (state: DividerState): DividerState =>
     state.root.className,
   );
 
+  if (state.wrapper) {
+    state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);
+  }
+
   return state;
 };

From 651c61cb18a148e3e9ec6b4324e6bf093984e4c5 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 17:20:42 -0800
Subject: [PATCH 010/173] Add static classnames to Image

Updates the react-image package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Image/useImageStyles.ts            | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react-image/src/components/Image/useImageStyles.ts b/packages/react-image/src/components/Image/useImageStyles.ts
index f99fd7163a3128..f56812b42500a9 100644
--- a/packages/react-image/src/components/Image/useImageStyles.ts
+++ b/packages/react-image/src/components/Image/useImageStyles.ts
@@ -1,8 +1,15 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { ImageState } from './Image.types';
+import type { ImageSlots, ImageState } from './Image.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const imageClassName = 'fui-Image';
+export const imageClassNames: SlotClassNames<ImageSlots> = {
+  root: 'fui-Image',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -57,7 +64,7 @@ const useStyles = makeStyles({
 export const useImageStyles_unstable = (state: ImageState) => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    imageClassName,
+    imageClassNames.root,
     styles.root,
     state.bordered && styles.rootBordered,
     state.shape === 'circular' && styles.rootCircular,

From 2b27000bd605a28ec64e2ed9915d55bb73c7dcd2 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 17:28:23 -0800
Subject: [PATCH 011/173] Add static classnames to Input

Updates the react-input package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Input/Input.test.tsx       |  6 +++++
 .../Input/__snapshots__/Input.test.tsx.snap   |  2 +-
 .../src/components/Input/useInputStyles.ts    | 27 ++++++++++++++++---
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/react-input/src/components/Input/Input.test.tsx b/packages/react-input/src/components/Input/Input.test.tsx
index b4781fae647275..3d6ca22e79ffce 100644
--- a/packages/react-input/src/components/Input/Input.test.tsx
+++ b/packages/react-input/src/components/Input/Input.test.tsx
@@ -21,6 +21,12 @@ describe('Input', () => {
     Component: Input,
     displayName: 'Input',
     primarySlot: 'input',
+    testOptions: {
+      'has-static-classnames': {
+        contentBefore: 'Test Content Before',
+        contentAfter: 'Test Content After',
+      },
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-input/src/components/Input/__snapshots__/Input.test.tsx.snap b/packages/react-input/src/components/Input/__snapshots__/Input.test.tsx.snap
index 401b8c53494544..e78852255e0d9b 100644
--- a/packages/react-input/src/components/Input/__snapshots__/Input.test.tsx.snap
+++ b/packages/react-input/src/components/Input/__snapshots__/Input.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Input renders a default state 1`] = `
     class="fui-Input"
   >
     <input
-      class=""
+      class="fui-Input__input"
       type="text"
       value=""
     />
diff --git a/packages/react-input/src/components/Input/useInputStyles.ts b/packages/react-input/src/components/Input/useInputStyles.ts
index aa6ff72ca2f92c..fffc08a5872307 100644
--- a/packages/react-input/src/components/Input/useInputStyles.ts
+++ b/packages/react-input/src/components/Input/useInputStyles.ts
@@ -1,8 +1,18 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { InputState } from './Input.types';
+import type { InputSlots, InputState } from './Input.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const inputClassName = 'fui-Input';
+export const inputClassNames: SlotClassNames<InputSlots> = {
+  root: 'fui-Input',
+  input: 'fui-Input__input',
+  contentBefore: 'fui-Input__contentBefore',
+  contentAfter: 'fui-Input__contentAfter',
+};
 
 // TODO(sharing) use theme values once available
 const horizontalSpacing = {
@@ -246,7 +256,7 @@ export const useInputStyles_unstable = (state: InputState): InputState => {
   const contentStyles = useContentStyles();
 
   state.root.className = mergeClasses(
-    inputClassName,
+    inputClassNames.root,
     rootStyles.base,
     rootStyles[size],
     rootStyles[appearance],
@@ -261,6 +271,7 @@ export const useInputStyles_unstable = (state: InputState): InputState => {
   );
 
   state.input.className = mergeClasses(
+    inputClassNames.input,
     inputStyles.base,
     inputStyles[size],
     disabled && inputStyles.disabled,
@@ -269,10 +280,18 @@ export const useInputStyles_unstable = (state: InputState): InputState => {
 
   const contentClasses = [contentStyles.base, disabled && contentStyles.disabled];
   if (state.contentBefore) {
-    state.contentBefore.className = mergeClasses(...contentClasses, state.contentBefore.className);
+    state.contentBefore.className = mergeClasses(
+      inputClassNames.contentBefore,
+      ...contentClasses,
+      state.contentBefore.className,
+    );
   }
   if (state.contentAfter) {
-    state.contentAfter.className = mergeClasses(...contentClasses, state.contentAfter.className);
+    state.contentAfter.className = mergeClasses(
+      inputClassNames.contentAfter,
+      ...contentClasses,
+      state.contentAfter.className,
+    );
   }
 
   return state;

From dc10902ad1c670fb6b0efe18de5d1132eef88285 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 09:45:52 -0800
Subject: [PATCH 012/173] Add static classnames to Label

Updates the react-label package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Label/Label.test.tsx            |  5 +++++
 .../Label/__snapshots__/Label.test.tsx.snap        |  2 +-
 .../src/components/Label/useLabelStyles.ts         | 14 +++++++++++---
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/react-label/src/components/Label/Label.test.tsx b/packages/react-label/src/components/Label/Label.test.tsx
index 52960fc4071b38..0f8a2e19ba1fd7 100644
--- a/packages/react-label/src/components/Label/Label.test.tsx
+++ b/packages/react-label/src/components/Label/Label.test.tsx
@@ -8,6 +8,11 @@ describe('Label', () => {
     Component: Label,
     displayName: 'Label',
     requiredProps: { children: "I'm a label." },
+    testOptions: {
+      'has-static-classnames': {
+        required: 'Required Test',
+      },
+    },
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
diff --git a/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap b/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap
index a2bd95cdf0c52d..ecc930d1af9e45 100644
--- a/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap
+++ b/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Label renders a custom asterisk 1`] = `
       I'm a label
       <span
         aria-hidden="true"
-        class=""
+        class="fui-Label__required"
       >
         foo
       </span>
diff --git a/packages/react-label/src/components/Label/useLabelStyles.ts b/packages/react-label/src/components/Label/useLabelStyles.ts
index 4787b4040b9443..9ef6fa734208fe 100644
--- a/packages/react-label/src/components/Label/useLabelStyles.ts
+++ b/packages/react-label/src/components/Label/useLabelStyles.ts
@@ -1,8 +1,16 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { LabelState } from './Label.types';
+import type { LabelSlots, LabelState } from './Label.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const labelClassName = 'fui-Label';
+export const labelClassNames: SlotClassNames<LabelSlots> = {
+  root: 'fui-Label',
+  required: 'fui-Label__required',
+};
 
 /**
  * Styles for the label
@@ -49,7 +57,7 @@ const useStyles = makeStyles({
 export const useLabelStyles_unstable = (state: LabelState): LabelState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    labelClassName,
+    labelClassNames.root,
     styles.root,
     state.disabled && styles.disabled,
     styles[state.size],
@@ -58,7 +66,7 @@ export const useLabelStyles_unstable = (state: LabelState): LabelState => {
   );
 
   if (state.required) {
-    state.required.className = mergeClasses(styles.required, state.required.className);
+    state.required.className = mergeClasses(labelClassNames.required, styles.required, state.required.className);
   }
 
   return state;

From 4548804316e629b8862aba9b51d38a241bb496f5 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 09:49:01 -0800
Subject: [PATCH 013/173] Add static classnames to Link

Updates the react-link package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../react-link/src/components/Link/useLinkStyles.ts   | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react-link/src/components/Link/useLinkStyles.ts b/packages/react-link/src/components/Link/useLinkStyles.ts
index eb901e24f41397..b7873b5a90fb77 100644
--- a/packages/react-link/src/components/Link/useLinkStyles.ts
+++ b/packages/react-link/src/components/Link/useLinkStyles.ts
@@ -1,9 +1,16 @@
 import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-import type { LinkState } from './Link.types';
+import type { LinkSlots, LinkState } from './Link.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const linkClassName = 'fui-Link';
+export const linkClassNames: SlotClassNames<LinkSlots> = {
+  root: 'fui-Link',
+};
 
 const useStyles = makeStyles({
   focusIndicator: createCustomFocusIndicatorStyle({
@@ -91,7 +98,7 @@ const useStyles = makeStyles({
 export const useLinkStyles_unstable = (state: LinkState): LinkState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    linkClassName,
+    linkClassNames.root,
     styles.root,
     styles.focusIndicator,
     state.root.as === 'a' && state.root.href && styles.href,

From 763af67d453a108b1738f122f1ca1c3ce7fe9f90 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 11:37:35 -0800
Subject: [PATCH 014/173] Add static classnames to Menu

Updates the react-menu package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Menu/Menu.test.tsx         |  1 +
 .../MenuDivider/useMenuDividerStyles.ts       | 11 +++++--
 .../MenuGroup/useMenuGroupStyles.ts           | 11 +++++--
 .../useMenuGroupHeaderStyles.ts               | 11 +++++--
 .../src/components/MenuItem/MenuItem.test.tsx |  9 +++++
 .../__snapshots__/MenuItem.test.tsx.snap      |  2 +-
 .../components/MenuItem/useMenuItemStyles.ts  | 31 ++++++++++++++---
 .../MenuItemCheckbox.test.tsx                 |  9 +++++
 .../MenuItemCheckbox.test.tsx.snap            |  4 +--
 .../useMenuItemCheckboxStyles.ts              | 33 ++++++++++++++++++-
 .../MenuItemRadio/MenuItemRadio.test.tsx      |  9 +++++
 .../__snapshots__/MenuItemRadio.test.tsx.snap |  4 +--
 .../MenuItemRadio/useMenuItemRadioStyles.ts   | 33 ++++++++++++++++++-
 .../components/MenuList/useMenuListStyles.ts  | 11 +++++--
 .../MenuPopover/useMenuPopoverStyles.ts       | 11 +++++--
 .../MenuSplitGroup/useMenuSplitGroupStyles.ts | 18 ++++++----
 .../MenuTrigger/MenuTrigger.test.tsx          |  1 +
 17 files changed, 181 insertions(+), 28 deletions(-)

diff --git a/packages/react-menu/src/components/Menu/Menu.test.tsx b/packages/react-menu/src/components/Menu/Menu.test.tsx
index eb4b1b5c357b30..84e830aacafc00 100644
--- a/packages/react-menu/src/components/Menu/Menu.test.tsx
+++ b/packages/react-menu/src/components/Menu/Menu.test.tsx
@@ -19,6 +19,7 @@ describe('Menu', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classname',
+      'component-has-static-classnames-object',
       // Menu does not have own styles
       'make-styles-overrides-win',
     ],
diff --git a/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts b/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
index 3cc37f959face9..7fa2fbd0b2dd32 100644
--- a/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
+++ b/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
@@ -1,8 +1,15 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { MenuDividerState } from './MenuDivider.types';
+import type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const menuDividerClassName = 'fui-MenuDivider';
+export const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {
+  root: 'fui-MenuDivider',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -15,7 +22,7 @@ const useStyles = makeStyles({
 
 export const useMenuDividerStyles_unstable = (state: MenuDividerState) => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuDividerClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts b/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
index b6caed3aeed71f..9b33b577d14b3c 100644
--- a/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
+++ b/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
@@ -1,10 +1,17 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { mergeClasses } from '@griffel/react';
-import type { MenuGroupState } from './MenuGroup.types';
+import type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';
 
+/**
+ * @deprecated
+ */
 export const menuGroupClassName = 'fui-MenuGroup';
+export const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {
+  root: 'fui-MenuGroup',
+};
 
 export const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {
-  state.root.className = mergeClasses(menuGroupClassName, state.root.className);
+  state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
index 2f488841632a95..bbb2386a0bcf62 100644
--- a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
+++ b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
@@ -1,8 +1,15 @@
 import { mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { MenuGroupHeaderState } from './MenuGroupHeader.types';
+import type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const menuGroupHeaderClassName = 'fui-MenuGroupHeader';
+export const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {
+  root: 'fui-MenuGroupHeader',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
 
 export const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState) => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuGroupHeaderClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx b/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
index 9c92e3e5cb9a49..f00d876fc7d6f8 100644
--- a/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
+++ b/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
@@ -14,6 +14,15 @@ describe('MenuItem', () => {
   isConformant({
     Component: MenuItem,
     displayName: 'MenuItem',
+    testOptions: {
+      'has-static-classnames': {
+        icon: 'Test Icon',
+        checkmark: 'Test Checkmark',
+        submenuIndicator: 'Test Submenu Indicator',
+        content: 'Test Content',
+        secondaryContent: 'Test Secondary Content',
+      },
+    },
   });
 
   /**
diff --git a/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap b/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
index bcac0755978388..cdc34029f58a07 100644
--- a/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
+++ b/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`MenuItem renders a default state 1`] = `
   tabIndex={0}
 >
   <span
-    className=""
+    className="fui-MenuItem__content"
   >
     Default MenuItem
   </span>
diff --git a/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts b/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
index 2dad905bfc433e..53c2b94ffacdd3 100644
--- a/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
+++ b/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
@@ -3,9 +3,21 @@ import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
 import { MenuItemCheckboxState } from '../MenuItemCheckbox/index';
-import type { MenuItemState } from './MenuItem.types';
+import type { MenuItemSlots, MenuItemState } from './MenuItem.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const menuItemClassName = 'fui-MenuItem';
+export const menuItemClassNames: SlotClassNames<MenuItemSlots> = {
+  root: 'fui-MenuItem',
+  icon: 'fui-MenuItem__icon',
+  checkmark: 'fui-MenuItem__checkmark',
+  submenuIndicator: 'fui-MenuItem__submenuIndicator',
+  content: 'fui-MenuItem__content',
+  secondaryContent: 'fui-MenuItem__secondaryContent',
+};
 
 const useStyles = makeStyles({
   focusIndicator: createFocusOutlineStyle(),
@@ -81,7 +93,7 @@ const useStyles = makeStyles({
 export const useMenuItemStyles_unstable = (state: MenuItemState) => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    menuItemClassName,
+    menuItemClassNames.root,
     styles.root,
     styles.focusIndicator,
     state.disabled && styles.disabled,
@@ -89,22 +101,31 @@ export const useMenuItemStyles_unstable = (state: MenuItemState) => {
   );
 
   if (state.content) {
-    state.content.className = mergeClasses(styles.content, state.content.className);
+    state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);
+  }
+
+  if (state.checkmark) {
+    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);
   }
 
   if (state.secondaryContent) {
     state.secondaryContent.className = mergeClasses(
+      menuItemClassNames.secondaryContent,
       !state.disabled && styles.secondaryContent,
       state.secondaryContent.className,
     );
   }
 
   if (state.icon) {
-    state.icon.className = mergeClasses(styles.icon, state.icon.className);
+    state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);
   }
 
   if (state.submenuIndicator) {
-    state.submenuIndicator.className = mergeClasses(styles.submenuIndicator, state.submenuIndicator.className);
+    state.submenuIndicator.className = mergeClasses(
+      menuItemClassNames.submenuIndicator,
+      styles.submenuIndicator,
+      state.submenuIndicator.className,
+    );
   }
   useCheckmarkStyles_unstable(state as MenuItemCheckboxState);
 };
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx b/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
index 9b7c59b8e81c19..dc26e6df3f6436 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
+++ b/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
@@ -18,6 +18,15 @@ describe('MenuItemCheckbox conformance', () => {
       value: '1',
     },
     displayName: 'MenuItemCheckbox',
+    testOptions: {
+      'has-static-classnames': {
+        icon: 'Test Icon',
+        checkmark: 'Test Checkmark',
+        submenuIndicator: 'Test Submenu Indicator',
+        content: 'Test Content',
+        secondaryContent: 'Test Secondary Content',
+      },
+    },
   });
 
   /**
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap b/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
index 5a747d5a9f9bd2..33d516b81afb30 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
+++ b/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`MenuItemCheckbox conformance renders a default state 1`] = `
   tabIndex={0}
 >
   <span
-    className=""
+    className="fui-MenuItem__checkmark fui-MenuItemCheckbox__checkmark"
   >
     <svg
       aria-hidden={true}
@@ -29,7 +29,7 @@ exports[`MenuItemCheckbox conformance renders a default state 1`] = `
     </svg>
   </span>
   <span
-    className=""
+    className="fui-MenuItem__content fui-MenuItemCheckbox__content"
   >
     Default MenuItemCheckbox
   </span>
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
index 2e19eb3f1e2a38..8866b90e2b75b5 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
+++ b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
@@ -1,12 +1,43 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { mergeClasses } from '@griffel/react';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
+import { MenuItemSlots } from '../index';
 import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
 import type { MenuItemCheckboxState } from './MenuItemCheckbox.types';
 
+/**
+ * @deprecated
+ */
 export const menuItemCheckboxClassName = 'fui-MenuItemCheckbox';
+export const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {
+  root: 'fui-MenuItemCheckbox',
+  icon: 'fui-MenuItemCheckbox__icon',
+  checkmark: 'fui-MenuItemCheckbox__checkmark',
+  content: 'fui-MenuItemCheckbox__content',
+  secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',
+};
 
 export const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState) => {
-  state.root.className = mergeClasses(menuItemCheckboxClassName, state.root.className);
+  state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);
+
+  if (state.content) {
+    state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);
+  }
+
+  if (state.secondaryContent) {
+    state.secondaryContent.className = mergeClasses(
+      menuItemCheckboxClassNames.secondaryContent,
+      state.secondaryContent.className,
+    );
+  }
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);
+  }
+
+  if (state.checkmark) {
+    state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);
+  }
 
   useMenuItemStyles_unstable(state);
   useCheckmarkStyles_unstable(state);
diff --git a/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx b/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
index fe5273d1122e4a..33dea95213e04b 100644
--- a/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
+++ b/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
@@ -15,6 +15,15 @@ describe('MenuItemRadio', () => {
       value: '1',
     },
     displayName: 'MenuItemRadio',
+    testOptions: {
+      'has-static-classnames': {
+        icon: 'Test Icon',
+        checkmark: 'Test Checkmark',
+        submenuIndicator: 'Test Submenu Indicator',
+        content: 'Test Content',
+        secondaryContent: 'Test Secondary Content',
+      },
+    },
   });
 
   /**
diff --git a/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap b/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
index a2a2b21a4af78f..4ca31d1740f0bc 100644
--- a/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
+++ b/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`MenuItemRadio renders a default state 1`] = `
   tabIndex={0}
 >
   <span
-    className=""
+    className="fui-MenuItem__checkmark fui-MenuItemRadio__checkmark"
   >
     <svg
       aria-hidden={true}
@@ -29,7 +29,7 @@ exports[`MenuItemRadio renders a default state 1`] = `
     </svg>
   </span>
   <span
-    className=""
+    className="fui-MenuItem__content fui-MenuItemRadio__content"
   >
     Default MenuItemRadio
   </span>
diff --git a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
index c786cdb7b1a67e..0caf24784dcfb6 100644
--- a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
+++ b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
@@ -1,12 +1,43 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { mergeClasses } from '@griffel/react';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
+import { MenuItemSlots } from '../index';
 import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
 import type { MenuItemRadioState } from './MenuItemRadio.types';
 
+/**
+ * @deprecated
+ */
 export const menuItemRadioClassName = 'fui-MenuItemRadio';
+export const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {
+  root: 'fui-MenuItemRadio',
+  icon: 'fui-MenuItemRadio__icon',
+  checkmark: 'fui-MenuItemRadio__checkmark',
+  content: 'fui-MenuItemRadio__content',
+  secondaryContent: 'fui-MenuItemRadio__secondaryContent',
+};
 
 export const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {
-  state.root.className = mergeClasses(menuItemRadioClassName, state.root.className);
+  state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);
+
+  if (state.content) {
+    state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);
+  }
+
+  if (state.secondaryContent) {
+    state.secondaryContent.className = mergeClasses(
+      menuItemRadioClassNames.secondaryContent,
+      state.secondaryContent.className,
+    );
+  }
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);
+  }
+
+  if (state.checkmark) {
+    state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);
+  }
 
   useMenuItemStyles_unstable(state);
   useCheckmarkStyles_unstable(state);
diff --git a/packages/react-menu/src/components/MenuList/useMenuListStyles.ts b/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
index 6dcbaf1ca1fd92..e4260ee8e37b44 100644
--- a/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
+++ b/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
-import type { MenuListState } from './MenuList.types';
+import type { MenuListSlots, MenuListState } from './MenuList.types';
 
+/**
+ * @deprecated
+ */
 export const menuListClassName = 'fui-MenuList';
+export const menuListClassNames: SlotClassNames<MenuListSlots> = {
+  root: 'fui-MenuList',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -16,6 +23,6 @@ const useStyles = makeStyles({
  */
 export const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuListClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts b/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
index 3ecedee5223d5f..5eb353a0886cf8 100644
--- a/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
+++ b/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
@@ -1,8 +1,15 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { MenuPopoverState } from './MenuPopover.types';
+import type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const menuPopoverClassName = 'fui-MenuPopover';
+export const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {
+  root: 'fui-MenuPopover',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -22,6 +29,6 @@ const useStyles = makeStyles({
  */
 export const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuPopoverClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts b/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
index da2975950700bd..c8541f0e97587a 100644
--- a/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
+++ b/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
@@ -1,20 +1,26 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { menuItemClassName } from '../MenuItem/useMenuItemStyles';
-import type { MenuSplitGroupState } from './MenuSplitGroup.types';
+import { menuItemClassNames } from '../MenuItem/useMenuItemStyles';
+import type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const menuSplitGroupClassName = 'fui-MenuSplitGroup';
-
+export const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {
+  root: 'fui-MenuSplitGroup',
+};
 /**
  * Styles for the root slot
  */
 const useStyles = makeStyles({
   root: {
     display: 'flex',
-    [`& > .${menuItemClassName}:nth-child(1)`]: {
+    [`& > .${menuItemClassNames.root}:nth-child(1)`]: {
       width: '100%',
     },
-    [`& > .${menuItemClassName}:nth-child(2)`]: {
+    [`& > .${menuItemClassNames.root}:nth-child(2)`]: {
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0,
       paddingLeft: 0,
@@ -34,6 +40,6 @@ const useStyles = makeStyles({
  */
 export const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuSplitGroupClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx b/packages/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx
index 8f62569d42306b..0deb6f7a764af9 100644
--- a/packages/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx
+++ b/packages/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx
@@ -19,6 +19,7 @@ describe('MenuTrigger', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classname',
+      'component-has-static-classnames-object',
       // MenuTrigger does not have own styles
       'make-styles-overrides-win',
     ],

From 45018d554f6d573c964e6575936d1ecf8d12fa0b Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 11:48:39 -0800
Subject: [PATCH 015/173] Add static classnames to Popover

Updates the react-popover package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Popover/Popover.test.tsx           |  1 +
 .../PopoverSurface/usePopoverSurfaceStyles.ts         | 11 +++++++++--
 .../components/PopoverTrigger/PopoverTrigger.test.tsx |  1 +
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/react-popover/src/components/Popover/Popover.test.tsx b/packages/react-popover/src/components/Popover/Popover.test.tsx
index 9588e7573e826b..7eccbcc4079da6 100644
--- a/packages/react-popover/src/components/Popover/Popover.test.tsx
+++ b/packages/react-popover/src/components/Popover/Popover.test.tsx
@@ -14,6 +14,7 @@ describe('Popover', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classname',
+      'component-has-static-classnames-object',
       // Popover does not have own styles
       'make-styles-overrides-win',
     ],
diff --git a/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts b/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
index 1521c67e920e1e..f63f704ec869ba 100644
--- a/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
+++ b/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
@@ -2,9 +2,16 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';
 import { tokens } from '@fluentui/react-theme';
 import type { PopoverSize } from '../Popover/Popover.types';
-import type { PopoverSurfaceState } from './PopoverSurface.types';
+import type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const popoverSurfaceClassName = 'fui-PopoverSurface';
+export const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {
+  root: 'fui-PopoverSurface',
+};
 
 export const arrowHeights: Record<PopoverSize, number> = {
   small: 6,
@@ -58,7 +65,7 @@ const useStyles = makeStyles({
 export const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): PopoverSurfaceState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    popoverSurfaceClassName,
+    popoverSurfaceClassNames.root,
     styles.root,
     state.size === 'small' && styles.smallPadding,
     state.size === 'medium' && styles.mediumPadding,
diff --git a/packages/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx b/packages/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx
index 596b30adcbf824..161de0c7e67df0 100644
--- a/packages/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx
+++ b/packages/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx
@@ -18,6 +18,7 @@ describe('PopoverTrigger', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classname',
+      'component-has-static-classnames-object',
       // PopoverTrigger does not have own styles
       'make-styles-overrides-win',
     ],

From df7bd365db47d7e7a0139cb2994f9ec81422714c Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 13:12:50 -0800
Subject: [PATCH 016/173] Add static classnames to Provider

Updates the react-provider package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../FluentProvider/useFluentProviderStyles.ts    | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts b/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
index ad55f944d98f86..006769e5a46a0a 100644
--- a/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
+++ b/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
@@ -1,8 +1,15 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { FluentProviderState } from './FluentProvider.types';
+import type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated
+ */
 export const fluentProviderClassName = 'fui-FluentProvider';
+export const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {
+  root: 'fui-FluentProvider',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -18,7 +25,12 @@ const useStyles = makeStyles({
 export const useFluentProviderStyles_unstable = (state: FluentProviderState) => {
   const styles = useStyles();
 
-  state.root.className = mergeClasses(fluentProviderClassName, state.themeClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(
+    fluentProviderClassNames.root,
+    state.themeClassName,
+    styles.root,
+    state.root.className,
+  );
 
   return state;
 };

From 218991a31bf2ba6f49fde635cdf109f1a8bfbe5c Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 13:21:06 -0800
Subject: [PATCH 017/173] Deprecate static classname string for Radio.

Radio and RadioGroup have been updated to export a static classnames
object per https://github.com/microsoft/fluentui/issues/21847. The old
string classnames are marked as deprecated.
---
 packages/react-radio/src/components/Radio/useRadioStyles.ts    | 3 +++
 .../src/components/RadioGroup/useRadioGroupStyles.ts           | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/packages/react-radio/src/components/Radio/useRadioStyles.ts b/packages/react-radio/src/components/Radio/useRadioStyles.ts
index d2eaf8bd8c2158..2d3883e0390439 100644
--- a/packages/react-radio/src/components/Radio/useRadioStyles.ts
+++ b/packages/react-radio/src/components/Radio/useRadioStyles.ts
@@ -4,6 +4,9 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { RadioSlots, RadioState } from './Radio.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated
+ */
 export const radioClassName = 'fui-Radio';
 export const radioClassNames: SlotClassNames<RadioSlots> = {
   root: 'fui-Radio',
diff --git a/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts b/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
index 8e11856677dd08..2282ed1e0eca57 100644
--- a/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
+++ b/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
@@ -2,6 +2,9 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated
+ */
 export const radioGroupClassName = 'fui-RadioGroup';
 export const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {
   root: 'fui-RadioGroup',

From 53ecb8342c61e659ca1fbc086fe7bcb338b2711c Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 15:47:13 -0800
Subject: [PATCH 018/173] Add static classnames to Select

Updates the react-select package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../Select/__snapshots__/Select.test.tsx.snap  |  6 ++++--
 .../src/components/Select/useSelectStyles.ts   | 18 ++++++++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/react-select/src/components/Select/__snapshots__/Select.test.tsx.snap b/packages/react-select/src/components/Select/__snapshots__/Select.test.tsx.snap
index 8687c00d63b1d8..e5b09ecd5fdb51 100644
--- a/packages/react-select/src/components/Select/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-select/src/components/Select/__snapshots__/Select.test.tsx.snap
@@ -6,9 +6,11 @@ exports[`Select renders the default state 1`] = `
     class="fui-Select"
   >
     <select
-      class=""
+      class="fui-Select__select"
+    />
+    <span
+      class="fui-Select__icon"
     />
-    <span />
   </span>
 </div>
 `;
diff --git a/packages/react-select/src/components/Select/useSelectStyles.ts b/packages/react-select/src/components/Select/useSelectStyles.ts
index 35c64a96f369b3..a29082f8353b5c 100644
--- a/packages/react-select/src/components/Select/useSelectStyles.ts
+++ b/packages/react-select/src/components/Select/useSelectStyles.ts
@@ -1,7 +1,16 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { SelectState } from './Select.types';
+import type { SelectSlots, SelectState } from './Select.types';
 
+/**
+ * @deprecated
+ */
 export const selectClassName = 'fui-Select';
+export const selectClassNames: SlotClassNames<SelectSlots> = {
+  root: 'fui-Select',
+  select: 'fui-Select__select',
+  icon: 'fui-Select__icon',
+};
 
 const useStyles = makeStyles({
   wrapper: {
@@ -22,13 +31,18 @@ export const useSelectStyles_unstable = (state: SelectState): SelectState => {
   const disabled = state.select.disabled;
   const selectStyles = useStyles();
 
-  state.root.className = mergeClasses(selectClassName, selectStyles.wrapper, state.root.className);
+  state.root.className = mergeClasses(selectClassNames.root, selectStyles.wrapper, state.root.className);
 
   state.select.className = mergeClasses(
+    selectClassNames.select,
     selectStyles.select,
     disabled && selectStyles.selectDisabled,
     state.select.className,
   );
 
+  if (state.icon) {
+    state.icon.className = mergeClasses(selectClassNames.icon, state.icon.className);
+  }
+
   return state;
 };

From 466df959b28d9455c78601ff9a394ee7b14fc2d0 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 15:53:27 -0800
Subject: [PATCH 019/173] Add static classnames to Tabs

Updates the react-tabs package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Tab/Tab.test.tsx           |  5 +++++
 .../Tab/__snapshots__/Tab.test.tsx.snap       | 22 +++++++++----------
 .../src/components/Tab/useTabStyles.ts        | 21 +++++++++++++++---
 .../__snapshots__/TabList.test.tsx.snap       |  6 ++---
 .../components/TabList/useTabListStyles.ts    | 14 ++++++++----
 5 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/packages/react-tabs/src/components/Tab/Tab.test.tsx b/packages/react-tabs/src/components/Tab/Tab.test.tsx
index 6ac94c414c1c1d..938658b42c2158 100644
--- a/packages/react-tabs/src/components/Tab/Tab.test.tsx
+++ b/packages/react-tabs/src/components/Tab/Tab.test.tsx
@@ -10,6 +10,11 @@ describe('Tab', () => {
   isConformant({
     Component: Tab,
     displayName: 'Tab',
+    testOptions: {
+      'has-static-classnames': {
+        icon: 'Test Icon',
+      },
+    },
   });
 
   const defaultContext: TabListContextValue = {
diff --git a/packages/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap b/packages/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap
index 8e96248628a180..857c21b0c90880 100644
--- a/packages/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap
+++ b/packages/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`Tab renders correctly 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
@@ -24,7 +24,7 @@ exports[`Tab renders default correctly with icon slotted 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__icon"
     >
       <svg
         aria-hidden="true"
@@ -41,7 +41,7 @@ exports[`Tab renders default correctly with icon slotted 1`] = `
       </svg>
     </span>
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
@@ -57,7 +57,7 @@ exports[`Tab renders small size and vertical correctly with icon slotted 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__icon"
     >
       <svg
         aria-hidden="true"
@@ -74,7 +74,7 @@ exports[`Tab renders small size and vertical correctly with icon slotted 1`] = `
       </svg>
     </span>
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
@@ -90,7 +90,7 @@ exports[`Tab renders small size correctly with icon slotted 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__icon"
     >
       <svg
         aria-hidden="true"
@@ -107,7 +107,7 @@ exports[`Tab renders small size correctly with icon slotted 1`] = `
       </svg>
     </span>
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
@@ -123,7 +123,7 @@ exports[`Tab renders subtle appearance correctly with icon slotted 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__icon"
     >
       <svg
         aria-hidden="true"
@@ -140,7 +140,7 @@ exports[`Tab renders subtle appearance correctly with icon slotted 1`] = `
       </svg>
     </span>
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
@@ -156,7 +156,7 @@ exports[`Tab renders vertical correctly with icon slotted 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__icon"
     >
       <svg
         aria-hidden="true"
@@ -173,7 +173,7 @@ exports[`Tab renders vertical correctly with icon slotted 1`] = `
       </svg>
     </span>
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
diff --git a/packages/react-tabs/src/components/Tab/useTabStyles.ts b/packages/react-tabs/src/components/Tab/useTabStyles.ts
index 354870957e1b9b..582ab4fadd228a 100644
--- a/packages/react-tabs/src/components/Tab/useTabStyles.ts
+++ b/packages/react-tabs/src/components/Tab/useTabStyles.ts
@@ -1,11 +1,20 @@
-import type { TabState } from './Tab.types';
+import type { TabSlots, TabState } from './Tab.types';
 
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { tabPendingDesignTokens } from '../../tab.constants';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated
+ */
 export const tabClassName = 'fui-Tab';
+export const tabClassNames: SlotClassNames<TabSlots> = {
+  root: 'fui-Tab',
+  icon: 'fui-Tab__icon',
+  content: 'fui-Tab__content',
+};
 
 /**
  * Styles for the root slot
@@ -175,7 +184,7 @@ export const useTabStyles_unstable = (state: TabState): TabState => {
   const contentStyles = useContentStyles();
 
   state.root.className = mergeClasses(
-    tabClassName,
+    tabClassNames.root,
     rootStyles.base,
     focusStyles.base,
     state.size === 'small' && rootStyles.small,
@@ -186,10 +195,16 @@ export const useTabStyles_unstable = (state: TabState): TabState => {
   );
 
   if (state.icon) {
-    state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);
+    state.icon.className = mergeClasses(
+      tabClassNames.icon,
+      iconStyles.base,
+      iconStyles[state.size],
+      state.icon.className,
+    );
   }
 
   state.content.className = mergeClasses(
+    tabClassNames.content,
     contentStyles.base,
     state.size === 'small' && contentStyles.small,
     state.content.className,
diff --git a/packages/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap b/packages/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap
index af0eca411aee9c..6414fe5cba7cc8 100644
--- a/packages/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap
+++ b/packages/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`TabList renders with tabs 1`] = `
       tabindex="0"
     >
       <span
-        class=""
+        class="fui-Tab__content"
       >
         First
       </span>
@@ -34,7 +34,7 @@ exports[`TabList renders with tabs 1`] = `
       tabindex="0"
     >
       <span
-        class=""
+        class="fui-Tab__content"
       >
         Second
       </span>
@@ -45,7 +45,7 @@ exports[`TabList renders with tabs 1`] = `
       tabindex="0"
     >
       <span
-        class=""
+        class="fui-Tab__content"
       >
         Third
       </span>
diff --git a/packages/react-tabs/src/components/TabList/useTabListStyles.ts b/packages/react-tabs/src/components/TabList/useTabListStyles.ts
index 94ab9f5376ef37..9d7487c1cbf5b6 100644
--- a/packages/react-tabs/src/components/TabList/useTabListStyles.ts
+++ b/packages/react-tabs/src/components/TabList/useTabListStyles.ts
@@ -1,11 +1,17 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { TabListState } from './TabList.types';
+import type { TabListSlots, TabListState } from './TabList.types';
 import { tokens } from '@fluentui/react-theme';
-import { usePrevious } from '@fluentui/react-utilities';
+import { SlotClassNames, usePrevious } from '@fluentui/react-utilities';
 import { tabPendingDesignTokens } from '../../tab.constants';
 
+/**
+ * @deprecated
+ */
 export const tabListClassName = 'fui-TabList';
-export const tabListSelectionIndicatorName = 'fui-TabList_SelectionIndicator';
+export const tabListSelectionIndicatorName = 'fui-TabList__selectionIndicator';
+export const tabListClassNames: SlotClassNames<TabListSlots> = {
+  root: 'fui-TabList',
+};
 
 export const indicatorOffsetVar = '--selection-indicator-offset';
 export const indicatorLengthVar = '--selection-indicator-length';
@@ -103,7 +109,7 @@ export const useTabListStyles_unstable = (state: TabListState): TabListState =>
   const verticalIndicatorStyles = useVerticalIndicatorStyles();
 
   state.root.className = mergeClasses(
-    tabListClassName,
+    tabListClassNames.root,
     styles.root,
     vertical && styles.vertical,
     !!selectedValue && (vertical ? verticalIndicatorStyles.base : horizontalIndicatorStyles.base),

From c1f97754d5ce8470b2aee130ef37c28853494ae0 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 15:55:40 -0800
Subject: [PATCH 020/173] Add static classnames to Spinner

Updates the react-spinner package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Spinner/useSpinnerStyles.ts        | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts b/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts
index 8b8fd0c23709fe..f3c6b4c3cd0114 100644
--- a/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts
+++ b/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { SpinnerState } from './Spinner.types';
+import type { SpinnerSlots, SpinnerState } from './Spinner.types';
 
+/**
+ * @deprecated
+ */
 export const spinnerClassName = 'fui-Spinner';
+export const spinnerClassNames: SlotClassNames<SpinnerSlots> = {
+  root: 'fui-Spinner',
+};
 /**
  * Styles for the root slot
  */
@@ -18,7 +25,7 @@ const useStyles = makeStyles({
  */
 export const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(spinnerClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(spinnerClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);

From a3b1c232964978b001ae140b33d5232d05d915cb Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 16:06:59 -0800
Subject: [PATCH 021/173] Add static classnames to Text

Updates the react-text package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 packages/react-text/src/components/Body/Body.tsx      | 10 +++++++++-
 .../react-text/src/components/Caption/Caption.tsx     | 10 +++++++++-
 .../react-text/src/components/Display/Display.tsx     | 10 +++++++++-
 .../react-text/src/components/Headline/Headline.tsx   | 10 +++++++++-
 .../src/components/LargeTitle/LargeTitle.tsx          | 10 +++++++++-
 .../src/components/Subheadline/Subheadline.tsx        | 10 +++++++++-
 .../react-text/src/components/Text/useTextStyles.ts   | 11 +++++++++--
 packages/react-text/src/components/Title1/Title1.tsx  | 10 +++++++++-
 packages/react-text/src/components/Title2/Title2.tsx  | 10 +++++++++-
 packages/react-text/src/components/Title3/Title3.tsx  | 10 +++++++++-
 10 files changed, 90 insertions(+), 11 deletions(-)

diff --git a/packages/react-text/src/components/Body/Body.tsx b/packages/react-text/src/components/Body/Body.tsx
index e44bab0d6e3617..f631999d00eae4 100644
--- a/packages/react-text/src/components/Body/Body.tsx
+++ b/packages/react-text/src/components/Body/Body.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const bodyClassName = 'fui-Body';
+export const bodyClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Body',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Body: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: bodyClassName,
+  className: bodyClassNames.root,
   displayName: 'Body',
 });
diff --git a/packages/react-text/src/components/Caption/Caption.tsx b/packages/react-text/src/components/Caption/Caption.tsx
index 6271bb8f331f4c..f274b3a829650e 100644
--- a/packages/react-text/src/components/Caption/Caption.tsx
+++ b/packages/react-text/src/components/Caption/Caption.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const captionClassName = 'fui-Caption';
+export const captionClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Caption',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Caption: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: captionClassName,
+  className: captionClassNames.root,
   displayName: 'Caption',
 });
diff --git a/packages/react-text/src/components/Display/Display.tsx b/packages/react-text/src/components/Display/Display.tsx
index f195b715d77052..ba3f335f1bc9dc 100644
--- a/packages/react-text/src/components/Display/Display.tsx
+++ b/packages/react-text/src/components/Display/Display.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const displayClassName = 'fui-Display';
+export const displayClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Display',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Display: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: displayClassName,
+  className: displayClassNames.root,
   displayName: 'Display',
 });
diff --git a/packages/react-text/src/components/Headline/Headline.tsx b/packages/react-text/src/components/Headline/Headline.tsx
index 38be9f5cc3deef..bd6ded8622242e 100644
--- a/packages/react-text/src/components/Headline/Headline.tsx
+++ b/packages/react-text/src/components/Headline/Headline.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const headlineClassName = 'fui-Headline';
+export const headlineClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Headline',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Headline: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: headlineClassName,
+  className: headlineClassNames.root,
   displayName: 'Headline',
 });
diff --git a/packages/react-text/src/components/LargeTitle/LargeTitle.tsx b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
index ef24844a444428..d76e0b6e3978da 100644
--- a/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
+++ b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const largeTitleClassName = 'fui-LargeTitle';
+export const largeTitleClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-LargeTitle',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const LargeTitle: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: largeTitleClassName,
+  className: largeTitleClassNames.root,
   displayName: 'LargeTitle',
 });
diff --git a/packages/react-text/src/components/Subheadline/Subheadline.tsx b/packages/react-text/src/components/Subheadline/Subheadline.tsx
index 9cfbc07ee91256..74ad9d71e242d1 100644
--- a/packages/react-text/src/components/Subheadline/Subheadline.tsx
+++ b/packages/react-text/src/components/Subheadline/Subheadline.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const subheadlineClassName = 'fui-Subheadline';
+export const subheadlineClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Subheadline',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Subheadline: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: subheadlineClassName,
+  className: subheadlineClassNames.root,
   displayName: 'Subheadline',
 });
diff --git a/packages/react-text/src/components/Text/useTextStyles.ts b/packages/react-text/src/components/Text/useTextStyles.ts
index 1f87bce8181261..50aa2a3e5c7fa2 100644
--- a/packages/react-text/src/components/Text/useTextStyles.ts
+++ b/packages/react-text/src/components/Text/useTextStyles.ts
@@ -1,8 +1,15 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { TextState } from './Text.types';
+import type { TextSlots, TextState } from './Text.types';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated
+ */
 export const textClassName = 'fui-Text';
+export const textClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Text',
+};
 
 /**
  * Styles for the root slot
@@ -107,7 +114,7 @@ export const useTextStyles_unstable = (state: TextState): TextState => {
   const styles = useStyles();
 
   state.root.className = mergeClasses(
-    textClassName,
+    textClassNames.root,
     styles.root,
     state.wrap === false && styles.nowrap,
     state.truncate && styles.truncate,
diff --git a/packages/react-text/src/components/Title1/Title1.tsx b/packages/react-text/src/components/Title1/Title1.tsx
index 10794c5386f635..f8afdf548c5c91 100644
--- a/packages/react-text/src/components/Title1/Title1.tsx
+++ b/packages/react-text/src/components/Title1/Title1.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const title1ClassName = 'fui-Title1';
+export const title1ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Title1',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Title1: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: title1ClassName,
+  className: title1ClassNames.root,
   displayName: 'Title1',
 });
diff --git a/packages/react-text/src/components/Title2/Title2.tsx b/packages/react-text/src/components/Title2/Title2.tsx
index aeaa8f5dd29bc6..aa5ebcaf87583f 100644
--- a/packages/react-text/src/components/Title2/Title2.tsx
+++ b/packages/react-text/src/components/Title2/Title2.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const title2ClassName = 'fui-Title2';
+export const title2ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Title2',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Title2: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: title2ClassName,
+  className: title2ClassNames.root,
   displayName: 'Title2',
 });
diff --git a/packages/react-text/src/components/Title3/Title3.tsx b/packages/react-text/src/components/Title3/Title3.tsx
index 56265b5a855a4a..a1eab8207d519f 100644
--- a/packages/react-text/src/components/Title3/Title3.tsx
+++ b/packages/react-text/src/components/Title3/Title3.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const title3ClassName = 'fui-Title3';
+export const title3ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Title3',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Title3: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: title3ClassName,
+  className: title3ClassNames.root,
   displayName: 'Title3',
 });

From a5808fef0a390bd4cae43c6794b7e23edb0018ce Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 16:14:14 -0800
Subject: [PATCH 022/173] Add static classnames to Toolbar

Updates the react-toolbar package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Toolbar/useToolbarStyles.ts       | 12 ++++++++++--
 .../ToolbarButton/useToolbarButtonStyles.ts          | 12 ++++++++++--
 .../ToolbarDivider/useToolbarDividerStyles.ts        | 12 ++++++++++--
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts b/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
index 2ca41e569a1037..075cc65e51676d 100644
--- a/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
+++ b/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
@@ -1,7 +1,15 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ToolbarState } from './Toolbar.types';
+import type { ToolbarSlots, ToolbarState } from './Toolbar.types';
 
+/**
+ * @deprecated
+ */
 export const toolbarClassName = 'fui-Toolbar';
+export const toolbarClassNames: SlotClassNames<ToolbarSlots> = {
+  root: 'fui-Toolbar',
+};
+
 /**
  * Styles for the root slot
  */
@@ -18,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(toolbarClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(toolbarClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts b/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
index c2b750aa009434..2d67540e44e8ab 100644
--- a/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
+++ b/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
@@ -1,7 +1,15 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ToolbarButtonState } from './ToolbarButton.types';
+import type { ToolbarButtonSlots, ToolbarButtonState } from './ToolbarButton.types';
 
+/**
+ * @deprecated
+ */
 export const toolbarButtonClassName = 'fui-ToolbarButton';
+export const toolbarButtonClassNames: SlotClassNames<ToolbarButtonSlots> = {
+  root: 'fui-ToolbarButton',
+};
+
 /**
  * Styles for the root slot
  */
@@ -18,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useToolbarButtonStyles_unstable = (state: ToolbarButtonState): ToolbarButtonState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(toolbarButtonClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(toolbarButtonClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts b/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
index c8f13396867a9d..3bc8a6ef91b08f 100644
--- a/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
+++ b/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
@@ -1,7 +1,15 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ToolbarDividerState } from './ToolbarDivider.types';
+import type { ToolbarDividerSlots, ToolbarDividerState } from './ToolbarDivider.types';
 
+/**
+ * @deprecated
+ */
 export const toolbarDividerClassName = 'fui-ToolbarDivider';
+export const toolbarDividerClassNames: SlotClassNames<ToolbarDividerSlots> = {
+  root: 'fui-ToolbarDivider',
+};
+
 /**
  * Styles for the root slot
  */
@@ -18,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(toolbarDividerClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(toolbarDividerClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);

From 4b7007e8bee6765f01253bbb14f99ced2befd079 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 16:19:32 -0800
Subject: [PATCH 023/173] Add static classnames to Tooltip

Updates the react-tooltip package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../react-tooltip/src/components/Tooltip/Tooltip.test.tsx  | 4 ++++
 .../src/components/Tooltip/useTooltipStyles.ts             | 7 ++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx b/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
index 320678bcc8c044..a2ae9db500f464 100644
--- a/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
+++ b/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
@@ -33,6 +33,10 @@ describe('Tooltip', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classname',
+      'component-has-static-classnames-object',
+      'as-renders-fc',
+      'as-passes-as-value',
+      'as-renders-html',
     ],
   });
 
diff --git a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
index cf31a43389b36c..c07e6f1accdee5 100644
--- a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
+++ b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
@@ -2,9 +2,13 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createArrowStyles } from '@fluentui/react-positioning';
 import { tokens } from '@fluentui/react-theme';
 import { arrowHeight } from './private/constants';
-import type { TooltipState } from './Tooltip.types';
+import type { TooltipSlots, TooltipState } from './Tooltip.types';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 export const tooltipClassName = 'fui-Tooltip';
+export const tooltipClassNames: SlotClassNames<TooltipSlots> = {
+  content: 'fui-Tooltip__content',
+};
 
 /**
  * Styles for the tooltip
@@ -51,6 +55,7 @@ export const useTooltipStyles_unstable = (state: TooltipState): TooltipState =>
 
   state.content.className = mergeClasses(
     tooltipClassName,
+    tooltipClassNames.content,
     styles.root,
     state.appearance === 'inverted' && styles.inverted,
     state.visible && styles.visible,

From 8bf98cbfe8fed962bd903e9a787d355839ec7d4f Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 16:25:51 -0800
Subject: [PATCH 024/173] Add static classnames to SpinButton

Updates the react-spinbutton package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/SpinButton/SpinButton.test.tsx  |  1 +
 .../components/SpinButton/useSpinButtonStyles.ts   | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/react-spinbutton/src/components/SpinButton/SpinButton.test.tsx b/packages/react-spinbutton/src/components/SpinButton/SpinButton.test.tsx
index 743d3ffcf7d536..5e86604ae1a010 100644
--- a/packages/react-spinbutton/src/components/SpinButton/SpinButton.test.tsx
+++ b/packages/react-spinbutton/src/components/SpinButton/SpinButton.test.tsx
@@ -7,6 +7,7 @@ describe('SpinButton', () => {
   isConformant({
     Component: SpinButton,
     displayName: 'SpinButton',
+    disabledTests: ['component-has-static-classnames-object'], // Will be enabled when component is implemented
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
diff --git a/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
index 876f202cdaa8d1..24ab0415e1e156 100644
--- a/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
+++ b/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
@@ -1,7 +1,17 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { SpinButtonState } from './SpinButton.types';
+import type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';
 
+/**
+ * @deprecated
+ */
 export const spinButtonClassName = 'fui-SpinButton';
+export const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {
+  root: 'fui-SpinButton',
+  input: 'fui-SpinButton__input',
+  incrementControl: 'fui-SpinButton__incrementControl',
+  decrementControl: 'fui-SpinButton__decrementControl',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +29,7 @@ const useStyles = makeStyles({
  */
 export const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(spinButtonClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(spinButtonClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);

From eab3d64075cb6a38afe35d250ddd58a524532926 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 16:33:01 -0800
Subject: [PATCH 025/173] Add static classnames to Combobox

Updates the react-combobox package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../components/ComboButton/useComboButtonStyles.ts    | 11 +++++++++--
 .../src/components/Combobox/useComboboxStyles.ts      | 11 +++++++++--
 .../src/components/Listbox/useListboxStyles.ts        | 11 +++++++++--
 .../src/components/Option/useOptionStyles.ts          | 11 +++++++++--
 .../components/OptionGroup/useOptionGroupStyles.ts    | 11 +++++++++--
 5 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts b/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
index c849610242e431..b47f2289699402 100644
--- a/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
+++ b/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ComboButtonState } from './ComboButton.types';
+import type { ComboButtonSlots, ComboButtonState } from './ComboButton.types';
 
+/**
+ * @deprecated
+ */
 export const comboButtonClassName = 'fui-ComboButton';
+export const comboButtonClassNames: SlotClassNames<ComboButtonSlots> = {
+  root: 'fui-ComboButton',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useComboButtonStyles_unstable = (state: ComboButtonState): ComboButtonState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(comboButtonClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(comboButtonClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts b/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts
index 85ff6e09aeea4d..2f076be2990dbe 100644
--- a/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts
+++ b/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ComboboxState } from './Combobox.types';
+import type { ComboboxSlots, ComboboxState } from './Combobox.types';
 
+/**
+ * @deprecated
+ */
 export const comboboxClassName = 'fui-Combobox';
+export const comboboxClassNames: SlotClassNames<ComboboxSlots> = {
+  root: 'fui-Combobox',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(comboboxClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(comboboxClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-combobox/src/components/Listbox/useListboxStyles.ts b/packages/react-combobox/src/components/Listbox/useListboxStyles.ts
index b6c39eeeeb057b..ecdb5c926b2030 100644
--- a/packages/react-combobox/src/components/Listbox/useListboxStyles.ts
+++ b/packages/react-combobox/src/components/Listbox/useListboxStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ListboxState } from './Listbox.types';
+import type { ListboxSlots, ListboxState } from './Listbox.types';
 
+/**
+ * @deprecated
+ */
 export const listboxClassName = 'fui-Listbox';
+export const listboxClassNames: SlotClassNames<ListboxSlots> = {
+  root: 'fui-Listbox',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useListboxStyles_unstable = (state: ListboxState): ListboxState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(listboxClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-combobox/src/components/Option/useOptionStyles.ts b/packages/react-combobox/src/components/Option/useOptionStyles.ts
index daa80af18d8f87..20b62ad55c5e82 100644
--- a/packages/react-combobox/src/components/Option/useOptionStyles.ts
+++ b/packages/react-combobox/src/components/Option/useOptionStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { OptionState } from './Option.types';
+import type { OptionSlots, OptionState } from './Option.types';
 
+/**
+ * @deprecated
+ */
 export const optionClassName = 'fui-Option';
+export const optionClassNames: SlotClassNames<OptionSlots> = {
+  root: 'fui-Option',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useOptionStyles_unstable = (state: OptionState): OptionState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(optionClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(optionClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts b/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts
index 992c0d8459a245..5d160e97e8f65c 100644
--- a/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts
+++ b/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { OptionGroupState } from './OptionGroup.types';
+import type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';
 
+/**
+ * @deprecated
+ */
 export const optionGroupClassName = 'fui-OptionGroup';
+export const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {
+  root: 'fui-OptionGroup',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useOptionGroupStyles_unstable = (state: OptionGroupState): OptionGroupState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(optionGroupClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);

From 0666c696d985d2bbc97100ba268b99f09b03842d Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 16:40:32 -0800
Subject: [PATCH 026/173] Rename conformance test for clarity

Changes test name to "has static classnames in rendered component" from
"has static classnames" to make the test's purpose clearer.
---
 packages/react-conformance/src/defaultTests.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-conformance/src/defaultTests.tsx b/packages/react-conformance/src/defaultTests.tsx
index 906bf1b346bf63..46365a5466fc5a 100644
--- a/packages/react-conformance/src/defaultTests.tsx
+++ b/packages/react-conformance/src/defaultTests.tsx
@@ -375,7 +375,7 @@ export const defaultTests: TestObject = {
       }
     });
 
-    it(`has static classnames (component-has-static-classnames-object)`, () => {
+    it(`has static classnames in rendered component (component-has-static-classnames-object)`, () => {
       if (!handledClassNamesObjectExport) {
         return;
       }

From 9aa0a717f3f52b09dcc43bad48b4d790b58d6f78 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 16:56:20 -0800
Subject: [PATCH 027/173] Update classname conformance tests to support
 variants

When testing that a component correctly renders classnames we need to
support multiple variants of a component for slots that are mutually
exclusive. For example, Avatar, only renders the initials if the icon
slot doesn't render so the initials class name will, correctly, not be
rendered when the icon classname is present and vice versa.
---
 .../react-conformance/src/defaultTests.tsx    | 66 ++++++++++---------
 packages/react-conformance/src/types.ts       |  9 ++-
 2 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/packages/react-conformance/src/defaultTests.tsx b/packages/react-conformance/src/defaultTests.tsx
index 46365a5466fc5a..efc74b5c0a80ad 100644
--- a/packages/react-conformance/src/defaultTests.tsx
+++ b/packages/react-conformance/src/defaultTests.tsx
@@ -381,40 +381,46 @@ export const defaultTests: TestObject = {
       }
 
       const { testOptions = {} } = testInfo;
-      const mergedProps = {
-        ...requiredProps,
-        ...(testOptions['has-static-classnames'] ?? {}),
-      };
-      const defaultEl = customMount(<Component {...mergedProps} />);
-      const defaultComponent = getComponent(defaultEl, helperComponents, wrapperComponent);
+      const staticClassNameVariants = testOptions['has-static-classnames'] ?? [{ props: {} }];
 
-      const exportName =
-        componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
-      const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
-      const classNamesFromFile = indexFile[exportName];
+      for (const staticClassNames of staticClassNameVariants) {
+        const mergedProps = {
+          ...requiredProps,
+          ...staticClassNames.props,
+        };
+        const defaultEl = customMount(<Component {...mergedProps} />);
+        const defaultComponent = getComponent(defaultEl, helperComponents, wrapperComponent);
 
-      const missingClassNames = [];
-      let className;
-      let err: Error;
-      for (const key of Object.keys(classNamesFromFile)) {
-        className = classNamesFromFile[key];
-        try {
-          expect(defaultComponent.find(`.${className}`).length).toBeGreaterThanOrEqual(1);
-        } catch (e) {
-          err = e as Error;
-          missingClassNames.push(className);
+        const exportName =
+          componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
+        const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
+        const classNamesFromFile = indexFile[exportName];
+
+        const missingClassNames = [];
+        let className;
+        let err: Error;
+
+        const expectedClassNames = staticClassNames.expectedClassNames ?? classNamesFromFile;
+        for (const key of Object.keys(expectedClassNames)) {
+          className = classNamesFromFile[key];
+          try {
+            expect(defaultComponent.find(`.${className}`).length).toBeGreaterThanOrEqual(1);
+          } catch (e) {
+            err = e as Error;
+            missingClassNames.push(className);
+          }
         }
-      }
 
-      if (missingClassNames.length > 0) {
-        throw new Error(
-          defaultErrorMessages['component-has-static-classnames'](
-            testInfo,
-            err!,
-            componentName,
-            missingClassNames.join(', '),
-          ),
-        );
+        if (missingClassNames.length > 0) {
+          throw new Error(
+            defaultErrorMessages['component-has-static-classnames'](
+              testInfo,
+              err!,
+              componentName,
+              missingClassNames.join(', '),
+            ),
+          );
+        }
       }
     });
   },
diff --git a/packages/react-conformance/src/types.ts b/packages/react-conformance/src/types.ts
index 663996c4b731ba..eb65c180fae0c7 100644
--- a/packages/react-conformance/src/types.ts
+++ b/packages/react-conformance/src/types.ts
@@ -15,8 +15,13 @@ export interface TestOptions {
     ignoreProps?: string[];
   };
   'has-static-classnames'?: {
-    [key: string]: string | {};
-  };
+    props: {
+      [key: string]: string | {};
+    };
+    expectedClassNames?: {
+      [key: string]: string;
+    };
+  }[];
 }
 
 export interface IsConformantOptions<TProps = {}> {

From 8c50ea448bc3af1aa9188860ec8502b1c8eb0150 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 17:03:14 -0800
Subject: [PATCH 028/173] Update Avatar for static class name conformance

---
 .../src/components/Avatar/Avatar.test.tsx     | 35 +++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/packages/react-avatar/src/components/Avatar/Avatar.test.tsx b/packages/react-avatar/src/components/Avatar/Avatar.test.tsx
index a1a08cdce616c1..9103ef996579ec 100644
--- a/packages/react-avatar/src/components/Avatar/Avatar.test.tsx
+++ b/packages/react-avatar/src/components/Avatar/Avatar.test.tsx
@@ -2,18 +2,41 @@ import * as React from 'react';
 import { isConformant } from '../../common/isConformant';
 import { Avatar } from './Avatar';
 import { render, screen } from '@testing-library/react';
+import { avatarClassNames } from './useAvatarStyles';
 
 describe('Avatar', () => {
   isConformant({
     Component: Avatar,
     displayName: 'Avatar',
     testOptions: {
-      'has-static-classnames': {
-        image: { src: 'avatar.png', alt: 'test-image' },
-        initials: 'Test Initials',
-        icon: 'Test Icon',
-        badge: 'Test Badge',
-      },
+      'has-static-classnames': [
+        {
+          props: {
+            image: { src: 'avatar.png', alt: 'test-image' },
+            initials: 'Test Initials',
+            badge: 'Test Badge',
+          },
+          expectedClassNames: {
+            root: avatarClassNames.root,
+            image: avatarClassNames.image,
+            initials: avatarClassNames.initials,
+            badge: avatarClassNames.badge,
+          },
+        },
+        {
+          props: {
+            image: { src: 'avatar.png', alt: 'test-image' },
+            icon: 'Test Icon',
+            badge: 'Test Badge',
+          },
+          expectedClassNames: {
+            root: avatarClassNames.root,
+            image: avatarClassNames.image,
+            icon: avatarClassNames.icon,
+            badge: avatarClassNames.badge,
+          },
+        },
+      ],
     },
   });
 

From c663d478fa6cd82d3e6b1e1029c1ad8e3cdba54f Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 17:03:46 -0800
Subject: [PATCH 029/173] Update Card static class name conformance.

- Changes header and description slots to "span" from React.Fragment
  This allows them to take the "className" prop and is consistent with
  their existing types.
- Updates testOptions
---
 .../src/components/CardHeader/CardHeader.test.tsx    |  8 +++++---
 .../__snapshots__/CardHeader.test.tsx.snap           | 12 ++++++++++--
 .../src/components/CardHeader/useCardHeader.ts       |  4 ++--
 .../src/components/CardPreview/CardPreview.test.tsx  |  8 +++++---
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/react-card/src/components/CardHeader/CardHeader.test.tsx b/packages/react-card/src/components/CardHeader/CardHeader.test.tsx
index 7fb93decc8d34a..ed14bdd0201356 100644
--- a/packages/react-card/src/components/CardHeader/CardHeader.test.tsx
+++ b/packages/react-card/src/components/CardHeader/CardHeader.test.tsx
@@ -8,9 +8,11 @@ describe('CardHeader', () => {
     Component: CardHeader,
     displayName: 'CardHeader',
     testOptions: {
-      'has-static-classnames': {
-        header: 'Header Test',
-      },
+      'has-static-classnames': [
+        {
+          props: { header: 'Header Test', action: 'Action Test' },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap b/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap
index e69c93adfd1a18..de76808005741d 100644
--- a/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap
+++ b/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap
@@ -13,8 +13,16 @@ exports[`CardHeader renders a default state 1`] = `
     <div
       class="fui-CardHeader__content"
     >
-      Title slot
-      Description slot
+      <span
+        class="fui-CardHeader__header"
+      >
+        Title slot
+      </span>
+      <span
+        class="fui-CardHeader__description"
+      >
+        Description slot
+      </span>
     </div>
     <div
       class="fui-CardHeader__action"
diff --git a/packages/react-card/src/components/CardHeader/useCardHeader.ts b/packages/react-card/src/components/CardHeader/useCardHeader.ts
index a83235fddf6e15..5cd8a550874014 100644
--- a/packages/react-card/src/components/CardHeader/useCardHeader.ts
+++ b/packages/react-card/src/components/CardHeader/useCardHeader.ts
@@ -19,8 +19,8 @@ export const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HT
       root: 'div',
       image: 'div',
       content: 'div',
-      header: React.Fragment,
-      description: React.Fragment,
+      header: 'span',
+      description: 'span',
       action: 'div',
     },
 
diff --git a/packages/react-card/src/components/CardPreview/CardPreview.test.tsx b/packages/react-card/src/components/CardPreview/CardPreview.test.tsx
index ebdd6e2fe68cb5..4aa45bb0642c3a 100644
--- a/packages/react-card/src/components/CardPreview/CardPreview.test.tsx
+++ b/packages/react-card/src/components/CardPreview/CardPreview.test.tsx
@@ -8,9 +8,11 @@ describe('CardPreview', () => {
     Component: CardPreview,
     displayName: 'CardPreview',
     testOptions: {
-      'has-static-classnames': {
-        logo: 'Test Logo',
-      },
+      'has-static-classnames': [
+        {
+          props: { logo: 'Test Logo' },
+        },
+      ],
     },
   });
 

From 048341c9aff898fa738cc6e9f83648f651aeb036 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 17:13:49 -0800
Subject: [PATCH 030/173] Update class names conformance tests to support
 variants

Updates the configuration for all test cases that pass
testOptions['has-static-classnames'] to support to updated signature
for test variants.
---
 .../src/components/Badge/Badge.test.tsx        |  8 +++++---
 .../CounterBadge/CounterBadge.test.tsx         |  8 +++++---
 .../src/components/Checkbox/Checkbox.test.tsx  |  8 +++++---
 .../src/components/Divider/Divider.test.tsx    |  8 +++++---
 .../src/components/Input/Input.test.tsx        | 12 ++++++++----
 .../src/components/Label/Label.test.tsx        |  8 +++++---
 .../src/components/MenuItem/MenuItem.test.tsx  | 18 +++++++++++-------
 .../MenuItemCheckbox/MenuItemCheckbox.test.tsx | 18 +++++++++++-------
 .../MenuItemRadio/MenuItemRadio.test.tsx       | 18 +++++++++++-------
 .../src/components/Radio/Radio.test.tsx        | 14 ++++++++------
 .../react-tabs/src/components/Tab/Tab.test.tsx | 10 +++++++---
 11 files changed, 81 insertions(+), 49 deletions(-)

diff --git a/packages/react-badge/src/components/Badge/Badge.test.tsx b/packages/react-badge/src/components/Badge/Badge.test.tsx
index aaee966bd55ba5..e5195b010141f4 100644
--- a/packages/react-badge/src/components/Badge/Badge.test.tsx
+++ b/packages/react-badge/src/components/Badge/Badge.test.tsx
@@ -9,9 +9,11 @@ describe('Badge', () => {
     Component: Badge,
     displayName: 'Badge',
     testOptions: {
-      'has-static-classnames': {
-        icon: 'Test Icon',
-      },
+      'has-static-classnames': [
+        {
+          props: { icon: 'Test Icon' },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx b/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
index 0979f4d65c2149..b5dfdcfdae22f9 100644
--- a/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
+++ b/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
@@ -9,9 +9,11 @@ describe('CounterBadge', () => {
     Component: CounterBadge,
     displayName: 'CounterBadge',
     testOptions: {
-      'has-static-classnames': {
-        icon: 'Test Icon',
-      },
+      'has-static-classnames': [
+        {
+          props: { icon: 'Test Icon' },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx b/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
index 2b42e5cf4f23f2..23312cc6231341 100644
--- a/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
+++ b/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
@@ -17,9 +17,11 @@ describe('Checkbox', () => {
     displayName: 'Checkbox',
     primarySlot: 'input',
     testOptions: {
-      'has-static-classnames': {
-        label: 'Test Label',
-      },
+      'has-static-classnames': [
+        {
+          props: { label: 'Test Label' },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-divider/src/components/Divider/Divider.test.tsx b/packages/react-divider/src/components/Divider/Divider.test.tsx
index 40f7308bc27637..cff1ab61fab56f 100644
--- a/packages/react-divider/src/components/Divider/Divider.test.tsx
+++ b/packages/react-divider/src/components/Divider/Divider.test.tsx
@@ -13,9 +13,11 @@ describe('Divider', () => {
     Component: Divider,
     displayName: 'Divider',
     testOptions: {
-      'has-static-classnames': {
-        children: 'Test Children',
-      },
+      'has-static-classnames': [
+        {
+          props: { children: 'Test Children' },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-input/src/components/Input/Input.test.tsx b/packages/react-input/src/components/Input/Input.test.tsx
index 3d6ca22e79ffce..bcbc681f988cf3 100644
--- a/packages/react-input/src/components/Input/Input.test.tsx
+++ b/packages/react-input/src/components/Input/Input.test.tsx
@@ -22,10 +22,14 @@ describe('Input', () => {
     displayName: 'Input',
     primarySlot: 'input',
     testOptions: {
-      'has-static-classnames': {
-        contentBefore: 'Test Content Before',
-        contentAfter: 'Test Content After',
-      },
+      'has-static-classnames': [
+        {
+          props: {
+            contentBefore: 'Test Content Before',
+            contentAfter: 'Test Content After',
+          },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-label/src/components/Label/Label.test.tsx b/packages/react-label/src/components/Label/Label.test.tsx
index 0f8a2e19ba1fd7..b5fd527ebb7174 100644
--- a/packages/react-label/src/components/Label/Label.test.tsx
+++ b/packages/react-label/src/components/Label/Label.test.tsx
@@ -9,9 +9,11 @@ describe('Label', () => {
     displayName: 'Label',
     requiredProps: { children: "I'm a label." },
     testOptions: {
-      'has-static-classnames': {
-        required: 'Required Test',
-      },
+      'has-static-classnames': [
+        {
+          props: { required: 'Required Test' },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx b/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
index f00d876fc7d6f8..ed5ce32d663759 100644
--- a/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
+++ b/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
@@ -15,13 +15,17 @@ describe('MenuItem', () => {
     Component: MenuItem,
     displayName: 'MenuItem',
     testOptions: {
-      'has-static-classnames': {
-        icon: 'Test Icon',
-        checkmark: 'Test Checkmark',
-        submenuIndicator: 'Test Submenu Indicator',
-        content: 'Test Content',
-        secondaryContent: 'Test Secondary Content',
-      },
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            checkmark: 'Test Checkmark',
+            submenuIndicator: 'Test Submenu Indicator',
+            content: 'Test Content',
+            secondaryContent: 'Test Secondary Content',
+          },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx b/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
index dc26e6df3f6436..bf02772003f98d 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
+++ b/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
@@ -19,13 +19,17 @@ describe('MenuItemCheckbox conformance', () => {
     },
     displayName: 'MenuItemCheckbox',
     testOptions: {
-      'has-static-classnames': {
-        icon: 'Test Icon',
-        checkmark: 'Test Checkmark',
-        submenuIndicator: 'Test Submenu Indicator',
-        content: 'Test Content',
-        secondaryContent: 'Test Secondary Content',
-      },
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            checkmark: 'Test Checkmark',
+            submenuIndicator: 'Test Submenu Indicator',
+            content: 'Test Content',
+            secondaryContent: 'Test Secondary Content',
+          },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx b/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
index 33dea95213e04b..accb416c5a2e0b 100644
--- a/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
+++ b/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
@@ -16,13 +16,17 @@ describe('MenuItemRadio', () => {
     },
     displayName: 'MenuItemRadio',
     testOptions: {
-      'has-static-classnames': {
-        icon: 'Test Icon',
-        checkmark: 'Test Checkmark',
-        submenuIndicator: 'Test Submenu Indicator',
-        content: 'Test Content',
-        secondaryContent: 'Test Secondary Content',
-      },
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            checkmark: 'Test Checkmark',
+            submenuIndicator: 'Test Submenu Indicator',
+            content: 'Test Content',
+            secondaryContent: 'Test Secondary Content',
+          },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-radio/src/components/Radio/Radio.test.tsx b/packages/react-radio/src/components/Radio/Radio.test.tsx
index 9a75446c205a33..74ef4bf469426a 100644
--- a/packages/react-radio/src/components/Radio/Radio.test.tsx
+++ b/packages/react-radio/src/components/Radio/Radio.test.tsx
@@ -9,12 +9,14 @@ describe('Radio', () => {
     displayName: 'Radio',
     primarySlot: 'input',
     testOptions: {
-      'has-static-classnames': {
-        label: 'Test Label',
-      },
-      // TODO: https://github.com/microsoft/fluentui/issues/19618
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } as any,
+      'has-static-classnames': [
+        {
+          props: {
+            label: 'Test Label',
+          },
+        },
+      ],
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-tabs/src/components/Tab/Tab.test.tsx b/packages/react-tabs/src/components/Tab/Tab.test.tsx
index 938658b42c2158..3f6bfb2acae70e 100644
--- a/packages/react-tabs/src/components/Tab/Tab.test.tsx
+++ b/packages/react-tabs/src/components/Tab/Tab.test.tsx
@@ -11,9 +11,13 @@ describe('Tab', () => {
     Component: Tab,
     displayName: 'Tab',
     testOptions: {
-      'has-static-classnames': {
-        icon: 'Test Icon',
-      },
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+          },
+        },
+      ],
     },
   });
 

From 6578eb3df31d905afc1c2b924ff17a4f177c3be8 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 17:32:02 -0800
Subject: [PATCH 031/173] Change files

---
 ...act-accordion-9eba94d3-2e19-47a3-a9d0-cc48ad2df206.json | 7 +++++++
 ...-react-avatar-4f7f2b0d-54d5-4113-9bbe-7c20d691635a.json | 7 +++++++
 ...i-react-badge-d574f954-9c31-46a6-a984-29254808686c.json | 7 +++++++
 ...ui-react-card-a253608a-236c-41ab-b648-305d862787a2.json | 7 +++++++
 ...eact-checkbox-02b38384-f210-4273-b2a0-fca78ef978dc.json | 7 +++++++
 ...t-conformance-66c9b26c-88fa-452b-bd76-eba7eebe6afc.json | 7 +++++++
 ...react-divider-eccb2dbe-991b-47fb-b2cf-376db2c0da5f.json | 7 +++++++
 ...i-react-image-256e5bb5-ef03-4116-8a92-02679ac5b37e.json | 7 +++++++
 ...i-react-input-ea64372f-cd30-4337-9336-2473988791d7.json | 7 +++++++
 ...i-react-label-8f1d205c-9fce-47f7-952c-c39936568d0e.json | 7 +++++++
 ...ui-react-link-8b2eb91d-7d9b-4c81-b0d4-d8ad66102883.json | 7 +++++++
 ...ui-react-menu-5f561de3-9f08-4af9-847f-b71f8ced5738.json | 7 +++++++
 ...react-popover-67f4956b-5fad-4541-ba4e-8d57fe2572da.json | 7 +++++++
 ...eact-provider-15e2a87f-2928-4b21-b62c-6afe53852826.json | 7 +++++++
 ...i-react-radio-1d586bed-3d00-4981-b9e8-fa39860c705e.json | 7 +++++++
 ...ui-react-tabs-62a61da8-8630-4c2b-86db-c3ff6636b233.json | 7 +++++++
 ...ui-react-text-02cf3104-9dfc-4525-b915-b59d9cba2629.json | 7 +++++++
 ...react-tooltip-d940930a-d83b-4d4e-ba79-173148b98f87.json | 7 +++++++
 18 files changed, 126 insertions(+)
 create mode 100644 change/@fluentui-react-accordion-9eba94d3-2e19-47a3-a9d0-cc48ad2df206.json
 create mode 100644 change/@fluentui-react-avatar-4f7f2b0d-54d5-4113-9bbe-7c20d691635a.json
 create mode 100644 change/@fluentui-react-badge-d574f954-9c31-46a6-a984-29254808686c.json
 create mode 100644 change/@fluentui-react-card-a253608a-236c-41ab-b648-305d862787a2.json
 create mode 100644 change/@fluentui-react-checkbox-02b38384-f210-4273-b2a0-fca78ef978dc.json
 create mode 100644 change/@fluentui-react-conformance-66c9b26c-88fa-452b-bd76-eba7eebe6afc.json
 create mode 100644 change/@fluentui-react-divider-eccb2dbe-991b-47fb-b2cf-376db2c0da5f.json
 create mode 100644 change/@fluentui-react-image-256e5bb5-ef03-4116-8a92-02679ac5b37e.json
 create mode 100644 change/@fluentui-react-input-ea64372f-cd30-4337-9336-2473988791d7.json
 create mode 100644 change/@fluentui-react-label-8f1d205c-9fce-47f7-952c-c39936568d0e.json
 create mode 100644 change/@fluentui-react-link-8b2eb91d-7d9b-4c81-b0d4-d8ad66102883.json
 create mode 100644 change/@fluentui-react-menu-5f561de3-9f08-4af9-847f-b71f8ced5738.json
 create mode 100644 change/@fluentui-react-popover-67f4956b-5fad-4541-ba4e-8d57fe2572da.json
 create mode 100644 change/@fluentui-react-provider-15e2a87f-2928-4b21-b62c-6afe53852826.json
 create mode 100644 change/@fluentui-react-radio-1d586bed-3d00-4981-b9e8-fa39860c705e.json
 create mode 100644 change/@fluentui-react-tabs-62a61da8-8630-4c2b-86db-c3ff6636b233.json
 create mode 100644 change/@fluentui-react-text-02cf3104-9dfc-4525-b915-b59d9cba2629.json
 create mode 100644 change/@fluentui-react-tooltip-d940930a-d83b-4d4e-ba79-173148b98f87.json

diff --git a/change/@fluentui-react-accordion-9eba94d3-2e19-47a3-a9d0-cc48ad2df206.json b/change/@fluentui-react-accordion-9eba94d3-2e19-47a3-a9d0-cc48ad2df206.json
new file mode 100644
index 00000000000000..b6e184bd060594
--- /dev/null
+++ b/change/@fluentui-react-accordion-9eba94d3-2e19-47a3-a9d0-cc48ad2df206.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Accordion",
+  "packageName": "@fluentui/react-accordion",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-avatar-4f7f2b0d-54d5-4113-9bbe-7c20d691635a.json b/change/@fluentui-react-avatar-4f7f2b0d-54d5-4113-9bbe-7c20d691635a.json
new file mode 100644
index 00000000000000..67fddcef9ebc41
--- /dev/null
+++ b/change/@fluentui-react-avatar-4f7f2b0d-54d5-4113-9bbe-7c20d691635a.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Avatar",
+  "packageName": "@fluentui/react-avatar",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-badge-d574f954-9c31-46a6-a984-29254808686c.json b/change/@fluentui-react-badge-d574f954-9c31-46a6-a984-29254808686c.json
new file mode 100644
index 00000000000000..7516c29b48ea14
--- /dev/null
+++ b/change/@fluentui-react-badge-d574f954-9c31-46a6-a984-29254808686c.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Badge",
+  "packageName": "@fluentui/react-badge",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-card-a253608a-236c-41ab-b648-305d862787a2.json b/change/@fluentui-react-card-a253608a-236c-41ab-b648-305d862787a2.json
new file mode 100644
index 00000000000000..7f4e720f71de07
--- /dev/null
+++ b/change/@fluentui-react-card-a253608a-236c-41ab-b648-305d862787a2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Card",
+  "packageName": "@fluentui/react-card",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-checkbox-02b38384-f210-4273-b2a0-fca78ef978dc.json b/change/@fluentui-react-checkbox-02b38384-f210-4273-b2a0-fca78ef978dc.json
new file mode 100644
index 00000000000000..03d0ddd66055ec
--- /dev/null
+++ b/change/@fluentui-react-checkbox-02b38384-f210-4273-b2a0-fca78ef978dc.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Checkbox",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-conformance-66c9b26c-88fa-452b-bd76-eba7eebe6afc.json b/change/@fluentui-react-conformance-66c9b26c-88fa-452b-bd76-eba7eebe6afc.json
new file mode 100644
index 00000000000000..c15bbd214fcaea
--- /dev/null
+++ b/change/@fluentui-react-conformance-66c9b26c-88fa-452b-bd76-eba7eebe6afc.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add conformance tests for static classnames",
+  "packageName": "@fluentui/react-conformance",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-divider-eccb2dbe-991b-47fb-b2cf-376db2c0da5f.json b/change/@fluentui-react-divider-eccb2dbe-991b-47fb-b2cf-376db2c0da5f.json
new file mode 100644
index 00000000000000..73d619c67775a8
--- /dev/null
+++ b/change/@fluentui-react-divider-eccb2dbe-991b-47fb-b2cf-376db2c0da5f.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Divider",
+  "packageName": "@fluentui/react-divider",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-image-256e5bb5-ef03-4116-8a92-02679ac5b37e.json b/change/@fluentui-react-image-256e5bb5-ef03-4116-8a92-02679ac5b37e.json
new file mode 100644
index 00000000000000..75bf047da2a47e
--- /dev/null
+++ b/change/@fluentui-react-image-256e5bb5-ef03-4116-8a92-02679ac5b37e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Image",
+  "packageName": "@fluentui/react-image",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-input-ea64372f-cd30-4337-9336-2473988791d7.json b/change/@fluentui-react-input-ea64372f-cd30-4337-9336-2473988791d7.json
new file mode 100644
index 00000000000000..17cf95c45d1830
--- /dev/null
+++ b/change/@fluentui-react-input-ea64372f-cd30-4337-9336-2473988791d7.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Input",
+  "packageName": "@fluentui/react-input",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-label-8f1d205c-9fce-47f7-952c-c39936568d0e.json b/change/@fluentui-react-label-8f1d205c-9fce-47f7-952c-c39936568d0e.json
new file mode 100644
index 00000000000000..327f451b86d7f1
--- /dev/null
+++ b/change/@fluentui-react-label-8f1d205c-9fce-47f7-952c-c39936568d0e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Label",
+  "packageName": "@fluentui/react-label",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-link-8b2eb91d-7d9b-4c81-b0d4-d8ad66102883.json b/change/@fluentui-react-link-8b2eb91d-7d9b-4c81-b0d4-d8ad66102883.json
new file mode 100644
index 00000000000000..4aa056f0a8b411
--- /dev/null
+++ b/change/@fluentui-react-link-8b2eb91d-7d9b-4c81-b0d4-d8ad66102883.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Link",
+  "packageName": "@fluentui/react-link",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-menu-5f561de3-9f08-4af9-847f-b71f8ced5738.json b/change/@fluentui-react-menu-5f561de3-9f08-4af9-847f-b71f8ced5738.json
new file mode 100644
index 00000000000000..eabd9c58027037
--- /dev/null
+++ b/change/@fluentui-react-menu-5f561de3-9f08-4af9-847f-b71f8ced5738.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Menu",
+  "packageName": "@fluentui/react-menu",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-popover-67f4956b-5fad-4541-ba4e-8d57fe2572da.json b/change/@fluentui-react-popover-67f4956b-5fad-4541-ba4e-8d57fe2572da.json
new file mode 100644
index 00000000000000..e89a77c0df3e72
--- /dev/null
+++ b/change/@fluentui-react-popover-67f4956b-5fad-4541-ba4e-8d57fe2572da.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Popover",
+  "packageName": "@fluentui/react-popover",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-provider-15e2a87f-2928-4b21-b62c-6afe53852826.json b/change/@fluentui-react-provider-15e2a87f-2928-4b21-b62c-6afe53852826.json
new file mode 100644
index 00000000000000..4cb89972d47670
--- /dev/null
+++ b/change/@fluentui-react-provider-15e2a87f-2928-4b21-b62c-6afe53852826.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Provider",
+  "packageName": "@fluentui/react-provider",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-radio-1d586bed-3d00-4981-b9e8-fa39860c705e.json b/change/@fluentui-react-radio-1d586bed-3d00-4981-b9e8-fa39860c705e.json
new file mode 100644
index 00000000000000..9bbdbfbd0cf8ff
--- /dev/null
+++ b/change/@fluentui-react-radio-1d586bed-3d00-4981-b9e8-fa39860c705e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Deprecate static classname string for Radio.",
+  "packageName": "@fluentui/react-radio",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tabs-62a61da8-8630-4c2b-86db-c3ff6636b233.json b/change/@fluentui-react-tabs-62a61da8-8630-4c2b-86db-c3ff6636b233.json
new file mode 100644
index 00000000000000..d21595b124791d
--- /dev/null
+++ b/change/@fluentui-react-tabs-62a61da8-8630-4c2b-86db-c3ff6636b233.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Tabs",
+  "packageName": "@fluentui/react-tabs",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-text-02cf3104-9dfc-4525-b915-b59d9cba2629.json b/change/@fluentui-react-text-02cf3104-9dfc-4525-b915-b59d9cba2629.json
new file mode 100644
index 00000000000000..c136b7fc40656b
--- /dev/null
+++ b/change/@fluentui-react-text-02cf3104-9dfc-4525-b915-b59d9cba2629.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Text",
+  "packageName": "@fluentui/react-text",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tooltip-d940930a-d83b-4d4e-ba79-173148b98f87.json b/change/@fluentui-react-tooltip-d940930a-d83b-4d4e-ba79-173148b98f87.json
new file mode 100644
index 00000000000000..1ad91de3a6fe09
--- /dev/null
+++ b/change/@fluentui-react-tooltip-d940930a-d83b-4d4e-ba79-173148b98f87.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Tooltip",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

From a70226d02d7f577b8dd0127493407f92e3fde608 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Thu, 10 Mar 2022 10:05:38 -0800
Subject: [PATCH 032/173] Simplify a conformance test

Simplifies the "has static classnames in rendered component"
conformance test, eliminating "expect()" and a "try/catch" block.
---
 .../react-conformance/src/defaultTests.tsx    | 23 ++++++-------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/react-conformance/src/defaultTests.tsx b/packages/react-conformance/src/defaultTests.tsx
index efc74b5c0a80ad..8ecefce9fd0fae 100644
--- a/packages/react-conformance/src/defaultTests.tsx
+++ b/packages/react-conformance/src/defaultTests.tsx
@@ -330,7 +330,6 @@ export const defaultTests: TestObject = {
         expect(classNamesFromFile).toBeTruthy();
         handledClassNamesObjectExport = true;
       } catch (e) {
-        // Need to work on this error message
         throw new Error(
           defaultErrorMessages['component-has-static-classnames-object-exported'](
             testInfo,
@@ -363,7 +362,6 @@ export const defaultTests: TestObject = {
       try {
         expect(classNamesFromFile).toEqual(expectedClassNames);
       } catch (e) {
-        // Need to work on this error message
         throw new Error(
           defaultErrorMessages['component-has-static-classnames-in-correct-format'](
             testInfo,
@@ -396,26 +394,19 @@ export const defaultTests: TestObject = {
         const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
         const classNamesFromFile = indexFile[exportName];
 
-        const missingClassNames = [];
-        let className;
-        let err: Error;
-
-        const expectedClassNames = staticClassNames.expectedClassNames ?? classNamesFromFile;
-        for (const key of Object.keys(expectedClassNames)) {
-          className = classNamesFromFile[key];
-          try {
-            expect(defaultComponent.find(`.${className}`).length).toBeGreaterThanOrEqual(1);
-          } catch (e) {
-            err = e as Error;
-            missingClassNames.push(className);
+        const expectedClassNames: { [key: string]: string } = staticClassNames.expectedClassNames ?? classNamesFromFile;
+        const missingClassNames = Object.values(expectedClassNames).reduce((acc, className) => {
+          if (defaultComponent.find(`.${className}`).length !== 1) {
+            (acc as string[]).push(className);
           }
-        }
+          return acc;
+        }, []);
 
         if (missingClassNames.length > 0) {
           throw new Error(
             defaultErrorMessages['component-has-static-classnames'](
               testInfo,
-              err!,
+              new Error(),
               componentName,
               missingClassNames.join(', '),
             ),

From 8574486efbff34fe5520ddc595d79e5fc6b7db7c Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Thu, 10 Mar 2022 10:06:21 -0800
Subject: [PATCH 033/173] Update AccordionHeader conformance test config.

Updates AccordionHeader's conformance test config to use the correct
format for classnames conformance testing.
---
 .../AccordionHeader/AccordionHeader.test.tsx           | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx b/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
index 63704ed39da3f7..92d682c8d2eb82 100644
--- a/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
+++ b/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
@@ -15,9 +15,13 @@ describe('AccordionHeader', () => {
     displayName: 'AccordionHeader',
     helperComponents: [AccordionHeaderContext.Provider],
     testOptions: {
-      'has-static-classnames': {
-        icon: 'Test Icon',
-      },
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+          },
+        },
+      ],
     },
   });
 

From 5b281cd10ceccdd5f3ee5e30f6caf6c43b1462b4 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Thu, 10 Mar 2022 16:38:41 -0800
Subject: [PATCH 034/173] Update SpinButton API md file

---
 packages/react-spinbutton/etc/react-spinbutton.api.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-spinbutton/etc/react-spinbutton.api.md b/packages/react-spinbutton/etc/react-spinbutton.api.md
index e894e07310770d..933b6a3b885511 100644
--- a/packages/react-spinbutton/etc/react-spinbutton.api.md
+++ b/packages/react-spinbutton/etc/react-spinbutton.api.md
@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const renderSpinButton_unstable: (state: SpinButtonState) => JSX.Element;
@@ -21,9 +22,12 @@ export type SpinButtonChangeData = {
     value: number;
 };
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const spinButtonClassName = "fui-SpinButton";
 
+// @public (undocumented)
+export const spinButtonClassNames: SlotClassNames<SpinButtonSlots>;
+
 // @public (undocumented)
 export type SpinButtonCommons = {
     defaultValue: number;

From 893603974314d739179611ae58ca0d586da281e6 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 11 Mar 2022 15:38:04 -0800
Subject: [PATCH 035/173] Update react-select API.

---
 packages/react-select/etc/react-select.api.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-select/etc/react-select.api.md b/packages/react-select/etc/react-select.api.md
index b8e56c944522eb..4954fbbf297915 100644
--- a/packages/react-select/etc/react-select.api.md
+++ b/packages/react-select/etc/react-select.api.md
@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const renderSelect_unstable: (state: SelectState) => JSX.Element;
@@ -16,9 +17,12 @@ export const renderSelect_unstable: (state: SelectState) => JSX.Element;
 // @public
 export const Select: ForwardRefComponent<SelectProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const selectClassName = "fui-Select";
 
+// @public (undocumented)
+export const selectClassNames: SlotClassNames<SelectSlots>;
+
 // @public (undocumented)
 export interface SelectCommons {
     appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';

From 4b1b1412e1e3955d8a671799152d718140d55558 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 09:38:48 -0700
Subject: [PATCH 036/173] Add deprecation messages to react-accordion

Adds a helpful message for the deprecated <Component>Classname
property.
---
 .../etc/react-accordion.api.md                | 21 +++++++++++++++----
 .../Accordion/useAccordionStyles.ts           |  2 +-
 .../useAccordionHeaderStyles.ts               |  2 +-
 .../AccordionItem/useAccordionItemStyles.ts   |  2 +-
 .../AccordionPanel/useAccordionPanelStyles.ts |  2 +-
 5 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/react-accordion/etc/react-accordion.api.md b/packages/react-accordion/etc/react-accordion.api.md
index 84e6fa46b47e8f..c7c1bb26f92192 100644
--- a/packages/react-accordion/etc/react-accordion.api.md
+++ b/packages/react-accordion/etc/react-accordion.api.md
@@ -11,13 +11,17 @@ import type { Context } from '@fluentui/react-context-selector';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Accordion: ForwardRefComponent<AccordionProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const accordionClassName = "fui-Accordion";
 
+// @public (undocumented)
+export const accordionClassNames: SlotClassNames<AccordionSlots>;
+
 // @public (undocumented)
 export const AccordionContext: Context<AccordionContextValue>;
 
@@ -37,9 +41,12 @@ export type AccordionContextValues = {
 // @public
 export const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const accordionHeaderClassName = "fui-AccordionHeader";
 
+// @public (undocumented)
+export const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots>;
+
 // @public (undocumented)
 export type AccordionHeaderContextValue = {
     disabled: boolean;
@@ -81,9 +88,12 @@ export type AccordionIndex = number | number[];
 // @public
 export const AccordionItem: ForwardRefComponent<AccordionItemProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const accordionItemClassName = "fui-AccordionItem";
 
+// @public (undocumented)
+export const accordionItemClassNames: SlotClassNames<AccordionItemSlots>;
+
 // @public (undocumented)
 export const AccordionItemContext: React_2.Context<AccordionItemContextValue>;
 
@@ -117,9 +127,12 @@ export type AccordionItemValue = unknown;
 // @public
 export const AccordionPanel: ForwardRefComponent<AccordionPanelProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const accordionPanelClassName = "fui-AccordionPanel";
 
+// @public (undocumented)
+export const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots>;
+
 // @public (undocumented)
 export type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
 
diff --git a/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts b/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
index 6a5250e01fe520..c253b7848b6586 100644
--- a/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
+++ b/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
@@ -3,7 +3,7 @@ import { mergeClasses } from '@griffel/react';
 import type { AccordionSlots, AccordionState } from './Accordion.types';
 
 /**
- * @deprecated
+ * @deprecated Use `accordionClassNames.root` instead.
  */
 export const accordionClassName = 'fui-Accordion';
 export const accordionClassNames: SlotClassNames<AccordionSlots> = {
diff --git a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
index 3f4e200929f021..0b24e1ea680b63 100644
--- a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
+++ b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
@@ -5,7 +5,7 @@ import type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHead
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `accordionHeaderClassNames.root` instead.
  */
 export const accordionHeaderClassName = 'fui-AccordionHeader';
 export const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots> = {
diff --git a/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts b/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
index 8159d53d5777e3..5e0485979ff837 100644
--- a/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
+++ b/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
@@ -3,7 +3,7 @@ import { mergeClasses } from '@griffel/react';
 import type { AccordionItemSlots, AccordionItemState } from './AccordionItem.types';
 
 /**
- * @deprecated
+ * @deprecated Use `accordionItemClassNames.root` instead.
  */
 export const accordionItemClassName = 'fui-AccordionItem';
 export const accordionItemClassNames: SlotClassNames<AccordionItemSlots> = {
diff --git a/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts b/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
index 4a78c7a14f80d7..64de1916aca095 100644
--- a/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
+++ b/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';
 
 /**
- * @deprecated
+ * @deprecated Use `accordionPanelClassNames.root` instead.
  */
 export const accordionPanelClassName = 'fui-AccordionPanel';
 export const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots> = {

From f6eeda1d9fc0b05bdac6342b1674d228818e5e30 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 09:41:24 -0700
Subject: [PATCH 037/173] Add deprecation messages to react-avatar

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-avatar/etc/react-avatar.api.md               | 6 +++++-
 .../react-avatar/src/components/Avatar/useAvatarStyles.ts   | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-avatar/etc/react-avatar.api.md b/packages/react-avatar/etc/react-avatar.api.md
index cecc69d9945642..e6b23bd4f7d35b 100644
--- a/packages/react-avatar/etc/react-avatar.api.md
+++ b/packages/react-avatar/etc/react-avatar.api.md
@@ -10,13 +10,17 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { PresenceBadge } from '@fluentui/react-badge';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public (undocumented)
 export const Avatar: ForwardRefComponent<AvatarProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const avatarClassName = "fui-Avatar";
 
+// @public (undocumented)
+export const avatarClassNames: SlotClassNames<AvatarSlots>;
+
 // @public
 export type AvatarNamedColor = 'darkRed' | 'cranberry' | 'red' | 'pumpkin' | 'peach' | 'marigold' | 'gold' | 'brass' | 'brown' | 'forest' | 'seafoam' | 'darkGreen' | 'lightTeal' | 'teal' | 'steel' | 'blue' | 'royalBlue' | 'cornflower' | 'navy' | 'lavender' | 'purple' | 'grape' | 'lilac' | 'pink' | 'magenta' | 'plum' | 'beige' | 'mink' | 'platinum' | 'anchor';
 
diff --git a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
index c05f547636ddc5..86b264ce1c1f81 100644
--- a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
+++ b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
@@ -4,7 +4,7 @@ import type { AvatarSlots, AvatarState } from './Avatar.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `avatarClassNames.root` instead.
  */
 export const avatarClassName = 'fui-Avatar';
 export const avatarClassNames: SlotClassNames<AvatarSlots> = {

From 6e7b177a6ca94d465fbf7f5494a7ff1519995b55 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:08:00 -0700
Subject: [PATCH 038/173] Add deprecation messages to react-badge

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-badge/etc/react-badge.api.md      | 16 +++++++++++++---
 .../src/components/Badge/useBadgeStyles.ts       |  2 +-
 .../CounterBadge/useCounterBadgeStyles.ts        |  2 +-
 .../PresenceBadge/usePresenceBadgeStyles.ts      |  2 +-
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/react-badge/etc/react-badge.api.md b/packages/react-badge/etc/react-badge.api.md
index ba1ab8ae07cd0b..6fd232a8e68e87 100644
--- a/packages/react-badge/etc/react-badge.api.md
+++ b/packages/react-badge/etc/react-badge.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Badge: ForwardRefComponent<BadgeProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const badgeClassName = "fui-Badge";
 
+// @public (undocumented)
+export const badgeClassNames: SlotClassNames<BadgeSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "BadgeCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -33,9 +37,12 @@ export type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;
 // @public
 export const CounterBadge: ForwardRefComponent<CounterBadgeProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const counterBadgeClassName = "fui-CounterBadge";
 
+// @public (undocumented)
+export const counterBadgeClassNames: SlotClassNames<BadgeSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "CounterBadgeCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -47,9 +54,12 @@ export type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape' | 'color
 // @public
 export const PresenceBadge: ForwardRefComponent<PresenceBadgeProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const presenceBadgeClassName = "fui-PresenceBadge";
 
+// @public (undocumented)
+export const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "PresenceBadgeCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
diff --git a/packages/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
index 926eee830d4242..1359edd6a02835 100644
--- a/packages/react-badge/src/components/Badge/useBadgeStyles.ts
+++ b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
@@ -4,7 +4,7 @@ import type { BadgeSlots, BadgeState } from './Badge.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `badgeClassNames.root` instead.
  */
 export const badgeClassName = 'fui-Badge';
 export const badgeClassNames: SlotClassNames<BadgeSlots> = {
diff --git a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
index 5db456cce63704..32dcb344411b2b 100644
--- a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
+++ b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
@@ -5,7 +5,7 @@ import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';
 import type { CounterBadgeState } from './CounterBadge.types';
 
 /**
- * @deprecated
+ * @deprecated Use `counterBadgeClassNames.root` instead.
  */
 export const counterBadgeClassName = 'fui-CounterBadge';
 export const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {
diff --git a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
index a5e5b7b785aecd..8b0c6a70627af2 100644
--- a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
+++ b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
@@ -5,7 +5,7 @@ import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { BadgeSlots } from '../Badge/Badge.types';
 
 /**
- * @deprecated
+ * @deprecated Use `presenceBadgeClassNames.root` instead.
  */
 export const presenceBadgeClassName = 'fui-PresenceBadge';
 export const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {

From 9b0dc5f6b6e41c417f52c73c18c6ecf15b9178e2 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:11:33 -0700
Subject: [PATCH 039/173] Add deprecation messages to react-button

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-button/etc/react-button.api.md          | 10 +++++-----
 .../src/components/Button/useButtonStyles.ts           |  5 +++--
 .../CompoundButton/useCompoundButtonStyles.ts          |  4 +++-
 .../src/components/MenuButton/useMenuButtonStyles.ts   |  4 +++-
 .../src/components/SplitButton/useSplitButtonStyles.ts |  4 +++-
 .../components/ToggleButton/useToggleButtonStyles.ts   |  4 +++-
 6 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/react-button/etc/react-button.api.md b/packages/react-button/etc/react-button.api.md
index 4de468a00f3ece..39a9a0b032c6ee 100644
--- a/packages/react-button/etc/react-button.api.md
+++ b/packages/react-button/etc/react-button.api.md
@@ -15,7 +15,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Button: ForwardRefComponent<ButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const buttonClassName: string;
 
 // @public (undocumented)
@@ -40,7 +40,7 @@ export type ButtonState = ComponentState<ButtonSlots> & ButtonCommons & {
 // @public
 export const CompoundButton: ForwardRefComponent<CompoundButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const compoundButtonClassName: string;
 
 // @public (undocumented)
@@ -61,7 +61,7 @@ export type CompoundButtonState = ComponentState<CompoundButtonSlots> & Omit<But
 // @public
 export const MenuButton: ForwardRefComponent<MenuButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuButtonClassName: string;
 
 // @public (undocumented)
@@ -95,7 +95,7 @@ export const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Elemen
 // @public
 export const SplitButton: ForwardRefComponent<SplitButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const splitButtonClassName: string;
 
 // @public (undocumented)
@@ -117,7 +117,7 @@ export type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<ButtonSta
 // @public
 export const ToggleButton: ForwardRefComponent<ToggleButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const toggleButtonClassName: string;
 
 // @public (undocumented)
diff --git a/packages/react-button/src/components/Button/useButtonStyles.ts b/packages/react-button/src/components/Button/useButtonStyles.ts
index a99ec843b1491e..ea00b3eaba6c7a 100644
--- a/packages/react-button/src/components/Button/useButtonStyles.ts
+++ b/packages/react-button/src/components/Button/useButtonStyles.ts
@@ -8,8 +8,9 @@ export const buttonClassNames: SlotClassNames<ButtonSlots> = {
   root: 'fui-Button',
   icon: 'fui-Button__icon',
 };
-
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `buttonClassNames.root` instead.
+ */
 export const buttonClassName = buttonClassNames.root;
 
 const useRootStyles = makeStyles({
diff --git a/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts b/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
index 53b6d18ee4afac..e0611b3df54324 100644
--- a/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
+++ b/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
@@ -11,7 +11,9 @@ export const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {
   secondaryContent: 'fui-CompoundButton__secondaryContent',
 };
 
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `compoundButtonClassName.root` instead.
+ */
 export const compoundButtonClassName = compoundButtonClassNames.root;
 
 const useRootStyles = makeStyles({
diff --git a/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts b/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
index 4210ca3df4b52e..eca7fab544379a 100644
--- a/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
+++ b/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
@@ -10,7 +10,9 @@ export const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {
   menuIcon: 'fui-MenuButton__menuIcon',
 };
 
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `menuButtonClassName.root` instead.
+ */
 export const menuButtonClassName = menuButtonClassNames.root;
 
 const useMenuIconStyles = makeStyles({
diff --git a/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts b/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts
index 48476cad3633a8..e240bc8a6da41a 100644
--- a/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts
+++ b/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts
@@ -10,7 +10,9 @@ export const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {
   primaryActionButton: 'fui-SplitButton__primaryActionButton',
 };
 
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `splitButtonClassName.root` instead.
+ */
 export const splitButtonClassName = splitButtonClassNames.root;
 
 const useFocusStyles = makeStyles({
diff --git a/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts b/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
index be2c9536d80a90..b3450b33538935 100644
--- a/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
+++ b/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
@@ -10,7 +10,9 @@ export const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {
   icon: 'fui-ToggleButton__icon',
 };
 
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `toggleButtonClassName.root` instead.
+ */
 export const toggleButtonClassName = toggleButtonClassNames.root;
 
 const useCheckedStyles = makeStyles({

From b17370949ebeb2e726937b635545824ece6131cc Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:13:10 -0700
Subject: [PATCH 040/173] Add deprecation messages to react-card

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-card/etc/react-card.api.md     | 21 +++++++++++++++----
 .../src/components/Card/useCardStyles.ts      |  2 +-
 .../CardFooter/useCardFooterStyles.ts         |  2 +-
 .../CardHeader/useCardHeaderStyles.ts         |  2 +-
 .../CardPreview/useCardPreviewStyles.ts       |  2 +-
 5 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/react-card/etc/react-card.api.md b/packages/react-card/etc/react-card.api.md
index 9a3b2e74b4bfec..571e1c8bf5e472 100644
--- a/packages/react-card/etc/react-card.api.md
+++ b/packages/react-card/etc/react-card.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Card: ForwardRefComponent<CardProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const cardClassName = "fui-Card";
 
+// @public (undocumented)
+export const cardClassNames: SlotClassNames<CardSlots>;
+
 // @public (undocumented)
 export type CardCommons = {
     appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
@@ -24,9 +28,12 @@ export type CardCommons = {
 // @public
 export const CardFooter: ForwardRefComponent<CardFooterProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const cardFooterClassName = "fui-CardFooter";
 
+// @public (undocumented)
+export const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
+
 // @public
 export type CardFooterProps = ComponentProps<CardFooterSlots>;
 
@@ -42,9 +49,12 @@ export type CardFooterState = ComponentState<CardFooterSlots>;
 // @public
 export const CardHeader: ForwardRefComponent<CardHeaderProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const cardHeaderClassName = "fui-CardHeader";
 
+// @public (undocumented)
+export const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
+
 // @public
 export type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;
 
@@ -64,9 +74,12 @@ export type CardHeaderState = ComponentState<CardHeaderSlots>;
 // @public
 export const CardPreview: ForwardRefComponent<CardPreviewProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const cardPreviewClassName = "fui-CardPreview";
 
+// @public (undocumented)
+export const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
+
 // @public
 export type CardPreviewProps = ComponentProps<CardPreviewSlots>;
 
diff --git a/packages/react-card/src/components/Card/useCardStyles.ts b/packages/react-card/src/components/Card/useCardStyles.ts
index 54fe72d5b418b3..07fd9d34959912 100644
--- a/packages/react-card/src/components/Card/useCardStyles.ts
+++ b/packages/react-card/src/components/Card/useCardStyles.ts
@@ -5,7 +5,7 @@ import type { CardSlots, CardState } from './Card.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `cardClassNames.root` instead.
  */
 export const cardClassName = 'fui-Card';
 export const cardClassNames: SlotClassNames<CardSlots> = {
diff --git a/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts b/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
index edb09fb50d7cc4..b936a25788c6d3 100644
--- a/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
+++ b/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { CardFooterSlots, CardFooterState } from './CardFooter.types';
 
 /**
- * @deprecated
+ * @deprecated Use `cardFooterClassNames.root` instead.
  */
 export const cardFooterClassName = 'fui-CardFooter';
 export const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {
diff --git a/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts b/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
index c1d30d319c6b18..5bfd94328e9c08 100644
--- a/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
+++ b/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
 
 /**
- * @deprecated
+ * @deprecated Use `cardHeaderClassNames.root` instead.
  */
 export const cardHeaderClassName = 'fui-CardHeader';
 export const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {
diff --git a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
index 1b97bd74b78fd2..2ec71689beaedc 100644
--- a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
+++ b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
 
 /**
- * @deprecated
+ * @deprecated Use `cardPreviewClassNames.root` instead.
  */
 export const cardPreviewClassName = 'fui-CardPreview';
 export const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {

From 6caeb80903f02c5d89e5e4d1bc2627b6e3db1c89 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:15:51 -0700
Subject: [PATCH 041/173] Add deprecation messages to react-checkbox

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-checkbox/etc/react-checkbox.api.md           | 6 +++++-
 .../src/components/Checkbox/useCheckboxStyles.ts            | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-checkbox/etc/react-checkbox.api.md b/packages/react-checkbox/etc/react-checkbox.api.md
index a850a7734cfa17..ee714b9a5b1adc 100644
--- a/packages/react-checkbox/etc/react-checkbox.api.md
+++ b/packages/react-checkbox/etc/react-checkbox.api.md
@@ -10,13 +10,17 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
 import { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Checkbox: ForwardRefComponent<CheckboxProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const checkboxClassName = "fui-Checkbox";
 
+// @public (undocumented)
+export const checkboxClassNames: SlotClassNames<CheckboxSlots>;
+
 // @public
 export interface CheckboxOnChangeData {
     // (undocumented)
diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
index 1c0f5a1070606b..8f1bc1a14c6c23 100644
--- a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
+++ b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
@@ -5,7 +5,7 @@ import { CheckboxSlots, CheckboxState } from './Checkbox.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `checkboxClassNames.root` instead.
  */
 export const checkboxClassName = 'fui-Checkbox';
 export const checkboxClassNames: SlotClassNames<CheckboxSlots> = {

From f6096a6ba29b6a6ce430c66b8ad61e9e46b02ca8 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:18:27 -0700
Subject: [PATCH 042/173] Add deprecation messages to react-combobox

Adds a helpful message for the deprecated <Component>Classname
property.
---
 .../react-combobox/etc/react-combobox.api.md  | 26 +++++++++++++++----
 .../ComboButton/useComboButtonStyles.ts       |  2 +-
 .../components/Combobox/useComboboxStyles.ts  |  2 +-
 .../components/Listbox/useListboxStyles.ts    |  2 +-
 .../src/components/Option/useOptionStyles.ts  |  2 +-
 .../OptionGroup/useOptionGroupStyles.ts       |  2 +-
 6 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/react-combobox/etc/react-combobox.api.md b/packages/react-combobox/etc/react-combobox.api.md
index 7599c05342ca6a..a813af1f6d3a39 100644
--- a/packages/react-combobox/etc/react-combobox.api.md
+++ b/packages/react-combobox/etc/react-combobox.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Combobox: ForwardRefComponent<ComboboxProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const comboboxClassName = "fui-Combobox";
 
+// @public (undocumented)
+export const comboboxClassNames: SlotClassNames<ComboboxSlots>;
+
 // @public (undocumented)
 export type ComboboxCommons = {};
 
@@ -33,9 +37,12 @@ export type ComboboxState = ComponentState<ComboboxSlots> & ComboboxCommons;
 // @public
 export const ComboButton: ForwardRefComponent<ComboButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const comboButtonClassName = "fui-ComboButton";
 
+// @public (undocumented)
+export const comboButtonClassNames: SlotClassNames<ComboButtonSlots>;
+
 // @public (undocumented)
 export type ComboButtonCommons = {};
 
@@ -53,9 +60,12 @@ export type ComboButtonState = ComponentState<ComboButtonSlots> & ComboButtonCom
 // @public
 export const Listbox: ForwardRefComponent<ListboxProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const listboxClassName = "fui-Listbox";
 
+// @public (undocumented)
+export const listboxClassNames: SlotClassNames<ListboxSlots>;
+
 // @public (undocumented)
 export type ListboxCommons = {};
 
@@ -74,18 +84,24 @@ export type ListboxState = ComponentState<ListboxSlots> & ListboxCommons;
 const Option_2: ForwardRefComponent<OptionProps>;
 export { Option_2 as Option }
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const optionClassName = "fui-Option";
 
+// @public (undocumented)
+export const optionClassNames: SlotClassNames<OptionSlots>;
+
 // @public (undocumented)
 export type OptionCommons = {};
 
 // @public
 export const OptionGroup: ForwardRefComponent<OptionGroupProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const optionGroupClassName = "fui-OptionGroup";
 
+// @public (undocumented)
+export const optionGroupClassNames: SlotClassNames<OptionGroupSlots>;
+
 // @public (undocumented)
 export type OptionGroupCommons = {};
 
diff --git a/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts b/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
index b47f2289699402..53a51150e9fe20 100644
--- a/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
+++ b/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { ComboButtonSlots, ComboButtonState } from './ComboButton.types';
 
 /**
- * @deprecated
+ * @deprecated Use `comboButtonClassNames.root` instead.
  */
 export const comboButtonClassName = 'fui-ComboButton';
 export const comboButtonClassNames: SlotClassNames<ComboButtonSlots> = {
diff --git a/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts b/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts
index 2f076be2990dbe..65ebd997522e5f 100644
--- a/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts
+++ b/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { ComboboxSlots, ComboboxState } from './Combobox.types';
 
 /**
- * @deprecated
+ * @deprecated Use `comboboxClassNames.root` instead.
  */
 export const comboboxClassName = 'fui-Combobox';
 export const comboboxClassNames: SlotClassNames<ComboboxSlots> = {
diff --git a/packages/react-combobox/src/components/Listbox/useListboxStyles.ts b/packages/react-combobox/src/components/Listbox/useListboxStyles.ts
index ecdb5c926b2030..9785f9666cb4bb 100644
--- a/packages/react-combobox/src/components/Listbox/useListboxStyles.ts
+++ b/packages/react-combobox/src/components/Listbox/useListboxStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { ListboxSlots, ListboxState } from './Listbox.types';
 
 /**
- * @deprecated
+ * @deprecated Use `listboxClassNames.root` instead.
  */
 export const listboxClassName = 'fui-Listbox';
 export const listboxClassNames: SlotClassNames<ListboxSlots> = {
diff --git a/packages/react-combobox/src/components/Option/useOptionStyles.ts b/packages/react-combobox/src/components/Option/useOptionStyles.ts
index 20b62ad55c5e82..aaa8e4ce754d2a 100644
--- a/packages/react-combobox/src/components/Option/useOptionStyles.ts
+++ b/packages/react-combobox/src/components/Option/useOptionStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { OptionSlots, OptionState } from './Option.types';
 
 /**
- * @deprecated
+ * @deprecated Use `optionClassNames.root` instead.
  */
 export const optionClassName = 'fui-Option';
 export const optionClassNames: SlotClassNames<OptionSlots> = {
diff --git a/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts b/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts
index 5d160e97e8f65c..2d89b7a66344b7 100644
--- a/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts
+++ b/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';
 
 /**
- * @deprecated
+ * @deprecated Use `optionGroupClassNames.root` instead.
  */
 export const optionGroupClassName = 'fui-OptionGroup';
 export const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {

From be0200d2a632eef47ec7888590fe984a99888a90 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:19:50 -0700
Subject: [PATCH 043/173] Add deprecation messages to react-dialog

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-dialog/etc/react-dialog.api.md               | 6 +++++-
 .../react-dialog/src/components/Dialog/useDialogStyles.ts   | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-dialog/etc/react-dialog.api.md b/packages/react-dialog/etc/react-dialog.api.md
index 6a9aeb0eb6888b..e0dbd85ca594e4 100644
--- a/packages/react-dialog/etc/react-dialog.api.md
+++ b/packages/react-dialog/etc/react-dialog.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Dialog: ForwardRefComponent<DialogProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const dialogClassName = "fui-Dialog";
 
+// @public (undocumented)
+export const dialogClassNames: SlotClassNames<DialogSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "DialogCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
diff --git a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
index 4ea61edb04c9ed..3edacbfd0c6f0d 100644
--- a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
+++ b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { DialogSlots, DialogState } from './Dialog.types';
 
 /**
- * @deprecated
+ * @deprecated Use `dialogClassNames.root` instead.
  */
 export const dialogClassName = 'fui-Dialog';
 export const dialogClassNames: SlotClassNames<DialogSlots> = {

From c5ae68cdeb6b47454e8207ac6e7ef8da8d8a2ddf Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:21:00 -0700
Subject: [PATCH 044/173] Add deprecation messages to react-divider

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-divider/etc/react-divider.api.md             | 6 +++++-
 .../src/components/Divider/useDividerStyles.ts              | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-divider/etc/react-divider.api.md b/packages/react-divider/etc/react-divider.api.md
index 1aa8cfb274176c..d2b9b51e551627 100644
--- a/packages/react-divider/etc/react-divider.api.md
+++ b/packages/react-divider/etc/react-divider.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Divider: ForwardRefComponent<DividerProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const dividerClassName = "fui-Divider";
 
+// @public (undocumented)
+export const dividerClassNames: SlotClassNames<DividerSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "DividerCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
diff --git a/packages/react-divider/src/components/Divider/useDividerStyles.ts b/packages/react-divider/src/components/Divider/useDividerStyles.ts
index ee1ff86fcbb1f3..367f0bee1c0580 100644
--- a/packages/react-divider/src/components/Divider/useDividerStyles.ts
+++ b/packages/react-divider/src/components/Divider/useDividerStyles.ts
@@ -4,7 +4,7 @@ import { DividerSlots, DividerState } from './Divider.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `dividerClassNames.root` instead.
  */
 export const dividerClassName = 'fui-Divider';
 export const dividerClassNames: SlotClassNames<DividerSlots> = {

From e97199e0d5deee6d6cbae14d4ace3a1c33ab2f24 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:22:25 -0700
Subject: [PATCH 045/173] Add deprecation messages to react-image

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-image/etc/react-image.api.md                 | 6 +++++-
 packages/react-image/src/components/Image/useImageStyles.ts | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-image/etc/react-image.api.md b/packages/react-image/etc/react-image.api.md
index 625c4e7e4d1ba6..3b8aa1e1fb35e1 100644
--- a/packages/react-image/etc/react-image.api.md
+++ b/packages/react-image/etc/react-image.api.md
@@ -9,14 +9,18 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 const Image_2: ForwardRefComponent<ImageProps>;
 export { Image_2 as Image }
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const imageClassName = "fui-Image";
 
+// @public (undocumented)
+export const imageClassNames: SlotClassNames<ImageSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "ImageCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
diff --git a/packages/react-image/src/components/Image/useImageStyles.ts b/packages/react-image/src/components/Image/useImageStyles.ts
index f56812b42500a9..dac335bbbf61ab 100644
--- a/packages/react-image/src/components/Image/useImageStyles.ts
+++ b/packages/react-image/src/components/Image/useImageStyles.ts
@@ -4,7 +4,7 @@ import type { ImageSlots, ImageState } from './Image.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `imageClassNames.root` instead.
  */
 export const imageClassName = 'fui-Image';
 export const imageClassNames: SlotClassNames<ImageSlots> = {

From af3a0a5a0eaa5d90ed2707d42303cd38bdbc7028 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:23:40 -0700
Subject: [PATCH 046/173] Add deprecation messages to react-input

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-input/etc/react-input.api.md                 | 6 +++++-
 packages/react-input/src/components/Input/useInputStyles.ts | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-input/etc/react-input.api.md b/packages/react-input/etc/react-input.api.md
index fa82ff7fd1542c..9f9bd59f035c78 100644
--- a/packages/react-input/etc/react-input.api.md
+++ b/packages/react-input/etc/react-input.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Input: ForwardRefComponent<InputProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const inputClassName = "fui-Input";
 
+// @public (undocumented)
+export const inputClassNames: SlotClassNames<InputSlots>;
+
 // @public
 export type InputOnChangeData = {
     value: string;
diff --git a/packages/react-input/src/components/Input/useInputStyles.ts b/packages/react-input/src/components/Input/useInputStyles.ts
index fffc08a5872307..0d18e919ee35cd 100644
--- a/packages/react-input/src/components/Input/useInputStyles.ts
+++ b/packages/react-input/src/components/Input/useInputStyles.ts
@@ -4,7 +4,7 @@ import type { InputSlots, InputState } from './Input.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `inputClassNames.root` instead.
  */
 export const inputClassName = 'fui-Input';
 export const inputClassNames: SlotClassNames<InputSlots> = {

From 122c0ca748e9670f1e6e98fbe78cbcd18fb51165 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:24:57 -0700
Subject: [PATCH 047/173] Add deprecation messages to react-label

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-label/etc/react-label.api.md                 | 6 +++++-
 packages/react-label/src/components/Label/useLabelStyles.ts | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-label/etc/react-label.api.md b/packages/react-label/etc/react-label.api.md
index 49bb53dd54958a..633d3d35b5ec29 100644
--- a/packages/react-label/etc/react-label.api.md
+++ b/packages/react-label/etc/react-label.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Label: ForwardRefComponent<LabelProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const labelClassName = "fui-Label";
 
+// @public (undocumented)
+export const labelClassNames: SlotClassNames<LabelSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "LabelCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
diff --git a/packages/react-label/src/components/Label/useLabelStyles.ts b/packages/react-label/src/components/Label/useLabelStyles.ts
index 9ef6fa734208fe..8a8dce7b3480c8 100644
--- a/packages/react-label/src/components/Label/useLabelStyles.ts
+++ b/packages/react-label/src/components/Label/useLabelStyles.ts
@@ -4,7 +4,7 @@ import type { LabelSlots, LabelState } from './Label.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `labelClassNames.root` instead.
  */
 export const labelClassName = 'fui-Label';
 export const labelClassNames: SlotClassNames<LabelSlots> = {

From 1ac3d04698b487350f9c8b77b093b3bab3f02c8b Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:26:00 -0700
Subject: [PATCH 048/173] Add deprecation messages to react-link

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-link/etc/react-link.api.md                | 6 +++++-
 packages/react-link/src/components/Link/useLinkStyles.ts | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-link/etc/react-link.api.md b/packages/react-link/etc/react-link.api.md
index 29ccf669e35679..297388a9c60ac0 100644
--- a/packages/react-link/etc/react-link.api.md
+++ b/packages/react-link/etc/react-link.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Link: ForwardRefComponent<LinkProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const linkClassName = "fui-Link";
 
+// @public (undocumented)
+export const linkClassNames: SlotClassNames<LinkSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "LinkCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
diff --git a/packages/react-link/src/components/Link/useLinkStyles.ts b/packages/react-link/src/components/Link/useLinkStyles.ts
index b7873b5a90fb77..1d05c258d01edd 100644
--- a/packages/react-link/src/components/Link/useLinkStyles.ts
+++ b/packages/react-link/src/components/Link/useLinkStyles.ts
@@ -5,7 +5,7 @@ import type { LinkSlots, LinkState } from './Link.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `linkClassNames.root` instead.
  */
 export const linkClassName = 'fui-Link';
 export const linkClassNames: SlotClassNames<LinkSlots> = {

From 0439132b3ccdd67d0f3404854b9e10aa7f461cd2 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:29:51 -0700
Subject: [PATCH 049/173] Add deprecation messages to react-menu

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-menu/etc/react-menu.api.md     | 46 +++++++++++++++----
 .../MenuDivider/useMenuDividerStyles.ts       |  2 +-
 .../MenuGroup/useMenuGroupStyles.ts           |  2 +-
 .../useMenuGroupHeaderStyles.ts               |  2 +-
 .../components/MenuItem/useMenuItemStyles.ts  |  2 +-
 .../useMenuItemCheckboxStyles.ts              |  2 +-
 .../MenuItemRadio/useMenuItemRadioStyles.ts   |  2 +-
 .../components/MenuList/useMenuListStyles.ts  |  2 +-
 .../MenuPopover/useMenuPopoverStyles.ts       |  2 +-
 .../MenuSplitGroup/useMenuSplitGroupStyles.ts |  2 +-
 10 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/packages/react-menu/etc/react-menu.api.md b/packages/react-menu/etc/react-menu.api.md
index e0fb73d89b7d59..15973117960ad0 100644
--- a/packages/react-menu/etc/react-menu.api.md
+++ b/packages/react-menu/etc/react-menu.api.md
@@ -13,6 +13,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { usePopperMouseTarget } from '@fluentui/react-positioning';
 
 // @public
@@ -44,9 +45,12 @@ export type MenuContextValues = {
 // @public
 export const MenuDivider: ForwardRefComponent<MenuDividerProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuDividerClassName = "fui-MenuDivider";
 
+// @public (undocumented)
+export const menuDividerClassNames: SlotClassNames<MenuDividerSlots>;
+
 // @public (undocumented)
 export type MenuDividerProps = ComponentProps<MenuDividerSlots>;
 
@@ -61,9 +65,12 @@ export type MenuDividerState = ComponentState<MenuDividerSlots>;
 // @public
 export const MenuGroup: ForwardRefComponent<MenuGroupProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuGroupClassName = "fui-MenuGroup";
 
+// @public (undocumented)
+export const menuGroupClassNames: SlotClassNames<MenuGroupSlots>;
+
 // @public (undocumented)
 export const MenuGroupContextProvider: React_2.Provider<MenuGroupContextValue>;
 
@@ -80,9 +87,12 @@ export type MenuGroupContextValues = {
 // @public
 export const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuGroupHeaderClassName = "fui-MenuGroupHeader";
 
+// @public (undocumented)
+export const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots>;
+
 // @public (undocumented)
 export type MenuGroupHeaderProps = ComponentProps<MenuGroupHeaderSlots>;
 
@@ -113,18 +123,24 @@ export const MenuItem: ForwardRefComponent<MenuItemProps>;
 // @public
 export const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuItemCheckboxClassName = "fui-MenuItemCheckbox";
 
+// @public (undocumented)
+export const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
+
 // @public (undocumented)
 export type MenuItemCheckboxProps = MenuItemProps & MenuItemSelectableProps;
 
 // @public (undocumented)
 export type MenuItemCheckboxState = MenuItemState & MenuItemSelectableState;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuItemClassName = "fui-MenuItem";
 
+// @public (undocumented)
+export const menuItemClassNames: SlotClassNames<MenuItemSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "MenuItemCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -133,9 +149,12 @@ export type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & MenuItemCom
 // @public
 export const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuItemRadioClassName = "fui-MenuItemRadio";
 
+// @public (undocumented)
+export const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
+
 // @public (undocumented)
 export type MenuItemRadioProps = MenuItemProps & MenuItemSelectableProps;
 
@@ -171,9 +190,12 @@ export type MenuItemState = ComponentState<MenuItemSlots> & MenuItemCommons;
 // @public
 export const MenuList: ForwardRefComponent<MenuListProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuListClassName = "fui-MenuList";
 
+// @public (undocumented)
+export const menuListClassNames: SlotClassNames<MenuListSlots>;
+
 // @public (undocumented)
 export const MenuListContext: Context<MenuListContextValue>;
 
@@ -222,9 +244,12 @@ export type MenuOpenEvents = MouseEvent | TouchEvent | React_2.MouseEvent<HTMLEl
 // @public
 export const MenuPopover: ForwardRefComponent<MenuPopoverProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuPopoverClassName = "fui-MenuPopover";
 
+// @public (undocumented)
+export const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots>;
+
 // @public
 export type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;
 
@@ -255,9 +280,12 @@ export type MenuSlots = {};
 // @public
 export const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuSplitGroupClassName = "fui-MenuSplitGroup";
 
+// @public (undocumented)
+export const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "MenuSplitGroupCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
diff --git a/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts b/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
index 7fa2fbd0b2dd32..a8e24e011f29d4 100644
--- a/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
+++ b/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
@@ -4,7 +4,7 @@ import type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `menuDividerClassNames.root` instead.
  */
 export const menuDividerClassName = 'fui-MenuDivider';
 export const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {
diff --git a/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts b/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
index 9b33b577d14b3c..791eaa8305f86f 100644
--- a/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
+++ b/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
@@ -3,7 +3,7 @@ import { mergeClasses } from '@griffel/react';
 import type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';
 
 /**
- * @deprecated
+ * @deprecated Use `menuGroupClassNames.root` instead.
  */
 export const menuGroupClassName = 'fui-MenuGroup';
 export const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {
diff --git a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
index bbb2386a0bcf62..f730b2355ef5fe 100644
--- a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
+++ b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
@@ -4,7 +4,7 @@ import type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHead
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `menuGroupHeaderClassNames.root` instead.
  */
 export const menuGroupHeaderClassName = 'fui-MenuGroupHeader';
 export const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {
diff --git a/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts b/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
index 53c2b94ffacdd3..62ac15c996fc71 100644
--- a/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
+++ b/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
@@ -7,7 +7,7 @@ import type { MenuItemSlots, MenuItemState } from './MenuItem.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `menuItemClassNames.root` instead.
  */
 export const menuItemClassName = 'fui-MenuItem';
 export const menuItemClassNames: SlotClassNames<MenuItemSlots> = {
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
index 8866b90e2b75b5..76aec40194c0dc 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
+++ b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
@@ -6,7 +6,7 @@ import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
 import type { MenuItemCheckboxState } from './MenuItemCheckbox.types';
 
 /**
- * @deprecated
+ * @deprecated Use `menuItemCheckboxClassNames.root` instead.
  */
 export const menuItemCheckboxClassName = 'fui-MenuItemCheckbox';
 export const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {
diff --git a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
index 0caf24784dcfb6..e9cdc6f59d3808 100644
--- a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
+++ b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
@@ -6,7 +6,7 @@ import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
 import type { MenuItemRadioState } from './MenuItemRadio.types';
 
 /**
- * @deprecated
+ * @deprecated Use `menuItemRadioClassNames.root` instead.
  */
 export const menuItemRadioClassName = 'fui-MenuItemRadio';
 export const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {
diff --git a/packages/react-menu/src/components/MenuList/useMenuListStyles.ts b/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
index e4260ee8e37b44..1c2bd0b4c27e58 100644
--- a/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
+++ b/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
@@ -3,7 +3,7 @@ import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import type { MenuListSlots, MenuListState } from './MenuList.types';
 
 /**
- * @deprecated
+ * @deprecated Use `menuListClassNames.root` instead.
  */
 export const menuListClassName = 'fui-MenuList';
 export const menuListClassNames: SlotClassNames<MenuListSlots> = {
diff --git a/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts b/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
index 5eb353a0886cf8..753ab32074a95d 100644
--- a/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
+++ b/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
@@ -4,7 +4,7 @@ import type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `menuPopoverClassNames.root` instead.
  */
 export const menuPopoverClassName = 'fui-MenuPopover';
 export const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {
diff --git a/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts b/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
index c8541f0e97587a..8c070675781f81 100644
--- a/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
+++ b/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
@@ -5,7 +5,7 @@ import type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `menuSplitGroupClassNames.root` instead.
  */
 export const menuSplitGroupClassName = 'fui-MenuSplitGroup';
 export const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {

From 0f850dd30e3303fa732bc4b8254ff70b8cf2cfbf Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:31:11 -0700
Subject: [PATCH 050/173] Add deprecation messages to react-popover

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-popover/etc/react-popover.api.md             | 6 +++++-
 .../components/PopoverSurface/usePopoverSurfaceStyles.ts    | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-popover/etc/react-popover.api.md b/packages/react-popover/etc/react-popover.api.md
index f0ee08f1534ca2..2f599185c4847f 100644
--- a/packages/react-popover/etc/react-popover.api.md
+++ b/packages/react-popover/etc/react-popover.api.md
@@ -17,6 +17,7 @@ import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import type { usePopperMouseTarget } from '@fluentui/react-positioning';
 
 // @public (undocumented)
@@ -66,9 +67,12 @@ export type PopoverState = PopoverCommons & Pick<PopoverProps, 'children'> & {
 // @public
 export const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const popoverSurfaceClassName = "fui-PopoverSurface";
 
+// @public (undocumented)
+export const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
+
 // @public
 export type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;
 
diff --git a/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts b/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
index f63f704ec869ba..1b4c41fdb3a02b 100644
--- a/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
+++ b/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
@@ -6,7 +6,7 @@ import type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `popoverSurfaceClassNames.root` instead.
  */
 export const popoverSurfaceClassName = 'fui-PopoverSurface';
 export const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {

From 95d52a07df26e2adbaaec9b54a3332c5dd5cbf57 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:32:40 -0700
Subject: [PATCH 051/173] Add deprecation messages to react-provider

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-provider/etc/react-provider.api.md           | 6 +++++-
 .../components/FluentProvider/useFluentProviderStyles.ts    | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-provider/etc/react-provider.api.md b/packages/react-provider/etc/react-provider.api.md
index ea6ed20951b7a0..bc7cc67cbbb6eb 100644
--- a/packages/react-provider/etc/react-provider.api.md
+++ b/packages/react-provider/etc/react-provider.api.md
@@ -10,6 +10,7 @@ import type { PartialTheme } from '@fluentui/react-theme';
 import type { ProviderContextValue } from '@fluentui/react-shared-contexts';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 import type { Theme } from '@fluentui/react-theme';
 import type { ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
 import type { TooltipContextType } from '@fluentui/react-shared-contexts';
@@ -19,9 +20,12 @@ import { useTheme } from '@fluentui/react-shared-contexts';
 // @public (undocumented)
 export const FluentProvider: React_2.ForwardRefExoticComponent<FluentProviderProps & React_2.RefAttributes<HTMLElement>>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const fluentProviderClassName = "fui-FluentProvider";
 
+// @public (undocumented)
+export const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
+
 // @public (undocumented)
 export interface FluentProviderContextValues extends Pick<FluentProviderState, 'theme'> {
     // (undocumented)
diff --git a/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts b/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
index 006769e5a46a0a..dc94f0c32d771d 100644
--- a/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
+++ b/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
@@ -4,7 +4,7 @@ import type { FluentProviderSlots, FluentProviderState } from './FluentProvider.
 import { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
- * @deprecated
+ * @deprecated Use `fluentProviderClassNames.root` instead.
  */
 export const fluentProviderClassName = 'fui-FluentProvider';
 export const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {

From d6fde2baaaff428cb9f63edb2ce809294b6c9184 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:34:04 -0700
Subject: [PATCH 052/173] Add deprecation messages to react-radio

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-radio/etc/react-radio.api.md                 | 6 ++++++
 packages/react-radio/src/components/Radio/useRadioStyles.ts | 2 +-
 .../src/components/RadioGroup/useRadioGroupStyles.ts        | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react-radio/etc/react-radio.api.md b/packages/react-radio/etc/react-radio.api.md
index e4f6825ac2372b..53f0bae4e1df97 100644
--- a/packages/react-radio/etc/react-radio.api.md
+++ b/packages/react-radio/etc/react-radio.api.md
@@ -15,12 +15,18 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Radio: ForwardRefComponent<RadioProps>;
 
+// @public @deprecated (undocumented)
+export const radioClassName = "fui-Radio";
+
 // @public (undocumented)
 export const radioClassNames: SlotClassNames<RadioSlots>;
 
 // @public
 export const RadioGroup: ForwardRefComponent<RadioGroupProps>;
 
+// @public @deprecated (undocumented)
+export const radioGroupClassName = "fui-RadioGroup";
+
 // @public (undocumented)
 export const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
 
diff --git a/packages/react-radio/src/components/Radio/useRadioStyles.ts b/packages/react-radio/src/components/Radio/useRadioStyles.ts
index 2d3883e0390439..98744ffc323101 100644
--- a/packages/react-radio/src/components/Radio/useRadioStyles.ts
+++ b/packages/react-radio/src/components/Radio/useRadioStyles.ts
@@ -5,7 +5,7 @@ import type { RadioSlots, RadioState } from './Radio.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
- * @deprecated
+ * @deprecated Use `radioClassNames.root` instead.
  */
 export const radioClassName = 'fui-Radio';
 export const radioClassNames: SlotClassNames<RadioSlots> = {
diff --git a/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts b/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
index 2282ed1e0eca57..fd197c004dce37 100644
--- a/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
+++ b/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
@@ -3,7 +3,7 @@ import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
- * @deprecated
+ * @deprecated Use `radioGroupClassNames.root` instead.
  */
 export const radioGroupClassName = 'fui-RadioGroup';
 export const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {

From c73d27439b871c3e5f2ebe5506612fd167ecf049 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:36:01 -0700
Subject: [PATCH 053/173] Add deprecation messages to react-select

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-select/src/components/Select/useSelectStyles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-select/src/components/Select/useSelectStyles.ts b/packages/react-select/src/components/Select/useSelectStyles.ts
index a29082f8353b5c..39aad4e7f4955b 100644
--- a/packages/react-select/src/components/Select/useSelectStyles.ts
+++ b/packages/react-select/src/components/Select/useSelectStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { SelectSlots, SelectState } from './Select.types';
 
 /**
- * @deprecated
+ * @deprecated Use `selectClassNames.root` instead.
  */
 export const selectClassName = 'fui-Select';
 export const selectClassNames: SlotClassNames<SelectSlots> = {

From 84620e045d1b5c91b49e5eb49be43f0c461b988d Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:37:34 -0700
Subject: [PATCH 054/173] Add deprecation messages to react-spinbutton

Adds a helpful message for the deprecated <Component>Classname
property.
---
 .../src/components/SpinButton/useSpinButtonStyles.ts            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
index 24ab0415e1e156..08b79e0646db95 100644
--- a/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
+++ b/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';
 
 /**
- * @deprecated
+ * @deprecated Use `spinButtonClassNames.root` instead.
  */
 export const spinButtonClassName = 'fui-SpinButton';
 export const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {

From b8d7585960c667c8d8646c01cb0309e40cf3a5bd Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:38:32 -0700
Subject: [PATCH 055/173] Add deprecation messages to react-spinner

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-spinner/etc/react-spinner.api.md             | 6 +++++-
 .../src/components/Spinner/useSpinnerStyles.ts              | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-spinner/etc/react-spinner.api.md b/packages/react-spinner/etc/react-spinner.api.md
index bd1510cf09f74d..3f75a72e264fea 100644
--- a/packages/react-spinner/etc/react-spinner.api.md
+++ b/packages/react-spinner/etc/react-spinner.api.md
@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;
@@ -16,9 +17,12 @@ export const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;
 // @public
 export const Spinner: ForwardRefComponent<SpinnerProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const spinnerClassName = "fui-Spinner";
 
+// @public (undocumented)
+export const spinnerClassNames: SlotClassNames<SpinnerSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "SpinnerCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
diff --git a/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts b/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts
index f3c6b4c3cd0114..470ab188e041d4 100644
--- a/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts
+++ b/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { SpinnerSlots, SpinnerState } from './Spinner.types';
 
 /**
- * @deprecated
+ * @deprecated Use `spinnerClassNames.root` instead.
  */
 export const spinnerClassName = 'fui-Spinner';
 export const spinnerClassNames: SlotClassNames<SpinnerSlots> = {

From be59004ed96a1377087059b4cb6a5fc0f5a65117 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:40:20 -0700
Subject: [PATCH 056/173] Add deprecation messages to react-switch

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-switch/etc/react-switch.api.md                 | 2 +-
 .../react-switch/src/components/Switch/useSwitchStyles.ts     | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-switch/etc/react-switch.api.md b/packages/react-switch/etc/react-switch.api.md
index 072c1ee2d35e0f..bda4f401e6744d 100644
--- a/packages/react-switch/etc/react-switch.api.md
+++ b/packages/react-switch/etc/react-switch.api.md
@@ -18,7 +18,7 @@ export const renderSwitch_unstable: (state: SwitchState) => JSX.Element;
 // @public
 export const Switch: ForwardRefComponent<SwitchProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const switchClassName: string;
 
 // @public (undocumented)
diff --git a/packages/react-switch/src/components/Switch/useSwitchStyles.ts b/packages/react-switch/src/components/Switch/useSwitchStyles.ts
index 1526cc79a942bb..d7a2c65e9851cb 100644
--- a/packages/react-switch/src/components/Switch/useSwitchStyles.ts
+++ b/packages/react-switch/src/components/Switch/useSwitchStyles.ts
@@ -11,7 +11,9 @@ export const switchClassNames: SlotClassNames<SwitchSlots> = {
   label: 'fui-Switch__label',
 };
 
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `switchClassNames.root` instead.
+ */
 export const switchClassName = switchClassNames.root;
 
 // TODO replace these spacing constants with theme values once they're on the theme.

From b29629ad0e2e256892aa0c3fe22adfade7e37142 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:41:42 -0700
Subject: [PATCH 057/173] Add deprecation messages to react-tabs

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-tabs/etc/react-tabs.api.md           | 13 ++++++++++---
 .../react-tabs/src/components/Tab/useTabStyles.ts   |  2 +-
 .../src/components/TabList/useTabListStyles.ts      |  2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/react-tabs/etc/react-tabs.api.md b/packages/react-tabs/etc/react-tabs.api.md
index b09e22d63d4d8c..9f0f0aa7142114 100644
--- a/packages/react-tabs/etc/react-tabs.api.md
+++ b/packages/react-tabs/etc/react-tabs.api.md
@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public (undocumented)
 export const indicatorLengthVar = "--selection-indicator-length";
@@ -45,9 +46,12 @@ export type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData)
 // @public
 export const Tab: ForwardRefComponent<TabProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const tabClassName = "fui-Tab";
 
+// @public (undocumented)
+export const tabClassNames: SlotClassNames<TabSlots>;
+
 // @public
 export type TabContentRect = {
     x: number;
@@ -59,9 +63,12 @@ export type TabContentRect = {
 // @public
 export const TabList: ForwardRefComponent<TabListProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const tabListClassName = "fui-TabList";
 
+// @public (undocumented)
+export const tabListClassNames: SlotClassNames<TabListSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "TabListCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -82,7 +89,7 @@ export type TabListProps = ComponentProps<TabListSlots> & TabListCommons & {
 };
 
 // @public (undocumented)
-export const tabListSelectionIndicatorName = "fui-TabList_SelectionIndicator";
+export const tabListSelectionIndicatorName = "fui-TabList__selectionIndicator";
 
 // @public (undocumented)
 export type TabListSlots = {
diff --git a/packages/react-tabs/src/components/Tab/useTabStyles.ts b/packages/react-tabs/src/components/Tab/useTabStyles.ts
index 582ab4fadd228a..b1c12c0b38e766 100644
--- a/packages/react-tabs/src/components/Tab/useTabStyles.ts
+++ b/packages/react-tabs/src/components/Tab/useTabStyles.ts
@@ -7,7 +7,7 @@ import { tabPendingDesignTokens } from '../../tab.constants';
 import { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
- * @deprecated
+ * @deprecated Use `tabClassNames.root` instead.
  */
 export const tabClassName = 'fui-Tab';
 export const tabClassNames: SlotClassNames<TabSlots> = {
diff --git a/packages/react-tabs/src/components/TabList/useTabListStyles.ts b/packages/react-tabs/src/components/TabList/useTabListStyles.ts
index 9d7487c1cbf5b6..8bd0c4f9f626a6 100644
--- a/packages/react-tabs/src/components/TabList/useTabListStyles.ts
+++ b/packages/react-tabs/src/components/TabList/useTabListStyles.ts
@@ -5,7 +5,7 @@ import { SlotClassNames, usePrevious } from '@fluentui/react-utilities';
 import { tabPendingDesignTokens } from '../../tab.constants';
 
 /**
- * @deprecated
+ * @deprecated Use `tabListClassNames.root` instead.
  */
 export const tabListClassName = 'fui-TabList';
 export const tabListSelectionIndicatorName = 'fui-TabList__selectionIndicator';

From f8d3cc61a7ebe59270e0b8ae0844003b4ace2428 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:45:40 -0700
Subject: [PATCH 058/173] Add deprecation messages to react-text

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-text/etc/react-text.api.md     | 51 +++++++++++++++----
 .../react-text/src/components/Body/Body.tsx   |  2 +-
 .../src/components/Caption/Caption.tsx        |  2 +-
 .../src/components/Display/Display.tsx        |  2 +-
 .../src/components/Headline/Headline.tsx      |  2 +-
 .../src/components/LargeTitle/LargeTitle.tsx  |  2 +-
 .../components/Subheadline/Subheadline.tsx    |  2 +-
 .../src/components/Text/useTextStyles.ts      |  2 +-
 .../src/components/Title1/Title1.tsx          |  2 +-
 .../src/components/Title2/Title2.tsx          |  2 +-
 .../src/components/Title3/Title3.tsx          |  2 +-
 11 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/packages/react-text/etc/react-text.api.md b/packages/react-text/etc/react-text.api.md
index 20fdf0e3c8f078..f518b1856b4615 100644
--- a/packages/react-text/etc/react-text.api.md
+++ b/packages/react-text/etc/react-text.api.md
@@ -10,6 +10,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { FunctionComponent } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // Warning: (ae-forgotten-export) The symbol "TextWrapperProps" needs to be exported by the entry point index.d.ts
 //
@@ -17,49 +18,70 @@ import type { Slot } from '@fluentui/react-utilities';
 const Body_2: FunctionComponent<TextWrapperProps>;
 export { Body_2 as Body }
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const bodyClassName = "fui-Body";
 
+// @public (undocumented)
+export const bodyClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const Caption: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const captionClassName = "fui-Caption";
 
+// @public (undocumented)
+export const captionClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const Display: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const displayClassName = "fui-Display";
 
+// @public (undocumented)
+export const displayClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const Headline: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const headlineClassName = "fui-Headline";
 
+// @public (undocumented)
+export const headlineClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const LargeTitle: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const largeTitleClassName = "fui-LargeTitle";
 
+// @public (undocumented)
+export const largeTitleClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const renderText_unstable: (state: TextState) => JSX.Element;
 
 // @public
 export const Subheadline: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const subheadlineClassName = "fui-Subheadline";
 
+// @public (undocumented)
+export const subheadlineClassNames: SlotClassNames<TextSlots>;
+
 // @public
 const Text_2: ForwardRefComponent<TextProps>;
 export { Text_2 as Text }
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const textClassName = "fui-Text";
 
+// @public (undocumented)
+export const textClassNames: SlotClassNames<TextSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "TextCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
@@ -76,21 +98,30 @@ export type TextState = ComponentState<TextSlots> & TextCommons;
 // @public
 export const Title1: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const title1ClassName = "fui-Title1";
 
+// @public (undocumented)
+export const title1ClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const Title2: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const title2ClassName = "fui-Title2";
 
+// @public (undocumented)
+export const title2ClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const Title3: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const title3ClassName = "fui-Title3";
 
+// @public (undocumented)
+export const title3ClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const useText_unstable: (props: TextProps, ref: React_2.Ref<HTMLElement>) => TextState;
 
diff --git a/packages/react-text/src/components/Body/Body.tsx b/packages/react-text/src/components/Body/Body.tsx
index f631999d00eae4..defe6243fc829d 100644
--- a/packages/react-text/src/components/Body/Body.tsx
+++ b/packages/react-text/src/components/Body/Body.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `bodyClassNames.root` instead.
  */
 export const bodyClassName = 'fui-Body';
 export const bodyClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Caption/Caption.tsx b/packages/react-text/src/components/Caption/Caption.tsx
index f274b3a829650e..03e68cdea9215e 100644
--- a/packages/react-text/src/components/Caption/Caption.tsx
+++ b/packages/react-text/src/components/Caption/Caption.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `captionClassNames.root` instead.
  */
 export const captionClassName = 'fui-Caption';
 export const captionClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Display/Display.tsx b/packages/react-text/src/components/Display/Display.tsx
index ba3f335f1bc9dc..dc73db8bbcfd6d 100644
--- a/packages/react-text/src/components/Display/Display.tsx
+++ b/packages/react-text/src/components/Display/Display.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `displayClassNames.root` instead.
  */
 export const displayClassName = 'fui-Display';
 export const displayClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Headline/Headline.tsx b/packages/react-text/src/components/Headline/Headline.tsx
index bd6ded8622242e..65b9763bc80a8a 100644
--- a/packages/react-text/src/components/Headline/Headline.tsx
+++ b/packages/react-text/src/components/Headline/Headline.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `headlineClassNames.root` instead.
  */
 export const headlineClassName = 'fui-Headline';
 export const headlineClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/LargeTitle/LargeTitle.tsx b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
index d76e0b6e3978da..de030e7e0f3ef6 100644
--- a/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
+++ b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `largeTitleClassNames.root` instead.
  */
 export const largeTitleClassName = 'fui-LargeTitle';
 export const largeTitleClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Subheadline/Subheadline.tsx b/packages/react-text/src/components/Subheadline/Subheadline.tsx
index 74ad9d71e242d1..c3fa279d571acb 100644
--- a/packages/react-text/src/components/Subheadline/Subheadline.tsx
+++ b/packages/react-text/src/components/Subheadline/Subheadline.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `subheadlineClassNames.root` instead.
  */
 export const subheadlineClassName = 'fui-Subheadline';
 export const subheadlineClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Text/useTextStyles.ts b/packages/react-text/src/components/Text/useTextStyles.ts
index 50aa2a3e5c7fa2..8b58e16d1741cd 100644
--- a/packages/react-text/src/components/Text/useTextStyles.ts
+++ b/packages/react-text/src/components/Text/useTextStyles.ts
@@ -4,7 +4,7 @@ import type { TextSlots, TextState } from './Text.types';
 import { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
- * @deprecated
+ * @deprecated Use `textClassNames.root` instead.
  */
 export const textClassName = 'fui-Text';
 export const textClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Title1/Title1.tsx b/packages/react-text/src/components/Title1/Title1.tsx
index f8afdf548c5c91..0465faa4173e08 100644
--- a/packages/react-text/src/components/Title1/Title1.tsx
+++ b/packages/react-text/src/components/Title1/Title1.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `title1ClassNames.root` instead.
  */
 export const title1ClassName = 'fui-Title1';
 export const title1ClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Title2/Title2.tsx b/packages/react-text/src/components/Title2/Title2.tsx
index aa5ebcaf87583f..8c149fdcb02462 100644
--- a/packages/react-text/src/components/Title2/Title2.tsx
+++ b/packages/react-text/src/components/Title2/Title2.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `title2ClassNames.root` instead.
  */
 export const title2ClassName = 'fui-Title2';
 export const title2ClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Title3/Title3.tsx b/packages/react-text/src/components/Title3/Title3.tsx
index a1eab8207d519f..5d1660098bfa7e 100644
--- a/packages/react-text/src/components/Title3/Title3.tsx
+++ b/packages/react-text/src/components/Title3/Title3.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `title3ClassNames.root` instead.
  */
 export const title3ClassName = 'fui-Title3';
 export const title3ClassNames: SlotClassNames<TextSlots> = {

From b6841c43a51273ab978042b4baef03f4925beae7 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:48:39 -0700
Subject: [PATCH 059/173] Remove deprecated exports from Toolbar

Toolbar is not currently exported from react-components so it is
safe to just remove these exports.
---
 packages/react-toolbar/etc/react-toolbar.api.md            | 7 ++++---
 .../src/components/Toolbar/useToolbarStyles.ts             | 4 ----
 .../src/components/ToolbarButton/useToolbarButtonStyles.ts | 4 ----
 .../components/ToolbarDivider/useToolbarDividerStyles.ts   | 4 ----
 4 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/packages/react-toolbar/etc/react-toolbar.api.md b/packages/react-toolbar/etc/react-toolbar.api.md
index 5bdcd321ebc216..cd34c1cff0d1d1 100644
--- a/packages/react-toolbar/etc/react-toolbar.api.md
+++ b/packages/react-toolbar/etc/react-toolbar.api.md
@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const renderToolbar_unstable: (state: ToolbarState) => JSX.Element;
@@ -26,7 +27,7 @@ export const Toolbar: ForwardRefComponent<ToolbarProps>;
 export const ToolbarButton: ForwardRefComponent<ToolbarButtonProps>;
 
 // @public (undocumented)
-export const toolbarButtonClassName = "fui-ToolbarButton";
+export const toolbarButtonClassNames: SlotClassNames<ToolbarButtonSlots>;
 
 // Warning: (ae-forgotten-export) The symbol "ToolbarButtonCommons" needs to be exported by the entry point index.d.ts
 //
@@ -42,13 +43,13 @@ export type ToolbarButtonSlots = {
 export type ToolbarButtonState = ComponentState<ToolbarButtonSlots> & ToolbarButtonCommons;
 
 // @public (undocumented)
-export const toolbarClassName = "fui-Toolbar";
+export const toolbarClassNames: SlotClassNames<ToolbarSlots>;
 
 // @public
 export const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps>;
 
 // @public (undocumented)
-export const toolbarDividerClassName = "fui-ToolbarDivider";
+export const toolbarDividerClassNames: SlotClassNames<ToolbarDividerSlots>;
 
 // Warning: (ae-forgotten-export) The symbol "ToolbarDividerCommons" needs to be exported by the entry point index.d.ts
 //
diff --git a/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts b/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
index 075cc65e51676d..222690144b4849 100644
--- a/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
+++ b/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
@@ -2,10 +2,6 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { ToolbarSlots, ToolbarState } from './Toolbar.types';
 
-/**
- * @deprecated
- */
-export const toolbarClassName = 'fui-Toolbar';
 export const toolbarClassNames: SlotClassNames<ToolbarSlots> = {
   root: 'fui-Toolbar',
 };
diff --git a/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts b/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
index 2d67540e44e8ab..9e23b5229bfec1 100644
--- a/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
+++ b/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
@@ -2,10 +2,6 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { ToolbarButtonSlots, ToolbarButtonState } from './ToolbarButton.types';
 
-/**
- * @deprecated
- */
-export const toolbarButtonClassName = 'fui-ToolbarButton';
 export const toolbarButtonClassNames: SlotClassNames<ToolbarButtonSlots> = {
   root: 'fui-ToolbarButton',
 };
diff --git a/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts b/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
index 3bc8a6ef91b08f..d0cf33589c03e6 100644
--- a/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
+++ b/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
@@ -2,10 +2,6 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { ToolbarDividerSlots, ToolbarDividerState } from './ToolbarDivider.types';
 
-/**
- * @deprecated
- */
-export const toolbarDividerClassName = 'fui-ToolbarDivider';
 export const toolbarDividerClassNames: SlotClassNames<ToolbarDividerSlots> = {
   root: 'fui-ToolbarDivider',
 };

From e3b32889c199cc82dcfb736705a3b0c6eeb10273 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:58:33 -0700
Subject: [PATCH 060/173] Add deprecation messages to react-toolip

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-tooltip/etc/react-tooltip.api.md             | 6 +++++-
 .../src/components/Tooltip/useTooltipStyles.ts              | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react-tooltip/etc/react-tooltip.api.md b/packages/react-tooltip/etc/react-tooltip.api.md
index 995458bdd82df8..1ba194b8369a23 100644
--- a/packages/react-tooltip/etc/react-tooltip.api.md
+++ b/packages/react-tooltip/etc/react-tooltip.api.md
@@ -10,6 +10,7 @@ import type { FluentTriggerComponent } from '@fluentui/react-utilities';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export type OnVisibleChangeData = {
@@ -22,9 +23,12 @@ export const renderTooltip_unstable: (state: TooltipState) => JSX.Element;
 // @public
 export const Tooltip: React_2.FC<TooltipProps> & FluentTriggerComponent;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const tooltipClassName = "fui-Tooltip";
 
+// @public (undocumented)
+export const tooltipClassNames: SlotClassNames<TooltipSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "TooltipCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
diff --git a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
index c07e6f1accdee5..3ce1524c7dcee8 100644
--- a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
+++ b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
@@ -3,8 +3,11 @@ import { createArrowStyles } from '@fluentui/react-positioning';
 import { tokens } from '@fluentui/react-theme';
 import { arrowHeight } from './private/constants';
 import type { TooltipSlots, TooltipState } from './Tooltip.types';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `tooltipClassNames.root` instead.
+ */
 export const tooltipClassName = 'fui-Tooltip';
 export const tooltipClassNames: SlotClassNames<TooltipSlots> = {
   content: 'fui-Tooltip__content',

From 3208492fdee7e43ffe67569bcd9e14518a4d6444 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 11:02:10 -0700
Subject: [PATCH 061/173] Clean up imports

- Remove deep package imports
- Use `type` where appropriate
---
 .../src/components/Accordion/useAccordionStyles.ts              | 2 +-
 .../src/components/AccordionHeader/useAccordionHeaderStyles.ts  | 2 +-
 .../src/components/AccordionItem/useAccordionItemStyles.ts      | 2 +-
 .../src/components/AccordionPanel/useAccordionPanelStyles.ts    | 2 +-
 packages/react-avatar/src/components/Avatar/useAvatarStyles.ts  | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts b/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
index c253b7848b6586..9bdb7be9aa8f32 100644
--- a/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
+++ b/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import type { AccordionSlots, AccordionState } from './Accordion.types';
 
diff --git a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
index 0b24e1ea680b63..674deae1168417 100644
--- a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
+++ b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
@@ -2,7 +2,7 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHeader.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `accordionHeaderClassNames.root` instead.
diff --git a/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts b/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
index 5e0485979ff837..def29824f87101 100644
--- a/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
+++ b/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import type { AccordionItemSlots, AccordionItemState } from './AccordionItem.types';
 
diff --git a/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts b/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
index 64de1916aca095..b7e1d98bb25f90 100644
--- a/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
+++ b/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';
 
diff --git a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
index 86b264ce1c1f81..d7cc5365700374 100644
--- a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
+++ b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
@@ -1,7 +1,7 @@
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { AvatarSlots, AvatarState } from './Avatar.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `avatarClassNames.root` instead.

From a39973b9b11029afcfacafa0e68b9ed184337cda Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 11:16:11 -0700
Subject: [PATCH 062/173] Change files

---
 ...-react-button-bbd1cee3-fa3c-400f-b0e3-977c6a434c3b.json | 7 +++++++
 ...-react-switch-099a7ba8-9fef-494c-8383-ffac254f3526.json | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 change/@fluentui-react-button-bbd1cee3-fa3c-400f-b0e3-977c6a434c3b.json
 create mode 100644 change/@fluentui-react-switch-099a7ba8-9fef-494c-8383-ffac254f3526.json

diff --git a/change/@fluentui-react-button-bbd1cee3-fa3c-400f-b0e3-977c6a434c3b.json b/change/@fluentui-react-button-bbd1cee3-fa3c-400f-b0e3-977c6a434c3b.json
new file mode 100644
index 00000000000000..e0a30098da7d78
--- /dev/null
+++ b/change/@fluentui-react-button-bbd1cee3-fa3c-400f-b0e3-977c6a434c3b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add deprecation messages to react-button",
+  "packageName": "@fluentui/react-button",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-switch-099a7ba8-9fef-494c-8383-ffac254f3526.json b/change/@fluentui-react-switch-099a7ba8-9fef-494c-8383-ffac254f3526.json
new file mode 100644
index 00000000000000..d7468fa8b6b58a
--- /dev/null
+++ b/change/@fluentui-react-switch-099a7ba8-9fef-494c-8383-ffac254f3526.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add deprecation messages to react-switch",
+  "packageName": "@fluentui/react-switch",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 1d0e87100f7badf8a741765fe95776bdf0084730 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 13:08:24 -0700
Subject: [PATCH 063/173] Fix import in react-dialog

---
 packages/react-dialog/src/components/Dialog/useDialogStyles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
index 3edacbfd0c6f0d..ae69ee89849f42 100644
--- a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
+++ b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { DialogSlots, DialogState } from './Dialog.types';
 

From d21ccc1f4ab6c94c85a9993fbe1216dbcea2a638 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 14:42:48 -0700
Subject: [PATCH 064/173] Update Dialog API

---
 packages/react-dialog/etc/react-dialog.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dialog/etc/react-dialog.api.md b/packages/react-dialog/etc/react-dialog.api.md
index e0dbd85ca594e4..fb882803f117d2 100644
--- a/packages/react-dialog/etc/react-dialog.api.md
+++ b/packages/react-dialog/etc/react-dialog.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Dialog: ForwardRefComponent<DialogProps>;

From 183dc75c1e9181092e71e2fe00c9a734e88eae5e Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 15:24:15 -0700
Subject: [PATCH 065/173] Update type imports

---
 packages/react-badge/src/components/Badge/useBadgeStyles.ts     | 2 +-
 .../src/components/CounterBadge/useCounterBadgeStyles.ts        | 2 +-
 .../src/components/PresenceBadge/usePresenceBadgeStyles.ts      | 2 +-
 packages/react-card/src/components/Card/useCardStyles.ts        | 2 +-
 .../react-card/src/components/CardFooter/useCardFooterStyles.ts | 2 +-
 .../react-card/src/components/CardHeader/useCardHeaderStyles.ts | 2 +-
 .../src/components/CardPreview/useCardPreviewStyles.ts          | 2 +-
 .../react-checkbox/src/components/Checkbox/useCheckboxStyles.ts | 2 +-
 .../react-divider/src/components/Divider/useDividerStyles.ts    | 2 +-
 packages/react-image/src/components/Image/useImageStyles.ts     | 2 +-
 packages/react-input/src/components/Input/useInputStyles.ts     | 2 +-
 packages/react-label/src/components/Label/useLabelStyles.ts     | 2 +-
 packages/react-link/src/components/Link/useLinkStyles.ts        | 2 +-
 .../src/components/MenuDivider/useMenuDividerStyles.ts          | 2 +-
 .../react-menu/src/components/MenuGroup/useMenuGroupStyles.ts   | 2 +-
 .../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts  | 2 +-
 .../react-menu/src/components/MenuItem/useMenuItemStyles.ts     | 2 +-
 .../components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts    | 2 +-
 .../src/components/MenuItemRadio/useMenuItemRadioStyles.ts      | 2 +-
 .../react-menu/src/components/MenuList/useMenuListStyles.ts     | 2 +-
 .../src/components/MenuPopover/useMenuPopoverStyles.ts          | 2 +-
 .../src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts    | 2 +-
 .../src/components/PopoverSurface/usePopoverSurfaceStyles.ts    | 2 +-
 23 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
index 1359edd6a02835..c27f6ff76e2dd8 100644
--- a/packages/react-badge/src/components/Badge/useBadgeStyles.ts
+++ b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
@@ -1,7 +1,7 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { BadgeSlots, BadgeState } from './Badge.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `badgeClassNames.root` instead.
diff --git a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
index 32dcb344411b2b..865c66c6f7f84e 100644
--- a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
+++ b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { BadgeSlots } from '../Badge/Badge.types';
 import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';
diff --git a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
index 8b0c6a70627af2..59145500d2171d 100644
--- a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
+++ b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
@@ -1,7 +1,7 @@
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { PresenceBadgeState } from './PresenceBadge.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { BadgeSlots } from '../Badge/Badge.types';
 
 /**
diff --git a/packages/react-card/src/components/Card/useCardStyles.ts b/packages/react-card/src/components/Card/useCardStyles.ts
index 07fd9d34959912..d0617e39794286 100644
--- a/packages/react-card/src/components/Card/useCardStyles.ts
+++ b/packages/react-card/src/components/Card/useCardStyles.ts
@@ -2,7 +2,7 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { cardPreviewClassName } from '../CardPreview/index';
 import type { CardSlots, CardState } from './Card.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `cardClassNames.root` instead.
diff --git a/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts b/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
index b936a25788c6d3..312647b7285038 100644
--- a/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
+++ b/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { CardFooterSlots, CardFooterState } from './CardFooter.types';
 
diff --git a/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts b/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
index 5bfd94328e9c08..384c1a3e386a2e 100644
--- a/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
+++ b/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
 
diff --git a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
index 2ec71689beaedc..319336067983bd 100644
--- a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
+++ b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
 
diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
index 8f1bc1a14c6c23..6d9125bee34161 100644
--- a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
+++ b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
@@ -2,7 +2,7 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { CheckboxSlots, CheckboxState } from './Checkbox.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `checkboxClassNames.root` instead.
diff --git a/packages/react-divider/src/components/Divider/useDividerStyles.ts b/packages/react-divider/src/components/Divider/useDividerStyles.ts
index 367f0bee1c0580..906e578cf9905c 100644
--- a/packages/react-divider/src/components/Divider/useDividerStyles.ts
+++ b/packages/react-divider/src/components/Divider/useDividerStyles.ts
@@ -1,7 +1,7 @@
 import { mergeClasses, shorthands, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { DividerSlots, DividerState } from './Divider.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `dividerClassNames.root` instead.
diff --git a/packages/react-image/src/components/Image/useImageStyles.ts b/packages/react-image/src/components/Image/useImageStyles.ts
index dac335bbbf61ab..5a328d2149f67c 100644
--- a/packages/react-image/src/components/Image/useImageStyles.ts
+++ b/packages/react-image/src/components/Image/useImageStyles.ts
@@ -1,7 +1,7 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { ImageSlots, ImageState } from './Image.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `imageClassNames.root` instead.
diff --git a/packages/react-input/src/components/Input/useInputStyles.ts b/packages/react-input/src/components/Input/useInputStyles.ts
index 0d18e919ee35cd..15a1a891a861fd 100644
--- a/packages/react-input/src/components/Input/useInputStyles.ts
+++ b/packages/react-input/src/components/Input/useInputStyles.ts
@@ -1,7 +1,7 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { InputSlots, InputState } from './Input.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `inputClassNames.root` instead.
diff --git a/packages/react-label/src/components/Label/useLabelStyles.ts b/packages/react-label/src/components/Label/useLabelStyles.ts
index 8a8dce7b3480c8..7726557e96494c 100644
--- a/packages/react-label/src/components/Label/useLabelStyles.ts
+++ b/packages/react-label/src/components/Label/useLabelStyles.ts
@@ -1,7 +1,7 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { LabelSlots, LabelState } from './Label.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `labelClassNames.root` instead.
diff --git a/packages/react-link/src/components/Link/useLinkStyles.ts b/packages/react-link/src/components/Link/useLinkStyles.ts
index 1d05c258d01edd..fd3387be955071 100644
--- a/packages/react-link/src/components/Link/useLinkStyles.ts
+++ b/packages/react-link/src/components/Link/useLinkStyles.ts
@@ -2,7 +2,7 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import type { LinkSlots, LinkState } from './Link.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `linkClassNames.root` instead.
diff --git a/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts b/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
index a8e24e011f29d4..374e5a1a9a61f4 100644
--- a/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
+++ b/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
@@ -1,7 +1,7 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `menuDividerClassNames.root` instead.
diff --git a/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts b/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
index 791eaa8305f86f..ef2460760d836a 100644
--- a/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
+++ b/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';
 
diff --git a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
index f730b2355ef5fe..2f5140653bc5df 100644
--- a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
+++ b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
@@ -1,7 +1,7 @@
 import { mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `menuGroupHeaderClassNames.root` instead.
diff --git a/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts b/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
index 62ac15c996fc71..1f75b25816b462 100644
--- a/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
+++ b/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
@@ -4,7 +4,7 @@ import { tokens } from '@fluentui/react-theme';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
 import { MenuItemCheckboxState } from '../MenuItemCheckbox/index';
 import type { MenuItemSlots, MenuItemState } from './MenuItem.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `menuItemClassNames.root` instead.
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
index 76aec40194c0dc..5674c6fd9bfda1 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
+++ b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
 import { MenuItemSlots } from '../index';
diff --git a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
index e9cdc6f59d3808..926650e72e7710 100644
--- a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
+++ b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
 import { MenuItemSlots } from '../index';
diff --git a/packages/react-menu/src/components/MenuList/useMenuListStyles.ts b/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
index 1c2bd0b4c27e58..20fe6074c1c65b 100644
--- a/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
+++ b/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import type { MenuListSlots, MenuListState } from './MenuList.types';
 
diff --git a/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts b/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
index 753ab32074a95d..734c509bc1cd24 100644
--- a/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
+++ b/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
@@ -1,7 +1,7 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `menuPopoverClassNames.root` instead.
diff --git a/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts b/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
index 8c070675781f81..d99162a19e8641 100644
--- a/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
+++ b/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
@@ -2,7 +2,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { menuItemClassNames } from '../MenuItem/useMenuItemStyles';
 import type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `menuSplitGroupClassNames.root` instead.
diff --git a/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts b/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
index 1b4c41fdb3a02b..fabed5309c2798 100644
--- a/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
+++ b/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
@@ -3,7 +3,7 @@ import { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-posi
 import { tokens } from '@fluentui/react-theme';
 import type { PopoverSize } from '../Popover/Popover.types';
 import type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `popoverSurfaceClassNames.root` instead.

From a6b970ddd1a63d440f97732a815c02d5c551f0e1 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 15:39:16 -0700
Subject: [PATCH 066/173] Update Badge API files

---
 packages/react-badge/etc/react-badge.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-badge/etc/react-badge.api.md b/packages/react-badge/etc/react-badge.api.md
index 6fd232a8e68e87..476ad1d8eb24b3 100644
--- a/packages/react-badge/etc/react-badge.api.md
+++ b/packages/react-badge/etc/react-badge.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Badge: ForwardRefComponent<BadgeProps>;

From c615c052ed3a7a1b171b1f7d01d4953f8d98b6d9 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 15:52:48 -0700
Subject: [PATCH 067/173] Update react-image API

---
 packages/react-image/etc/react-image.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-image/etc/react-image.api.md b/packages/react-image/etc/react-image.api.md
index 3b8aa1e1fb35e1..ad83a17aea4a63 100644
--- a/packages/react-image/etc/react-image.api.md
+++ b/packages/react-image/etc/react-image.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 const Image_2: ForwardRefComponent<ImageProps>;

From 1672dc6684e56ccf55b1735d26b65f8e6eb3dbe6 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 16:32:26 -0700
Subject: [PATCH 068/173] Update react-divider API

---
 packages/react-divider/etc/react-divider.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-divider/etc/react-divider.api.md b/packages/react-divider/etc/react-divider.api.md
index d2b9b51e551627..00a1a104248aa9 100644
--- a/packages/react-divider/etc/react-divider.api.md
+++ b/packages/react-divider/etc/react-divider.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Divider: ForwardRefComponent<DividerProps>;

From bff80a76fc259d1a3046f151cf3b5370a0c78653 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:05:20 -0700
Subject: [PATCH 069/173] Update react-label API

---
 packages/react-label/etc/react-label.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-label/etc/react-label.api.md b/packages/react-label/etc/react-label.api.md
index 633d3d35b5ec29..bd17206717193a 100644
--- a/packages/react-label/etc/react-label.api.md
+++ b/packages/react-label/etc/react-label.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Label: ForwardRefComponent<LabelProps>;

From 290947fa180e1a518ddeb9712b5c43d254760004 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:05:59 -0700
Subject: [PATCH 070/173] Update API for react-accordion

---
 packages/react-accordion/etc/react-accordion.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-accordion/etc/react-accordion.api.md b/packages/react-accordion/etc/react-accordion.api.md
index c7c1bb26f92192..f8855c80456626 100644
--- a/packages/react-accordion/etc/react-accordion.api.md
+++ b/packages/react-accordion/etc/react-accordion.api.md
@@ -11,7 +11,7 @@ import type { Context } from '@fluentui/react-context-selector';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Accordion: ForwardRefComponent<AccordionProps>;

From 00cdd012c8aa3e94802965b52939b768646eb95b Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:06:35 -0700
Subject: [PATCH 071/173] Update API for react-avatar

---
 packages/react-avatar/etc/react-avatar.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-avatar/etc/react-avatar.api.md b/packages/react-avatar/etc/react-avatar.api.md
index e6b23bd4f7d35b..9a5f6c26e1b5a1 100644
--- a/packages/react-avatar/etc/react-avatar.api.md
+++ b/packages/react-avatar/etc/react-avatar.api.md
@@ -10,7 +10,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { PresenceBadge } from '@fluentui/react-badge';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public (undocumented)
 export const Avatar: ForwardRefComponent<AvatarProps>;

From c1ce60535ba21192d3c11c41a744394537114276 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:07:36 -0700
Subject: [PATCH 072/173] Update API for react-card

---
 packages/react-card/etc/react-card.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-card/etc/react-card.api.md b/packages/react-card/etc/react-card.api.md
index 571e1c8bf5e472..54f5eb96068547 100644
--- a/packages/react-card/etc/react-card.api.md
+++ b/packages/react-card/etc/react-card.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Card: ForwardRefComponent<CardProps>;

From e377586449aaa7b4ec3390bf227844092d7af338 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:08:18 -0700
Subject: [PATCH 073/173] Update API for react-checkbox

---
 packages/react-checkbox/etc/react-checkbox.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-checkbox/etc/react-checkbox.api.md b/packages/react-checkbox/etc/react-checkbox.api.md
index ee714b9a5b1adc..962b58c98f6bf2 100644
--- a/packages/react-checkbox/etc/react-checkbox.api.md
+++ b/packages/react-checkbox/etc/react-checkbox.api.md
@@ -10,7 +10,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
 import { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Checkbox: ForwardRefComponent<CheckboxProps>;

From 1246b75c0edcfdcb90ca9f080f292f1a32978750 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:10:40 -0700
Subject: [PATCH 074/173] Update API for react-input

---
 packages/react-input/etc/react-input.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-input/etc/react-input.api.md b/packages/react-input/etc/react-input.api.md
index 9f9bd59f035c78..925e40983a24b4 100644
--- a/packages/react-input/etc/react-input.api.md
+++ b/packages/react-input/etc/react-input.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Input: ForwardRefComponent<InputProps>;

From 8b1c693f1fae9ca933c88bcbdc27118d591ff255 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:13:05 -0700
Subject: [PATCH 075/173] Update API for react-link

---
 packages/react-link/etc/react-link.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-link/etc/react-link.api.md b/packages/react-link/etc/react-link.api.md
index 297388a9c60ac0..6d5689c1c02925 100644
--- a/packages/react-link/etc/react-link.api.md
+++ b/packages/react-link/etc/react-link.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Link: ForwardRefComponent<LinkProps>;

From 9b7418ae04e9d9ccb9f86f4e612120ab4dedc54e Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:14:48 -0700
Subject: [PATCH 076/173] Update API for react-menu

---
 packages/react-menu/etc/react-menu.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-menu/etc/react-menu.api.md b/packages/react-menu/etc/react-menu.api.md
index 15973117960ad0..bff67a63d7bc07 100644
--- a/packages/react-menu/etc/react-menu.api.md
+++ b/packages/react-menu/etc/react-menu.api.md
@@ -13,7 +13,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { usePopperMouseTarget } from '@fluentui/react-positioning';
 
 // @public

From b7d6423d3465ba3b105612ca1a30b4e8f6fd546f Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:15:24 -0700
Subject: [PATCH 077/173] Update API for react-popover

---
 packages/react-popover/etc/react-popover.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-popover/etc/react-popover.api.md b/packages/react-popover/etc/react-popover.api.md
index 2f599185c4847f..a7081ed1a25d91 100644
--- a/packages/react-popover/etc/react-popover.api.md
+++ b/packages/react-popover/etc/react-popover.api.md
@@ -17,7 +17,7 @@ import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { usePopperMouseTarget } from '@fluentui/react-positioning';
 
 // @public (undocumented)

From 87981ec1f03e2d2b366d75c6e9f568cad6ae9786 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 18:24:06 -0700
Subject: [PATCH 078/173] Disable 'component-has-static-classname' test on
 react-toolbar

This test is no longer applicable to react-toolbar as the
`toolbarClassName` export has been removed. This component has not
be exported as part of the public API so it is safe to entirely remove.
---
 packages/react-toolbar/src/components/Toolbar/Toolbar.test.tsx   | 1 +
 .../src/components/ToolbarButton/ToolbarButton.test.tsx          | 1 +
 .../src/components/ToolbarDivider/ToolbarDivider.test.tsx        | 1 +
 3 files changed, 3 insertions(+)

diff --git a/packages/react-toolbar/src/components/Toolbar/Toolbar.test.tsx b/packages/react-toolbar/src/components/Toolbar/Toolbar.test.tsx
index 31ce91371da55b..49f94005155d19 100644
--- a/packages/react-toolbar/src/components/Toolbar/Toolbar.test.tsx
+++ b/packages/react-toolbar/src/components/Toolbar/Toolbar.test.tsx
@@ -7,6 +7,7 @@ describe('Toolbar', () => {
   isConformant({
     Component: Toolbar,
     displayName: 'Toolbar',
+    disabledTests: ['component-has-static-classname'],
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
diff --git a/packages/react-toolbar/src/components/ToolbarButton/ToolbarButton.test.tsx b/packages/react-toolbar/src/components/ToolbarButton/ToolbarButton.test.tsx
index 580921858fd40d..b0453398bd876f 100644
--- a/packages/react-toolbar/src/components/ToolbarButton/ToolbarButton.test.tsx
+++ b/packages/react-toolbar/src/components/ToolbarButton/ToolbarButton.test.tsx
@@ -7,6 +7,7 @@ describe('ToolbarButton', () => {
   isConformant({
     Component: ToolbarButton,
     displayName: 'ToolbarButton',
+    disabledTests: ['component-has-static-classname'],
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
diff --git a/packages/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.test.tsx b/packages/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.test.tsx
index 2dd797d3d1ace1..939e3ba07191c8 100644
--- a/packages/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.test.tsx
+++ b/packages/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.test.tsx
@@ -7,6 +7,7 @@ describe('ToolbarDivider', () => {
   isConformant({
     Component: ToolbarDivider,
     displayName: 'ToolbarDivider',
+    disabledTests: ['component-has-static-classname'],
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests

From 8503ec2ecd9eb206599319d8dad54dfb85645d66 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 20:52:53 -0700
Subject: [PATCH 079/173] Fix conditional in classNames conformance test.

---
 packages/react-conformance/src/defaultTests.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-conformance/src/defaultTests.tsx b/packages/react-conformance/src/defaultTests.tsx
index 8ecefce9fd0fae..dbc3fb2d94c2be 100644
--- a/packages/react-conformance/src/defaultTests.tsx
+++ b/packages/react-conformance/src/defaultTests.tsx
@@ -393,10 +393,12 @@ export const defaultTests: TestObject = {
           componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
         const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
         const classNamesFromFile = indexFile[exportName];
+        console.log(defaultComponent.debug());
 
         const expectedClassNames: { [key: string]: string } = staticClassNames.expectedClassNames ?? classNamesFromFile;
         const missingClassNames = Object.values(expectedClassNames).reduce((acc, className) => {
-          if (defaultComponent.find(`.${className}`).length !== 1) {
+          console.log('find', className, JSON.stringify(defaultComponent.find(`.${className}`)));
+          if (defaultComponent.find(`.${className}`).length < 1) {
             (acc as string[]).push(className);
           }
           return acc;

From 67254745b5e48818711b074663d816d21c6fea3d Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 15 Mar 2022 09:05:36 -0700
Subject: [PATCH 080/173] Fix lint deprecation errors

---
 packages/react-button/src/components/Button/index.ts       | 7 ++++++-
 .../react-button/src/components/CompoundButton/index.ts    | 1 +
 packages/react-button/src/components/MenuButton/index.ts   | 7 ++++++-
 packages/react-button/src/components/SplitButton/index.ts  | 7 ++++++-
 packages/react-button/src/components/ToggleButton/index.ts | 7 ++++++-
 packages/react-card/src/components/Card/useCardStyles.ts   | 4 ++--
 .../src/components/FluentProvider/useThemeStyleTag.ts      | 4 ++--
 .../src/components/Tooltip/useTooltipStyles.ts             | 1 +
 8 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/react-button/src/components/Button/index.ts b/packages/react-button/src/components/Button/index.ts
index 65bdfd3b13998b..2055cfbd68b488 100644
--- a/packages/react-button/src/components/Button/index.ts
+++ b/packages/react-button/src/components/Button/index.ts
@@ -3,4 +3,9 @@ export * from './Button';
 export type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';
 export * from './renderButton';
 export * from './useButton';
-export { buttonClassName, buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';
+export {
+  /* eslint-disable-next-line deprecation/deprecation */
+  buttonClassName,
+  buttonClassNames,
+  useButtonStyles_unstable,
+} from './useButtonStyles';
diff --git a/packages/react-button/src/components/CompoundButton/index.ts b/packages/react-button/src/components/CompoundButton/index.ts
index fd0e57899db43a..9482a3b93c198b 100644
--- a/packages/react-button/src/components/CompoundButton/index.ts
+++ b/packages/react-button/src/components/CompoundButton/index.ts
@@ -3,6 +3,7 @@ export * from './CompoundButton.types';
 export * from './renderCompoundButton';
 export * from './useCompoundButton';
 export {
+  /* eslint-disable-next-line deprecation/deprecation */
   compoundButtonClassName,
   compoundButtonClassNames,
   useCompoundButtonStyles_unstable,
diff --git a/packages/react-button/src/components/MenuButton/index.ts b/packages/react-button/src/components/MenuButton/index.ts
index 7ec4cfc5d9d3c3..c24584a6715c09 100644
--- a/packages/react-button/src/components/MenuButton/index.ts
+++ b/packages/react-button/src/components/MenuButton/index.ts
@@ -2,4 +2,9 @@ export * from './MenuButton.types';
 export * from './MenuButton';
 export * from './renderMenuButton';
 export * from './useMenuButton';
-export { menuButtonClassName, menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
+export {
+  /* eslint-disable-next-line deprecation/deprecation */
+  menuButtonClassName,
+  menuButtonClassNames,
+  useMenuButtonStyles_unstable,
+} from './useMenuButtonStyles';
diff --git a/packages/react-button/src/components/SplitButton/index.ts b/packages/react-button/src/components/SplitButton/index.ts
index 04ee7588a3d39b..aacb3025669cd2 100644
--- a/packages/react-button/src/components/SplitButton/index.ts
+++ b/packages/react-button/src/components/SplitButton/index.ts
@@ -2,4 +2,9 @@ export * from './SplitButton';
 export * from './SplitButton.types';
 export * from './renderSplitButton';
 export * from './useSplitButton';
-export { splitButtonClassName, splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
+export {
+  /* eslint-disable-next-line deprecation/deprecation */
+  splitButtonClassName,
+  splitButtonClassNames,
+  useSplitButtonStyles_unstable,
+} from './useSplitButtonStyles';
diff --git a/packages/react-button/src/components/ToggleButton/index.ts b/packages/react-button/src/components/ToggleButton/index.ts
index 659aefa2b40805..d6d157426c7c30 100644
--- a/packages/react-button/src/components/ToggleButton/index.ts
+++ b/packages/react-button/src/components/ToggleButton/index.ts
@@ -2,4 +2,9 @@ export * from './ToggleButton';
 export * from './ToggleButton.types';
 export * from './renderToggleButton';
 export * from './useToggleButton';
-export { toggleButtonClassName, toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
+export {
+  /* eslint-disable-next-line deprecation/deprecation */
+  toggleButtonClassName,
+  toggleButtonClassNames,
+  useToggleButtonStyles_unstable,
+} from './useToggleButtonStyles';
diff --git a/packages/react-card/src/components/Card/useCardStyles.ts b/packages/react-card/src/components/Card/useCardStyles.ts
index d0617e39794286..94aafea32906f6 100644
--- a/packages/react-card/src/components/Card/useCardStyles.ts
+++ b/packages/react-card/src/components/Card/useCardStyles.ts
@@ -1,6 +1,6 @@
 import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { cardPreviewClassName } from '../CardPreview/index';
+import { cardPreviewClassNames } from '../CardPreview/index';
 import type { CardSlots, CardState } from './Card.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
@@ -27,7 +27,7 @@ const useStyles = makeStyles({
     // Size: medium
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
 
-    [`> *:not(.${cardPreviewClassName})`]: {
+    [`> *:not(.${cardPreviewClassNames.root})`]: {
       // Size: medium
       ...shorthands.margin('12px'),
     },
diff --git a/packages/react-provider/src/components/FluentProvider/useThemeStyleTag.ts b/packages/react-provider/src/components/FluentProvider/useThemeStyleTag.ts
index c3a7c49856172d..ef865255f94ba7 100644
--- a/packages/react-provider/src/components/FluentProvider/useThemeStyleTag.ts
+++ b/packages/react-provider/src/components/FluentProvider/useThemeStyleTag.ts
@@ -1,7 +1,7 @@
 import { useId, usePrevious } from '@fluentui/react-utilities';
 import * as React from 'react';
 import type { FluentProviderState } from './FluentProvider.types';
-import { fluentProviderClassName } from './useFluentProviderStyles';
+import { fluentProviderClassNames } from './useFluentProviderStyles';
 
 /**
  * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
@@ -11,7 +11,7 @@ import { fluentProviderClassName } from './useFluentProviderStyles';
 export const useThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {
   const { targetDocument, theme } = options;
 
-  const styleTagId = useId(fluentProviderClassName);
+  const styleTagId = useId(fluentProviderClassNames.root);
   const styleTag = React.useMemo(() => {
     if (!targetDocument) {
       return null;
diff --git a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
index 3ce1524c7dcee8..5e9fb1b7c4f4fe 100644
--- a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
+++ b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
@@ -57,6 +57,7 @@ export const useTooltipStyles_unstable = (state: TooltipState): TooltipState =>
   const styles = useStyles();
 
   state.content.className = mergeClasses(
+    /* eslint-disable-next-line deprecation/deprecation */
     tooltipClassName,
     tooltipClassNames.content,
     styles.root,

From 421a59b8fdb4fb0f56484c5733a0478ac2c140ba Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 15 Mar 2022 10:34:03 -0700
Subject: [PATCH 081/173] Fix conformance test failures

---
 .../src/components/Button/Button.test.tsx     |  9 +++++++
 .../CompoundButton/CompoundButton.test.tsx    | 11 +++++++++
 .../CompoundButton/renderCompoundButton.tsx   |  2 ++
 .../components/MenuButton/MenuButton.test.tsx | 24 +++++++++++++++++++
 .../MenuButton/useMenuButtonStyles.ts         |  6 ++++-
 .../SplitButton/SplitButton.test.tsx          | 10 ++++++++
 .../ToggleButton/ToggleButton.test.tsx        |  9 +++++++
 .../components/CardFooter/CardFooter.test.tsx |  9 +++++++
 .../src/components/Switch/Switch.test.tsx     |  9 +++++++
 9 files changed, 88 insertions(+), 1 deletion(-)

diff --git a/packages/react-button/src/components/Button/Button.test.tsx b/packages/react-button/src/components/Button/Button.test.tsx
index 813f314ef3336c..f5c6db9a5c44e7 100644
--- a/packages/react-button/src/components/Button/Button.test.tsx
+++ b/packages/react-button/src/components/Button/Button.test.tsx
@@ -10,6 +10,15 @@ describe('Button', () => {
   isConformant({
     Component: Button as React.FunctionComponent<ButtonProps>,
     displayName: 'Button',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+          },
+        },
+      ],
+    },
   });
 
   describe('meets accessibility requirements', () => {
diff --git a/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx b/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx
index 80eb874203e95b..7bc31640876c86 100644
--- a/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx
+++ b/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx
@@ -9,6 +9,17 @@ describe('CompoundButton', () => {
   isConformant({
     Component: CompoundButton as React.FunctionComponent<CompoundButtonProps>,
     displayName: 'CompoundButton',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            iconOnly: false,
+            icon: 'Test Icon',
+            secondaryContent: 'Test Secondary Content',
+          },
+        },
+      ],
+    },
   });
 
   describe('when rendered as a button', () => {
diff --git a/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx b/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx
index a23a3b5c3403de..3d1ce7d266a467 100644
--- a/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx
+++ b/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx
@@ -9,6 +9,8 @@ export const renderCompoundButton_unstable = (state: CompoundButtonState) => {
   const { slots, slotProps } = getSlots<CompoundButtonSlots>(state);
   const { iconOnly, iconPosition } = state;
 
+  console.log('STATE', state);
+
   return (
     <slots.root {...slotProps.root}>
       {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}
diff --git a/packages/react-button/src/components/MenuButton/MenuButton.test.tsx b/packages/react-button/src/components/MenuButton/MenuButton.test.tsx
index 316a0ca81b0cb0..4868d5ba482f34 100644
--- a/packages/react-button/src/components/MenuButton/MenuButton.test.tsx
+++ b/packages/react-button/src/components/MenuButton/MenuButton.test.tsx
@@ -4,11 +4,35 @@ import userEvent from '@testing-library/user-event';
 import { isConformant } from '../../common/isConformant';
 import { MenuButton } from './MenuButton';
 import { MenuButtonProps } from './MenuButton.types';
+import { menuButtonClassNames } from './useMenuButtonStyles';
 
 describe('MenuButton', () => {
   isConformant({
     Component: MenuButton as React.FunctionComponent<MenuButtonProps>,
     displayName: 'MenuButton',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            menuIcon: 'Test MenuIcon',
+          },
+          expectedClassNames: {
+            root: menuButtonClassNames.root,
+            icon: menuButtonClassNames.icon,
+          },
+        },
+        {
+          props: {
+            menuIcon: 'Test MenuIcon',
+          },
+          expectedClassNames: {
+            root: menuButtonClassNames.root,
+            menuIcon: menuButtonClassNames.menuIcon,
+          },
+        },
+      ],
+    },
   });
 
   describe('when rendered as a button', () => {
diff --git a/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts b/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
index eca7fab544379a..8818af088920e8 100644
--- a/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
+++ b/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
@@ -44,7 +44,11 @@ export const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButton
   }
 
   if (state.menuIcon) {
-    state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);
+    state.menuIcon.className = mergeClasses(
+      menuButtonClassNames.menuIcon,
+      menuIconStyles[state.size],
+      state.menuIcon.className,
+    );
   }
 
   useButtonStyles_unstable(state as ButtonState);
diff --git a/packages/react-button/src/components/SplitButton/SplitButton.test.tsx b/packages/react-button/src/components/SplitButton/SplitButton.test.tsx
index 4950aadb8e90fb..e8fb53269a7239 100644
--- a/packages/react-button/src/components/SplitButton/SplitButton.test.tsx
+++ b/packages/react-button/src/components/SplitButton/SplitButton.test.tsx
@@ -9,6 +9,16 @@ describe('SplitButton', () => {
   isConformant({
     Component: SplitButton as React.FunctionComponent<SplitButtonProps>,
     displayName: 'SplitButton',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            menuIcon: 'Test MenuIcon',
+          },
+        },
+      ],
+    },
   });
 
   it('renders correctly', () => {
diff --git a/packages/react-button/src/components/ToggleButton/ToggleButton.test.tsx b/packages/react-button/src/components/ToggleButton/ToggleButton.test.tsx
index c771f53e9b4728..30e69ac356b485 100644
--- a/packages/react-button/src/components/ToggleButton/ToggleButton.test.tsx
+++ b/packages/react-button/src/components/ToggleButton/ToggleButton.test.tsx
@@ -15,6 +15,15 @@ describe('ToggleButton', () => {
   isConformant({
     Component: ToggleButton as React.FunctionComponent<ToggleButtonProps>,
     displayName: 'ToggleButton',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+          },
+        },
+      ],
+    },
   });
 
   xdescribe('AccesibilityButtonBehavior', () => {
diff --git a/packages/react-card/src/components/CardFooter/CardFooter.test.tsx b/packages/react-card/src/components/CardFooter/CardFooter.test.tsx
index 1ff6eedc459529..faf4af2bb6342c 100644
--- a/packages/react-card/src/components/CardFooter/CardFooter.test.tsx
+++ b/packages/react-card/src/components/CardFooter/CardFooter.test.tsx
@@ -7,6 +7,15 @@ describe('CardFooter', () => {
   isConformant({
     Component: CardFooter,
     displayName: 'CardFooter',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            action: 'Test Action',
+          },
+        },
+      ],
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-switch/src/components/Switch/Switch.test.tsx b/packages/react-switch/src/components/Switch/Switch.test.tsx
index 2787d9885474ff..3f83e10a210747 100644
--- a/packages/react-switch/src/components/Switch/Switch.test.tsx
+++ b/packages/react-switch/src/components/Switch/Switch.test.tsx
@@ -10,6 +10,15 @@ describe('Switch', () => {
     Component: Switch,
     displayName: 'Switch',
     primarySlot: 'input',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            label: 'Test Label',
+          },
+        },
+      ],
+    },
   });
 
   describe('on component render', () => {

From 7a635c2f67e742c9a6d937ffe2303c763082208f Mon Sep 17 00:00:00 2001
From: KHMakoto <Humberto.Morimoto@microsoft.com>
Date: Tue, 15 Mar 2022 11:52:06 -0600
Subject: [PATCH 082/173] Fixing CompoundButton test.

---
 .../src/components/CompoundButton/CompoundButton.test.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx b/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx
index 7bc31640876c86..a46fed39fbfdf8 100644
--- a/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx
+++ b/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx
@@ -13,8 +13,8 @@ describe('CompoundButton', () => {
       'has-static-classnames': [
         {
           props: {
-            iconOnly: false,
             icon: 'Test Icon',
+            children: 'Test Children',
             secondaryContent: 'Test Secondary Content',
           },
         },

From a440c18255af347c2328549ad0506ec01ec6d617 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Wed, 2 Mar 2022 15:07:06 -0800
Subject: [PATCH 083/173] Add conformance tests for static classnames

This commit adds conformance tests for static class names. The tests:

1. Ensure that the static classnames object is exported
2. Ensure that the static classnames object is formatted correctly
3. Ensure that the static classnames are rendered in the component

The rules for static classnames are defined in RFC: Conventions for
static class names on slots (#21206).

Only Radio and RadioGroup have been updated to pass these test.
---
 .../src/defaultErrorMessages.tsx              |  96 +++++++++++++-
 .../react-conformance/src/defaultTests.tsx    | 117 ++++++++++++++++++
 packages/react-conformance/src/types.ts       |   3 +
 packages/react-radio/etc/react-radio.api.md   |   5 +-
 .../src/components/Radio/Radio.test.tsx       |   7 ++
 .../src/components/Radio/useRadioStyles.ts    |  45 ++++---
 .../RadioGroup/useRadioGroupStyles.ts         |   8 +-
 7 files changed, 256 insertions(+), 25 deletions(-)

diff --git a/packages/react-conformance/src/defaultErrorMessages.tsx b/packages/react-conformance/src/defaultErrorMessages.tsx
index eadfcf7f8c842c..d0016f97ce2219 100644
--- a/packages/react-conformance/src/defaultErrorMessages.tsx
+++ b/packages/react-conformance/src/defaultErrorMessages.tsx
@@ -510,7 +510,7 @@ export const defaultErrorMessages = {
         indexFile,
       )}.`,
       suggestions: [
-        `Make sure that your component's ${resolveInfo('index.ts')} file` +
+        `Make sure that your component's ${resolveInfo('index.ts')} file ` +
           `or a file with styles hook exports \`${resolveInfo(constantValue)}\``,
         `If the component is internal, consider enabling ${resolveInfo('isInternal')} in your isConformant test.`,
       ],
@@ -518,6 +518,100 @@ export const defaultErrorMessages = {
     });
   },
 
+  'component-has-static-classnames-object-exported': (
+    testInfo: IsConformantOptions,
+    error: Error,
+    componentClassName: string,
+    exportName: string,
+  ) => {
+    const { componentPath, displayName } = testInfo;
+    const { testErrorInfo, resolveInfo, testErrorPath } = errorMessageColors;
+    const indexFile = path.join(getPackagePath(componentPath), 'src', 'index.ts');
+
+    return getErrorMessage({
+      displayName,
+      overview: `static classNames object is not exported (${testErrorInfo(exportName)}) in: ${EOL}${testErrorPath(
+        indexFile,
+      )}.`,
+      suggestions: [
+        `Make sure that your component's ${resolveInfo('index.ts')} file ` +
+          `or a file with styles hook exports an object of type SlotClassNames<Slots>.`,
+        `If the component is internal, consider enabling ${resolveInfo('isInternal')} in your isConformant test.`,
+      ],
+      error,
+    });
+  },
+
+  'component-has-static-classnames-in-correct-format': (
+    testInfo: IsConformantOptions,
+    error: Error,
+    componentClassName: string,
+    exportName: string,
+  ) => {
+    const { componentPath, displayName } = testInfo;
+    const { testErrorInfo, resolveInfo, testErrorPath } = errorMessageColors;
+    const indexFile = path.join(getPackagePath(componentPath), 'src', 'index.ts');
+
+    return getErrorMessage({
+      displayName,
+      overview: `static classNames object is not formatted correctly (${testErrorInfo(
+        exportName,
+      )}) in: ${EOL}${testErrorPath(indexFile)}.`,
+      suggestions: [
+        `Make sure all classNames are for the form "fui-<ComponentName>__<SlotName>" ` +
+          `or "fui-<ComponentName>" for the root slot`,
+        `If the component is internal, consider enabling ${resolveInfo('isInternal')} in your isConformant test.`,
+      ],
+      error,
+    });
+  },
+
+  'component-has-static-classnames': (
+    testInfo: IsConformantOptions,
+    error: Error,
+    componentName: string,
+    missingClassNames: string,
+  ) => {
+    const { displayName } = testInfo;
+    const { testErrorInfo, failedError } = errorMessageColors;
+
+    return getErrorMessage({
+      displayName,
+      overview: `missing one or more static classNames on component (${testErrorInfo(componentName)}).`,
+      details: [`Missing the following classes after render:`, `    ${failedError(missingClassNames)}`],
+      suggestions: [`Ensure that each slot of the component has its corresponding static className.`],
+      error,
+    });
+  },
+
+  'as-renders-html': (testInfo: IsConformantOptions, error: Error) => {
+    const { displayName } = testInfo;
+    const { resolveInfo } = errorMessageColors;
+
+    // Message Description: Receives an error when attempting to render as a functional component
+    // or pass as to the next component.
+    //
+    // It appears that "displayName" "as" prop doesn't properly handle HTML tags.
+    // Possible solutions:
+    // - If your component doesn't have an "as" prop, enable isConformant's skipAsPropTests option.
+    // - Make sure that your component can correctly render as HTML tags.
+    // - Check if you are missing any requiredProps within the isConformant in your test file.
+    // - Make sure that your component's implementation contains a valid return statement.
+    // - Check to see if your component works as expected with Enzyme's mount().
+    return getErrorMessage({
+      displayName,
+      overview: `"as" prop doesn't properly handle HTML tags.`,
+      suggestions: [
+        `If your component doesn't have an "as" prop, enable isConformant's ${resolveInfo('skipAsPropTests')} option.`,
+        `Make sure that your component can correctly render as ${resolveInfo('HTML tags')}.`,
+        `Check if you are missing any ${resolveInfo('requiredProps')} within the isConformant in your test file.`,
+        `Make sure that your component's implementation contains a valid return statement.`,
+        `Check to see if your component works as expected with Enzyme's ${resolveInfo('mount()')}.`,
+      ],
+      error,
+    });
+  },
+
   'primary-slot-gets-native-props': (testInfo: IsConformantOptions, error: Error) => {
     const { displayName } = testInfo;
     const { resolveInfo } = errorMessageColors;
diff --git a/packages/react-conformance/src/defaultTests.tsx b/packages/react-conformance/src/defaultTests.tsx
index 890942500123aa..906bf1b346bf63 100644
--- a/packages/react-conformance/src/defaultTests.tsx
+++ b/packages/react-conformance/src/defaultTests.tsx
@@ -302,6 +302,123 @@ export const defaultTests: TestObject = {
     });
   },
 
+  'component-has-static-classnames-object': (componentInfo: ComponentDoc, testInfo: IsConformantOptions) => {
+    const {
+      componentPath,
+      Component,
+      wrapperComponent,
+      helperComponents = [],
+      requiredProps,
+      customMount = mount,
+    } = testInfo;
+
+    const componentName = componentInfo.displayName;
+    const componentClassName = `fui-${componentName}`;
+    let handledClassNamesObjectExport = false;
+
+    it('has static classnames exported at top-level (component-has-static-classnames-object)', () => {
+      if (testInfo.isInternal) {
+        return;
+      }
+
+      const exportName =
+        componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
+
+      try {
+        const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
+        const classNamesFromFile = indexFile[exportName];
+        expect(classNamesFromFile).toBeTruthy();
+        handledClassNamesObjectExport = true;
+      } catch (e) {
+        // Need to work on this error message
+        throw new Error(
+          defaultErrorMessages['component-has-static-classnames-object-exported'](
+            testInfo,
+            e,
+            componentClassName,
+            exportName,
+          ),
+        );
+      }
+    });
+
+    it('has static classnames in correct format (component-has-static-classnames-object)', () => {
+      if (!handledClassNamesObjectExport) {
+        return;
+      }
+
+      const exportName =
+        componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
+      const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
+      const classNamesFromFile = indexFile[exportName];
+
+      const expectedClassNames = Object.keys(classNamesFromFile).reduce(
+        (obj: { [key: string]: string }, key: string) => {
+          obj[key] = key === 'root' ? componentClassName : `${componentClassName}__${key}`;
+          return obj;
+        },
+        {},
+      );
+
+      try {
+        expect(classNamesFromFile).toEqual(expectedClassNames);
+      } catch (e) {
+        // Need to work on this error message
+        throw new Error(
+          defaultErrorMessages['component-has-static-classnames-in-correct-format'](
+            testInfo,
+            e,
+            componentClassName,
+            exportName,
+          ),
+        );
+      }
+    });
+
+    it(`has static classnames (component-has-static-classnames-object)`, () => {
+      if (!handledClassNamesObjectExport) {
+        return;
+      }
+
+      const { testOptions = {} } = testInfo;
+      const mergedProps = {
+        ...requiredProps,
+        ...(testOptions['has-static-classnames'] ?? {}),
+      };
+      const defaultEl = customMount(<Component {...mergedProps} />);
+      const defaultComponent = getComponent(defaultEl, helperComponents, wrapperComponent);
+
+      const exportName =
+        componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
+      const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
+      const classNamesFromFile = indexFile[exportName];
+
+      const missingClassNames = [];
+      let className;
+      let err: Error;
+      for (const key of Object.keys(classNamesFromFile)) {
+        className = classNamesFromFile[key];
+        try {
+          expect(defaultComponent.find(`.${className}`).length).toBeGreaterThanOrEqual(1);
+        } catch (e) {
+          err = e as Error;
+          missingClassNames.push(className);
+        }
+      }
+
+      if (missingClassNames.length > 0) {
+        throw new Error(
+          defaultErrorMessages['component-has-static-classnames'](
+            testInfo,
+            err!,
+            componentName,
+            missingClassNames.join(', '),
+          ),
+        );
+      }
+    });
+  },
+
   /** Constructor/component name matches filename */
   'name-matches-filename': (componentInfo: ComponentDoc, testInfo: IsConformantOptions) => {
     it(`Component/constructor name matches filename (name-matches-filename)`, () => {
diff --git a/packages/react-conformance/src/types.ts b/packages/react-conformance/src/types.ts
index 31eba78daa349e..0cbbe54ce249ff 100644
--- a/packages/react-conformance/src/types.ts
+++ b/packages/react-conformance/src/types.ts
@@ -14,6 +14,9 @@ export interface TestOptions {
   'consistent-callback-args'?: {
     ignoreProps?: string[];
   };
+  'has-static-classnames'?: {
+    [key: string]: string;
+  };
 }
 
 export interface IsConformantOptions<TProps = {}> {
diff --git a/packages/react-radio/etc/react-radio.api.md b/packages/react-radio/etc/react-radio.api.md
index 114d3b91bbecd3..143ea5653499f0 100644
--- a/packages/react-radio/etc/react-radio.api.md
+++ b/packages/react-radio/etc/react-radio.api.md
@@ -10,18 +10,19 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Radio: ForwardRefComponent<RadioProps>;
 
 // @public (undocumented)
-export const radioClassName = "fui-Radio";
+export const radioClassNames: SlotClassNames<RadioSlots>;
 
 // @public
 export const RadioGroup: ForwardRefComponent<RadioGroupProps>;
 
 // @public (undocumented)
-export const radioGroupClassName = "fui-RadioGroup";
+export const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
 
 // @public
 export const RadioGroupContext: React_2.Context<RadioGroupContextValue>;
diff --git a/packages/react-radio/src/components/Radio/Radio.test.tsx b/packages/react-radio/src/components/Radio/Radio.test.tsx
index 04e375b5352fad..22d695dc4f42b4 100644
--- a/packages/react-radio/src/components/Radio/Radio.test.tsx
+++ b/packages/react-radio/src/components/Radio/Radio.test.tsx
@@ -9,6 +9,13 @@ describe('Radio', () => {
     Component: Radio,
     displayName: 'Radio',
     primarySlot: 'input',
+    testOptions: {
+      'has-static-classnames': {
+        label: 'Test Label',
+      },
+      // TODO: https://github.com/microsoft/fluentui/issues/19618
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    } as any,
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-radio/src/components/Radio/useRadioStyles.ts b/packages/react-radio/src/components/Radio/useRadioStyles.ts
index 0895d266b901ad..d2eaf8bd8c2158 100644
--- a/packages/react-radio/src/components/Radio/useRadioStyles.ts
+++ b/packages/react-radio/src/components/Radio/useRadioStyles.ts
@@ -1,11 +1,16 @@
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { RadioState } from './Radio.types';
+import type { RadioSlots, RadioState } from './Radio.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 export const radioClassName = 'fui-Radio';
-const indicatorClassName = 'fui-Radio__indicator';
-const labelClassName = 'fui-Radio__label';
+export const radioClassNames: SlotClassNames<RadioSlots> = {
+  root: 'fui-Radio',
+  indicator: 'fui-Radio__indicator',
+  input: 'fui-Radio__input',
+  label: 'fui-Radio__label',
+};
 
 // TODO replace these spacing constants with theme values once they're on the theme
 const spacingHorizontalS = '8px';
@@ -50,33 +55,33 @@ const useInputStyles = makeStyles({
     },
 
     // When unchecked, hide the circle icon (child of the indicator)
-    [`:not(:checked) ~ .${indicatorClassName} > *`]: {
+    [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {
       opacity: '0',
     },
 
     // Colors for the unchecked state
     ':enabled:not(:checked)': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${radioClassNames.label}`]: {
         color: tokens.colorNeutralForeground3,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${radioClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),
       },
 
       ':hover': {
-        [`& ~ .${labelClassName}`]: {
+        [`& ~ .${radioClassNames.label}`]: {
           color: tokens.colorNeutralForeground2,
         },
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${radioClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),
         },
       },
 
       ':hover:active': {
-        [`& ~ .${labelClassName}`]: {
+        [`& ~ .${radioClassNames.label}`]: {
           color: tokens.colorNeutralForeground1,
         },
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${radioClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),
         },
       },
@@ -84,23 +89,23 @@ const useInputStyles = makeStyles({
 
     // Colors for the checked state
     ':enabled:checked': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${radioClassNames.label}`]: {
         color: tokens.colorNeutralForeground1,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${radioClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorCompoundBrandStroke),
         color: tokens.colorCompoundBrandForeground1,
       },
 
       ':hover': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${radioClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),
           color: tokens.colorCompoundBrandForeground1Hover,
         },
       },
 
       ':hover:active': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${radioClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),
           color: tokens.colorCompoundBrandForeground1Pressed,
         },
@@ -109,10 +114,10 @@ const useInputStyles = makeStyles({
 
     // Colors for the disabled state
     ':disabled': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${radioClassNames.label}`]: {
         color: tokens.colorNeutralForegroundDisabled,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${radioClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
         color: tokens.colorNeutralForegroundDisabled,
       },
@@ -161,7 +166,7 @@ const useLabelStyles = makeStyles({
 export const useRadioStyles_unstable = (state: RadioState) => {
   const rootStyles = useRootStyles();
   state.root.className = mergeClasses(
-    radioClassName,
+    radioClassNames.root,
     rootStyles.base,
     rootStyles.focusIndicator,
     state.labelPosition === 'below' && rootStyles.vertical,
@@ -169,15 +174,15 @@ export const useRadioStyles_unstable = (state: RadioState) => {
   );
 
   const inputStyles = useInputStyles();
-  state.input.className = mergeClasses(inputStyles.base, state.input.className);
+  state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);
 
   const indicatorStyles = useIndicatorStyles();
-  state.indicator.className = mergeClasses(indicatorClassName, indicatorStyles.base, state.indicator.className);
+  state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);
 
   const labelStyles = useLabelStyles();
   if (state.label) {
     state.label.className = mergeClasses(
-      labelClassName,
+      radioClassNames.label,
       labelStyles.base,
       state.labelPosition === 'below' && labelStyles.below,
       state.label.className,
diff --git a/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts b/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
index eb21272f801384..8e11856677dd08 100644
--- a/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
+++ b/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
@@ -1,7 +1,11 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
-import { RadioGroupState } from './RadioGroup.types';
+import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 export const radioGroupClassName = 'fui-RadioGroup';
+export const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {
+  root: 'fui-RadioGroup',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -20,7 +24,7 @@ const useStyles = makeStyles({
 export const useRadioGroupStyles_unstable = (state: RadioGroupState) => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    radioGroupClassName,
+    radioGroupClassNames.root,
     styles.root,
     state.layout === 'vertical' && styles.vertical,
     state.root.className,

From 91c0c7bece8c029ab3566c75a30bb972b2407a40 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 16:03:30 -0800
Subject: [PATCH 084/173] Update component creation template

Adds support for static class names objects to the component creation
template.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../{{componentName}}/use{{componentName}}Styles.ts.hbs  | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs b/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs
index d15a6c40364bc0..6937d849e8eee2 100644
--- a/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs
+++ b/scripts/create-component/plop-templates/src/components/{{componentName}}/use{{componentName}}Styles.ts.hbs
@@ -1,8 +1,15 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { {{componentName}}State } from './{{componentName}}.types';
+import type { {{componentName}}Slots, {{componentName}}State } from './{{componentName}}.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 
 export const {{componentNames.propertyName}}ClassName = 'fui-{{componentName}}'
+export const {{componentNames.propertyName}}ClassNames:SlotClassNames<{{componentName}}Slots> = {
+  root: 'fui-{{componentName}}'
+  // TODO: add class names for all slots on {{componentName}}Slots.
+  // Should be of the form `<slotName>: 'fui-{{componentName}}__<slotName>`
+};
+
 /**
  * Styles for the root slot
  */

From 470b5586ae96fefb581a202448311726c21193bf Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 16:17:06 -0800
Subject: [PATCH 085/173] Add static classnames to Accordion

Updates the react-accordion package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../components/Accordion/useAccordionStyles.ts  | 11 +++++++++--
 .../AccordionHeader/AccordionHeader.test.tsx    |  5 +++++
 .../__snapshots__/AccordionHeader.test.tsx.snap |  4 ++--
 .../AccordionHeader/useAccordionHeaderStyles.ts | 17 +++++++++++++++--
 .../AccordionItem/useAccordionItemStyles.ts     | 11 +++++++++--
 .../AccordionPanel/useAccordionPanelStyles.ts   | 11 +++++++++--
 6 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts b/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
index 10bb30b4281c91..6a5250e01fe520 100644
--- a/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
+++ b/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
@@ -1,10 +1,17 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { mergeClasses } from '@griffel/react';
-import type { AccordionState } from './Accordion.types';
+import type { AccordionSlots, AccordionState } from './Accordion.types';
 
+/**
+ * @deprecated
+ */
 export const accordionClassName = 'fui-Accordion';
+export const accordionClassNames: SlotClassNames<AccordionSlots> = {
+  root: 'fui-Accordion',
+};
 
 export const useAccordionStyles_unstable = (state: AccordionState) => {
-  state.root.className = mergeClasses(accordionClassName, state.root.className);
+  state.root.className = mergeClasses(accordionClassNames.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx b/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
index e9eec27b560fcb..63704ed39da3f7 100644
--- a/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
+++ b/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
@@ -14,6 +14,11 @@ describe('AccordionHeader', () => {
     Component: AccordionHeader,
     displayName: 'AccordionHeader',
     helperComponents: [AccordionHeaderContext.Provider],
+    testOptions: {
+      'has-static-classnames': {
+        icon: 'Test Icon',
+      },
+    },
   });
 
   afterEach(() => {
diff --git a/packages/react-accordion/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap b/packages/react-accordion/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
index 8b902553c52158..d7d67797c40dd2 100644
--- a/packages/react-accordion/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
+++ b/packages/react-accordion/src/components/AccordionHeader/__snapshots__/AccordionHeader.test.tsx.snap
@@ -6,13 +6,13 @@ exports[`AccordionHeader renders a default state 1`] = `
 >
   <button
     aria-expanded={false}
-    className=""
+    className="fui-AccordionHeader__button"
     disabled={false}
     onClick={[Function]}
   >
     <span
       aria-hidden={true}
-      className=""
+      className="fui-AccordionHeader__expandIcon"
     >
       <svg
         aria-hidden={true}
diff --git a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
index acce4b16678bb1..3f4e200929f021 100644
--- a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
+++ b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
@@ -1,9 +1,19 @@
 import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-import type { AccordionHeaderState } from './AccordionHeader.types';
+import type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHeader.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const accordionHeaderClassName = 'fui-AccordionHeader';
+export const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots> = {
+  root: 'fui-AccordionHeader',
+  button: 'fui-AccordionHeader__button',
+  expandIcon: 'fui-AccordionHeader__expandIcon',
+  icon: 'fui-AccordionHeader__icon',
+};
 
 const useStyles = makeStyles({
   // TODO: this should be extracted to another package
@@ -88,7 +98,7 @@ const useStyles = makeStyles({
 export const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    accordionHeaderClassName,
+    accordionHeaderClassNames.root,
     styles.root,
     state.inline && styles.rootInline,
     state.disabled && styles.rootDisabled,
@@ -96,6 +106,7 @@ export const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) =
   );
 
   state.button.className = mergeClasses(
+    accordionHeaderClassNames.button,
     styles.resetButton,
     styles.button,
     styles.focusIndicator,
@@ -108,6 +119,7 @@ export const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) =
 
   if (state.expandIcon) {
     state.expandIcon.className = mergeClasses(
+      accordionHeaderClassNames.expandIcon,
       styles.expandIcon,
       state.expandIconPosition === 'start' && styles.expandIconStart,
       state.expandIconPosition === 'end' && styles.expandIconEnd,
@@ -116,6 +128,7 @@ export const useAccordionHeaderStyles_unstable = (state: AccordionHeaderState) =
   }
   if (state.icon) {
     state.icon.className = mergeClasses(
+      accordionHeaderClassNames.icon,
       styles.icon,
       state.expandIconPosition === 'end' && styles.iconExpandIconEnd,
       state.icon.className,
diff --git a/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts b/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
index 450679e3c32de8..8159d53d5777e3 100644
--- a/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
+++ b/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
@@ -1,10 +1,17 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { mergeClasses } from '@griffel/react';
-import type { AccordionItemState } from './AccordionItem.types';
+import type { AccordionItemSlots, AccordionItemState } from './AccordionItem.types';
 
+/**
+ * @deprecated
+ */
 export const accordionItemClassName = 'fui-AccordionItem';
+export const accordionItemClassNames: SlotClassNames<AccordionItemSlots> = {
+  root: 'fui-AccordionItem',
+};
 
 export const useAccordionItemStyles_unstable = (state: AccordionItemState) => {
-  state.root.className = mergeClasses(accordionItemClassName, state.root.className);
+  state.root.className = mergeClasses(accordionItemClassNames.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts b/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
index 74fe24da2cb236..4a78c7a14f80d7 100644
--- a/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
+++ b/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { AccordionPanelState } from './AccordionPanel.types';
+import type { AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';
 
+/**
+ * @deprecated
+ */
 export const accordionPanelClassName = 'fui-AccordionPanel';
+export const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots> = {
+  root: 'fui-AccordionPanel',
+};
 
 /**
  * Styles for the root slot
@@ -16,7 +23,7 @@ const useStyles = makeStyles({
 /** Applies style classnames to slots */
 export const useAccordionPanelStyles_unstable = (state: AccordionPanelState) => {
   const styles = useStyles();
-  state.root.className = mergeClasses(accordionPanelClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(accordionPanelClassNames.root, styles.root, state.root.className);
 
   return state;
 };

From 1ef0aea53c79e1b3f0f0798cb1a115771fa54eb7 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 16:26:41 -0800
Subject: [PATCH 086/173] Add static classnames to Avatar

Updates the react-avatar package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Avatar/Avatar.test.tsx     |  8 +++++
 .../src/components/Avatar/useAvatarStyles.ts  | 33 +++++++++++++++----
 packages/react-conformance/src/types.ts       |  2 +-
 3 files changed, 36 insertions(+), 7 deletions(-)

diff --git a/packages/react-avatar/src/components/Avatar/Avatar.test.tsx b/packages/react-avatar/src/components/Avatar/Avatar.test.tsx
index 4fce4c49e8db35..a1a08cdce616c1 100644
--- a/packages/react-avatar/src/components/Avatar/Avatar.test.tsx
+++ b/packages/react-avatar/src/components/Avatar/Avatar.test.tsx
@@ -7,6 +7,14 @@ describe('Avatar', () => {
   isConformant({
     Component: Avatar,
     displayName: 'Avatar',
+    testOptions: {
+      'has-static-classnames': {
+        image: { src: 'avatar.png', alt: 'test-image' },
+        initials: 'Test Initials',
+        icon: 'Test Icon',
+        badge: 'Test Badge',
+      },
+    },
   });
 
   /**
diff --git a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
index bbc5281c702441..c05f547636ddc5 100644
--- a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
+++ b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
@@ -1,8 +1,19 @@
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { AvatarState } from './Avatar.types';
+import type { AvatarSlots, AvatarState } from './Avatar.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const avatarClassName = 'fui-Avatar';
+export const avatarClassNames: SlotClassNames<AvatarSlots> = {
+  root: 'fui-Avatar',
+  image: 'fui-Avatar__image',
+  initials: 'fui-Avatar__initials',
+  icon: 'fui-Avatar__icon',
+  badge: 'fui-Avatar__badge',
+};
 
 //
 // TODO: All animation constants should go to theme or globals?
@@ -419,18 +430,23 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {
     }
   }
 
-  state.root.className = mergeClasses(avatarClassName, ...rootClasses, state.root.className);
+  state.root.className = mergeClasses(avatarClassNames.root, ...rootClasses, state.root.className);
 
   if (state.badge) {
-    state.badge.className = mergeClasses(styles.badge, size >= 64 && styles.badgeLarge, state.badge.className);
+    state.badge.className = mergeClasses(
+      avatarClassNames.badge,
+      styles.badge,
+      size >= 64 && styles.badgeLarge,
+      state.badge.className,
+    );
   }
 
   if (state.image) {
-    state.image.className = mergeClasses(styles.image, state.image.className);
+    state.image.className = mergeClasses(avatarClassNames.image, styles.image, state.image.className);
   }
 
   if (state.initials) {
-    state.initials.className = mergeClasses(styles.iconInitials, state.initials.className);
+    state.initials.className = mergeClasses(avatarClassNames.initials, styles.iconInitials, state.initials.className);
   }
 
   if (state.icon) {
@@ -449,7 +465,12 @@ export const useAvatarStyles_unstable = (state: AvatarState): AvatarState => {
       iconSizeClass = styles.icon48;
     }
 
-    state.icon.className = mergeClasses(styles.iconInitials, iconSizeClass, state.icon.className);
+    state.icon.className = mergeClasses(
+      avatarClassNames.icon,
+      styles.iconInitials,
+      iconSizeClass,
+      state.icon.className,
+    );
   }
 
   return state;
diff --git a/packages/react-conformance/src/types.ts b/packages/react-conformance/src/types.ts
index 0cbbe54ce249ff..663996c4b731ba 100644
--- a/packages/react-conformance/src/types.ts
+++ b/packages/react-conformance/src/types.ts
@@ -15,7 +15,7 @@ export interface TestOptions {
     ignoreProps?: string[];
   };
   'has-static-classnames'?: {
-    [key: string]: string;
+    [key: string]: string | {};
   };
 }
 

From 64c4962f4c1fa2e01a4c1ac4e3890b8711ffcac9 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 16:41:35 -0800
Subject: [PATCH 087/173] Add static classnames to Badge

Updates the react-badge package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Badge/Badge.test.tsx       |  5 +++++
 .../src/components/Badge/useBadgeStyles.ts    | 19 ++++++++++++++++---
 .../CounterBadge/CounterBadge.test.tsx        |  5 +++++
 .../CounterBadge/useCounterBadgeStyles.ts     | 16 +++++++++++++++-
 .../__snapshots__/PresenceBadge.test.tsx.snap |  4 +++-
 .../PresenceBadge/usePresenceBadgeStyles.ts   | 15 ++++++++++++++-
 6 files changed, 58 insertions(+), 6 deletions(-)

diff --git a/packages/react-badge/src/components/Badge/Badge.test.tsx b/packages/react-badge/src/components/Badge/Badge.test.tsx
index db081cf3cee421..aaee966bd55ba5 100644
--- a/packages/react-badge/src/components/Badge/Badge.test.tsx
+++ b/packages/react-badge/src/components/Badge/Badge.test.tsx
@@ -8,6 +8,11 @@ describe('Badge', () => {
   isConformant({
     Component: Badge,
     displayName: 'Badge',
+    testOptions: {
+      'has-static-classnames': {
+        icon: 'Test Icon',
+      },
+    },
   });
 
   let wrapper: ReactWrapper | undefined;
diff --git a/packages/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
index a7ed187cf4020e..926eee830d4242 100644
--- a/packages/react-badge/src/components/Badge/useBadgeStyles.ts
+++ b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
@@ -1,8 +1,16 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { BadgeState } from './Badge.types';
+import type { BadgeSlots, BadgeState } from './Badge.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const badgeClassName = 'fui-Badge';
+export const badgeClassNames: SlotClassNames<BadgeSlots> = {
+  root: 'fui-Badge',
+  icon: 'fui-Badge__icon',
+};
 
 const useRootStyles = makeStyles({
   base: {
@@ -261,7 +269,7 @@ export const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {
   const rootStyles = useRootStyles();
 
   state.root.className = mergeClasses(
-    badgeClassName,
+    badgeClassNames.root,
     rootStyles.base,
     rootStyles[state.size],
     rootStyles[state.shape],
@@ -275,7 +283,12 @@ export const useBadgeStyles_unstable = (state: BadgeState): BadgeState => {
 
   const iconStyles = useIconStyles();
   if (state.icon) {
-    state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);
+    state.icon.className = mergeClasses(
+      badgeClassNames.icon,
+      iconStyles.base,
+      iconStyles[state.size],
+      state.icon.className,
+    );
   }
 
   return state;
diff --git a/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx b/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
index ca023e85028b38..0979f4d65c2149 100644
--- a/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
+++ b/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
@@ -8,6 +8,11 @@ describe('CounterBadge', () => {
   isConformant({
     Component: CounterBadge,
     displayName: 'CounterBadge',
+    testOptions: {
+      'has-static-classnames': {
+        icon: 'Test Icon',
+      },
+    },
   });
 
   let wrapper: ReactWrapper | undefined;
diff --git a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
index 2eebfc42b0eab9..5db456cce63704 100644
--- a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
+++ b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
@@ -1,8 +1,17 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
+import { BadgeSlots } from '../Badge/Badge.types';
 import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';
 import type { CounterBadgeState } from './CounterBadge.types';
 
+/**
+ * @deprecated
+ */
 export const counterBadgeClassName = 'fui-CounterBadge';
+export const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {
+  root: 'fui-CounterBadge',
+  icon: 'fui-CounterBadge__icon',
+};
 
 const useStyles = makeStyles({
   dot: {
@@ -22,10 +31,15 @@ const useStyles = makeStyles({
 export const useCounterBadgeStyles_unstable = (state: CounterBadgeState): CounterBadgeState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    counterBadgeClassName,
+    counterBadgeClassNames.root,
     state.dot && styles.dot,
     !state.showZero && state.count === 0 && !state.dot && styles.hide,
     state.root.className,
   );
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(counterBadgeClassNames.icon, state.icon.className);
+  }
+
   return useBadgeStyles_unstable(state) as CounterBadgeState;
 };
diff --git a/packages/react-badge/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap b/packages/react-badge/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap
index b78f582b95e28d..259f4e749489a2 100644
--- a/packages/react-badge/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap
+++ b/packages/react-badge/src/components/PresenceBadge/__snapshots__/PresenceBadge.test.tsx.snap
@@ -5,7 +5,9 @@ exports[`PresenceBadge renders a default state 1`] = `
   aria-hidden={true}
   className="fui-PresenceBadge"
 >
-  <span>
+  <span
+    className="fui-PresenceBadge__icon"
+  >
     <svg
       aria-hidden={true}
       className=""
diff --git a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
index 644dc0f337eb0d..a5e5b7b785aecd 100644
--- a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
+++ b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
@@ -1,8 +1,17 @@
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { PresenceBadgeState } from './PresenceBadge.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
+import { BadgeSlots } from '../Badge/Badge.types';
 
+/**
+ * @deprecated
+ */
 export const presenceBadgeClassName = 'fui-PresenceBadge';
+export const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {
+  root: 'fui-PresenceBadge',
+  icon: 'fui-PresenceBadge__icon',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -81,7 +90,7 @@ const useStyles = makeStyles({
 export const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): PresenceBadgeState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    presenceBadgeClassName,
+    presenceBadgeClassNames.root,
     styles.root,
     ['busy', 'doNotDisturb', 'unknown'].includes(state.status) && styles.statusBusy,
     state.status === 'away' && styles.statusAway,
@@ -100,5 +109,9 @@ export const usePresenceBadgeStyles_unstable = (state: PresenceBadgeState): Pres
     state.root.className,
   );
 
+  if (state.icon) {
+    state.icon.className = mergeClasses(presenceBadgeClassNames.icon, state.icon.className);
+  }
+
   return state;
 };

From 7c3b8e3802aba5b444764b15d32cb0ebfc3b4b99 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 17:04:26 -0800
Subject: [PATCH 088/173] Add static classnames to Card

Updates the react-card package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Card/useCardStyles.ts      | 11 +++++--
 .../__snapshots__/CardFooter.test.tsx.snap    |  2 +-
 .../CardFooter/useCardFooterStyles.ts         | 14 ++++++--
 .../components/CardHeader/CardHeader.test.tsx |  5 +++
 .../__snapshots__/CardHeader.test.tsx.snap    |  8 +++--
 .../CardHeader/useCardHeaderStyles.ts         | 32 ++++++++++++++++---
 .../CardPreview/CardPreview.test.tsx          |  5 +++
 .../__snapshots__/CardPreview.test.tsx.snap   |  2 +-
 .../CardPreview/useCardPreviewStyles.ts       | 14 ++++++--
 9 files changed, 76 insertions(+), 17 deletions(-)

diff --git a/packages/react-card/src/components/Card/useCardStyles.ts b/packages/react-card/src/components/Card/useCardStyles.ts
index 2c16bc278882bb..54fe72d5b418b3 100644
--- a/packages/react-card/src/components/Card/useCardStyles.ts
+++ b/packages/react-card/src/components/Card/useCardStyles.ts
@@ -1,9 +1,16 @@
 import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { cardPreviewClassName } from '../CardPreview/index';
-import type { CardState } from './Card.types';
+import type { CardSlots, CardState } from './Card.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const cardClassName = 'fui-Card';
+export const cardClassNames: SlotClassNames<CardSlots> = {
+  root: 'fui-Card',
+};
 
 /**
  * Styles for the root slot
@@ -124,7 +131,7 @@ export const useCardStyles_unstable = (state: CardState): CardState => {
     state.root.onTouchEnd;
 
   state.root.className = mergeClasses(
-    cardClassName,
+    cardClassNames.root,
     styles.root,
     state.appearance === 'filled' && styles.filled,
     state.appearance === 'filled-alternative' && styles.filledAlternative,
diff --git a/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap b/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap
index e549ccc76536b8..11d4ba5e2fc2c5 100644
--- a/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap
+++ b/packages/react-card/src/components/CardFooter/__snapshots__/CardFooter.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`CardFooter renders a default state 1`] = `
   >
     Default CardFooter
     <div
-      class=""
+      class="fui-CardFooter__action"
     >
       Action slot
     </div>
diff --git a/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts b/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
index a83069ff8aa113..edb09fb50d7cc4 100644
--- a/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
+++ b/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
@@ -1,7 +1,15 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { CardFooterState } from './CardFooter.types';
+import type { CardFooterSlots, CardFooterState } from './CardFooter.types';
 
+/**
+ * @deprecated
+ */
 export const cardFooterClassName = 'fui-CardFooter';
+export const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {
+  root: 'fui-CardFooter',
+  action: 'fui-CardFooter__action',
+};
 
 /**
  * Styles for the root slot
@@ -22,10 +30,10 @@ const useStyles = makeStyles({
  */
 export const useCardFooterStyles_unstable = (state: CardFooterState): CardFooterState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(cardFooterClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(cardFooterClassNames.root, styles.root, state.root.className);
 
   if (state.action) {
-    state.action.className = mergeClasses(styles.action, state.action.className);
+    state.action.className = mergeClasses(cardFooterClassNames.action, styles.action, state.action.className);
   }
 
   return state;
diff --git a/packages/react-card/src/components/CardHeader/CardHeader.test.tsx b/packages/react-card/src/components/CardHeader/CardHeader.test.tsx
index 9dc742cf7ec20a..7fb93decc8d34a 100644
--- a/packages/react-card/src/components/CardHeader/CardHeader.test.tsx
+++ b/packages/react-card/src/components/CardHeader/CardHeader.test.tsx
@@ -7,6 +7,11 @@ describe('CardHeader', () => {
   isConformant({
     Component: CardHeader,
     displayName: 'CardHeader',
+    testOptions: {
+      'has-static-classnames': {
+        header: 'Header Test',
+      },
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap b/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap
index 2232557b8bfbab..e69c93adfd1a18 100644
--- a/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap
+++ b/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap
@@ -6,17 +6,19 @@ exports[`CardHeader renders a default state 1`] = `
     class="fui-CardHeader"
   >
     <div
-      class=""
+      class="fui-CardHeader__image"
     >
       Image slot
     </div>
     <div
-      class=""
+      class="fui-CardHeader__content"
     >
       Title slot
       Description slot
     </div>
-    <div>
+    <div
+      class="fui-CardHeader__action"
+    >
       Action slot
     </div>
   </div>
diff --git a/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts b/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
index 9ace96d870eede..c1d30d319c6b18 100644
--- a/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
+++ b/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
@@ -1,7 +1,19 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { CardHeaderState } from './CardHeader.types';
+import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
 
+/**
+ * @deprecated
+ */
 export const cardHeaderClassName = 'fui-CardHeader';
+export const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {
+  root: 'fui-CardHeader',
+  image: 'fui-CardHeader__image',
+  content: 'fui-CardHeader__content',
+  header: 'fui-CardHeader__header',
+  description: 'fui-CardHeader__description',
+  action: 'fui-CardHeader__action',
+};
 
 /**
  * Styles for the root slot
@@ -48,14 +60,26 @@ const useStyles = makeStyles({
  */
 export const useCardHeaderStyles_unstable = (state: CardHeaderState): CardHeaderState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(cardHeaderClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(cardHeaderClassNames.root, styles.root, state.root.className);
 
   if (state.image) {
-    state.image.className = mergeClasses(styles.image, state.image.className);
+    state.image.className = mergeClasses(cardHeaderClassNames.image, styles.image, state.image.className);
   }
 
   if (state.content) {
-    state.content.className = mergeClasses(styles.textContainer, state.content.className);
+    state.content.className = mergeClasses(cardHeaderClassNames.content, styles.textContainer, state.content.className);
+  }
+
+  if (state.header) {
+    state.header.className = mergeClasses(cardHeaderClassNames.header, state.header.className);
+  }
+
+  if (state.description) {
+    state.description.className = mergeClasses(cardHeaderClassNames.description, state.description.className);
+  }
+
+  if (state.action) {
+    state.action.className = mergeClasses(cardHeaderClassNames.action, state.action.className);
   }
 
   return state;
diff --git a/packages/react-card/src/components/CardPreview/CardPreview.test.tsx b/packages/react-card/src/components/CardPreview/CardPreview.test.tsx
index 2df6f9360e939c..ebdd6e2fe68cb5 100644
--- a/packages/react-card/src/components/CardPreview/CardPreview.test.tsx
+++ b/packages/react-card/src/components/CardPreview/CardPreview.test.tsx
@@ -7,6 +7,11 @@ describe('CardPreview', () => {
   isConformant({
     Component: CardPreview,
     displayName: 'CardPreview',
+    testOptions: {
+      'has-static-classnames': {
+        logo: 'Test Logo',
+      },
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap b/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
index b734ccb54fb5fd..f7009bc0f97902 100644
--- a/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
+++ b/packages/react-card/src/components/CardPreview/__snapshots__/CardPreview.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`CardPreview renders a default state 1`] = `
   >
     Default CardPreview
     <div
-      class=""
+      class="fui-CardPreview__logo"
     >
       Logo slot
     </div>
diff --git a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
index c57fe3e7ceb639..1b97bd74b78fd2 100644
--- a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
+++ b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
@@ -1,7 +1,15 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { CardPreviewState } from './CardPreview.types';
+import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
 
+/**
+ * @deprecated
+ */
 export const cardPreviewClassName = 'fui-CardPreview';
+export const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {
+  root: 'fui-CardPreview',
+  logo: 'fui-CardPreview__logo',
+};
 
 /**
  * Styles for the root slot
@@ -30,10 +38,10 @@ const useStyles = makeStyles({
  */
 export const useCardPreviewStyles_unstable = (state: CardPreviewState): CardPreviewState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(cardPreviewClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(cardPreviewClassNames.root, styles.root, state.root.className);
 
   if (state.logo) {
-    state.logo.className = mergeClasses(styles.logo, state.logo.className);
+    state.logo.className = mergeClasses(cardPreviewClassNames.logo, styles.logo, state.logo.className);
   }
 
   return state;

From 2ec95c4fd0f93086d2f18def92c7ff696ffd4cdf Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 17:09:51 -0800
Subject: [PATCH 089/173] Add static classnames to Checkbox

Updates the react-checkbox package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Checkbox/Checkbox.test.tsx |  5 ++
 .../__snapshots__/Checkbox.test.tsx.snap      | 10 ++--
 .../components/Checkbox/useCheckboxStyles.ts  | 56 +++++++++++--------
 3 files changed, 42 insertions(+), 29 deletions(-)

diff --git a/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx b/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
index 29e17472cc0f86..2b42e5cf4f23f2 100644
--- a/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
+++ b/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
@@ -16,6 +16,11 @@ describe('Checkbox', () => {
     Component: Checkbox,
     displayName: 'Checkbox',
     primarySlot: 'input',
+    testOptions: {
+      'has-static-classnames': {
+        label: 'Test Label',
+      },
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index c4870e1c6044fe..47a3285c0a7f44 100644
--- a/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/react-checkbox/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Checkbox renders a custom indicator 1`] = `
     class="fui-Checkbox"
   >
     <input
-      class=""
+      class="fui-Checkbox__input"
       id="checkbox-1"
       type="checkbox"
     />
@@ -34,7 +34,7 @@ exports[`Checkbox renders a default state 1`] = `
     class="fui-Checkbox"
   >
     <input
-      class=""
+      class="fui-Checkbox__input"
       id="checkbox-1"
       type="checkbox"
     />
@@ -67,7 +67,7 @@ exports[`Checkbox renders checked 1`] = `
   >
     <input
       checked=""
-      class=""
+      class="fui-Checkbox__input"
       id="checkbox-1"
       type="checkbox"
     />
@@ -105,7 +105,7 @@ exports[`Checkbox renders mixed 1`] = `
     class="fui-Checkbox"
   >
     <input
-      class=""
+      class="fui-Checkbox__input"
       id="checkbox-1"
       type="checkbox"
     />
@@ -143,7 +143,7 @@ exports[`Checkbox renders with a label 1`] = `
     class="fui-Checkbox"
   >
     <input
-      class=""
+      class="fui-Checkbox__input"
       id="checkbox-1"
       type="checkbox"
     />
diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
index 52253bbd22d8eb..1c0f5a1070606b 100644
--- a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
+++ b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
@@ -1,11 +1,19 @@
 import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-import { CheckboxState } from './Checkbox.types';
+import { CheckboxSlots, CheckboxState } from './Checkbox.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const checkboxClassName = 'fui-Checkbox';
-const indicatorClassName = 'fui-Checkbox__indicator';
-const labelClassName = 'fui-Checkbox__label';
+export const checkboxClassNames: SlotClassNames<CheckboxSlots> = {
+  root: 'fui-Checkbox',
+  label: 'fui-Checkbox__label',
+  input: 'fui-Checkbox__input',
+  indicator: 'fui-Checkbox__indicator',
+};
 
 // TODO replace these spacing constants with theme values once they're on the theme
 const spacingHorizontalS = '8px';
@@ -38,33 +46,33 @@ const useInputStyles = makeStyles({
     cursor: 'pointer',
 
     // When unchecked, hide the the checkmark icon (child of the indicator slot)
-    [`:not(:checked):not(:indeterminate) ~ .${indicatorClassName} > *`]: {
+    [`:not(:checked):not(:indeterminate) ~ .${checkboxClassNames.indicator} > *`]: {
       opacity: 0,
     },
 
     // Colors for the unchecked state
     ':enabled:not(:checked):not(:indeterminate)': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${checkboxClassNames.label}`]: {
         color: tokens.colorNeutralForeground3,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${checkboxClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),
       },
 
       ':hover': {
-        [`& ~ .${labelClassName}`]: {
+        [`& ~ .${checkboxClassNames.label}`]: {
           color: tokens.colorNeutralForeground2,
         },
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),
         },
       },
 
       ':active:hover': {
-        [`& ~ .${labelClassName}`]: {
+        [`& ~ .${checkboxClassNames.label}`]: {
           color: tokens.colorNeutralForeground1,
         },
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),
         },
       },
@@ -72,24 +80,24 @@ const useInputStyles = makeStyles({
 
     // Colors for the checked state
     ':enabled:checked:not(:indeterminate)': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${checkboxClassNames.label}`]: {
         color: tokens.colorNeutralForeground1,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${checkboxClassNames.indicator}`]: {
         backgroundColor: tokens.colorCompoundBrandBackground,
         color: tokens.colorNeutralForegroundOnBrand,
         ...shorthands.borderColor(tokens.colorCompoundBrandBackground),
       },
 
       ':hover': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           backgroundColor: tokens.colorCompoundBrandBackgroundHover,
           ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundHover),
         },
       },
 
       ':active:hover': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           backgroundColor: tokens.colorCompoundBrandBackgroundPressed,
           ...shorthands.borderColor(tokens.colorCompoundBrandBackgroundPressed),
         },
@@ -98,23 +106,23 @@ const useInputStyles = makeStyles({
 
     // Colors for the mixed state
     ':enabled:indeterminate': {
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${checkboxClassNames.label}`]: {
         color: tokens.colorNeutralForeground1,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${checkboxClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorCompoundBrandStroke),
         color: tokens.colorCompoundBrandForeground1,
       },
 
       ':hover': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),
           color: tokens.colorCompoundBrandForeground1Hover,
         },
       },
 
       ':active:hover': {
-        [`& ~ .${indicatorClassName}`]: {
+        [`& ~ .${checkboxClassNames.indicator}`]: {
           ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),
           color: tokens.colorCompoundBrandForeground1Pressed,
         },
@@ -124,10 +132,10 @@ const useInputStyles = makeStyles({
     ':disabled': {
       cursor: 'default',
 
-      [`& ~ .${labelClassName}`]: {
+      [`& ~ .${checkboxClassNames.label}`]: {
         color: tokens.colorNeutralForegroundDisabled,
       },
-      [`& ~ .${indicatorClassName}`]: {
+      [`& ~ .${checkboxClassNames.indicator}`]: {
         ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),
         color: tokens.colorNeutralForegroundDisabled,
       },
@@ -192,15 +200,15 @@ const useLabelStyles = makeStyles({
  */
 export const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState => {
   const rootStyles = useRootStyles();
-  state.root.className = mergeClasses(checkboxClassName, rootStyles.base, state.root.className);
+  state.root.className = mergeClasses(checkboxClassNames.root, rootStyles.base, state.root.className);
 
   const inputStyles = useInputStyles();
-  state.input.className = mergeClasses(inputStyles.base, state.input.className);
+  state.input.className = mergeClasses(checkboxClassNames.input, inputStyles.base, state.input.className);
 
   const indicatorStyles = useIndicatorStyles();
   if (state.indicator) {
     state.indicator.className = mergeClasses(
-      indicatorClassName,
+      checkboxClassNames.indicator,
       indicatorStyles.base,
       indicatorStyles[state.size],
       state.shape === 'circular' && indicatorStyles.circular,
@@ -211,7 +219,7 @@ export const useCheckboxStyles_unstable = (state: CheckboxState): CheckboxState
   const labelStyles = useLabelStyles();
   if (state.label) {
     state.label.className = mergeClasses(
-      labelClassName,
+      checkboxClassNames.label,
       labelStyles.base,
       labelStyles[state.size],
       state.label.className,

From 10663d03f40dfdc455c37b284ef077271d96d6d9 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 17:12:26 -0800
Subject: [PATCH 090/173] Add static classnames to Dialog

Updates the react-dialog package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Dialog/useDialogStyles.ts         | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
index 9b305459c3a799..4ea61edb04c9ed 100644
--- a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
+++ b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
@@ -1,8 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { DialogState } from './Dialog.types';
+import type { DialogSlots, DialogState } from './Dialog.types';
 
+/**
+ * @deprecated
+ */
 export const dialogClassName = 'fui-Dialog';
-
+export const dialogClassNames: SlotClassNames<DialogSlots> = {
+  root: 'fui-Dialog',
+};
 /**
  * Styles for the root slot
  */
@@ -19,7 +25,7 @@ const useStyles = makeStyles({
  */
 export const useDialogStyles_unstable = (state: DialogState): DialogState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(dialogClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(dialogClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);

From 5af5ec63ba7dc63cbeefa1ec649d8bb2f40549f9 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 17:18:36 -0800
Subject: [PATCH 091/173] Add static classnames to Divider

Updates the react-divider package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Divider/Divider.test.tsx      |  5 +++++
 .../Divider/__snapshots__/Divider.test.tsx.snap  | 11 +++++++++++
 .../src/components/Divider/useDividerStyles.ts   | 16 ++++++++++++++--
 3 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/react-divider/src/components/Divider/Divider.test.tsx b/packages/react-divider/src/components/Divider/Divider.test.tsx
index 2835303292749d..40f7308bc27637 100644
--- a/packages/react-divider/src/components/Divider/Divider.test.tsx
+++ b/packages/react-divider/src/components/Divider/Divider.test.tsx
@@ -12,6 +12,11 @@ describe('Divider', () => {
   isConformant({
     Component: Divider,
     displayName: 'Divider',
+    testOptions: {
+      'has-static-classnames': {
+        children: 'Test Children',
+      },
+    },
   });
 
   it('renders a default divider', () => {
diff --git a/packages/react-divider/src/components/Divider/__snapshots__/Divider.test.tsx.snap b/packages/react-divider/src/components/Divider/__snapshots__/Divider.test.tsx.snap
index 706427042ce317..56918ea5d0a392 100644
--- a/packages/react-divider/src/components/Divider/__snapshots__/Divider.test.tsx.snap
+++ b/packages/react-divider/src/components/Divider/__snapshots__/Divider.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`Divider renders a brand appearance 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Brand
@@ -39,6 +40,7 @@ exports[`Divider renders a divider with content 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Default Divider
@@ -54,6 +56,7 @@ exports[`Divider renders a divider with inset 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Inset
@@ -74,6 +77,7 @@ exports[`Divider renders a horizontal divider with a fixed width 1`] = `
   }
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     fixed 100px width
@@ -89,6 +93,7 @@ exports[`Divider renders a strong appearance 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Strong
@@ -104,6 +109,7 @@ exports[`Divider renders a subtle appearance 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Subtle
@@ -132,6 +138,7 @@ exports[`Divider renders a vertical divider with a fixed height 1`] = `
   }
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     fixed 100px height
@@ -147,6 +154,7 @@ exports[`Divider renders a vertical divider with content 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Vertical
@@ -162,6 +170,7 @@ exports[`Divider renders content center aligned 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Center
@@ -177,6 +186,7 @@ exports[`Divider renders content end aligned 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     End
@@ -192,6 +202,7 @@ exports[`Divider renders content start aligned 1`] = `
   role="separator"
 >
   <div
+    className="fui-Divider__wrapper"
     id="divider-1"
   >
     Start
diff --git a/packages/react-divider/src/components/Divider/useDividerStyles.ts b/packages/react-divider/src/components/Divider/useDividerStyles.ts
index 82d26e9952039c..ee1ff86fcbb1f3 100644
--- a/packages/react-divider/src/components/Divider/useDividerStyles.ts
+++ b/packages/react-divider/src/components/Divider/useDividerStyles.ts
@@ -1,8 +1,16 @@
 import { mergeClasses, shorthands, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { DividerState } from './Divider.types';
+import { DividerSlots, DividerState } from './Divider.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const dividerClassName = 'fui-Divider';
+export const dividerClassNames: SlotClassNames<DividerSlots> = {
+  root: 'fui-Divider',
+  wrapper: 'fui-Divider__wrapper',
+};
 
 const contentSpacing = '12px';
 const insetSpacing = '12px';
@@ -233,7 +241,7 @@ export const useDividerStyles_unstable = (state: DividerState): DividerState =>
   const { alignContent, appearance, inset, vertical } = state;
 
   state.root.className = mergeClasses(
-    dividerClassName,
+    dividerClassNames.root,
 
     // Base styles
     baseStyles.base,
@@ -258,5 +266,9 @@ export const useDividerStyles_unstable = (state: DividerState): DividerState =>
     state.root.className,
   );
 
+  if (state.wrapper) {
+    state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);
+  }
+
   return state;
 };

From 2b116825d6c3ad2d6585f795af1ea14f3b9cb233 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 17:20:42 -0800
Subject: [PATCH 092/173] Add static classnames to Image

Updates the react-image package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Image/useImageStyles.ts            | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react-image/src/components/Image/useImageStyles.ts b/packages/react-image/src/components/Image/useImageStyles.ts
index f99fd7163a3128..f56812b42500a9 100644
--- a/packages/react-image/src/components/Image/useImageStyles.ts
+++ b/packages/react-image/src/components/Image/useImageStyles.ts
@@ -1,8 +1,15 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { ImageState } from './Image.types';
+import type { ImageSlots, ImageState } from './Image.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const imageClassName = 'fui-Image';
+export const imageClassNames: SlotClassNames<ImageSlots> = {
+  root: 'fui-Image',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -57,7 +64,7 @@ const useStyles = makeStyles({
 export const useImageStyles_unstable = (state: ImageState) => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    imageClassName,
+    imageClassNames.root,
     styles.root,
     state.bordered && styles.rootBordered,
     state.shape === 'circular' && styles.rootCircular,

From 7ed4e10d635e827aac725dd84499678163d6361c Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 4 Mar 2022 17:28:23 -0800
Subject: [PATCH 093/173] Add static classnames to Input

Updates the react-input package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Input/Input.test.tsx       |  6 +++++
 .../Input/__snapshots__/Input.test.tsx.snap   |  2 +-
 .../src/components/Input/useInputStyles.ts    | 27 ++++++++++++++++---
 3 files changed, 30 insertions(+), 5 deletions(-)

diff --git a/packages/react-input/src/components/Input/Input.test.tsx b/packages/react-input/src/components/Input/Input.test.tsx
index b4781fae647275..3d6ca22e79ffce 100644
--- a/packages/react-input/src/components/Input/Input.test.tsx
+++ b/packages/react-input/src/components/Input/Input.test.tsx
@@ -21,6 +21,12 @@ describe('Input', () => {
     Component: Input,
     displayName: 'Input',
     primarySlot: 'input',
+    testOptions: {
+      'has-static-classnames': {
+        contentBefore: 'Test Content Before',
+        contentAfter: 'Test Content After',
+      },
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-input/src/components/Input/__snapshots__/Input.test.tsx.snap b/packages/react-input/src/components/Input/__snapshots__/Input.test.tsx.snap
index 401b8c53494544..e78852255e0d9b 100644
--- a/packages/react-input/src/components/Input/__snapshots__/Input.test.tsx.snap
+++ b/packages/react-input/src/components/Input/__snapshots__/Input.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Input renders a default state 1`] = `
     class="fui-Input"
   >
     <input
-      class=""
+      class="fui-Input__input"
       type="text"
       value=""
     />
diff --git a/packages/react-input/src/components/Input/useInputStyles.ts b/packages/react-input/src/components/Input/useInputStyles.ts
index aa6ff72ca2f92c..fffc08a5872307 100644
--- a/packages/react-input/src/components/Input/useInputStyles.ts
+++ b/packages/react-input/src/components/Input/useInputStyles.ts
@@ -1,8 +1,18 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { InputState } from './Input.types';
+import type { InputSlots, InputState } from './Input.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const inputClassName = 'fui-Input';
+export const inputClassNames: SlotClassNames<InputSlots> = {
+  root: 'fui-Input',
+  input: 'fui-Input__input',
+  contentBefore: 'fui-Input__contentBefore',
+  contentAfter: 'fui-Input__contentAfter',
+};
 
 // TODO(sharing) use theme values once available
 const horizontalSpacing = {
@@ -246,7 +256,7 @@ export const useInputStyles_unstable = (state: InputState): InputState => {
   const contentStyles = useContentStyles();
 
   state.root.className = mergeClasses(
-    inputClassName,
+    inputClassNames.root,
     rootStyles.base,
     rootStyles[size],
     rootStyles[appearance],
@@ -261,6 +271,7 @@ export const useInputStyles_unstable = (state: InputState): InputState => {
   );
 
   state.input.className = mergeClasses(
+    inputClassNames.input,
     inputStyles.base,
     inputStyles[size],
     disabled && inputStyles.disabled,
@@ -269,10 +280,18 @@ export const useInputStyles_unstable = (state: InputState): InputState => {
 
   const contentClasses = [contentStyles.base, disabled && contentStyles.disabled];
   if (state.contentBefore) {
-    state.contentBefore.className = mergeClasses(...contentClasses, state.contentBefore.className);
+    state.contentBefore.className = mergeClasses(
+      inputClassNames.contentBefore,
+      ...contentClasses,
+      state.contentBefore.className,
+    );
   }
   if (state.contentAfter) {
-    state.contentAfter.className = mergeClasses(...contentClasses, state.contentAfter.className);
+    state.contentAfter.className = mergeClasses(
+      inputClassNames.contentAfter,
+      ...contentClasses,
+      state.contentAfter.className,
+    );
   }
 
   return state;

From 5cb92a6ef0baf013c5508e75892614aab4f67125 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 09:45:52 -0800
Subject: [PATCH 094/173] Add static classnames to Label

Updates the react-label package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Label/Label.test.tsx            |  5 +++++
 .../Label/__snapshots__/Label.test.tsx.snap        |  2 +-
 .../src/components/Label/useLabelStyles.ts         | 14 +++++++++++---
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/react-label/src/components/Label/Label.test.tsx b/packages/react-label/src/components/Label/Label.test.tsx
index 52960fc4071b38..0f8a2e19ba1fd7 100644
--- a/packages/react-label/src/components/Label/Label.test.tsx
+++ b/packages/react-label/src/components/Label/Label.test.tsx
@@ -8,6 +8,11 @@ describe('Label', () => {
     Component: Label,
     displayName: 'Label',
     requiredProps: { children: "I'm a label." },
+    testOptions: {
+      'has-static-classnames': {
+        required: 'Required Test',
+      },
+    },
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
diff --git a/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap b/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap
index a2bd95cdf0c52d..ecc930d1af9e45 100644
--- a/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap
+++ b/packages/react-label/src/components/Label/__snapshots__/Label.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`Label renders a custom asterisk 1`] = `
       I'm a label
       <span
         aria-hidden="true"
-        class=""
+        class="fui-Label__required"
       >
         foo
       </span>
diff --git a/packages/react-label/src/components/Label/useLabelStyles.ts b/packages/react-label/src/components/Label/useLabelStyles.ts
index 4787b4040b9443..9ef6fa734208fe 100644
--- a/packages/react-label/src/components/Label/useLabelStyles.ts
+++ b/packages/react-label/src/components/Label/useLabelStyles.ts
@@ -1,8 +1,16 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { LabelState } from './Label.types';
+import type { LabelSlots, LabelState } from './Label.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const labelClassName = 'fui-Label';
+export const labelClassNames: SlotClassNames<LabelSlots> = {
+  root: 'fui-Label',
+  required: 'fui-Label__required',
+};
 
 /**
  * Styles for the label
@@ -49,7 +57,7 @@ const useStyles = makeStyles({
 export const useLabelStyles_unstable = (state: LabelState): LabelState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    labelClassName,
+    labelClassNames.root,
     styles.root,
     state.disabled && styles.disabled,
     styles[state.size],
@@ -58,7 +66,7 @@ export const useLabelStyles_unstable = (state: LabelState): LabelState => {
   );
 
   if (state.required) {
-    state.required.className = mergeClasses(styles.required, state.required.className);
+    state.required.className = mergeClasses(labelClassNames.required, styles.required, state.required.className);
   }
 
   return state;

From 857b7929945b221225bf6636167996c23097ae63 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 09:49:01 -0800
Subject: [PATCH 095/173] Add static classnames to Link

Updates the react-link package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../react-link/src/components/Link/useLinkStyles.ts   | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react-link/src/components/Link/useLinkStyles.ts b/packages/react-link/src/components/Link/useLinkStyles.ts
index eb901e24f41397..b7873b5a90fb77 100644
--- a/packages/react-link/src/components/Link/useLinkStyles.ts
+++ b/packages/react-link/src/components/Link/useLinkStyles.ts
@@ -1,9 +1,16 @@
 import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-import type { LinkState } from './Link.types';
+import type { LinkSlots, LinkState } from './Link.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const linkClassName = 'fui-Link';
+export const linkClassNames: SlotClassNames<LinkSlots> = {
+  root: 'fui-Link',
+};
 
 const useStyles = makeStyles({
   focusIndicator: createCustomFocusIndicatorStyle({
@@ -91,7 +98,7 @@ const useStyles = makeStyles({
 export const useLinkStyles_unstable = (state: LinkState): LinkState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    linkClassName,
+    linkClassNames.root,
     styles.root,
     styles.focusIndicator,
     state.root.as === 'a' && state.root.href && styles.href,

From eed93500f6f004d08e53bf27b7d6a7d67d7ddfa7 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 11:37:35 -0800
Subject: [PATCH 096/173] Add static classnames to Menu

Updates the react-menu package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Menu/Menu.test.tsx         |  1 +
 .../MenuDivider/useMenuDividerStyles.ts       | 11 +++++--
 .../MenuGroup/useMenuGroupStyles.ts           | 11 +++++--
 .../useMenuGroupHeaderStyles.ts               | 11 +++++--
 .../src/components/MenuItem/MenuItem.test.tsx |  9 +++++
 .../__snapshots__/MenuItem.test.tsx.snap      |  2 +-
 .../components/MenuItem/useMenuItemStyles.ts  | 31 ++++++++++++++---
 .../MenuItemCheckbox.test.tsx                 |  9 +++++
 .../MenuItemCheckbox.test.tsx.snap            |  4 +--
 .../useMenuItemCheckboxStyles.ts              | 33 ++++++++++++++++++-
 .../MenuItemRadio/MenuItemRadio.test.tsx      |  9 +++++
 .../__snapshots__/MenuItemRadio.test.tsx.snap |  4 +--
 .../MenuItemRadio/useMenuItemRadioStyles.ts   | 33 ++++++++++++++++++-
 .../components/MenuList/useMenuListStyles.ts  | 11 +++++--
 .../MenuPopover/useMenuPopoverStyles.ts       | 11 +++++--
 .../MenuSplitGroup/useMenuSplitGroupStyles.ts | 18 ++++++----
 .../MenuTrigger/MenuTrigger.test.tsx          |  1 +
 17 files changed, 181 insertions(+), 28 deletions(-)

diff --git a/packages/react-menu/src/components/Menu/Menu.test.tsx b/packages/react-menu/src/components/Menu/Menu.test.tsx
index eb4b1b5c357b30..84e830aacafc00 100644
--- a/packages/react-menu/src/components/Menu/Menu.test.tsx
+++ b/packages/react-menu/src/components/Menu/Menu.test.tsx
@@ -19,6 +19,7 @@ describe('Menu', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classname',
+      'component-has-static-classnames-object',
       // Menu does not have own styles
       'make-styles-overrides-win',
     ],
diff --git a/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts b/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
index 3cc37f959face9..7fa2fbd0b2dd32 100644
--- a/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
+++ b/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
@@ -1,8 +1,15 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { MenuDividerState } from './MenuDivider.types';
+import type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const menuDividerClassName = 'fui-MenuDivider';
+export const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {
+  root: 'fui-MenuDivider',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -15,7 +22,7 @@ const useStyles = makeStyles({
 
 export const useMenuDividerStyles_unstable = (state: MenuDividerState) => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuDividerClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuDividerClassNames.root, styles.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts b/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
index b6caed3aeed71f..9b33b577d14b3c 100644
--- a/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
+++ b/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
@@ -1,10 +1,17 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { mergeClasses } from '@griffel/react';
-import type { MenuGroupState } from './MenuGroup.types';
+import type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';
 
+/**
+ * @deprecated
+ */
 export const menuGroupClassName = 'fui-MenuGroup';
+export const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {
+  root: 'fui-MenuGroup',
+};
 
 export const useMenuGroupStyles_unstable = (state: MenuGroupState): MenuGroupState => {
-  state.root.className = mergeClasses(menuGroupClassName, state.root.className);
+  state.root.className = mergeClasses(menuGroupClassNames.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
index 2f488841632a95..bbb2386a0bcf62 100644
--- a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
+++ b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
@@ -1,8 +1,15 @@
 import { mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { MenuGroupHeaderState } from './MenuGroupHeader.types';
+import type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const menuGroupHeaderClassName = 'fui-MenuGroupHeader';
+export const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {
+  root: 'fui-MenuGroupHeader',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
 
 export const useMenuGroupHeaderStyles_unstable = (state: MenuGroupHeaderState) => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuGroupHeaderClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuGroupHeaderClassNames.root, styles.root, state.root.className);
 
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx b/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
index 9c92e3e5cb9a49..f00d876fc7d6f8 100644
--- a/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
+++ b/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
@@ -14,6 +14,15 @@ describe('MenuItem', () => {
   isConformant({
     Component: MenuItem,
     displayName: 'MenuItem',
+    testOptions: {
+      'has-static-classnames': {
+        icon: 'Test Icon',
+        checkmark: 'Test Checkmark',
+        submenuIndicator: 'Test Submenu Indicator',
+        content: 'Test Content',
+        secondaryContent: 'Test Secondary Content',
+      },
+    },
   });
 
   /**
diff --git a/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap b/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
index bcac0755978388..cdc34029f58a07 100644
--- a/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
+++ b/packages/react-menu/src/components/MenuItem/__snapshots__/MenuItem.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`MenuItem renders a default state 1`] = `
   tabIndex={0}
 >
   <span
-    className=""
+    className="fui-MenuItem__content"
   >
     Default MenuItem
   </span>
diff --git a/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts b/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
index 2dad905bfc433e..53c2b94ffacdd3 100644
--- a/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
+++ b/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
@@ -3,9 +3,21 @@ import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
 import { MenuItemCheckboxState } from '../MenuItemCheckbox/index';
-import type { MenuItemState } from './MenuItem.types';
+import type { MenuItemSlots, MenuItemState } from './MenuItem.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const menuItemClassName = 'fui-MenuItem';
+export const menuItemClassNames: SlotClassNames<MenuItemSlots> = {
+  root: 'fui-MenuItem',
+  icon: 'fui-MenuItem__icon',
+  checkmark: 'fui-MenuItem__checkmark',
+  submenuIndicator: 'fui-MenuItem__submenuIndicator',
+  content: 'fui-MenuItem__content',
+  secondaryContent: 'fui-MenuItem__secondaryContent',
+};
 
 const useStyles = makeStyles({
   focusIndicator: createFocusOutlineStyle(),
@@ -81,7 +93,7 @@ const useStyles = makeStyles({
 export const useMenuItemStyles_unstable = (state: MenuItemState) => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    menuItemClassName,
+    menuItemClassNames.root,
     styles.root,
     styles.focusIndicator,
     state.disabled && styles.disabled,
@@ -89,22 +101,31 @@ export const useMenuItemStyles_unstable = (state: MenuItemState) => {
   );
 
   if (state.content) {
-    state.content.className = mergeClasses(styles.content, state.content.className);
+    state.content.className = mergeClasses(menuItemClassNames.content, styles.content, state.content.className);
+  }
+
+  if (state.checkmark) {
+    state.checkmark.className = mergeClasses(menuItemClassNames.checkmark, state.checkmark.className);
   }
 
   if (state.secondaryContent) {
     state.secondaryContent.className = mergeClasses(
+      menuItemClassNames.secondaryContent,
       !state.disabled && styles.secondaryContent,
       state.secondaryContent.className,
     );
   }
 
   if (state.icon) {
-    state.icon.className = mergeClasses(styles.icon, state.icon.className);
+    state.icon.className = mergeClasses(menuItemClassNames.icon, styles.icon, state.icon.className);
   }
 
   if (state.submenuIndicator) {
-    state.submenuIndicator.className = mergeClasses(styles.submenuIndicator, state.submenuIndicator.className);
+    state.submenuIndicator.className = mergeClasses(
+      menuItemClassNames.submenuIndicator,
+      styles.submenuIndicator,
+      state.submenuIndicator.className,
+    );
   }
   useCheckmarkStyles_unstable(state as MenuItemCheckboxState);
 };
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx b/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
index 9b7c59b8e81c19..dc26e6df3f6436 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
+++ b/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
@@ -18,6 +18,15 @@ describe('MenuItemCheckbox conformance', () => {
       value: '1',
     },
     displayName: 'MenuItemCheckbox',
+    testOptions: {
+      'has-static-classnames': {
+        icon: 'Test Icon',
+        checkmark: 'Test Checkmark',
+        submenuIndicator: 'Test Submenu Indicator',
+        content: 'Test Content',
+        secondaryContent: 'Test Secondary Content',
+      },
+    },
   });
 
   /**
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap b/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
index 5a747d5a9f9bd2..33d516b81afb30 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
+++ b/packages/react-menu/src/components/MenuItemCheckbox/__snapshots__/MenuItemCheckbox.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`MenuItemCheckbox conformance renders a default state 1`] = `
   tabIndex={0}
 >
   <span
-    className=""
+    className="fui-MenuItem__checkmark fui-MenuItemCheckbox__checkmark"
   >
     <svg
       aria-hidden={true}
@@ -29,7 +29,7 @@ exports[`MenuItemCheckbox conformance renders a default state 1`] = `
     </svg>
   </span>
   <span
-    className=""
+    className="fui-MenuItem__content fui-MenuItemCheckbox__content"
   >
     Default MenuItemCheckbox
   </span>
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
index 2e19eb3f1e2a38..8866b90e2b75b5 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
+++ b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
@@ -1,12 +1,43 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { mergeClasses } from '@griffel/react';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
+import { MenuItemSlots } from '../index';
 import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
 import type { MenuItemCheckboxState } from './MenuItemCheckbox.types';
 
+/**
+ * @deprecated
+ */
 export const menuItemCheckboxClassName = 'fui-MenuItemCheckbox';
+export const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {
+  root: 'fui-MenuItemCheckbox',
+  icon: 'fui-MenuItemCheckbox__icon',
+  checkmark: 'fui-MenuItemCheckbox__checkmark',
+  content: 'fui-MenuItemCheckbox__content',
+  secondaryContent: 'fui-MenuItemCheckbox__secondaryContent',
+};
 
 export const useMenuItemCheckboxStyles_unstable = (state: MenuItemCheckboxState) => {
-  state.root.className = mergeClasses(menuItemCheckboxClassName, state.root.className);
+  state.root.className = mergeClasses(menuItemCheckboxClassNames.root, state.root.className);
+
+  if (state.content) {
+    state.content.className = mergeClasses(menuItemCheckboxClassNames.content, state.content.className);
+  }
+
+  if (state.secondaryContent) {
+    state.secondaryContent.className = mergeClasses(
+      menuItemCheckboxClassNames.secondaryContent,
+      state.secondaryContent.className,
+    );
+  }
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(menuItemCheckboxClassNames.icon, state.icon.className);
+  }
+
+  if (state.checkmark) {
+    state.checkmark.className = mergeClasses(menuItemCheckboxClassNames.checkmark, state.checkmark.className);
+  }
 
   useMenuItemStyles_unstable(state);
   useCheckmarkStyles_unstable(state);
diff --git a/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx b/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
index fe5273d1122e4a..33dea95213e04b 100644
--- a/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
+++ b/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
@@ -15,6 +15,15 @@ describe('MenuItemRadio', () => {
       value: '1',
     },
     displayName: 'MenuItemRadio',
+    testOptions: {
+      'has-static-classnames': {
+        icon: 'Test Icon',
+        checkmark: 'Test Checkmark',
+        submenuIndicator: 'Test Submenu Indicator',
+        content: 'Test Content',
+        secondaryContent: 'Test Secondary Content',
+      },
+    },
   });
 
   /**
diff --git a/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap b/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
index a2a2b21a4af78f..4ca31d1740f0bc 100644
--- a/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
+++ b/packages/react-menu/src/components/MenuItemRadio/__snapshots__/MenuItemRadio.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`MenuItemRadio renders a default state 1`] = `
   tabIndex={0}
 >
   <span
-    className=""
+    className="fui-MenuItem__checkmark fui-MenuItemRadio__checkmark"
   >
     <svg
       aria-hidden={true}
@@ -29,7 +29,7 @@ exports[`MenuItemRadio renders a default state 1`] = `
     </svg>
   </span>
   <span
-    className=""
+    className="fui-MenuItem__content fui-MenuItemRadio__content"
   >
     Default MenuItemRadio
   </span>
diff --git a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
index c786cdb7b1a67e..0caf24784dcfb6 100644
--- a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
+++ b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
@@ -1,12 +1,43 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { mergeClasses } from '@griffel/react';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
+import { MenuItemSlots } from '../index';
 import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
 import type { MenuItemRadioState } from './MenuItemRadio.types';
 
+/**
+ * @deprecated
+ */
 export const menuItemRadioClassName = 'fui-MenuItemRadio';
+export const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {
+  root: 'fui-MenuItemRadio',
+  icon: 'fui-MenuItemRadio__icon',
+  checkmark: 'fui-MenuItemRadio__checkmark',
+  content: 'fui-MenuItemRadio__content',
+  secondaryContent: 'fui-MenuItemRadio__secondaryContent',
+};
 
 export const useMenuItemRadioStyles_unstable = (state: MenuItemRadioState) => {
-  state.root.className = mergeClasses(menuItemRadioClassName, state.root.className);
+  state.root.className = mergeClasses(menuItemRadioClassNames.root, state.root.className);
+
+  if (state.content) {
+    state.content.className = mergeClasses(menuItemRadioClassNames.content, state.content.className);
+  }
+
+  if (state.secondaryContent) {
+    state.secondaryContent.className = mergeClasses(
+      menuItemRadioClassNames.secondaryContent,
+      state.secondaryContent.className,
+    );
+  }
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(menuItemRadioClassNames.icon, state.icon.className);
+  }
+
+  if (state.checkmark) {
+    state.checkmark.className = mergeClasses(menuItemRadioClassNames.checkmark, state.checkmark.className);
+  }
 
   useMenuItemStyles_unstable(state);
   useCheckmarkStyles_unstable(state);
diff --git a/packages/react-menu/src/components/MenuList/useMenuListStyles.ts b/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
index 6dcbaf1ca1fd92..e4260ee8e37b44 100644
--- a/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
+++ b/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
-import type { MenuListState } from './MenuList.types';
+import type { MenuListSlots, MenuListState } from './MenuList.types';
 
+/**
+ * @deprecated
+ */
 export const menuListClassName = 'fui-MenuList';
+export const menuListClassNames: SlotClassNames<MenuListSlots> = {
+  root: 'fui-MenuList',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -16,6 +23,6 @@ const useStyles = makeStyles({
  */
 export const useMenuListStyles_unstable = (state: MenuListState): MenuListState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuListClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuListClassNames.root, styles.root, state.root.className);
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts b/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
index 3ecedee5223d5f..5eb353a0886cf8 100644
--- a/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
+++ b/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
@@ -1,8 +1,15 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { MenuPopoverState } from './MenuPopover.types';
+import type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const menuPopoverClassName = 'fui-MenuPopover';
+export const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {
+  root: 'fui-MenuPopover',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -22,6 +29,6 @@ const useStyles = makeStyles({
  */
 export const useMenuPopoverStyles_unstable = (state: MenuPopoverState): MenuPopoverState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuPopoverClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuPopoverClassNames.root, styles.root, state.root.className);
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts b/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
index da2975950700bd..c8541f0e97587a 100644
--- a/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
+++ b/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
@@ -1,20 +1,26 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { menuItemClassName } from '../MenuItem/useMenuItemStyles';
-import type { MenuSplitGroupState } from './MenuSplitGroup.types';
+import { menuItemClassNames } from '../MenuItem/useMenuItemStyles';
+import type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const menuSplitGroupClassName = 'fui-MenuSplitGroup';
-
+export const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {
+  root: 'fui-MenuSplitGroup',
+};
 /**
  * Styles for the root slot
  */
 const useStyles = makeStyles({
   root: {
     display: 'flex',
-    [`& > .${menuItemClassName}:nth-child(1)`]: {
+    [`& > .${menuItemClassNames.root}:nth-child(1)`]: {
       width: '100%',
     },
-    [`& > .${menuItemClassName}:nth-child(2)`]: {
+    [`& > .${menuItemClassNames.root}:nth-child(2)`]: {
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0,
       paddingLeft: 0,
@@ -34,6 +40,6 @@ const useStyles = makeStyles({
  */
 export const useMenuSplitGroupStyles_unstable = (state: MenuSplitGroupState): MenuSplitGroupState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(menuSplitGroupClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(menuSplitGroupClassNames.root, styles.root, state.root.className);
   return state;
 };
diff --git a/packages/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx b/packages/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx
index 8f62569d42306b..0deb6f7a764af9 100644
--- a/packages/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx
+++ b/packages/react-menu/src/components/MenuTrigger/MenuTrigger.test.tsx
@@ -19,6 +19,7 @@ describe('MenuTrigger', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classname',
+      'component-has-static-classnames-object',
       // MenuTrigger does not have own styles
       'make-styles-overrides-win',
     ],

From e6388f527199f1c660a7fe856c03dbdf33ec66a4 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 11:48:39 -0800
Subject: [PATCH 097/173] Add static classnames to Popover

Updates the react-popover package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Popover/Popover.test.tsx           |  1 +
 .../PopoverSurface/usePopoverSurfaceStyles.ts         | 11 +++++++++--
 .../components/PopoverTrigger/PopoverTrigger.test.tsx |  1 +
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/react-popover/src/components/Popover/Popover.test.tsx b/packages/react-popover/src/components/Popover/Popover.test.tsx
index 9588e7573e826b..7eccbcc4079da6 100644
--- a/packages/react-popover/src/components/Popover/Popover.test.tsx
+++ b/packages/react-popover/src/components/Popover/Popover.test.tsx
@@ -14,6 +14,7 @@ describe('Popover', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classname',
+      'component-has-static-classnames-object',
       // Popover does not have own styles
       'make-styles-overrides-win',
     ],
diff --git a/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts b/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
index 1521c67e920e1e..f63f704ec869ba 100644
--- a/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
+++ b/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
@@ -2,9 +2,16 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-positioning';
 import { tokens } from '@fluentui/react-theme';
 import type { PopoverSize } from '../Popover/Popover.types';
-import type { PopoverSurfaceState } from './PopoverSurface.types';
+import type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
+/**
+ * @deprecated
+ */
 export const popoverSurfaceClassName = 'fui-PopoverSurface';
+export const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {
+  root: 'fui-PopoverSurface',
+};
 
 export const arrowHeights: Record<PopoverSize, number> = {
   small: 6,
@@ -58,7 +65,7 @@ const useStyles = makeStyles({
 export const usePopoverSurfaceStyles_unstable = (state: PopoverSurfaceState): PopoverSurfaceState => {
   const styles = useStyles();
   state.root.className = mergeClasses(
-    popoverSurfaceClassName,
+    popoverSurfaceClassNames.root,
     styles.root,
     state.size === 'small' && styles.smallPadding,
     state.size === 'medium' && styles.mediumPadding,
diff --git a/packages/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx b/packages/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx
index 596b30adcbf824..161de0c7e67df0 100644
--- a/packages/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx
+++ b/packages/react-popover/src/components/PopoverTrigger/PopoverTrigger.test.tsx
@@ -18,6 +18,7 @@ describe('PopoverTrigger', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classname',
+      'component-has-static-classnames-object',
       // PopoverTrigger does not have own styles
       'make-styles-overrides-win',
     ],

From 85331e888df795df75458f86b3670815f7fdc727 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 13:12:50 -0800
Subject: [PATCH 098/173] Add static classnames to Provider

Updates the react-provider package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../FluentProvider/useFluentProviderStyles.ts    | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts b/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
index ad55f944d98f86..006769e5a46a0a 100644
--- a/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
+++ b/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
@@ -1,8 +1,15 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { FluentProviderState } from './FluentProvider.types';
+import type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated
+ */
 export const fluentProviderClassName = 'fui-FluentProvider';
+export const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {
+  root: 'fui-FluentProvider',
+};
 
 const useStyles = makeStyles({
   root: {
@@ -18,7 +25,12 @@ const useStyles = makeStyles({
 export const useFluentProviderStyles_unstable = (state: FluentProviderState) => {
   const styles = useStyles();
 
-  state.root.className = mergeClasses(fluentProviderClassName, state.themeClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(
+    fluentProviderClassNames.root,
+    state.themeClassName,
+    styles.root,
+    state.root.className,
+  );
 
   return state;
 };

From 79d025fc30a949f5fd8420ee120338bd5079d006 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 13:21:06 -0800
Subject: [PATCH 099/173] Deprecate static classname string for Radio.

Radio and RadioGroup have been updated to export a static classnames
object per https://github.com/microsoft/fluentui/issues/21847. The old
string classnames are marked as deprecated.
---
 packages/react-radio/src/components/Radio/useRadioStyles.ts    | 3 +++
 .../src/components/RadioGroup/useRadioGroupStyles.ts           | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/packages/react-radio/src/components/Radio/useRadioStyles.ts b/packages/react-radio/src/components/Radio/useRadioStyles.ts
index d2eaf8bd8c2158..2d3883e0390439 100644
--- a/packages/react-radio/src/components/Radio/useRadioStyles.ts
+++ b/packages/react-radio/src/components/Radio/useRadioStyles.ts
@@ -4,6 +4,9 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { RadioSlots, RadioState } from './Radio.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated
+ */
 export const radioClassName = 'fui-Radio';
 export const radioClassNames: SlotClassNames<RadioSlots> = {
   root: 'fui-Radio',
diff --git a/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts b/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
index 8e11856677dd08..2282ed1e0eca57 100644
--- a/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
+++ b/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
@@ -2,6 +2,9 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated
+ */
 export const radioGroupClassName = 'fui-RadioGroup';
 export const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {
   root: 'fui-RadioGroup',

From 8b852095e70a6350f255ce1eb701ce8013fe1bc3 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 15:47:13 -0800
Subject: [PATCH 100/173] Add static classnames to Select

Updates the react-select package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../Select/__snapshots__/Select.test.tsx.snap  |  6 ++++--
 .../src/components/Select/useSelectStyles.ts   | 18 ++++++++++++++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/react-select/src/components/Select/__snapshots__/Select.test.tsx.snap b/packages/react-select/src/components/Select/__snapshots__/Select.test.tsx.snap
index 8687c00d63b1d8..e5b09ecd5fdb51 100644
--- a/packages/react-select/src/components/Select/__snapshots__/Select.test.tsx.snap
+++ b/packages/react-select/src/components/Select/__snapshots__/Select.test.tsx.snap
@@ -6,9 +6,11 @@ exports[`Select renders the default state 1`] = `
     class="fui-Select"
   >
     <select
-      class=""
+      class="fui-Select__select"
+    />
+    <span
+      class="fui-Select__icon"
     />
-    <span />
   </span>
 </div>
 `;
diff --git a/packages/react-select/src/components/Select/useSelectStyles.ts b/packages/react-select/src/components/Select/useSelectStyles.ts
index 35c64a96f369b3..a29082f8353b5c 100644
--- a/packages/react-select/src/components/Select/useSelectStyles.ts
+++ b/packages/react-select/src/components/Select/useSelectStyles.ts
@@ -1,7 +1,16 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { SelectState } from './Select.types';
+import type { SelectSlots, SelectState } from './Select.types';
 
+/**
+ * @deprecated
+ */
 export const selectClassName = 'fui-Select';
+export const selectClassNames: SlotClassNames<SelectSlots> = {
+  root: 'fui-Select',
+  select: 'fui-Select__select',
+  icon: 'fui-Select__icon',
+};
 
 const useStyles = makeStyles({
   wrapper: {
@@ -22,13 +31,18 @@ export const useSelectStyles_unstable = (state: SelectState): SelectState => {
   const disabled = state.select.disabled;
   const selectStyles = useStyles();
 
-  state.root.className = mergeClasses(selectClassName, selectStyles.wrapper, state.root.className);
+  state.root.className = mergeClasses(selectClassNames.root, selectStyles.wrapper, state.root.className);
 
   state.select.className = mergeClasses(
+    selectClassNames.select,
     selectStyles.select,
     disabled && selectStyles.selectDisabled,
     state.select.className,
   );
 
+  if (state.icon) {
+    state.icon.className = mergeClasses(selectClassNames.icon, state.icon.className);
+  }
+
   return state;
 };

From 4cbe818b9f2620db1ef2c88ced490ded0d10f38f Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 15:53:27 -0800
Subject: [PATCH 101/173] Add static classnames to Tabs

Updates the react-tabs package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Tab/Tab.test.tsx           |  5 +++++
 .../Tab/__snapshots__/Tab.test.tsx.snap       | 22 +++++++++----------
 .../src/components/Tab/useTabStyles.ts        | 21 +++++++++++++++---
 .../__snapshots__/TabList.test.tsx.snap       |  6 ++---
 .../components/TabList/useTabListStyles.ts    | 14 ++++++++----
 5 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/packages/react-tabs/src/components/Tab/Tab.test.tsx b/packages/react-tabs/src/components/Tab/Tab.test.tsx
index 6ac94c414c1c1d..938658b42c2158 100644
--- a/packages/react-tabs/src/components/Tab/Tab.test.tsx
+++ b/packages/react-tabs/src/components/Tab/Tab.test.tsx
@@ -10,6 +10,11 @@ describe('Tab', () => {
   isConformant({
     Component: Tab,
     displayName: 'Tab',
+    testOptions: {
+      'has-static-classnames': {
+        icon: 'Test Icon',
+      },
+    },
   });
 
   const defaultContext: TabListContextValue = {
diff --git a/packages/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap b/packages/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap
index 8e96248628a180..857c21b0c90880 100644
--- a/packages/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap
+++ b/packages/react-tabs/src/components/Tab/__snapshots__/Tab.test.tsx.snap
@@ -8,7 +8,7 @@ exports[`Tab renders correctly 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
@@ -24,7 +24,7 @@ exports[`Tab renders default correctly with icon slotted 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__icon"
     >
       <svg
         aria-hidden="true"
@@ -41,7 +41,7 @@ exports[`Tab renders default correctly with icon slotted 1`] = `
       </svg>
     </span>
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
@@ -57,7 +57,7 @@ exports[`Tab renders small size and vertical correctly with icon slotted 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__icon"
     >
       <svg
         aria-hidden="true"
@@ -74,7 +74,7 @@ exports[`Tab renders small size and vertical correctly with icon slotted 1`] = `
       </svg>
     </span>
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
@@ -90,7 +90,7 @@ exports[`Tab renders small size correctly with icon slotted 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__icon"
     >
       <svg
         aria-hidden="true"
@@ -107,7 +107,7 @@ exports[`Tab renders small size correctly with icon slotted 1`] = `
       </svg>
     </span>
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
@@ -123,7 +123,7 @@ exports[`Tab renders subtle appearance correctly with icon slotted 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__icon"
     >
       <svg
         aria-hidden="true"
@@ -140,7 +140,7 @@ exports[`Tab renders subtle appearance correctly with icon slotted 1`] = `
       </svg>
     </span>
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
@@ -156,7 +156,7 @@ exports[`Tab renders vertical correctly with icon slotted 1`] = `
     tabindex="0"
   >
     <span
-      class=""
+      class="fui-Tab__icon"
     >
       <svg
         aria-hidden="true"
@@ -173,7 +173,7 @@ exports[`Tab renders vertical correctly with icon slotted 1`] = `
       </svg>
     </span>
     <span
-      class=""
+      class="fui-Tab__content"
     >
       Default Tab
     </span>
diff --git a/packages/react-tabs/src/components/Tab/useTabStyles.ts b/packages/react-tabs/src/components/Tab/useTabStyles.ts
index 354870957e1b9b..582ab4fadd228a 100644
--- a/packages/react-tabs/src/components/Tab/useTabStyles.ts
+++ b/packages/react-tabs/src/components/Tab/useTabStyles.ts
@@ -1,11 +1,20 @@
-import type { TabState } from './Tab.types';
+import type { TabSlots, TabState } from './Tab.types';
 
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { tabPendingDesignTokens } from '../../tab.constants';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated
+ */
 export const tabClassName = 'fui-Tab';
+export const tabClassNames: SlotClassNames<TabSlots> = {
+  root: 'fui-Tab',
+  icon: 'fui-Tab__icon',
+  content: 'fui-Tab__content',
+};
 
 /**
  * Styles for the root slot
@@ -175,7 +184,7 @@ export const useTabStyles_unstable = (state: TabState): TabState => {
   const contentStyles = useContentStyles();
 
   state.root.className = mergeClasses(
-    tabClassName,
+    tabClassNames.root,
     rootStyles.base,
     focusStyles.base,
     state.size === 'small' && rootStyles.small,
@@ -186,10 +195,16 @@ export const useTabStyles_unstable = (state: TabState): TabState => {
   );
 
   if (state.icon) {
-    state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);
+    state.icon.className = mergeClasses(
+      tabClassNames.icon,
+      iconStyles.base,
+      iconStyles[state.size],
+      state.icon.className,
+    );
   }
 
   state.content.className = mergeClasses(
+    tabClassNames.content,
     contentStyles.base,
     state.size === 'small' && contentStyles.small,
     state.content.className,
diff --git a/packages/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap b/packages/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap
index af0eca411aee9c..6414fe5cba7cc8 100644
--- a/packages/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap
+++ b/packages/react-tabs/src/components/TabList/__snapshots__/TabList.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`TabList renders with tabs 1`] = `
       tabindex="0"
     >
       <span
-        class=""
+        class="fui-Tab__content"
       >
         First
       </span>
@@ -34,7 +34,7 @@ exports[`TabList renders with tabs 1`] = `
       tabindex="0"
     >
       <span
-        class=""
+        class="fui-Tab__content"
       >
         Second
       </span>
@@ -45,7 +45,7 @@ exports[`TabList renders with tabs 1`] = `
       tabindex="0"
     >
       <span
-        class=""
+        class="fui-Tab__content"
       >
         Third
       </span>
diff --git a/packages/react-tabs/src/components/TabList/useTabListStyles.ts b/packages/react-tabs/src/components/TabList/useTabListStyles.ts
index 94ab9f5376ef37..9d7487c1cbf5b6 100644
--- a/packages/react-tabs/src/components/TabList/useTabListStyles.ts
+++ b/packages/react-tabs/src/components/TabList/useTabListStyles.ts
@@ -1,11 +1,17 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
-import type { TabListState } from './TabList.types';
+import type { TabListSlots, TabListState } from './TabList.types';
 import { tokens } from '@fluentui/react-theme';
-import { usePrevious } from '@fluentui/react-utilities';
+import { SlotClassNames, usePrevious } from '@fluentui/react-utilities';
 import { tabPendingDesignTokens } from '../../tab.constants';
 
+/**
+ * @deprecated
+ */
 export const tabListClassName = 'fui-TabList';
-export const tabListSelectionIndicatorName = 'fui-TabList_SelectionIndicator';
+export const tabListSelectionIndicatorName = 'fui-TabList__selectionIndicator';
+export const tabListClassNames: SlotClassNames<TabListSlots> = {
+  root: 'fui-TabList',
+};
 
 export const indicatorOffsetVar = '--selection-indicator-offset';
 export const indicatorLengthVar = '--selection-indicator-length';
@@ -103,7 +109,7 @@ export const useTabListStyles_unstable = (state: TabListState): TabListState =>
   const verticalIndicatorStyles = useVerticalIndicatorStyles();
 
   state.root.className = mergeClasses(
-    tabListClassName,
+    tabListClassNames.root,
     styles.root,
     vertical && styles.vertical,
     !!selectedValue && (vertical ? verticalIndicatorStyles.base : horizontalIndicatorStyles.base),

From 9bcdd7d7793fc849fde034dd87e3130e0be7015c Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 15:55:40 -0800
Subject: [PATCH 102/173] Add static classnames to Spinner

Updates the react-spinner package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Spinner/useSpinnerStyles.ts        | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts b/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts
index 8b8fd0c23709fe..f3c6b4c3cd0114 100644
--- a/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts
+++ b/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { SpinnerState } from './Spinner.types';
+import type { SpinnerSlots, SpinnerState } from './Spinner.types';
 
+/**
+ * @deprecated
+ */
 export const spinnerClassName = 'fui-Spinner';
+export const spinnerClassNames: SlotClassNames<SpinnerSlots> = {
+  root: 'fui-Spinner',
+};
 /**
  * Styles for the root slot
  */
@@ -18,7 +25,7 @@ const useStyles = makeStyles({
  */
 export const useSpinnerStyles_unstable = (state: SpinnerState): SpinnerState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(spinnerClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(spinnerClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);

From bcf4c4668544f39a8ae6096b01b1e15176bae691 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 16:06:59 -0800
Subject: [PATCH 103/173] Add static classnames to Text

Updates the react-text package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 packages/react-text/src/components/Body/Body.tsx      | 10 +++++++++-
 .../react-text/src/components/Caption/Caption.tsx     | 10 +++++++++-
 .../react-text/src/components/Display/Display.tsx     | 10 +++++++++-
 .../react-text/src/components/Headline/Headline.tsx   | 10 +++++++++-
 .../src/components/LargeTitle/LargeTitle.tsx          | 10 +++++++++-
 .../src/components/Subheadline/Subheadline.tsx        | 10 +++++++++-
 .../react-text/src/components/Text/useTextStyles.ts   | 11 +++++++++--
 packages/react-text/src/components/Title1/Title1.tsx  | 10 +++++++++-
 packages/react-text/src/components/Title2/Title2.tsx  | 10 +++++++++-
 packages/react-text/src/components/Title3/Title3.tsx  | 10 +++++++++-
 10 files changed, 90 insertions(+), 11 deletions(-)

diff --git a/packages/react-text/src/components/Body/Body.tsx b/packages/react-text/src/components/Body/Body.tsx
index e44bab0d6e3617..f631999d00eae4 100644
--- a/packages/react-text/src/components/Body/Body.tsx
+++ b/packages/react-text/src/components/Body/Body.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const bodyClassName = 'fui-Body';
+export const bodyClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Body',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Body: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: bodyClassName,
+  className: bodyClassNames.root,
   displayName: 'Body',
 });
diff --git a/packages/react-text/src/components/Caption/Caption.tsx b/packages/react-text/src/components/Caption/Caption.tsx
index 6271bb8f331f4c..f274b3a829650e 100644
--- a/packages/react-text/src/components/Caption/Caption.tsx
+++ b/packages/react-text/src/components/Caption/Caption.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const captionClassName = 'fui-Caption';
+export const captionClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Caption',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Caption: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: captionClassName,
+  className: captionClassNames.root,
   displayName: 'Caption',
 });
diff --git a/packages/react-text/src/components/Display/Display.tsx b/packages/react-text/src/components/Display/Display.tsx
index f195b715d77052..ba3f335f1bc9dc 100644
--- a/packages/react-text/src/components/Display/Display.tsx
+++ b/packages/react-text/src/components/Display/Display.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const displayClassName = 'fui-Display';
+export const displayClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Display',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Display: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: displayClassName,
+  className: displayClassNames.root,
   displayName: 'Display',
 });
diff --git a/packages/react-text/src/components/Headline/Headline.tsx b/packages/react-text/src/components/Headline/Headline.tsx
index 38be9f5cc3deef..bd6ded8622242e 100644
--- a/packages/react-text/src/components/Headline/Headline.tsx
+++ b/packages/react-text/src/components/Headline/Headline.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const headlineClassName = 'fui-Headline';
+export const headlineClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Headline',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Headline: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: headlineClassName,
+  className: headlineClassNames.root,
   displayName: 'Headline',
 });
diff --git a/packages/react-text/src/components/LargeTitle/LargeTitle.tsx b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
index ef24844a444428..d76e0b6e3978da 100644
--- a/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
+++ b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const largeTitleClassName = 'fui-LargeTitle';
+export const largeTitleClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-LargeTitle',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const LargeTitle: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: largeTitleClassName,
+  className: largeTitleClassNames.root,
   displayName: 'LargeTitle',
 });
diff --git a/packages/react-text/src/components/Subheadline/Subheadline.tsx b/packages/react-text/src/components/Subheadline/Subheadline.tsx
index 9cfbc07ee91256..74ad9d71e242d1 100644
--- a/packages/react-text/src/components/Subheadline/Subheadline.tsx
+++ b/packages/react-text/src/components/Subheadline/Subheadline.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const subheadlineClassName = 'fui-Subheadline';
+export const subheadlineClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Subheadline',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Subheadline: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: subheadlineClassName,
+  className: subheadlineClassNames.root,
   displayName: 'Subheadline',
 });
diff --git a/packages/react-text/src/components/Text/useTextStyles.ts b/packages/react-text/src/components/Text/useTextStyles.ts
index 1f87bce8181261..50aa2a3e5c7fa2 100644
--- a/packages/react-text/src/components/Text/useTextStyles.ts
+++ b/packages/react-text/src/components/Text/useTextStyles.ts
@@ -1,8 +1,15 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { TextState } from './Text.types';
+import type { TextSlots, TextState } from './Text.types';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated
+ */
 export const textClassName = 'fui-Text';
+export const textClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Text',
+};
 
 /**
  * Styles for the root slot
@@ -107,7 +114,7 @@ export const useTextStyles_unstable = (state: TextState): TextState => {
   const styles = useStyles();
 
   state.root.className = mergeClasses(
-    textClassName,
+    textClassNames.root,
     styles.root,
     state.wrap === false && styles.nowrap,
     state.truncate && styles.truncate,
diff --git a/packages/react-text/src/components/Title1/Title1.tsx b/packages/react-text/src/components/Title1/Title1.tsx
index 10794c5386f635..f8afdf548c5c91 100644
--- a/packages/react-text/src/components/Title1/Title1.tsx
+++ b/packages/react-text/src/components/Title1/Title1.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const title1ClassName = 'fui-Title1';
+export const title1ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Title1',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Title1: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: title1ClassName,
+  className: title1ClassNames.root,
   displayName: 'Title1',
 });
diff --git a/packages/react-text/src/components/Title2/Title2.tsx b/packages/react-text/src/components/Title2/Title2.tsx
index aeaa8f5dd29bc6..aa5ebcaf87583f 100644
--- a/packages/react-text/src/components/Title2/Title2.tsx
+++ b/packages/react-text/src/components/Title2/Title2.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const title2ClassName = 'fui-Title2';
+export const title2ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Title2',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Title2: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: title2ClassName,
+  className: title2ClassNames.root,
   displayName: 'Title2',
 });
diff --git a/packages/react-text/src/components/Title3/Title3.tsx b/packages/react-text/src/components/Title3/Title3.tsx
index 56265b5a855a4a..a1eab8207d519f 100644
--- a/packages/react-text/src/components/Title3/Title3.tsx
+++ b/packages/react-text/src/components/Title3/Title3.tsx
@@ -2,8 +2,16 @@ import type { FunctionComponent } from 'react';
 import { makeStyles } from '@griffel/react';
 import { typographyStyles } from '../../typographyStyles/index';
 import { createWrapper, TextWrapperProps } from '../wrapper';
+import { SlotClassNames } from '@fluentui/react-utilities';
+import { TextSlots } from '../Text/Text.types';
 
+/**
+ * @deprecated
+ */
 export const title3ClassName = 'fui-Title3';
+export const title3ClassNames: SlotClassNames<TextSlots> = {
+  root: 'fui-Title3',
+};
 
 /**
  * Styles for the root slot
@@ -17,6 +25,6 @@ const useStyles = makeStyles({
  */
 export const Title3: FunctionComponent<TextWrapperProps> = createWrapper({
   useStyles,
-  className: title3ClassName,
+  className: title3ClassNames.root,
   displayName: 'Title3',
 });

From 8e9aa98d3cc650a535c1dcd16f036600cad92a5e Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 16:14:14 -0800
Subject: [PATCH 104/173] Add static classnames to Toolbar

Updates the react-toolbar package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/Toolbar/useToolbarStyles.ts       | 12 ++++++++++--
 .../ToolbarButton/useToolbarButtonStyles.ts          | 12 ++++++++++--
 .../ToolbarDivider/useToolbarDividerStyles.ts        | 12 ++++++++++--
 3 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts b/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
index 2ca41e569a1037..075cc65e51676d 100644
--- a/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
+++ b/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
@@ -1,7 +1,15 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ToolbarState } from './Toolbar.types';
+import type { ToolbarSlots, ToolbarState } from './Toolbar.types';
 
+/**
+ * @deprecated
+ */
 export const toolbarClassName = 'fui-Toolbar';
+export const toolbarClassNames: SlotClassNames<ToolbarSlots> = {
+  root: 'fui-Toolbar',
+};
+
 /**
  * Styles for the root slot
  */
@@ -18,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useToolbarStyles_unstable = (state: ToolbarState): ToolbarState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(toolbarClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(toolbarClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts b/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
index c2b750aa009434..2d67540e44e8ab 100644
--- a/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
+++ b/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
@@ -1,7 +1,15 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ToolbarButtonState } from './ToolbarButton.types';
+import type { ToolbarButtonSlots, ToolbarButtonState } from './ToolbarButton.types';
 
+/**
+ * @deprecated
+ */
 export const toolbarButtonClassName = 'fui-ToolbarButton';
+export const toolbarButtonClassNames: SlotClassNames<ToolbarButtonSlots> = {
+  root: 'fui-ToolbarButton',
+};
+
 /**
  * Styles for the root slot
  */
@@ -18,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useToolbarButtonStyles_unstable = (state: ToolbarButtonState): ToolbarButtonState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(toolbarButtonClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(toolbarButtonClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts b/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
index c8f13396867a9d..3bc8a6ef91b08f 100644
--- a/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
+++ b/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
@@ -1,7 +1,15 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ToolbarDividerState } from './ToolbarDivider.types';
+import type { ToolbarDividerSlots, ToolbarDividerState } from './ToolbarDivider.types';
 
+/**
+ * @deprecated
+ */
 export const toolbarDividerClassName = 'fui-ToolbarDivider';
+export const toolbarDividerClassNames: SlotClassNames<ToolbarDividerSlots> = {
+  root: 'fui-ToolbarDivider',
+};
+
 /**
  * Styles for the root slot
  */
@@ -18,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useToolbarDividerStyles_unstable = (state: ToolbarDividerState): ToolbarDividerState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(toolbarDividerClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(toolbarDividerClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);

From b7be7bc6dfa7fcafbf9321b11a4490fa4b7e9fd6 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 16:19:32 -0800
Subject: [PATCH 105/173] Add static classnames to Tooltip

Updates the react-tooltip package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../react-tooltip/src/components/Tooltip/Tooltip.test.tsx  | 4 ++++
 .../src/components/Tooltip/useTooltipStyles.ts             | 7 ++++++-
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx b/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
index 320678bcc8c044..a2ae9db500f464 100644
--- a/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
+++ b/packages/react-tooltip/src/components/Tooltip/Tooltip.test.tsx
@@ -33,6 +33,10 @@ describe('Tooltip', () => {
       'component-has-root-ref',
       'component-handles-classname',
       'component-has-static-classname',
+      'component-has-static-classnames-object',
+      'as-renders-fc',
+      'as-passes-as-value',
+      'as-renders-html',
     ],
   });
 
diff --git a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
index cf31a43389b36c..c07e6f1accdee5 100644
--- a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
+++ b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
@@ -2,9 +2,13 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createArrowStyles } from '@fluentui/react-positioning';
 import { tokens } from '@fluentui/react-theme';
 import { arrowHeight } from './private/constants';
-import type { TooltipState } from './Tooltip.types';
+import type { TooltipSlots, TooltipState } from './Tooltip.types';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 export const tooltipClassName = 'fui-Tooltip';
+export const tooltipClassNames: SlotClassNames<TooltipSlots> = {
+  content: 'fui-Tooltip__content',
+};
 
 /**
  * Styles for the tooltip
@@ -51,6 +55,7 @@ export const useTooltipStyles_unstable = (state: TooltipState): TooltipState =>
 
   state.content.className = mergeClasses(
     tooltipClassName,
+    tooltipClassNames.content,
     styles.root,
     state.appearance === 'inverted' && styles.inverted,
     state.visible && styles.visible,

From 9aa46c1e2aaf2161ed9e7a0e7d8b7d384da0cfaa Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 16:25:51 -0800
Subject: [PATCH 106/173] Add static classnames to SpinButton

Updates the react-spinbutton package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../src/components/SpinButton/SpinButton.test.tsx  |  1 +
 .../components/SpinButton/useSpinButtonStyles.ts   | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/react-spinbutton/src/components/SpinButton/SpinButton.test.tsx b/packages/react-spinbutton/src/components/SpinButton/SpinButton.test.tsx
index 743d3ffcf7d536..5e86604ae1a010 100644
--- a/packages/react-spinbutton/src/components/SpinButton/SpinButton.test.tsx
+++ b/packages/react-spinbutton/src/components/SpinButton/SpinButton.test.tsx
@@ -7,6 +7,7 @@ describe('SpinButton', () => {
   isConformant({
     Component: SpinButton,
     displayName: 'SpinButton',
+    disabledTests: ['component-has-static-classnames-object'], // Will be enabled when component is implemented
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
diff --git a/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
index 876f202cdaa8d1..24ab0415e1e156 100644
--- a/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
+++ b/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
@@ -1,7 +1,17 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { SpinButtonState } from './SpinButton.types';
+import type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';
 
+/**
+ * @deprecated
+ */
 export const spinButtonClassName = 'fui-SpinButton';
+export const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {
+  root: 'fui-SpinButton',
+  input: 'fui-SpinButton__input',
+  incrementControl: 'fui-SpinButton__incrementControl',
+  decrementControl: 'fui-SpinButton__decrementControl',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +29,7 @@ const useStyles = makeStyles({
  */
 export const useSpinButtonStyles_unstable = (state: SpinButtonState): SpinButtonState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(spinButtonClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(spinButtonClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);

From c760549048f35934a88aacbcb4c8ad37f28dde8b Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 16:33:01 -0800
Subject: [PATCH 107/173] Add static classnames to Combobox

Updates the react-combobox package to support static classnames.

See: https://github.com/microsoft/fluentui/issues/21847
---
 .../components/ComboButton/useComboButtonStyles.ts    | 11 +++++++++--
 .../src/components/Combobox/useComboboxStyles.ts      | 11 +++++++++--
 .../src/components/Listbox/useListboxStyles.ts        | 11 +++++++++--
 .../src/components/Option/useOptionStyles.ts          | 11 +++++++++--
 .../components/OptionGroup/useOptionGroupStyles.ts    | 11 +++++++++--
 5 files changed, 45 insertions(+), 10 deletions(-)

diff --git a/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts b/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
index c849610242e431..b47f2289699402 100644
--- a/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
+++ b/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ComboButtonState } from './ComboButton.types';
+import type { ComboButtonSlots, ComboButtonState } from './ComboButton.types';
 
+/**
+ * @deprecated
+ */
 export const comboButtonClassName = 'fui-ComboButton';
+export const comboButtonClassNames: SlotClassNames<ComboButtonSlots> = {
+  root: 'fui-ComboButton',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useComboButtonStyles_unstable = (state: ComboButtonState): ComboButtonState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(comboButtonClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(comboButtonClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts b/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts
index 85ff6e09aeea4d..2f076be2990dbe 100644
--- a/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts
+++ b/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ComboboxState } from './Combobox.types';
+import type { ComboboxSlots, ComboboxState } from './Combobox.types';
 
+/**
+ * @deprecated
+ */
 export const comboboxClassName = 'fui-Combobox';
+export const comboboxClassNames: SlotClassNames<ComboboxSlots> = {
+  root: 'fui-Combobox',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useComboboxStyles_unstable = (state: ComboboxState): ComboboxState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(comboboxClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(comboboxClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-combobox/src/components/Listbox/useListboxStyles.ts b/packages/react-combobox/src/components/Listbox/useListboxStyles.ts
index b6c39eeeeb057b..ecdb5c926b2030 100644
--- a/packages/react-combobox/src/components/Listbox/useListboxStyles.ts
+++ b/packages/react-combobox/src/components/Listbox/useListboxStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { ListboxState } from './Listbox.types';
+import type { ListboxSlots, ListboxState } from './Listbox.types';
 
+/**
+ * @deprecated
+ */
 export const listboxClassName = 'fui-Listbox';
+export const listboxClassNames: SlotClassNames<ListboxSlots> = {
+  root: 'fui-Listbox',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useListboxStyles_unstable = (state: ListboxState): ListboxState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(listboxClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(listboxClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-combobox/src/components/Option/useOptionStyles.ts b/packages/react-combobox/src/components/Option/useOptionStyles.ts
index daa80af18d8f87..20b62ad55c5e82 100644
--- a/packages/react-combobox/src/components/Option/useOptionStyles.ts
+++ b/packages/react-combobox/src/components/Option/useOptionStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { OptionState } from './Option.types';
+import type { OptionSlots, OptionState } from './Option.types';
 
+/**
+ * @deprecated
+ */
 export const optionClassName = 'fui-Option';
+export const optionClassNames: SlotClassNames<OptionSlots> = {
+  root: 'fui-Option',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useOptionStyles_unstable = (state: OptionState): OptionState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(optionClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(optionClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
diff --git a/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts b/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts
index 992c0d8459a245..5d160e97e8f65c 100644
--- a/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts
+++ b/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts
@@ -1,7 +1,14 @@
+import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { OptionGroupState } from './OptionGroup.types';
+import type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';
 
+/**
+ * @deprecated
+ */
 export const optionGroupClassName = 'fui-OptionGroup';
+export const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {
+  root: 'fui-OptionGroup',
+};
 
 /**
  * Styles for the root slot
@@ -19,7 +26,7 @@ const useStyles = makeStyles({
  */
 export const useOptionGroupStyles_unstable = (state: OptionGroupState): OptionGroupState => {
   const styles = useStyles();
-  state.root.className = mergeClasses(optionGroupClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(optionGroupClassNames.root, styles.root, state.root.className);
 
   // TODO Add class names to slots, for example:
   // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);

From dd9b98364d8065290c8ba39bece8099b4899896b Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 16:40:32 -0800
Subject: [PATCH 108/173] Rename conformance test for clarity

Changes test name to "has static classnames in rendered component" from
"has static classnames" to make the test's purpose clearer.
---
 packages/react-conformance/src/defaultTests.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-conformance/src/defaultTests.tsx b/packages/react-conformance/src/defaultTests.tsx
index 906bf1b346bf63..46365a5466fc5a 100644
--- a/packages/react-conformance/src/defaultTests.tsx
+++ b/packages/react-conformance/src/defaultTests.tsx
@@ -375,7 +375,7 @@ export const defaultTests: TestObject = {
       }
     });
 
-    it(`has static classnames (component-has-static-classnames-object)`, () => {
+    it(`has static classnames in rendered component (component-has-static-classnames-object)`, () => {
       if (!handledClassNamesObjectExport) {
         return;
       }

From 5c16597de810010b60cf414c750c994375f7dc9d Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 16:56:20 -0800
Subject: [PATCH 109/173] Update classname conformance tests to support
 variants

When testing that a component correctly renders classnames we need to
support multiple variants of a component for slots that are mutually
exclusive. For example, Avatar, only renders the initials if the icon
slot doesn't render so the initials class name will, correctly, not be
rendered when the icon classname is present and vice versa.
---
 .../react-conformance/src/defaultTests.tsx    | 66 ++++++++++---------
 packages/react-conformance/src/types.ts       |  9 ++-
 2 files changed, 43 insertions(+), 32 deletions(-)

diff --git a/packages/react-conformance/src/defaultTests.tsx b/packages/react-conformance/src/defaultTests.tsx
index 46365a5466fc5a..efc74b5c0a80ad 100644
--- a/packages/react-conformance/src/defaultTests.tsx
+++ b/packages/react-conformance/src/defaultTests.tsx
@@ -381,40 +381,46 @@ export const defaultTests: TestObject = {
       }
 
       const { testOptions = {} } = testInfo;
-      const mergedProps = {
-        ...requiredProps,
-        ...(testOptions['has-static-classnames'] ?? {}),
-      };
-      const defaultEl = customMount(<Component {...mergedProps} />);
-      const defaultComponent = getComponent(defaultEl, helperComponents, wrapperComponent);
+      const staticClassNameVariants = testOptions['has-static-classnames'] ?? [{ props: {} }];
 
-      const exportName =
-        componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
-      const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
-      const classNamesFromFile = indexFile[exportName];
+      for (const staticClassNames of staticClassNameVariants) {
+        const mergedProps = {
+          ...requiredProps,
+          ...staticClassNames.props,
+        };
+        const defaultEl = customMount(<Component {...mergedProps} />);
+        const defaultComponent = getComponent(defaultEl, helperComponents, wrapperComponent);
 
-      const missingClassNames = [];
-      let className;
-      let err: Error;
-      for (const key of Object.keys(classNamesFromFile)) {
-        className = classNamesFromFile[key];
-        try {
-          expect(defaultComponent.find(`.${className}`).length).toBeGreaterThanOrEqual(1);
-        } catch (e) {
-          err = e as Error;
-          missingClassNames.push(className);
+        const exportName =
+          componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
+        const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
+        const classNamesFromFile = indexFile[exportName];
+
+        const missingClassNames = [];
+        let className;
+        let err: Error;
+
+        const expectedClassNames = staticClassNames.expectedClassNames ?? classNamesFromFile;
+        for (const key of Object.keys(expectedClassNames)) {
+          className = classNamesFromFile[key];
+          try {
+            expect(defaultComponent.find(`.${className}`).length).toBeGreaterThanOrEqual(1);
+          } catch (e) {
+            err = e as Error;
+            missingClassNames.push(className);
+          }
         }
-      }
 
-      if (missingClassNames.length > 0) {
-        throw new Error(
-          defaultErrorMessages['component-has-static-classnames'](
-            testInfo,
-            err!,
-            componentName,
-            missingClassNames.join(', '),
-          ),
-        );
+        if (missingClassNames.length > 0) {
+          throw new Error(
+            defaultErrorMessages['component-has-static-classnames'](
+              testInfo,
+              err!,
+              componentName,
+              missingClassNames.join(', '),
+            ),
+          );
+        }
       }
     });
   },
diff --git a/packages/react-conformance/src/types.ts b/packages/react-conformance/src/types.ts
index 663996c4b731ba..eb65c180fae0c7 100644
--- a/packages/react-conformance/src/types.ts
+++ b/packages/react-conformance/src/types.ts
@@ -15,8 +15,13 @@ export interface TestOptions {
     ignoreProps?: string[];
   };
   'has-static-classnames'?: {
-    [key: string]: string | {};
-  };
+    props: {
+      [key: string]: string | {};
+    };
+    expectedClassNames?: {
+      [key: string]: string;
+    };
+  }[];
 }
 
 export interface IsConformantOptions<TProps = {}> {

From 2af05020328c9aed178f9fbd1ed1fc71e47725da Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 17:03:14 -0800
Subject: [PATCH 110/173] Update Avatar for static class name conformance

---
 .../src/components/Avatar/Avatar.test.tsx     | 35 +++++++++++++++----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/packages/react-avatar/src/components/Avatar/Avatar.test.tsx b/packages/react-avatar/src/components/Avatar/Avatar.test.tsx
index a1a08cdce616c1..9103ef996579ec 100644
--- a/packages/react-avatar/src/components/Avatar/Avatar.test.tsx
+++ b/packages/react-avatar/src/components/Avatar/Avatar.test.tsx
@@ -2,18 +2,41 @@ import * as React from 'react';
 import { isConformant } from '../../common/isConformant';
 import { Avatar } from './Avatar';
 import { render, screen } from '@testing-library/react';
+import { avatarClassNames } from './useAvatarStyles';
 
 describe('Avatar', () => {
   isConformant({
     Component: Avatar,
     displayName: 'Avatar',
     testOptions: {
-      'has-static-classnames': {
-        image: { src: 'avatar.png', alt: 'test-image' },
-        initials: 'Test Initials',
-        icon: 'Test Icon',
-        badge: 'Test Badge',
-      },
+      'has-static-classnames': [
+        {
+          props: {
+            image: { src: 'avatar.png', alt: 'test-image' },
+            initials: 'Test Initials',
+            badge: 'Test Badge',
+          },
+          expectedClassNames: {
+            root: avatarClassNames.root,
+            image: avatarClassNames.image,
+            initials: avatarClassNames.initials,
+            badge: avatarClassNames.badge,
+          },
+        },
+        {
+          props: {
+            image: { src: 'avatar.png', alt: 'test-image' },
+            icon: 'Test Icon',
+            badge: 'Test Badge',
+          },
+          expectedClassNames: {
+            root: avatarClassNames.root,
+            image: avatarClassNames.image,
+            icon: avatarClassNames.icon,
+            badge: avatarClassNames.badge,
+          },
+        },
+      ],
     },
   });
 

From fbb22b7b87b1db44fe16ea0dbdf1bdb079e05e94 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 17:03:46 -0800
Subject: [PATCH 111/173] Update Card static class name conformance.

- Changes header and description slots to "span" from React.Fragment
  This allows them to take the "className" prop and is consistent with
  their existing types.
- Updates testOptions
---
 .../src/components/CardHeader/CardHeader.test.tsx    |  8 +++++---
 .../__snapshots__/CardHeader.test.tsx.snap           | 12 ++++++++++--
 .../src/components/CardHeader/useCardHeader.ts       |  4 ++--
 .../src/components/CardPreview/CardPreview.test.tsx  |  8 +++++---
 4 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/react-card/src/components/CardHeader/CardHeader.test.tsx b/packages/react-card/src/components/CardHeader/CardHeader.test.tsx
index 7fb93decc8d34a..ed14bdd0201356 100644
--- a/packages/react-card/src/components/CardHeader/CardHeader.test.tsx
+++ b/packages/react-card/src/components/CardHeader/CardHeader.test.tsx
@@ -8,9 +8,11 @@ describe('CardHeader', () => {
     Component: CardHeader,
     displayName: 'CardHeader',
     testOptions: {
-      'has-static-classnames': {
-        header: 'Header Test',
-      },
+      'has-static-classnames': [
+        {
+          props: { header: 'Header Test', action: 'Action Test' },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap b/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap
index e69c93adfd1a18..de76808005741d 100644
--- a/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap
+++ b/packages/react-card/src/components/CardHeader/__snapshots__/CardHeader.test.tsx.snap
@@ -13,8 +13,16 @@ exports[`CardHeader renders a default state 1`] = `
     <div
       class="fui-CardHeader__content"
     >
-      Title slot
-      Description slot
+      <span
+        class="fui-CardHeader__header"
+      >
+        Title slot
+      </span>
+      <span
+        class="fui-CardHeader__description"
+      >
+        Description slot
+      </span>
     </div>
     <div
       class="fui-CardHeader__action"
diff --git a/packages/react-card/src/components/CardHeader/useCardHeader.ts b/packages/react-card/src/components/CardHeader/useCardHeader.ts
index a83235fddf6e15..5cd8a550874014 100644
--- a/packages/react-card/src/components/CardHeader/useCardHeader.ts
+++ b/packages/react-card/src/components/CardHeader/useCardHeader.ts
@@ -19,8 +19,8 @@ export const useCardHeader_unstable = (props: CardHeaderProps, ref: React.Ref<HT
       root: 'div',
       image: 'div',
       content: 'div',
-      header: React.Fragment,
-      description: React.Fragment,
+      header: 'span',
+      description: 'span',
       action: 'div',
     },
 
diff --git a/packages/react-card/src/components/CardPreview/CardPreview.test.tsx b/packages/react-card/src/components/CardPreview/CardPreview.test.tsx
index ebdd6e2fe68cb5..4aa45bb0642c3a 100644
--- a/packages/react-card/src/components/CardPreview/CardPreview.test.tsx
+++ b/packages/react-card/src/components/CardPreview/CardPreview.test.tsx
@@ -8,9 +8,11 @@ describe('CardPreview', () => {
     Component: CardPreview,
     displayName: 'CardPreview',
     testOptions: {
-      'has-static-classnames': {
-        logo: 'Test Logo',
-      },
+      'has-static-classnames': [
+        {
+          props: { logo: 'Test Logo' },
+        },
+      ],
     },
   });
 

From 29dc33acb47588233d3354dde7b680f70b2268ba Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 17:13:49 -0800
Subject: [PATCH 112/173] Update class names conformance tests to support
 variants

Updates the configuration for all test cases that pass
testOptions['has-static-classnames'] to support to updated signature
for test variants.
---
 .../src/components/Badge/Badge.test.tsx        |  8 +++++---
 .../CounterBadge/CounterBadge.test.tsx         |  8 +++++---
 .../src/components/Checkbox/Checkbox.test.tsx  |  8 +++++---
 .../src/components/Divider/Divider.test.tsx    |  8 +++++---
 .../src/components/Input/Input.test.tsx        | 12 ++++++++----
 .../src/components/Label/Label.test.tsx        |  8 +++++---
 .../src/components/MenuItem/MenuItem.test.tsx  | 18 +++++++++++-------
 .../MenuItemCheckbox/MenuItemCheckbox.test.tsx | 18 +++++++++++-------
 .../MenuItemRadio/MenuItemRadio.test.tsx       | 18 +++++++++++-------
 .../src/components/Radio/Radio.test.tsx        | 14 ++++++++------
 .../react-tabs/src/components/Tab/Tab.test.tsx | 10 +++++++---
 11 files changed, 81 insertions(+), 49 deletions(-)

diff --git a/packages/react-badge/src/components/Badge/Badge.test.tsx b/packages/react-badge/src/components/Badge/Badge.test.tsx
index aaee966bd55ba5..e5195b010141f4 100644
--- a/packages/react-badge/src/components/Badge/Badge.test.tsx
+++ b/packages/react-badge/src/components/Badge/Badge.test.tsx
@@ -9,9 +9,11 @@ describe('Badge', () => {
     Component: Badge,
     displayName: 'Badge',
     testOptions: {
-      'has-static-classnames': {
-        icon: 'Test Icon',
-      },
+      'has-static-classnames': [
+        {
+          props: { icon: 'Test Icon' },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx b/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
index 0979f4d65c2149..b5dfdcfdae22f9 100644
--- a/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
+++ b/packages/react-badge/src/components/CounterBadge/CounterBadge.test.tsx
@@ -9,9 +9,11 @@ describe('CounterBadge', () => {
     Component: CounterBadge,
     displayName: 'CounterBadge',
     testOptions: {
-      'has-static-classnames': {
-        icon: 'Test Icon',
-      },
+      'has-static-classnames': [
+        {
+          props: { icon: 'Test Icon' },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx b/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
index 2b42e5cf4f23f2..23312cc6231341 100644
--- a/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
+++ b/packages/react-checkbox/src/components/Checkbox/Checkbox.test.tsx
@@ -17,9 +17,11 @@ describe('Checkbox', () => {
     displayName: 'Checkbox',
     primarySlot: 'input',
     testOptions: {
-      'has-static-classnames': {
-        label: 'Test Label',
-      },
+      'has-static-classnames': [
+        {
+          props: { label: 'Test Label' },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-divider/src/components/Divider/Divider.test.tsx b/packages/react-divider/src/components/Divider/Divider.test.tsx
index 40f7308bc27637..cff1ab61fab56f 100644
--- a/packages/react-divider/src/components/Divider/Divider.test.tsx
+++ b/packages/react-divider/src/components/Divider/Divider.test.tsx
@@ -13,9 +13,11 @@ describe('Divider', () => {
     Component: Divider,
     displayName: 'Divider',
     testOptions: {
-      'has-static-classnames': {
-        children: 'Test Children',
-      },
+      'has-static-classnames': [
+        {
+          props: { children: 'Test Children' },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-input/src/components/Input/Input.test.tsx b/packages/react-input/src/components/Input/Input.test.tsx
index 3d6ca22e79ffce..bcbc681f988cf3 100644
--- a/packages/react-input/src/components/Input/Input.test.tsx
+++ b/packages/react-input/src/components/Input/Input.test.tsx
@@ -22,10 +22,14 @@ describe('Input', () => {
     displayName: 'Input',
     primarySlot: 'input',
     testOptions: {
-      'has-static-classnames': {
-        contentBefore: 'Test Content Before',
-        contentAfter: 'Test Content After',
-      },
+      'has-static-classnames': [
+        {
+          props: {
+            contentBefore: 'Test Content Before',
+            contentAfter: 'Test Content After',
+          },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-label/src/components/Label/Label.test.tsx b/packages/react-label/src/components/Label/Label.test.tsx
index 0f8a2e19ba1fd7..b5fd527ebb7174 100644
--- a/packages/react-label/src/components/Label/Label.test.tsx
+++ b/packages/react-label/src/components/Label/Label.test.tsx
@@ -9,9 +9,11 @@ describe('Label', () => {
     displayName: 'Label',
     requiredProps: { children: "I'm a label." },
     testOptions: {
-      'has-static-classnames': {
-        required: 'Required Test',
-      },
+      'has-static-classnames': [
+        {
+          props: { required: 'Required Test' },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx b/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
index f00d876fc7d6f8..ed5ce32d663759 100644
--- a/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
+++ b/packages/react-menu/src/components/MenuItem/MenuItem.test.tsx
@@ -15,13 +15,17 @@ describe('MenuItem', () => {
     Component: MenuItem,
     displayName: 'MenuItem',
     testOptions: {
-      'has-static-classnames': {
-        icon: 'Test Icon',
-        checkmark: 'Test Checkmark',
-        submenuIndicator: 'Test Submenu Indicator',
-        content: 'Test Content',
-        secondaryContent: 'Test Secondary Content',
-      },
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            checkmark: 'Test Checkmark',
+            submenuIndicator: 'Test Submenu Indicator',
+            content: 'Test Content',
+            secondaryContent: 'Test Secondary Content',
+          },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx b/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
index dc26e6df3f6436..bf02772003f98d 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
+++ b/packages/react-menu/src/components/MenuItemCheckbox/MenuItemCheckbox.test.tsx
@@ -19,13 +19,17 @@ describe('MenuItemCheckbox conformance', () => {
     },
     displayName: 'MenuItemCheckbox',
     testOptions: {
-      'has-static-classnames': {
-        icon: 'Test Icon',
-        checkmark: 'Test Checkmark',
-        submenuIndicator: 'Test Submenu Indicator',
-        content: 'Test Content',
-        secondaryContent: 'Test Secondary Content',
-      },
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            checkmark: 'Test Checkmark',
+            submenuIndicator: 'Test Submenu Indicator',
+            content: 'Test Content',
+            secondaryContent: 'Test Secondary Content',
+          },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx b/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
index 33dea95213e04b..accb416c5a2e0b 100644
--- a/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
+++ b/packages/react-menu/src/components/MenuItemRadio/MenuItemRadio.test.tsx
@@ -16,13 +16,17 @@ describe('MenuItemRadio', () => {
     },
     displayName: 'MenuItemRadio',
     testOptions: {
-      'has-static-classnames': {
-        icon: 'Test Icon',
-        checkmark: 'Test Checkmark',
-        submenuIndicator: 'Test Submenu Indicator',
-        content: 'Test Content',
-        secondaryContent: 'Test Secondary Content',
-      },
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            checkmark: 'Test Checkmark',
+            submenuIndicator: 'Test Submenu Indicator',
+            content: 'Test Content',
+            secondaryContent: 'Test Secondary Content',
+          },
+        },
+      ],
     },
   });
 
diff --git a/packages/react-radio/src/components/Radio/Radio.test.tsx b/packages/react-radio/src/components/Radio/Radio.test.tsx
index 22d695dc4f42b4..37747ee2f1ba3a 100644
--- a/packages/react-radio/src/components/Radio/Radio.test.tsx
+++ b/packages/react-radio/src/components/Radio/Radio.test.tsx
@@ -10,12 +10,14 @@ describe('Radio', () => {
     displayName: 'Radio',
     primarySlot: 'input',
     testOptions: {
-      'has-static-classnames': {
-        label: 'Test Label',
-      },
-      // TODO: https://github.com/microsoft/fluentui/issues/19618
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } as any,
+      'has-static-classnames': [
+        {
+          props: {
+            label: 'Test Label',
+          },
+        },
+      ],
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-tabs/src/components/Tab/Tab.test.tsx b/packages/react-tabs/src/components/Tab/Tab.test.tsx
index 938658b42c2158..3f6bfb2acae70e 100644
--- a/packages/react-tabs/src/components/Tab/Tab.test.tsx
+++ b/packages/react-tabs/src/components/Tab/Tab.test.tsx
@@ -11,9 +11,13 @@ describe('Tab', () => {
     Component: Tab,
     displayName: 'Tab',
     testOptions: {
-      'has-static-classnames': {
-        icon: 'Test Icon',
-      },
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+          },
+        },
+      ],
     },
   });
 

From 75b563ca1ec1263d858f9634905f6e8cfa827f12 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 7 Mar 2022 17:32:02 -0800
Subject: [PATCH 113/173] Change files

---
 ...act-accordion-9eba94d3-2e19-47a3-a9d0-cc48ad2df206.json | 7 +++++++
 ...-react-avatar-4f7f2b0d-54d5-4113-9bbe-7c20d691635a.json | 7 +++++++
 ...i-react-badge-d574f954-9c31-46a6-a984-29254808686c.json | 7 +++++++
 ...ui-react-card-a253608a-236c-41ab-b648-305d862787a2.json | 7 +++++++
 ...eact-checkbox-02b38384-f210-4273-b2a0-fca78ef978dc.json | 7 +++++++
 ...t-conformance-66c9b26c-88fa-452b-bd76-eba7eebe6afc.json | 7 +++++++
 ...react-divider-eccb2dbe-991b-47fb-b2cf-376db2c0da5f.json | 7 +++++++
 ...i-react-image-256e5bb5-ef03-4116-8a92-02679ac5b37e.json | 7 +++++++
 ...i-react-input-ea64372f-cd30-4337-9336-2473988791d7.json | 7 +++++++
 ...i-react-label-8f1d205c-9fce-47f7-952c-c39936568d0e.json | 7 +++++++
 ...ui-react-link-8b2eb91d-7d9b-4c81-b0d4-d8ad66102883.json | 7 +++++++
 ...ui-react-menu-5f561de3-9f08-4af9-847f-b71f8ced5738.json | 7 +++++++
 ...react-popover-67f4956b-5fad-4541-ba4e-8d57fe2572da.json | 7 +++++++
 ...eact-provider-15e2a87f-2928-4b21-b62c-6afe53852826.json | 7 +++++++
 ...i-react-radio-1d586bed-3d00-4981-b9e8-fa39860c705e.json | 7 +++++++
 ...ui-react-tabs-62a61da8-8630-4c2b-86db-c3ff6636b233.json | 7 +++++++
 ...ui-react-text-02cf3104-9dfc-4525-b915-b59d9cba2629.json | 7 +++++++
 ...react-tooltip-d940930a-d83b-4d4e-ba79-173148b98f87.json | 7 +++++++
 18 files changed, 126 insertions(+)
 create mode 100644 change/@fluentui-react-accordion-9eba94d3-2e19-47a3-a9d0-cc48ad2df206.json
 create mode 100644 change/@fluentui-react-avatar-4f7f2b0d-54d5-4113-9bbe-7c20d691635a.json
 create mode 100644 change/@fluentui-react-badge-d574f954-9c31-46a6-a984-29254808686c.json
 create mode 100644 change/@fluentui-react-card-a253608a-236c-41ab-b648-305d862787a2.json
 create mode 100644 change/@fluentui-react-checkbox-02b38384-f210-4273-b2a0-fca78ef978dc.json
 create mode 100644 change/@fluentui-react-conformance-66c9b26c-88fa-452b-bd76-eba7eebe6afc.json
 create mode 100644 change/@fluentui-react-divider-eccb2dbe-991b-47fb-b2cf-376db2c0da5f.json
 create mode 100644 change/@fluentui-react-image-256e5bb5-ef03-4116-8a92-02679ac5b37e.json
 create mode 100644 change/@fluentui-react-input-ea64372f-cd30-4337-9336-2473988791d7.json
 create mode 100644 change/@fluentui-react-label-8f1d205c-9fce-47f7-952c-c39936568d0e.json
 create mode 100644 change/@fluentui-react-link-8b2eb91d-7d9b-4c81-b0d4-d8ad66102883.json
 create mode 100644 change/@fluentui-react-menu-5f561de3-9f08-4af9-847f-b71f8ced5738.json
 create mode 100644 change/@fluentui-react-popover-67f4956b-5fad-4541-ba4e-8d57fe2572da.json
 create mode 100644 change/@fluentui-react-provider-15e2a87f-2928-4b21-b62c-6afe53852826.json
 create mode 100644 change/@fluentui-react-radio-1d586bed-3d00-4981-b9e8-fa39860c705e.json
 create mode 100644 change/@fluentui-react-tabs-62a61da8-8630-4c2b-86db-c3ff6636b233.json
 create mode 100644 change/@fluentui-react-text-02cf3104-9dfc-4525-b915-b59d9cba2629.json
 create mode 100644 change/@fluentui-react-tooltip-d940930a-d83b-4d4e-ba79-173148b98f87.json

diff --git a/change/@fluentui-react-accordion-9eba94d3-2e19-47a3-a9d0-cc48ad2df206.json b/change/@fluentui-react-accordion-9eba94d3-2e19-47a3-a9d0-cc48ad2df206.json
new file mode 100644
index 00000000000000..b6e184bd060594
--- /dev/null
+++ b/change/@fluentui-react-accordion-9eba94d3-2e19-47a3-a9d0-cc48ad2df206.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Accordion",
+  "packageName": "@fluentui/react-accordion",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-avatar-4f7f2b0d-54d5-4113-9bbe-7c20d691635a.json b/change/@fluentui-react-avatar-4f7f2b0d-54d5-4113-9bbe-7c20d691635a.json
new file mode 100644
index 00000000000000..67fddcef9ebc41
--- /dev/null
+++ b/change/@fluentui-react-avatar-4f7f2b0d-54d5-4113-9bbe-7c20d691635a.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Avatar",
+  "packageName": "@fluentui/react-avatar",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-badge-d574f954-9c31-46a6-a984-29254808686c.json b/change/@fluentui-react-badge-d574f954-9c31-46a6-a984-29254808686c.json
new file mode 100644
index 00000000000000..7516c29b48ea14
--- /dev/null
+++ b/change/@fluentui-react-badge-d574f954-9c31-46a6-a984-29254808686c.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Badge",
+  "packageName": "@fluentui/react-badge",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-card-a253608a-236c-41ab-b648-305d862787a2.json b/change/@fluentui-react-card-a253608a-236c-41ab-b648-305d862787a2.json
new file mode 100644
index 00000000000000..7f4e720f71de07
--- /dev/null
+++ b/change/@fluentui-react-card-a253608a-236c-41ab-b648-305d862787a2.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Card",
+  "packageName": "@fluentui/react-card",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-checkbox-02b38384-f210-4273-b2a0-fca78ef978dc.json b/change/@fluentui-react-checkbox-02b38384-f210-4273-b2a0-fca78ef978dc.json
new file mode 100644
index 00000000000000..03d0ddd66055ec
--- /dev/null
+++ b/change/@fluentui-react-checkbox-02b38384-f210-4273-b2a0-fca78ef978dc.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Checkbox",
+  "packageName": "@fluentui/react-checkbox",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-conformance-66c9b26c-88fa-452b-bd76-eba7eebe6afc.json b/change/@fluentui-react-conformance-66c9b26c-88fa-452b-bd76-eba7eebe6afc.json
new file mode 100644
index 00000000000000..c15bbd214fcaea
--- /dev/null
+++ b/change/@fluentui-react-conformance-66c9b26c-88fa-452b-bd76-eba7eebe6afc.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Add conformance tests for static classnames",
+  "packageName": "@fluentui/react-conformance",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-divider-eccb2dbe-991b-47fb-b2cf-376db2c0da5f.json b/change/@fluentui-react-divider-eccb2dbe-991b-47fb-b2cf-376db2c0da5f.json
new file mode 100644
index 00000000000000..73d619c67775a8
--- /dev/null
+++ b/change/@fluentui-react-divider-eccb2dbe-991b-47fb-b2cf-376db2c0da5f.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Divider",
+  "packageName": "@fluentui/react-divider",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-image-256e5bb5-ef03-4116-8a92-02679ac5b37e.json b/change/@fluentui-react-image-256e5bb5-ef03-4116-8a92-02679ac5b37e.json
new file mode 100644
index 00000000000000..75bf047da2a47e
--- /dev/null
+++ b/change/@fluentui-react-image-256e5bb5-ef03-4116-8a92-02679ac5b37e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Image",
+  "packageName": "@fluentui/react-image",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-input-ea64372f-cd30-4337-9336-2473988791d7.json b/change/@fluentui-react-input-ea64372f-cd30-4337-9336-2473988791d7.json
new file mode 100644
index 00000000000000..17cf95c45d1830
--- /dev/null
+++ b/change/@fluentui-react-input-ea64372f-cd30-4337-9336-2473988791d7.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Input",
+  "packageName": "@fluentui/react-input",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-label-8f1d205c-9fce-47f7-952c-c39936568d0e.json b/change/@fluentui-react-label-8f1d205c-9fce-47f7-952c-c39936568d0e.json
new file mode 100644
index 00000000000000..327f451b86d7f1
--- /dev/null
+++ b/change/@fluentui-react-label-8f1d205c-9fce-47f7-952c-c39936568d0e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Label",
+  "packageName": "@fluentui/react-label",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-link-8b2eb91d-7d9b-4c81-b0d4-d8ad66102883.json b/change/@fluentui-react-link-8b2eb91d-7d9b-4c81-b0d4-d8ad66102883.json
new file mode 100644
index 00000000000000..4aa056f0a8b411
--- /dev/null
+++ b/change/@fluentui-react-link-8b2eb91d-7d9b-4c81-b0d4-d8ad66102883.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Link",
+  "packageName": "@fluentui/react-link",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-menu-5f561de3-9f08-4af9-847f-b71f8ced5738.json b/change/@fluentui-react-menu-5f561de3-9f08-4af9-847f-b71f8ced5738.json
new file mode 100644
index 00000000000000..eabd9c58027037
--- /dev/null
+++ b/change/@fluentui-react-menu-5f561de3-9f08-4af9-847f-b71f8ced5738.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Menu",
+  "packageName": "@fluentui/react-menu",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-popover-67f4956b-5fad-4541-ba4e-8d57fe2572da.json b/change/@fluentui-react-popover-67f4956b-5fad-4541-ba4e-8d57fe2572da.json
new file mode 100644
index 00000000000000..e89a77c0df3e72
--- /dev/null
+++ b/change/@fluentui-react-popover-67f4956b-5fad-4541-ba4e-8d57fe2572da.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Popover",
+  "packageName": "@fluentui/react-popover",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-provider-15e2a87f-2928-4b21-b62c-6afe53852826.json b/change/@fluentui-react-provider-15e2a87f-2928-4b21-b62c-6afe53852826.json
new file mode 100644
index 00000000000000..4cb89972d47670
--- /dev/null
+++ b/change/@fluentui-react-provider-15e2a87f-2928-4b21-b62c-6afe53852826.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Provider",
+  "packageName": "@fluentui/react-provider",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-radio-1d586bed-3d00-4981-b9e8-fa39860c705e.json b/change/@fluentui-react-radio-1d586bed-3d00-4981-b9e8-fa39860c705e.json
new file mode 100644
index 00000000000000..9bbdbfbd0cf8ff
--- /dev/null
+++ b/change/@fluentui-react-radio-1d586bed-3d00-4981-b9e8-fa39860c705e.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Deprecate static classname string for Radio.",
+  "packageName": "@fluentui/react-radio",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tabs-62a61da8-8630-4c2b-86db-c3ff6636b233.json b/change/@fluentui-react-tabs-62a61da8-8630-4c2b-86db-c3ff6636b233.json
new file mode 100644
index 00000000000000..d21595b124791d
--- /dev/null
+++ b/change/@fluentui-react-tabs-62a61da8-8630-4c2b-86db-c3ff6636b233.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Tabs",
+  "packageName": "@fluentui/react-tabs",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-text-02cf3104-9dfc-4525-b915-b59d9cba2629.json b/change/@fluentui-react-text-02cf3104-9dfc-4525-b915-b59d9cba2629.json
new file mode 100644
index 00000000000000..c136b7fc40656b
--- /dev/null
+++ b/change/@fluentui-react-text-02cf3104-9dfc-4525-b915-b59d9cba2629.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Text",
+  "packageName": "@fluentui/react-text",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-tooltip-d940930a-d83b-4d4e-ba79-173148b98f87.json b/change/@fluentui-react-tooltip-d940930a-d83b-4d4e-ba79-173148b98f87.json
new file mode 100644
index 00000000000000..1ad91de3a6fe09
--- /dev/null
+++ b/change/@fluentui-react-tooltip-d940930a-d83b-4d4e-ba79-173148b98f87.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add static classnames to Tooltip",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

From 0c9745660c4f54d2e412ca414d1788ed9b50032b Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Thu, 10 Mar 2022 10:05:38 -0800
Subject: [PATCH 114/173] Simplify a conformance test

Simplifies the "has static classnames in rendered component"
conformance test, eliminating "expect()" and a "try/catch" block.
---
 .../react-conformance/src/defaultTests.tsx    | 23 ++++++-------------
 1 file changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/react-conformance/src/defaultTests.tsx b/packages/react-conformance/src/defaultTests.tsx
index efc74b5c0a80ad..8ecefce9fd0fae 100644
--- a/packages/react-conformance/src/defaultTests.tsx
+++ b/packages/react-conformance/src/defaultTests.tsx
@@ -330,7 +330,6 @@ export const defaultTests: TestObject = {
         expect(classNamesFromFile).toBeTruthy();
         handledClassNamesObjectExport = true;
       } catch (e) {
-        // Need to work on this error message
         throw new Error(
           defaultErrorMessages['component-has-static-classnames-object-exported'](
             testInfo,
@@ -363,7 +362,6 @@ export const defaultTests: TestObject = {
       try {
         expect(classNamesFromFile).toEqual(expectedClassNames);
       } catch (e) {
-        // Need to work on this error message
         throw new Error(
           defaultErrorMessages['component-has-static-classnames-in-correct-format'](
             testInfo,
@@ -396,26 +394,19 @@ export const defaultTests: TestObject = {
         const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
         const classNamesFromFile = indexFile[exportName];
 
-        const missingClassNames = [];
-        let className;
-        let err: Error;
-
-        const expectedClassNames = staticClassNames.expectedClassNames ?? classNamesFromFile;
-        for (const key of Object.keys(expectedClassNames)) {
-          className = classNamesFromFile[key];
-          try {
-            expect(defaultComponent.find(`.${className}`).length).toBeGreaterThanOrEqual(1);
-          } catch (e) {
-            err = e as Error;
-            missingClassNames.push(className);
+        const expectedClassNames: { [key: string]: string } = staticClassNames.expectedClassNames ?? classNamesFromFile;
+        const missingClassNames = Object.values(expectedClassNames).reduce((acc, className) => {
+          if (defaultComponent.find(`.${className}`).length !== 1) {
+            (acc as string[]).push(className);
           }
-        }
+          return acc;
+        }, []);
 
         if (missingClassNames.length > 0) {
           throw new Error(
             defaultErrorMessages['component-has-static-classnames'](
               testInfo,
-              err!,
+              new Error(),
               componentName,
               missingClassNames.join(', '),
             ),

From b1d4d5997c04f8d59189c65e5284783e718f571c Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Thu, 10 Mar 2022 10:06:21 -0800
Subject: [PATCH 115/173] Update AccordionHeader conformance test config.

Updates AccordionHeader's conformance test config to use the correct
format for classnames conformance testing.
---
 .../AccordionHeader/AccordionHeader.test.tsx           | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx b/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
index 63704ed39da3f7..92d682c8d2eb82 100644
--- a/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
+++ b/packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx
@@ -15,9 +15,13 @@ describe('AccordionHeader', () => {
     displayName: 'AccordionHeader',
     helperComponents: [AccordionHeaderContext.Provider],
     testOptions: {
-      'has-static-classnames': {
-        icon: 'Test Icon',
-      },
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+          },
+        },
+      ],
     },
   });
 

From 34aa957ac30086c79a31232c16a0cb6ae5bcfeea Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Thu, 10 Mar 2022 16:38:41 -0800
Subject: [PATCH 116/173] Update SpinButton API md file

---
 packages/react-spinbutton/etc/react-spinbutton.api.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-spinbutton/etc/react-spinbutton.api.md b/packages/react-spinbutton/etc/react-spinbutton.api.md
index e894e07310770d..933b6a3b885511 100644
--- a/packages/react-spinbutton/etc/react-spinbutton.api.md
+++ b/packages/react-spinbutton/etc/react-spinbutton.api.md
@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const renderSpinButton_unstable: (state: SpinButtonState) => JSX.Element;
@@ -21,9 +22,12 @@ export type SpinButtonChangeData = {
     value: number;
 };
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const spinButtonClassName = "fui-SpinButton";
 
+// @public (undocumented)
+export const spinButtonClassNames: SlotClassNames<SpinButtonSlots>;
+
 // @public (undocumented)
 export type SpinButtonCommons = {
     defaultValue: number;

From 4cab422a7b0717bc0d98a897c0aaef894365b1dc Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Fri, 11 Mar 2022 15:38:04 -0800
Subject: [PATCH 117/173] Update react-select API.

---
 packages/react-select/etc/react-select.api.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/react-select/etc/react-select.api.md b/packages/react-select/etc/react-select.api.md
index b8e56c944522eb..4954fbbf297915 100644
--- a/packages/react-select/etc/react-select.api.md
+++ b/packages/react-select/etc/react-select.api.md
@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const renderSelect_unstable: (state: SelectState) => JSX.Element;
@@ -16,9 +17,12 @@ export const renderSelect_unstable: (state: SelectState) => JSX.Element;
 // @public
 export const Select: ForwardRefComponent<SelectProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const selectClassName = "fui-Select";
 
+// @public (undocumented)
+export const selectClassNames: SlotClassNames<SelectSlots>;
+
 // @public (undocumented)
 export interface SelectCommons {
     appearance?: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';

From b805cfd416bc106e65214973141701f1ba3a8cfe Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 09:38:48 -0700
Subject: [PATCH 118/173] Add deprecation messages to react-accordion

Adds a helpful message for the deprecated <Component>Classname
property.
---
 .../etc/react-accordion.api.md                | 21 +++++++++++++++----
 .../Accordion/useAccordionStyles.ts           |  2 +-
 .../useAccordionHeaderStyles.ts               |  2 +-
 .../AccordionItem/useAccordionItemStyles.ts   |  2 +-
 .../AccordionPanel/useAccordionPanelStyles.ts |  2 +-
 5 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/react-accordion/etc/react-accordion.api.md b/packages/react-accordion/etc/react-accordion.api.md
index 84e6fa46b47e8f..c7c1bb26f92192 100644
--- a/packages/react-accordion/etc/react-accordion.api.md
+++ b/packages/react-accordion/etc/react-accordion.api.md
@@ -11,13 +11,17 @@ import type { Context } from '@fluentui/react-context-selector';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Accordion: ForwardRefComponent<AccordionProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const accordionClassName = "fui-Accordion";
 
+// @public (undocumented)
+export const accordionClassNames: SlotClassNames<AccordionSlots>;
+
 // @public (undocumented)
 export const AccordionContext: Context<AccordionContextValue>;
 
@@ -37,9 +41,12 @@ export type AccordionContextValues = {
 // @public
 export const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const accordionHeaderClassName = "fui-AccordionHeader";
 
+// @public (undocumented)
+export const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots>;
+
 // @public (undocumented)
 export type AccordionHeaderContextValue = {
     disabled: boolean;
@@ -81,9 +88,12 @@ export type AccordionIndex = number | number[];
 // @public
 export const AccordionItem: ForwardRefComponent<AccordionItemProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const accordionItemClassName = "fui-AccordionItem";
 
+// @public (undocumented)
+export const accordionItemClassNames: SlotClassNames<AccordionItemSlots>;
+
 // @public (undocumented)
 export const AccordionItemContext: React_2.Context<AccordionItemContextValue>;
 
@@ -117,9 +127,12 @@ export type AccordionItemValue = unknown;
 // @public
 export const AccordionPanel: ForwardRefComponent<AccordionPanelProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const accordionPanelClassName = "fui-AccordionPanel";
 
+// @public (undocumented)
+export const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots>;
+
 // @public (undocumented)
 export type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
 
diff --git a/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts b/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
index 6a5250e01fe520..c253b7848b6586 100644
--- a/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
+++ b/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
@@ -3,7 +3,7 @@ import { mergeClasses } from '@griffel/react';
 import type { AccordionSlots, AccordionState } from './Accordion.types';
 
 /**
- * @deprecated
+ * @deprecated Use `accordionClassNames.root` instead.
  */
 export const accordionClassName = 'fui-Accordion';
 export const accordionClassNames: SlotClassNames<AccordionSlots> = {
diff --git a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
index 3f4e200929f021..0b24e1ea680b63 100644
--- a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
+++ b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
@@ -5,7 +5,7 @@ import type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHead
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `accordionHeaderClassNames.root` instead.
  */
 export const accordionHeaderClassName = 'fui-AccordionHeader';
 export const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots> = {
diff --git a/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts b/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
index 8159d53d5777e3..5e0485979ff837 100644
--- a/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
+++ b/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
@@ -3,7 +3,7 @@ import { mergeClasses } from '@griffel/react';
 import type { AccordionItemSlots, AccordionItemState } from './AccordionItem.types';
 
 /**
- * @deprecated
+ * @deprecated Use `accordionItemClassNames.root` instead.
  */
 export const accordionItemClassName = 'fui-AccordionItem';
 export const accordionItemClassNames: SlotClassNames<AccordionItemSlots> = {
diff --git a/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts b/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
index 4a78c7a14f80d7..64de1916aca095 100644
--- a/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
+++ b/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';
 
 /**
- * @deprecated
+ * @deprecated Use `accordionPanelClassNames.root` instead.
  */
 export const accordionPanelClassName = 'fui-AccordionPanel';
 export const accordionPanelClassNames: SlotClassNames<AccordionPanelSlots> = {

From 0a7e581ccb06df6f6ee884af731654346411b116 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 09:41:24 -0700
Subject: [PATCH 119/173] Add deprecation messages to react-avatar

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-avatar/etc/react-avatar.api.md               | 6 +++++-
 .../react-avatar/src/components/Avatar/useAvatarStyles.ts   | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-avatar/etc/react-avatar.api.md b/packages/react-avatar/etc/react-avatar.api.md
index cecc69d9945642..e6b23bd4f7d35b 100644
--- a/packages/react-avatar/etc/react-avatar.api.md
+++ b/packages/react-avatar/etc/react-avatar.api.md
@@ -10,13 +10,17 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { PresenceBadge } from '@fluentui/react-badge';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public (undocumented)
 export const Avatar: ForwardRefComponent<AvatarProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const avatarClassName = "fui-Avatar";
 
+// @public (undocumented)
+export const avatarClassNames: SlotClassNames<AvatarSlots>;
+
 // @public
 export type AvatarNamedColor = 'darkRed' | 'cranberry' | 'red' | 'pumpkin' | 'peach' | 'marigold' | 'gold' | 'brass' | 'brown' | 'forest' | 'seafoam' | 'darkGreen' | 'lightTeal' | 'teal' | 'steel' | 'blue' | 'royalBlue' | 'cornflower' | 'navy' | 'lavender' | 'purple' | 'grape' | 'lilac' | 'pink' | 'magenta' | 'plum' | 'beige' | 'mink' | 'platinum' | 'anchor';
 
diff --git a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
index c05f547636ddc5..86b264ce1c1f81 100644
--- a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
+++ b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
@@ -4,7 +4,7 @@ import type { AvatarSlots, AvatarState } from './Avatar.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `avatarClassNames.root` instead.
  */
 export const avatarClassName = 'fui-Avatar';
 export const avatarClassNames: SlotClassNames<AvatarSlots> = {

From 51549c1ef49aaef9a9e35eb536be16466e0f3908 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:08:00 -0700
Subject: [PATCH 120/173] Add deprecation messages to react-badge

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-badge/etc/react-badge.api.md      | 16 +++++++++++++---
 .../src/components/Badge/useBadgeStyles.ts       |  2 +-
 .../CounterBadge/useCounterBadgeStyles.ts        |  2 +-
 .../PresenceBadge/usePresenceBadgeStyles.ts      |  2 +-
 4 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/react-badge/etc/react-badge.api.md b/packages/react-badge/etc/react-badge.api.md
index ba1ab8ae07cd0b..6fd232a8e68e87 100644
--- a/packages/react-badge/etc/react-badge.api.md
+++ b/packages/react-badge/etc/react-badge.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Badge: ForwardRefComponent<BadgeProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const badgeClassName = "fui-Badge";
 
+// @public (undocumented)
+export const badgeClassNames: SlotClassNames<BadgeSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "BadgeCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -33,9 +37,12 @@ export type BadgeState = ComponentState<BadgeSlots> & BadgeCommons;
 // @public
 export const CounterBadge: ForwardRefComponent<CounterBadgeProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const counterBadgeClassName = "fui-CounterBadge";
 
+// @public (undocumented)
+export const counterBadgeClassNames: SlotClassNames<BadgeSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "CounterBadgeCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -47,9 +54,12 @@ export type CounterBadgeState = Omit<BadgeState, 'appearance' | 'shape' | 'color
 // @public
 export const PresenceBadge: ForwardRefComponent<PresenceBadgeProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const presenceBadgeClassName = "fui-PresenceBadge";
 
+// @public (undocumented)
+export const presenceBadgeClassNames: SlotClassNames<BadgeSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "PresenceBadgeCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
diff --git a/packages/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
index 926eee830d4242..1359edd6a02835 100644
--- a/packages/react-badge/src/components/Badge/useBadgeStyles.ts
+++ b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
@@ -4,7 +4,7 @@ import type { BadgeSlots, BadgeState } from './Badge.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `badgeClassNames.root` instead.
  */
 export const badgeClassName = 'fui-Badge';
 export const badgeClassNames: SlotClassNames<BadgeSlots> = {
diff --git a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
index 5db456cce63704..32dcb344411b2b 100644
--- a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
+++ b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
@@ -5,7 +5,7 @@ import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';
 import type { CounterBadgeState } from './CounterBadge.types';
 
 /**
- * @deprecated
+ * @deprecated Use `counterBadgeClassNames.root` instead.
  */
 export const counterBadgeClassName = 'fui-CounterBadge';
 export const counterBadgeClassNames: SlotClassNames<BadgeSlots> = {
diff --git a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
index a5e5b7b785aecd..8b0c6a70627af2 100644
--- a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
+++ b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
@@ -5,7 +5,7 @@ import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { BadgeSlots } from '../Badge/Badge.types';
 
 /**
- * @deprecated
+ * @deprecated Use `presenceBadgeClassNames.root` instead.
  */
 export const presenceBadgeClassName = 'fui-PresenceBadge';
 export const presenceBadgeClassNames: SlotClassNames<BadgeSlots> = {

From df15cfdd4db980c1bf4b8dc08f7421501a989a00 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:11:33 -0700
Subject: [PATCH 121/173] Add deprecation messages to react-button

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-button/etc/react-button.api.md          | 10 +++++-----
 .../src/components/Button/useButtonStyles.ts           |  5 +++--
 .../CompoundButton/useCompoundButtonStyles.ts          |  4 +++-
 .../src/components/MenuButton/useMenuButtonStyles.ts   |  4 +++-
 .../src/components/SplitButton/useSplitButtonStyles.ts |  4 +++-
 .../components/ToggleButton/useToggleButtonStyles.ts   |  4 +++-
 6 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/packages/react-button/etc/react-button.api.md b/packages/react-button/etc/react-button.api.md
index 4de468a00f3ece..39a9a0b032c6ee 100644
--- a/packages/react-button/etc/react-button.api.md
+++ b/packages/react-button/etc/react-button.api.md
@@ -15,7 +15,7 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Button: ForwardRefComponent<ButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const buttonClassName: string;
 
 // @public (undocumented)
@@ -40,7 +40,7 @@ export type ButtonState = ComponentState<ButtonSlots> & ButtonCommons & {
 // @public
 export const CompoundButton: ForwardRefComponent<CompoundButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const compoundButtonClassName: string;
 
 // @public (undocumented)
@@ -61,7 +61,7 @@ export type CompoundButtonState = ComponentState<CompoundButtonSlots> & Omit<But
 // @public
 export const MenuButton: ForwardRefComponent<MenuButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuButtonClassName: string;
 
 // @public (undocumented)
@@ -95,7 +95,7 @@ export const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Elemen
 // @public
 export const SplitButton: ForwardRefComponent<SplitButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const splitButtonClassName: string;
 
 // @public (undocumented)
@@ -117,7 +117,7 @@ export type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<ButtonSta
 // @public
 export const ToggleButton: ForwardRefComponent<ToggleButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const toggleButtonClassName: string;
 
 // @public (undocumented)
diff --git a/packages/react-button/src/components/Button/useButtonStyles.ts b/packages/react-button/src/components/Button/useButtonStyles.ts
index a99ec843b1491e..ea00b3eaba6c7a 100644
--- a/packages/react-button/src/components/Button/useButtonStyles.ts
+++ b/packages/react-button/src/components/Button/useButtonStyles.ts
@@ -8,8 +8,9 @@ export const buttonClassNames: SlotClassNames<ButtonSlots> = {
   root: 'fui-Button',
   icon: 'fui-Button__icon',
 };
-
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `buttonClassNames.root` instead.
+ */
 export const buttonClassName = buttonClassNames.root;
 
 const useRootStyles = makeStyles({
diff --git a/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts b/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
index 53b6d18ee4afac..e0611b3df54324 100644
--- a/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
+++ b/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts
@@ -11,7 +11,9 @@ export const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {
   secondaryContent: 'fui-CompoundButton__secondaryContent',
 };
 
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `compoundButtonClassName.root` instead.
+ */
 export const compoundButtonClassName = compoundButtonClassNames.root;
 
 const useRootStyles = makeStyles({
diff --git a/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts b/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
index 4210ca3df4b52e..eca7fab544379a 100644
--- a/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
+++ b/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
@@ -10,7 +10,9 @@ export const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {
   menuIcon: 'fui-MenuButton__menuIcon',
 };
 
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `menuButtonClassName.root` instead.
+ */
 export const menuButtonClassName = menuButtonClassNames.root;
 
 const useMenuIconStyles = makeStyles({
diff --git a/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts b/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts
index 48476cad3633a8..e240bc8a6da41a 100644
--- a/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts
+++ b/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts
@@ -10,7 +10,9 @@ export const splitButtonClassNames: SlotClassNames<SplitButtonSlots> = {
   primaryActionButton: 'fui-SplitButton__primaryActionButton',
 };
 
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `splitButtonClassName.root` instead.
+ */
 export const splitButtonClassName = splitButtonClassNames.root;
 
 const useFocusStyles = makeStyles({
diff --git a/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts b/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
index be2c9536d80a90..b3450b33538935 100644
--- a/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
+++ b/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts
@@ -10,7 +10,9 @@ export const toggleButtonClassNames: SlotClassNames<ButtonSlots> = {
   icon: 'fui-ToggleButton__icon',
 };
 
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `toggleButtonClassName.root` instead.
+ */
 export const toggleButtonClassName = toggleButtonClassNames.root;
 
 const useCheckedStyles = makeStyles({

From 88b5c482292de5dfdf284d3035a50c9c397c3702 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:13:10 -0700
Subject: [PATCH 122/173] Add deprecation messages to react-card

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-card/etc/react-card.api.md     | 21 +++++++++++++++----
 .../src/components/Card/useCardStyles.ts      |  2 +-
 .../CardFooter/useCardFooterStyles.ts         |  2 +-
 .../CardHeader/useCardHeaderStyles.ts         |  2 +-
 .../CardPreview/useCardPreviewStyles.ts       |  2 +-
 5 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/packages/react-card/etc/react-card.api.md b/packages/react-card/etc/react-card.api.md
index 9a3b2e74b4bfec..571e1c8bf5e472 100644
--- a/packages/react-card/etc/react-card.api.md
+++ b/packages/react-card/etc/react-card.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Card: ForwardRefComponent<CardProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const cardClassName = "fui-Card";
 
+// @public (undocumented)
+export const cardClassNames: SlotClassNames<CardSlots>;
+
 // @public (undocumented)
 export type CardCommons = {
     appearance: 'filled' | 'filled-alternative' | 'outline' | 'subtle';
@@ -24,9 +28,12 @@ export type CardCommons = {
 // @public
 export const CardFooter: ForwardRefComponent<CardFooterProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const cardFooterClassName = "fui-CardFooter";
 
+// @public (undocumented)
+export const cardFooterClassNames: SlotClassNames<CardFooterSlots>;
+
 // @public
 export type CardFooterProps = ComponentProps<CardFooterSlots>;
 
@@ -42,9 +49,12 @@ export type CardFooterState = ComponentState<CardFooterSlots>;
 // @public
 export const CardHeader: ForwardRefComponent<CardHeaderProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const cardHeaderClassName = "fui-CardHeader";
 
+// @public (undocumented)
+export const cardHeaderClassNames: SlotClassNames<CardHeaderSlots>;
+
 // @public
 export type CardHeaderProps = ComponentProps<Partial<CardHeaderSlots>>;
 
@@ -64,9 +74,12 @@ export type CardHeaderState = ComponentState<CardHeaderSlots>;
 // @public
 export const CardPreview: ForwardRefComponent<CardPreviewProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const cardPreviewClassName = "fui-CardPreview";
 
+// @public (undocumented)
+export const cardPreviewClassNames: SlotClassNames<CardPreviewSlots>;
+
 // @public
 export type CardPreviewProps = ComponentProps<CardPreviewSlots>;
 
diff --git a/packages/react-card/src/components/Card/useCardStyles.ts b/packages/react-card/src/components/Card/useCardStyles.ts
index 54fe72d5b418b3..07fd9d34959912 100644
--- a/packages/react-card/src/components/Card/useCardStyles.ts
+++ b/packages/react-card/src/components/Card/useCardStyles.ts
@@ -5,7 +5,7 @@ import type { CardSlots, CardState } from './Card.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `cardClassNames.root` instead.
  */
 export const cardClassName = 'fui-Card';
 export const cardClassNames: SlotClassNames<CardSlots> = {
diff --git a/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts b/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
index edb09fb50d7cc4..b936a25788c6d3 100644
--- a/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
+++ b/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { CardFooterSlots, CardFooterState } from './CardFooter.types';
 
 /**
- * @deprecated
+ * @deprecated Use `cardFooterClassNames.root` instead.
  */
 export const cardFooterClassName = 'fui-CardFooter';
 export const cardFooterClassNames: SlotClassNames<CardFooterSlots> = {
diff --git a/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts b/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
index c1d30d319c6b18..5bfd94328e9c08 100644
--- a/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
+++ b/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
 
 /**
- * @deprecated
+ * @deprecated Use `cardHeaderClassNames.root` instead.
  */
 export const cardHeaderClassName = 'fui-CardHeader';
 export const cardHeaderClassNames: SlotClassNames<CardHeaderSlots> = {
diff --git a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
index 1b97bd74b78fd2..2ec71689beaedc 100644
--- a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
+++ b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
 
 /**
- * @deprecated
+ * @deprecated Use `cardPreviewClassNames.root` instead.
  */
 export const cardPreviewClassName = 'fui-CardPreview';
 export const cardPreviewClassNames: SlotClassNames<CardPreviewSlots> = {

From cb5578aa6f2f6ac31c463af053ff1c879df8760d Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:15:51 -0700
Subject: [PATCH 123/173] Add deprecation messages to react-checkbox

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-checkbox/etc/react-checkbox.api.md           | 6 +++++-
 .../src/components/Checkbox/useCheckboxStyles.ts            | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-checkbox/etc/react-checkbox.api.md b/packages/react-checkbox/etc/react-checkbox.api.md
index a850a7734cfa17..ee714b9a5b1adc 100644
--- a/packages/react-checkbox/etc/react-checkbox.api.md
+++ b/packages/react-checkbox/etc/react-checkbox.api.md
@@ -10,13 +10,17 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
 import { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Checkbox: ForwardRefComponent<CheckboxProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const checkboxClassName = "fui-Checkbox";
 
+// @public (undocumented)
+export const checkboxClassNames: SlotClassNames<CheckboxSlots>;
+
 // @public
 export interface CheckboxOnChangeData {
     // (undocumented)
diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
index 1c0f5a1070606b..8f1bc1a14c6c23 100644
--- a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
+++ b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
@@ -5,7 +5,7 @@ import { CheckboxSlots, CheckboxState } from './Checkbox.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `checkboxClassNames.root` instead.
  */
 export const checkboxClassName = 'fui-Checkbox';
 export const checkboxClassNames: SlotClassNames<CheckboxSlots> = {

From b2fae95a046f5008dd0c175a950fc2f3174b6374 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:18:27 -0700
Subject: [PATCH 124/173] Add deprecation messages to react-combobox

Adds a helpful message for the deprecated <Component>Classname
property.
---
 .../react-combobox/etc/react-combobox.api.md  | 26 +++++++++++++++----
 .../ComboButton/useComboButtonStyles.ts       |  2 +-
 .../components/Combobox/useComboboxStyles.ts  |  2 +-
 .../components/Listbox/useListboxStyles.ts    |  2 +-
 .../src/components/Option/useOptionStyles.ts  |  2 +-
 .../OptionGroup/useOptionGroupStyles.ts       |  2 +-
 6 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/packages/react-combobox/etc/react-combobox.api.md b/packages/react-combobox/etc/react-combobox.api.md
index 7599c05342ca6a..a813af1f6d3a39 100644
--- a/packages/react-combobox/etc/react-combobox.api.md
+++ b/packages/react-combobox/etc/react-combobox.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Combobox: ForwardRefComponent<ComboboxProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const comboboxClassName = "fui-Combobox";
 
+// @public (undocumented)
+export const comboboxClassNames: SlotClassNames<ComboboxSlots>;
+
 // @public (undocumented)
 export type ComboboxCommons = {};
 
@@ -33,9 +37,12 @@ export type ComboboxState = ComponentState<ComboboxSlots> & ComboboxCommons;
 // @public
 export const ComboButton: ForwardRefComponent<ComboButtonProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const comboButtonClassName = "fui-ComboButton";
 
+// @public (undocumented)
+export const comboButtonClassNames: SlotClassNames<ComboButtonSlots>;
+
 // @public (undocumented)
 export type ComboButtonCommons = {};
 
@@ -53,9 +60,12 @@ export type ComboButtonState = ComponentState<ComboButtonSlots> & ComboButtonCom
 // @public
 export const Listbox: ForwardRefComponent<ListboxProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const listboxClassName = "fui-Listbox";
 
+// @public (undocumented)
+export const listboxClassNames: SlotClassNames<ListboxSlots>;
+
 // @public (undocumented)
 export type ListboxCommons = {};
 
@@ -74,18 +84,24 @@ export type ListboxState = ComponentState<ListboxSlots> & ListboxCommons;
 const Option_2: ForwardRefComponent<OptionProps>;
 export { Option_2 as Option }
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const optionClassName = "fui-Option";
 
+// @public (undocumented)
+export const optionClassNames: SlotClassNames<OptionSlots>;
+
 // @public (undocumented)
 export type OptionCommons = {};
 
 // @public
 export const OptionGroup: ForwardRefComponent<OptionGroupProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const optionGroupClassName = "fui-OptionGroup";
 
+// @public (undocumented)
+export const optionGroupClassNames: SlotClassNames<OptionGroupSlots>;
+
 // @public (undocumented)
 export type OptionGroupCommons = {};
 
diff --git a/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts b/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
index b47f2289699402..53a51150e9fe20 100644
--- a/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
+++ b/packages/react-combobox/src/components/ComboButton/useComboButtonStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { ComboButtonSlots, ComboButtonState } from './ComboButton.types';
 
 /**
- * @deprecated
+ * @deprecated Use `comboButtonClassNames.root` instead.
  */
 export const comboButtonClassName = 'fui-ComboButton';
 export const comboButtonClassNames: SlotClassNames<ComboButtonSlots> = {
diff --git a/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts b/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts
index 2f076be2990dbe..65ebd997522e5f 100644
--- a/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts
+++ b/packages/react-combobox/src/components/Combobox/useComboboxStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { ComboboxSlots, ComboboxState } from './Combobox.types';
 
 /**
- * @deprecated
+ * @deprecated Use `comboboxClassNames.root` instead.
  */
 export const comboboxClassName = 'fui-Combobox';
 export const comboboxClassNames: SlotClassNames<ComboboxSlots> = {
diff --git a/packages/react-combobox/src/components/Listbox/useListboxStyles.ts b/packages/react-combobox/src/components/Listbox/useListboxStyles.ts
index ecdb5c926b2030..9785f9666cb4bb 100644
--- a/packages/react-combobox/src/components/Listbox/useListboxStyles.ts
+++ b/packages/react-combobox/src/components/Listbox/useListboxStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { ListboxSlots, ListboxState } from './Listbox.types';
 
 /**
- * @deprecated
+ * @deprecated Use `listboxClassNames.root` instead.
  */
 export const listboxClassName = 'fui-Listbox';
 export const listboxClassNames: SlotClassNames<ListboxSlots> = {
diff --git a/packages/react-combobox/src/components/Option/useOptionStyles.ts b/packages/react-combobox/src/components/Option/useOptionStyles.ts
index 20b62ad55c5e82..aaa8e4ce754d2a 100644
--- a/packages/react-combobox/src/components/Option/useOptionStyles.ts
+++ b/packages/react-combobox/src/components/Option/useOptionStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { OptionSlots, OptionState } from './Option.types';
 
 /**
- * @deprecated
+ * @deprecated Use `optionClassNames.root` instead.
  */
 export const optionClassName = 'fui-Option';
 export const optionClassNames: SlotClassNames<OptionSlots> = {
diff --git a/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts b/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts
index 5d160e97e8f65c..2d89b7a66344b7 100644
--- a/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts
+++ b/packages/react-combobox/src/components/OptionGroup/useOptionGroupStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { OptionGroupSlots, OptionGroupState } from './OptionGroup.types';
 
 /**
- * @deprecated
+ * @deprecated Use `optionGroupClassNames.root` instead.
  */
 export const optionGroupClassName = 'fui-OptionGroup';
 export const optionGroupClassNames: SlotClassNames<OptionGroupSlots> = {

From 80c7e721059b5b96944ba72253fc9b3c03aa9fee Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:19:50 -0700
Subject: [PATCH 125/173] Add deprecation messages to react-dialog

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-dialog/etc/react-dialog.api.md               | 6 +++++-
 .../react-dialog/src/components/Dialog/useDialogStyles.ts   | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-dialog/etc/react-dialog.api.md b/packages/react-dialog/etc/react-dialog.api.md
index 6a9aeb0eb6888b..e0dbd85ca594e4 100644
--- a/packages/react-dialog/etc/react-dialog.api.md
+++ b/packages/react-dialog/etc/react-dialog.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Dialog: ForwardRefComponent<DialogProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const dialogClassName = "fui-Dialog";
 
+// @public (undocumented)
+export const dialogClassNames: SlotClassNames<DialogSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "DialogCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
diff --git a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
index 4ea61edb04c9ed..3edacbfd0c6f0d 100644
--- a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
+++ b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { DialogSlots, DialogState } from './Dialog.types';
 
 /**
- * @deprecated
+ * @deprecated Use `dialogClassNames.root` instead.
  */
 export const dialogClassName = 'fui-Dialog';
 export const dialogClassNames: SlotClassNames<DialogSlots> = {

From f2fd4439b11879353ea953a4d8852c2b5c1db0b2 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:21:00 -0700
Subject: [PATCH 126/173] Add deprecation messages to react-divider

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-divider/etc/react-divider.api.md             | 6 +++++-
 .../src/components/Divider/useDividerStyles.ts              | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-divider/etc/react-divider.api.md b/packages/react-divider/etc/react-divider.api.md
index 1aa8cfb274176c..d2b9b51e551627 100644
--- a/packages/react-divider/etc/react-divider.api.md
+++ b/packages/react-divider/etc/react-divider.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Divider: ForwardRefComponent<DividerProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const dividerClassName = "fui-Divider";
 
+// @public (undocumented)
+export const dividerClassNames: SlotClassNames<DividerSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "DividerCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
diff --git a/packages/react-divider/src/components/Divider/useDividerStyles.ts b/packages/react-divider/src/components/Divider/useDividerStyles.ts
index ee1ff86fcbb1f3..367f0bee1c0580 100644
--- a/packages/react-divider/src/components/Divider/useDividerStyles.ts
+++ b/packages/react-divider/src/components/Divider/useDividerStyles.ts
@@ -4,7 +4,7 @@ import { DividerSlots, DividerState } from './Divider.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `dividerClassNames.root` instead.
  */
 export const dividerClassName = 'fui-Divider';
 export const dividerClassNames: SlotClassNames<DividerSlots> = {

From 7adb884124e0e4de69eee06dd6d49d329fb3b4af Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:22:25 -0700
Subject: [PATCH 127/173] Add deprecation messages to react-image

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-image/etc/react-image.api.md                 | 6 +++++-
 packages/react-image/src/components/Image/useImageStyles.ts | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-image/etc/react-image.api.md b/packages/react-image/etc/react-image.api.md
index 625c4e7e4d1ba6..3b8aa1e1fb35e1 100644
--- a/packages/react-image/etc/react-image.api.md
+++ b/packages/react-image/etc/react-image.api.md
@@ -9,14 +9,18 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 const Image_2: ForwardRefComponent<ImageProps>;
 export { Image_2 as Image }
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const imageClassName = "fui-Image";
 
+// @public (undocumented)
+export const imageClassNames: SlotClassNames<ImageSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "ImageCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
diff --git a/packages/react-image/src/components/Image/useImageStyles.ts b/packages/react-image/src/components/Image/useImageStyles.ts
index f56812b42500a9..dac335bbbf61ab 100644
--- a/packages/react-image/src/components/Image/useImageStyles.ts
+++ b/packages/react-image/src/components/Image/useImageStyles.ts
@@ -4,7 +4,7 @@ import type { ImageSlots, ImageState } from './Image.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `imageClassNames.root` instead.
  */
 export const imageClassName = 'fui-Image';
 export const imageClassNames: SlotClassNames<ImageSlots> = {

From 12a8d32ed1893f8c1ab529488fae3e0ad1be102b Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:23:40 -0700
Subject: [PATCH 128/173] Add deprecation messages to react-input

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-input/etc/react-input.api.md                 | 6 +++++-
 packages/react-input/src/components/Input/useInputStyles.ts | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-input/etc/react-input.api.md b/packages/react-input/etc/react-input.api.md
index fa82ff7fd1542c..9f9bd59f035c78 100644
--- a/packages/react-input/etc/react-input.api.md
+++ b/packages/react-input/etc/react-input.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Input: ForwardRefComponent<InputProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const inputClassName = "fui-Input";
 
+// @public (undocumented)
+export const inputClassNames: SlotClassNames<InputSlots>;
+
 // @public
 export type InputOnChangeData = {
     value: string;
diff --git a/packages/react-input/src/components/Input/useInputStyles.ts b/packages/react-input/src/components/Input/useInputStyles.ts
index fffc08a5872307..0d18e919ee35cd 100644
--- a/packages/react-input/src/components/Input/useInputStyles.ts
+++ b/packages/react-input/src/components/Input/useInputStyles.ts
@@ -4,7 +4,7 @@ import type { InputSlots, InputState } from './Input.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `inputClassNames.root` instead.
  */
 export const inputClassName = 'fui-Input';
 export const inputClassNames: SlotClassNames<InputSlots> = {

From 8f826ec1927484c2dbaef403e0a25b12ff34229f Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:24:57 -0700
Subject: [PATCH 129/173] Add deprecation messages to react-label

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-label/etc/react-label.api.md                 | 6 +++++-
 packages/react-label/src/components/Label/useLabelStyles.ts | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-label/etc/react-label.api.md b/packages/react-label/etc/react-label.api.md
index 49bb53dd54958a..633d3d35b5ec29 100644
--- a/packages/react-label/etc/react-label.api.md
+++ b/packages/react-label/etc/react-label.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Label: ForwardRefComponent<LabelProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const labelClassName = "fui-Label";
 
+// @public (undocumented)
+export const labelClassNames: SlotClassNames<LabelSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "LabelCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
diff --git a/packages/react-label/src/components/Label/useLabelStyles.ts b/packages/react-label/src/components/Label/useLabelStyles.ts
index 9ef6fa734208fe..8a8dce7b3480c8 100644
--- a/packages/react-label/src/components/Label/useLabelStyles.ts
+++ b/packages/react-label/src/components/Label/useLabelStyles.ts
@@ -4,7 +4,7 @@ import type { LabelSlots, LabelState } from './Label.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `labelClassNames.root` instead.
  */
 export const labelClassName = 'fui-Label';
 export const labelClassNames: SlotClassNames<LabelSlots> = {

From ee474032f663644b4cac4527898f862f70783aa7 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:26:00 -0700
Subject: [PATCH 130/173] Add deprecation messages to react-link

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-link/etc/react-link.api.md                | 6 +++++-
 packages/react-link/src/components/Link/useLinkStyles.ts | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-link/etc/react-link.api.md b/packages/react-link/etc/react-link.api.md
index 29ccf669e35679..297388a9c60ac0 100644
--- a/packages/react-link/etc/react-link.api.md
+++ b/packages/react-link/etc/react-link.api.md
@@ -9,13 +9,17 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 // @public
 export const Link: ForwardRefComponent<LinkProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const linkClassName = "fui-Link";
 
+// @public (undocumented)
+export const linkClassNames: SlotClassNames<LinkSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "LinkCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
diff --git a/packages/react-link/src/components/Link/useLinkStyles.ts b/packages/react-link/src/components/Link/useLinkStyles.ts
index b7873b5a90fb77..1d05c258d01edd 100644
--- a/packages/react-link/src/components/Link/useLinkStyles.ts
+++ b/packages/react-link/src/components/Link/useLinkStyles.ts
@@ -5,7 +5,7 @@ import type { LinkSlots, LinkState } from './Link.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `linkClassNames.root` instead.
  */
 export const linkClassName = 'fui-Link';
 export const linkClassNames: SlotClassNames<LinkSlots> = {

From 245eb0c064542423976fe045a491e29060d04464 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:29:51 -0700
Subject: [PATCH 131/173] Add deprecation messages to react-menu

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-menu/etc/react-menu.api.md     | 46 +++++++++++++++----
 .../MenuDivider/useMenuDividerStyles.ts       |  2 +-
 .../MenuGroup/useMenuGroupStyles.ts           |  2 +-
 .../useMenuGroupHeaderStyles.ts               |  2 +-
 .../components/MenuItem/useMenuItemStyles.ts  |  2 +-
 .../useMenuItemCheckboxStyles.ts              |  2 +-
 .../MenuItemRadio/useMenuItemRadioStyles.ts   |  2 +-
 .../components/MenuList/useMenuListStyles.ts  |  2 +-
 .../MenuPopover/useMenuPopoverStyles.ts       |  2 +-
 .../MenuSplitGroup/useMenuSplitGroupStyles.ts |  2 +-
 10 files changed, 46 insertions(+), 18 deletions(-)

diff --git a/packages/react-menu/etc/react-menu.api.md b/packages/react-menu/etc/react-menu.api.md
index e0fb73d89b7d59..15973117960ad0 100644
--- a/packages/react-menu/etc/react-menu.api.md
+++ b/packages/react-menu/etc/react-menu.api.md
@@ -13,6 +13,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import { usePopperMouseTarget } from '@fluentui/react-positioning';
 
 // @public
@@ -44,9 +45,12 @@ export type MenuContextValues = {
 // @public
 export const MenuDivider: ForwardRefComponent<MenuDividerProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuDividerClassName = "fui-MenuDivider";
 
+// @public (undocumented)
+export const menuDividerClassNames: SlotClassNames<MenuDividerSlots>;
+
 // @public (undocumented)
 export type MenuDividerProps = ComponentProps<MenuDividerSlots>;
 
@@ -61,9 +65,12 @@ export type MenuDividerState = ComponentState<MenuDividerSlots>;
 // @public
 export const MenuGroup: ForwardRefComponent<MenuGroupProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuGroupClassName = "fui-MenuGroup";
 
+// @public (undocumented)
+export const menuGroupClassNames: SlotClassNames<MenuGroupSlots>;
+
 // @public (undocumented)
 export const MenuGroupContextProvider: React_2.Provider<MenuGroupContextValue>;
 
@@ -80,9 +87,12 @@ export type MenuGroupContextValues = {
 // @public
 export const MenuGroupHeader: ForwardRefComponent<MenuGroupHeaderProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuGroupHeaderClassName = "fui-MenuGroupHeader";
 
+// @public (undocumented)
+export const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots>;
+
 // @public (undocumented)
 export type MenuGroupHeaderProps = ComponentProps<MenuGroupHeaderSlots>;
 
@@ -113,18 +123,24 @@ export const MenuItem: ForwardRefComponent<MenuItemProps>;
 // @public
 export const MenuItemCheckbox: ForwardRefComponent<MenuItemCheckboxProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuItemCheckboxClassName = "fui-MenuItemCheckbox";
 
+// @public (undocumented)
+export const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
+
 // @public (undocumented)
 export type MenuItemCheckboxProps = MenuItemProps & MenuItemSelectableProps;
 
 // @public (undocumented)
 export type MenuItemCheckboxState = MenuItemState & MenuItemSelectableState;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuItemClassName = "fui-MenuItem";
 
+// @public (undocumented)
+export const menuItemClassNames: SlotClassNames<MenuItemSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "MenuItemCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -133,9 +149,12 @@ export type MenuItemProps = ComponentProps<Partial<MenuItemSlots>> & MenuItemCom
 // @public
 export const MenuItemRadio: ForwardRefComponent<MenuItemRadioProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuItemRadioClassName = "fui-MenuItemRadio";
 
+// @public (undocumented)
+export const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>>;
+
 // @public (undocumented)
 export type MenuItemRadioProps = MenuItemProps & MenuItemSelectableProps;
 
@@ -171,9 +190,12 @@ export type MenuItemState = ComponentState<MenuItemSlots> & MenuItemCommons;
 // @public
 export const MenuList: ForwardRefComponent<MenuListProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuListClassName = "fui-MenuList";
 
+// @public (undocumented)
+export const menuListClassNames: SlotClassNames<MenuListSlots>;
+
 // @public (undocumented)
 export const MenuListContext: Context<MenuListContextValue>;
 
@@ -222,9 +244,12 @@ export type MenuOpenEvents = MouseEvent | TouchEvent | React_2.MouseEvent<HTMLEl
 // @public
 export const MenuPopover: ForwardRefComponent<MenuPopoverProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuPopoverClassName = "fui-MenuPopover";
 
+// @public (undocumented)
+export const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots>;
+
 // @public
 export type MenuPopoverProps = ComponentProps<MenuPopoverSlots>;
 
@@ -255,9 +280,12 @@ export type MenuSlots = {};
 // @public
 export const MenuSplitGroup: ForwardRefComponent<MenuSplitGroupProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const menuSplitGroupClassName = "fui-MenuSplitGroup";
 
+// @public (undocumented)
+export const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "MenuSplitGroupCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
diff --git a/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts b/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
index 7fa2fbd0b2dd32..a8e24e011f29d4 100644
--- a/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
+++ b/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
@@ -4,7 +4,7 @@ import type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `menuDividerClassNames.root` instead.
  */
 export const menuDividerClassName = 'fui-MenuDivider';
 export const menuDividerClassNames: SlotClassNames<MenuDividerSlots> = {
diff --git a/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts b/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
index 9b33b577d14b3c..791eaa8305f86f 100644
--- a/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
+++ b/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
@@ -3,7 +3,7 @@ import { mergeClasses } from '@griffel/react';
 import type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';
 
 /**
- * @deprecated
+ * @deprecated Use `menuGroupClassNames.root` instead.
  */
 export const menuGroupClassName = 'fui-MenuGroup';
 export const menuGroupClassNames: SlotClassNames<MenuGroupSlots> = {
diff --git a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
index bbb2386a0bcf62..f730b2355ef5fe 100644
--- a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
+++ b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
@@ -4,7 +4,7 @@ import type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHead
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `menuGroupHeaderClassNames.root` instead.
  */
 export const menuGroupHeaderClassName = 'fui-MenuGroupHeader';
 export const menuGroupHeaderClassNames: SlotClassNames<MenuGroupHeaderSlots> = {
diff --git a/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts b/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
index 53c2b94ffacdd3..62ac15c996fc71 100644
--- a/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
+++ b/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
@@ -7,7 +7,7 @@ import type { MenuItemSlots, MenuItemState } from './MenuItem.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `menuItemClassNames.root` instead.
  */
 export const menuItemClassName = 'fui-MenuItem';
 export const menuItemClassNames: SlotClassNames<MenuItemSlots> = {
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
index 8866b90e2b75b5..76aec40194c0dc 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
+++ b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
@@ -6,7 +6,7 @@ import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
 import type { MenuItemCheckboxState } from './MenuItemCheckbox.types';
 
 /**
- * @deprecated
+ * @deprecated Use `menuItemCheckboxClassNames.root` instead.
  */
 export const menuItemCheckboxClassName = 'fui-MenuItemCheckbox';
 export const menuItemCheckboxClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {
diff --git a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
index 0caf24784dcfb6..e9cdc6f59d3808 100644
--- a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
+++ b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
@@ -6,7 +6,7 @@ import { useMenuItemStyles_unstable } from '../MenuItem/useMenuItemStyles';
 import type { MenuItemRadioState } from './MenuItemRadio.types';
 
 /**
- * @deprecated
+ * @deprecated Use `menuItemRadioClassNames.root` instead.
  */
 export const menuItemRadioClassName = 'fui-MenuItemRadio';
 export const menuItemRadioClassNames: SlotClassNames<Omit<MenuItemSlots, 'submenuIndicator'>> = {
diff --git a/packages/react-menu/src/components/MenuList/useMenuListStyles.ts b/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
index e4260ee8e37b44..1c2bd0b4c27e58 100644
--- a/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
+++ b/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
@@ -3,7 +3,7 @@ import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import type { MenuListSlots, MenuListState } from './MenuList.types';
 
 /**
- * @deprecated
+ * @deprecated Use `menuListClassNames.root` instead.
  */
 export const menuListClassName = 'fui-MenuList';
 export const menuListClassNames: SlotClassNames<MenuListSlots> = {
diff --git a/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts b/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
index 5eb353a0886cf8..753ab32074a95d 100644
--- a/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
+++ b/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
@@ -4,7 +4,7 @@ import type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `menuPopoverClassNames.root` instead.
  */
 export const menuPopoverClassName = 'fui-MenuPopover';
 export const menuPopoverClassNames: SlotClassNames<MenuPopoverSlots> = {
diff --git a/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts b/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
index c8541f0e97587a..8c070675781f81 100644
--- a/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
+++ b/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
@@ -5,7 +5,7 @@ import type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `menuSplitGroupClassNames.root` instead.
  */
 export const menuSplitGroupClassName = 'fui-MenuSplitGroup';
 export const menuSplitGroupClassNames: SlotClassNames<MenuSplitGroupSlots> = {

From a8d328b1b3f7e19046e6a730ddead25cfd9cbd22 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:31:11 -0700
Subject: [PATCH 132/173] Add deprecation messages to react-popover

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-popover/etc/react-popover.api.md             | 6 +++++-
 .../components/PopoverSurface/usePopoverSurfaceStyles.ts    | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-popover/etc/react-popover.api.md b/packages/react-popover/etc/react-popover.api.md
index f0ee08f1534ca2..2f599185c4847f 100644
--- a/packages/react-popover/etc/react-popover.api.md
+++ b/packages/react-popover/etc/react-popover.api.md
@@ -17,6 +17,7 @@ import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities/src';
 import type { usePopperMouseTarget } from '@fluentui/react-positioning';
 
 // @public (undocumented)
@@ -66,9 +67,12 @@ export type PopoverState = PopoverCommons & Pick<PopoverProps, 'children'> & {
 // @public
 export const PopoverSurface: ForwardRefComponent<PopoverSurfaceProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const popoverSurfaceClassName = "fui-PopoverSurface";
 
+// @public (undocumented)
+export const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots>;
+
 // @public
 export type PopoverSurfaceProps = ComponentProps<PopoverSurfaceSlots>;
 
diff --git a/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts b/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
index f63f704ec869ba..1b4c41fdb3a02b 100644
--- a/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
+++ b/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
@@ -6,7 +6,7 @@ import type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.
 import { SlotClassNames } from '@fluentui/react-utilities/src';
 
 /**
- * @deprecated
+ * @deprecated Use `popoverSurfaceClassNames.root` instead.
  */
 export const popoverSurfaceClassName = 'fui-PopoverSurface';
 export const popoverSurfaceClassNames: SlotClassNames<PopoverSurfaceSlots> = {

From 3766c5655f80b4cb9db462fd52b730ffe9096569 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:32:40 -0700
Subject: [PATCH 133/173] Add deprecation messages to react-provider

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-provider/etc/react-provider.api.md           | 6 +++++-
 .../components/FluentProvider/useFluentProviderStyles.ts    | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-provider/etc/react-provider.api.md b/packages/react-provider/etc/react-provider.api.md
index ea6ed20951b7a0..bc7cc67cbbb6eb 100644
--- a/packages/react-provider/etc/react-provider.api.md
+++ b/packages/react-provider/etc/react-provider.api.md
@@ -10,6 +10,7 @@ import type { PartialTheme } from '@fluentui/react-theme';
 import type { ProviderContextValue } from '@fluentui/react-shared-contexts';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 import type { Theme } from '@fluentui/react-theme';
 import type { ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
 import type { TooltipContextType } from '@fluentui/react-shared-contexts';
@@ -19,9 +20,12 @@ import { useTheme } from '@fluentui/react-shared-contexts';
 // @public (undocumented)
 export const FluentProvider: React_2.ForwardRefExoticComponent<FluentProviderProps & React_2.RefAttributes<HTMLElement>>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const fluentProviderClassName = "fui-FluentProvider";
 
+// @public (undocumented)
+export const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
+
 // @public (undocumented)
 export interface FluentProviderContextValues extends Pick<FluentProviderState, 'theme'> {
     // (undocumented)
diff --git a/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts b/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
index 006769e5a46a0a..dc94f0c32d771d 100644
--- a/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
+++ b/packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts
@@ -4,7 +4,7 @@ import type { FluentProviderSlots, FluentProviderState } from './FluentProvider.
 import { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
- * @deprecated
+ * @deprecated Use `fluentProviderClassNames.root` instead.
  */
 export const fluentProviderClassName = 'fui-FluentProvider';
 export const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {

From 7c60ed3fd96f069e7b0273226c73371b3f46032d Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:34:04 -0700
Subject: [PATCH 134/173] Add deprecation messages to react-radio

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-radio/etc/react-radio.api.md                 | 6 ++++++
 packages/react-radio/src/components/Radio/useRadioStyles.ts | 2 +-
 .../src/components/RadioGroup/useRadioGroupStyles.ts        | 2 +-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/packages/react-radio/etc/react-radio.api.md b/packages/react-radio/etc/react-radio.api.md
index 143ea5653499f0..91b3083a0a02d5 100644
--- a/packages/react-radio/etc/react-radio.api.md
+++ b/packages/react-radio/etc/react-radio.api.md
@@ -15,12 +15,18 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Radio: ForwardRefComponent<RadioProps>;
 
+// @public @deprecated (undocumented)
+export const radioClassName = "fui-Radio";
+
 // @public (undocumented)
 export const radioClassNames: SlotClassNames<RadioSlots>;
 
 // @public
 export const RadioGroup: ForwardRefComponent<RadioGroupProps>;
 
+// @public @deprecated (undocumented)
+export const radioGroupClassName = "fui-RadioGroup";
+
 // @public (undocumented)
 export const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
 
diff --git a/packages/react-radio/src/components/Radio/useRadioStyles.ts b/packages/react-radio/src/components/Radio/useRadioStyles.ts
index 2d3883e0390439..98744ffc323101 100644
--- a/packages/react-radio/src/components/Radio/useRadioStyles.ts
+++ b/packages/react-radio/src/components/Radio/useRadioStyles.ts
@@ -5,7 +5,7 @@ import type { RadioSlots, RadioState } from './Radio.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
- * @deprecated
+ * @deprecated Use `radioClassNames.root` instead.
  */
 export const radioClassName = 'fui-Radio';
 export const radioClassNames: SlotClassNames<RadioSlots> = {
diff --git a/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts b/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
index 2282ed1e0eca57..fd197c004dce37 100644
--- a/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
+++ b/packages/react-radio/src/components/RadioGroup/useRadioGroupStyles.ts
@@ -3,7 +3,7 @@ import { RadioGroupSlots, RadioGroupState } from './RadioGroup.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
- * @deprecated
+ * @deprecated Use `radioGroupClassNames.root` instead.
  */
 export const radioGroupClassName = 'fui-RadioGroup';
 export const radioGroupClassNames: SlotClassNames<RadioGroupSlots> = {

From 0e3ed2e6a897c42973e614dbc47b9ee2e7382414 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:36:01 -0700
Subject: [PATCH 135/173] Add deprecation messages to react-select

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-select/src/components/Select/useSelectStyles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-select/src/components/Select/useSelectStyles.ts b/packages/react-select/src/components/Select/useSelectStyles.ts
index a29082f8353b5c..39aad4e7f4955b 100644
--- a/packages/react-select/src/components/Select/useSelectStyles.ts
+++ b/packages/react-select/src/components/Select/useSelectStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { SelectSlots, SelectState } from './Select.types';
 
 /**
- * @deprecated
+ * @deprecated Use `selectClassNames.root` instead.
  */
 export const selectClassName = 'fui-Select';
 export const selectClassNames: SlotClassNames<SelectSlots> = {

From dee5bc4da53fbece3f03a936203940cd8360ff19 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:37:34 -0700
Subject: [PATCH 136/173] Add deprecation messages to react-spinbutton

Adds a helpful message for the deprecated <Component>Classname
property.
---
 .../src/components/SpinButton/useSpinButtonStyles.ts            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts b/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
index 24ab0415e1e156..08b79e0646db95 100644
--- a/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
+++ b/packages/react-spinbutton/src/components/SpinButton/useSpinButtonStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';
 
 /**
- * @deprecated
+ * @deprecated Use `spinButtonClassNames.root` instead.
  */
 export const spinButtonClassName = 'fui-SpinButton';
 export const spinButtonClassNames: SlotClassNames<SpinButtonSlots> = {

From a977af1f65817ed38a338e664cd0ca75b396597f Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:38:32 -0700
Subject: [PATCH 137/173] Add deprecation messages to react-spinner

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-spinner/etc/react-spinner.api.md             | 6 +++++-
 .../src/components/Spinner/useSpinnerStyles.ts              | 2 +-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-spinner/etc/react-spinner.api.md b/packages/react-spinner/etc/react-spinner.api.md
index bd1510cf09f74d..3f75a72e264fea 100644
--- a/packages/react-spinner/etc/react-spinner.api.md
+++ b/packages/react-spinner/etc/react-spinner.api.md
@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;
@@ -16,9 +17,12 @@ export const renderSpinner_unstable: (state: SpinnerState) => JSX.Element;
 // @public
 export const Spinner: ForwardRefComponent<SpinnerProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const spinnerClassName = "fui-Spinner";
 
+// @public (undocumented)
+export const spinnerClassNames: SlotClassNames<SpinnerSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "SpinnerCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
diff --git a/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts b/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts
index f3c6b4c3cd0114..470ab188e041d4 100644
--- a/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts
+++ b/packages/react-spinner/src/components/Spinner/useSpinnerStyles.ts
@@ -3,7 +3,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { SpinnerSlots, SpinnerState } from './Spinner.types';
 
 /**
- * @deprecated
+ * @deprecated Use `spinnerClassNames.root` instead.
  */
 export const spinnerClassName = 'fui-Spinner';
 export const spinnerClassNames: SlotClassNames<SpinnerSlots> = {

From 7048b84824c8a209493e7e91f4a4c64a3bf3553f Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:40:20 -0700
Subject: [PATCH 138/173] Add deprecation messages to react-switch

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-switch/etc/react-switch.api.md                 | 2 +-
 .../react-switch/src/components/Switch/useSwitchStyles.ts     | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-switch/etc/react-switch.api.md b/packages/react-switch/etc/react-switch.api.md
index 072c1ee2d35e0f..bda4f401e6744d 100644
--- a/packages/react-switch/etc/react-switch.api.md
+++ b/packages/react-switch/etc/react-switch.api.md
@@ -18,7 +18,7 @@ export const renderSwitch_unstable: (state: SwitchState) => JSX.Element;
 // @public
 export const Switch: ForwardRefComponent<SwitchProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const switchClassName: string;
 
 // @public (undocumented)
diff --git a/packages/react-switch/src/components/Switch/useSwitchStyles.ts b/packages/react-switch/src/components/Switch/useSwitchStyles.ts
index 1526cc79a942bb..d7a2c65e9851cb 100644
--- a/packages/react-switch/src/components/Switch/useSwitchStyles.ts
+++ b/packages/react-switch/src/components/Switch/useSwitchStyles.ts
@@ -11,7 +11,9 @@ export const switchClassNames: SlotClassNames<SwitchSlots> = {
   label: 'fui-Switch__label',
 };
 
-// TODO temporary export to pass conformance test.
+/**
+ * @deprecated Use `switchClassNames.root` instead.
+ */
 export const switchClassName = switchClassNames.root;
 
 // TODO replace these spacing constants with theme values once they're on the theme.

From 75ba18bddfc360807378a11263e4ec249ce89a51 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:41:42 -0700
Subject: [PATCH 139/173] Add deprecation messages to react-tabs

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-tabs/etc/react-tabs.api.md           | 13 ++++++++++---
 .../react-tabs/src/components/Tab/useTabStyles.ts   |  2 +-
 .../src/components/TabList/useTabListStyles.ts      |  2 +-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/react-tabs/etc/react-tabs.api.md b/packages/react-tabs/etc/react-tabs.api.md
index b09e22d63d4d8c..9f0f0aa7142114 100644
--- a/packages/react-tabs/etc/react-tabs.api.md
+++ b/packages/react-tabs/etc/react-tabs.api.md
@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public (undocumented)
 export const indicatorLengthVar = "--selection-indicator-length";
@@ -45,9 +46,12 @@ export type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData)
 // @public
 export const Tab: ForwardRefComponent<TabProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const tabClassName = "fui-Tab";
 
+// @public (undocumented)
+export const tabClassNames: SlotClassNames<TabSlots>;
+
 // @public
 export type TabContentRect = {
     x: number;
@@ -59,9 +63,12 @@ export type TabContentRect = {
 // @public
 export const TabList: ForwardRefComponent<TabListProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const tabListClassName = "fui-TabList";
 
+// @public (undocumented)
+export const tabListClassNames: SlotClassNames<TabListSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "TabListCommons" needs to be exported by the entry point index.d.ts
 //
 // @public (undocumented)
@@ -82,7 +89,7 @@ export type TabListProps = ComponentProps<TabListSlots> & TabListCommons & {
 };
 
 // @public (undocumented)
-export const tabListSelectionIndicatorName = "fui-TabList_SelectionIndicator";
+export const tabListSelectionIndicatorName = "fui-TabList__selectionIndicator";
 
 // @public (undocumented)
 export type TabListSlots = {
diff --git a/packages/react-tabs/src/components/Tab/useTabStyles.ts b/packages/react-tabs/src/components/Tab/useTabStyles.ts
index 582ab4fadd228a..b1c12c0b38e766 100644
--- a/packages/react-tabs/src/components/Tab/useTabStyles.ts
+++ b/packages/react-tabs/src/components/Tab/useTabStyles.ts
@@ -7,7 +7,7 @@ import { tabPendingDesignTokens } from '../../tab.constants';
 import { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
- * @deprecated
+ * @deprecated Use `tabClassNames.root` instead.
  */
 export const tabClassName = 'fui-Tab';
 export const tabClassNames: SlotClassNames<TabSlots> = {
diff --git a/packages/react-tabs/src/components/TabList/useTabListStyles.ts b/packages/react-tabs/src/components/TabList/useTabListStyles.ts
index 9d7487c1cbf5b6..8bd0c4f9f626a6 100644
--- a/packages/react-tabs/src/components/TabList/useTabListStyles.ts
+++ b/packages/react-tabs/src/components/TabList/useTabListStyles.ts
@@ -5,7 +5,7 @@ import { SlotClassNames, usePrevious } from '@fluentui/react-utilities';
 import { tabPendingDesignTokens } from '../../tab.constants';
 
 /**
- * @deprecated
+ * @deprecated Use `tabListClassNames.root` instead.
  */
 export const tabListClassName = 'fui-TabList';
 export const tabListSelectionIndicatorName = 'fui-TabList__selectionIndicator';

From 84109e1a8c196d5f12332ec98f37e0c9b4258ca7 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:45:40 -0700
Subject: [PATCH 140/173] Add deprecation messages to react-text

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-text/etc/react-text.api.md     | 51 +++++++++++++++----
 .../react-text/src/components/Body/Body.tsx   |  2 +-
 .../src/components/Caption/Caption.tsx        |  2 +-
 .../src/components/Display/Display.tsx        |  2 +-
 .../src/components/Headline/Headline.tsx      |  2 +-
 .../src/components/LargeTitle/LargeTitle.tsx  |  2 +-
 .../components/Subheadline/Subheadline.tsx    |  2 +-
 .../src/components/Text/useTextStyles.ts      |  2 +-
 .../src/components/Title1/Title1.tsx          |  2 +-
 .../src/components/Title2/Title2.tsx          |  2 +-
 .../src/components/Title3/Title3.tsx          |  2 +-
 11 files changed, 51 insertions(+), 20 deletions(-)

diff --git a/packages/react-text/etc/react-text.api.md b/packages/react-text/etc/react-text.api.md
index 20fdf0e3c8f078..f518b1856b4615 100644
--- a/packages/react-text/etc/react-text.api.md
+++ b/packages/react-text/etc/react-text.api.md
@@ -10,6 +10,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { FunctionComponent } from 'react';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // Warning: (ae-forgotten-export) The symbol "TextWrapperProps" needs to be exported by the entry point index.d.ts
 //
@@ -17,49 +18,70 @@ import type { Slot } from '@fluentui/react-utilities';
 const Body_2: FunctionComponent<TextWrapperProps>;
 export { Body_2 as Body }
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const bodyClassName = "fui-Body";
 
+// @public (undocumented)
+export const bodyClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const Caption: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const captionClassName = "fui-Caption";
 
+// @public (undocumented)
+export const captionClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const Display: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const displayClassName = "fui-Display";
 
+// @public (undocumented)
+export const displayClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const Headline: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const headlineClassName = "fui-Headline";
 
+// @public (undocumented)
+export const headlineClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const LargeTitle: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const largeTitleClassName = "fui-LargeTitle";
 
+// @public (undocumented)
+export const largeTitleClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const renderText_unstable: (state: TextState) => JSX.Element;
 
 // @public
 export const Subheadline: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const subheadlineClassName = "fui-Subheadline";
 
+// @public (undocumented)
+export const subheadlineClassNames: SlotClassNames<TextSlots>;
+
 // @public
 const Text_2: ForwardRefComponent<TextProps>;
 export { Text_2 as Text }
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const textClassName = "fui-Text";
 
+// @public (undocumented)
+export const textClassNames: SlotClassNames<TextSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "TextCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
@@ -76,21 +98,30 @@ export type TextState = ComponentState<TextSlots> & TextCommons;
 // @public
 export const Title1: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const title1ClassName = "fui-Title1";
 
+// @public (undocumented)
+export const title1ClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const Title2: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const title2ClassName = "fui-Title2";
 
+// @public (undocumented)
+export const title2ClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const Title3: FunctionComponent<TextWrapperProps>;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const title3ClassName = "fui-Title3";
 
+// @public (undocumented)
+export const title3ClassNames: SlotClassNames<TextSlots>;
+
 // @public
 export const useText_unstable: (props: TextProps, ref: React_2.Ref<HTMLElement>) => TextState;
 
diff --git a/packages/react-text/src/components/Body/Body.tsx b/packages/react-text/src/components/Body/Body.tsx
index f631999d00eae4..defe6243fc829d 100644
--- a/packages/react-text/src/components/Body/Body.tsx
+++ b/packages/react-text/src/components/Body/Body.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `bodyClassNames.root` instead.
  */
 export const bodyClassName = 'fui-Body';
 export const bodyClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Caption/Caption.tsx b/packages/react-text/src/components/Caption/Caption.tsx
index f274b3a829650e..03e68cdea9215e 100644
--- a/packages/react-text/src/components/Caption/Caption.tsx
+++ b/packages/react-text/src/components/Caption/Caption.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `captionClassNames.root` instead.
  */
 export const captionClassName = 'fui-Caption';
 export const captionClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Display/Display.tsx b/packages/react-text/src/components/Display/Display.tsx
index ba3f335f1bc9dc..dc73db8bbcfd6d 100644
--- a/packages/react-text/src/components/Display/Display.tsx
+++ b/packages/react-text/src/components/Display/Display.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `displayClassNames.root` instead.
  */
 export const displayClassName = 'fui-Display';
 export const displayClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Headline/Headline.tsx b/packages/react-text/src/components/Headline/Headline.tsx
index bd6ded8622242e..65b9763bc80a8a 100644
--- a/packages/react-text/src/components/Headline/Headline.tsx
+++ b/packages/react-text/src/components/Headline/Headline.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `headlineClassNames.root` instead.
  */
 export const headlineClassName = 'fui-Headline';
 export const headlineClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/LargeTitle/LargeTitle.tsx b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
index d76e0b6e3978da..de030e7e0f3ef6 100644
--- a/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
+++ b/packages/react-text/src/components/LargeTitle/LargeTitle.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `largeTitleClassNames.root` instead.
  */
 export const largeTitleClassName = 'fui-LargeTitle';
 export const largeTitleClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Subheadline/Subheadline.tsx b/packages/react-text/src/components/Subheadline/Subheadline.tsx
index 74ad9d71e242d1..c3fa279d571acb 100644
--- a/packages/react-text/src/components/Subheadline/Subheadline.tsx
+++ b/packages/react-text/src/components/Subheadline/Subheadline.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `subheadlineClassNames.root` instead.
  */
 export const subheadlineClassName = 'fui-Subheadline';
 export const subheadlineClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Text/useTextStyles.ts b/packages/react-text/src/components/Text/useTextStyles.ts
index 50aa2a3e5c7fa2..8b58e16d1741cd 100644
--- a/packages/react-text/src/components/Text/useTextStyles.ts
+++ b/packages/react-text/src/components/Text/useTextStyles.ts
@@ -4,7 +4,7 @@ import type { TextSlots, TextState } from './Text.types';
 import { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
- * @deprecated
+ * @deprecated Use `textClassNames.root` instead.
  */
 export const textClassName = 'fui-Text';
 export const textClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Title1/Title1.tsx b/packages/react-text/src/components/Title1/Title1.tsx
index f8afdf548c5c91..0465faa4173e08 100644
--- a/packages/react-text/src/components/Title1/Title1.tsx
+++ b/packages/react-text/src/components/Title1/Title1.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `title1ClassNames.root` instead.
  */
 export const title1ClassName = 'fui-Title1';
 export const title1ClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Title2/Title2.tsx b/packages/react-text/src/components/Title2/Title2.tsx
index aa5ebcaf87583f..8c149fdcb02462 100644
--- a/packages/react-text/src/components/Title2/Title2.tsx
+++ b/packages/react-text/src/components/Title2/Title2.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `title2ClassNames.root` instead.
  */
 export const title2ClassName = 'fui-Title2';
 export const title2ClassNames: SlotClassNames<TextSlots> = {
diff --git a/packages/react-text/src/components/Title3/Title3.tsx b/packages/react-text/src/components/Title3/Title3.tsx
index a1eab8207d519f..5d1660098bfa7e 100644
--- a/packages/react-text/src/components/Title3/Title3.tsx
+++ b/packages/react-text/src/components/Title3/Title3.tsx
@@ -6,7 +6,7 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { TextSlots } from '../Text/Text.types';
 
 /**
- * @deprecated
+ * @deprecated Use `title3ClassNames.root` instead.
  */
 export const title3ClassName = 'fui-Title3';
 export const title3ClassNames: SlotClassNames<TextSlots> = {

From 6beb8ac2bad50f16f3db8f772be6b5c29e8da953 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:48:39 -0700
Subject: [PATCH 141/173] Remove deprecated exports from Toolbar

Toolbar is not currently exported from react-components so it is
safe to just remove these exports.
---
 packages/react-toolbar/etc/react-toolbar.api.md            | 7 ++++---
 .../src/components/Toolbar/useToolbarStyles.ts             | 4 ----
 .../src/components/ToolbarButton/useToolbarButtonStyles.ts | 4 ----
 .../components/ToolbarDivider/useToolbarDividerStyles.ts   | 4 ----
 4 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/packages/react-toolbar/etc/react-toolbar.api.md b/packages/react-toolbar/etc/react-toolbar.api.md
index 5bdcd321ebc216..cd34c1cff0d1d1 100644
--- a/packages/react-toolbar/etc/react-toolbar.api.md
+++ b/packages/react-toolbar/etc/react-toolbar.api.md
@@ -9,6 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const renderToolbar_unstable: (state: ToolbarState) => JSX.Element;
@@ -26,7 +27,7 @@ export const Toolbar: ForwardRefComponent<ToolbarProps>;
 export const ToolbarButton: ForwardRefComponent<ToolbarButtonProps>;
 
 // @public (undocumented)
-export const toolbarButtonClassName = "fui-ToolbarButton";
+export const toolbarButtonClassNames: SlotClassNames<ToolbarButtonSlots>;
 
 // Warning: (ae-forgotten-export) The symbol "ToolbarButtonCommons" needs to be exported by the entry point index.d.ts
 //
@@ -42,13 +43,13 @@ export type ToolbarButtonSlots = {
 export type ToolbarButtonState = ComponentState<ToolbarButtonSlots> & ToolbarButtonCommons;
 
 // @public (undocumented)
-export const toolbarClassName = "fui-Toolbar";
+export const toolbarClassNames: SlotClassNames<ToolbarSlots>;
 
 // @public
 export const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps>;
 
 // @public (undocumented)
-export const toolbarDividerClassName = "fui-ToolbarDivider";
+export const toolbarDividerClassNames: SlotClassNames<ToolbarDividerSlots>;
 
 // Warning: (ae-forgotten-export) The symbol "ToolbarDividerCommons" needs to be exported by the entry point index.d.ts
 //
diff --git a/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts b/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
index 075cc65e51676d..222690144b4849 100644
--- a/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
+++ b/packages/react-toolbar/src/components/Toolbar/useToolbarStyles.ts
@@ -2,10 +2,6 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { ToolbarSlots, ToolbarState } from './Toolbar.types';
 
-/**
- * @deprecated
- */
-export const toolbarClassName = 'fui-Toolbar';
 export const toolbarClassNames: SlotClassNames<ToolbarSlots> = {
   root: 'fui-Toolbar',
 };
diff --git a/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts b/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
index 2d67540e44e8ab..9e23b5229bfec1 100644
--- a/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
+++ b/packages/react-toolbar/src/components/ToolbarButton/useToolbarButtonStyles.ts
@@ -2,10 +2,6 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { ToolbarButtonSlots, ToolbarButtonState } from './ToolbarButton.types';
 
-/**
- * @deprecated
- */
-export const toolbarButtonClassName = 'fui-ToolbarButton';
 export const toolbarButtonClassNames: SlotClassNames<ToolbarButtonSlots> = {
   root: 'fui-ToolbarButton',
 };
diff --git a/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts b/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
index 3bc8a6ef91b08f..d0cf33589c03e6 100644
--- a/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
+++ b/packages/react-toolbar/src/components/ToolbarDivider/useToolbarDividerStyles.ts
@@ -2,10 +2,6 @@ import { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { ToolbarDividerSlots, ToolbarDividerState } from './ToolbarDivider.types';
 
-/**
- * @deprecated
- */
-export const toolbarDividerClassName = 'fui-ToolbarDivider';
 export const toolbarDividerClassNames: SlotClassNames<ToolbarDividerSlots> = {
   root: 'fui-ToolbarDivider',
 };

From cae74463e7e27c04129996eb8cc16617954e9c78 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 10:58:33 -0700
Subject: [PATCH 142/173] Add deprecation messages to react-toolip

Adds a helpful message for the deprecated <Component>Classname
property.
---
 packages/react-tooltip/etc/react-tooltip.api.md             | 6 +++++-
 .../src/components/Tooltip/useTooltipStyles.ts              | 5 ++++-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/react-tooltip/etc/react-tooltip.api.md b/packages/react-tooltip/etc/react-tooltip.api.md
index 995458bdd82df8..1ba194b8369a23 100644
--- a/packages/react-tooltip/etc/react-tooltip.api.md
+++ b/packages/react-tooltip/etc/react-tooltip.api.md
@@ -10,6 +10,7 @@ import type { FluentTriggerComponent } from '@fluentui/react-utilities';
 import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export type OnVisibleChangeData = {
@@ -22,9 +23,12 @@ export const renderTooltip_unstable: (state: TooltipState) => JSX.Element;
 // @public
 export const Tooltip: React_2.FC<TooltipProps> & FluentTriggerComponent;
 
-// @public (undocumented)
+// @public @deprecated (undocumented)
 export const tooltipClassName = "fui-Tooltip";
 
+// @public (undocumented)
+export const tooltipClassNames: SlotClassNames<TooltipSlots>;
+
 // Warning: (ae-forgotten-export) The symbol "TooltipCommons" needs to be exported by the entry point index.d.ts
 //
 // @public
diff --git a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
index c07e6f1accdee5..3ce1524c7dcee8 100644
--- a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
+++ b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
@@ -3,8 +3,11 @@ import { createArrowStyles } from '@fluentui/react-positioning';
 import { tokens } from '@fluentui/react-theme';
 import { arrowHeight } from './private/constants';
 import type { TooltipSlots, TooltipState } from './Tooltip.types';
-import { SlotClassNames } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `tooltipClassNames.root` instead.
+ */
 export const tooltipClassName = 'fui-Tooltip';
 export const tooltipClassNames: SlotClassNames<TooltipSlots> = {
   content: 'fui-Tooltip__content',

From 5efd7bece783e9f2cd8a9a421bf964ff3303060a Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 11:02:10 -0700
Subject: [PATCH 143/173] Clean up imports

- Remove deep package imports
- Use `type` where appropriate
---
 .../src/components/Accordion/useAccordionStyles.ts              | 2 +-
 .../src/components/AccordionHeader/useAccordionHeaderStyles.ts  | 2 +-
 .../src/components/AccordionItem/useAccordionItemStyles.ts      | 2 +-
 .../src/components/AccordionPanel/useAccordionPanelStyles.ts    | 2 +-
 packages/react-avatar/src/components/Avatar/useAvatarStyles.ts  | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts b/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
index c253b7848b6586..9bdb7be9aa8f32 100644
--- a/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
+++ b/packages/react-accordion/src/components/Accordion/useAccordionStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import type { AccordionSlots, AccordionState } from './Accordion.types';
 
diff --git a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
index 0b24e1ea680b63..674deae1168417 100644
--- a/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
+++ b/packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts
@@ -2,7 +2,7 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import type { AccordionHeaderSlots, AccordionHeaderState } from './AccordionHeader.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `accordionHeaderClassNames.root` instead.
diff --git a/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts b/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
index 5e0485979ff837..def29824f87101 100644
--- a/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
+++ b/packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import type { AccordionItemSlots, AccordionItemState } from './AccordionItem.types';
 
diff --git a/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts b/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
index 64de1916aca095..b7e1d98bb25f90 100644
--- a/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
+++ b/packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';
 
diff --git a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
index 86b264ce1c1f81..d7cc5365700374 100644
--- a/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
+++ b/packages/react-avatar/src/components/Avatar/useAvatarStyles.ts
@@ -1,7 +1,7 @@
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { AvatarSlots, AvatarState } from './Avatar.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `avatarClassNames.root` instead.

From d7f8cf1e10e445b5c402c3caa1b75269e75cfb22 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 11:16:11 -0700
Subject: [PATCH 144/173] Change files

---
 ...-react-button-bbd1cee3-fa3c-400f-b0e3-977c6a434c3b.json | 7 +++++++
 ...-react-switch-099a7ba8-9fef-494c-8383-ffac254f3526.json | 7 +++++++
 2 files changed, 14 insertions(+)
 create mode 100644 change/@fluentui-react-button-bbd1cee3-fa3c-400f-b0e3-977c6a434c3b.json
 create mode 100644 change/@fluentui-react-switch-099a7ba8-9fef-494c-8383-ffac254f3526.json

diff --git a/change/@fluentui-react-button-bbd1cee3-fa3c-400f-b0e3-977c6a434c3b.json b/change/@fluentui-react-button-bbd1cee3-fa3c-400f-b0e3-977c6a434c3b.json
new file mode 100644
index 00000000000000..e0a30098da7d78
--- /dev/null
+++ b/change/@fluentui-react-button-bbd1cee3-fa3c-400f-b0e3-977c6a434c3b.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add deprecation messages to react-button",
+  "packageName": "@fluentui/react-button",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-switch-099a7ba8-9fef-494c-8383-ffac254f3526.json b/change/@fluentui-react-switch-099a7ba8-9fef-494c-8383-ffac254f3526.json
new file mode 100644
index 00000000000000..d7468fa8b6b58a
--- /dev/null
+++ b/change/@fluentui-react-switch-099a7ba8-9fef-494c-8383-ffac254f3526.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add deprecation messages to react-switch",
+  "packageName": "@fluentui/react-switch",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

From f42cb863ba0a4371e5378a9ec0b2ec298b009a11 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 13:08:24 -0700
Subject: [PATCH 145/173] Fix import in react-dialog

---
 packages/react-dialog/src/components/Dialog/useDialogStyles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
index 3edacbfd0c6f0d..ae69ee89849f42 100644
--- a/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
+++ b/packages/react-dialog/src/components/Dialog/useDialogStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { DialogSlots, DialogState } from './Dialog.types';
 

From 041ebab1a74e9cefcafe05f3f0858302f38f6c76 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 14:42:48 -0700
Subject: [PATCH 146/173] Update Dialog API

---
 packages/react-dialog/etc/react-dialog.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dialog/etc/react-dialog.api.md b/packages/react-dialog/etc/react-dialog.api.md
index e0dbd85ca594e4..fb882803f117d2 100644
--- a/packages/react-dialog/etc/react-dialog.api.md
+++ b/packages/react-dialog/etc/react-dialog.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Dialog: ForwardRefComponent<DialogProps>;

From f69339058157848739b6b8040b989e85462d4129 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 15:24:15 -0700
Subject: [PATCH 147/173] Update type imports

---
 packages/react-badge/src/components/Badge/useBadgeStyles.ts     | 2 +-
 .../src/components/CounterBadge/useCounterBadgeStyles.ts        | 2 +-
 .../src/components/PresenceBadge/usePresenceBadgeStyles.ts      | 2 +-
 packages/react-card/src/components/Card/useCardStyles.ts        | 2 +-
 .../react-card/src/components/CardFooter/useCardFooterStyles.ts | 2 +-
 .../react-card/src/components/CardHeader/useCardHeaderStyles.ts | 2 +-
 .../src/components/CardPreview/useCardPreviewStyles.ts          | 2 +-
 .../react-checkbox/src/components/Checkbox/useCheckboxStyles.ts | 2 +-
 .../react-divider/src/components/Divider/useDividerStyles.ts    | 2 +-
 packages/react-image/src/components/Image/useImageStyles.ts     | 2 +-
 packages/react-input/src/components/Input/useInputStyles.ts     | 2 +-
 packages/react-label/src/components/Label/useLabelStyles.ts     | 2 +-
 packages/react-link/src/components/Link/useLinkStyles.ts        | 2 +-
 .../src/components/MenuDivider/useMenuDividerStyles.ts          | 2 +-
 .../react-menu/src/components/MenuGroup/useMenuGroupStyles.ts   | 2 +-
 .../src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts  | 2 +-
 .../react-menu/src/components/MenuItem/useMenuItemStyles.ts     | 2 +-
 .../components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts    | 2 +-
 .../src/components/MenuItemRadio/useMenuItemRadioStyles.ts      | 2 +-
 .../react-menu/src/components/MenuList/useMenuListStyles.ts     | 2 +-
 .../src/components/MenuPopover/useMenuPopoverStyles.ts          | 2 +-
 .../src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts    | 2 +-
 .../src/components/PopoverSurface/usePopoverSurfaceStyles.ts    | 2 +-
 23 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/packages/react-badge/src/components/Badge/useBadgeStyles.ts b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
index 1359edd6a02835..c27f6ff76e2dd8 100644
--- a/packages/react-badge/src/components/Badge/useBadgeStyles.ts
+++ b/packages/react-badge/src/components/Badge/useBadgeStyles.ts
@@ -1,7 +1,7 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { BadgeSlots, BadgeState } from './Badge.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `badgeClassNames.root` instead.
diff --git a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
index 32dcb344411b2b..865c66c6f7f84e 100644
--- a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
+++ b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { BadgeSlots } from '../Badge/Badge.types';
 import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';
diff --git a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
index 8b0c6a70627af2..59145500d2171d 100644
--- a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
+++ b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
@@ -1,7 +1,7 @@
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { PresenceBadgeState } from './PresenceBadge.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { BadgeSlots } from '../Badge/Badge.types';
 
 /**
diff --git a/packages/react-card/src/components/Card/useCardStyles.ts b/packages/react-card/src/components/Card/useCardStyles.ts
index 07fd9d34959912..d0617e39794286 100644
--- a/packages/react-card/src/components/Card/useCardStyles.ts
+++ b/packages/react-card/src/components/Card/useCardStyles.ts
@@ -2,7 +2,7 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { cardPreviewClassName } from '../CardPreview/index';
 import type { CardSlots, CardState } from './Card.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `cardClassNames.root` instead.
diff --git a/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts b/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
index b936a25788c6d3..312647b7285038 100644
--- a/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
+++ b/packages/react-card/src/components/CardFooter/useCardFooterStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { CardFooterSlots, CardFooterState } from './CardFooter.types';
 
diff --git a/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts b/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
index 5bfd94328e9c08..384c1a3e386a2e 100644
--- a/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
+++ b/packages/react-card/src/components/CardHeader/useCardHeaderStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { CardHeaderSlots, CardHeaderState } from './CardHeader.types';
 
diff --git a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
index 2ec71689beaedc..319336067983bd 100644
--- a/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
+++ b/packages/react-card/src/components/CardPreview/useCardPreviewStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
 import type { CardPreviewSlots, CardPreviewState } from './CardPreview.types';
 
diff --git a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
index 8f1bc1a14c6c23..6d9125bee34161 100644
--- a/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
+++ b/packages/react-checkbox/src/components/Checkbox/useCheckboxStyles.ts
@@ -2,7 +2,7 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import { CheckboxSlots, CheckboxState } from './Checkbox.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `checkboxClassNames.root` instead.
diff --git a/packages/react-divider/src/components/Divider/useDividerStyles.ts b/packages/react-divider/src/components/Divider/useDividerStyles.ts
index 367f0bee1c0580..906e578cf9905c 100644
--- a/packages/react-divider/src/components/Divider/useDividerStyles.ts
+++ b/packages/react-divider/src/components/Divider/useDividerStyles.ts
@@ -1,7 +1,7 @@
 import { mergeClasses, shorthands, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { DividerSlots, DividerState } from './Divider.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `dividerClassNames.root` instead.
diff --git a/packages/react-image/src/components/Image/useImageStyles.ts b/packages/react-image/src/components/Image/useImageStyles.ts
index dac335bbbf61ab..5a328d2149f67c 100644
--- a/packages/react-image/src/components/Image/useImageStyles.ts
+++ b/packages/react-image/src/components/Image/useImageStyles.ts
@@ -1,7 +1,7 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { ImageSlots, ImageState } from './Image.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `imageClassNames.root` instead.
diff --git a/packages/react-input/src/components/Input/useInputStyles.ts b/packages/react-input/src/components/Input/useInputStyles.ts
index 0d18e919ee35cd..15a1a891a861fd 100644
--- a/packages/react-input/src/components/Input/useInputStyles.ts
+++ b/packages/react-input/src/components/Input/useInputStyles.ts
@@ -1,7 +1,7 @@
 import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { InputSlots, InputState } from './Input.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `inputClassNames.root` instead.
diff --git a/packages/react-label/src/components/Label/useLabelStyles.ts b/packages/react-label/src/components/Label/useLabelStyles.ts
index 8a8dce7b3480c8..7726557e96494c 100644
--- a/packages/react-label/src/components/Label/useLabelStyles.ts
+++ b/packages/react-label/src/components/Label/useLabelStyles.ts
@@ -1,7 +1,7 @@
 import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { LabelSlots, LabelState } from './Label.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `labelClassNames.root` instead.
diff --git a/packages/react-link/src/components/Link/useLinkStyles.ts b/packages/react-link/src/components/Link/useLinkStyles.ts
index 1d05c258d01edd..fd3387be955071 100644
--- a/packages/react-link/src/components/Link/useLinkStyles.ts
+++ b/packages/react-link/src/components/Link/useLinkStyles.ts
@@ -2,7 +2,7 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
 import type { LinkSlots, LinkState } from './Link.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `linkClassNames.root` instead.
diff --git a/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts b/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
index a8e24e011f29d4..374e5a1a9a61f4 100644
--- a/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
+++ b/packages/react-menu/src/components/MenuDivider/useMenuDividerStyles.ts
@@ -1,7 +1,7 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { MenuDividerSlots, MenuDividerState } from './MenuDivider.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `menuDividerClassNames.root` instead.
diff --git a/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts b/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
index 791eaa8305f86f..ef2460760d836a 100644
--- a/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
+++ b/packages/react-menu/src/components/MenuGroup/useMenuGroupStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import type { MenuGroupSlots, MenuGroupState } from './MenuGroup.types';
 
diff --git a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
index f730b2355ef5fe..2f5140653bc5df 100644
--- a/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
+++ b/packages/react-menu/src/components/MenuGroupHeader/useMenuGroupHeaderStyles.ts
@@ -1,7 +1,7 @@
 import { mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { MenuGroupHeaderSlots, MenuGroupHeaderState } from './MenuGroupHeader.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `menuGroupHeaderClassNames.root` instead.
diff --git a/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts b/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
index 62ac15c996fc71..1f75b25816b462 100644
--- a/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
+++ b/packages/react-menu/src/components/MenuItem/useMenuItemStyles.ts
@@ -4,7 +4,7 @@ import { tokens } from '@fluentui/react-theme';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
 import { MenuItemCheckboxState } from '../MenuItemCheckbox/index';
 import type { MenuItemSlots, MenuItemState } from './MenuItem.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `menuItemClassNames.root` instead.
diff --git a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
index 76aec40194c0dc..5674c6fd9bfda1 100644
--- a/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
+++ b/packages/react-menu/src/components/MenuItemCheckbox/useMenuItemCheckboxStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
 import { MenuItemSlots } from '../index';
diff --git a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
index e9cdc6f59d3808..926650e72e7710 100644
--- a/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
+++ b/packages/react-menu/src/components/MenuItemRadio/useMenuItemRadioStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
 import { useCheckmarkStyles_unstable } from '../../selectable/index';
 import { MenuItemSlots } from '../index';
diff --git a/packages/react-menu/src/components/MenuList/useMenuListStyles.ts b/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
index 1c2bd0b4c27e58..20fe6074c1c65b 100644
--- a/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
+++ b/packages/react-menu/src/components/MenuList/useMenuListStyles.ts
@@ -1,4 +1,4 @@
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import type { MenuListSlots, MenuListState } from './MenuList.types';
 
diff --git a/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts b/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
index 753ab32074a95d..734c509bc1cd24 100644
--- a/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
+++ b/packages/react-menu/src/components/MenuPopover/useMenuPopoverStyles.ts
@@ -1,7 +1,7 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import type { MenuPopoverSlots, MenuPopoverState } from './MenuPopover.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `menuPopoverClassNames.root` instead.
diff --git a/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts b/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
index 8c070675781f81..d99162a19e8641 100644
--- a/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
+++ b/packages/react-menu/src/components/MenuSplitGroup/useMenuSplitGroupStyles.ts
@@ -2,7 +2,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { menuItemClassNames } from '../MenuItem/useMenuItemStyles';
 import type { MenuSplitGroupSlots, MenuSplitGroupState } from './MenuSplitGroup.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `menuSplitGroupClassNames.root` instead.
diff --git a/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts b/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
index 1b4c41fdb3a02b..fabed5309c2798 100644
--- a/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
+++ b/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
@@ -3,7 +3,7 @@ import { createArrowHeightStyles, createArrowStyles } from '@fluentui/react-posi
 import { tokens } from '@fluentui/react-theme';
 import type { PopoverSize } from '../Popover/Popover.types';
 import type { PopoverSurfaceSlots, PopoverSurfaceState } from './PopoverSurface.types';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
  * @deprecated Use `popoverSurfaceClassNames.root` instead.

From 7b61a8289da7721264629cd4214dfe9620e63600 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 15:39:16 -0700
Subject: [PATCH 148/173] Update Badge API files

---
 packages/react-badge/etc/react-badge.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-badge/etc/react-badge.api.md b/packages/react-badge/etc/react-badge.api.md
index 6fd232a8e68e87..476ad1d8eb24b3 100644
--- a/packages/react-badge/etc/react-badge.api.md
+++ b/packages/react-badge/etc/react-badge.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Badge: ForwardRefComponent<BadgeProps>;

From 54d84fb2ccf48b90d33ec3dad2eb49cf10015173 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 15:52:48 -0700
Subject: [PATCH 149/173] Update react-image API

---
 packages/react-image/etc/react-image.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-image/etc/react-image.api.md b/packages/react-image/etc/react-image.api.md
index 3b8aa1e1fb35e1..ad83a17aea4a63 100644
--- a/packages/react-image/etc/react-image.api.md
+++ b/packages/react-image/etc/react-image.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 const Image_2: ForwardRefComponent<ImageProps>;

From 0771ace748a879778d7ffe09159b4068e9b6bf88 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 16:32:26 -0700
Subject: [PATCH 150/173] Update react-divider API

---
 packages/react-divider/etc/react-divider.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-divider/etc/react-divider.api.md b/packages/react-divider/etc/react-divider.api.md
index d2b9b51e551627..00a1a104248aa9 100644
--- a/packages/react-divider/etc/react-divider.api.md
+++ b/packages/react-divider/etc/react-divider.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Divider: ForwardRefComponent<DividerProps>;

From aba66fcf1b1931e6bca9d27b8cf2abb2629d8981 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:05:20 -0700
Subject: [PATCH 151/173] Update react-label API

---
 packages/react-label/etc/react-label.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-label/etc/react-label.api.md b/packages/react-label/etc/react-label.api.md
index 633d3d35b5ec29..bd17206717193a 100644
--- a/packages/react-label/etc/react-label.api.md
+++ b/packages/react-label/etc/react-label.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Label: ForwardRefComponent<LabelProps>;

From 1e0f059b5d6c0c44103fb37de665d7cd78fc0a4b Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:05:59 -0700
Subject: [PATCH 152/173] Update API for react-accordion

---
 packages/react-accordion/etc/react-accordion.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-accordion/etc/react-accordion.api.md b/packages/react-accordion/etc/react-accordion.api.md
index c7c1bb26f92192..f8855c80456626 100644
--- a/packages/react-accordion/etc/react-accordion.api.md
+++ b/packages/react-accordion/etc/react-accordion.api.md
@@ -11,7 +11,7 @@ import type { Context } from '@fluentui/react-context-selector';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Accordion: ForwardRefComponent<AccordionProps>;

From 0bee0db7c489c882d06b963e9005c1b0d3544829 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:06:35 -0700
Subject: [PATCH 153/173] Update API for react-avatar

---
 packages/react-avatar/etc/react-avatar.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-avatar/etc/react-avatar.api.md b/packages/react-avatar/etc/react-avatar.api.md
index e6b23bd4f7d35b..9a5f6c26e1b5a1 100644
--- a/packages/react-avatar/etc/react-avatar.api.md
+++ b/packages/react-avatar/etc/react-avatar.api.md
@@ -10,7 +10,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { PresenceBadge } from '@fluentui/react-badge';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public (undocumented)
 export const Avatar: ForwardRefComponent<AvatarProps>;

From 76b326ae3a6edcde8ca61ad50103eccd3e7c3297 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:07:36 -0700
Subject: [PATCH 154/173] Update API for react-card

---
 packages/react-card/etc/react-card.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-card/etc/react-card.api.md b/packages/react-card/etc/react-card.api.md
index 571e1c8bf5e472..54f5eb96068547 100644
--- a/packages/react-card/etc/react-card.api.md
+++ b/packages/react-card/etc/react-card.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Card: ForwardRefComponent<CardProps>;

From ace11f31c21cd60c41717f69497cbb418ddd497e Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:08:18 -0700
Subject: [PATCH 155/173] Update API for react-checkbox

---
 packages/react-checkbox/etc/react-checkbox.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-checkbox/etc/react-checkbox.api.md b/packages/react-checkbox/etc/react-checkbox.api.md
index ee714b9a5b1adc..962b58c98f6bf2 100644
--- a/packages/react-checkbox/etc/react-checkbox.api.md
+++ b/packages/react-checkbox/etc/react-checkbox.api.md
@@ -10,7 +10,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
 import { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Checkbox: ForwardRefComponent<CheckboxProps>;

From 97b93edb7e4307d40b0965cb15541261c483d568 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:10:40 -0700
Subject: [PATCH 156/173] Update API for react-input

---
 packages/react-input/etc/react-input.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-input/etc/react-input.api.md b/packages/react-input/etc/react-input.api.md
index 9f9bd59f035c78..925e40983a24b4 100644
--- a/packages/react-input/etc/react-input.api.md
+++ b/packages/react-input/etc/react-input.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Input: ForwardRefComponent<InputProps>;

From b8eab12aa62bfd994a8c4f5fdf968975c24ffa32 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:13:05 -0700
Subject: [PATCH 157/173] Update API for react-link

---
 packages/react-link/etc/react-link.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-link/etc/react-link.api.md b/packages/react-link/etc/react-link.api.md
index 297388a9c60ac0..6d5689c1c02925 100644
--- a/packages/react-link/etc/react-link.api.md
+++ b/packages/react-link/etc/react-link.api.md
@@ -9,7 +9,7 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @public
 export const Link: ForwardRefComponent<LinkProps>;

From 920cdb51eeacea1aa623b4a46cf4020ad4d9d907 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:14:48 -0700
Subject: [PATCH 158/173] Update API for react-menu

---
 packages/react-menu/etc/react-menu.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-menu/etc/react-menu.api.md b/packages/react-menu/etc/react-menu.api.md
index 15973117960ad0..bff67a63d7bc07 100644
--- a/packages/react-menu/etc/react-menu.api.md
+++ b/packages/react-menu/etc/react-menu.api.md
@@ -13,7 +13,7 @@ import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { usePopperMouseTarget } from '@fluentui/react-positioning';
 
 // @public

From 67b5b92129ffcf10d5440a1a19ac9fe2450b6d02 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 17:15:24 -0700
Subject: [PATCH 159/173] Update API for react-popover

---
 packages/react-popover/etc/react-popover.api.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-popover/etc/react-popover.api.md b/packages/react-popover/etc/react-popover.api.md
index 2f599185c4847f..a7081ed1a25d91 100644
--- a/packages/react-popover/etc/react-popover.api.md
+++ b/packages/react-popover/etc/react-popover.api.md
@@ -17,7 +17,7 @@ import type { PositioningShorthand } from '@fluentui/react-positioning';
 import * as React_2 from 'react';
 import { ReactElement } from 'react';
 import type { Slot } from '@fluentui/react-utilities';
-import { SlotClassNames } from '@fluentui/react-utilities/src';
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { usePopperMouseTarget } from '@fluentui/react-positioning';
 
 // @public (undocumented)

From e91498ba1f19660b0905eb618f0b3a742d16df56 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 18:24:06 -0700
Subject: [PATCH 160/173] Disable 'component-has-static-classname' test on
 react-toolbar

This test is no longer applicable to react-toolbar as the
`toolbarClassName` export has been removed. This component has not
be exported as part of the public API so it is safe to entirely remove.
---
 packages/react-toolbar/src/components/Toolbar/Toolbar.test.tsx   | 1 +
 .../src/components/ToolbarButton/ToolbarButton.test.tsx          | 1 +
 .../src/components/ToolbarDivider/ToolbarDivider.test.tsx        | 1 +
 3 files changed, 3 insertions(+)

diff --git a/packages/react-toolbar/src/components/Toolbar/Toolbar.test.tsx b/packages/react-toolbar/src/components/Toolbar/Toolbar.test.tsx
index 31ce91371da55b..49f94005155d19 100644
--- a/packages/react-toolbar/src/components/Toolbar/Toolbar.test.tsx
+++ b/packages/react-toolbar/src/components/Toolbar/Toolbar.test.tsx
@@ -7,6 +7,7 @@ describe('Toolbar', () => {
   isConformant({
     Component: Toolbar,
     displayName: 'Toolbar',
+    disabledTests: ['component-has-static-classname'],
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
diff --git a/packages/react-toolbar/src/components/ToolbarButton/ToolbarButton.test.tsx b/packages/react-toolbar/src/components/ToolbarButton/ToolbarButton.test.tsx
index 580921858fd40d..b0453398bd876f 100644
--- a/packages/react-toolbar/src/components/ToolbarButton/ToolbarButton.test.tsx
+++ b/packages/react-toolbar/src/components/ToolbarButton/ToolbarButton.test.tsx
@@ -7,6 +7,7 @@ describe('ToolbarButton', () => {
   isConformant({
     Component: ToolbarButton,
     displayName: 'ToolbarButton',
+    disabledTests: ['component-has-static-classname'],
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests
diff --git a/packages/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.test.tsx b/packages/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.test.tsx
index 2dd797d3d1ace1..939e3ba07191c8 100644
--- a/packages/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.test.tsx
+++ b/packages/react-toolbar/src/components/ToolbarDivider/ToolbarDivider.test.tsx
@@ -7,6 +7,7 @@ describe('ToolbarDivider', () => {
   isConformant({
     Component: ToolbarDivider,
     displayName: 'ToolbarDivider',
+    disabledTests: ['component-has-static-classname'],
   });
 
   // TODO add more tests here, and create visual regression tests in /apps/vr-tests

From 4ce0630887100ca8a985cc05c1ef9e0618fb2bdd Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Mon, 14 Mar 2022 20:52:53 -0700
Subject: [PATCH 161/173] Fix conditional in classNames conformance test.

---
 packages/react-conformance/src/defaultTests.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-conformance/src/defaultTests.tsx b/packages/react-conformance/src/defaultTests.tsx
index 8ecefce9fd0fae..dbc3fb2d94c2be 100644
--- a/packages/react-conformance/src/defaultTests.tsx
+++ b/packages/react-conformance/src/defaultTests.tsx
@@ -393,10 +393,12 @@ export const defaultTests: TestObject = {
           componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
         const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
         const classNamesFromFile = indexFile[exportName];
+        console.log(defaultComponent.debug());
 
         const expectedClassNames: { [key: string]: string } = staticClassNames.expectedClassNames ?? classNamesFromFile;
         const missingClassNames = Object.values(expectedClassNames).reduce((acc, className) => {
-          if (defaultComponent.find(`.${className}`).length !== 1) {
+          console.log('find', className, JSON.stringify(defaultComponent.find(`.${className}`)));
+          if (defaultComponent.find(`.${className}`).length < 1) {
             (acc as string[]).push(className);
           }
           return acc;

From ccfb618e3d0f28a5e226b9e6efd39be86c0652f4 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 15 Mar 2022 09:05:36 -0700
Subject: [PATCH 162/173] Fix lint deprecation errors

---
 packages/react-button/src/components/Button/index.ts       | 7 ++++++-
 .../react-button/src/components/CompoundButton/index.ts    | 1 +
 packages/react-button/src/components/MenuButton/index.ts   | 7 ++++++-
 packages/react-button/src/components/SplitButton/index.ts  | 7 ++++++-
 packages/react-button/src/components/ToggleButton/index.ts | 7 ++++++-
 packages/react-card/src/components/Card/useCardStyles.ts   | 4 ++--
 .../src/components/FluentProvider/useThemeStyleTag.ts      | 4 ++--
 .../src/components/Tooltip/useTooltipStyles.ts             | 1 +
 8 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/packages/react-button/src/components/Button/index.ts b/packages/react-button/src/components/Button/index.ts
index 65bdfd3b13998b..2055cfbd68b488 100644
--- a/packages/react-button/src/components/Button/index.ts
+++ b/packages/react-button/src/components/Button/index.ts
@@ -3,4 +3,9 @@ export * from './Button';
 export type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';
 export * from './renderButton';
 export * from './useButton';
-export { buttonClassName, buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';
+export {
+  /* eslint-disable-next-line deprecation/deprecation */
+  buttonClassName,
+  buttonClassNames,
+  useButtonStyles_unstable,
+} from './useButtonStyles';
diff --git a/packages/react-button/src/components/CompoundButton/index.ts b/packages/react-button/src/components/CompoundButton/index.ts
index fd0e57899db43a..9482a3b93c198b 100644
--- a/packages/react-button/src/components/CompoundButton/index.ts
+++ b/packages/react-button/src/components/CompoundButton/index.ts
@@ -3,6 +3,7 @@ export * from './CompoundButton.types';
 export * from './renderCompoundButton';
 export * from './useCompoundButton';
 export {
+  /* eslint-disable-next-line deprecation/deprecation */
   compoundButtonClassName,
   compoundButtonClassNames,
   useCompoundButtonStyles_unstable,
diff --git a/packages/react-button/src/components/MenuButton/index.ts b/packages/react-button/src/components/MenuButton/index.ts
index 7ec4cfc5d9d3c3..c24584a6715c09 100644
--- a/packages/react-button/src/components/MenuButton/index.ts
+++ b/packages/react-button/src/components/MenuButton/index.ts
@@ -2,4 +2,9 @@ export * from './MenuButton.types';
 export * from './MenuButton';
 export * from './renderMenuButton';
 export * from './useMenuButton';
-export { menuButtonClassName, menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
+export {
+  /* eslint-disable-next-line deprecation/deprecation */
+  menuButtonClassName,
+  menuButtonClassNames,
+  useMenuButtonStyles_unstable,
+} from './useMenuButtonStyles';
diff --git a/packages/react-button/src/components/SplitButton/index.ts b/packages/react-button/src/components/SplitButton/index.ts
index 04ee7588a3d39b..aacb3025669cd2 100644
--- a/packages/react-button/src/components/SplitButton/index.ts
+++ b/packages/react-button/src/components/SplitButton/index.ts
@@ -2,4 +2,9 @@ export * from './SplitButton';
 export * from './SplitButton.types';
 export * from './renderSplitButton';
 export * from './useSplitButton';
-export { splitButtonClassName, splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
+export {
+  /* eslint-disable-next-line deprecation/deprecation */
+  splitButtonClassName,
+  splitButtonClassNames,
+  useSplitButtonStyles_unstable,
+} from './useSplitButtonStyles';
diff --git a/packages/react-button/src/components/ToggleButton/index.ts b/packages/react-button/src/components/ToggleButton/index.ts
index 659aefa2b40805..d6d157426c7c30 100644
--- a/packages/react-button/src/components/ToggleButton/index.ts
+++ b/packages/react-button/src/components/ToggleButton/index.ts
@@ -2,4 +2,9 @@ export * from './ToggleButton';
 export * from './ToggleButton.types';
 export * from './renderToggleButton';
 export * from './useToggleButton';
-export { toggleButtonClassName, toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles';
+export {
+  /* eslint-disable-next-line deprecation/deprecation */
+  toggleButtonClassName,
+  toggleButtonClassNames,
+  useToggleButtonStyles_unstable,
+} from './useToggleButtonStyles';
diff --git a/packages/react-card/src/components/Card/useCardStyles.ts b/packages/react-card/src/components/Card/useCardStyles.ts
index d0617e39794286..94aafea32906f6 100644
--- a/packages/react-card/src/components/Card/useCardStyles.ts
+++ b/packages/react-card/src/components/Card/useCardStyles.ts
@@ -1,6 +1,6 @@
 import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import { cardPreviewClassName } from '../CardPreview/index';
+import { cardPreviewClassNames } from '../CardPreview/index';
 import type { CardSlots, CardState } from './Card.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
@@ -27,7 +27,7 @@ const useStyles = makeStyles({
     // Size: medium
     ...shorthands.borderRadius(tokens.borderRadiusMedium),
 
-    [`> *:not(.${cardPreviewClassName})`]: {
+    [`> *:not(.${cardPreviewClassNames.root})`]: {
       // Size: medium
       ...shorthands.margin('12px'),
     },
diff --git a/packages/react-provider/src/components/FluentProvider/useThemeStyleTag.ts b/packages/react-provider/src/components/FluentProvider/useThemeStyleTag.ts
index c3a7c49856172d..ef865255f94ba7 100644
--- a/packages/react-provider/src/components/FluentProvider/useThemeStyleTag.ts
+++ b/packages/react-provider/src/components/FluentProvider/useThemeStyleTag.ts
@@ -1,7 +1,7 @@
 import { useId, usePrevious } from '@fluentui/react-utilities';
 import * as React from 'react';
 import type { FluentProviderState } from './FluentProvider.types';
-import { fluentProviderClassName } from './useFluentProviderStyles';
+import { fluentProviderClassNames } from './useFluentProviderStyles';
 
 /**
  * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
@@ -11,7 +11,7 @@ import { fluentProviderClassName } from './useFluentProviderStyles';
 export const useThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {
   const { targetDocument, theme } = options;
 
-  const styleTagId = useId(fluentProviderClassName);
+  const styleTagId = useId(fluentProviderClassNames.root);
   const styleTag = React.useMemo(() => {
     if (!targetDocument) {
       return null;
diff --git a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
index 3ce1524c7dcee8..5e9fb1b7c4f4fe 100644
--- a/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
+++ b/packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts
@@ -57,6 +57,7 @@ export const useTooltipStyles_unstable = (state: TooltipState): TooltipState =>
   const styles = useStyles();
 
   state.content.className = mergeClasses(
+    /* eslint-disable-next-line deprecation/deprecation */
     tooltipClassName,
     tooltipClassNames.content,
     styles.root,

From c5a7a2677f3dd19860f7219a890586b2173c6fad Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 15 Mar 2022 10:34:03 -0700
Subject: [PATCH 163/173] Fix conformance test failures

---
 .../src/components/Button/Button.test.tsx     |  9 +++++++
 .../CompoundButton/CompoundButton.test.tsx    | 11 +++++++++
 .../CompoundButton/renderCompoundButton.tsx   |  2 ++
 .../components/MenuButton/MenuButton.test.tsx | 24 +++++++++++++++++++
 .../MenuButton/useMenuButtonStyles.ts         |  6 ++++-
 .../SplitButton/SplitButton.test.tsx          | 10 ++++++++
 .../ToggleButton/ToggleButton.test.tsx        |  9 +++++++
 .../components/CardFooter/CardFooter.test.tsx |  9 +++++++
 .../src/components/Switch/Switch.test.tsx     |  9 +++++++
 9 files changed, 88 insertions(+), 1 deletion(-)

diff --git a/packages/react-button/src/components/Button/Button.test.tsx b/packages/react-button/src/components/Button/Button.test.tsx
index 813f314ef3336c..f5c6db9a5c44e7 100644
--- a/packages/react-button/src/components/Button/Button.test.tsx
+++ b/packages/react-button/src/components/Button/Button.test.tsx
@@ -10,6 +10,15 @@ describe('Button', () => {
   isConformant({
     Component: Button as React.FunctionComponent<ButtonProps>,
     displayName: 'Button',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+          },
+        },
+      ],
+    },
   });
 
   describe('meets accessibility requirements', () => {
diff --git a/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx b/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx
index d115f69f551f24..bf4c635084ed38 100644
--- a/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx
+++ b/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx
@@ -9,6 +9,17 @@ describe('CompoundButton', () => {
   isConformant({
     Component: CompoundButton as React.FunctionComponent<CompoundButtonProps>,
     displayName: 'CompoundButton',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            iconOnly: false,
+            icon: 'Test Icon',
+            secondaryContent: 'Test Secondary Content',
+          },
+        },
+      ],
+    },
   });
 
   describe('when rendered as a button', () => {
diff --git a/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx b/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx
index a23a3b5c3403de..3d1ce7d266a467 100644
--- a/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx
+++ b/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx
@@ -9,6 +9,8 @@ export const renderCompoundButton_unstable = (state: CompoundButtonState) => {
   const { slots, slotProps } = getSlots<CompoundButtonSlots>(state);
   const { iconOnly, iconPosition } = state;
 
+  console.log('STATE', state);
+
   return (
     <slots.root {...slotProps.root}>
       {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}
diff --git a/packages/react-button/src/components/MenuButton/MenuButton.test.tsx b/packages/react-button/src/components/MenuButton/MenuButton.test.tsx
index 316a0ca81b0cb0..4868d5ba482f34 100644
--- a/packages/react-button/src/components/MenuButton/MenuButton.test.tsx
+++ b/packages/react-button/src/components/MenuButton/MenuButton.test.tsx
@@ -4,11 +4,35 @@ import userEvent from '@testing-library/user-event';
 import { isConformant } from '../../common/isConformant';
 import { MenuButton } from './MenuButton';
 import { MenuButtonProps } from './MenuButton.types';
+import { menuButtonClassNames } from './useMenuButtonStyles';
 
 describe('MenuButton', () => {
   isConformant({
     Component: MenuButton as React.FunctionComponent<MenuButtonProps>,
     displayName: 'MenuButton',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            menuIcon: 'Test MenuIcon',
+          },
+          expectedClassNames: {
+            root: menuButtonClassNames.root,
+            icon: menuButtonClassNames.icon,
+          },
+        },
+        {
+          props: {
+            menuIcon: 'Test MenuIcon',
+          },
+          expectedClassNames: {
+            root: menuButtonClassNames.root,
+            menuIcon: menuButtonClassNames.menuIcon,
+          },
+        },
+      ],
+    },
   });
 
   describe('when rendered as a button', () => {
diff --git a/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts b/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
index eca7fab544379a..8818af088920e8 100644
--- a/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
+++ b/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts
@@ -44,7 +44,11 @@ export const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButton
   }
 
   if (state.menuIcon) {
-    state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);
+    state.menuIcon.className = mergeClasses(
+      menuButtonClassNames.menuIcon,
+      menuIconStyles[state.size],
+      state.menuIcon.className,
+    );
   }
 
   useButtonStyles_unstable(state as ButtonState);
diff --git a/packages/react-button/src/components/SplitButton/SplitButton.test.tsx b/packages/react-button/src/components/SplitButton/SplitButton.test.tsx
index 4950aadb8e90fb..e8fb53269a7239 100644
--- a/packages/react-button/src/components/SplitButton/SplitButton.test.tsx
+++ b/packages/react-button/src/components/SplitButton/SplitButton.test.tsx
@@ -9,6 +9,16 @@ describe('SplitButton', () => {
   isConformant({
     Component: SplitButton as React.FunctionComponent<SplitButtonProps>,
     displayName: 'SplitButton',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+            menuIcon: 'Test MenuIcon',
+          },
+        },
+      ],
+    },
   });
 
   it('renders correctly', () => {
diff --git a/packages/react-button/src/components/ToggleButton/ToggleButton.test.tsx b/packages/react-button/src/components/ToggleButton/ToggleButton.test.tsx
index c771f53e9b4728..30e69ac356b485 100644
--- a/packages/react-button/src/components/ToggleButton/ToggleButton.test.tsx
+++ b/packages/react-button/src/components/ToggleButton/ToggleButton.test.tsx
@@ -15,6 +15,15 @@ describe('ToggleButton', () => {
   isConformant({
     Component: ToggleButton as React.FunctionComponent<ToggleButtonProps>,
     displayName: 'ToggleButton',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+          },
+        },
+      ],
+    },
   });
 
   xdescribe('AccesibilityButtonBehavior', () => {
diff --git a/packages/react-card/src/components/CardFooter/CardFooter.test.tsx b/packages/react-card/src/components/CardFooter/CardFooter.test.tsx
index 1ff6eedc459529..faf4af2bb6342c 100644
--- a/packages/react-card/src/components/CardFooter/CardFooter.test.tsx
+++ b/packages/react-card/src/components/CardFooter/CardFooter.test.tsx
@@ -7,6 +7,15 @@ describe('CardFooter', () => {
   isConformant({
     Component: CardFooter,
     displayName: 'CardFooter',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            action: 'Test Action',
+          },
+        },
+      ],
+    },
   });
 
   it('renders a default state', () => {
diff --git a/packages/react-switch/src/components/Switch/Switch.test.tsx b/packages/react-switch/src/components/Switch/Switch.test.tsx
index 2787d9885474ff..3f83e10a210747 100644
--- a/packages/react-switch/src/components/Switch/Switch.test.tsx
+++ b/packages/react-switch/src/components/Switch/Switch.test.tsx
@@ -10,6 +10,15 @@ describe('Switch', () => {
     Component: Switch,
     displayName: 'Switch',
     primarySlot: 'input',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            label: 'Test Label',
+          },
+        },
+      ],
+    },
   });
 
   describe('on component render', () => {

From 6994167bf128d1552f3a9255c755ace9b062a38b Mon Sep 17 00:00:00 2001
From: KHMakoto <Humberto.Morimoto@microsoft.com>
Date: Tue, 15 Mar 2022 11:52:06 -0600
Subject: [PATCH 164/173] Fixing CompoundButton test.

---
 .../src/components/CompoundButton/CompoundButton.test.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx b/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx
index bf4c635084ed38..16995ef1d6aadb 100644
--- a/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx
+++ b/packages/react-button/src/components/CompoundButton/CompoundButton.test.tsx
@@ -13,8 +13,8 @@ describe('CompoundButton', () => {
       'has-static-classnames': [
         {
           props: {
-            iconOnly: false,
             icon: 'Test Icon',
+            children: 'Test Children',
             secondaryContent: 'Test Secondary Content',
           },
         },

From 4a2d8b265178097de172eb3369805c37aed0ce24 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 15 Mar 2022 11:09:31 -0700
Subject: [PATCH 165/173] Remove debug logging

---
 .../src/components/CompoundButton/renderCompoundButton.tsx      | 2 --
 packages/react-conformance/src/defaultTests.tsx                 | 2 --
 2 files changed, 4 deletions(-)

diff --git a/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx b/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx
index 3d1ce7d266a467..a23a3b5c3403de 100644
--- a/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx
+++ b/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx
@@ -9,8 +9,6 @@ export const renderCompoundButton_unstable = (state: CompoundButtonState) => {
   const { slots, slotProps } = getSlots<CompoundButtonSlots>(state);
   const { iconOnly, iconPosition } = state;
 
-  console.log('STATE', state);
-
   return (
     <slots.root {...slotProps.root}>
       {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}
diff --git a/packages/react-conformance/src/defaultTests.tsx b/packages/react-conformance/src/defaultTests.tsx
index dbc3fb2d94c2be..a4f6d4f5da078d 100644
--- a/packages/react-conformance/src/defaultTests.tsx
+++ b/packages/react-conformance/src/defaultTests.tsx
@@ -393,11 +393,9 @@ export const defaultTests: TestObject = {
           componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
         const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
         const classNamesFromFile = indexFile[exportName];
-        console.log(defaultComponent.debug());
 
         const expectedClassNames: { [key: string]: string } = staticClassNames.expectedClassNames ?? classNamesFromFile;
         const missingClassNames = Object.values(expectedClassNames).reduce((acc, className) => {
-          console.log('find', className, JSON.stringify(defaultComponent.find(`.${className}`)));
           if (defaultComponent.find(`.${className}`).length < 1) {
             (acc as string[]).push(className);
           }

From 8755dcba3d405f7fcc526bfd1b1c7b4650e7e805 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 15 Mar 2022 11:47:31 -0700
Subject: [PATCH 166/173] Disable static classnames object conformance test for
 react-focus

---
 packages/react-focus/src/components/FocusZone/FocusZone.test.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-focus/src/components/FocusZone/FocusZone.test.tsx b/packages/react-focus/src/components/FocusZone/FocusZone.test.tsx
index a207761b024a2d..51b21a4585d5a2 100644
--- a/packages/react-focus/src/components/FocusZone/FocusZone.test.tsx
+++ b/packages/react-focus/src/components/FocusZone/FocusZone.test.tsx
@@ -86,6 +86,7 @@ describe('FocusZone', () => {
     disabledTests: [
       // There is no top level FocusZone.ts file.
       'has-top-level-file',
+      'component-has-static-classnames-object',
     ],
     elementRefName: 'elementRef',
     testOptions: {

From b33c5c926aa213c44165e9e0afb08dba13bc913b Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 15 Mar 2022 13:01:55 -0700
Subject: [PATCH 167/173] Update classNames exports from react-components.

- Marks <ComponentName>ClassName string exports deprecated.
- Adds <ComponentnName>ClassNames object exports.
- Updates API file.
---
 .../etc/react-components.api.md               | 114 ++++++++++++++++++
 packages/react-components/src/index.ts        |  76 ++++++++++++
 .../react-components/src/unstable/index.ts    |  22 ++++
 3 files changed, 212 insertions(+)

diff --git a/packages/react-components/etc/react-components.api.md b/packages/react-components/etc/react-components.api.md
index 6964f09b1a2408..ff7655dc937d51 100644
--- a/packages/react-components/etc/react-components.api.md
+++ b/packages/react-components/etc/react-components.api.md
@@ -7,11 +7,13 @@
 import { __styles } from '@griffel/react';
 import { Accordion } from '@fluentui/react-accordion';
 import { accordionClassName } from '@fluentui/react-accordion';
+import { accordionClassNames } from '@fluentui/react-accordion';
 import { AccordionContext } from '@fluentui/react-accordion';
 import { AccordionContextValue } from '@fluentui/react-accordion';
 import { AccordionContextValues } from '@fluentui/react-accordion';
 import { AccordionHeader } from '@fluentui/react-accordion';
 import { accordionHeaderClassName } from '@fluentui/react-accordion';
+import { accordionHeaderClassNames } from '@fluentui/react-accordion';
 import { AccordionHeaderContextValue } from '@fluentui/react-accordion';
 import { AccordionHeaderContextValues } from '@fluentui/react-accordion';
 import { AccordionHeaderExpandIconPosition } from '@fluentui/react-accordion';
@@ -22,6 +24,7 @@ import { AccordionHeaderState } from '@fluentui/react-accordion';
 import { AccordionIndex } from '@fluentui/react-accordion';
 import { AccordionItem } from '@fluentui/react-accordion';
 import { accordionItemClassName } from '@fluentui/react-accordion';
+import { accordionItemClassNames } from '@fluentui/react-accordion';
 import { AccordionItemContext } from '@fluentui/react-accordion';
 import { AccordionItemContextValue } from '@fluentui/react-accordion';
 import { AccordionItemContextValues } from '@fluentui/react-accordion';
@@ -31,6 +34,7 @@ import { AccordionItemState } from '@fluentui/react-accordion';
 import { AccordionItemValue } from '@fluentui/react-accordion';
 import { AccordionPanel } from '@fluentui/react-accordion';
 import { accordionPanelClassName } from '@fluentui/react-accordion';
+import { accordionPanelClassNames } from '@fluentui/react-accordion';
 import { AccordionPanelProps } from '@fluentui/react-accordion';
 import { AccordionPanelSlots } from '@fluentui/react-accordion';
 import { AccordionPanelState } from '@fluentui/react-accordion';
@@ -43,35 +47,42 @@ import { AccordionToggleEventHandler } from '@fluentui/react-accordion';
 import { arrowHeights } from '@fluentui/react-popover';
 import { Avatar } from '@fluentui/react-avatar';
 import { avatarClassName } from '@fluentui/react-avatar';
+import { avatarClassNames } from '@fluentui/react-avatar';
 import { AvatarNamedColor } from '@fluentui/react-avatar';
 import { AvatarProps } from '@fluentui/react-avatar';
 import { AvatarSlots } from '@fluentui/react-avatar';
 import { AvatarState } from '@fluentui/react-avatar';
 import { Badge } from '@fluentui/react-badge';
 import { badgeClassName } from '@fluentui/react-badge';
+import { badgeClassNames } from '@fluentui/react-badge';
 import { BadgeProps } from '@fluentui/react-badge';
 import { BadgeSlots } from '@fluentui/react-badge';
 import { BadgeState } from '@fluentui/react-badge';
 import { Body as Body_2 } from '@fluentui/react-text';
 import { bodyClassName } from '@fluentui/react-text';
+import { bodyClassNames } from '@fluentui/react-text';
 import { BorderRadiusTokens } from '@fluentui/react-theme';
 import { BrandVariants } from '@fluentui/react-theme';
 import { Button } from '@fluentui/react-button';
 import { buttonClassName } from '@fluentui/react-button';
+import { buttonClassNames } from '@fluentui/react-button';
 import { ButtonProps } from '@fluentui/react-button';
 import { ButtonSlots } from '@fluentui/react-button';
 import { ButtonState } from '@fluentui/react-button';
 import { Caption } from '@fluentui/react-text';
 import { captionClassName } from '@fluentui/react-text';
+import { captionClassNames } from '@fluentui/react-text';
 import { ColorPaletteTokens } from '@fluentui/react-theme';
 import { ColorTokens } from '@fluentui/react-theme';
 import { CompoundButton } from '@fluentui/react-button';
 import { compoundButtonClassName } from '@fluentui/react-button';
+import { compoundButtonClassNames } from '@fluentui/react-button';
 import { CompoundButtonProps } from '@fluentui/react-button';
 import { CompoundButtonSlots } from '@fluentui/react-button';
 import { CompoundButtonState } from '@fluentui/react-button';
 import { CounterBadge } from '@fluentui/react-badge';
 import { counterBadgeClassName } from '@fluentui/react-badge';
+import { counterBadgeClassNames } from '@fluentui/react-badge';
 import { CounterBadgeProps } from '@fluentui/react-badge';
 import { CounterBadgeState } from '@fluentui/react-badge';
 import { createDarkTheme } from '@fluentui/react-theme';
@@ -81,14 +92,17 @@ import { createLightTheme } from '@fluentui/react-theme';
 import { createTeamsDarkTheme } from '@fluentui/react-theme';
 import { Display } from '@fluentui/react-text';
 import { displayClassName } from '@fluentui/react-text';
+import { displayClassNames } from '@fluentui/react-text';
 import { Divider } from '@fluentui/react-divider';
 import { dividerClassName } from '@fluentui/react-divider';
+import { dividerClassNames } from '@fluentui/react-divider';
 import { DividerProps } from '@fluentui/react-divider';
 import { DividerSlots } from '@fluentui/react-divider';
 import { DividerState } from '@fluentui/react-divider';
 import { elementContains } from '@fluentui/react-portal';
 import { FluentProvider } from '@fluentui/react-provider';
 import { fluentProviderClassName } from '@fluentui/react-provider';
+import { fluentProviderClassNames } from '@fluentui/react-provider';
 import { FluentProviderContextValues } from '@fluentui/react-provider';
 import { FluentProviderProps } from '@fluentui/react-provider';
 import { FluentProviderSlots } from '@fluentui/react-provider';
@@ -98,16 +112,20 @@ import { FontSizeTokens } from '@fluentui/react-theme';
 import { FontWeightTokens } from '@fluentui/react-theme';
 import { Headline } from '@fluentui/react-text';
 import { headlineClassName } from '@fluentui/react-text';
+import { headlineClassNames } from '@fluentui/react-text';
 import { Image as Image_2 } from '@fluentui/react-image';
 import { imageClassName } from '@fluentui/react-image';
+import { imageClassNames } from '@fluentui/react-image';
 import { ImageProps } from '@fluentui/react-image';
 import { ImageSlots } from '@fluentui/react-image';
 import { ImageState } from '@fluentui/react-image';
 import { LargeTitle } from '@fluentui/react-text';
 import { largeTitleClassName } from '@fluentui/react-text';
+import { largeTitleClassNames } from '@fluentui/react-text';
 import { LineHeightTokens } from '@fluentui/react-theme';
 import { Link } from '@fluentui/react-link';
 import { linkClassName } from '@fluentui/react-link';
+import { linkClassNames } from '@fluentui/react-link';
 import { LinkProps } from '@fluentui/react-link';
 import { LinkSlots } from '@fluentui/react-link';
 import { LinkState } from '@fluentui/react-link';
@@ -116,6 +134,7 @@ import { makeStyles } from '@griffel/react';
 import { Menu } from '@fluentui/react-menu';
 import { MenuButton } from '@fluentui/react-button';
 import { menuButtonClassName } from '@fluentui/react-button';
+import { menuButtonClassNames } from '@fluentui/react-button';
 import { MenuButtonProps } from '@fluentui/react-button';
 import { MenuButtonSlots } from '@fluentui/react-button';
 import { MenuButtonState } from '@fluentui/react-button';
@@ -126,16 +145,19 @@ import { MenuContextValue } from '@fluentui/react-menu';
 import { MenuContextValues } from '@fluentui/react-menu';
 import { MenuDivider } from '@fluentui/react-menu';
 import { menuDividerClassName } from '@fluentui/react-menu';
+import { menuDividerClassNames } from '@fluentui/react-menu';
 import { MenuDividerProps } from '@fluentui/react-menu';
 import { MenuDividerSlots } from '@fluentui/react-menu';
 import { MenuDividerState } from '@fluentui/react-menu';
 import { MenuGroup } from '@fluentui/react-menu';
 import { menuGroupClassName } from '@fluentui/react-menu';
+import { menuGroupClassNames } from '@fluentui/react-menu';
 import { MenuGroupContextProvider } from '@fluentui/react-menu';
 import { MenuGroupContextValue } from '@fluentui/react-menu';
 import { MenuGroupContextValues } from '@fluentui/react-menu';
 import { MenuGroupHeader } from '@fluentui/react-menu';
 import { menuGroupHeaderClassName } from '@fluentui/react-menu';
+import { menuGroupHeaderClassNames } from '@fluentui/react-menu';
 import { MenuGroupHeaderProps } from '@fluentui/react-menu';
 import { MenuGroupHeaderSlots } from '@fluentui/react-menu';
 import { MenuGroupHeaderState } from '@fluentui/react-menu';
@@ -145,12 +167,15 @@ import { MenuGroupState } from '@fluentui/react-menu';
 import { MenuItem } from '@fluentui/react-menu';
 import { MenuItemCheckbox } from '@fluentui/react-menu';
 import { menuItemCheckboxClassName } from '@fluentui/react-menu';
+import { menuItemCheckboxClassNames } from '@fluentui/react-menu';
 import { MenuItemCheckboxProps } from '@fluentui/react-menu';
 import { MenuItemCheckboxState } from '@fluentui/react-menu';
 import { menuItemClassName } from '@fluentui/react-menu';
+import { menuItemClassNames } from '@fluentui/react-menu';
 import { MenuItemProps } from '@fluentui/react-menu';
 import { MenuItemRadio } from '@fluentui/react-menu';
 import { menuItemRadioClassName } from '@fluentui/react-menu';
+import { menuItemRadioClassNames } from '@fluentui/react-menu';
 import { MenuItemRadioProps } from '@fluentui/react-menu';
 import { MenuItemRadioState } from '@fluentui/react-menu';
 import { MenuItemSelectableProps } from '@fluentui/react-menu';
@@ -159,6 +184,7 @@ import { MenuItemSlots } from '@fluentui/react-menu';
 import { MenuItemState } from '@fluentui/react-menu';
 import { MenuList } from '@fluentui/react-menu';
 import { menuListClassName } from '@fluentui/react-menu';
+import { menuListClassNames } from '@fluentui/react-menu';
 import { MenuListContext } from '@fluentui/react-menu';
 import { MenuListContextValue } from '@fluentui/react-menu';
 import { MenuListContextValues } from '@fluentui/react-menu';
@@ -170,6 +196,7 @@ import { MenuOpenChangeData } from '@fluentui/react-menu';
 import { MenuOpenEvents } from '@fluentui/react-menu';
 import { MenuPopover } from '@fluentui/react-menu';
 import { menuPopoverClassName } from '@fluentui/react-menu';
+import { menuPopoverClassNames } from '@fluentui/react-menu';
 import { MenuPopoverProps } from '@fluentui/react-menu';
 import { MenuPopoverSlots } from '@fluentui/react-menu';
 import { MenuPopoverState } from '@fluentui/react-menu';
@@ -178,6 +205,7 @@ import { MenuProvider } from '@fluentui/react-menu';
 import { MenuSlots } from '@fluentui/react-menu';
 import { MenuSplitGroup } from '@fluentui/react-menu';
 import { menuSplitGroupClassName } from '@fluentui/react-menu';
+import { menuSplitGroupClassNames } from '@fluentui/react-menu';
 import { MenuSplitGroupProps } from '@fluentui/react-menu';
 import { MenuSplitGroupSlots } from '@fluentui/react-menu';
 import { MenuSplitGroupState } from '@fluentui/react-menu';
@@ -200,6 +228,7 @@ import { PopoverSize } from '@fluentui/react-popover';
 import { PopoverState } from '@fluentui/react-popover';
 import { PopoverSurface } from '@fluentui/react-popover';
 import { popoverSurfaceClassName } from '@fluentui/react-popover';
+import { popoverSurfaceClassNames } from '@fluentui/react-popover';
 import { PopoverSurfaceProps } from '@fluentui/react-popover';
 import { PopoverSurfaceSlots } from '@fluentui/react-popover';
 import { PopoverSurfaceState } from '@fluentui/react-popover';
@@ -211,6 +240,7 @@ import { PortalProps } from '@fluentui/react-portal';
 import { PortalState } from '@fluentui/react-portal';
 import { PresenceBadge } from '@fluentui/react-badge';
 import { presenceBadgeClassName } from '@fluentui/react-badge';
+import { presenceBadgeClassNames } from '@fluentui/react-badge';
 import { PresenceBadgeProps } from '@fluentui/react-badge';
 import { PresenceBadgeState } from '@fluentui/react-badge';
 import { PresenceBadgeStatus } from '@fluentui/react-badge';
@@ -255,6 +285,7 @@ import { ShadowTokens } from '@fluentui/react-theme';
 import { shorthands } from '@griffel/react';
 import { SplitButton } from '@fluentui/react-button';
 import { splitButtonClassName } from '@fluentui/react-button';
+import { splitButtonClassNames } from '@fluentui/react-button';
 import { SplitButtonProps } from '@fluentui/react-button';
 import { SplitButtonSlots } from '@fluentui/react-button';
 import { SplitButtonState } from '@fluentui/react-button';
@@ -262,11 +293,13 @@ import { SSRProvider } from '@fluentui/react-utilities';
 import { StrokeWidthTokens } from '@fluentui/react-theme';
 import { Subheadline } from '@fluentui/react-text';
 import { subheadlineClassName } from '@fluentui/react-text';
+import { subheadlineClassNames } from '@fluentui/react-text';
 import { teamsDarkTheme } from '@fluentui/react-theme';
 import { teamsHighContrastTheme } from '@fluentui/react-theme';
 import { teamsLightTheme } from '@fluentui/react-theme';
 import { Text as Text_2 } from '@fluentui/react-text';
 import { textClassName } from '@fluentui/react-text';
+import { textClassNames } from '@fluentui/react-text';
 import { TextProps } from '@fluentui/react-text';
 import { TextSlots } from '@fluentui/react-text';
 import { TextState } from '@fluentui/react-text';
@@ -274,17 +307,22 @@ import { Theme } from '@fluentui/react-theme';
 import { themeToTokensObject } from '@fluentui/react-theme';
 import { Title1 } from '@fluentui/react-text';
 import { title1ClassName } from '@fluentui/react-text';
+import { title1ClassNames } from '@fluentui/react-text';
 import { Title2 } from '@fluentui/react-text';
 import { title2ClassName } from '@fluentui/react-text';
+import { title2ClassNames } from '@fluentui/react-text';
 import { Title3 } from '@fluentui/react-text';
 import { title3ClassName } from '@fluentui/react-text';
+import { title3ClassNames } from '@fluentui/react-text';
 import { ToggleButton } from '@fluentui/react-button';
 import { toggleButtonClassName } from '@fluentui/react-button';
+import { toggleButtonClassNames } from '@fluentui/react-button';
 import { ToggleButtonProps } from '@fluentui/react-button';
 import { ToggleButtonState } from '@fluentui/react-button';
 import { tokens } from '@fluentui/react-theme';
 import { Tooltip } from '@fluentui/react-tooltip';
 import { tooltipClassName } from '@fluentui/react-tooltip';
+import { tooltipClassNames } from '@fluentui/react-tooltip';
 import { TooltipProps } from '@fluentui/react-tooltip';
 import { TooltipSlots } from '@fluentui/react-tooltip';
 import { TooltipState } from '@fluentui/react-tooltip';
@@ -378,6 +416,8 @@ export { Accordion }
 
 export { accordionClassName }
 
+export { accordionClassNames }
+
 export { AccordionContext }
 
 export { AccordionContextValue }
@@ -388,6 +428,8 @@ export { AccordionHeader }
 
 export { accordionHeaderClassName }
 
+export { accordionHeaderClassNames }
+
 export { AccordionHeaderContextValue }
 
 export { AccordionHeaderContextValues }
@@ -408,6 +450,8 @@ export { AccordionItem }
 
 export { accordionItemClassName }
 
+export { accordionItemClassNames }
+
 export { AccordionItemContext }
 
 export { AccordionItemContextValue }
@@ -426,6 +470,8 @@ export { AccordionPanel }
 
 export { accordionPanelClassName }
 
+export { accordionPanelClassNames }
+
 export { AccordionPanelProps }
 
 export { AccordionPanelSlots }
@@ -450,6 +496,8 @@ export { Avatar }
 
 export { avatarClassName }
 
+export { avatarClassNames }
+
 export { AvatarNamedColor }
 
 export { AvatarProps }
@@ -462,6 +510,8 @@ export { Badge }
 
 export { badgeClassName }
 
+export { badgeClassNames }
+
 export { BadgeProps }
 
 export { BadgeSlots }
@@ -472,6 +522,8 @@ export { Body_2 as Body }
 
 export { bodyClassName }
 
+export { bodyClassNames }
+
 export { BorderRadiusTokens }
 
 export { BrandVariants }
@@ -480,6 +532,8 @@ export { Button }
 
 export { buttonClassName }
 
+export { buttonClassNames }
+
 export { ButtonProps }
 
 export { ButtonSlots }
@@ -490,6 +544,8 @@ export { Caption }
 
 export { captionClassName }
 
+export { captionClassNames }
+
 export { ColorPaletteTokens }
 
 export { ColorTokens }
@@ -498,6 +554,8 @@ export { CompoundButton }
 
 export { compoundButtonClassName }
 
+export { compoundButtonClassNames }
+
 export { CompoundButtonProps }
 
 export { CompoundButtonSlots }
@@ -508,6 +566,8 @@ export { CounterBadge }
 
 export { counterBadgeClassName }
 
+export { counterBadgeClassNames }
+
 export { CounterBadgeProps }
 
 export { CounterBadgeState }
@@ -526,10 +586,14 @@ export { Display }
 
 export { displayClassName }
 
+export { displayClassNames }
+
 export { Divider }
 
 export { dividerClassName }
 
+export { dividerClassNames }
+
 export { DividerProps }
 
 export { DividerSlots }
@@ -542,6 +606,8 @@ export { FluentProvider }
 
 export { fluentProviderClassName }
 
+export { fluentProviderClassNames }
+
 export { FluentProviderContextValues }
 
 export { FluentProviderProps }
@@ -560,10 +626,14 @@ export { Headline }
 
 export { headlineClassName }
 
+export { headlineClassNames }
+
 export { Image_2 as Image }
 
 export { imageClassName }
 
+export { imageClassNames }
+
 export { ImageProps }
 
 export { ImageSlots }
@@ -574,12 +644,16 @@ export { LargeTitle }
 
 export { largeTitleClassName }
 
+export { largeTitleClassNames }
+
 export { LineHeightTokens }
 
 export { Link }
 
 export { linkClassName }
 
+export { linkClassNames }
+
 export { LinkProps }
 
 export { LinkSlots }
@@ -596,6 +670,8 @@ export { MenuButton }
 
 export { menuButtonClassName }
 
+export { menuButtonClassNames }
+
 export { MenuButtonProps }
 
 export { MenuButtonSlots }
@@ -616,6 +692,8 @@ export { MenuDivider }
 
 export { menuDividerClassName }
 
+export { menuDividerClassNames }
+
 export { MenuDividerProps }
 
 export { MenuDividerSlots }
@@ -626,6 +704,8 @@ export { MenuGroup }
 
 export { menuGroupClassName }
 
+export { menuGroupClassNames }
+
 export { MenuGroupContextProvider }
 
 export { MenuGroupContextValue }
@@ -636,6 +716,8 @@ export { MenuGroupHeader }
 
 export { menuGroupHeaderClassName }
 
+export { menuGroupHeaderClassNames }
+
 export { MenuGroupHeaderProps }
 
 export { MenuGroupHeaderSlots }
@@ -654,18 +736,24 @@ export { MenuItemCheckbox }
 
 export { menuItemCheckboxClassName }
 
+export { menuItemCheckboxClassNames }
+
 export { MenuItemCheckboxProps }
 
 export { MenuItemCheckboxState }
 
 export { menuItemClassName }
 
+export { menuItemClassNames }
+
 export { MenuItemProps }
 
 export { MenuItemRadio }
 
 export { menuItemRadioClassName }
 
+export { menuItemRadioClassNames }
+
 export { MenuItemRadioProps }
 
 export { MenuItemRadioState }
@@ -682,6 +770,8 @@ export { MenuList }
 
 export { menuListClassName }
 
+export { menuListClassNames }
+
 export { MenuListContext }
 
 export { MenuListContextValue }
@@ -704,6 +794,8 @@ export { MenuPopover }
 
 export { menuPopoverClassName }
 
+export { menuPopoverClassNames }
+
 export { MenuPopoverProps }
 
 export { MenuPopoverSlots }
@@ -720,6 +812,8 @@ export { MenuSplitGroup }
 
 export { menuSplitGroupClassName }
 
+export { menuSplitGroupClassNames }
+
 export { MenuSplitGroupProps }
 
 export { MenuSplitGroupSlots }
@@ -764,6 +858,8 @@ export { PopoverSurface }
 
 export { popoverSurfaceClassName }
 
+export { popoverSurfaceClassNames }
+
 export { PopoverSurfaceProps }
 
 export { PopoverSurfaceSlots }
@@ -786,6 +882,8 @@ export { PresenceBadge }
 
 export { presenceBadgeClassName }
 
+export { presenceBadgeClassNames }
+
 export { PresenceBadgeProps }
 
 export { PresenceBadgeState }
@@ -874,6 +972,8 @@ export { SplitButton }
 
 export { splitButtonClassName }
 
+export { splitButtonClassNames }
+
 export { SplitButtonProps }
 
 export { SplitButtonSlots }
@@ -888,6 +988,8 @@ export { Subheadline }
 
 export { subheadlineClassName }
 
+export { subheadlineClassNames }
+
 export { teamsDarkTheme }
 
 export { teamsHighContrastTheme }
@@ -898,6 +1000,8 @@ export { Text_2 as Text }
 
 export { textClassName }
 
+export { textClassNames }
+
 export { TextProps }
 
 export { TextSlots }
@@ -912,18 +1016,26 @@ export { Title1 }
 
 export { title1ClassName }
 
+export { title1ClassNames }
+
 export { Title2 }
 
 export { title2ClassName }
 
+export { title2ClassNames }
+
 export { Title3 }
 
 export { title3ClassName }
 
+export { title3ClassNames }
+
 export { ToggleButton }
 
 export { toggleButtonClassName }
 
+export { toggleButtonClassNames }
+
 export { ToggleButtonProps }
 
 export { ToggleButtonState }
@@ -934,6 +1046,8 @@ export { Tooltip }
 
 export { tooltipClassName }
 
+export { tooltipClassNames }
+
 export { TooltipProps }
 
 export { TooltipSlots }
diff --git a/packages/react-components/src/index.ts b/packages/react-components/src/index.ts
index 0362bbf78c8f9e..8bcf94e411b0c2 100644
--- a/packages/react-components/src/index.ts
+++ b/packages/react-components/src/index.ts
@@ -11,7 +11,9 @@ export {
 } from '@griffel/react';
 export {
   FluentProvider,
+  /* eslint-disable-next-line deprecation/deprecation */
   fluentProviderClassName,
+  fluentProviderClassNames,
   renderFluentProvider_unstable,
   useFluent,
   useFluentProvider_unstable,
@@ -63,10 +65,18 @@ export {
   AccordionItem,
   AccordionItemContext,
   AccordionPanel,
+  /* eslint-disable-next-line deprecation/deprecation */
   accordionClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   accordionHeaderClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   accordionItemClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   accordionPanelClassName,
+  accordionClassNames,
+  accordionHeaderClassNames,
+  accordionItemClassNames,
+  accordionPanelClassNames,
   renderAccordion_unstable,
   renderAccordionHeader_unstable,
   renderAccordionItem_unstable,
@@ -113,7 +123,9 @@ export type {
 } from '@fluentui/react-accordion';
 export {
   Avatar,
+  /* eslint-disable-next-line deprecation/deprecation */
   avatarClassName,
+  avatarClassNames,
   renderAvatar_unstable,
   useAvatar_unstable,
   useAvatarStyles_unstable,
@@ -123,9 +135,15 @@ export {
   Badge,
   CounterBadge,
   PresenceBadge,
+  /* eslint-disable-next-line deprecation/deprecation */
   badgeClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   counterBadgeClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   presenceBadgeClassName,
+  badgeClassNames,
+  counterBadgeClassNames,
+  presenceBadgeClassNames,
   renderBadge_unstable,
   useBadge_unstable,
   useBadgeStyles_unstable,
@@ -149,16 +167,26 @@ export {
   MenuButton,
   SplitButton,
   ToggleButton,
+  /* eslint-disable-next-line deprecation/deprecation */
   buttonClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   compoundButtonClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuButtonClassName,
+  buttonClassNames,
+  compoundButtonClassNames,
+  menuButtonClassNames,
   renderButton_unstable,
   renderCompoundButton_unstable,
   renderMenuButton_unstable,
   renderSplitButton_unstable,
   renderToggleButton_unstable,
+  /* eslint-disable-next-line deprecation/deprecation */
   splitButtonClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   toggleButtonClassName,
+  splitButtonClassNames,
+  toggleButtonClassNames,
   useButton_unstable,
   useButtonStyles_unstable,
   useCompoundButton_unstable,
@@ -188,7 +216,9 @@ export type {
 } from '@fluentui/react-button';
 export {
   Divider,
+  /* eslint-disable-next-line deprecation/deprecation */
   dividerClassName,
+  dividerClassNames,
   renderDivider_unstable,
   useDivider_unstable,
   useDividerStyles_unstable,
@@ -196,7 +226,9 @@ export {
 export type { DividerProps, DividerSlots, DividerState } from '@fluentui/react-divider';
 export {
   Image,
+  /* eslint-disable-next-line deprecation/deprecation */
   imageClassName,
+  imageClassNames,
   renderImage_unstable,
   useImage_unstable,
   useImageStyles_unstable,
@@ -204,7 +236,9 @@ export {
 export type { ImageProps, ImageSlots, ImageState } from '@fluentui/react-image';
 export {
   Link,
+  /* eslint-disable-next-line deprecation/deprecation */
   linkClassName,
+  linkClassNames,
   renderLink_unstable,
   useLink_unstable,
   useLinkState_unstable,
@@ -229,15 +263,33 @@ export {
   MenuSplitGroup,
   MenuTrigger,
   MenuTriggerContextProvider,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuDividerClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuGroupClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuGroupHeaderClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuItemCheckboxClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuItemClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuItemRadioClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuListClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuPopoverClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   menuSplitGroupClassName,
+  menuDividerClassNames,
+  menuGroupClassNames,
+  menuGroupHeaderClassNames,
+  menuItemCheckboxClassNames,
+  menuItemClassNames,
+  menuItemRadioClassNames,
+  menuListClassNames,
+  menuPopoverClassNames,
+  menuSplitGroupClassNames,
   renderMenu_unstable,
   renderMenuDivider_unstable,
   renderMenuGroup_unstable,
@@ -331,7 +383,9 @@ export {
   PopoverSurface,
   PopoverTrigger,
   arrowHeights,
+  /* eslint-disable-next-line deprecation/deprecation */
   popoverSurfaceClassName,
+  popoverSurfaceClassNames,
   renderPopover_unstable,
   renderPopoverSurface_unstable,
   renderPopoverTrigger_unstable,
@@ -373,17 +427,37 @@ export {
   Title1,
   Title2,
   Title3,
+  /* eslint-disable-next-line deprecation/deprecation */
   bodyClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   captionClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   displayClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   headlineClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   largeTitleClassName,
+  bodyClassNames,
+  captionClassNames,
+  displayClassNames,
+  headlineClassNames,
+  largeTitleClassNames,
   renderText_unstable,
+  /* eslint-disable-next-line deprecation/deprecation */
   subheadlineClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   textClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   title1ClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   title2ClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   title3ClassName,
+  subheadlineClassNames,
+  textClassNames,
+  title1ClassNames,
+  title2ClassNames,
+  title3ClassNames,
   useText_unstable,
   useTextStyles_unstable,
 } from '@fluentui/react-text';
@@ -391,7 +465,9 @@ export type { TextProps, TextSlots, TextState } from '@fluentui/react-text';
 export {
   Tooltip,
   renderTooltip_unstable,
+  /* eslint-disable-next-line deprecation/deprecation */
   tooltipClassName,
+  tooltipClassNames,
   useTooltip_unstable,
   useTooltipStyles_unstable,
 } from '@fluentui/react-tooltip';
diff --git a/packages/react-components/src/unstable/index.ts b/packages/react-components/src/unstable/index.ts
index 4f75b7214a5fa1..7d5ac475137f48 100644
--- a/packages/react-components/src/unstable/index.ts
+++ b/packages/react-components/src/unstable/index.ts
@@ -5,10 +5,18 @@ export {
   CardFooter,
   CardHeader,
   CardPreview,
+  /* eslint-disable-next-line deprecation/deprecation */
   cardClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   cardFooterClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   cardHeaderClassName,
+  /* eslint-disable-next-line deprecation/deprecation */
   cardPreviewClassName,
+  cardClassNames,
+  cardFooterClassNames,
+  cardHeaderClassNames,
+  cardPreviewClassNames,
   renderCard_unstable,
   renderCardFooter_unstable,
   renderCardHeader_unstable,
@@ -39,7 +47,9 @@ export type {
 
 export {
   Checkbox,
+  /* eslint-disable-next-line deprecation/deprecation */
   checkboxClassName,
+  checkboxClassNames,
   renderCheckbox_unstable,
   useCheckbox_unstable,
   useCheckboxStyles_unstable,
@@ -48,7 +58,9 @@ export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState
 
 export {
   Input,
+  /* eslint-disable-next-line deprecation/deprecation */
   inputClassName,
+  inputClassNames,
   renderInput_unstable,
   useInput_unstable,
   useInputStyles_unstable,
@@ -57,7 +69,9 @@ export type { InputOnChangeData, InputProps, InputSlots, InputState } from '@flu
 
 export {
   Label,
+  /* eslint-disable-next-line deprecation/deprecation */
   labelClassName,
+  labelClassNames,
   renderLabel_unstable,
   useLabel_unstable,
   useLabelStyles_unstable,
@@ -66,9 +80,13 @@ export type { LabelProps, LabelSlots, LabelState } from '@fluentui/react-label';
 
 export {
   Radio,
+  /* eslint-disable-next-line deprecation/deprecation */
   radioClassName,
+  radioClassNames,
   RadioGroup,
+  /* eslint-disable-next-line deprecation/deprecation */
   radioGroupClassName,
+  radioGroupClassNames,
   renderRadio_unstable,
   renderRadioGroup_unstable,
   useRadio_unstable,
@@ -107,12 +125,16 @@ export type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from '
 
 export {
   Tab,
+  /* eslint-disable-next-line deprecation/deprecation */
   tabClassName,
+  tabClassNames,
   useTab_unstable,
   useTabStyles_unstable,
   renderTab_unstable,
   TabList,
+  /* eslint-disable-next-line deprecation/deprecation */
   tabListClassName,
+  tabListClassNames,
   useTabList_unstable,
   useTabListStyles_unstable,
   renderTabList_unstable,

From 399a4f4c0ea50d4351052dea299e5d98b5cd6bd9 Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 15 Mar 2022 13:04:14 -0700
Subject: [PATCH 168/173] Change files

---
 ...ct-components-c2085470-8edc-4804-8d9c-46f09f1e2899.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-components-c2085470-8edc-4804-8d9c-46f09f1e2899.json

diff --git a/change/@fluentui-react-components-c2085470-8edc-4804-8d9c-46f09f1e2899.json b/change/@fluentui-react-components-c2085470-8edc-4804-8d9c-46f09f1e2899.json
new file mode 100644
index 00000000000000..9b0b85c08ee673
--- /dev/null
+++ b/change/@fluentui-react-components-c2085470-8edc-4804-8d9c-46f09f1e2899.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update classNames exports from react-components.",
+  "packageName": "@fluentui/react-components",
+  "email": "seanmonahan@microsoft.com",
+  "dependentChangeType": "patch"
+}

From a06d389b43b79198e74e7e51cffb802a7100f67c Mon Sep 17 00:00:00 2001
From: Sean Monahan <seanmonahan@microsoft.com>
Date: Tue, 15 Mar 2022 14:50:24 -0700
Subject: [PATCH 169/173] Disable classNames conformance tests in
 @fluentui/react and react-northstar

Disables the static classname object conformance tests in @fluentui/react
(v8) and @fluentui/react-northstar (v0).
---
 .../react-northstar/test/specs/commonTests/isConformant.tsx      | 1 +
 packages/react/src/common/isConformant.ts                        | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx b/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx
index 2b4c27477eef94..e1092c7dfbc7e4 100644
--- a/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx
+++ b/packages/fluentui/react-northstar/test/specs/commonTests/isConformant.tsx
@@ -80,6 +80,7 @@ export function isConformant(
       'consistent-callback-args',
       // Disabled as v0 has different prefix
       'component-has-static-classname',
+      'component-has-static-classnames-object',
     ],
     helperComponents: [Ref, RefFindNode, FocusZone],
     extraTests: extraConformanceTests,
diff --git a/packages/react/src/common/isConformant.ts b/packages/react/src/common/isConformant.ts
index b498af16e5a0d3..54d81ceacc108b 100644
--- a/packages/react/src/common/isConformant.ts
+++ b/packages/react/src/common/isConformant.ts
@@ -12,6 +12,7 @@ export function isConformant<TProps = {}>(
       // Will enable with appropriate overrides separately
       'consistent-callback-names',
       'consistent-callback-args',
+      'component-has-static-classnames-object',
     ],
     componentPath: module!.parent!.filename.replace('.test', ''),
   };

From 256a25943aa6769c74f6c1fb8fbb58d4d5248c74 Mon Sep 17 00:00:00 2001
From: KHMakoto <Humberto.Morimoto@microsoft.com>
Date: Tue, 15 Mar 2022 17:54:51 -0600
Subject: [PATCH 170/173] More type import fixes

---
 .../src/components/CounterBadge/useCounterBadgeStyles.ts      | 4 ++--
 .../src/components/PresenceBadge/usePresenceBadgeStyles.ts    | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
index 865c66c6f7f84e..c53c714cb421f1 100644
--- a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
+++ b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
@@ -1,7 +1,7 @@
-import type { SlotClassNames } from '@fluentui/react-utilities';
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
-import { BadgeSlots } from '../Badge/Badge.types';
 import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { BadgeSlots } from '../Badge/Badge.types';
 import type { CounterBadgeState } from './CounterBadge.types';
 
 /**
diff --git a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
index 59145500d2171d..21a592fe83802e 100644
--- a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
+++ b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
@@ -1,8 +1,8 @@
 import { mergeClasses, makeStyles, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
-import type { PresenceBadgeState } from './PresenceBadge.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
-import { BadgeSlots } from '../Badge/Badge.types';
+import type { BadgeSlots } from '../Badge/Badge.types';
+import type { PresenceBadgeState } from './PresenceBadge.types';
 
 /**
  * @deprecated Use `presenceBadgeClassNames.root` instead.

From 0c84a0ebad017a2ce2c28271ed4a2c7fa4d63db1 Mon Sep 17 00:00:00 2001
From: KHMakoto <Humberto.Morimoto@microsoft.com>
Date: Tue, 15 Mar 2022 17:59:28 -0600
Subject: [PATCH 171/173] Fixing bad merge conflict.

---
 .../src/components/CounterBadge/useCounterBadgeStyles.ts        | 2 --
 .../src/components/PresenceBadge/usePresenceBadgeStyles.ts      | 2 --
 2 files changed, 4 deletions(-)

diff --git a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
index 40a2a8b478111d..c53c714cb421f1 100644
--- a/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
+++ b/packages/react-badge/src/components/CounterBadge/useCounterBadgeStyles.ts
@@ -1,6 +1,4 @@
-import type { SlotClassNames } from '@fluentui/react-utilities';
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
-import { BadgeSlots } from '../Badge/Badge.types';
 import { useBadgeStyles_unstable } from '../Badge/useBadgeStyles';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { BadgeSlots } from '../Badge/Badge.types';
diff --git a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
index 4ea0728b1e7235..21a592fe83802e 100644
--- a/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
+++ b/packages/react-badge/src/components/PresenceBadge/usePresenceBadgeStyles.ts
@@ -3,8 +3,6 @@ import { tokens } from '@fluentui/react-theme';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { BadgeSlots } from '../Badge/Badge.types';
 import type { PresenceBadgeState } from './PresenceBadge.types';
-import type { SlotClassNames } from '@fluentui/react-utilities';
-import { BadgeSlots } from '../Badge/Badge.types';
 
 /**
  * @deprecated Use `presenceBadgeClassNames.root` instead.

From 90b3ffad3cf5dcae08173c5d1f3d3c5074f2ee84 Mon Sep 17 00:00:00 2001
From: Elizabeth Craig <elcraig@microsoft.com>
Date: Tue, 15 Mar 2022 17:47:30 -0700
Subject: [PATCH 172/173] fix merge conflict + apply suggestions

---
 packages/react-checkbox/src/index.ts            |  2 ++
 packages/react-conformance/src/defaultTests.tsx | 15 +++++----------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/react-checkbox/src/index.ts b/packages/react-checkbox/src/index.ts
index e789cb0fb7accb..ccff4e22089387 100644
--- a/packages/react-checkbox/src/index.ts
+++ b/packages/react-checkbox/src/index.ts
@@ -1,6 +1,8 @@
 export {
   Checkbox,
+  // eslint-disable-next-line deprecation/deprecation
   checkboxClassName,
+  checkboxClassNames,
   renderCheckbox_unstable,
   useCheckboxStyles_unstable,
   useCheckbox_unstable,
diff --git a/packages/react-conformance/src/defaultTests.tsx b/packages/react-conformance/src/defaultTests.tsx
index a4f6d4f5da078d..9715fbe8e3912c 100644
--- a/packages/react-conformance/src/defaultTests.tsx
+++ b/packages/react-conformance/src/defaultTests.tsx
@@ -314,6 +314,8 @@ export const defaultTests: TestObject = {
 
     const componentName = componentInfo.displayName;
     const componentClassName = `fui-${componentName}`;
+    const exportName = `${componentName[0].toLowerCase()}${componentName.slice(1)}ClassNames`;
+    const indexPath = path.join(getPackagePath(componentPath), 'src', 'index');
     let handledClassNamesObjectExport = false;
 
     it('has static classnames exported at top-level (component-has-static-classnames-object)', () => {
@@ -321,11 +323,8 @@ export const defaultTests: TestObject = {
         return;
       }
 
-      const exportName =
-        componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
-
       try {
-        const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
+        const indexFile = require(indexPath);
         const classNamesFromFile = indexFile[exportName];
         expect(classNamesFromFile).toBeTruthy();
         handledClassNamesObjectExport = true;
@@ -346,9 +345,7 @@ export const defaultTests: TestObject = {
         return;
       }
 
-      const exportName =
-        componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
-      const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
+      const indexFile = require(indexPath);
       const classNamesFromFile = indexFile[exportName];
 
       const expectedClassNames = Object.keys(classNamesFromFile).reduce(
@@ -389,9 +386,7 @@ export const defaultTests: TestObject = {
         const defaultEl = customMount(<Component {...mergedProps} />);
         const defaultComponent = getComponent(defaultEl, helperComponents, wrapperComponent);
 
-        const exportName =
-          componentInfo.displayName.slice(0, 1).toLowerCase() + componentInfo.displayName.slice(1) + 'ClassNames';
-        const indexFile = require(path.join(getPackagePath(componentPath), 'src', 'index'));
+        const indexFile = require(indexPath);
         const classNamesFromFile = indexFile[exportName];
 
         const expectedClassNames: { [key: string]: string } = staticClassNames.expectedClassNames ?? classNamesFromFile;

From fcc4c52f640da6fa01ef49f21feaaa109fc958f4 Mon Sep 17 00:00:00 2001
From: Elizabeth Craig <elcraig@microsoft.com>
Date: Tue, 15 Mar 2022 18:28:09 -0700
Subject: [PATCH 173/173] remove console log

---
 .../src/components/CompoundButton/renderCompoundButton.tsx      | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx b/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx
index 3d1ce7d266a467..a23a3b5c3403de 100644
--- a/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx
+++ b/packages/react-button/src/components/CompoundButton/renderCompoundButton.tsx
@@ -9,8 +9,6 @@ export const renderCompoundButton_unstable = (state: CompoundButtonState) => {
   const { slots, slotProps } = getSlots<CompoundButtonSlots>(state);
   const { iconOnly, iconPosition } = state;
 
-  console.log('STATE', state);
-
   return (
     <slots.root {...slotProps.root}>
       {iconPosition !== 'after' && slots.icon && <slots.icon {...slotProps.icon} />}