Add conformance tests for static classnames

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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,

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 type { SlotClassNames } from '@fluentui/react-utilities';
 
 // @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>;
 

packages/react-accordion/src/components/Accordion/useAccordionStyles.ts

@@ -1,10 +1,17 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
-import type { AccordionState } from './Accordion.types';
+import type { AccordionSlots, AccordionState } from './Accordion.types';
 
+/**
+ * @deprecated Use `accordionClassNames.root` instead.
+ */
 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;
 };

packages/react-accordion/src/components/AccordionHeader/AccordionHeader.test.tsx

@@ -14,6 +14,15 @@ describe('AccordionHeader', () => {
     Component: AccordionHeader,
     displayName: 'AccordionHeader',
     helperComponents: [AccordionHeaderContext.Provider],
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            icon: 'Test Icon',
+          },
+        },
+      ],
+    },
   });
 
   afterEach(() => {

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}

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 type { SlotClassNames } from '@fluentui/react-utilities';
 
+/**
+ * @deprecated Use `accordionHeaderClassNames.root` instead.
+ */
 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,14 +98,15 @@ 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,
     state.root.className,
   );
 
   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,

packages/react-accordion/src/components/AccordionItem/useAccordionItemStyles.ts

@@ -1,10 +1,17 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { mergeClasses } from '@griffel/react';
-import type { AccordionItemState } from './AccordionItem.types';
+import type { AccordionItemSlots, AccordionItemState } from './AccordionItem.types';
 
+/**
+ * @deprecated Use `accordionItemClassNames.root` instead.
+ */
 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;
 };

packages/react-accordion/src/components/AccordionPanel/useAccordionPanelStyles.ts

@@ -1,7 +1,14 @@
+import type { SlotClassNames } from '@fluentui/react-utilities';
 import { makeStyles, mergeClasses } from '@griffel/react';
-import type { AccordionPanelState } from './AccordionPanel.types';
+import type { AccordionPanelSlots, AccordionPanelState } from './AccordionPanel.types';
 
+/**
+ * @deprecated Use `accordionPanelClassNames.root` instead.
+ */
 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;
 };