From a2d9b96df0c82900718b4f82edeeffa5b1b32a6a Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Wed, 8 Dec 2021 12:58:16 -0800 Subject: [PATCH 1/4] Button: Exporting classNames of individual slots. --- packages/react-button/etc/react-button.api.md | 9 +++++ .../src/components/CompoundButton/index.ts | 6 ++- .../CompoundButton/useCompoundButtonStyles.ts | 37 ++++++++---------- .../src/components/SplitButton/index.ts | 7 +++- .../SplitButton/useSplitButtonStyles.ts | 39 +++++++++---------- 5 files changed, 55 insertions(+), 43 deletions(-) diff --git a/packages/react-button/etc/react-button.api.md b/packages/react-button/etc/react-button.api.md index c6ac9594efaa5..0b064941701ba 100644 --- a/packages/react-button/etc/react-button.api.md +++ b/packages/react-button/etc/react-button.api.md @@ -52,6 +52,9 @@ export const compoundButtonClassName = "fui-CompoundButton"; // @public (undocumented) export type CompoundButtonProps = ComponentProps & Partial; +// @public (undocumented) +export const compoundButtonSecondaryContentClassName: string; + // @public (undocumented) export type CompoundButtonSlots = ButtonSlots & { secondaryContent?: IntrinsicShorthandProps<'span'>; @@ -100,6 +103,12 @@ export const SplitButton: ForwardRefComponent; // @public (undocumented) export const splitButtonClassName = "fui-SplitButton"; +// @public (undocumented) +export const splitButtonMenuButtonClassName: string; + +// @public (undocumented) +export const splitButtonPrimaryActionButtonClassName: string; + // @public (undocumented) export type SplitButtonProps = ComponentProps & Omit & Omit; diff --git a/packages/react-button/src/components/CompoundButton/index.ts b/packages/react-button/src/components/CompoundButton/index.ts index 364cc0a03d380..44862123cad05 100644 --- a/packages/react-button/src/components/CompoundButton/index.ts +++ b/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 } from './useCompoundButtonStyles'; +export { + compoundButtonClassName, + compoundButtonSecondaryContentClassName, + useCompoundButtonStyles, +} from './useCompoundButtonStyles'; diff --git a/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts b/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts index dd804669d1bc5..8d8cba1d4361d 100644 --- a/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts +++ b/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts @@ -3,10 +3,7 @@ import { buttonSpacing, useButtonStyles } from '../Button/useButtonStyles'; import type { CompoundButtonState } from './CompoundButton.types'; export const compoundButtonClassName = 'fui-CompoundButton'; - -const CompoundButtonClassNames = { - secondaryContent: `${compoundButtonClassName}-secondaryContent`, -}; +export const compoundButtonSecondaryContentClassName = `${compoundButtonClassName}-secondaryContent`; const useRootStyles = makeStyles({ // Base styles @@ -15,18 +12,18 @@ const useRootStyles = makeStyles({ height: 'auto', - [`& .${CompoundButtonClassNames.secondaryContent}`]: { + [`& .${compoundButtonSecondaryContentClassName}`]: { color: theme.colorNeutralForeground2, }, ':hover': { - [`& .${CompoundButtonClassNames.secondaryContent}`]: { + [`& .${compoundButtonSecondaryContentClassName}`]: { color: theme.colorNeutralForeground2Hover, }, }, ':active': { - [`& .${CompoundButtonClassNames.secondaryContent}`]: { + [`& .${compoundButtonSecondaryContentClassName}`]: { color: theme.colorNeutralForeground2Pressed, }, }, @@ -37,52 +34,52 @@ const useRootStyles = makeStyles({ /* No styles */ }, primary: theme => ({ - [`& .${CompoundButtonClassNames.secondaryContent}`]: { + [`& .${compoundButtonSecondaryContentClassName}`]: { color: theme.colorNeutralForegroundOnBrand, }, ':hover': { - [`& .${CompoundButtonClassNames.secondaryContent}`]: { + [`& .${compoundButtonSecondaryContentClassName}`]: { color: theme.colorNeutralForegroundOnBrand, }, }, ':active': { - [`& .${CompoundButtonClassNames.secondaryContent}`]: { + [`& .${compoundButtonSecondaryContentClassName}`]: { color: theme.colorNeutralForegroundOnBrand, }, }, }), subtle: theme => ({ - [`& .${CompoundButtonClassNames.secondaryContent}`]: { + [`& .${compoundButtonSecondaryContentClassName}`]: { color: theme.colorNeutralForeground2, }, ':hover': { - [`& .${CompoundButtonClassNames.secondaryContent}`]: { + [`& .${compoundButtonSecondaryContentClassName}`]: { color: theme.colorNeutralForeground2BrandHover, }, }, ':active': { - [`& .${CompoundButtonClassNames.secondaryContent}`]: { + [`& .${compoundButtonSecondaryContentClassName}`]: { color: theme.colorNeutralForeground2BrandPressed, }, }, }), transparent: theme => ({ - [`& .${CompoundButtonClassNames.secondaryContent}`]: { + [`& .${compoundButtonSecondaryContentClassName}`]: { color: theme.colorNeutralForeground2, }, ':hover': { - [`& .${CompoundButtonClassNames.secondaryContent}`]: { + [`& .${compoundButtonSecondaryContentClassName}`]: { color: theme.colorNeutralForeground2BrandHover, }, }, ':active': { - [`& .${CompoundButtonClassNames.secondaryContent}`]: { + [`& .${compoundButtonSecondaryContentClassName}`]: { color: theme.colorNeutralForeground2BrandPressed, }, }, @@ -110,18 +107,18 @@ const useRootStyles = makeStyles({ // Disabled styles disabled: theme => ({ - [`& .${CompoundButtonClassNames.secondaryContent}`]: { + [`& .${compoundButtonSecondaryContentClassName}`]: { color: theme.colorNeutralForegroundDisabled, }, ':hover': { - [`& .${CompoundButtonClassNames.secondaryContent}`]: { + [`& .${compoundButtonSecondaryContentClassName}`]: { color: theme.colorNeutralForegroundDisabled, }, }, ':active': { - [`& .${CompoundButtonClassNames.secondaryContent}`]: { + [`& .${compoundButtonSecondaryContentClassName}`]: { color: theme.colorNeutralForegroundDisabled, }, }, @@ -223,7 +220,7 @@ export const useCompoundButtonStyles = (state: CompoundButtonState): CompoundBut if (state.secondaryContent) { state.secondaryContent.className = mergeClasses( - CompoundButtonClassNames.secondaryContent, + compoundButtonSecondaryContentClassName, secondaryContentStyles.base, secondaryContentStyles[size], state.secondaryContent.className, diff --git a/packages/react-button/src/components/SplitButton/index.ts b/packages/react-button/src/components/SplitButton/index.ts index f07e754a9abc0..60836ce60c90f 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, useSplitButtonStyles } from './useSplitButtonStyles'; +export { + splitButtonClassName, + splitButtonMenuButtonClassName, + splitButtonPrimaryActionButtonClassName, + useSplitButtonStyles, +} from './useSplitButtonStyles'; diff --git a/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts b/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts index 855095d387ec6..1c39b2ea5a0da 100644 --- a/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts +++ b/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts @@ -3,11 +3,8 @@ import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; import type { SplitButtonState } from './SplitButton.types'; export const splitButtonClassName = 'fui-SplitButton'; - -const SplitButtonClassNames = { - primaryActionButton: `${splitButtonClassName}-primaryActionButton`, - menuButton: `${splitButtonClassName}-menuButton`, -}; +export const splitButtonPrimaryActionButtonClassName = `${splitButtonClassName}-primaryActionButton`; +export const splitButtonMenuButtonClassName = `${splitButtonClassName}-menuButton`; const useFocusStyles = makeStyles({ primaryActionButton: createCustomFocusIndicatorStyle({ @@ -31,13 +28,13 @@ const useRootStyles = makeStyles({ verticalAlign: 'middle', // Use classnames to increase specificy of rootStyles and avoid collisions. - [`& .${SplitButtonClassNames.primaryActionButton}`]: { + [`& .${splitButtonPrimaryActionButtonClassName}`]: { borderTopRightRadius: 0, borderBottomRightRadius: 0, }, // Use classnames to increase specificy of rootStyles and avoid collisions. - [`& .${SplitButtonClassNames.menuButton}`]: { + [`& .${splitButtonMenuButtonClassName}`]: { borderLeftWidth: 0, borderTopLeftRadius: 0, borderBottomLeftRadius: 0, @@ -55,54 +52,54 @@ const useRootStyles = makeStyles({ }, primary: theme => ({ // Use classnames to increase specificy of rootStyles and avoid collisions. - [`& .${SplitButtonClassNames.primaryActionButton}`]: { + [`& .${splitButtonPrimaryActionButtonClassName}`]: { borderRightColor: theme.colorNeutralForegroundInverted, }, ':hover': { - [`& .${SplitButtonClassNames.primaryActionButton}`]: { + [`& .${splitButtonPrimaryActionButtonClassName}`]: { borderRightColor: theme.colorNeutralForegroundInverted, }, }, ':active': { - [`& .${SplitButtonClassNames.primaryActionButton}`]: { + [`& .${splitButtonPrimaryActionButtonClassName}`]: { borderRightColor: theme.colorNeutralForegroundInverted, }, }, }), subtle: theme => ({ // Use classnames to increase specificy of rootStyles and avoid collisions. - [`& .${SplitButtonClassNames.primaryActionButton}`]: { + [`& .${splitButtonPrimaryActionButtonClassName}`]: { borderRightColor: theme.colorNeutralStroke1Hover, }, ':hover': { - [`& .${SplitButtonClassNames.primaryActionButton}`]: { + [`& .${splitButtonPrimaryActionButtonClassName}`]: { borderRightColor: theme.colorNeutralStroke1Hover, }, }, ':active': { - [`& .${SplitButtonClassNames.primaryActionButton}`]: { + [`& .${splitButtonPrimaryActionButtonClassName}`]: { borderRightColor: theme.colorNeutralStroke1Hover, }, }, }), transparent: theme => ({ // Use classnames to increase specificy of rootStyles and avoid collisions. - [`& .${SplitButtonClassNames.primaryActionButton}`]: { + [`& .${splitButtonPrimaryActionButtonClassName}`]: { borderRightColor: theme.colorNeutralStroke1Hover, }, ':hover': { - [`& .${SplitButtonClassNames.primaryActionButton}`]: { + [`& .${splitButtonPrimaryActionButtonClassName}`]: { borderRightColor: theme.colorNeutralStroke1Hover, }, }, ':active': { - [`& .${SplitButtonClassNames.primaryActionButton}`]: { + [`& .${splitButtonPrimaryActionButtonClassName}`]: { borderRightColor: theme.colorNeutralStroke1Hover, }, }, @@ -116,18 +113,18 @@ const useRootStyles = makeStyles({ // Disabled rootStyles disabled: theme => ({ // Use classnames to increase specificy of rootStyles and avoid collisions. - [`& .${SplitButtonClassNames.primaryActionButton}`]: { + [`& .${splitButtonPrimaryActionButtonClassName}`]: { borderRightColor: theme.colorNeutralStrokeDisabled, }, ':hover': { - [`& .${SplitButtonClassNames.primaryActionButton}`]: { + [`& .${splitButtonPrimaryActionButtonClassName}`]: { borderRightColor: theme.colorNeutralStrokeDisabled, }, }, ':active': { - [`& .${SplitButtonClassNames.primaryActionButton}`]: { + [`& .${splitButtonPrimaryActionButtonClassName}`]: { borderRightColor: theme.colorNeutralStrokeDisabled, }, }, @@ -151,7 +148,7 @@ export const useSplitButtonStyles = (state: SplitButtonState): SplitButtonState if (state.menuButton) { state.menuButton.className = mergeClasses( - SplitButtonClassNames.menuButton, + splitButtonMenuButtonClassName, focusStyles.menuButton, state.menuButton.className, ); @@ -159,7 +156,7 @@ export const useSplitButtonStyles = (state: SplitButtonState): SplitButtonState if (state.primaryActionButton) { state.primaryActionButton.className = mergeClasses( - SplitButtonClassNames.primaryActionButton, + splitButtonPrimaryActionButtonClassName, focusStyles.primaryActionButton, state.primaryActionButton.className, ); From 326a10ca36d327efc3a251cde37e65ce212fa2fd Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Wed, 8 Dec 2021 13:07:58 -0800 Subject: [PATCH 2/4] Change files --- ...-react-button-d331f16a-d205-4660-bec8-f39b700877cc.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-button-d331f16a-d205-4660-bec8-f39b700877cc.json diff --git a/change/@fluentui-react-button-d331f16a-d205-4660-bec8-f39b700877cc.json b/change/@fluentui-react-button-d331f16a-d205-4660-bec8-f39b700877cc.json new file mode 100644 index 0000000000000..180016873d22e --- /dev/null +++ b/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" +} From d0c9596a853f477912f085cd8bd36b2ac6964bb8 Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Thu, 3 Mar 2022 10:43:24 -0800 Subject: [PATCH 3/4] Using class name helper from react-utilities. --- packages/react-button/etc/react-button.api.md | 30 +++++++++---------- .../src/components/Button/index.ts | 2 +- .../src/components/Button/useButtonStyles.ts | 8 +++-- .../src/components/CompoundButton/index.ts | 6 +++- .../CompoundButton/useCompoundButtonStyles.ts | 8 +++-- .../src/components/MenuButton/index.ts | 2 +- .../MenuButton/useMenuButtonStyles.ts | 8 +++-- .../src/components/SplitButton/index.ts | 2 +- .../SplitButton/useSplitButtonStyles.ts | 8 +++-- .../src/components/ToggleButton/index.ts | 2 +- .../ToggleButton/useToggleButtonStyles.ts | 8 +++-- 11 files changed, 49 insertions(+), 35 deletions(-) diff --git a/packages/react-button/etc/react-button.api.md b/packages/react-button/etc/react-button.api.md index 79c3f7ff0cf31..60f2a229714f6 100644 --- a/packages/react-button/etc/react-button.api.md +++ b/packages/react-button/etc/react-button.api.md @@ -10,14 +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; // @public (undocumented) -export const buttonClassNames: { - [SlotName in keyof ButtonSlots]-?: string; -}; +export const buttonClassName: string; + +// @public (undocumented) +export const buttonClassNames: SlotClassNames; // Warning: (ae-forgotten-export) The symbol "ButtonCommons" needs to be exported by the entry point index.d.ts // @@ -39,9 +41,10 @@ export type ButtonState = ComponentState & ButtonCommons & { export const CompoundButton: ForwardRefComponent; // @public (undocumented) -export const compoundButtonClassNames: { - [SlotName in keyof CompoundButtonSlots]-?: string; -}; +export const compoundButtonClassName: string; + +// @public (undocumented) +export const compoundButtonClassNames: SlotClassNames; // @public (undocumented) export type CompoundButtonProps = ComponentProps> & Partial; @@ -59,9 +62,10 @@ export type CompoundButtonState = ComponentState & Omit; // @public (undocumented) -export const menuButtonClassNames: { - [SlotName in keyof MenuButtonSlots]-?: string; -}; +export const menuButtonClassName: string; + +// @public (undocumented) +export const menuButtonClassNames: SlotClassNames; // @public (undocumented) export type MenuButtonProps = ComponentProps & Partial>; @@ -92,9 +96,7 @@ export const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Elemen export const SplitButton: ForwardRefComponent; // @public (undocumented) -export const splitButtonClassNames: { - [SlotName in keyof SplitButtonSlots]-?: string; -}; +export const splitButtonClassNames: SlotClassNames; // @public (undocumented) export type SplitButtonProps = ComponentProps & Omit & Omit; @@ -113,9 +115,7 @@ export type SplitButtonState = ComponentState & Omit; // @public (undocumented) -export const toggleButtonClassNames: { - [SlotName in keyof ButtonSlots]-?: string; -}; +export const toggleButtonClassNames: SlotClassNames; // Warning: (ae-forgotten-export) The symbol "ToggleButtonCommons" needs to be exported by the entry point index.d.ts // diff --git a/packages/react-button/src/components/Button/index.ts b/packages/react-button/src/components/Button/index.ts index aed7aa52a83e2..65bdfd3b13998 100644 --- a/packages/react-button/src/components/Button/index.ts +++ b/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 { buttonClassNames, useButtonStyles_unstable } from './useButtonStyles'; +export { buttonClassName, buttonClassNames, useButtonStyles_unstable } from './useButtonStyles'; diff --git a/packages/react-button/src/components/Button/useButtonStyles.ts b/packages/react-button/src/components/Button/useButtonStyles.ts index 8761c6ed90b4f..a99ec843b1491 100644 --- a/packages/react-button/src/components/Button/useButtonStyles.ts +++ b/packages/react-button/src/components/Button/useButtonStyles.ts @@ -1,15 +1,17 @@ import { shorthands, makeStyles, mergeClasses } from '@griffel/react'; import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; import { tokens } from '@fluentui/react-theme'; +import type { SlotClassNames } from '@fluentui/react-utilities'; import type { ButtonSlots, ButtonState } from './Button.types'; -export const buttonClassNames: { - [SlotName in keyof ButtonSlots]-?: string; -} = { +export const buttonClassNames: SlotClassNames = { root: 'fui-Button', icon: 'fui-Button__icon', }; +// TODO temporary export to pass conformance test. +export const buttonClassName = buttonClassNames.root; + const useRootStyles = makeStyles({ // Base styles base: { diff --git a/packages/react-button/src/components/CompoundButton/index.ts b/packages/react-button/src/components/CompoundButton/index.ts index c03cf9a82ace7..fd0e57899db43 100644 --- a/packages/react-button/src/components/CompoundButton/index.ts +++ b/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 { compoundButtonClassNames, useCompoundButtonStyles_unstable } from './useCompoundButtonStyles'; +export { + compoundButtonClassName, + compoundButtonClassNames, + useCompoundButtonStyles_unstable, +} from './useCompoundButtonStyles'; diff --git a/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts b/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts index 5032274a5dafb..53b6d18ee4afa 100644 --- a/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts +++ b/packages/react-button/src/components/CompoundButton/useCompoundButtonStyles.ts @@ -1,17 +1,19 @@ import { shorthands, mergeClasses, makeStyles } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import { useButtonStyles_unstable } from '../Button/useButtonStyles'; +import type { SlotClassNames } from '@fluentui/react-utilities'; import type { CompoundButtonSlots, CompoundButtonState } from './CompoundButton.types'; -export const compoundButtonClassNames: { - [SlotName in keyof CompoundButtonSlots]-?: string; -} = { +export const compoundButtonClassNames: SlotClassNames = { 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: { diff --git a/packages/react-button/src/components/MenuButton/index.ts b/packages/react-button/src/components/MenuButton/index.ts index 1a2f243d7c1b3..7ec4cfc5d9d3c 100644 --- a/packages/react-button/src/components/MenuButton/index.ts +++ b/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 { menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles'; +export { menuButtonClassName, menuButtonClassNames, useMenuButtonStyles_unstable } from './useMenuButtonStyles'; diff --git a/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts b/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts index 2f22a1f8d1da1..4210ca3df4b52 100644 --- a/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts +++ b/packages/react-button/src/components/MenuButton/useMenuButtonStyles.ts @@ -1,16 +1,18 @@ import { mergeClasses, makeStyles } from '@griffel/react'; import { ButtonState } from '../Button/Button.types'; import { useButtonStyles_unstable } from '../Button/useButtonStyles'; +import type { SlotClassNames } from '@fluentui/react-utilities'; import type { MenuButtonSlots, MenuButtonState } from './MenuButton.types'; -export const menuButtonClassNames: { - [SlotName in keyof MenuButtonSlots]-?: string; -} = { +export const menuButtonClassNames: SlotClassNames = { 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 small: { diff --git a/packages/react-button/src/components/SplitButton/index.ts b/packages/react-button/src/components/SplitButton/index.ts index 916cfacdcab8d..04ee7588a3d39 100644 --- a/packages/react-button/src/components/SplitButton/index.ts +++ b/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 { splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles'; +export { splitButtonClassName, splitButtonClassNames, useSplitButtonStyles_unstable } from './useSplitButtonStyles'; diff --git a/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts b/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts index 6630f5b0a9d93..48476cad3633a 100644 --- a/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts +++ b/packages/react-button/src/components/SplitButton/useSplitButtonStyles.ts @@ -1,16 +1,18 @@ import { makeStyles, mergeClasses } from '@griffel/react'; import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; import { tokens } from '@fluentui/react-theme'; +import type { SlotClassNames } from '@fluentui/react-utilities'; import type { SplitButtonSlots, SplitButtonState } from './SplitButton.types'; -export const splitButtonClassNames: { - [SlotName in keyof SplitButtonSlots]-?: string; -} = { +export const splitButtonClassNames: SlotClassNames = { root: 'fui-SplitButton', menuButton: 'fui-SplitButton__menuButton', primaryActionButton: 'fui-SplitButton__primaryActionButton', }; +// TODO temporary export to pass conformance test. +export const splitButtonClassName = splitButtonClassNames.root; + const useFocusStyles = makeStyles({ primaryActionButton: createCustomFocusIndicatorStyle({ borderTopRightRadius: 0, diff --git a/packages/react-button/src/components/ToggleButton/index.ts b/packages/react-button/src/components/ToggleButton/index.ts index f73efaf513065..659aefa2b4080 100644 --- a/packages/react-button/src/components/ToggleButton/index.ts +++ b/packages/react-button/src/components/ToggleButton/index.ts @@ -2,4 +2,4 @@ export * from './ToggleButton'; export * from './ToggleButton.types'; export * from './renderToggleButton'; export * from './useToggleButton'; -export { toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles'; +export { toggleButtonClassName, toggleButtonClassNames, useToggleButtonStyles_unstable } from './useToggleButtonStyles'; diff --git a/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts b/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts index 8fe789abcef51..be2c9536d80a9 100644 --- a/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts +++ b/packages/react-button/src/components/ToggleButton/useToggleButtonStyles.ts @@ -1,16 +1,18 @@ import { shorthands, mergeClasses, makeStyles } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; import { useButtonStyles_unstable } from '../Button/useButtonStyles'; +import type { SlotClassNames } from '@fluentui/react-utilities'; import type { ButtonSlots } from '../Button/Button.types'; import type { ToggleButtonState } from './ToggleButton.types'; -export const toggleButtonClassNames: { - [SlotName in keyof ButtonSlots]-?: string; -} = { +export const toggleButtonClassNames: SlotClassNames = { root: 'fui-ToggleButton', icon: 'fui-ToggleButton__icon', }; +// TODO temporary export to pass conformance test. +export const toggleButtonClassName = toggleButtonClassNames.root; + const useCheckedStyles = makeStyles({ // Base styles base: { From b85aafc447a41ba08ea56c1139b6119aa2d912a4 Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Thu, 3 Mar 2022 14:05:28 -0800 Subject: [PATCH 4/4] Updating API. --- packages/react-button/etc/react-button.api.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react-button/etc/react-button.api.md b/packages/react-button/etc/react-button.api.md index 60f2a229714f6..4de468a00f3ec 100644 --- a/packages/react-button/etc/react-button.api.md +++ b/packages/react-button/etc/react-button.api.md @@ -95,6 +95,9 @@ export const renderSplitButton_unstable: (state: SplitButtonState) => JSX.Elemen // @public export const SplitButton: ForwardRefComponent; +// @public (undocumented) +export const splitButtonClassName: string; + // @public (undocumented) export const splitButtonClassNames: SlotClassNames; @@ -114,6 +117,9 @@ export type SplitButtonState = ComponentState & Omit; +// @public (undocumented) +export const toggleButtonClassName: string; + // @public (undocumented) export const toggleButtonClassNames: SlotClassNames;