diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index c77082ac1b8be8..28afa3f5b3aeb5 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -242,7 +242,7 @@ packages/react-components/react-nav-preview @microsoft/cxe-red @mltejera packages/react-components/react-motion-preview @microsoft/cxe-prg @marcosmoura packages/react-components/react-message-bar @microsoft/teams-prg packages/react-components/react-rating @microsoft/cxe-red @tomi-msft -packages/react-components/react-swatch-picker-preview @microsoft/cxe-prg +packages/react-components/react-swatch-picker @microsoft/cxe-prg packages/react-components/react-calendar-compat @microsoft/cxe-red @sopranopillow packages/react-components/react-infolabel @microsoft/cxe-red @sopranopillow packages/react-components/react-list-preview @microsoft/teams-prg diff --git a/apps/perf-test-react-components/package.json b/apps/perf-test-react-components/package.json index afbed1bce4688a..9779e65a3b4c83 100644 --- a/apps/perf-test-react-components/package.json +++ b/apps/perf-test-react-components/package.json @@ -21,11 +21,11 @@ "@fluentui/scripts-perf-test-flamegrill": "*", "@fluentui/react-avatar": "*", "@fluentui/react-button": "*", + "@fluentui/react-components": "*", "@fluentui/react-field": "*", "@fluentui/react-persona": "*", "@fluentui/react-provider": "*", "@fluentui/react-spinbutton": "*", - "@fluentui/react-swatch-picker-preview": "*", "@fluentui/react-theme": "*", "@griffel/core": "^1.14.1", "@microsoft/load-themed-styles": "^1.10.26", diff --git a/apps/perf-test-react-components/src/scenarios/SwatchPicker.tsx b/apps/perf-test-react-components/src/scenarios/SwatchPicker.tsx index f38eae0b622606..0c87e712589ad5 100644 --- a/apps/perf-test-react-components/src/scenarios/SwatchPicker.tsx +++ b/apps/perf-test-react-components/src/scenarios/SwatchPicker.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { SwatchPicker, ColorSwatch, ImageSwatch, EmptySwatch } from '@fluentui/react-swatch-picker-preview'; +import { SwatchPicker, ColorSwatch, ImageSwatch, EmptySwatch } from '@fluentui/react-components'; import { FluentProvider } from '@fluentui/react-provider'; import { webLightTheme } from '@fluentui/react-theme'; diff --git a/apps/public-docsite-v9/package.json b/apps/public-docsite-v9/package.json index f0eb098e4708ee..91bc58db89e8b7 100644 --- a/apps/public-docsite-v9/package.json +++ b/apps/public-docsite-v9/package.json @@ -35,7 +35,6 @@ "@fluentui/react-storybook-addon": "*", "@fluentui/react-storybook-addon-export-to-sandbox": "*", "@fluentui/theme-designer": "*", - "@fluentui/react-swatch-picker-preview": "*", "@fluentui/react-motions-preview": "*", "@fluentui/react-timepicker-compat": "*", "@griffel/react": "^1.5.14", diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index b8c5d050afd07b..768c37b26ead3b 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -57,7 +57,7 @@ "@fluentui/react-spinbutton": "*", "@fluentui/react-storybook-addon": "*", "@fluentui/react-storybook-addon-export-to-sandbox": "*", - "@fluentui/react-swatch-picker-preview": "*", + "@fluentui/react-swatch-picker": "*", "@fluentui/react-switch": "*", "@fluentui/react-table": "*", "@fluentui/react-tabs": "*", diff --git a/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx b/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx index 4bd6cc1d08ec93..9ad0bfa00b47eb 100644 --- a/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/SwatchPicker/SwatchPicker.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { SwatchPicker } from '@fluentui/react-swatch-picker-preview'; +import { SwatchPicker } from '@fluentui/react-swatch-picker'; import { SampleSwatchPickerColors, SampleSwatchPickerImages, SampleSwatchPickerGrid, steps } from './utils'; import { ComponentMeta } from '@storybook/react'; import { getStoryVariant, DARK_MODE, HIGH_CONTRAST, RTL, withStoryWrightSteps } from '../../utilities'; diff --git a/apps/vr-tests-react-components/src/stories/SwatchPicker/utils.tsx b/apps/vr-tests-react-components/src/stories/SwatchPicker/utils.tsx index 0af7cb4cb0a245..d39f7b8378a07e 100644 --- a/apps/vr-tests-react-components/src/stories/SwatchPicker/utils.tsx +++ b/apps/vr-tests-react-components/src/stories/SwatchPicker/utils.tsx @@ -7,7 +7,7 @@ import { ImageSwatch, EmptySwatch, SwatchPickerRow, -} from '@fluentui/react-swatch-picker-preview'; +} from '@fluentui/react-swatch-picker'; import { HeartRegular } from '@fluentui/react-icons'; export const steps = new Steps() diff --git a/change/@fluentui-react-components-c7509b86-3b3a-4a7b-a8e9-67a9ca99fae1.json b/change/@fluentui-react-components-c7509b86-3b3a-4a7b-a8e9-67a9ca99fae1.json new file mode 100644 index 00000000000000..a7a7f502eef94d --- /dev/null +++ b/change/@fluentui-react-components-c7509b86-3b3a-4a7b-a8e9-67a9ca99fae1.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat(react-swatch-picker): release SwatchPicker as 9.0.0 stable", + "packageName": "@fluentui/react-components", + "email": "vkozlova@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-provider-4c5f81cb-2f86-4d2b-9610-a7b36cf3f989.json b/change/@fluentui-react-provider-4c5f81cb-2f86-4d2b-9610-a7b36cf3f989.json new file mode 100644 index 00000000000000..8afc8d756578f9 --- /dev/null +++ b/change/@fluentui-react-provider-4c5f81cb-2f86-4d2b-9610-a7b36cf3f989.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat(react-swatch-picker): added CustomStyleHooks", + "packageName": "@fluentui/react-provider", + "email": "vkozlova@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-shared-contexts-583d6a98-f67f-4d90-83c4-e2c9f9eb6652.json b/change/@fluentui-react-shared-contexts-583d6a98-f67f-4d90-83c4-e2c9f9eb6652.json new file mode 100644 index 00000000000000..4020349541308c --- /dev/null +++ b/change/@fluentui-react-shared-contexts-583d6a98-f67f-4d90-83c4-e2c9f9eb6652.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat(react-swatch-picker): added CustomStyleHooks", + "packageName": "@fluentui/react-shared-contexts", + "email": "vkozlova@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-swatch-picker-4aa011d6-1b27-43e1-b749-958a7ca024b8.json b/change/@fluentui-react-swatch-picker-4aa011d6-1b27-43e1-b749-958a7ca024b8.json new file mode 100644 index 00000000000000..a3bf0c639df660 --- /dev/null +++ b/change/@fluentui-react-swatch-picker-4aa011d6-1b27-43e1-b749-958a7ca024b8.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat(react-swatch-picker): release SwatchPicker as 9.0.0 stable", + "packageName": "@fluentui/react-swatch-picker", + "email": "vkozlova@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-components/etc/react-components.api.md b/packages/react-components/react-components/etc/react-components.api.md index d4b154a9d99d07..33b9cc286cece4 100644 --- a/packages/react-components/react-components/etc/react-components.api.md +++ b/packages/react-components/react-components/etc/react-components.api.md @@ -157,6 +157,11 @@ import { CheckboxProps } from '@fluentui/react-checkbox'; import { CheckboxSlots } from '@fluentui/react-checkbox'; import { CheckboxState } from '@fluentui/react-checkbox'; import { ColorPaletteTokens } from '@fluentui/react-theme'; +import { ColorSwatch } from '@fluentui/react-swatch-picker'; +import { colorSwatchClassNames } from '@fluentui/react-swatch-picker'; +import { ColorSwatchProps } from '@fluentui/react-swatch-picker'; +import { ColorSwatchSlots } from '@fluentui/react-swatch-picker'; +import { ColorSwatchState } from '@fluentui/react-swatch-picker'; import { ColorTokens } from '@fluentui/react-theme'; import { ColumnIdContextProvider } from '@fluentui/react-table'; import { Combobox } from '@fluentui/react-combobox'; @@ -324,6 +329,11 @@ import { DropdownProps } from '@fluentui/react-combobox'; import { DropdownSlots } from '@fluentui/react-combobox'; import { DropdownState } from '@fluentui/react-combobox'; import { DurationTokens } from '@fluentui/react-theme'; +import { EmptySwatch } from '@fluentui/react-swatch-picker'; +import { emptySwatchClassNames } from '@fluentui/react-swatch-picker'; +import { EmptySwatchProps } from '@fluentui/react-swatch-picker'; +import { EmptySwatchSlots } from '@fluentui/react-swatch-picker'; +import { EmptySwatchState } from '@fluentui/react-swatch-picker'; import { Field } from '@fluentui/react-field'; import { fieldClassNames } from '@fluentui/react-field'; import { FieldContextProvider } from '@fluentui/react-field'; @@ -372,6 +382,11 @@ import { imageClassNames } from '@fluentui/react-image'; import { ImageProps } from '@fluentui/react-image'; import { ImageSlots } from '@fluentui/react-image'; import { ImageState } from '@fluentui/react-image'; +import { ImageSwatch } from '@fluentui/react-swatch-picker'; +import { imageSwatchClassNames } from '@fluentui/react-swatch-picker'; +import { ImageSwatchProps } from '@fluentui/react-swatch-picker'; +import { ImageSwatchSlots } from '@fluentui/react-swatch-picker'; +import { ImageSwatchState } from '@fluentui/react-swatch-picker'; import { InfoLabel } from '@fluentui/react-infolabel'; import { infoLabelClassNames } from '@fluentui/react-infolabel'; import { InfoLabelProps } from '@fluentui/react-infolabel'; @@ -677,6 +692,7 @@ import { renderCardFooter_unstable } from '@fluentui/react-card'; import { renderCardHeader_unstable } from '@fluentui/react-card'; import { renderCardPreview_unstable } from '@fluentui/react-card'; import { renderCheckbox_unstable } from '@fluentui/react-checkbox'; +import { renderColorSwatch_unstable } from '@fluentui/react-swatch-picker'; import { renderCombobox_unstable } from '@fluentui/react-combobox'; import { renderCompoundButton_unstable } from '@fluentui/react-button'; import { renderDataGrid_unstable } from '@fluentui/react-table'; @@ -701,11 +717,13 @@ import { renderDrawerHeader_unstable } from '@fluentui/react-drawer'; import { renderDrawerHeaderNavigation_unstable } from '@fluentui/react-drawer'; import { renderDrawerHeaderTitle_unstable } from '@fluentui/react-drawer'; import { renderDropdown_unstable } from '@fluentui/react-combobox'; +import { renderEmptySwatch_unstable } from '@fluentui/react-swatch-picker'; import { RendererProvider } from '@griffel/react'; import { renderField_unstable } from '@fluentui/react-field'; import { renderFlatTree_unstable } from '@fluentui/react-tree'; import { renderFluentProvider_unstable } from '@fluentui/react-provider'; import { renderImage_unstable } from '@fluentui/react-image'; +import { renderImageSwatch_unstable } from '@fluentui/react-swatch-picker'; import { renderInfoLabel_unstable } from '@fluentui/react-infolabel'; import { renderInlineDrawer_unstable } from '@fluentui/react-drawer'; import { renderInput_unstable } from '@fluentui/react-input'; @@ -756,6 +774,9 @@ import { renderSlider_unstable } from '@fluentui/react-slider'; import { renderSpinButton_unstable } from '@fluentui/react-spinbutton'; import { renderSpinner_unstable } from '@fluentui/react-spinner'; import { renderSplitButton_unstable } from '@fluentui/react-button'; +import { renderSwatchPicker_unstable } from '@fluentui/react-swatch-picker'; +import { renderSwatchPickerGrid } from '@fluentui/react-swatch-picker'; +import { renderSwatchPickerRow_unstable } from '@fluentui/react-swatch-picker'; import { renderSwitch_unstable } from '@fluentui/react-switch'; import { renderTab_unstable } from '@fluentui/react-tabs'; import { renderTable_unstable } from '@fluentui/react-table'; @@ -894,6 +915,25 @@ import { subtitle2ClassNames } from '@fluentui/react-text'; import { Subtitle2Stronger } from '@fluentui/react-text'; import { subtitle2StrongerClassNames } from '@fluentui/react-text'; import { SubtreeContextValue } from '@fluentui/react-tree'; +import { swatchCSSVars } from '@fluentui/react-swatch-picker'; +import { SwatchPicker } from '@fluentui/react-swatch-picker'; +import { swatchPickerClassNames } from '@fluentui/react-swatch-picker'; +import { swatchPickerContextDefaultValue } from '@fluentui/react-swatch-picker'; +import { SwatchPickerContextValue } from '@fluentui/react-swatch-picker'; +import { SwatchPickerContextValues } from '@fluentui/react-swatch-picker'; +import { SwatchPickerGridProps } from '@fluentui/react-swatch-picker'; +import { SwatchPickerOnSelectEventHandler } from '@fluentui/react-swatch-picker'; +import { SwatchPickerOnSelectionChangeData } from '@fluentui/react-swatch-picker'; +import { SwatchPickerProps } from '@fluentui/react-swatch-picker'; +import { SwatchPickerProvider } from '@fluentui/react-swatch-picker'; +import { SwatchPickerRow } from '@fluentui/react-swatch-picker'; +import { swatchPickerRowClassNames } from '@fluentui/react-swatch-picker'; +import { SwatchPickerRowProps } from '@fluentui/react-swatch-picker'; +import { SwatchPickerRowSlots } from '@fluentui/react-swatch-picker'; +import { SwatchPickerRowState } from '@fluentui/react-swatch-picker'; +import { SwatchPickerSlots } from '@fluentui/react-swatch-picker'; +import { SwatchPickerState } from '@fluentui/react-swatch-picker'; +import { SwatchProps } from '@fluentui/react-swatch-picker'; import { Switch } from '@fluentui/react-switch'; import { switchClassNames } from '@fluentui/react-switch'; import { SwitchOnChangeData } from '@fluentui/react-switch'; @@ -1294,6 +1334,8 @@ import { useCardStyles_unstable } from '@fluentui/react-card'; import { useCheckbox_unstable } from '@fluentui/react-checkbox'; import { useCheckboxStyles_unstable } from '@fluentui/react-checkbox'; import { useCheckmarkStyles_unstable } from '@fluentui/react-menu'; +import { useColorSwatch_unstable } from '@fluentui/react-swatch-picker'; +import { useColorSwatchStyles_unstable } from '@fluentui/react-swatch-picker'; import { useColumnIdContext } from '@fluentui/react-table'; import { useCombobox_unstable } from '@fluentui/react-combobox'; import { useComboboxContextValues } from '@fluentui/react-combobox'; @@ -1352,6 +1394,8 @@ import { useDrawerHeaderTitleStyles_unstable } from '@fluentui/react-drawer'; import { useDrawerStyles_unstable } from '@fluentui/react-drawer'; import { useDropdown_unstable } from '@fluentui/react-combobox'; import { useDropdownStyles_unstable } from '@fluentui/react-combobox'; +import { useEmptySwatch_unstable } from '@fluentui/react-swatch-picker'; +import { useEmptySwatchStyles_unstable } from '@fluentui/react-swatch-picker'; import { useEventCallback } from '@fluentui/react-utilities'; import { useField_unstable } from '@fluentui/react-field'; import { useFieldContext_unstable } from '@fluentui/react-field'; @@ -1376,6 +1420,8 @@ import { useHeadlessFlatTree_unstable } from '@fluentui/react-tree'; import { useId } from '@fluentui/react-utilities'; import { useImage_unstable } from '@fluentui/react-image'; import { useImageStyles_unstable } from '@fluentui/react-image'; +import { useImageSwatch_unstable } from '@fluentui/react-swatch-picker'; +import { useImageSwatchStyles_unstable } from '@fluentui/react-swatch-picker'; import { useInfoLabel_unstable } from '@fluentui/react-infolabel'; import { useInfoLabelStyles_unstable } from '@fluentui/react-infolabel'; import { useInlineDrawer_unstable } from '@fluentui/react-drawer'; @@ -1514,6 +1560,12 @@ import { useSpinnerStyles_unstable } from '@fluentui/react-spinner'; import { useSplitButton_unstable } from '@fluentui/react-button'; import { useSplitButtonStyles_unstable } from '@fluentui/react-button'; import { useSubtreeContext_unstable } from '@fluentui/react-tree'; +import { useSwatchPicker_unstable } from '@fluentui/react-swatch-picker'; +import { useSwatchPickerContextValue_unstable } from '@fluentui/react-swatch-picker'; +import { useSwatchPickerContextValues } from '@fluentui/react-swatch-picker'; +import { useSwatchPickerRow_unstable } from '@fluentui/react-swatch-picker'; +import { useSwatchPickerRowStyles_unstable } from '@fluentui/react-swatch-picker'; +import { useSwatchPickerStyles_unstable } from '@fluentui/react-swatch-picker'; import { useSwitch_unstable } from '@fluentui/react-switch'; import { useSwitchStyles_unstable } from '@fluentui/react-switch'; import { useTab_unstable } from '@fluentui/react-tabs'; @@ -1954,6 +2006,16 @@ export { CheckboxState } export { ColorPaletteTokens } +export { ColorSwatch } + +export { colorSwatchClassNames } + +export { ColorSwatchProps } + +export { ColorSwatchSlots } + +export { ColorSwatchState } + export { ColorTokens } export { ColumnIdContextProvider } @@ -2288,6 +2350,16 @@ export { DropdownState } export { DurationTokens } +export { EmptySwatch } + +export { emptySwatchClassNames } + +export { EmptySwatchProps } + +export { EmptySwatchSlots } + +export { EmptySwatchState } + export { Field } export { fieldClassNames } @@ -2384,6 +2456,16 @@ export { ImageSlots } export { ImageState } +export { ImageSwatch } + +export { imageSwatchClassNames } + +export { ImageSwatchProps } + +export { ImageSwatchSlots } + +export { ImageSwatchState } + export { InfoLabel } export { infoLabelClassNames } @@ -2994,6 +3076,8 @@ export { renderCardPreview_unstable } export { renderCheckbox_unstable } +export { renderColorSwatch_unstable } + export { renderCombobox_unstable } export { renderCompoundButton_unstable } @@ -3042,6 +3126,8 @@ export { renderDrawerHeaderTitle_unstable } export { renderDropdown_unstable } +export { renderEmptySwatch_unstable } + export { RendererProvider } export { renderField_unstable } @@ -3052,6 +3138,8 @@ export { renderFluentProvider_unstable } export { renderImage_unstable } +export { renderImageSwatch_unstable } + export { renderInfoLabel_unstable } export { renderInlineDrawer_unstable } @@ -3152,6 +3240,12 @@ export { renderSpinner_unstable } export { renderSplitButton_unstable } +export { renderSwatchPicker_unstable } + +export { renderSwatchPickerGrid } + +export { renderSwatchPickerRow_unstable } + export { renderSwitch_unstable } export { renderTab_unstable } @@ -3428,6 +3522,44 @@ export { subtitle2StrongerClassNames } export { SubtreeContextValue } +export { swatchCSSVars } + +export { SwatchPicker } + +export { swatchPickerClassNames } + +export { swatchPickerContextDefaultValue } + +export { SwatchPickerContextValue } + +export { SwatchPickerContextValues } + +export { SwatchPickerGridProps } + +export { SwatchPickerOnSelectEventHandler } + +export { SwatchPickerOnSelectionChangeData } + +export { SwatchPickerProps } + +export { SwatchPickerProvider } + +export { SwatchPickerRow } + +export { swatchPickerRowClassNames } + +export { SwatchPickerRowProps } + +export { SwatchPickerRowSlots } + +export { SwatchPickerRowState } + +export { SwatchPickerSlots } + +export { SwatchPickerState } + +export { SwatchProps } + export { Switch } export { switchClassNames } @@ -4228,6 +4360,10 @@ export { useCheckboxStyles_unstable } export { useCheckmarkStyles_unstable } +export { useColorSwatch_unstable } + +export { useColorSwatchStyles_unstable } + export { useColumnIdContext } export { useCombobox_unstable } @@ -4344,6 +4480,10 @@ export { useDropdown_unstable } export { useDropdownStyles_unstable } +export { useEmptySwatch_unstable } + +export { useEmptySwatchStyles_unstable } + export { useEventCallback } export { useField_unstable } @@ -4392,6 +4532,10 @@ export { useImage_unstable } export { useImageStyles_unstable } +export { useImageSwatch_unstable } + +export { useImageSwatchStyles_unstable } + export { useInfoLabel_unstable } export { useInfoLabelStyles_unstable } @@ -4668,6 +4812,18 @@ export { useSplitButtonStyles_unstable } export { useSubtreeContext_unstable } +export { useSwatchPicker_unstable } + +export { useSwatchPickerContextValue_unstable } + +export { useSwatchPickerContextValues } + +export { useSwatchPickerRow_unstable } + +export { useSwatchPickerRowStyles_unstable } + +export { useSwatchPickerStyles_unstable } + export { useSwitch_unstable } export { useSwitchStyles_unstable } diff --git a/packages/react-components/react-components/package.json b/packages/react-components/react-components/package.json index 8f46d87ddc7368..5164521d283207 100644 --- a/packages/react-components/react-components/package.json +++ b/packages/react-components/react-components/package.json @@ -65,6 +65,7 @@ "@fluentui/react-slider": "^9.1.82", "@fluentui/react-spinbutton": "^9.2.75", "@fluentui/react-spinner": "^9.4.7", + "@fluentui/react-swatch-picker": "^9.0.0", "@fluentui/react-switch": "^9.1.82", "@fluentui/react-table": "^9.15.4", "@fluentui/react-tabs": "^9.4.20", diff --git a/packages/react-components/react-components/src/index.ts b/packages/react-components/react-components/src/index.ts index 14ef1769254235..5824fe6918109c 100644 --- a/packages/react-components/react-components/src/index.ts +++ b/packages/react-components/react-components/src/index.ts @@ -1804,3 +1804,60 @@ export type { TagPickerOptionGroupSlots, TagPickerOptionGroupState, } from '@fluentui/react-tag-picker'; + +export { + SwatchPicker, + renderSwatchPicker_unstable, + useSwatchPickerStyles_unstable, + useSwatchPicker_unstable, + swatchPickerClassNames, + SwatchPickerProvider, + swatchPickerContextDefaultValue, + useSwatchPickerContextValue_unstable, + useSwatchPickerContextValues, + ColorSwatch, + renderColorSwatch_unstable, + useColorSwatchStyles_unstable, + useColorSwatch_unstable, + colorSwatchClassNames, + swatchCSSVars, + ImageSwatch, + renderImageSwatch_unstable, + useImageSwatchStyles_unstable, + useImageSwatch_unstable, + imageSwatchClassNames, + SwatchPickerRow, + renderSwatchPickerRow_unstable, + useSwatchPickerRowStyles_unstable, + useSwatchPickerRow_unstable, + swatchPickerRowClassNames, + renderSwatchPickerGrid, + EmptySwatch, + renderEmptySwatch_unstable, + useEmptySwatchStyles_unstable, + useEmptySwatch_unstable, + emptySwatchClassNames, +} from '@fluentui/react-swatch-picker'; +export type { + SwatchPickerContextValue, + SwatchPickerContextValues, + SwatchPickerProps, + SwatchPickerSlots, + SwatchPickerState, + SwatchPickerOnSelectionChangeData, + SwatchPickerOnSelectEventHandler, + ColorSwatchProps, + ColorSwatchSlots, + ColorSwatchState, + ImageSwatchProps, + ImageSwatchSlots, + ImageSwatchState, + SwatchPickerRowProps, + SwatchPickerRowSlots, + SwatchPickerRowState, + SwatchProps, + SwatchPickerGridProps, + EmptySwatchProps, + EmptySwatchSlots, + EmptySwatchState, +} from '@fluentui/react-swatch-picker'; diff --git a/packages/react-components/react-provider/etc/react-provider.api.md b/packages/react-components/react-provider/etc/react-provider.api.md index 743efe9c6f8300..efde2f0d520b9a 100644 --- a/packages/react-components/react-provider/etc/react-provider.api.md +++ b/packages/react-components/react-provider/etc/react-provider.api.md @@ -157,6 +157,11 @@ export const FluentProvider: React_2.ForwardRefExoticComponent void; useTagPickerOptionStyles_unstable: (state: unknown) => void; useTagPickerOptionGroupStyles_unstable: (state: unknown) => void; + useColorSwatchStyles_unstable: (state: unknown) => void; + useImageSwatchStyles_unstable: (state: unknown) => void; + useEmptySwatchStyles_unstable: (state: unknown) => void; + useSwatchPickerRowStyles_unstable: (state: unknown) => void; + useSwatchPickerStyles_unstable: (state: unknown) => void; }> | undefined; dir?: "ltr" | "rtl" | undefined; targetDocument?: Document | undefined; diff --git a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md index b34da355db3e5e..36c1bb8c08496b 100644 --- a/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md +++ b/packages/react-components/react-shared-contexts/etc/react-shared-contexts.api.md @@ -164,6 +164,11 @@ export const CustomStyleHooksContext_unstable: React_2.Context | undefined>; // @public (undocumented) @@ -297,6 +302,11 @@ export type CustomStyleHooksContextValue_unstable = Partial<{ useTagPickerListStyles_unstable: CustomStyleHook; useTagPickerOptionStyles_unstable: CustomStyleHook; useTagPickerOptionGroupStyles_unstable: CustomStyleHook; + useColorSwatchStyles_unstable: CustomStyleHook; + useImageSwatchStyles_unstable: CustomStyleHook; + useEmptySwatchStyles_unstable: CustomStyleHook; + useSwatchPickerRowStyles_unstable: CustomStyleHook; + useSwatchPickerStyles_unstable: CustomStyleHook; }>; // @internal (undocumented) @@ -430,6 +440,11 @@ export const CustomStyleHooksProvider_unstable: React_2.Provider | undefined>; // @internal (undocumented) diff --git a/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts b/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts index e00af7e450d1bd..3adcfd540dd126 100644 --- a/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts +++ b/packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts @@ -142,6 +142,11 @@ export type CustomStyleHooksContextValue = Partial<{ useTagPickerListStyles_unstable: CustomStyleHook; useTagPickerOptionStyles_unstable: CustomStyleHook; useTagPickerOptionGroupStyles_unstable: CustomStyleHook; + useColorSwatchStyles_unstable: CustomStyleHook; + useImageSwatchStyles_unstable: CustomStyleHook; + useEmptySwatchStyles_unstable: CustomStyleHook; + useSwatchPickerRowStyles_unstable: CustomStyleHook; + useSwatchPickerStyles_unstable: CustomStyleHook; }>; /** diff --git a/packages/react-components/react-swatch-picker-preview/bundle-size/index.fixture.js b/packages/react-components/react-swatch-picker-preview/bundle-size/index.fixture.js deleted file mode 100644 index 377b9a14a84547..00000000000000 --- a/packages/react-components/react-swatch-picker-preview/bundle-size/index.fixture.js +++ /dev/null @@ -1,7 +0,0 @@ -import * as p from '@fluentui/react-swatch-picker-preview'; - -console.log(p); - -export default { - name: '@fluentui/react-swatch-picker-preview - package', -}; diff --git a/packages/react-components/react-swatch-picker-preview/.babelrc.json b/packages/react-components/react-swatch-picker/.babelrc.json similarity index 100% rename from packages/react-components/react-swatch-picker-preview/.babelrc.json rename to packages/react-components/react-swatch-picker/.babelrc.json diff --git a/packages/react-components/react-swatch-picker-preview/.eslintrc.json b/packages/react-components/react-swatch-picker/.eslintrc.json similarity index 100% rename from packages/react-components/react-swatch-picker-preview/.eslintrc.json rename to packages/react-components/react-swatch-picker/.eslintrc.json diff --git a/packages/react-components/react-swatch-picker-preview/.storybook/main.js b/packages/react-components/react-swatch-picker/.storybook/main.js similarity index 100% rename from packages/react-components/react-swatch-picker-preview/.storybook/main.js rename to packages/react-components/react-swatch-picker/.storybook/main.js diff --git a/packages/react-components/react-swatch-picker-preview/.storybook/preview.js b/packages/react-components/react-swatch-picker/.storybook/preview.js similarity index 100% rename from packages/react-components/react-swatch-picker-preview/.storybook/preview.js rename to packages/react-components/react-swatch-picker/.storybook/preview.js diff --git a/packages/react-components/react-swatch-picker-preview/.storybook/tsconfig.json b/packages/react-components/react-swatch-picker/.storybook/tsconfig.json similarity index 100% rename from packages/react-components/react-swatch-picker-preview/.storybook/tsconfig.json rename to packages/react-components/react-swatch-picker/.storybook/tsconfig.json diff --git a/packages/react-components/react-swatch-picker-preview/.swcrc b/packages/react-components/react-swatch-picker/.swcrc similarity index 100% rename from packages/react-components/react-swatch-picker-preview/.swcrc rename to packages/react-components/react-swatch-picker/.swcrc diff --git a/packages/react-components/react-swatch-picker-preview/CHANGELOG.json b/packages/react-components/react-swatch-picker/CHANGELOG.json similarity index 100% rename from packages/react-components/react-swatch-picker-preview/CHANGELOG.json rename to packages/react-components/react-swatch-picker/CHANGELOG.json diff --git a/packages/react-components/react-swatch-picker-preview/CHANGELOG.md b/packages/react-components/react-swatch-picker/CHANGELOG.md similarity index 94% rename from packages/react-components/react-swatch-picker-preview/CHANGELOG.md rename to packages/react-components/react-swatch-picker/CHANGELOG.md index 6765f197963625..3e6dac642a7494 100644 --- a/packages/react-components/react-swatch-picker-preview/CHANGELOG.md +++ b/packages/react-components/react-swatch-picker/CHANGELOG.md @@ -19,7 +19,7 @@ Thu, 16 May 2024 09:25:18 GMT ## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.5.0) -Mon, 13 May 2024 12:34:20 GMT +Mon, 13 May 2024 12:34:20 GMT [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.4.3..@fluentui/react-swatch-picker-preview_v0.5.0) ### Minor changes @@ -28,7 +28,7 @@ Mon, 13 May 2024 12:34:20 GMT ## [0.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.4.3) -Thu, 09 May 2024 19:35:12 GMT +Thu, 09 May 2024 19:35:12 GMT [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.4.2..@fluentui/react-swatch-picker-preview_v0.4.3) ### Patches @@ -37,7 +37,7 @@ Thu, 09 May 2024 19:35:12 GMT ## [0.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.4.2) -Mon, 06 May 2024 12:55:02 GMT +Mon, 06 May 2024 12:55:02 GMT [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.4.1..@fluentui/react-swatch-picker-preview_v0.4.2) ### Patches @@ -50,17 +50,17 @@ Mon, 06 May 2024 12:55:02 GMT ## [0.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.4.1) -Thu, 02 May 2024 11:36:38 GMT +Thu, 02 May 2024 11:36:38 GMT [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.4.0..@fluentui/react-swatch-picker-preview_v0.4.1) ### Patches -- chore: upgrade @fluentui/react-icons to 2.0.237. ([PR #31139](https://github.com/microsoft/fluentui/pull/31139) by ololubek@microsoft.com) +- chore: upgrade @fluentui/react-icons to 2.0.237. ([PR #31139](https://github.com/microsoft/fluentui/pull/31139) by ololubek@microsoft.com) - Bump @fluentui/react-tabster to v9.21.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball) ## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.4.0) -Tue, 23 Apr 2024 08:17:48 GMT +Tue, 23 Apr 2024 08:17:48 GMT [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.3.0..@fluentui/react-swatch-picker-preview_v0.4.0) ### Minor changes @@ -74,7 +74,7 @@ Tue, 23 Apr 2024 08:17:48 GMT ## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.3.0) -Wed, 17 Apr 2024 21:53:58 GMT +Wed, 17 Apr 2024 21:53:58 GMT [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.2.1..@fluentui/react-swatch-picker-preview_v0.3.0) ### Minor changes @@ -90,7 +90,7 @@ Wed, 17 Apr 2024 21:53:58 GMT ## [0.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.2.1) -Tue, 02 Apr 2024 09:48:00 GMT +Tue, 02 Apr 2024 09:48:00 GMT [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.2.0..@fluentui/react-swatch-picker-preview_v0.2.1) ### Patches @@ -103,7 +103,7 @@ Tue, 02 Apr 2024 09:48:00 GMT ## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.2.0) -Thu, 28 Mar 2024 10:43:54 GMT +Thu, 28 Mar 2024 10:43:54 GMT [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.1.0..@fluentui/react-swatch-picker-preview_v0.2.0) ### Minor changes diff --git a/packages/react-components/react-swatch-picker-preview/LICENSE b/packages/react-components/react-swatch-picker/LICENSE similarity index 100% rename from packages/react-components/react-swatch-picker-preview/LICENSE rename to packages/react-components/react-swatch-picker/LICENSE diff --git a/packages/react-components/react-swatch-picker-preview/README.md b/packages/react-components/react-swatch-picker/README.md similarity index 98% rename from packages/react-components/react-swatch-picker-preview/README.md rename to packages/react-components/react-swatch-picker/README.md index 0a128fd383cf2b..43510371f8dd38 100644 --- a/packages/react-components/react-swatch-picker-preview/README.md +++ b/packages/react-components/react-swatch-picker/README.md @@ -1,4 +1,4 @@ -# @fluentui/react-swatch-picker-preview +# @fluentui/react-swatch-picker **React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)** diff --git a/packages/react-components/react-swatch-picker/bundle-size/index.fixture.js b/packages/react-components/react-swatch-picker/bundle-size/index.fixture.js new file mode 100644 index 00000000000000..4b6a9ea8277ff5 --- /dev/null +++ b/packages/react-components/react-swatch-picker/bundle-size/index.fixture.js @@ -0,0 +1,7 @@ +import * as p from '@fluentui/react-swatch-picker'; + +console.log(p); + +export default { + name: '@fluentui/react-swatch-picker - package', +}; diff --git a/packages/react-components/react-swatch-picker-preview/config/api-extractor.json b/packages/react-components/react-swatch-picker/config/api-extractor.json similarity index 100% rename from packages/react-components/react-swatch-picker-preview/config/api-extractor.json rename to packages/react-components/react-swatch-picker/config/api-extractor.json diff --git a/packages/react-components/react-swatch-picker-preview/config/tests.js b/packages/react-components/react-swatch-picker/config/tests.js similarity index 100% rename from packages/react-components/react-swatch-picker-preview/config/tests.js rename to packages/react-components/react-swatch-picker/config/tests.js diff --git a/packages/react-components/react-swatch-picker-preview/cypress.config.ts b/packages/react-components/react-swatch-picker/cypress.config.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/cypress.config.ts rename to packages/react-components/react-swatch-picker/cypress.config.ts diff --git a/packages/react-components/react-swatch-picker-preview/docs/MIGRATION.md b/packages/react-components/react-swatch-picker/docs/MIGRATION.md similarity index 100% rename from packages/react-components/react-swatch-picker-preview/docs/MIGRATION.md rename to packages/react-components/react-swatch-picker/docs/MIGRATION.md diff --git a/packages/react-components/react-swatch-picker-preview/docs/Spec.md b/packages/react-components/react-swatch-picker/docs/Spec.md similarity index 100% rename from packages/react-components/react-swatch-picker-preview/docs/Spec.md rename to packages/react-components/react-swatch-picker/docs/Spec.md diff --git a/packages/react-components/react-swatch-picker-preview/docs/assets/color-swatch.jpg b/packages/react-components/react-swatch-picker/docs/assets/color-swatch.jpg similarity index 100% rename from packages/react-components/react-swatch-picker-preview/docs/assets/color-swatch.jpg rename to packages/react-components/react-swatch-picker/docs/assets/color-swatch.jpg diff --git a/packages/react-components/react-swatch-picker-preview/docs/assets/image-swatch.jpg b/packages/react-components/react-swatch-picker/docs/assets/image-swatch.jpg similarity index 100% rename from packages/react-components/react-swatch-picker-preview/docs/assets/image-swatch.jpg rename to packages/react-components/react-swatch-picker/docs/assets/image-swatch.jpg diff --git a/packages/react-components/react-swatch-picker-preview/docs/assets/swatch-picker-a11y.jpg b/packages/react-components/react-swatch-picker/docs/assets/swatch-picker-a11y.jpg similarity index 100% rename from packages/react-components/react-swatch-picker-preview/docs/assets/swatch-picker-a11y.jpg rename to packages/react-components/react-swatch-picker/docs/assets/swatch-picker-a11y.jpg diff --git a/packages/react-components/react-swatch-picker-preview/docs/assets/swatch-picker-base.jpg b/packages/react-components/react-swatch-picker/docs/assets/swatch-picker-base.jpg similarity index 100% rename from packages/react-components/react-swatch-picker-preview/docs/assets/swatch-picker-base.jpg rename to packages/react-components/react-swatch-picker/docs/assets/swatch-picker-base.jpg diff --git a/packages/react-components/react-swatch-picker-preview/docs/assets/swatch-picker-behaviors-keyboard-nav-color-sets.jpg b/packages/react-components/react-swatch-picker/docs/assets/swatch-picker-behaviors-keyboard-nav-color-sets.jpg similarity index 100% rename from packages/react-components/react-swatch-picker-preview/docs/assets/swatch-picker-behaviors-keyboard-nav-color-sets.jpg rename to packages/react-components/react-swatch-picker/docs/assets/swatch-picker-behaviors-keyboard-nav-color-sets.jpg diff --git a/packages/react-components/react-swatch-picker-preview/docs/assets/swatch-picker-behaviors-keyboard-nav-grid.jpg b/packages/react-components/react-swatch-picker/docs/assets/swatch-picker-behaviors-keyboard-nav-grid.jpg similarity index 100% rename from packages/react-components/react-swatch-picker-preview/docs/assets/swatch-picker-behaviors-keyboard-nav-grid.jpg rename to packages/react-components/react-swatch-picker/docs/assets/swatch-picker-behaviors-keyboard-nav-grid.jpg diff --git a/packages/react-components/react-swatch-picker-preview/docs/assets/swatch-picker-behaviors-keyboard-nav-row.jpg b/packages/react-components/react-swatch-picker/docs/assets/swatch-picker-behaviors-keyboard-nav-row.jpg similarity index 100% rename from packages/react-components/react-swatch-picker-preview/docs/assets/swatch-picker-behaviors-keyboard-nav-row.jpg rename to packages/react-components/react-swatch-picker/docs/assets/swatch-picker-behaviors-keyboard-nav-row.jpg diff --git a/packages/react-components/react-swatch-picker-preview/docs/assets/swatch-picker-behaviors-keyboard-select.jpg b/packages/react-components/react-swatch-picker/docs/assets/swatch-picker-behaviors-keyboard-select.jpg similarity index 100% rename from packages/react-components/react-swatch-picker-preview/docs/assets/swatch-picker-behaviors-keyboard-select.jpg rename to packages/react-components/react-swatch-picker/docs/assets/swatch-picker-behaviors-keyboard-select.jpg diff --git a/packages/react-components/react-swatch-picker-preview/docs/assets/swatch-picker-behaviors-mouse.jpg b/packages/react-components/react-swatch-picker/docs/assets/swatch-picker-behaviors-mouse.jpg similarity index 100% rename from packages/react-components/react-swatch-picker-preview/docs/assets/swatch-picker-behaviors-mouse.jpg rename to packages/react-components/react-swatch-picker/docs/assets/swatch-picker-behaviors-mouse.jpg diff --git a/packages/react-components/react-swatch-picker-preview/etc/react-swatch-picker-preview.api.md b/packages/react-components/react-swatch-picker/etc/react-swatch-picker.api.md similarity index 99% rename from packages/react-components/react-swatch-picker-preview/etc/react-swatch-picker-preview.api.md rename to packages/react-components/react-swatch-picker/etc/react-swatch-picker.api.md index c8d4694c94ac4a..67bb133c76f0b0 100644 --- a/packages/react-components/react-swatch-picker-preview/etc/react-swatch-picker-preview.api.md +++ b/packages/react-components/react-swatch-picker/etc/react-swatch-picker.api.md @@ -1,4 +1,4 @@ -## API Report File for "@fluentui/react-swatch-picker-preview" +## API Report File for "@fluentui/react-swatch-picker" > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). diff --git a/packages/react-components/react-swatch-picker-preview/jest.config.js b/packages/react-components/react-swatch-picker/jest.config.js similarity index 90% rename from packages/react-components/react-swatch-picker-preview/jest.config.js rename to packages/react-components/react-swatch-picker/jest.config.js index 54d0f4e6e8b9d1..43f1d575605f65 100644 --- a/packages/react-components/react-swatch-picker-preview/jest.config.js +++ b/packages/react-components/react-swatch-picker/jest.config.js @@ -4,7 +4,7 @@ * @type {import('@jest/types').Config.InitialOptions} */ module.exports = { - displayName: 'react-swatch-picker-preview', + displayName: 'react-swatch-picker', preset: '../../../jest.preset.js', transform: { '^.+\\.tsx?$': [ diff --git a/packages/react-components/react-swatch-picker-preview/just.config.ts b/packages/react-components/react-swatch-picker/just.config.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/just.config.ts rename to packages/react-components/react-swatch-picker/just.config.ts diff --git a/packages/react-components/react-swatch-picker-preview/package.json b/packages/react-components/react-swatch-picker/package.json similarity index 96% rename from packages/react-components/react-swatch-picker-preview/package.json rename to packages/react-components/react-swatch-picker/package.json index 55cc8d75102caf..c158a8b4ec829c 100644 --- a/packages/react-components/react-swatch-picker-preview/package.json +++ b/packages/react-components/react-swatch-picker/package.json @@ -1,6 +1,6 @@ { - "name": "@fluentui/react-swatch-picker-preview", - "version": "0.6.0", + "name": "@fluentui/react-swatch-picker", + "version": "9.0.0", "description": "New fluentui react package", "main": "lib-commonjs/index.js", "module": "lib/index.js", diff --git a/packages/react-components/react-swatch-picker-preview/project.json b/packages/react-components/react-swatch-picker/project.json similarity index 56% rename from packages/react-components/react-swatch-picker-preview/project.json rename to packages/react-components/react-swatch-picker/project.json index 66bb6e59104946..e0523a205eb1be 100644 --- a/packages/react-components/react-swatch-picker-preview/project.json +++ b/packages/react-components/react-swatch-picker/project.json @@ -1,8 +1,8 @@ { - "name": "@fluentui/react-swatch-picker-preview", + "name": "@fluentui/react-swatch-picker", "$schema": "../../../node_modules/nx/schemas/project-schema.json", "projectType": "library", - "sourceRoot": "packages/react-components/react-swatch-picker-preview/src", + "sourceRoot": "packages/react-components/react-swatch-picker/src", "tags": ["platform:web", "vNext"], "implicitDependencies": [] } diff --git a/packages/react-components/react-swatch-picker-preview/src/ColorSwatch.ts b/packages/react-components/react-swatch-picker/src/ColorSwatch.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/ColorSwatch.ts rename to packages/react-components/react-swatch-picker/src/ColorSwatch.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/EmptySwatch.ts b/packages/react-components/react-swatch-picker/src/EmptySwatch.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/EmptySwatch.ts rename to packages/react-components/react-swatch-picker/src/EmptySwatch.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/ImageSwatch.ts b/packages/react-components/react-swatch-picker/src/ImageSwatch.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/ImageSwatch.ts rename to packages/react-components/react-swatch-picker/src/ImageSwatch.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/SwatchPicker.ts b/packages/react-components/react-swatch-picker/src/SwatchPicker.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/SwatchPicker.ts rename to packages/react-components/react-swatch-picker/src/SwatchPicker.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/SwatchPickerRow.ts b/packages/react-components/react-swatch-picker/src/SwatchPickerRow.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/SwatchPickerRow.ts rename to packages/react-components/react-swatch-picker/src/SwatchPickerRow.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.test.tsx b/packages/react-components/react-swatch-picker/src/components/ColorSwatch/ColorSwatch.test.tsx similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.test.tsx rename to packages/react-components/react-swatch-picker/src/components/ColorSwatch/ColorSwatch.test.tsx diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.tsx b/packages/react-components/react-swatch-picker/src/components/ColorSwatch/ColorSwatch.tsx similarity index 83% rename from packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.tsx rename to packages/react-components/react-swatch-picker/src/components/ColorSwatch/ColorSwatch.tsx index 4a13787b90bce7..aca4e8f5e1d89d 100644 --- a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.tsx +++ b/packages/react-components/react-swatch-picker/src/components/ColorSwatch/ColorSwatch.tsx @@ -4,6 +4,7 @@ import { useColorSwatch_unstable } from './useColorSwatch'; import { renderColorSwatch_unstable } from './renderColorSwatch'; import { useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles'; import type { ColorSwatchProps } from './ColorSwatch.types'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * ColorSwatch component is used to render a colors, icons and gradients. @@ -12,8 +13,7 @@ export const ColorSwatch: ForwardRefComponent = React.forwardR const state = useColorSwatch_unstable(props, ref); useColorSwatchStyles_unstable(state); - // TODO uncomment when SwatchPicker is stable - // useCustomStyleHook_unstable('useColorSwatchStyles_unstable')(state); + useCustomStyleHook_unstable('useColorSwatchStyles_unstable')(state); return renderColorSwatch_unstable(state); }); diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.types.ts b/packages/react-components/react-swatch-picker/src/components/ColorSwatch/ColorSwatch.types.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/ColorSwatch.types.ts rename to packages/react-components/react-swatch-picker/src/components/ColorSwatch/ColorSwatch.types.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/index.ts b/packages/react-components/react-swatch-picker/src/components/ColorSwatch/index.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/index.ts rename to packages/react-components/react-swatch-picker/src/components/ColorSwatch/index.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/renderColorSwatch.tsx b/packages/react-components/react-swatch-picker/src/components/ColorSwatch/renderColorSwatch.tsx similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/renderColorSwatch.tsx rename to packages/react-components/react-swatch-picker/src/components/ColorSwatch/renderColorSwatch.tsx diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatch.tsx b/packages/react-components/react-swatch-picker/src/components/ColorSwatch/useColorSwatch.tsx similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatch.tsx rename to packages/react-components/react-swatch-picker/src/components/ColorSwatch/useColorSwatch.tsx diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts b/packages/react-components/react-swatch-picker/src/components/ColorSwatch/useColorSwatchStyles.styles.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/ColorSwatch/useColorSwatchStyles.styles.ts rename to packages/react-components/react-swatch-picker/src/components/ColorSwatch/useColorSwatchStyles.styles.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/EmptySwatch.test.tsx b/packages/react-components/react-swatch-picker/src/components/EmptySwatch/EmptySwatch.test.tsx similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/EmptySwatch.test.tsx rename to packages/react-components/react-swatch-picker/src/components/EmptySwatch/EmptySwatch.test.tsx diff --git a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/EmptySwatch.tsx b/packages/react-components/react-swatch-picker/src/components/EmptySwatch/EmptySwatch.tsx similarity index 70% rename from packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/EmptySwatch.tsx rename to packages/react-components/react-swatch-picker/src/components/EmptySwatch/EmptySwatch.tsx index 96320402846bbb..39c4bbc2cdd006 100644 --- a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/EmptySwatch.tsx +++ b/packages/react-components/react-swatch-picker/src/components/EmptySwatch/EmptySwatch.tsx @@ -4,6 +4,7 @@ import { useEmptySwatch_unstable } from './useEmptySwatch'; import { renderEmptySwatch_unstable } from './renderEmptySwatch'; import { useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles'; import type { EmptySwatchProps } from './EmptySwatch.types'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * EmptySwatch component is used for adding new color swatches. @@ -12,9 +13,7 @@ export const EmptySwatch: ForwardRefComponent = React.forwardR const state = useEmptySwatch_unstable(props, ref); useEmptySwatchStyles_unstable(state); - // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts - // https://github.com/microsoft/fluentui/blob/master/rfcs/react-components/convergence/custom-styling.md - // useCustomStyleHook_unstable('useEmptySwatchStyles_unstable')(state); + useCustomStyleHook_unstable('useEmptySwatchStyles_unstable')(state); return renderEmptySwatch_unstable(state); }); diff --git a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/EmptySwatch.types.ts b/packages/react-components/react-swatch-picker/src/components/EmptySwatch/EmptySwatch.types.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/EmptySwatch.types.ts rename to packages/react-components/react-swatch-picker/src/components/EmptySwatch/EmptySwatch.types.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/index.ts b/packages/react-components/react-swatch-picker/src/components/EmptySwatch/index.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/index.ts rename to packages/react-components/react-swatch-picker/src/components/EmptySwatch/index.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/renderEmptySwatch.tsx b/packages/react-components/react-swatch-picker/src/components/EmptySwatch/renderEmptySwatch.tsx similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/renderEmptySwatch.tsx rename to packages/react-components/react-swatch-picker/src/components/EmptySwatch/renderEmptySwatch.tsx diff --git a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatch.ts b/packages/react-components/react-swatch-picker/src/components/EmptySwatch/useEmptySwatch.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatch.ts rename to packages/react-components/react-swatch-picker/src/components/EmptySwatch/useEmptySwatch.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatchStyles.styles.ts b/packages/react-components/react-swatch-picker/src/components/EmptySwatch/useEmptySwatchStyles.styles.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/EmptySwatch/useEmptySwatchStyles.styles.ts rename to packages/react-components/react-swatch-picker/src/components/EmptySwatch/useEmptySwatchStyles.styles.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/ImageSwatch.test.tsx b/packages/react-components/react-swatch-picker/src/components/ImageSwatch/ImageSwatch.test.tsx similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/ImageSwatch.test.tsx rename to packages/react-components/react-swatch-picker/src/components/ImageSwatch/ImageSwatch.test.tsx diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/ImageSwatch.tsx b/packages/react-components/react-swatch-picker/src/components/ImageSwatch/ImageSwatch.tsx similarity index 78% rename from packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/ImageSwatch.tsx rename to packages/react-components/react-swatch-picker/src/components/ImageSwatch/ImageSwatch.tsx index 6f2ed0ffe97af1..a0467bb837f551 100644 --- a/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/ImageSwatch.tsx +++ b/packages/react-components/react-swatch-picker/src/components/ImageSwatch/ImageSwatch.tsx @@ -4,6 +4,7 @@ import { useImageSwatch_unstable } from './useImageSwatch'; import { renderImageSwatch_unstable } from './renderImageSwatch'; import { useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles'; import type { ImageSwatchProps } from './ImageSwatch.types'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * ImageSwatch component is used to render an images, patterns and textures. @@ -12,9 +13,7 @@ export const ImageSwatch: ForwardRefComponent = React.forwardR const state = useImageSwatch_unstable(props, ref); useImageSwatchStyles_unstable(state); - - // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts - // useCustomStyleHook_unstable('useImageSwatchStyles_unstable')(state); + useCustomStyleHook_unstable('useImageSwatchStyles_unstable')(state); return renderImageSwatch_unstable(state); }); diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/ImageSwatch.types.ts b/packages/react-components/react-swatch-picker/src/components/ImageSwatch/ImageSwatch.types.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/ImageSwatch.types.ts rename to packages/react-components/react-swatch-picker/src/components/ImageSwatch/ImageSwatch.types.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/index.ts b/packages/react-components/react-swatch-picker/src/components/ImageSwatch/index.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/index.ts rename to packages/react-components/react-swatch-picker/src/components/ImageSwatch/index.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/renderImageSwatch.tsx b/packages/react-components/react-swatch-picker/src/components/ImageSwatch/renderImageSwatch.tsx similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/renderImageSwatch.tsx rename to packages/react-components/react-swatch-picker/src/components/ImageSwatch/renderImageSwatch.tsx diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/useImageSwatch.ts b/packages/react-components/react-swatch-picker/src/components/ImageSwatch/useImageSwatch.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/useImageSwatch.ts rename to packages/react-components/react-swatch-picker/src/components/ImageSwatch/useImageSwatch.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/useImageSwatchStyles.styles.ts b/packages/react-components/react-swatch-picker/src/components/ImageSwatch/useImageSwatchStyles.styles.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/ImageSwatch/useImageSwatchStyles.styles.ts rename to packages/react-components/react-swatch-picker/src/components/ImageSwatch/useImageSwatchStyles.styles.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.cy.tsx b/packages/react-components/react-swatch-picker/src/components/SwatchPicker/SwatchPicker.cy.tsx similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.cy.tsx rename to packages/react-components/react-swatch-picker/src/components/SwatchPicker/SwatchPicker.cy.tsx diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.test.tsx b/packages/react-components/react-swatch-picker/src/components/SwatchPicker/SwatchPicker.test.tsx similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.test.tsx rename to packages/react-components/react-swatch-picker/src/components/SwatchPicker/SwatchPicker.test.tsx diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.tsx b/packages/react-components/react-swatch-picker/src/components/SwatchPicker/SwatchPicker.tsx similarity index 85% rename from packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.tsx rename to packages/react-components/react-swatch-picker/src/components/SwatchPicker/SwatchPicker.tsx index bc40146750752e..4e408c6dec0cbd 100644 --- a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.tsx +++ b/packages/react-components/react-swatch-picker/src/components/SwatchPicker/SwatchPicker.tsx @@ -5,6 +5,7 @@ import { renderSwatchPicker_unstable } from './renderSwatchPicker'; import { useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles'; import type { SwatchPickerProps } from './SwatchPicker.types'; import { useSwatchPickerContextValues } from '../../contexts/swatchPicker'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * SwatchPicker component - TODO: add more docs @@ -14,8 +15,7 @@ export const SwatchPicker: ForwardRefComponent = React.forwar const contextValues = useSwatchPickerContextValues(state); useSwatchPickerStyles_unstable(state); - // TODO when SwatchPicker is stable add this line: - // useCustomStyleHook_unstable('useSwatchPickerStyles_unstable')(state); + useCustomStyleHook_unstable('useSwatchPickerStyles_unstable')(state); return renderSwatchPicker_unstable(state, contextValues); }); diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.types.ts b/packages/react-components/react-swatch-picker/src/components/SwatchPicker/SwatchPicker.types.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/SwatchPicker.types.ts rename to packages/react-components/react-swatch-picker/src/components/SwatchPicker/SwatchPicker.types.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/index.ts b/packages/react-components/react-swatch-picker/src/components/SwatchPicker/index.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/index.ts rename to packages/react-components/react-swatch-picker/src/components/SwatchPicker/index.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/renderSwatchPicker.tsx b/packages/react-components/react-swatch-picker/src/components/SwatchPicker/renderSwatchPicker.tsx similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/renderSwatchPicker.tsx rename to packages/react-components/react-swatch-picker/src/components/SwatchPicker/renderSwatchPicker.tsx diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPicker.ts b/packages/react-components/react-swatch-picker/src/components/SwatchPicker/useSwatchPicker.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPicker.ts rename to packages/react-components/react-swatch-picker/src/components/SwatchPicker/useSwatchPicker.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPickerStyles.styles.ts b/packages/react-components/react-swatch-picker/src/components/SwatchPicker/useSwatchPickerStyles.styles.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/SwatchPicker/useSwatchPickerStyles.styles.ts rename to packages/react-components/react-swatch-picker/src/components/SwatchPicker/useSwatchPickerStyles.styles.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/SwatchPickerRow.test.tsx b/packages/react-components/react-swatch-picker/src/components/SwatchPickerRow/SwatchPickerRow.test.tsx similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/SwatchPickerRow.test.tsx rename to packages/react-components/react-swatch-picker/src/components/SwatchPickerRow/SwatchPickerRow.test.tsx diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/SwatchPickerRow.tsx b/packages/react-components/react-swatch-picker/src/components/SwatchPickerRow/SwatchPickerRow.tsx similarity index 79% rename from packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/SwatchPickerRow.tsx rename to packages/react-components/react-swatch-picker/src/components/SwatchPickerRow/SwatchPickerRow.tsx index 6ce0da86339893..159f2d835bb2af 100644 --- a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/SwatchPickerRow.tsx +++ b/packages/react-components/react-swatch-picker/src/components/SwatchPickerRow/SwatchPickerRow.tsx @@ -4,6 +4,7 @@ import { useSwatchPickerRow_unstable } from './useSwatchPickerRow'; import { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow'; import { useSwatchPickerRowStyles_unstable } from './useSwatchPickerRowStyles.styles'; import type { SwatchPickerRowProps } from './SwatchPickerRow.types'; +import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts'; /** * SwatchPickerRow component is used to render a row of swatches. @@ -12,8 +13,7 @@ export const SwatchPickerRow: ForwardRefComponent = React. const state = useSwatchPickerRow_unstable(props, ref); useSwatchPickerRowStyles_unstable(state); - // TODO update types in packages/react-components/react-shared-contexts/src/CustomStyleHooksContext/CustomStyleHooksContext.ts - // useCustomStyleHook_unstable('useSwatchPickerRowStyles_unstable')(state); + useCustomStyleHook_unstable('useSwatchPickerRowStyles_unstable')(state); return renderSwatchPickerRow_unstable(state); }); diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/SwatchPickerRow.types.ts b/packages/react-components/react-swatch-picker/src/components/SwatchPickerRow/SwatchPickerRow.types.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/SwatchPickerRow.types.ts rename to packages/react-components/react-swatch-picker/src/components/SwatchPickerRow/SwatchPickerRow.types.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/index.ts b/packages/react-components/react-swatch-picker/src/components/SwatchPickerRow/index.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/index.ts rename to packages/react-components/react-swatch-picker/src/components/SwatchPickerRow/index.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/renderSwatchPickerRow.tsx b/packages/react-components/react-swatch-picker/src/components/SwatchPickerRow/renderSwatchPickerRow.tsx similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/renderSwatchPickerRow.tsx rename to packages/react-components/react-swatch-picker/src/components/SwatchPickerRow/renderSwatchPickerRow.tsx diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/useSwatchPickerRow.ts b/packages/react-components/react-swatch-picker/src/components/SwatchPickerRow/useSwatchPickerRow.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/useSwatchPickerRow.ts rename to packages/react-components/react-swatch-picker/src/components/SwatchPickerRow/useSwatchPickerRow.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts b/packages/react-components/react-swatch-picker/src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts rename to packages/react-components/react-swatch-picker/src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/contexts/index.ts b/packages/react-components/react-swatch-picker/src/contexts/index.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/contexts/index.ts rename to packages/react-components/react-swatch-picker/src/contexts/index.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/contexts/swatchPicker.ts b/packages/react-components/react-swatch-picker/src/contexts/swatchPicker.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/contexts/swatchPicker.ts rename to packages/react-components/react-swatch-picker/src/contexts/swatchPicker.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/index.ts b/packages/react-components/react-swatch-picker/src/index.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/index.ts rename to packages/react-components/react-swatch-picker/src/index.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/testing/isConformant.ts b/packages/react-components/react-swatch-picker/src/testing/isConformant.ts similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/testing/isConformant.ts rename to packages/react-components/react-swatch-picker/src/testing/isConformant.ts diff --git a/packages/react-components/react-swatch-picker-preview/src/utils/__snapshots__/renderUtils.test.tsx.snap b/packages/react-components/react-swatch-picker/src/utils/__snapshots__/renderUtils.test.tsx.snap similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/utils/__snapshots__/renderUtils.test.tsx.snap rename to packages/react-components/react-swatch-picker/src/utils/__snapshots__/renderUtils.test.tsx.snap diff --git a/packages/react-components/react-swatch-picker-preview/src/utils/renderUtils.test.tsx b/packages/react-components/react-swatch-picker/src/utils/renderUtils.test.tsx similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/utils/renderUtils.test.tsx rename to packages/react-components/react-swatch-picker/src/utils/renderUtils.test.tsx diff --git a/packages/react-components/react-swatch-picker-preview/src/utils/renderUtils.tsx b/packages/react-components/react-swatch-picker/src/utils/renderUtils.tsx similarity index 100% rename from packages/react-components/react-swatch-picker-preview/src/utils/renderUtils.tsx rename to packages/react-components/react-swatch-picker/src/utils/renderUtils.tsx diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/ColorSwatchVariants.stories.tsx b/packages/react-components/react-swatch-picker/stories/SwatchPicker/ColorSwatchVariants.stories.tsx similarity index 94% rename from packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/ColorSwatchVariants.stories.tsx rename to packages/react-components/react-swatch-picker/stories/SwatchPicker/ColorSwatchVariants.stories.tsx index 7c3496453745b0..73c3d74d629f5a 100644 --- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/ColorSwatchVariants.stories.tsx +++ b/packages/react-components/react-swatch-picker/stories/SwatchPicker/ColorSwatchVariants.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { HeartFilled } from '@fluentui/react-icons'; import { makeStyles, shorthands } from '@fluentui/react-components'; -import { ColorSwatch } from '@fluentui/react-swatch-picker-preview'; +import { ColorSwatch } from '@fluentui/react-components'; const useStyles = makeStyles({ example: { diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/EmptySwatch.stories.tsx b/packages/react-components/react-swatch-picker/stories/SwatchPicker/EmptySwatch.stories.tsx similarity index 95% rename from packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/EmptySwatch.stories.tsx rename to packages/react-components/react-swatch-picker/stories/SwatchPicker/EmptySwatch.stories.tsx index 3e1605a8184e55..adaef47bb96373 100644 --- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/EmptySwatch.stories.tsx +++ b/packages/react-components/react-swatch-picker/stories/SwatchPicker/EmptySwatch.stories.tsx @@ -1,11 +1,6 @@ import * as React from 'react'; import { makeStyles, shorthands, Button, Label } from '@fluentui/react-components'; -import { - SwatchPicker, - EmptySwatch, - ColorSwatch, - SwatchPickerOnSelectEventHandler, -} from '@fluentui/react-swatch-picker-preview'; +import { SwatchPicker, EmptySwatch, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components'; const useStyles = makeStyles({ example: { diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerBestPractices.md b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerBestPractices.md similarity index 100% rename from packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerBestPractices.md rename to packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerBestPractices.md diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerDefault.stories.tsx b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerDefault.stories.tsx similarity index 96% rename from packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerDefault.stories.tsx rename to packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerDefault.stories.tsx index 0e9821d5b357aa..fe37e1800260a5 100644 --- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerDefault.stories.tsx +++ b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerDefault.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { makeStyles, shorthands } from '@fluentui/react-components'; -import { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-swatch-picker-preview'; +import { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components'; const useStyles = makeStyles({ example: { diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerDescription.md b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerDescription.md similarity index 100% rename from packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerDescription.md rename to packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerDescription.md diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerImage.stories.tsx b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerImage.stories.tsx similarity index 97% rename from packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerImage.stories.tsx rename to packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerImage.stories.tsx index 2831cd3fd5590b..f70f5cd587e4c9 100644 --- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerImage.stories.tsx +++ b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerImage.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { makeStyles, shorthands } from '@fluentui/react-components'; -import { SwatchPicker, SwatchPickerOnSelectEventHandler, ImageSwatch } from '@fluentui/react-swatch-picker-preview'; +import { SwatchPicker, SwatchPickerOnSelectEventHandler, ImageSwatch } from '@fluentui/react-components'; const useStyles = makeStyles({ example: { diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerLayout.stories.tsx b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerLayout.stories.tsx similarity index 97% rename from packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerLayout.stories.tsx rename to packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerLayout.stories.tsx index 2c4e50bf6c0b44..4890a0b2a3feba 100644 --- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerLayout.stories.tsx +++ b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerLayout.stories.tsx @@ -5,7 +5,7 @@ import { SwatchPickerOnSelectEventHandler, ColorSwatch, renderSwatchPickerGrid, -} from '@fluentui/react-swatch-picker-preview'; +} from '@fluentui/react-components'; const useStyles = makeStyles({ example: { diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerMixedSwatches.stories.tsx b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerMixedSwatches.stories.tsx similarity index 93% rename from packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerMixedSwatches.stories.tsx rename to packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerMixedSwatches.stories.tsx index 18732177e823a3..cfa71fa9424322 100644 --- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerMixedSwatches.stories.tsx +++ b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerMixedSwatches.stories.tsx @@ -1,11 +1,7 @@ import * as React from 'react'; import { makeStyles, shorthands } from '@fluentui/react-components'; -import { - SwatchPicker, - SwatchPickerOnSelectEventHandler, - renderSwatchPickerGrid, -} from '@fluentui/react-swatch-picker-preview'; -import type { ColorSwatchProps, ImageSwatchProps, SwatchProps } from '@fluentui/react-swatch-picker-preview'; +import { SwatchPicker, SwatchPickerOnSelectEventHandler, renderSwatchPickerGrid } from '@fluentui/react-components'; +import type { ColorSwatchProps, ImageSwatchProps, SwatchProps } from '@fluentui/react-components'; const useStyles = makeStyles({ example: { diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerPopup.stories.tsx b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerPopup.stories.tsx similarity index 97% rename from packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerPopup.stories.tsx rename to packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerPopup.stories.tsx index 5f981e63de9d44..44a493489f0b36 100644 --- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerPopup.stories.tsx +++ b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerPopup.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { makeStyles, shorthands, Button, Popover, PopoverSurface, PopoverTrigger } from '@fluentui/react-components'; -import { SwatchPicker, ColorSwatch } from '@fluentui/react-swatch-picker-preview'; -import type { SwatchPickerOnSelectEventHandler } from '@fluentui/react-swatch-picker-preview'; +import { SwatchPicker, ColorSwatch } from '@fluentui/react-components'; +import type { SwatchPickerOnSelectEventHandler } from '@fluentui/react-components'; const useStyles = makeStyles({ example: { diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerShape.stories.tsx b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerShape.stories.tsx similarity index 95% rename from packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerShape.stories.tsx rename to packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerShape.stories.tsx index 4e3f4391a1f388..f627f04d3bbe07 100644 --- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerShape.stories.tsx +++ b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerShape.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { makeStyles, shorthands } from '@fluentui/react-components'; -import { SwatchPicker, ColorSwatch } from '@fluentui/react-swatch-picker-preview'; +import { SwatchPicker, ColorSwatch } from '@fluentui/react-components'; const useStyles = makeStyles({ example: { diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSize.stories.tsx b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerSize.stories.tsx similarity index 96% rename from packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSize.stories.tsx rename to packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerSize.stories.tsx index 225a1214f1e3b8..5b3c0327b79b9b 100644 --- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSize.stories.tsx +++ b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerSize.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { makeStyles, shorthands } from '@fluentui/react-components'; -import { SwatchPicker, ColorSwatch } from '@fluentui/react-swatch-picker-preview'; +import { SwatchPicker, ColorSwatch } from '@fluentui/react-components'; const useStyles = makeStyles({ example: { diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSpacing.stories.tsx b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerSpacing.stories.tsx similarity index 98% rename from packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSpacing.stories.tsx rename to packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerSpacing.stories.tsx index 687dba11178d98..4cc9ca10567d8e 100644 --- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerSpacing.stories.tsx +++ b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerSpacing.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { makeStyles, shorthands } from '@fluentui/react-components'; -import { SwatchPicker, renderSwatchPickerGrid } from '@fluentui/react-swatch-picker-preview'; +import { SwatchPicker, renderSwatchPickerGrid } from '@fluentui/react-components'; const useStyles = makeStyles({ example: { diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerWithTooltip.stories.tsx b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerWithTooltip.stories.tsx similarity index 97% rename from packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerWithTooltip.stories.tsx rename to packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerWithTooltip.stories.tsx index 2dd12db8c0a489..0b8df18b3f245a 100644 --- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/SwatchPickerWithTooltip.stories.tsx +++ b/packages/react-components/react-swatch-picker/stories/SwatchPicker/SwatchPickerWithTooltip.stories.tsx @@ -5,7 +5,7 @@ import { ColorSwatch, ColorSwatchProps, SwatchPickerOnSelectEventHandler, -} from '@fluentui/react-swatch-picker-preview'; +} from '@fluentui/react-components'; const useStyles = makeStyles({ example: { diff --git a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/index.stories.tsx b/packages/react-components/react-swatch-picker/stories/SwatchPicker/index.stories.tsx similarity index 87% rename from packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/index.stories.tsx rename to packages/react-components/react-swatch-picker/stories/SwatchPicker/index.stories.tsx index a5688a183a6f21..476de6e3925327 100644 --- a/packages/react-components/react-swatch-picker-preview/stories/SwatchPicker/index.stories.tsx +++ b/packages/react-components/react-swatch-picker/stories/SwatchPicker/index.stories.tsx @@ -1,11 +1,5 @@ import { ComponentMeta } from '@storybook/react'; -import { - SwatchPicker, - ColorSwatch, - ImageSwatch, - SwatchPickerRow, - EmptySwatch, -} from '@fluentui/react-swatch-picker-preview'; +import { SwatchPicker, ColorSwatch, ImageSwatch, SwatchPickerRow, EmptySwatch } from '@fluentui/react-components'; import descriptionMd from './SwatchPickerDescription.md'; import bestPracticesMd from './SwatchPickerBestPractices.md'; @@ -23,7 +17,7 @@ export { SwatchPickerWithTooltip } from './SwatchPickerWithTooltip.stories'; export { SwatchPickerPopup } from './SwatchPickerPopup.stories'; const metadata: ComponentMeta = { - title: 'Preview Components/SwatchPicker', + title: 'Components/SwatchPicker', component: SwatchPicker, subcomponents: { ColorSwatch, diff --git a/packages/react-components/react-swatch-picker-preview/tsconfig.cy.json b/packages/react-components/react-swatch-picker/tsconfig.cy.json similarity index 100% rename from packages/react-components/react-swatch-picker-preview/tsconfig.cy.json rename to packages/react-components/react-swatch-picker/tsconfig.cy.json diff --git a/packages/react-components/react-swatch-picker-preview/tsconfig.json b/packages/react-components/react-swatch-picker/tsconfig.json similarity index 100% rename from packages/react-components/react-swatch-picker-preview/tsconfig.json rename to packages/react-components/react-swatch-picker/tsconfig.json diff --git a/packages/react-components/react-swatch-picker-preview/tsconfig.lib.json b/packages/react-components/react-swatch-picker/tsconfig.lib.json similarity index 100% rename from packages/react-components/react-swatch-picker-preview/tsconfig.lib.json rename to packages/react-components/react-swatch-picker/tsconfig.lib.json diff --git a/packages/react-components/react-swatch-picker-preview/tsconfig.spec.json b/packages/react-components/react-swatch-picker/tsconfig.spec.json similarity index 100% rename from packages/react-components/react-swatch-picker-preview/tsconfig.spec.json rename to packages/react-components/react-swatch-picker/tsconfig.spec.json diff --git a/tsconfig.base.all.json b/tsconfig.base.all.json index eeb8c010e489a5..78b29ead1a1fb1 100644 --- a/tsconfig.base.all.json +++ b/tsconfig.base.all.json @@ -151,11 +151,11 @@ "@fluentui/react-storybook-addon-export-to-sandbox": [ "packages/react-components/react-storybook-addon-export-to-sandbox/src/index.ts" ], - "@fluentui/react-swatch-picker-preview": ["packages/react-components/react-swatch-picker-preview/src/index.ts"], "@fluentui/react-switch": ["packages/react-components/react-switch/src/index.ts"], "@fluentui/react-table": ["packages/react-components/react-table/src/index.ts"], "@fluentui/react-tabs": ["packages/react-components/react-tabs/src/index.ts"], "@fluentui/react-tabster": ["packages/react-components/react-tabster/src/index.ts"], + "@fluentui/react-tag-picker": ["packages/react-components/react-tag-picker/src/index.ts"], "@fluentui/react-tags": ["packages/react-components/react-tags/src/index.ts"], "@fluentui/react-teaching-popover": ["packages/react-components/react-teaching-popover/src/index.ts"], "@fluentui/react-text": ["packages/react-components/react-text/src/index.ts"], @@ -172,7 +172,7 @@ "@fluentui/theme-designer": ["packages/react-components/theme-designer/src/index.ts"], "@fluentui/tokens": ["packages/tokens/src/index.ts"], "@fluentui/workspace-plugin": ["tools/workspace-plugin/src/index.ts"], - "@fluentui/react-tag-picker": ["packages/react-components/react-tag-picker/src/index.ts"] + "@fluentui/react-swatch-picker": ["packages/react-components/react-swatch-picker/src/index.ts"] } } } diff --git a/tsconfig.base.json b/tsconfig.base.json index 8907b21cb3d576..b22f5b3dea3706 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -86,7 +86,7 @@ "@fluentui/react-storybook-addon-export-to-sandbox": [ "packages/react-components/react-storybook-addon-export-to-sandbox/src/index.ts" ], - "@fluentui/react-swatch-picker-preview": ["packages/react-components/react-swatch-picker-preview/src/index.ts"], + "@fluentui/react-swatch-picker": ["packages/react-components/react-swatch-picker/src/index.ts"], "@fluentui/react-switch": ["packages/react-components/react-switch/src/index.ts"], "@fluentui/react-table": ["packages/react-components/react-table/src/index.ts"], "@fluentui/react-tabs": ["packages/react-components/react-tabs/src/index.ts"],