From f6545d613bfa68654d7ec5ee159462e41e128701 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Tue, 15 Apr 2025 13:59:19 -0700 Subject: [PATCH 1/2] Update advanced styling docsite to recommend using getSlotClassNameProp_unstable --- .../AdvancedStylingTechniques.stories.mdx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/apps/public-docsite-v9/src/Concepts/AdvancedStylingTechniques.stories.mdx b/apps/public-docsite-v9/src/Concepts/AdvancedStylingTechniques.stories.mdx index e373162183a355..59da29f052afa4 100644 --- a/apps/public-docsite-v9/src/Concepts/AdvancedStylingTechniques.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/AdvancedStylingTechniques.stories.mdx @@ -49,10 +49,12 @@ export function App() { } ``` -A little scaffodling is required to get here first. Define a `useFancyButtonStyles.ts`, and calculate the style similar to how you would for any other Fluent component: +A little scaffolding is required to get here first. Define a `useFancyButtonStyles.ts`, and calculate the style similar to how you would for any other Fluent component. + +> ⚠️ Custom style hooks must also append the slot's original className prop as returned by `getSlotClassNameProp_unstable`, after the custom styles. This ensures that the className prop added by the user will take precedence over custom styles. ```ts -import { makeStyles, type ButtonState } from '@fluentui/react-components'; +import { getSlotClassNameProp_unstable, makeStyles, type ButtonState } from '@fluentui/react-components'; const useStyles = makeStyles({ root: { @@ -70,10 +72,18 @@ const useStyles = makeStyles({ export const useFancyButtonStyles = (state: unknown) => { const buttonState = state as ButtonState; const styles = useStyles(); - buttonState.root.className = mergeClasses(buttonState.root.className, styles.root); + buttonState.root.className = mergeClasses( + buttonState.root.className, + styles.root, + getSlotClassNameProp_unstable(buttonState.root), + ); if (buttonState.icon) { - buttonState.icon.className = mergeClasses(buttonState.icon.className, styles.icon); + buttonState.icon.className = mergeClasses( + buttonState.icon.className, + styles.icon, + getSlotClassNameProp_unstable(buttonState.icon), + ); } }; ``` From b7e18f84ad4dea308219cbb619c8c353adeec8ff Mon Sep 17 00:00:00 2001 From: Ben Howell <48106640+behowell@users.noreply.github.com> Date: Mon, 5 May 2025 15:47:57 -0700 Subject: [PATCH 2/2] Update AdvancedStylingTechniques.stories.mdx --- .../src/Concepts/AdvancedStylingTechniques.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/public-docsite-v9/src/Concepts/AdvancedStylingTechniques.stories.mdx b/apps/public-docsite-v9/src/Concepts/AdvancedStylingTechniques.stories.mdx index 59da29f052afa4..73128f99f6cb9c 100644 --- a/apps/public-docsite-v9/src/Concepts/AdvancedStylingTechniques.stories.mdx +++ b/apps/public-docsite-v9/src/Concepts/AdvancedStylingTechniques.stories.mdx @@ -51,7 +51,7 @@ export function App() { A little scaffolding is required to get here first. Define a `useFancyButtonStyles.ts`, and calculate the style similar to how you would for any other Fluent component. -> ⚠️ Custom style hooks must also append the slot's original className prop as returned by `getSlotClassNameProp_unstable`, after the custom styles. This ensures that the className prop added by the user will take precedence over custom styles. +> ⚠️ Custom style hooks must also append the slot's original className prop as returned by `getSlotClassNameProp_unstable`, after the custom styles. This ensures that the className prop added by the user will take precedence over custom styles. See [microsoft/fluentui#34166](https://github.com/microsoft/fluentui/pull/34166) for a detailed explanation. ```ts import { getSlotClassNameProp_unstable, makeStyles, type ButtonState } from '@fluentui/react-components';