feat(react-color-picker): release ColorPicker as 9.0.0 stable

Author: ValentinaKozlova

.github/CODEOWNERS

@@ -323,8 +323,8 @@ packages/react-components/react-motion-components-preview/library @microsoft/flu
 packages/react-components/react-motion-components-preview/stories @microsoft/fluent-motion-framework
 packages/react-components/react-utilities-compat/library @microsoft/cxe-prg
 packages/react-components/react-utilities-compat/stories @microsoft/cxe-prg
-packages/react-components/react-color-picker-preview/library @microsoft/cxe-prg
-packages/react-components/react-color-picker-preview/stories @microsoft/cxe-prg
+packages/react-components/react-color-picker/library @microsoft/cxe-prg
+packages/react-components/react-color-picker/stories @microsoft/cxe-prg
 # <%= NX-CODEOWNER-PLACEHOLDER %>
 
 ## Components

apps/perf-test-react-components/package.json

@@ -21,7 +21,6 @@
     "@fluentui/scripts-perf-test-flamegrill": "*",
     "@fluentui/react-avatar": "*",
     "@fluentui/react-button": "*",
-    "@fluentui/react-color-picker-preview": "*",
     "@fluentui/react-components": "*",
     "@fluentui/react-field": "*",
     "@fluentui/react-persona": "*",

apps/perf-test-react-components/src/scenarios/ColorPicker.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ColorPicker, ColorArea, ColorSlider, AlphaSlider } from '@fluentui/react-color-picker-preview';
+import { ColorPicker, ColorArea, ColorSlider, AlphaSlider } from '@fluentui/react-components';
 import { FluentProvider } from '@fluentui/react-provider';
 import { webLightTheme } from '@fluentui/react-theme';
 

apps/public-docsite-v9/package.json

@@ -44,7 +44,6 @@
     "react-hook-form": "^5.7.2",
     "@fluentui/react-nav-preview": "*",
     "@fluentui/react-motion-components-preview": "*",
-    "@fluentui/react-icons-compat": "*",
-    "@fluentui/react-color-picker-preview": "*"
+    "@fluentui/react-icons-compat": "*"
   }
 }

apps/vr-tests-react-components/package.json

@@ -27,7 +27,7 @@
     "@fluentui/react-card": "*",
     "@fluentui/react-charts-preview": "*",
     "@fluentui/react-checkbox": "*",
-    "@fluentui/react-color-picker-preview": "*",
+    "@fluentui/react-color-picker": "*",
     "@fluentui/react-combobox": "*",
     "@fluentui/react-context-selector": "*",
     "@fluentui/react-datepicker-compat": "*",

apps/vr-tests-react-components/src/stories/ColorPicker/ColorPicker.stories.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Meta } from '@storybook/react';
-import { ColorPicker, ColorSlider, AlphaSlider } from '@fluentui/react-color-picker-preview';
+import { ColorPicker, ColorSlider, AlphaSlider } from '@fluentui/react-color-picker';
 import { SampleColorPicker } from './utils';
 import { Steps } from 'storywright';
 

apps/vr-tests-react-components/src/stories/ColorPicker/utils.tsx

@@ -1,11 +1,5 @@
 import * as React from 'react';
-import {
-  ColorPicker,
-  ColorArea,
-  AlphaSlider,
-  ColorSlider,
-  type ColorPickerProps,
-} from '@fluentui/react-color-picker-preview';
+import { ColorPicker, ColorArea, AlphaSlider, ColorSlider, type ColorPickerProps } from '@fluentui/react-color-picker';
 import { makeStyles } from '@griffel/react';
 
 const useStyles = makeStyles({

change/@fluentui-react-color-picker-4fba51df-d53c-4e1e-9f55-67107d298f67.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: release stable",
+  "packageName": "@fluentui/react-color-picker",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-components-05f1b330-fed9-4a1b-ad9c-c5d3b2602ef6.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add @fluentui/react-color-picker to suite",
+  "packageName": "@fluentui/react-components",
+  "email": "email not defined",
+  "dependentChangeType": "patch"
+}

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-preview/library/src/components/AlphaSlider/AlphaSlider.tsx

@@ -1,4 +1,4 @@
-@fluentui/react-color-picker-preview
+@fluentui/react-color-picker
 
 Copyright (c) Microsoft Corporation
 

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

@@ -1,4 +1,4 @@
-import { ColorArea } from '@fluentui/react-color-picker-preview';
+import { ColorArea } from '@fluentui/react-color-picker';
 
 console.log(ColorArea);
 

packages/react-components/react-color-picker-preview/stories/README.md

@@ -1,4 +1,4 @@
-import { ColorPicker } from '@fluentui/react-color-picker-preview';
+import { ColorPicker } from '@fluentui/react-color-picker';
 
 console.log(ColorPicker);
 

packages/react-components/react-color-picker-preview/library/.babelrc.json packages/react-components/react-color-picker/library/.babelrc.json

@@ -1,4 +1,4 @@
-import { ColorSlider } from '@fluentui/react-color-picker-preview';
+import { ColorSlider } from '@fluentui/react-color-picker';
 
 console.log(ColorSlider);
 

packages/react-components/react-color-picker-preview/library/.eslintrc.json packages/react-components/react-color-picker/library/.eslintrc.json

@@ -23,7 +23,7 @@ if (swcJestConfig.swcrc === undefined) {
  * @type {import('@jest/types').Config.InitialOptions}
  */
 module.exports = {
-  displayName: 'react-color-picker-preview',
+  displayName: 'react-color-picker',
   preset: '../../../../jest.preset.js',
   transform: {
     '^.+\\.tsx?$': ['@swc/jest', swcJestConfig],

packages/react-components/react-color-picker-preview/library/.swcrc packages/react-components/react-color-picker/library/.swcrc

@@ -1,6 +1,6 @@
 {
-  "name": "@fluentui/react-color-picker-preview",
-  "version": "0.3.0",
+  "name": "@fluentui/react-color-picker",
+  "version": "9.0.0",
   "description": "ColorPicker component for Fluent UI React.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",

packages/react-components/react-color-picker-preview/library/CHANGELOG.json packages/react-components/react-color-picker/library/CHANGELOG.json

@@ -1,8 +1,8 @@
 {
-  "name": "react-color-picker-preview",
+  "name": "react-color-picker",
   "$schema": "../../../../node_modules/nx/schemas/project-schema.json",
   "projectType": "library",
-  "sourceRoot": "packages/react-components/react-color-picker-preview/library/src",
+  "sourceRoot": "packages/react-components/react-color-picker/library/src",
   "tags": ["platform:web", "vNext"],
   "implicitDependencies": []
 }

packages/react-components/react-color-picker-preview/library/CHANGELOG.md packages/react-components/react-color-picker/library/CHANGELOG.md

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+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
+ */
+export const AlphaSlider: ForwardRefComponent<AlphaSliderProps> = React.forwardRef((props, ref) => {
+  const state = useAlphaSlider_unstable(props, ref);
+
+  useAlphaSliderStyles_unstable(state);
+
+  useCustomStyleHook_unstable('useAlphaSliderStyles_unstable')(state);
+
+  return renderAlphaSlider_unstable(state);
+});
+
+AlphaSlider.displayName = 'AlphaSlider';

packages/react-components/react-color-picker-preview/library/LICENSE packages/react-components/react-color-picker/library/LICENSE

@@ -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-preview/library/README.md packages/react-components/react-color-picker/library/README.md

@@ -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);
 });