uncommented CustomStyleHooks

Author: ValentinaKozlova

change/@fluentui-react-shared-contexts-6a78f307-6389-41f7-8922-48efe64902ba.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat(react-color-picker): added CustomStyleHooks",
+  "packageName": "@fluentui/react-shared-contexts",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-color-picker/library/src/components/AlphaSlider/AlphaSlider.tsx

@@ -4,24 +4,17 @@ import { useAlphaSlider_unstable } from './useAlphaSlider';
 import { renderAlphaSlider_unstable } from './renderAlphaSlider';
 import { useAlphaSliderStyles_unstable } from './useAlphaSliderStyles.styles';
 import type { AlphaSliderProps } from './AlphaSlider.types';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
- * AlphaSlider component - TODO: add more docs
+ * AlphaSlider component
  */
 export const AlphaSlider: ForwardRefComponent<AlphaSliderProps> = React.forwardRef((props, ref) => {
   const state = useAlphaSlider_unstable(props, ref);
 
   useAlphaSliderStyles_unstable(state);
 
-  /**
-   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md
-   *
-   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),
-   *      - uncomment this line
-   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}
-   *      - verify that custom global style override works for your component
-   */
-  // useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);
+  useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);
 
   return renderAlphaSlider_unstable(state);
 });

packages/react-components/react-color-picker/library/src/components/ColorArea/ColorArea.tsx

@@ -4,6 +4,7 @@ import { useColorArea_unstable } from './useColorArea';
 import { renderColorArea_unstable } from './renderColorArea';
 import { useColorAreaStyles_unstable } from './useColorAreaStyles.styles';
 import type { ColorAreaProps } from './ColorArea.types';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * ColorArea component
@@ -12,16 +13,7 @@ export const ColorArea: ForwardRefComponent<ColorAreaProps> = React.forwardRef((
   const state = useColorArea_unstable(props, ref);
 
   useColorAreaStyles_unstable(state);
-
-  /**
-   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md
-   *
-   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),
-   *      - uncomment this line
-   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}
-   *      - verify that custom global style override works for your component
-   */
-  // useCustomStyleHook_unstable('useColorAreaStyles_unstable')(state);
+  useCustomStyleHook_unstable('useColorAreaStyles_unstable')(state);
 
   return renderColorArea_unstable(state);
 });

packages/react-components/react-color-picker/library/src/components/ColorPicker/ColorPicker.tsx

@@ -5,6 +5,7 @@ import { renderColorPicker_unstable } from './renderColorPicker';
 import { useColorPickerStyles_unstable } from './useColorPickerStyles.styles';
 import type { ColorPickerProps } from './ColorPicker.types';
 import { useColorPickerContextValues } from '../../contexts/colorPicker';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
  * ColorPicker component
@@ -14,16 +15,7 @@ export const ColorPicker: ForwardRefComponent<ColorPickerProps> = React.forwardR
   const contextValues = useColorPickerContextValues(state);
 
   useColorPickerStyles_unstable(state);
-
-  /**
-   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md
-   *
-   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),
-   *      - uncomment this line
-   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}
-   *      - verify that custom global style override works for your component
-   */
-  // useCustomStyleHook_unstable('useColorPickerStyles_unstable')(state);
+  useCustomStyleHook_unstable('useColorPickerStyles_unstable')(state);
 
   return renderColorPicker_unstable(state, contextValues);
 });

packages/react-components/react-color-picker/library/src/components/ColorSlider/ColorSlider.tsx

@@ -4,24 +4,16 @@ import { useColorSlider_unstable } from './useColorSlider';
 import { renderColorSlider_unstable } from './renderColorSlider';
 import { useColorSliderStyles_unstable } from './useColorSliderStyles.styles';
 import type { ColorSliderProps } from './ColorSlider.types';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
 
 /**
- * ColorSlider component - TODO: add more docs
+ * ColorSlider component
  */
 export const ColorSlider: ForwardRefComponent<ColorSliderProps> = React.forwardRef((props, ref) => {
   const state = useColorSlider_unstable(props, ref);
 
   useColorSliderStyles_unstable(state);
-
-  /**
-   * @see https://github.com/microsoft/fluentui/blob/master/docs/react-v9/contributing/rfcs/react-components/convergence/custom-styling.md
-   *
-   * TODO: 💡 once package will become stable (PR which will be part of promoting PREVIEW package to STABLE),
-   *      - uncomment this line
-   *      - update types {@link file://./../../../../../../../packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts#CustomStyleHooksContextValue}
-   *      - verify that custom global style override works for your component
-   */
-  // useCustomStyleHook_unstable('useColorSliderStyles_unstable')(state);
+  useCustomStyleHook_unstable('useColorSliderStyles_unstable')(state);
 
   return renderColorSlider_unstable(state);
 });

packages/react-components/react-shared-contexts/library/src/CustomStyleHooksContext/CustomStyleHooksContext.ts

@@ -166,6 +166,10 @@ export type CustomStyleHooksContextValue = Partial<{
   useCarouselNavButtonStyles_unstable: CustomStyleHook;
   useCarouselNavContainerStyles_unstable: CustomStyleHook;
   useCarouselNavImageButtonStyles_unstable: CustomStyleHook;
+  useAlphaSliderStyles_unstable: CustomStyleHook;
+  useColorAreaStyles_unstable: CustomStyleHook;
+  useColorPickerStyles_unstable: CustomStyleHook;
+  useColorSliderStyles_unstable: CustomStyleHook;
 }>;
 
 /**