feat(accordion, provider): add static classes

.storybook/preview-head-template.html

@@ -109,7 +109,7 @@
     display: none;
   }
 
-  #docs-root div[class^='fluent-provider'] {
+  #docs-root div[class^='fui-FluentProvider'] {
     background: #faf9f8;
   }
 

change/@fluentui-react-accordion-495d25d1-ba87-4f9c-98f1-e77c35bb97bf.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "export static classes for components",
+  "packageName": "@fluentui/react-accordion",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-provider-10e09617-dfd2-4ada-bfd8-8d91dbe95b6d.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "export static classes for components",
+  "packageName": "@fluentui/react-provider",
+  "email": "olfedias@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-accordion/etc/react-accordion.api.md

@@ -16,6 +16,9 @@ import * as React_2 from 'react';
 // @public
 export const Accordion: ForwardRefComponent<AccordionProps>;
 
+// @public (undocumented)
+export const accordionClassName = "fui-Accordion";
+
 // @public (undocumented)
 export type AccordionCommons = {
     navigable: boolean;
@@ -40,6 +43,9 @@ export type AccordionContextValues = {
 // @public
 export const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
 
+// @public (undocumented)
+export const accordionHeaderClassName = "fui-AccordionHeader";
+
 // @public (undocumented)
 export type AccordionHeaderCommons = {
     size: AccordionHeaderSize;
@@ -96,6 +102,9 @@ export type AccordionIndex = number | number[];
 // @public
 export const AccordionItem: ForwardRefComponent<AccordionItemProps>;
 
+// @public (undocumented)
+export const accordionItemClassName = "fui-AccordionItem";
+
 // @public (undocumented)
 export type AccordionItemCommons = {
     disabled: boolean;
@@ -136,6 +145,9 @@ export type AccordionItemValue = unknown;
 // @public
 export const AccordionPanel: ForwardRefComponent<AccordionPanelProps>;
 
+// @public (undocumented)
+export const accordionPanelClassName = "fui-AccordionPanel";
+
 // @public (undocumented)
 export type AccordionPanelProps = ComponentProps<AccordionPanelSlots>;
 
@@ -217,12 +229,18 @@ export const useAccordionItemContext: () => AccordionItemContextValue;
 // @public (undocumented)
 export function useAccordionItemContextValues(state: AccordionItemState): AccordionItemContextValues;
 
+// @public (undocumented)
+export const useAccordionItemStyles: (state: AccordionItemState) => AccordionItemState;
+
 // @public
 export const useAccordionPanel: (props: AccordionPanelProps, ref: React_2.Ref<HTMLElement>) => AccordionPanelState;
 
 // @public
 export const useAccordionPanelStyles: (state: AccordionPanelState) => AccordionPanelState;
 
+// @public (undocumented)
+export const useAccordionStyles: (state: AccordionState) => AccordionState;
+
 // (No @packageDocumentation comment for this package)
 
 ```

packages/react-accordion/src/components/Accordion/Accordion.tsx

@@ -4,6 +4,7 @@ import { useAccordion } from './useAccordion';
 import { useAccordionContextValues } from './useAccordionContextValues';
 import type { AccordionProps } from './Accordion.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useAccordionStyles } from './useAccordionStyles';
 
 /**
  * Define a styled Accordion, using the `useAccordion` and `useAccordionStyles` hooks.
@@ -13,6 +14,8 @@ export const Accordion: ForwardRefComponent<AccordionProps> = React.forwardRef<H
     const state = useAccordion(props, ref);
     const contextValues = useAccordionContextValues(state);
 
+    useAccordionStyles(state);
+
     return renderAccordion(state, contextValues);
   },
 );

packages/react-accordion/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Accordion renders a default state 1`] = `
-<div>
+<div
+  className="fui-Accordion"
+>
   Default Accordion
 </div>
 `;

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

@@ -2,5 +2,6 @@ export * from './Accordion';
 export * from './Accordion.types';
 export * from './renderAccordion';
 export * from './useAccordion';
+export * from './useAccordionStyles';
 export * from './useAccordionContextValues';
 export * from './AccordionContext';

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

@@ -0,0 +1,10 @@
+import { mergeClasses } from '@fluentui/react-make-styles';
+import type { AccordionState } from './Accordion.types';
+
+export const accordionClassName = 'fui-Accordion';
+
+export const useAccordionStyles = (state: AccordionState) => {
+  state.root.className = mergeClasses(accordionClassName, state.root.className);
+
+  return state;
+};

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

@@ -2,7 +2,7 @@
 
 exports[`AccordionHeader renders a default state 1`] = `
 <div
-  className=""
+  className="fui-AccordionHeader"
   role="heading"
 >
   <button

packages/react-accordion/src/components/AccordionHeader/useAccordionHeaderStyles.ts

@@ -2,6 +2,8 @@ import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
 import { createFocusOutlineStyle } from '@fluentui/react-tabster';
 import type { AccordionHeaderState } from './AccordionHeader.types';
 
+export const accordionHeaderClassName = 'fui-AccordionHeader';
+
 const useStyles = makeStyles({
   // TODO: this should be extracted to another package
   resetButton: {
@@ -87,6 +89,7 @@ const useStyles = makeStyles({
 export const useAccordionHeaderStyles = (state: AccordionHeaderState) => {
   const styles = useStyles();
   state.root.className = mergeClasses(
+    accordionHeaderClassName,
     styles.root,
     state.inline && styles.rootInline,
     state.disabled && styles.rootDisabled,

packages/react-accordion/src/components/AccordionItem/AccordionItem.tsx

@@ -4,6 +4,7 @@ import { useAccordionItemContextValues } from './useAccordionItemContextValues';
 import { renderAccordionItem } from './renderAccordionItem';
 import type { AccordionItemProps } from './AccordionItem.types';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { useAccordionItemStyles } from './useAccordionItemStyles';
 
 /**
  * Define a styled AccordionItem, using the `useAccordionItem` and `useAccordionItemStyles` hooks.
@@ -12,6 +13,8 @@ export const AccordionItem: ForwardRefComponent<AccordionItemProps> = React.forw
   const state = useAccordionItem(props, ref);
   const contextValues = useAccordionItemContextValues(state);
 
+  useAccordionItemStyles(state);
+
   return renderAccordionItem(state, contextValues);
 });
 

packages/react-accordion/src/components/AccordionItem/__snapshots__/AccordionItem.test.tsx.snap

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AccordionItem renders a default state 1`] = `
-<div>
+<div
+  className="fui-AccordionItem"
+>
   Default AccordionItem
 </div>
 `;

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

@@ -4,3 +4,4 @@ export * from './renderAccordionItem';
 export * from './useAccordionItem';
 export * from './useAccordionItemContextValues';
 export * from './AccordionItemContext';
+export * from './useAccordionItemStyles';

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

@@ -0,0 +1,10 @@
+import { mergeClasses } from '@fluentui/react-make-styles';
+import type { AccordionItemState } from './AccordionItem.types';
+
+export const accordionItemClassName = 'fui-AccordionItem';
+
+export const useAccordionItemStyles = (state: AccordionItemState) => {
+  state.root.className = mergeClasses(accordionItemClassName, state.root.className);
+
+  return state;
+};

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

@@ -1,6 +1,8 @@
 import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
 import type { AccordionPanelState } from './AccordionPanel.types';
 
+export const accordionPanelClassName = 'fui-AccordionPanel';
+
 /**
  * Styles for the root slot
  */
@@ -14,7 +16,7 @@ const useStyles = makeStyles({
 /** Applies style classnames to slots */
 export const useAccordionPanelStyles = (state: AccordionPanelState) => {
   const styles = useStyles();
-  state.root.className = mergeClasses(styles.root, state.root.className);
+  state.root.className = mergeClasses(accordionPanelClassName, styles.root, state.root.className);
 
   return state;
 };

packages/react-provider/etc/react-provider.api.md

@@ -20,6 +20,9 @@ import { useTheme } from '@fluentui/react-shared-contexts';
 // @public (undocumented)
 export const FluentProvider: React_2.ForwardRefExoticComponent<FluentProviderProps & React_2.RefAttributes<HTMLElement>>;
 
+// @public (undocumented)
+export const fluentProviderClassName = "fui-FluentProvider";
+
 // @public (undocumented)
 export interface FluentProviderCommons {
     dir: 'ltr' | 'rtl';
@@ -71,6 +74,9 @@ export const useFluentProvider: (props: FluentProviderProps, ref: React_2.Ref<HT
 // @public (undocumented)
 export function useFluentProviderContextValues(state: FluentProviderState): FluentProviderContextValues;
 
+// @public
+export const useFluentProviderStyles: (state: FluentProviderState) => FluentProviderState;
+
 export { useTheme }
 
 // (No @packageDocumentation comment for this package)

packages/react-provider/src/components/FluentProvider/__snapshots__/FluentProvider.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`FluentProvider renders a default state 1`] = `
 <div
-  className="fluent-provider1"
+  className="fui-FluentProvider fui-FluentProvider1"
   dir="ltr"
 >
   Default FluentProvider

packages/react-provider/src/components/FluentProvider/index.ts

@@ -2,4 +2,5 @@ export * from './FluentProvider';
 export * from './FluentProvider.types';
 export * from './renderFluentProvider';
 export * from './useFluentProvider';
+export * from './useFluentProviderStyles';
 export * from './useFluentProviderContextValues';

packages/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts

@@ -1,6 +1,8 @@
 import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
 import type { FluentProviderState } from './FluentProvider.types';
 
+export const fluentProviderClassName = 'fui-FluentProvider';
+
 const useStyles = makeStyles({
   root: theme => ({
     color: theme.colorNeutralForeground1,
@@ -15,7 +17,7 @@ const useStyles = makeStyles({
 export const useFluentProviderStyles = (state: FluentProviderState) => {
   const styles = useStyles();
 
-  state.root.className = mergeClasses(state.themeClassName, styles.root, state.root.className);
+  state.root.className = mergeClasses(fluentProviderClassName, state.themeClassName, styles.root, state.root.className);
 
   return state;
 };

packages/react-provider/src/components/FluentProvider/useThemeStyleTag.test.ts

@@ -54,7 +54,7 @@ describe('useThemeStyleTag', () => {
 
     expect(rule.selectorText).toEqual(`.${result.current}`);
     expect(themeToCSSVariables).toHaveBeenCalledTimes(1);
-    expect(rule.cssText).toMatchInlineSnapshot(`".fluent-provider1 {--css-variable-1: 1; --css-variable-2: 2;}"`);
+    expect(rule.cssText).toMatchInlineSnapshot(`".fui-FluentProvider1 {--css-variable-1: 1; --css-variable-2: 2;}"`);
   });
 
   it('should update style tag on theme change', () => {
@@ -73,6 +73,6 @@ describe('useThemeStyleTag', () => {
     const rule = sheet.cssRules[0] as CSSStyleRule;
     expect(themeToCSSVariables).toHaveBeenCalledTimes(2);
     expect(rule.selectorText).toEqual(`.${result.current}`);
-    expect(rule.cssText).toMatchInlineSnapshot(`".fluent-provider1 {--css-variable-update: xxx;}"`);
+    expect(rule.cssText).toMatchInlineSnapshot(`".fui-FluentProvider1 {--css-variable-update: xxx;}"`);
   });
 });

packages/react-provider/src/components/FluentProvider/useThemeStyleTag.ts

@@ -2,6 +2,7 @@ import { useId, usePrevious } from '@fluentui/react-utilities';
 import { themeToCSSVariables } from '@fluentui/react-theme';
 import * as React from 'react';
 import type { FluentProviderState } from './FluentProvider.types';
+import { fluentProviderClassName } 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 +12,7 @@ import type { FluentProviderState } from './FluentProvider.types';
 export const useThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {
   const { targetDocument, theme } = options;
 
-  const styleTagId = useId('fluent-provider');
+  const styleTagId = useId(fluentProviderClassName);
   const styleTag = React.useMemo(() => {
     if (!targetDocument) {
       return null;