Button: Exporting class names of individual slots

change/@fluentui-react-button-d331f16a-d205-4660-bec8-f39b700877cc.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Button: Exporting classNames of individual slots.",
+  "packageName": "@fluentui/react-button",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -10,12 +10,16 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import { 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 Button: ForwardRefComponent<ButtonProps>;
 
 // @public (undocumented)
-export const buttonClassName = "fui-Button";
+export const buttonClassName: string;
+
+// @public (undocumented)
+export const buttonClassNames: SlotClassNames<ButtonSlots>;
 
 // Warning: (ae-forgotten-export) The symbol "ButtonCommons" needs to be exported by the entry point index.d.ts
 //
@@ -37,7 +41,10 @@ export type ButtonState = ComponentState<ButtonSlots> & ButtonCommons & {
 export const CompoundButton: ForwardRefComponent<CompoundButtonProps>;
 
 // @public (undocumented)
-export const compoundButtonClassName = "fui-CompoundButton";
+export const compoundButtonClassName: string;
+
+// @public (undocumented)
+export const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots>;
 
 // @public (undocumented)
 export type CompoundButtonProps = ComponentProps<Partial<CompoundButtonSlots>> & Partial<ButtonCommons>;
@@ -55,7 +62,10 @@ export type CompoundButtonState = ComponentState<CompoundButtonSlots> & Omit<But
 export const MenuButton: ForwardRefComponent<MenuButtonProps>;
 
 // @public (undocumented)
-export const menuButtonClassName = "fui-MenuButton";
+export const menuButtonClassName: string;
+
+// @public (undocumented)
+export const menuButtonClassNames: SlotClassNames<MenuButtonSlots>;
 
 // @public (undocumented)
 export type MenuButtonProps = ComponentProps<MenuButtonSlots> & Partial<Omit<ButtonCommons, 'iconPosition'>>;
@@ -86,7 +96,10 @@ export const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Elemen
 export const SplitButton: ForwardRefComponent<SplitButtonProps>;
 
 // @public (undocumented)
-export const splitButtonClassName = "fui-SplitButton";
+export const splitButtonClassName: string;
+
+// @public (undocumented)
+export const splitButtonClassNames: SlotClassNames<SplitButtonSlots>;
 
 // @public (undocumented)
 export type SplitButtonProps = ComponentProps<SplitButtonSlots> & Omit<ButtonProps, 'root'> & Omit<MenuButtonProps, 'root'>;
@@ -105,7 +118,10 @@ export type SplitButtonState = ComponentState<SplitButtonSlots> & Omit<ButtonSta
 export const ToggleButton: ForwardRefComponent<ToggleButtonProps>;
 
 // @public (undocumented)
-export const toggleButtonClassName = "fui-ToggleButton";
+export const toggleButtonClassName: string;
+
+// @public (undocumented)
+export const toggleButtonClassNames: SlotClassNames<ButtonSlots>;
 
 // Warning: (ae-forgotten-export) The symbol "ToggleButtonCommons" needs to be exported by the entry point index.d.ts
 //

packages/react-button/src/components/Button/index.ts

@@ -3,4 +3,4 @@ export * from './Button';
 export type { ButtonProps, ButtonSlots, ButtonState } from './Button.types';
 export * from './renderButton';
 export * from './useButton';
-export { buttonClassName, useButtonStyles_unstable } from './useButtonStyles';
+export { buttonClassName, buttonClassNames, useButtonStyles_unstable } from './useButtonStyles';

packages/react-button/src/components/Button/useButtonStyles.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 { ButtonState } from './Button.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { ButtonSlots, ButtonState } from './Button.types';
 
-export const buttonClassName = 'fui-Button';
+export const buttonClassNames: SlotClassNames<ButtonSlots> = {
+  root: 'fui-Button',
+  icon: 'fui-Button__icon',
+};
+
+// TODO temporary export to pass conformance test.
+export const buttonClassName = buttonClassNames.root;
 
 const useRootStyles = makeStyles({
   // Base styles
@@ -353,7 +360,7 @@ export const useButtonStyles_unstable = (state: ButtonState): ButtonState => {
   const { appearance, block, disabled, disabledFocusable, iconOnly, shape, size } = state;
 
   state.root.className = mergeClasses(
-    buttonClassName,
+    buttonClassNames.root,
 
     // Root styles
     rootStyles.base,
@@ -380,7 +387,7 @@ export const useButtonStyles_unstable = (state: ButtonState): ButtonState => {
   );
 
   if (state.icon) {
-    state.icon.className = mergeClasses(iconStyles.base, iconStyles[size], state.icon.className);
+    state.icon.className = mergeClasses(buttonClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);
   }
 
   return state;

packages/react-button/src/components/CompoundButton/index.ts

@@ -2,4 +2,8 @@ export * from './CompoundButton';
 export * from './CompoundButton.types';
 export * from './renderCompoundButton';
 export * from './useCompoundButton';
-export { compoundButtonClassName, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles';
+export {
+  compoundButtonClassName,
+  compoundButtonClassNames,
+  useCompoundButtonStyles_unstable,
+} from './useCompoundButtonStyles';

packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts

@@ -1,33 +1,38 @@
 import { shorthands, mergeClasses, makeStyles } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { useButtonStyles_unstable } from '../Button/useButtonStyles';
-import type { CompoundButtonState } from './CompoundButton.types';
-
-export const compoundButtonClassName = 'fui-CompoundButton';
-
-const CompoundButtonClassNames = {
-  secondaryContent: `${compoundButtonClassName}-secondaryContent`,
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types';
+
+export const compoundButtonClassNames: SlotClassNames<CompoundButtonSlots> = {
+  root: 'fui-CompoundButton',
+  icon: 'fui-CompoundButton__icon',
+  contentContainer: 'fui-CompoundButton__contentContainer',
+  secondaryContent: 'fui-CompoundButton__secondaryContent',
 };
 
+// TODO temporary export to pass conformance test.
+export const compoundButtonClassName = compoundButtonClassNames.root;
+
 const useRootStyles = makeStyles({
   // Base styles
   base: {
     ...shorthands.gap('12px'),
 
     height: 'auto',
 
-    [`& .${CompoundButtonClassNames.secondaryContent}`]: {
+    [`& .${compoundButtonClassNames.secondaryContent}`]: {
       color: tokens.colorNeutralForeground2,
     },
 
     ':hover': {
-      [`& .${CompoundButtonClassNames.secondaryContent}`]: {
+      [`& .${compoundButtonClassNames.secondaryContent}`]: {
         color: tokens.colorNeutralForeground2Hover,
       },
     },
 
     ':active': {
-      [`& .${CompoundButtonClassNames.secondaryContent}`]: {
+      [`& .${compoundButtonClassNames.secondaryContent}`]: {
         color: tokens.colorNeutralForeground2Pressed,
       },
     },
@@ -38,52 +43,52 @@ const useRootStyles = makeStyles({
     /* No styles */
   },
   primary: {
-    [`& .${CompoundButtonClassNames.secondaryContent}`]: {
+    [`& .${compoundButtonClassNames.secondaryContent}`]: {
       color: tokens.colorNeutralForegroundOnBrand,
     },
 
     ':hover': {
-      [`& .${CompoundButtonClassNames.secondaryContent}`]: {
+      [`& .${compoundButtonClassNames.secondaryContent}`]: {
         color: tokens.colorNeutralForegroundOnBrand,
       },
     },
 
     ':active': {
-      [`& .${CompoundButtonClassNames.secondaryContent}`]: {
+      [`& .${compoundButtonClassNames.secondaryContent}`]: {
         color: tokens.colorNeutralForegroundOnBrand,
       },
     },
   },
   subtle: {
-    [`& .${CompoundButtonClassNames.secondaryContent}`]: {
+    [`& .${compoundButtonClassNames.secondaryContent}`]: {
       color: tokens.colorNeutralForeground2,
     },
 
     ':hover': {
-      [`& .${CompoundButtonClassNames.secondaryContent}`]: {
+      [`& .${compoundButtonClassNames.secondaryContent}`]: {
         color: tokens.colorNeutralForeground2BrandHover,
       },
     },
 
     ':active': {
-      [`& .${CompoundButtonClassNames.secondaryContent}`]: {
+      [`& .${compoundButtonClassNames.secondaryContent}`]: {
         color: tokens.colorNeutralForeground2BrandPressed,
       },
     },
   },
   transparent: {
-    [`& .${CompoundButtonClassNames.secondaryContent}`]: {
+    [`& .${compoundButtonClassNames.secondaryContent}`]: {
       color: tokens.colorNeutralForeground2,
     },
 
     ':hover': {
-      [`& .${CompoundButtonClassNames.secondaryContent}`]: {
+      [`& .${compoundButtonClassNames.secondaryContent}`]: {
         color: tokens.colorNeutralForeground2BrandHover,
       },
     },
 
     ':active': {
-      [`& .${CompoundButtonClassNames.secondaryContent}`]: {
+      [`& .${compoundButtonClassNames.secondaryContent}`]: {
         color: tokens.colorNeutralForeground2BrandPressed,
       },
     },
@@ -111,18 +116,18 @@ const useRootStyles = makeStyles({
 
   // Disabled styles
   disabled: {
-    [`& .${CompoundButtonClassNames.secondaryContent}`]: {
+    [`& .${compoundButtonClassNames.secondaryContent}`]: {
       color: tokens.colorNeutralForegroundDisabled,
     },
 
     ':hover': {
-      [`& .${CompoundButtonClassNames.secondaryContent}`]: {
+      [`& .${compoundButtonClassNames.secondaryContent}`]: {
         color: tokens.colorNeutralForegroundDisabled,
       },
     },
 
     ':active': {
-      [`& .${CompoundButtonClassNames.secondaryContent}`]: {
+      [`& .${compoundButtonClassNames.secondaryContent}`]: {
         color: tokens.colorNeutralForegroundDisabled,
       },
     },
@@ -198,7 +203,7 @@ export const useCompoundButtonStyles_unstable = (state: CompoundButtonState): Co
   const { appearance, disabled, disabledFocusable, iconOnly, size } = state;
 
   state.root.className = mergeClasses(
-    compoundButtonClassName,
+    compoundButtonClassNames.root,
 
     // Root styles
     rootStyles.base,
@@ -215,15 +220,19 @@ export const useCompoundButtonStyles_unstable = (state: CompoundButtonState): Co
     state.root.className,
   );
 
+  state.contentContainer.className = mergeClasses(
+    compoundButtonClassNames.contentContainer,
+    contentContainerStyles.base,
+    state.contentContainer.className,
+  );
+
   if (state.icon) {
-    state.icon.className = mergeClasses(iconStyles.base, state.icon.className);
+    state.icon.className = mergeClasses(compoundButtonClassNames.icon, iconStyles.base, state.icon.className);
   }
 
-  state.contentContainer.className = mergeClasses(contentContainerStyles.base, state.contentContainer.className);
-
   if (state.secondaryContent) {
     state.secondaryContent.className = mergeClasses(
-      CompoundButtonClassNames.secondaryContent,
+      compoundButtonClassNames.secondaryContent,
       secondaryContentStyles.base,
       secondaryContentStyles[size],
       state.secondaryContent.className,

packages/react-button/src/components/MenuButton/index.ts

@@ -2,4 +2,4 @@ export * from './MenuButton.types';
 export * from './MenuButton';
 export * from './renderMenuButton';
 export * from './useMenuButton';
-export { menuButtonClassName, useMenuButtonStyles_unstable } from './useMenuButtonStyles';
+export { menuButtonClassName, menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles';

packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts

@@ -1,9 +1,17 @@
 import { mergeClasses, makeStyles } from '@griffel/react';
 import { ButtonState } from '../Button/Button.types';
 import { useButtonStyles_unstable } from '../Button/useButtonStyles';
-import type { MenuButtonState } from './MenuButton.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+import type { MenuButtonSlots, MenuButtonState } from './MenuButton.types';
 
-export const menuButtonClassName = 'fui-MenuButton';
+export const menuButtonClassNames: SlotClassNames<MenuButtonSlots> = {
+  root: 'fui-MenuButton',
+  icon: 'fui-MenuButton__icon',
+  menuIcon: 'fui-MenuButton__menuIcon',
+};
+
+// TODO temporary export to pass conformance test.
+export const menuButtonClassName = menuButtonClassNames.root;
 
 const useMenuIconStyles = makeStyles({
   // Size appearance
@@ -27,7 +35,11 @@ const useMenuIconStyles = makeStyles({
 export const useMenuButtonStyles_unstable = (state: MenuButtonState): MenuButtonState => {
   const menuIconStyles = useMenuIconStyles();
 
-  state.root.className = mergeClasses(menuButtonClassName, state.root.className);
+  state.root.className = mergeClasses(menuButtonClassNames.root, state.root.className);
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(menuButtonClassNames.icon, state.icon.className);
+  }
 
   if (state.menuIcon) {
     state.menuIcon.className = mergeClasses(menuIconStyles[state.size], state.menuIcon.className);

packages/react-button/src/components/SplitButton/index.ts

@@ -2,4 +2,4 @@ export * from './SplitButton';
 export * from './SplitButton.types';
 export * from './renderSplitButton';
 export * from './useSplitButton';
-export { splitButtonClassName, useSplitButtonStyles_unstable } from './useSplitButtonStyles';
+export { splitButtonClassName, splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles';