From 39ba7b6d4648781b979fcf694579f97b851348af Mon Sep 17 00:00:00 2001 From: Ben Howell <48106640+behowell@users.noreply.github.com> Date: Wed, 9 Nov 2022 18:40:22 -0800 Subject: [PATCH] chore: Refactor Field components into the base component's package (#25593) Move Field components into their respective packages, as discussed in RFC #25380 --- apps/vr-tests-react-components/package.json | 1 + .../src/stories/Field.stories.tsx | 27 ++--- ...-f0dd6e86-d619-4d17-979a-7b4efd0a43dd.json | 7 ++ ...-c71ab8ad-51c9-4bc6-9ffc-d879cd1a55cd.json | 7 ++ ...-0b5338a3-9929-4ff6-abd6-a75b17e44acd.json | 7 ++ ...-95380452-1f87-4389-8454-6f91c1f3e002.json | 7 ++ ...-b96abe0f-346a-4350-a96b-cd6ccd7aa966.json | 7 ++ ...-de15dbe8-5231-4e75-9a8e-276175a1d272.json | 7 ++ ...-acf36340-f653-4e00-8699-549e3b0fbc39.json | 7 ++ ...-b2eec4a4-a310-45a4-bf09-ea74862bb758.json | 7 ++ ...-1c2e9093-a868-42cb-b5b2-d4f9d36aaf5c.json | 7 ++ ...-10a09639-41a9-4a6c-a3ae-afdfad89a493.json | 7 ++ ...-56fe5dfc-0079-452f-a406-fba40e6febb7.json | 7 ++ ...-e9ae3fbc-ff3c-4a7d-b889-a686f90bb859.json | 7 ++ .../react-checkbox/etc/react-checkbox.api.md | 19 ++- .../react-checkbox/package.json | 1 + .../src/CheckboxField.ts | 0 .../CheckboxField/CheckboxField.test.tsx | 2 +- .../CheckboxField/CheckboxField.tsx | 13 ++- .../src/components/CheckboxField/index.ts | 0 .../react-checkbox/src/index.ts | 3 + .../CheckboxFieldDefault.stories.tsx | 0 .../CheckboxField/CheckboxFieldDescription.md | 0 .../CheckboxFieldFieldLabel.stories.tsx | 0 .../stories/CheckboxField/index.stories.tsx | 0 .../react-combobox/etc/react-combobox.api.md | 12 ++ .../react-combobox/package.json | 1 + .../src/ComboboxField.ts | 0 .../ComboboxField/ComboboxField.test.tsx | 0 .../ComboboxField/ComboboxField.tsx | 11 +- .../src/components/ComboboxField/index.ts | 0 .../react-combobox/src/index.ts | 3 + .../ComboboxFieldDefault.stories.tsx | 0 .../ComboboxField/ComboboxFieldDescription.md | 0 .../stories/ComboboxField/index.stories.tsx | 0 .../etc/react-components.unstable.api.md | 60 +++++----- .../react-components/src/unstable/index.ts | 67 +++++------ .../react-field/etc/react-field.api.md | 110 +----------------- .../react-components/react-field/package.json | 10 -- .../react-field/src/common/isConformant.ts | 14 --- .../src/components/Field/useFieldStyles.ts | 4 +- .../react-components/react-field/src/index.ts | 32 +---- .../react-input/etc/react-input.api.md | 16 ++- .../react-components/react-input/package.json | 1 + .../src/InputField.ts | 0 .../components/InputField/InputField.test.tsx | 2 +- .../src/components/InputField/InputField.tsx | 11 +- .../src/components/InputField/index.ts | 0 .../react-components/react-input/src/index.ts | 3 + .../InputField/InputFieldDefault.stories.tsx | 0 .../InputField/InputFieldDescription.md | 0 .../stories/InputField/index.stories.tsx | 0 .../react-progress/etc/react-progress.api.md | 16 ++- .../react-progress/package.json | 1 + .../src/ProgressField.ts | 0 .../ProgressField/ProgressField.test.tsx | 0 .../ProgressField/ProgressField.tsx | 11 +- .../src/components/ProgressField/index.ts | 0 .../react-progress/src/index.ts | 3 + .../ProgressFieldDefault.stories.tsx | 0 .../ProgressField/ProgressFieldDescription.md | 0 .../stories/ProgressField/index.stories.tsx | 0 .../react-radio/etc/react-radio.api.md | 14 ++- .../react-components/react-radio/package.json | 1 + .../src/RadioGroupField.ts | 0 .../RadioGroupField/RadioGroupField.test.tsx | 0 .../RadioGroupField/RadioGroupField.tsx | 11 +- .../src/components/RadioGroupField/index.ts | 0 .../react-components/react-radio/src/index.ts | 3 + .../RadioGroupFieldDefault.stories.tsx | 0 .../RadioGroupFieldDescription.md | 0 .../stories/RadioGroupField/index.stories.tsx | 0 .../react-select/etc/react-select.api.md | 12 ++ .../react-select/package.json | 1 + .../src/SelectField.ts | 0 .../SelectField/SelectField.test.tsx | 2 +- .../components/SelectField/SelectField.tsx | 11 +- .../src/components/SelectField/index.ts | 0 .../react-select/src/index.ts | 3 + .../SelectFieldDefault.stories.tsx | 0 .../SelectField/SelectFieldDescription.md | 0 .../stories/SelectField/index.stories.tsx | 0 .../react-slider/etc/react-slider.api.md | 16 ++- .../react-slider/package.json | 1 + .../src/SliderField.ts | 0 .../SliderField/SliderField.test.tsx | 2 +- .../components/SliderField/SliderField.tsx | 11 +- .../src/components/SliderField/index.ts | 0 .../react-slider/src/index.ts | 3 + .../SliderFieldDefault.stories.tsx | 0 .../SliderField/SliderFieldDescription.md | 0 .../stories/SliderField/index.stories.tsx | 0 .../etc/react-spinbutton.api.md | 12 ++ .../react-spinbutton/package.json | 1 + .../src/SpinButtonField.ts | 0 .../SpinButtonField/SpinButtonField.test.tsx | 0 .../SpinButtonField/SpinButtonField.tsx | 11 +- .../src/components/SpinButtonField/index.ts | 0 .../react-spinbutton/src/index.ts | 3 + .../SpinButtonFieldDefault.stories.tsx | 0 .../SpinButtonFieldDescription.md | 0 .../stories/SpinButtonField/index.stories.tsx | 0 .../react-switch/etc/react-switch.api.md | 14 ++- .../react-switch/package.json | 1 + .../src/SwitchField.ts | 0 .../SwitchField/SwitchField.test.tsx | 0 .../components/SwitchField/SwitchField.tsx | 11 +- .../src/components/SwitchField/index.ts | 0 .../react-switch/src/index.ts | 3 + .../SwitchFieldDefault.stories.tsx | 0 .../SwitchField/SwitchFieldDescription.md | 0 .../src/stories/SwitchField/index.stories.tsx | 0 .../react-textarea/etc/react-textarea.api.md | 14 +++ .../react-textarea/package.json | 1 + .../src/TextareaField.ts | 0 .../TextareaField/TextareaField.test.tsx | 0 .../TextareaField/TextareaField.tsx | 11 +- .../src/components/TextareaField/index.ts | 0 .../react-textarea/src/index.ts | 3 + .../TextareaFieldDefault.stories.tsx | 0 .../TextareaField/TextareaFieldDescription.md | 0 .../stories/TextareaField/index.stories.tsx | 0 122 files changed, 428 insertions(+), 286 deletions(-) create mode 100644 change/@fluentui-react-checkbox-f0dd6e86-d619-4d17-979a-7b4efd0a43dd.json create mode 100644 change/@fluentui-react-combobox-c71ab8ad-51c9-4bc6-9ffc-d879cd1a55cd.json create mode 100644 change/@fluentui-react-components-0b5338a3-9929-4ff6-abd6-a75b17e44acd.json create mode 100644 change/@fluentui-react-field-95380452-1f87-4389-8454-6f91c1f3e002.json create mode 100644 change/@fluentui-react-input-b96abe0f-346a-4350-a96b-cd6ccd7aa966.json create mode 100644 change/@fluentui-react-progress-de15dbe8-5231-4e75-9a8e-276175a1d272.json create mode 100644 change/@fluentui-react-radio-acf36340-f653-4e00-8699-549e3b0fbc39.json create mode 100644 change/@fluentui-react-select-b2eec4a4-a310-45a4-bf09-ea74862bb758.json create mode 100644 change/@fluentui-react-slider-1c2e9093-a868-42cb-b5b2-d4f9d36aaf5c.json create mode 100644 change/@fluentui-react-spinbutton-10a09639-41a9-4a6c-a3ae-afdfad89a493.json create mode 100644 change/@fluentui-react-switch-56fe5dfc-0079-452f-a406-fba40e6febb7.json create mode 100644 change/@fluentui-react-textarea-e9ae3fbc-ff3c-4a7d-b889-a686f90bb859.json rename packages/react-components/{react-field => react-checkbox}/src/CheckboxField.ts (100%) rename packages/react-components/{react-field => react-checkbox}/src/components/CheckboxField/CheckboxField.test.tsx (96%) rename packages/react-components/{react-field => react-checkbox}/src/components/CheckboxField/CheckboxField.tsx (80%) rename packages/react-components/{react-field => react-checkbox}/src/components/CheckboxField/index.ts (100%) rename packages/react-components/{react-field/src => react-checkbox}/stories/CheckboxField/CheckboxFieldDefault.stories.tsx (100%) rename packages/react-components/{react-field/src => react-checkbox}/stories/CheckboxField/CheckboxFieldDescription.md (100%) rename packages/react-components/{react-field/src => react-checkbox}/stories/CheckboxField/CheckboxFieldFieldLabel.stories.tsx (100%) rename packages/react-components/{react-field/src => react-checkbox}/stories/CheckboxField/index.stories.tsx (100%) rename packages/react-components/{react-field => react-combobox}/src/ComboboxField.ts (100%) rename packages/react-components/{react-field => react-combobox}/src/components/ComboboxField/ComboboxField.test.tsx (100%) rename packages/react-components/{react-field => react-combobox}/src/components/ComboboxField/ComboboxField.tsx (71%) rename packages/react-components/{react-field => react-combobox}/src/components/ComboboxField/index.ts (100%) rename packages/react-components/{react-field => react-combobox}/src/stories/ComboboxField/ComboboxFieldDefault.stories.tsx (100%) rename packages/react-components/{react-field => react-combobox}/src/stories/ComboboxField/ComboboxFieldDescription.md (100%) rename packages/react-components/{react-field => react-combobox}/src/stories/ComboboxField/index.stories.tsx (100%) delete mode 100644 packages/react-components/react-field/src/common/isConformant.ts rename packages/react-components/{react-field => react-input}/src/InputField.ts (100%) rename packages/react-components/{react-field => react-input}/src/components/InputField/InputField.test.tsx (91%) rename packages/react-components/{react-field => react-input}/src/components/InputField/InputField.tsx (70%) rename packages/react-components/{react-field => react-input}/src/components/InputField/index.ts (100%) rename packages/react-components/{react-field/src => react-input}/stories/InputField/InputFieldDefault.stories.tsx (100%) rename packages/react-components/{react-field/src => react-input}/stories/InputField/InputFieldDescription.md (100%) rename packages/react-components/{react-field/src => react-input}/stories/InputField/index.stories.tsx (100%) rename packages/react-components/{react-field => react-progress}/src/ProgressField.ts (100%) rename packages/react-components/{react-field => react-progress}/src/components/ProgressField/ProgressField.test.tsx (100%) rename packages/react-components/{react-field => react-progress}/src/components/ProgressField/ProgressField.tsx (75%) rename packages/react-components/{react-field => react-progress}/src/components/ProgressField/index.ts (100%) rename packages/react-components/{react-field => react-progress}/src/stories/ProgressField/ProgressFieldDefault.stories.tsx (100%) rename packages/react-components/{react-field => react-progress}/src/stories/ProgressField/ProgressFieldDescription.md (100%) rename packages/react-components/{react-field => react-progress}/src/stories/ProgressField/index.stories.tsx (100%) rename packages/react-components/{react-field => react-radio}/src/RadioGroupField.ts (100%) rename packages/react-components/{react-field => react-radio}/src/components/RadioGroupField/RadioGroupField.test.tsx (100%) rename packages/react-components/{react-field => react-radio}/src/components/RadioGroupField/RadioGroupField.tsx (73%) rename packages/react-components/{react-field => react-radio}/src/components/RadioGroupField/index.ts (100%) rename packages/react-components/{react-field => react-radio}/src/stories/RadioGroupField/RadioGroupFieldDefault.stories.tsx (100%) rename packages/react-components/{react-field => react-radio}/src/stories/RadioGroupField/RadioGroupFieldDescription.md (100%) rename packages/react-components/{react-field => react-radio}/src/stories/RadioGroupField/index.stories.tsx (100%) rename packages/react-components/{react-field => react-select}/src/SelectField.ts (100%) rename packages/react-components/{react-field => react-select}/src/components/SelectField/SelectField.test.tsx (91%) rename packages/react-components/{react-field => react-select}/src/components/SelectField/SelectField.tsx (70%) rename packages/react-components/{react-field => react-select}/src/components/SelectField/index.ts (100%) rename packages/react-components/{react-field/src => react-select}/stories/SelectField/SelectFieldDefault.stories.tsx (100%) rename packages/react-components/{react-field/src => react-select}/stories/SelectField/SelectFieldDescription.md (100%) rename packages/react-components/{react-field/src => react-select}/stories/SelectField/index.stories.tsx (100%) rename packages/react-components/{react-field => react-slider}/src/SliderField.ts (100%) rename packages/react-components/{react-field => react-slider}/src/components/SliderField/SliderField.test.tsx (91%) rename packages/react-components/{react-field => react-slider}/src/components/SliderField/SliderField.tsx (70%) rename packages/react-components/{react-field => react-slider}/src/components/SliderField/index.ts (100%) rename packages/react-components/{react-field/src => react-slider}/stories/SliderField/SliderFieldDefault.stories.tsx (100%) rename packages/react-components/{react-field/src => react-slider}/stories/SliderField/SliderFieldDescription.md (100%) rename packages/react-components/{react-field/src => react-slider}/stories/SliderField/index.stories.tsx (100%) rename packages/react-components/{react-field => react-spinbutton}/src/SpinButtonField.ts (100%) rename packages/react-components/{react-field => react-spinbutton}/src/components/SpinButtonField/SpinButtonField.test.tsx (100%) rename packages/react-components/{react-field => react-spinbutton}/src/components/SpinButtonField/SpinButtonField.tsx (71%) rename packages/react-components/{react-field => react-spinbutton}/src/components/SpinButtonField/index.ts (100%) rename packages/react-components/{react-field => react-spinbutton}/src/stories/SpinButtonField/SpinButtonFieldDefault.stories.tsx (100%) rename packages/react-components/{react-field => react-spinbutton}/src/stories/SpinButtonField/SpinButtonFieldDescription.md (100%) rename packages/react-components/{react-field => react-spinbutton}/src/stories/SpinButtonField/index.stories.tsx (100%) rename packages/react-components/{react-field => react-switch}/src/SwitchField.ts (100%) rename packages/react-components/{react-field => react-switch}/src/components/SwitchField/SwitchField.test.tsx (100%) rename packages/react-components/{react-field => react-switch}/src/components/SwitchField/SwitchField.tsx (76%) rename packages/react-components/{react-field => react-switch}/src/components/SwitchField/index.ts (100%) rename packages/react-components/{react-field => react-switch}/src/stories/SwitchField/SwitchFieldDefault.stories.tsx (100%) rename packages/react-components/{react-field => react-switch}/src/stories/SwitchField/SwitchFieldDescription.md (100%) rename packages/react-components/{react-field => react-switch}/src/stories/SwitchField/index.stories.tsx (100%) rename packages/react-components/{react-field => react-textarea}/src/TextareaField.ts (100%) rename packages/react-components/{react-field => react-textarea}/src/components/TextareaField/TextareaField.test.tsx (100%) rename packages/react-components/{react-field => react-textarea}/src/components/TextareaField/TextareaField.tsx (71%) rename packages/react-components/{react-field => react-textarea}/src/components/TextareaField/index.ts (100%) rename packages/react-components/{react-field => react-textarea}/src/stories/TextareaField/TextareaFieldDefault.stories.tsx (100%) rename packages/react-components/{react-field => react-textarea}/src/stories/TextareaField/TextareaFieldDescription.md (100%) rename packages/react-components/{react-field => react-textarea}/src/stories/TextareaField/index.stories.tsx (100%) diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index 9743e4411c7ea8..1ba68c3591fae2 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -28,6 +28,7 @@ "@fluentui/react-button": "^9.1.7", "@fluentui/react-card": "9.0.0-beta.31", "@fluentui/react-checkbox": "^9.0.11", + "@fluentui/react-combobox": "^9.0.0-beta.14", "@fluentui/react-dialog": "^9.1.0", "@fluentui/react-divider": "^9.1.3", "@fluentui/react-field": "9.0.0-alpha.7", diff --git a/apps/vr-tests-react-components/src/stories/Field.stories.tsx b/apps/vr-tests-react-components/src/stories/Field.stories.tsx index 5dfbd5608bded9..8f1fae22d29d7b 100644 --- a/apps/vr-tests-react-components/src/stories/Field.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx @@ -1,24 +1,21 @@ import * as React from 'react'; import Screener, { Steps } from 'screener-storybook/src/screener'; import { storiesOf } from '@storybook/react'; -import { Radio } from '@fluentui/react-radio'; -import { - CheckboxField, - ComboboxField, - InputField, - ProgressField, - RadioGroupField, - SelectField, - SliderField, - SpinButtonField, - SwitchField, - TextareaField, -} from '@fluentui/react-field'; +import { CheckboxField_unstable as CheckboxField } from '@fluentui/react-checkbox'; +import { ComboboxField_unstable as ComboboxField } from '@fluentui/react-combobox'; import { SparkleFilled } from '@fluentui/react-icons'; -import { FieldControl, FieldPropsWithOptionalComponentProps } from '@fluentui/react-field/src/Field'; +import type { InputFieldProps_unstable as InputFieldProps } from '@fluentui/react-input'; +import { InputField_unstable as InputField } from '@fluentui/react-input'; +import { ProgressField_unstable as ProgressField } from '@fluentui/react-progress'; +import { Radio, RadioGroupField_unstable as RadioGroupField } from '@fluentui/react-radio'; +import { SelectField_unstable as SelectField } from '@fluentui/react-select'; +import { SliderField_unstable as SliderField } from '@fluentui/react-slider'; +import { SpinButtonField_unstable as SpinButtonField } from '@fluentui/react-spinbutton'; +import { SwitchField_unstable as SwitchField } from '@fluentui/react-switch'; +import { TextareaField_unstable as TextareaField } from '@fluentui/react-textarea'; type FieldControlProps = Pick< - FieldPropsWithOptionalComponentProps, + InputFieldProps, 'orientation' | 'required' | 'label' | 'validationState' | 'validationMessage' | 'validationMessageIcon' | 'hint' >; diff --git a/change/@fluentui-react-checkbox-f0dd6e86-d619-4d17-979a-7b4efd0a43dd.json b/change/@fluentui-react-checkbox-f0dd6e86-d619-4d17-979a-7b4efd0a43dd.json new file mode 100644 index 00000000000000..7a633d8a6320c6 --- /dev/null +++ b/change/@fluentui-react-checkbox-f0dd6e86-d619-4d17-979a-7b4efd0a43dd.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Move CheckboxField into the @fluentui/react-checkbox package and export as _unstable", + "packageName": "@fluentui/react-checkbox", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-combobox-c71ab8ad-51c9-4bc6-9ffc-d879cd1a55cd.json b/change/@fluentui-react-combobox-c71ab8ad-51c9-4bc6-9ffc-d879cd1a55cd.json new file mode 100644 index 00000000000000..01192943f793b3 --- /dev/null +++ b/change/@fluentui-react-combobox-c71ab8ad-51c9-4bc6-9ffc-d879cd1a55cd.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: Move InputField into the @fluentui/react-input package and export as _unstable", + "packageName": "@fluentui/react-combobox", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-components-0b5338a3-9929-4ff6-abd6-a75b17e44acd.json b/change/@fluentui-react-components-0b5338a3-9929-4ff6-abd6-a75b17e44acd.json new file mode 100644 index 00000000000000..218ed067146aeb --- /dev/null +++ b/change/@fluentui-react-components-0b5338a3-9929-4ff6-abd6-a75b17e44acd.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Update exports for field components from @fluentui/react-components/unstable", + "packageName": "@fluentui/react-components", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-field-95380452-1f87-4389-8454-6f91c1f3e002.json b/change/@fluentui-react-field-95380452-1f87-4389-8454-6f91c1f3e002.json new file mode 100644 index 00000000000000..864ad06023faf2 --- /dev/null +++ b/change/@fluentui-react-field-95380452-1f87-4389-8454-6f91c1f3e002.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: Move individual field components into their respective packages, and out of @fluentui/react-field", + "packageName": "@fluentui/react-field", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-input-b96abe0f-346a-4350-a96b-cd6ccd7aa966.json b/change/@fluentui-react-input-b96abe0f-346a-4350-a96b-cd6ccd7aa966.json new file mode 100644 index 00000000000000..902ed63eeb2119 --- /dev/null +++ b/change/@fluentui-react-input-b96abe0f-346a-4350-a96b-cd6ccd7aa966.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Move InputField into the @fluentui/react-input package and export as _unstable", + "packageName": "@fluentui/react-input", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-progress-de15dbe8-5231-4e75-9a8e-276175a1d272.json b/change/@fluentui-react-progress-de15dbe8-5231-4e75-9a8e-276175a1d272.json new file mode 100644 index 00000000000000..e3e09cb29e34db --- /dev/null +++ b/change/@fluentui-react-progress-de15dbe8-5231-4e75-9a8e-276175a1d272.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: Move ProgressField into the @fluentui/react-progress package and export as _unstable", + "packageName": "@fluentui/react-progress", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-radio-acf36340-f653-4e00-8699-549e3b0fbc39.json b/change/@fluentui-react-radio-acf36340-f653-4e00-8699-549e3b0fbc39.json new file mode 100644 index 00000000000000..c169dcb85179ef --- /dev/null +++ b/change/@fluentui-react-radio-acf36340-f653-4e00-8699-549e3b0fbc39.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Move RadioGroupField into the @fluentui/react-radio package and export as _unstable", + "packageName": "@fluentui/react-radio", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-select-b2eec4a4-a310-45a4-bf09-ea74862bb758.json b/change/@fluentui-react-select-b2eec4a4-a310-45a4-bf09-ea74862bb758.json new file mode 100644 index 00000000000000..7acde6c0580564 --- /dev/null +++ b/change/@fluentui-react-select-b2eec4a4-a310-45a4-bf09-ea74862bb758.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: Move SelectField into the @fluentui/react-select package and export as _unstable", + "packageName": "@fluentui/react-select", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-slider-1c2e9093-a868-42cb-b5b2-d4f9d36aaf5c.json b/change/@fluentui-react-slider-1c2e9093-a868-42cb-b5b2-d4f9d36aaf5c.json new file mode 100644 index 00000000000000..873a176ee81c80 --- /dev/null +++ b/change/@fluentui-react-slider-1c2e9093-a868-42cb-b5b2-d4f9d36aaf5c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Move SliderField into the @fluentui/react-slider package and export as _unstable", + "packageName": "@fluentui/react-slider", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-spinbutton-10a09639-41a9-4a6c-a3ae-afdfad89a493.json b/change/@fluentui-react-spinbutton-10a09639-41a9-4a6c-a3ae-afdfad89a493.json new file mode 100644 index 00000000000000..61e20e93f83462 --- /dev/null +++ b/change/@fluentui-react-spinbutton-10a09639-41a9-4a6c-a3ae-afdfad89a493.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Move SpinButtonField into the @fluentui/react-spinbutton package and export as _unstable", + "packageName": "@fluentui/react-spinbutton", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-switch-56fe5dfc-0079-452f-a406-fba40e6febb7.json b/change/@fluentui-react-switch-56fe5dfc-0079-452f-a406-fba40e6febb7.json new file mode 100644 index 00000000000000..92d44c54ab8969 --- /dev/null +++ b/change/@fluentui-react-switch-56fe5dfc-0079-452f-a406-fba40e6febb7.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Move SwitchField into the @fluentui/react-switch package and export as _unstable", + "packageName": "@fluentui/react-switch", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-textarea-e9ae3fbc-ff3c-4a7d-b889-a686f90bb859.json b/change/@fluentui-react-textarea-e9ae3fbc-ff3c-4a7d-b889-a686f90bb859.json new file mode 100644 index 00000000000000..80a64fee7203a2 --- /dev/null +++ b/change/@fluentui-react-textarea-e9ae3fbc-ff3c-4a7d-b889-a686f90bb859.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "chore: Move TextareaField into the @fluentui/react-textarea package and export as _unstable", + "packageName": "@fluentui/react-textarea", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-checkbox/etc/react-checkbox.api.md b/packages/react-components/react-checkbox/etc/react-checkbox.api.md index 77b94ea4e82ae1..a9f6ea7b129e6c 100644 --- a/packages/react-components/react-checkbox/etc/react-checkbox.api.md +++ b/packages/react-components/react-checkbox/etc/react-checkbox.api.md @@ -8,11 +8,14 @@ import { ComponentProps } from '@fluentui/react-utilities'; import { ComponentState } from '@fluentui/react-utilities'; -import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import { FieldControl } from '@fluentui/react-field'; +import type { FieldProps } from '@fluentui/react-field'; +import { FieldSlots } from '@fluentui/react-field'; +import { ForwardRefComponent } from '@fluentui/react-utilities'; import { Label } from '@fluentui/react-label'; import * as React_2 from 'react'; import { Slot } from '@fluentui/react-utilities'; -import type { SlotClassNames } from '@fluentui/react-utilities'; +import { SlotClassNames } from '@fluentui/react-utilities'; // @public export const Checkbox: ForwardRefComponent; @@ -20,6 +23,18 @@ export const Checkbox: ForwardRefComponent; // @public (undocumented) export const checkboxClassNames: SlotClassNames; +// @public (undocumented) +export const CheckboxField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const checkboxFieldClassNames: SlotClassNames>; + +// @public (undocumented) +export type CheckboxFieldProps_unstable = Omit, 'label'> & { + label?: CheckboxProps['label']; + fieldLabel?: FieldProps['label']; +}; + // @public export interface CheckboxOnChangeData { // (undocumented) diff --git a/packages/react-components/react-checkbox/package.json b/packages/react-components/react-checkbox/package.json index b1aec2ca284c12..fb4bacae9a81ad 100644 --- a/packages/react-components/react-checkbox/package.json +++ b/packages/react-components/react-checkbox/package.json @@ -31,6 +31,7 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { + "@fluentui/react-field": "9.0.0-alpha.7", "@fluentui/react-icons": "^2.0.175", "@fluentui/react-label": "^9.0.9", "@fluentui/react-tabster": "^9.2.1", diff --git a/packages/react-components/react-field/src/CheckboxField.ts b/packages/react-components/react-checkbox/src/CheckboxField.ts similarity index 100% rename from packages/react-components/react-field/src/CheckboxField.ts rename to packages/react-components/react-checkbox/src/CheckboxField.ts diff --git a/packages/react-components/react-field/src/components/CheckboxField/CheckboxField.test.tsx b/packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.test.tsx similarity index 96% rename from packages/react-components/react-field/src/components/CheckboxField/CheckboxField.test.tsx rename to packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.test.tsx index 6e9617c1eb90f9..9c72ba88a9a040 100644 --- a/packages/react-components/react-field/src/components/CheckboxField/CheckboxField.test.tsx +++ b/packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.test.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { isConformant } from '../../common/isConformant'; +import { isConformant } from '../../testing/isConformant'; import { CheckboxField } from './CheckboxField'; describe('CheckboxField', () => { diff --git a/packages/react-components/react-field/src/components/CheckboxField/CheckboxField.tsx b/packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.tsx similarity index 80% rename from packages/react-components/react-field/src/components/CheckboxField/CheckboxField.tsx rename to packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.tsx index f8c26120b101bf..321a658dba5f6a 100644 --- a/packages/react-components/react-field/src/components/CheckboxField/CheckboxField.tsx +++ b/packages/react-components/react-checkbox/src/components/CheckboxField/CheckboxField.tsx @@ -1,9 +1,14 @@ import * as React from 'react'; -import type { CheckboxProps } from '@fluentui/react-checkbox'; -import { Checkbox } from '@fluentui/react-checkbox'; +import type { FieldProps } from '@fluentui/react-field'; +import { + getFieldClassNames, + renderField_unstable, + useFieldStyles_unstable, + useField_unstable, +} from '@fluentui/react-field'; import { ForwardRefComponent } from '@fluentui/react-utilities'; -import type { FieldProps } from '../../Field'; -import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field'; +import type { CheckboxProps } from '../../Checkbox'; +import { Checkbox } from '../../Checkbox'; export type CheckboxFieldProps = Omit, 'label'> & { /** diff --git a/packages/react-components/react-field/src/components/CheckboxField/index.ts b/packages/react-components/react-checkbox/src/components/CheckboxField/index.ts similarity index 100% rename from packages/react-components/react-field/src/components/CheckboxField/index.ts rename to packages/react-components/react-checkbox/src/components/CheckboxField/index.ts diff --git a/packages/react-components/react-checkbox/src/index.ts b/packages/react-components/react-checkbox/src/index.ts index 1bb3babd0ea8bb..21a66ccad202f9 100644 --- a/packages/react-components/react-checkbox/src/index.ts +++ b/packages/react-components/react-checkbox/src/index.ts @@ -6,3 +6,6 @@ export { useCheckbox_unstable, } from './Checkbox'; export type { CheckboxOnChangeData, CheckboxProps, CheckboxSlots, CheckboxState } from './Checkbox'; + +export { CheckboxField as CheckboxField_unstable, checkboxFieldClassNames } from './CheckboxField'; +export type { CheckboxFieldProps as CheckboxFieldProps_unstable } from './CheckboxField'; diff --git a/packages/react-components/react-field/src/stories/CheckboxField/CheckboxFieldDefault.stories.tsx b/packages/react-components/react-checkbox/stories/CheckboxField/CheckboxFieldDefault.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/CheckboxField/CheckboxFieldDefault.stories.tsx rename to packages/react-components/react-checkbox/stories/CheckboxField/CheckboxFieldDefault.stories.tsx diff --git a/packages/react-components/react-field/src/stories/CheckboxField/CheckboxFieldDescription.md b/packages/react-components/react-checkbox/stories/CheckboxField/CheckboxFieldDescription.md similarity index 100% rename from packages/react-components/react-field/src/stories/CheckboxField/CheckboxFieldDescription.md rename to packages/react-components/react-checkbox/stories/CheckboxField/CheckboxFieldDescription.md diff --git a/packages/react-components/react-field/src/stories/CheckboxField/CheckboxFieldFieldLabel.stories.tsx b/packages/react-components/react-checkbox/stories/CheckboxField/CheckboxFieldFieldLabel.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/CheckboxField/CheckboxFieldFieldLabel.stories.tsx rename to packages/react-components/react-checkbox/stories/CheckboxField/CheckboxFieldFieldLabel.stories.tsx diff --git a/packages/react-components/react-field/src/stories/CheckboxField/index.stories.tsx b/packages/react-components/react-checkbox/stories/CheckboxField/index.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/CheckboxField/index.stories.tsx rename to packages/react-components/react-checkbox/stories/CheckboxField/index.stories.tsx diff --git a/packages/react-components/react-combobox/etc/react-combobox.api.md b/packages/react-components/react-combobox/etc/react-combobox.api.md index 0b3719b173c67d..2b7bf39e9bb3d1 100644 --- a/packages/react-components/react-combobox/etc/react-combobox.api.md +++ b/packages/react-components/react-combobox/etc/react-combobox.api.md @@ -9,6 +9,9 @@ import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; import { FC } from 'react'; +import { FieldControl } from '@fluentui/react-field'; +import type { FieldProps } from '@fluentui/react-field'; +import { FieldSlots } from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import type { PositioningShorthand } from '@fluentui/react-positioning'; import { Provider } from 'react'; @@ -29,6 +32,15 @@ export type ComboboxContextValue = Pick; + +// @public (undocumented) +export const comboboxFieldClassNames: SlotClassNames>; + +// @public (undocumented) +export type ComboboxFieldProps_unstable = FieldProps; + // @public (undocumented) export type ComboboxOpenChangeData = ComboboxBaseOpenChangeData; diff --git a/packages/react-components/react-combobox/package.json b/packages/react-components/react-combobox/package.json index cbda7396cd0377..1fa2533e8d7bc8 100644 --- a/packages/react-components/react-combobox/package.json +++ b/packages/react-components/react-combobox/package.json @@ -34,6 +34,7 @@ "dependencies": { "@fluentui/keyboard-keys": "^9.0.0", "@fluentui/react-context-selector": "^9.1.0", + "@fluentui/react-field": "9.0.0-alpha.7", "@fluentui/react-icons": "^2.0.175", "@fluentui/react-portal": "^9.0.9", "@fluentui/react-positioning": "^9.3.0", diff --git a/packages/react-components/react-field/src/ComboboxField.ts b/packages/react-components/react-combobox/src/ComboboxField.ts similarity index 100% rename from packages/react-components/react-field/src/ComboboxField.ts rename to packages/react-components/react-combobox/src/ComboboxField.ts diff --git a/packages/react-components/react-field/src/components/ComboboxField/ComboboxField.test.tsx b/packages/react-components/react-combobox/src/components/ComboboxField/ComboboxField.test.tsx similarity index 100% rename from packages/react-components/react-field/src/components/ComboboxField/ComboboxField.test.tsx rename to packages/react-components/react-combobox/src/components/ComboboxField/ComboboxField.test.tsx diff --git a/packages/react-components/react-field/src/components/ComboboxField/ComboboxField.tsx b/packages/react-components/react-combobox/src/components/ComboboxField/ComboboxField.tsx similarity index 71% rename from packages/react-components/react-field/src/components/ComboboxField/ComboboxField.tsx rename to packages/react-components/react-combobox/src/components/ComboboxField/ComboboxField.tsx index 88690183f3a9c5..592fd9b45c8e96 100644 --- a/packages/react-components/react-field/src/components/ComboboxField/ComboboxField.tsx +++ b/packages/react-components/react-combobox/src/components/ComboboxField/ComboboxField.tsx @@ -1,8 +1,13 @@ import * as React from 'react'; -import { Combobox } from '@fluentui/react-combobox'; +import type { FieldProps } from '@fluentui/react-field'; +import { + getFieldClassNames, + renderField_unstable, + useFieldStyles_unstable, + useField_unstable, +} from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import type { FieldProps } from '../../Field'; -import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field'; +import { Combobox } from '../../Combobox'; export type ComboboxFieldProps = FieldProps; diff --git a/packages/react-components/react-field/src/components/ComboboxField/index.ts b/packages/react-components/react-combobox/src/components/ComboboxField/index.ts similarity index 100% rename from packages/react-components/react-field/src/components/ComboboxField/index.ts rename to packages/react-components/react-combobox/src/components/ComboboxField/index.ts diff --git a/packages/react-components/react-combobox/src/index.ts b/packages/react-components/react-combobox/src/index.ts index bb95cbfb3cb5b4..2466a11ac994c7 100644 --- a/packages/react-components/react-combobox/src/index.ts +++ b/packages/react-components/react-combobox/src/index.ts @@ -58,3 +58,6 @@ export { useOptionGroup_unstable, } from './OptionGroup'; export type { OptionGroupProps, OptionGroupSlots, OptionGroupState } from './OptionGroup'; + +export { ComboboxField as ComboboxField_unstable, comboboxFieldClassNames } from './ComboboxField'; +export type { ComboboxFieldProps as ComboboxFieldProps_unstable } from './ComboboxField'; diff --git a/packages/react-components/react-field/src/stories/ComboboxField/ComboboxFieldDefault.stories.tsx b/packages/react-components/react-combobox/src/stories/ComboboxField/ComboboxFieldDefault.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/ComboboxField/ComboboxFieldDefault.stories.tsx rename to packages/react-components/react-combobox/src/stories/ComboboxField/ComboboxFieldDefault.stories.tsx diff --git a/packages/react-components/react-field/src/stories/ComboboxField/ComboboxFieldDescription.md b/packages/react-components/react-combobox/src/stories/ComboboxField/ComboboxFieldDescription.md similarity index 100% rename from packages/react-components/react-field/src/stories/ComboboxField/ComboboxFieldDescription.md rename to packages/react-components/react-combobox/src/stories/ComboboxField/ComboboxFieldDescription.md diff --git a/packages/react-components/react-field/src/stories/ComboboxField/index.stories.tsx b/packages/react-components/react-combobox/src/stories/ComboboxField/index.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/ComboboxField/index.stories.tsx rename to packages/react-components/react-combobox/src/stories/ComboboxField/index.stories.tsx diff --git a/packages/react-components/react-components/etc/react-components.unstable.api.md b/packages/react-components/react-components/etc/react-components.unstable.api.md index 284fa37ded125e..1057aff1024a4e 100644 --- a/packages/react-components/react-components/etc/react-components.unstable.api.md +++ b/packages/react-components/react-components/etc/react-components.unstable.api.md @@ -47,17 +47,17 @@ import { CardPreviewState } from '@fluentui/react-card'; import { CardProps } from '@fluentui/react-card'; import { CardSlots } from '@fluentui/react-card'; import { CardState } from '@fluentui/react-card'; -import { CheckboxField } from '@fluentui/react-field'; -import { checkboxFieldClassNames } from '@fluentui/react-field'; -import { CheckboxFieldProps } from '@fluentui/react-field'; +import { CheckboxField_unstable as CheckboxField } from '@fluentui/react-checkbox'; +import { checkboxFieldClassNames } from '@fluentui/react-checkbox'; +import { CheckboxFieldProps_unstable as CheckboxFieldProps } from '@fluentui/react-checkbox'; import { ColumnDefinition } from '@fluentui/react-table'; import { ColumnId } from '@fluentui/react-table'; import { Combobox } from '@fluentui/react-combobox'; import { comboboxClassNames } from '@fluentui/react-combobox'; import { ComboboxContextValues } from '@fluentui/react-combobox'; -import { ComboboxField } from '@fluentui/react-field'; -import { comboboxFieldClassNames } from '@fluentui/react-field'; -import { ComboboxFieldProps } from '@fluentui/react-field'; +import { ComboboxField_unstable as ComboboxField } from '@fluentui/react-combobox'; +import { comboboxFieldClassNames } from '@fluentui/react-combobox'; +import { ComboboxFieldProps_unstable as ComboboxFieldProps } from '@fluentui/react-combobox'; import { ComboboxOpenChangeData } from '@fluentui/react-combobox'; import { ComboboxOpenEvents } from '@fluentui/react-combobox'; import { ComboboxProps } from '@fluentui/react-combobox'; @@ -81,9 +81,9 @@ import { FieldProps } from '@fluentui/react-field'; import { FieldSlots } from '@fluentui/react-field'; import { FieldState } from '@fluentui/react-field'; import { getFieldClassNames } from '@fluentui/react-field'; -import { InputField } from '@fluentui/react-field'; -import { inputFieldClassNames } from '@fluentui/react-field'; -import { InputFieldProps } from '@fluentui/react-field'; +import { InputField_unstable as InputField } from '@fluentui/react-input'; +import { inputFieldClassNames } from '@fluentui/react-input'; +import { InputFieldProps_unstable as InputFieldProps } from '@fluentui/react-input'; import { Listbox } from '@fluentui/react-combobox'; import { listboxClassNames } from '@fluentui/react-combobox'; import { ListboxContextValues } from '@fluentui/react-combobox'; @@ -114,15 +114,15 @@ import { PersonaSlots } from '@fluentui/react-persona'; import { PersonaState } from '@fluentui/react-persona'; import { Progress } from '@fluentui/react-progress'; import { progressClassNames } from '@fluentui/react-progress'; -import { ProgressField } from '@fluentui/react-field'; -import { progressFieldClassNames } from '@fluentui/react-field'; -import { ProgressFieldProps } from '@fluentui/react-field'; +import { ProgressField_unstable as ProgressField } from '@fluentui/react-progress'; +import { progressFieldClassNames } from '@fluentui/react-progress'; +import { ProgressFieldProps_unstable as ProgressFieldProps } from '@fluentui/react-progress'; import { ProgressProps } from '@fluentui/react-progress'; import { ProgressSlots } from '@fluentui/react-progress'; import { ProgressState } from '@fluentui/react-progress'; -import { RadioGroupField } from '@fluentui/react-field'; -import { radioGroupFieldClassNames } from '@fluentui/react-field'; -import { RadioGroupFieldProps } from '@fluentui/react-field'; +import { RadioGroupField_unstable as RadioGroupField } from '@fluentui/react-radio'; +import { radioGroupFieldClassNames } from '@fluentui/react-radio'; +import { RadioGroupFieldProps_unstable as RadioGroupFieldProps } from '@fluentui/react-radio'; import { renderAlert_unstable } from '@fluentui/react-alert'; import { renderAvatarGroup_unstable } from '@fluentui/react-avatar'; import { renderAvatarGroupItem_unstable } from '@fluentui/react-avatar'; @@ -154,22 +154,22 @@ import { RowId } from '@fluentui/react-table'; import { RowState } from '@fluentui/react-table'; import { Select } from '@fluentui/react-select'; import { selectClassNames } from '@fluentui/react-select'; -import { SelectField } from '@fluentui/react-field'; -import { selectFieldClassNames } from '@fluentui/react-field'; -import { SelectFieldProps } from '@fluentui/react-field'; +import { SelectField_unstable as SelectField } from '@fluentui/react-select'; +import { selectFieldClassNames } from '@fluentui/react-select'; +import { SelectFieldProps_unstable as SelectFieldProps } from '@fluentui/react-select'; import { SelectProps } from '@fluentui/react-select'; import { SelectSlots } from '@fluentui/react-select'; import { SelectState } from '@fluentui/react-select'; -import { SliderField } from '@fluentui/react-field'; -import { sliderFieldClassNames } from '@fluentui/react-field'; -import { SliderFieldProps } from '@fluentui/react-field'; +import { SliderField_unstable as SliderField } from '@fluentui/react-slider'; +import { sliderFieldClassNames } from '@fluentui/react-slider'; +import { SliderFieldProps_unstable as SliderFieldProps } from '@fluentui/react-slider'; import { SortDirection } from '@fluentui/react-table'; -import { SpinButtonField } from '@fluentui/react-field'; -import { spinButtonFieldClassNames } from '@fluentui/react-field'; -import { SpinButtonFieldProps } from '@fluentui/react-field'; -import { SwitchField } from '@fluentui/react-field'; -import { switchFieldClassNames } from '@fluentui/react-field'; -import { SwitchFieldProps } from '@fluentui/react-field'; +import { SpinButtonField_unstable as SpinButtonField } from '@fluentui/react-spinbutton'; +import { spinButtonFieldClassNames } from '@fluentui/react-spinbutton'; +import { SpinButtonFieldProps_unstable as SpinButtonFieldProps } from '@fluentui/react-spinbutton'; +import { SwitchField_unstable as SwitchField } from '@fluentui/react-switch'; +import { switchFieldClassNames } from '@fluentui/react-switch'; +import { SwitchFieldProps_unstable as SwitchFieldProps } from '@fluentui/react-switch'; import { Table } from '@fluentui/react-table'; import { TableBody } from '@fluentui/react-table'; import { tableBodyClassName } from '@fluentui/react-table'; @@ -224,9 +224,9 @@ import { TableSlots } from '@fluentui/react-table'; import { TableSortState } from '@fluentui/react-table'; import { TableState } from '@fluentui/react-table'; import { TableStatePlugin } from '@fluentui/react-table'; -import { TextareaField } from '@fluentui/react-field'; -import { textareaFieldClassNames } from '@fluentui/react-field'; -import { TextareaFieldProps } from '@fluentui/react-field'; +import { TextareaField_unstable as TextareaField } from '@fluentui/react-textarea'; +import { textareaFieldClassNames } from '@fluentui/react-textarea'; +import { TextareaFieldProps_unstable as TextareaFieldProps } from '@fluentui/react-textarea'; import { Toolbar } from '@fluentui/react-toolbar'; import { ToolbarButton } from '@fluentui/react-toolbar'; import { ToolbarButtonProps } from '@fluentui/react-toolbar'; diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts index 64f5386ebd9bd3..2cf3b8124806cd 100644 --- a/packages/react-components/react-components/src/unstable/index.ts +++ b/packages/react-components/react-components/src/unstable/index.ts @@ -278,48 +278,43 @@ export type { CreateColumnOptions, } from '@fluentui/react-table'; +export { CheckboxField_unstable as CheckboxField, checkboxFieldClassNames } from '@fluentui/react-checkbox'; +export type { CheckboxFieldProps_unstable as CheckboxFieldProps } from '@fluentui/react-checkbox'; + +export { ComboboxField_unstable as ComboboxField, comboboxFieldClassNames } from '@fluentui/react-combobox'; +export type { ComboboxFieldProps_unstable as ComboboxFieldProps } from '@fluentui/react-combobox'; + +export { InputField_unstable as InputField, inputFieldClassNames } from '@fluentui/react-input'; +export type { InputFieldProps_unstable as InputFieldProps } from '@fluentui/react-input'; + +export { ProgressField_unstable as ProgressField, progressFieldClassNames } from '@fluentui/react-progress'; +export type { ProgressFieldProps_unstable as ProgressFieldProps } from '@fluentui/react-progress'; + +export { RadioGroupField_unstable as RadioGroupField, radioGroupFieldClassNames } from '@fluentui/react-radio'; +export type { RadioGroupFieldProps_unstable as RadioGroupFieldProps } from '@fluentui/react-radio'; + +export { SelectField_unstable as SelectField, selectFieldClassNames } from '@fluentui/react-select'; +export type { SelectFieldProps_unstable as SelectFieldProps } from '@fluentui/react-select'; + +export { SliderField_unstable as SliderField, sliderFieldClassNames } from '@fluentui/react-slider'; +export type { SliderFieldProps_unstable as SliderFieldProps } from '@fluentui/react-slider'; + +export { SpinButtonField_unstable as SpinButtonField, spinButtonFieldClassNames } from '@fluentui/react-spinbutton'; +export type { SpinButtonFieldProps_unstable as SpinButtonFieldProps } from '@fluentui/react-spinbutton'; + +export { SwitchField_unstable as SwitchField, switchFieldClassNames } from '@fluentui/react-switch'; +export type { SwitchFieldProps_unstable as SwitchFieldProps } from '@fluentui/react-switch'; + +export { TextareaField_unstable as TextareaField, textareaFieldClassNames } from '@fluentui/react-textarea'; +export type { TextareaFieldProps_unstable as TextareaFieldProps } from '@fluentui/react-textarea'; + export { - CheckboxField, - checkboxFieldClassNames, - ComboboxField, - comboboxFieldClassNames, getFieldClassNames, - InputField, - inputFieldClassNames, - ProgressField, - progressFieldClassNames, - RadioGroupField, - radioGroupFieldClassNames, renderField_unstable, - SelectField, - selectFieldClassNames, - SliderField, - sliderFieldClassNames, - SpinButtonField, - spinButtonFieldClassNames, - SwitchField, - switchFieldClassNames, - TextareaField, - textareaFieldClassNames, useFieldStyles_unstable, useField_unstable, } from '@fluentui/react-field'; -export type { - CheckboxFieldProps, - ComboboxFieldProps, - FieldConfig, - FieldProps, - FieldSlots, - FieldState, - InputFieldProps, - ProgressFieldProps, - RadioGroupFieldProps, - SelectFieldProps, - SliderFieldProps, - SpinButtonFieldProps, - SwitchFieldProps, - TextareaFieldProps, -} from '@fluentui/react-field'; +export type { FieldConfig, FieldProps, FieldSlots, FieldState } from '@fluentui/react-field'; export { Persona, diff --git a/packages/react-components/react-field/etc/react-field.api.md b/packages/react-components/react-field/etc/react-field.api.md index 6f6faa615973cf..3fee9ffbe65eea 100644 --- a/packages/react-components/react-field/etc/react-field.api.md +++ b/packages/react-components/react-field/etc/react-field.api.md @@ -6,47 +6,14 @@ /// -import { Checkbox } from '@fluentui/react-checkbox'; -import type { CheckboxProps } from '@fluentui/react-checkbox'; -import { Combobox } from '@fluentui/react-combobox'; import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; -import { ForwardRefComponent } from '@fluentui/react-utilities'; -import { Input } from '@fluentui/react-input'; import { Label } from '@fluentui/react-label'; -import { Progress } from '@fluentui/react-progress'; -import { RadioGroup } from '@fluentui/react-radio'; import * as React_2 from 'react'; -import { Select } from '@fluentui/react-select'; -import { Slider } from '@fluentui/react-slider'; import type { Slot } from '@fluentui/react-utilities'; -import { SlotClassNames } from '@fluentui/react-utilities'; +import type { SlotClassNames } from '@fluentui/react-utilities'; import type { SlotRenderFunction } from '@fluentui/react-utilities'; import type { SlotShorthandValue } from '@fluentui/react-utilities'; -import { SpinButton } from '@fluentui/react-spinbutton'; -import { Switch } from '@fluentui/react-switch'; -import { Textarea } from '@fluentui/react-textarea'; - -// @public (undocumented) -export const CheckboxField: ForwardRefComponent; - -// @public (undocumented) -export const checkboxFieldClassNames: SlotClassNames>; - -// @public (undocumented) -export type CheckboxFieldProps = Omit, 'label'> & { - label?: CheckboxProps['label']; - fieldLabel?: FieldProps['label']; -}; - -// @public (undocumented) -export const ComboboxField: ForwardRefComponent; - -// @public (undocumented) -export const comboboxFieldClassNames: SlotClassNames>; - -// @public (undocumented) -export type ComboboxFieldProps = FieldProps; // @public export type FieldConfig = { @@ -56,6 +23,9 @@ export type FieldConfig = { ariaInvalidOnError?: boolean; }; +// @public +export type FieldControl = React_2.VoidFunctionComponent, 'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage'>>; + // @public export type FieldProps = ComponentProps>, 'control'> & { orientation?: 'vertical' | 'horizontal'; @@ -80,81 +50,9 @@ export type FieldState = ComponentState SlotClassNames>; -// @public (undocumented) -export const InputField: ForwardRefComponent; - -// @public (undocumented) -export const inputFieldClassNames: SlotClassNames>; - -// @public (undocumented) -export type InputFieldProps = FieldProps; - -// @public (undocumented) -export const ProgressField: ForwardRefComponent; - -// @public (undocumented) -export const progressFieldClassNames: SlotClassNames>; - -// @public (undocumented) -export type ProgressFieldProps = FieldProps; - -// @public (undocumented) -export const RadioGroupField: ForwardRefComponent; - -// @public (undocumented) -export const radioGroupFieldClassNames: SlotClassNames>; - -// @public (undocumented) -export type RadioGroupFieldProps = FieldProps; - // @public export const renderField_unstable: (state: FieldState) => JSX.Element; -// @public (undocumented) -export const SelectField: ForwardRefComponent; - -// @public (undocumented) -export const selectFieldClassNames: SlotClassNames>; - -// @public (undocumented) -export type SelectFieldProps = FieldProps; - -// @public (undocumented) -export const SliderField: ForwardRefComponent; - -// @public (undocumented) -export const sliderFieldClassNames: SlotClassNames>; - -// @public (undocumented) -export type SliderFieldProps = FieldProps; - -// @public (undocumented) -export const SpinButtonField: ForwardRefComponent; - -// @public (undocumented) -export const spinButtonFieldClassNames: SlotClassNames>; - -// @public (undocumented) -export type SpinButtonFieldProps = FieldProps; - -// @public (undocumented) -export const SwitchField: ForwardRefComponent; - -// @public (undocumented) -export const switchFieldClassNames: SlotClassNames>; - -// @public (undocumented) -export type SwitchFieldProps = Omit, 'labelPosition'>; - -// @public (undocumented) -export const TextareaField: ForwardRefComponent; - -// @public (undocumented) -export const textareaFieldClassNames: SlotClassNames>; - -// @public (undocumented) -export type TextareaFieldProps = FieldProps; - // @public export const useField_unstable: (props: FieldPropsWithOptionalComponentProps, ref: React_2.Ref, params: FieldConfig) => FieldState; diff --git a/packages/react-components/react-field/package.json b/packages/react-components/react-field/package.json index 9fdf7f31c01227..1a05cc4ca93dea 100644 --- a/packages/react-components/react-field/package.json +++ b/packages/react-components/react-field/package.json @@ -31,19 +31,9 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { - "@fluentui/react-checkbox": "^9.0.11", - "@fluentui/react-combobox": "^9.0.0-beta.14", "@fluentui/react-context-selector": "^9.1.0", "@fluentui/react-icons": "^2.0.175", - "@fluentui/react-input": "^9.2.4", "@fluentui/react-label": "^9.0.9", - "@fluentui/react-progress": "9.0.0-alpha.4", - "@fluentui/react-radio": "^9.0.10", - "@fluentui/react-select": "9.0.0-beta.13", - "@fluentui/react-slider": "^9.0.9", - "@fluentui/react-spinbutton": "^9.0.7", - "@fluentui/react-switch": "^9.0.10", - "@fluentui/react-textarea": "^9.1.4", "@fluentui/react-theme": "^9.1.1", "@fluentui/react-utilities": "^9.2.0", "@griffel/react": "^1.4.2", diff --git a/packages/react-components/react-field/src/common/isConformant.ts b/packages/react-components/react-field/src/common/isConformant.ts deleted file mode 100644 index 77f88408cbd839..00000000000000 --- a/packages/react-components/react-field/src/common/isConformant.ts +++ /dev/null @@ -1,14 +0,0 @@ -import { isConformant as baseIsConformant } from '@fluentui/react-conformance'; -import type { IsConformantOptions, TestObject } from '@fluentui/react-conformance'; -import griffelTests from '@fluentui/react-conformance-griffel'; - -export function isConformant( - testInfo: Omit, 'componentPath'> & { componentPath?: string }, -) { - const defaultOptions: Partial> = { - componentPath: require.main?.filename.replace('.test', ''), - extraTests: griffelTests as TestObject, - }; - - baseIsConformant(defaultOptions, testInfo); -} diff --git a/packages/react-components/react-field/src/components/Field/useFieldStyles.ts b/packages/react-components/react-field/src/components/Field/useFieldStyles.ts index 964cb96eb7b3c9..bf37191fc707ae 100644 --- a/packages/react-components/react-field/src/components/Field/useFieldStyles.ts +++ b/packages/react-components/react-field/src/components/Field/useFieldStyles.ts @@ -1,7 +1,7 @@ +import { tokens, typographyStyles } from '@fluentui/react-theme'; +import type { SlotClassNames } from '@fluentui/react-utilities'; import { makeStyles, mergeClasses } from '@griffel/react'; import type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types'; -import type { SlotClassNames } from '@fluentui/react-utilities'; -import { tokens, typographyStyles } from '@fluentui/react-theme'; export const getFieldClassNames = (name: string): SlotClassNames> => ({ root: `fui-${name}`, diff --git a/packages/react-components/react-field/src/index.ts b/packages/react-components/react-field/src/index.ts index b5fb4651bf3865..8bb2bf317eca5d 100644 --- a/packages/react-components/react-field/src/index.ts +++ b/packages/react-components/react-field/src/index.ts @@ -1,32 +1,2 @@ export { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field'; -export type { FieldProps, FieldSlots, FieldState, FieldConfig } from './Field'; - -export { CheckboxField, checkboxFieldClassNames } from './CheckboxField'; -export type { CheckboxFieldProps } from './CheckboxField'; - -export { ComboboxField, comboboxFieldClassNames } from './ComboboxField'; -export type { ComboboxFieldProps } from './ComboboxField'; - -export { InputField, inputFieldClassNames } from './InputField'; -export type { InputFieldProps } from './InputField'; - -export { ProgressField, progressFieldClassNames } from './ProgressField'; -export type { ProgressFieldProps } from './ProgressField'; - -export { RadioGroupField, radioGroupFieldClassNames } from './RadioGroupField'; -export type { RadioGroupFieldProps } from './RadioGroupField'; - -export { SelectField, selectFieldClassNames } from './SelectField'; -export type { SelectFieldProps } from './SelectField'; - -export { SliderField, sliderFieldClassNames } from './SliderField'; -export type { SliderFieldProps } from './SliderField'; - -export { SpinButtonField, spinButtonFieldClassNames } from './SpinButtonField'; -export type { SpinButtonFieldProps } from './SpinButtonField'; - -export { SwitchField, switchFieldClassNames } from './SwitchField'; -export type { SwitchFieldProps } from './SwitchField'; - -export { TextareaField, textareaFieldClassNames } from './TextareaField'; -export type { TextareaFieldProps } from './TextareaField'; +export type { FieldConfig, FieldControl, FieldProps, FieldSlots, FieldState } from './Field'; diff --git a/packages/react-components/react-input/etc/react-input.api.md b/packages/react-components/react-input/etc/react-input.api.md index e041af374e7d9f..8e555a21d414ef 100644 --- a/packages/react-components/react-input/etc/react-input.api.md +++ b/packages/react-components/react-input/etc/react-input.api.md @@ -4,12 +4,17 @@ ```ts +/// + import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; +import { FieldControl } from '@fluentui/react-field'; +import type { FieldProps } from '@fluentui/react-field'; +import { FieldSlots } from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; -import type { SlotClassNames } from '@fluentui/react-utilities'; +import { SlotClassNames } from '@fluentui/react-utilities'; // @public export const Input: ForwardRefComponent; @@ -17,6 +22,15 @@ export const Input: ForwardRefComponent; // @public (undocumented) export const inputClassNames: SlotClassNames; +// @public (undocumented) +export const InputField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const inputFieldClassNames: SlotClassNames>; + +// @public (undocumented) +export type InputFieldProps_unstable = FieldProps; + // @public export type InputOnChangeData = { value: string; diff --git a/packages/react-components/react-input/package.json b/packages/react-components/react-input/package.json index 71b0d200971235..4180d89bde9475 100644 --- a/packages/react-components/react-input/package.json +++ b/packages/react-components/react-input/package.json @@ -33,6 +33,7 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { + "@fluentui/react-field": "9.0.0-alpha.7", "@fluentui/react-theme": "^9.1.1", "@fluentui/react-utilities": "^9.2.0", "@griffel/react": "^1.4.2", diff --git a/packages/react-components/react-field/src/InputField.ts b/packages/react-components/react-input/src/InputField.ts similarity index 100% rename from packages/react-components/react-field/src/InputField.ts rename to packages/react-components/react-input/src/InputField.ts diff --git a/packages/react-components/react-field/src/components/InputField/InputField.test.tsx b/packages/react-components/react-input/src/components/InputField/InputField.test.tsx similarity index 91% rename from packages/react-components/react-field/src/components/InputField/InputField.test.tsx rename to packages/react-components/react-input/src/components/InputField/InputField.test.tsx index 6d558646db91f3..933979074e3bb7 100644 --- a/packages/react-components/react-field/src/components/InputField/InputField.test.tsx +++ b/packages/react-components/react-input/src/components/InputField/InputField.test.tsx @@ -1,4 +1,4 @@ -import { isConformant } from '../../common/isConformant'; +import { isConformant } from '../../testing/isConformant'; import { InputField } from './InputField'; describe('InputField', () => { diff --git a/packages/react-components/react-field/src/components/InputField/InputField.tsx b/packages/react-components/react-input/src/components/InputField/InputField.tsx similarity index 70% rename from packages/react-components/react-field/src/components/InputField/InputField.tsx rename to packages/react-components/react-input/src/components/InputField/InputField.tsx index 3bb40228bb88e0..db1e7707bab7aa 100644 --- a/packages/react-components/react-field/src/components/InputField/InputField.tsx +++ b/packages/react-components/react-input/src/components/InputField/InputField.tsx @@ -1,8 +1,13 @@ import * as React from 'react'; -import { Input } from '@fluentui/react-input'; +import type { FieldProps } from '@fluentui/react-field'; +import { + getFieldClassNames, + renderField_unstable, + useFieldStyles_unstable, + useField_unstable, +} from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import type { FieldProps } from '../../Field'; -import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field'; +import { Input } from '../../Input'; export type InputFieldProps = FieldProps; diff --git a/packages/react-components/react-field/src/components/InputField/index.ts b/packages/react-components/react-input/src/components/InputField/index.ts similarity index 100% rename from packages/react-components/react-field/src/components/InputField/index.ts rename to packages/react-components/react-input/src/components/InputField/index.ts diff --git a/packages/react-components/react-input/src/index.ts b/packages/react-components/react-input/src/index.ts index 3deb992114c004..3cc92509a586a7 100644 --- a/packages/react-components/react-input/src/index.ts +++ b/packages/react-components/react-input/src/index.ts @@ -1,2 +1,5 @@ export { Input, inputClassNames, renderInput_unstable, useInputStyles_unstable, useInput_unstable } from './Input'; export type { InputOnChangeData, InputProps, InputSlots, InputState } from './Input'; + +export { InputField as InputField_unstable, inputFieldClassNames } from './InputField'; +export type { InputFieldProps as InputFieldProps_unstable } from './InputField'; diff --git a/packages/react-components/react-field/src/stories/InputField/InputFieldDefault.stories.tsx b/packages/react-components/react-input/stories/InputField/InputFieldDefault.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/InputField/InputFieldDefault.stories.tsx rename to packages/react-components/react-input/stories/InputField/InputFieldDefault.stories.tsx diff --git a/packages/react-components/react-field/src/stories/InputField/InputFieldDescription.md b/packages/react-components/react-input/stories/InputField/InputFieldDescription.md similarity index 100% rename from packages/react-components/react-field/src/stories/InputField/InputFieldDescription.md rename to packages/react-components/react-input/stories/InputField/InputFieldDescription.md diff --git a/packages/react-components/react-field/src/stories/InputField/index.stories.tsx b/packages/react-components/react-input/stories/InputField/index.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/InputField/index.stories.tsx rename to packages/react-components/react-input/stories/InputField/index.stories.tsx diff --git a/packages/react-components/react-progress/etc/react-progress.api.md b/packages/react-components/react-progress/etc/react-progress.api.md index 5c1f21cf89253d..fbcfb4fbafde71 100644 --- a/packages/react-components/react-progress/etc/react-progress.api.md +++ b/packages/react-components/react-progress/etc/react-progress.api.md @@ -4,12 +4,17 @@ ```ts +/// + import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; +import { FieldControl } from '@fluentui/react-field'; +import type { FieldProps } from '@fluentui/react-field'; +import { FieldSlots } from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; -import type { SlotClassNames } from '@fluentui/react-utilities'; +import { SlotClassNames } from '@fluentui/react-utilities'; // @public export const Progress: ForwardRefComponent; @@ -17,6 +22,15 @@ export const Progress: ForwardRefComponent; // @public (undocumented) export const progressClassNames: SlotClassNames; +// @public (undocumented) +export const ProgressField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const progressFieldClassNames: SlotClassNames>; + +// @public (undocumented) +export type ProgressFieldProps_unstable = FieldProps; + // @public export type ProgressProps = Omit, 'size'> & { shape?: 'rounded' | 'rectangular'; diff --git a/packages/react-components/react-progress/package.json b/packages/react-components/react-progress/package.json index 7a4c8cde73a3ff..cfe0964264e289 100644 --- a/packages/react-components/react-progress/package.json +++ b/packages/react-components/react-progress/package.json @@ -32,6 +32,7 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { + "@fluentui/react-field": "9.0.0-alpha.7", "@fluentui/react-shared-contexts": "^9.1.0", "@fluentui/react-theme": "^9.1.1", "@fluentui/react-utilities": "^9.2.0", diff --git a/packages/react-components/react-field/src/ProgressField.ts b/packages/react-components/react-progress/src/ProgressField.ts similarity index 100% rename from packages/react-components/react-field/src/ProgressField.ts rename to packages/react-components/react-progress/src/ProgressField.ts diff --git a/packages/react-components/react-field/src/components/ProgressField/ProgressField.test.tsx b/packages/react-components/react-progress/src/components/ProgressField/ProgressField.test.tsx similarity index 100% rename from packages/react-components/react-field/src/components/ProgressField/ProgressField.test.tsx rename to packages/react-components/react-progress/src/components/ProgressField/ProgressField.test.tsx diff --git a/packages/react-components/react-field/src/components/ProgressField/ProgressField.tsx b/packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx similarity index 75% rename from packages/react-components/react-field/src/components/ProgressField/ProgressField.tsx rename to packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx index 799ad6c7452fb0..64c6c2f357792e 100644 --- a/packages/react-components/react-field/src/components/ProgressField/ProgressField.tsx +++ b/packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx @@ -1,8 +1,13 @@ import * as React from 'react'; -import { Progress } from '@fluentui/react-progress'; +import type { FieldProps } from '@fluentui/react-field'; +import { + getFieldClassNames, + renderField_unstable, + useFieldStyles_unstable, + useField_unstable, +} from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import type { FieldProps } from '../../Field'; -import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field'; +import { Progress } from '../../Progress'; export type ProgressFieldProps = FieldProps; diff --git a/packages/react-components/react-field/src/components/ProgressField/index.ts b/packages/react-components/react-progress/src/components/ProgressField/index.ts similarity index 100% rename from packages/react-components/react-field/src/components/ProgressField/index.ts rename to packages/react-components/react-progress/src/components/ProgressField/index.ts diff --git a/packages/react-components/react-progress/src/index.ts b/packages/react-components/react-progress/src/index.ts index 62dd3290f0328c..7c49362a2fcdd5 100644 --- a/packages/react-components/react-progress/src/index.ts +++ b/packages/react-components/react-progress/src/index.ts @@ -6,3 +6,6 @@ export { useProgressStyles_unstable, } from './Progress'; export type { ProgressProps, ProgressSlots, ProgressState } from './Progress'; + +export { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField'; +export type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField'; diff --git a/packages/react-components/react-field/src/stories/ProgressField/ProgressFieldDefault.stories.tsx b/packages/react-components/react-progress/src/stories/ProgressField/ProgressFieldDefault.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/ProgressField/ProgressFieldDefault.stories.tsx rename to packages/react-components/react-progress/src/stories/ProgressField/ProgressFieldDefault.stories.tsx diff --git a/packages/react-components/react-field/src/stories/ProgressField/ProgressFieldDescription.md b/packages/react-components/react-progress/src/stories/ProgressField/ProgressFieldDescription.md similarity index 100% rename from packages/react-components/react-field/src/stories/ProgressField/ProgressFieldDescription.md rename to packages/react-components/react-progress/src/stories/ProgressField/ProgressFieldDescription.md diff --git a/packages/react-components/react-field/src/stories/ProgressField/index.stories.tsx b/packages/react-components/react-progress/src/stories/ProgressField/index.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/ProgressField/index.stories.tsx rename to packages/react-components/react-progress/src/stories/ProgressField/index.stories.tsx diff --git a/packages/react-components/react-radio/etc/react-radio.api.md b/packages/react-components/react-radio/etc/react-radio.api.md index 83642ec6569c0a..4b3dd6eb70cc9d 100644 --- a/packages/react-components/react-radio/etc/react-radio.api.md +++ b/packages/react-components/react-radio/etc/react-radio.api.md @@ -10,13 +10,16 @@ import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; import { ContextSelector } from '@fluentui/react-context-selector'; import { FC } from 'react'; +import { FieldControl } from '@fluentui/react-field'; +import type { FieldProps } from '@fluentui/react-field'; +import { FieldSlots } from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { Label } from '@fluentui/react-label'; import { Provider } from 'react'; import { ProviderProps } from 'react'; import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; -import type { SlotClassNames } from '@fluentui/react-utilities'; +import { SlotClassNames } from '@fluentui/react-utilities'; // @public export const Radio: ForwardRefComponent; @@ -38,6 +41,15 @@ export type RadioGroupContextValues = { radioGroup: RadioGroupContextValue; }; +// @public (undocumented) +export const RadioGroupField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const radioGroupFieldClassNames: SlotClassNames>; + +// @public (undocumented) +export type RadioGroupFieldProps_unstable = FieldProps; + // @public export type RadioGroupOnChangeData = { value: string; diff --git a/packages/react-components/react-radio/package.json b/packages/react-components/react-radio/package.json index 05429ef37aee90..d50732d24084f8 100644 --- a/packages/react-components/react-radio/package.json +++ b/packages/react-components/react-radio/package.json @@ -32,6 +32,7 @@ }, "dependencies": { "@fluentui/react-context-selector": "^9.1.0", + "@fluentui/react-field": "9.0.0-alpha.7", "@fluentui/react-icons": "^2.0.175", "@fluentui/react-label": "^9.0.9", "@fluentui/react-tabster": "^9.2.1", diff --git a/packages/react-components/react-field/src/RadioGroupField.ts b/packages/react-components/react-radio/src/RadioGroupField.ts similarity index 100% rename from packages/react-components/react-field/src/RadioGroupField.ts rename to packages/react-components/react-radio/src/RadioGroupField.ts diff --git a/packages/react-components/react-field/src/components/RadioGroupField/RadioGroupField.test.tsx b/packages/react-components/react-radio/src/components/RadioGroupField/RadioGroupField.test.tsx similarity index 100% rename from packages/react-components/react-field/src/components/RadioGroupField/RadioGroupField.test.tsx rename to packages/react-components/react-radio/src/components/RadioGroupField/RadioGroupField.test.tsx diff --git a/packages/react-components/react-field/src/components/RadioGroupField/RadioGroupField.tsx b/packages/react-components/react-radio/src/components/RadioGroupField/RadioGroupField.tsx similarity index 73% rename from packages/react-components/react-field/src/components/RadioGroupField/RadioGroupField.tsx rename to packages/react-components/react-radio/src/components/RadioGroupField/RadioGroupField.tsx index 418ea74b9b1a94..394a9493b30c8f 100644 --- a/packages/react-components/react-field/src/components/RadioGroupField/RadioGroupField.tsx +++ b/packages/react-components/react-radio/src/components/RadioGroupField/RadioGroupField.tsx @@ -1,8 +1,13 @@ import * as React from 'react'; -import { RadioGroup } from '@fluentui/react-radio'; +import type { FieldProps } from '@fluentui/react-field'; +import { + getFieldClassNames, + renderField_unstable, + useFieldStyles_unstable, + useField_unstable, +} from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import type { FieldProps } from '../../Field'; -import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field'; +import { RadioGroup } from '../../RadioGroup'; export type RadioGroupFieldProps = FieldProps; diff --git a/packages/react-components/react-field/src/components/RadioGroupField/index.ts b/packages/react-components/react-radio/src/components/RadioGroupField/index.ts similarity index 100% rename from packages/react-components/react-field/src/components/RadioGroupField/index.ts rename to packages/react-components/react-radio/src/components/RadioGroupField/index.ts diff --git a/packages/react-components/react-radio/src/index.ts b/packages/react-components/react-radio/src/index.ts index 980ca2af6b7616..4488c58d851c0b 100644 --- a/packages/react-components/react-radio/src/index.ts +++ b/packages/react-components/react-radio/src/index.ts @@ -16,3 +16,6 @@ export type { export { Radio, radioClassNames, renderRadio_unstable, useRadioStyles_unstable, useRadio_unstable } from './Radio'; export type { RadioProps, RadioSlots, RadioState, RadioOnChangeData } from './Radio'; export { RadioGroupProvider, useRadioGroupContextValues, useRadioGroupContext_unstable } from './contexts/index'; + +export { RadioGroupField as RadioGroupField_unstable, radioGroupFieldClassNames } from './RadioGroupField'; +export type { RadioGroupFieldProps as RadioGroupFieldProps_unstable } from './RadioGroupField'; diff --git a/packages/react-components/react-field/src/stories/RadioGroupField/RadioGroupFieldDefault.stories.tsx b/packages/react-components/react-radio/src/stories/RadioGroupField/RadioGroupFieldDefault.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/RadioGroupField/RadioGroupFieldDefault.stories.tsx rename to packages/react-components/react-radio/src/stories/RadioGroupField/RadioGroupFieldDefault.stories.tsx diff --git a/packages/react-components/react-field/src/stories/RadioGroupField/RadioGroupFieldDescription.md b/packages/react-components/react-radio/src/stories/RadioGroupField/RadioGroupFieldDescription.md similarity index 100% rename from packages/react-components/react-field/src/stories/RadioGroupField/RadioGroupFieldDescription.md rename to packages/react-components/react-radio/src/stories/RadioGroupField/RadioGroupFieldDescription.md diff --git a/packages/react-components/react-field/src/stories/RadioGroupField/index.stories.tsx b/packages/react-components/react-radio/src/stories/RadioGroupField/index.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/RadioGroupField/index.stories.tsx rename to packages/react-components/react-radio/src/stories/RadioGroupField/index.stories.tsx diff --git a/packages/react-components/react-select/etc/react-select.api.md b/packages/react-components/react-select/etc/react-select.api.md index d6acc6e9f5e5f5..d1e56c19f7ad43 100644 --- a/packages/react-components/react-select/etc/react-select.api.md +++ b/packages/react-components/react-select/etc/react-select.api.md @@ -8,6 +8,9 @@ import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; +import { FieldControl } from '@fluentui/react-field'; +import type { FieldProps } from '@fluentui/react-field'; +import { FieldSlots } from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; @@ -22,6 +25,15 @@ export const Select: ForwardRefComponent; // @public (undocumented) export const selectClassNames: SlotClassNames; +// @public (undocumented) +export const SelectField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const selectFieldClassNames: SlotClassNames>; + +// @public (undocumented) +export type SelectFieldProps_unstable = FieldProps; + // @public export type SelectOnChangeData = { value: string; diff --git a/packages/react-components/react-select/package.json b/packages/react-components/react-select/package.json index a740d32c80a42e..b265a28e2cddda 100644 --- a/packages/react-components/react-select/package.json +++ b/packages/react-components/react-select/package.json @@ -31,6 +31,7 @@ "@fluentui/react-conformance-griffel": "9.0.0-beta.17" }, "dependencies": { + "@fluentui/react-field": "9.0.0-alpha.7", "@fluentui/react-icons": "^2.0.175", "@fluentui/react-theme": "^9.1.1", "@fluentui/react-utilities": "^9.2.0", diff --git a/packages/react-components/react-field/src/SelectField.ts b/packages/react-components/react-select/src/SelectField.ts similarity index 100% rename from packages/react-components/react-field/src/SelectField.ts rename to packages/react-components/react-select/src/SelectField.ts diff --git a/packages/react-components/react-field/src/components/SelectField/SelectField.test.tsx b/packages/react-components/react-select/src/components/SelectField/SelectField.test.tsx similarity index 91% rename from packages/react-components/react-field/src/components/SelectField/SelectField.test.tsx rename to packages/react-components/react-select/src/components/SelectField/SelectField.test.tsx index b4786ea4a68424..cbdfc9eb2c9810 100644 --- a/packages/react-components/react-field/src/components/SelectField/SelectField.test.tsx +++ b/packages/react-components/react-select/src/components/SelectField/SelectField.test.tsx @@ -1,4 +1,4 @@ -import { isConformant } from '../../common/isConformant'; +import { isConformant } from '../../testing/isConformant'; import { SelectField } from './SelectField'; describe('SelectField', () => { diff --git a/packages/react-components/react-field/src/components/SelectField/SelectField.tsx b/packages/react-components/react-select/src/components/SelectField/SelectField.tsx similarity index 70% rename from packages/react-components/react-field/src/components/SelectField/SelectField.tsx rename to packages/react-components/react-select/src/components/SelectField/SelectField.tsx index b7c72dc584521c..bd07722505d811 100644 --- a/packages/react-components/react-field/src/components/SelectField/SelectField.tsx +++ b/packages/react-components/react-select/src/components/SelectField/SelectField.tsx @@ -1,8 +1,13 @@ import * as React from 'react'; -import { Select } from '@fluentui/react-select'; +import type { FieldProps } from '@fluentui/react-field'; +import { + getFieldClassNames, + renderField_unstable, + useFieldStyles_unstable, + useField_unstable, +} from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import type { FieldProps } from '../../Field'; -import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field'; +import { Select } from '../../Select'; export type SelectFieldProps = FieldProps; diff --git a/packages/react-components/react-field/src/components/SelectField/index.ts b/packages/react-components/react-select/src/components/SelectField/index.ts similarity index 100% rename from packages/react-components/react-field/src/components/SelectField/index.ts rename to packages/react-components/react-select/src/components/SelectField/index.ts diff --git a/packages/react-components/react-select/src/index.ts b/packages/react-components/react-select/src/index.ts index cdee7bc148ca63..a580ba518797ec 100644 --- a/packages/react-components/react-select/src/index.ts +++ b/packages/react-components/react-select/src/index.ts @@ -6,3 +6,6 @@ export { useSelect_unstable, } from './Select'; export type { SelectOnChangeData, SelectProps, SelectSlots, SelectState } from './Select'; + +export { SelectField as SelectField_unstable, selectFieldClassNames } from './SelectField'; +export type { SelectFieldProps as SelectFieldProps_unstable } from './SelectField'; diff --git a/packages/react-components/react-field/src/stories/SelectField/SelectFieldDefault.stories.tsx b/packages/react-components/react-select/stories/SelectField/SelectFieldDefault.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/SelectField/SelectFieldDefault.stories.tsx rename to packages/react-components/react-select/stories/SelectField/SelectFieldDefault.stories.tsx diff --git a/packages/react-components/react-field/src/stories/SelectField/SelectFieldDescription.md b/packages/react-components/react-select/stories/SelectField/SelectFieldDescription.md similarity index 100% rename from packages/react-components/react-field/src/stories/SelectField/SelectFieldDescription.md rename to packages/react-components/react-select/stories/SelectField/SelectFieldDescription.md diff --git a/packages/react-components/react-field/src/stories/SelectField/index.stories.tsx b/packages/react-components/react-select/stories/SelectField/index.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/SelectField/index.stories.tsx rename to packages/react-components/react-select/stories/SelectField/index.stories.tsx diff --git a/packages/react-components/react-slider/etc/react-slider.api.md b/packages/react-components/react-slider/etc/react-slider.api.md index 2f1a515f1c83a7..852b0f0c50298c 100644 --- a/packages/react-components/react-slider/etc/react-slider.api.md +++ b/packages/react-components/react-slider/etc/react-slider.api.md @@ -4,12 +4,17 @@ ```ts +/// + import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; +import { FieldControl } from '@fluentui/react-field'; +import type { FieldProps } from '@fluentui/react-field'; +import { FieldSlots } from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; -import type { SlotClassNames } from '@fluentui/react-utilities'; +import { SlotClassNames } from '@fluentui/react-utilities'; // @public export const renderSlider_unstable: (state: SliderState) => JSX.Element; @@ -27,6 +32,15 @@ export const sliderCSSVars: { sliderStepsPercentVar: string; }; +// @public (undocumented) +export const SliderField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const sliderFieldClassNames: SlotClassNames>; + +// @public (undocumented) +export type SliderFieldProps_unstable = FieldProps; + // @public (undocumented) export type SliderOnChangeData = { value: number; diff --git a/packages/react-components/react-slider/package.json b/packages/react-components/react-slider/package.json index 800cab78693f89..3575eeaf1e95a4 100644 --- a/packages/react-components/react-slider/package.json +++ b/packages/react-components/react-slider/package.json @@ -33,6 +33,7 @@ }, "dependencies": { "@griffel/react": "^1.4.2", + "@fluentui/react-field": "9.0.0-alpha.7", "@fluentui/react-shared-contexts": "^9.1.0", "@fluentui/react-tabster": "^9.2.1", "@fluentui/react-theme": "^9.1.1", diff --git a/packages/react-components/react-field/src/SliderField.ts b/packages/react-components/react-slider/src/SliderField.ts similarity index 100% rename from packages/react-components/react-field/src/SliderField.ts rename to packages/react-components/react-slider/src/SliderField.ts diff --git a/packages/react-components/react-field/src/components/SliderField/SliderField.test.tsx b/packages/react-components/react-slider/src/components/SliderField/SliderField.test.tsx similarity index 91% rename from packages/react-components/react-field/src/components/SliderField/SliderField.test.tsx rename to packages/react-components/react-slider/src/components/SliderField/SliderField.test.tsx index 93710ecfcb6692..ca1606cd43b4bc 100644 --- a/packages/react-components/react-field/src/components/SliderField/SliderField.test.tsx +++ b/packages/react-components/react-slider/src/components/SliderField/SliderField.test.tsx @@ -1,4 +1,4 @@ -import { isConformant } from '../../common/isConformant'; +import { isConformant } from '../../testing/isConformant'; import { SliderField } from './SliderField'; describe('SliderField', () => { diff --git a/packages/react-components/react-field/src/components/SliderField/SliderField.tsx b/packages/react-components/react-slider/src/components/SliderField/SliderField.tsx similarity index 70% rename from packages/react-components/react-field/src/components/SliderField/SliderField.tsx rename to packages/react-components/react-slider/src/components/SliderField/SliderField.tsx index d18166e094af5e..ef628533d66aa3 100644 --- a/packages/react-components/react-field/src/components/SliderField/SliderField.tsx +++ b/packages/react-components/react-slider/src/components/SliderField/SliderField.tsx @@ -1,8 +1,13 @@ import * as React from 'react'; -import { Slider } from '@fluentui/react-slider'; +import type { FieldProps } from '@fluentui/react-field'; +import { + getFieldClassNames, + renderField_unstable, + useFieldStyles_unstable, + useField_unstable, +} from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import type { FieldProps } from '../../Field'; -import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field'; +import { Slider } from '../../Slider'; export type SliderFieldProps = FieldProps; diff --git a/packages/react-components/react-field/src/components/SliderField/index.ts b/packages/react-components/react-slider/src/components/SliderField/index.ts similarity index 100% rename from packages/react-components/react-field/src/components/SliderField/index.ts rename to packages/react-components/react-slider/src/components/SliderField/index.ts diff --git a/packages/react-components/react-slider/src/index.ts b/packages/react-components/react-slider/src/index.ts index ab4888c042fc3d..d5e2b01a479cf2 100644 --- a/packages/react-components/react-slider/src/index.ts +++ b/packages/react-components/react-slider/src/index.ts @@ -8,3 +8,6 @@ export { useSlider_unstable, } from './Slider'; export type { SliderOnChangeData, SliderProps, SliderSlots, SliderState } from './Slider'; + +export { SliderField as SliderField_unstable, sliderFieldClassNames } from './SliderField'; +export type { SliderFieldProps as SliderFieldProps_unstable } from './SliderField'; diff --git a/packages/react-components/react-field/src/stories/SliderField/SliderFieldDefault.stories.tsx b/packages/react-components/react-slider/stories/SliderField/SliderFieldDefault.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/SliderField/SliderFieldDefault.stories.tsx rename to packages/react-components/react-slider/stories/SliderField/SliderFieldDefault.stories.tsx diff --git a/packages/react-components/react-field/src/stories/SliderField/SliderFieldDescription.md b/packages/react-components/react-slider/stories/SliderField/SliderFieldDescription.md similarity index 100% rename from packages/react-components/react-field/src/stories/SliderField/SliderFieldDescription.md rename to packages/react-components/react-slider/stories/SliderField/SliderFieldDescription.md diff --git a/packages/react-components/react-field/src/stories/SliderField/index.stories.tsx b/packages/react-components/react-slider/stories/SliderField/index.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/SliderField/index.stories.tsx rename to packages/react-components/react-slider/stories/SliderField/index.stories.tsx diff --git a/packages/react-components/react-spinbutton/etc/react-spinbutton.api.md b/packages/react-components/react-spinbutton/etc/react-spinbutton.api.md index 4f5b687318f89c..e62b4eb5ce9bce 100644 --- a/packages/react-components/react-spinbutton/etc/react-spinbutton.api.md +++ b/packages/react-components/react-spinbutton/etc/react-spinbutton.api.md @@ -8,6 +8,9 @@ import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; +import { FieldControl } from '@fluentui/react-field'; +import type { FieldProps } from '@fluentui/react-field'; +import { FieldSlots } from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; @@ -28,6 +31,15 @@ export type SpinButtonChangeEvent = React_2.MouseEvent | Reac // @public (undocumented) export const spinButtonClassNames: SlotClassNames; +// @public (undocumented) +export const SpinButtonField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const spinButtonFieldClassNames: SlotClassNames>; + +// @public (undocumented) +export type SpinButtonFieldProps_unstable = FieldProps; + // @public (undocumented) export type SpinButtonOnChangeData = { value?: number | null; diff --git a/packages/react-components/react-spinbutton/package.json b/packages/react-components/react-spinbutton/package.json index e2bcd6e5bca602..4268884242e9a7 100644 --- a/packages/react-components/react-spinbutton/package.json +++ b/packages/react-components/react-spinbutton/package.json @@ -35,6 +35,7 @@ "dependencies": { "@griffel/react": "^1.4.2", "@fluentui/keyboard-keys": "^9.0.0", + "@fluentui/react-field": "9.0.0-alpha.7", "@fluentui/react-icons": "^2.0.175", "@fluentui/react-input": "^9.2.4", "@fluentui/react-theme": "^9.1.1", diff --git a/packages/react-components/react-field/src/SpinButtonField.ts b/packages/react-components/react-spinbutton/src/SpinButtonField.ts similarity index 100% rename from packages/react-components/react-field/src/SpinButtonField.ts rename to packages/react-components/react-spinbutton/src/SpinButtonField.ts diff --git a/packages/react-components/react-field/src/components/SpinButtonField/SpinButtonField.test.tsx b/packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.test.tsx similarity index 100% rename from packages/react-components/react-field/src/components/SpinButtonField/SpinButtonField.test.tsx rename to packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.test.tsx diff --git a/packages/react-components/react-field/src/components/SpinButtonField/SpinButtonField.tsx b/packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.tsx similarity index 71% rename from packages/react-components/react-field/src/components/SpinButtonField/SpinButtonField.tsx rename to packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.tsx index 7a4137415fc3f3..b28be0199f37b7 100644 --- a/packages/react-components/react-field/src/components/SpinButtonField/SpinButtonField.tsx +++ b/packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.tsx @@ -1,8 +1,13 @@ import * as React from 'react'; -import { SpinButton } from '@fluentui/react-spinbutton'; +import type { FieldProps } from '@fluentui/react-field'; +import { + getFieldClassNames, + renderField_unstable, + useFieldStyles_unstable, + useField_unstable, +} from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import type { FieldProps } from '../../Field'; -import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field'; +import { SpinButton } from '../../SpinButton'; export type SpinButtonFieldProps = FieldProps; diff --git a/packages/react-components/react-field/src/components/SpinButtonField/index.ts b/packages/react-components/react-spinbutton/src/components/SpinButtonField/index.ts similarity index 100% rename from packages/react-components/react-field/src/components/SpinButtonField/index.ts rename to packages/react-components/react-spinbutton/src/components/SpinButtonField/index.ts diff --git a/packages/react-components/react-spinbutton/src/index.ts b/packages/react-components/react-spinbutton/src/index.ts index 3f33ebd3d253ba..6f3e63c275ceff 100644 --- a/packages/react-components/react-spinbutton/src/index.ts +++ b/packages/react-components/react-spinbutton/src/index.ts @@ -14,3 +14,6 @@ export type { SpinButtonSpinState, SpinButtonBounds, } from './SpinButton'; + +export { SpinButtonField as SpinButtonField_unstable, spinButtonFieldClassNames } from './SpinButtonField'; +export type { SpinButtonFieldProps as SpinButtonFieldProps_unstable } from './SpinButtonField'; diff --git a/packages/react-components/react-field/src/stories/SpinButtonField/SpinButtonFieldDefault.stories.tsx b/packages/react-components/react-spinbutton/src/stories/SpinButtonField/SpinButtonFieldDefault.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/SpinButtonField/SpinButtonFieldDefault.stories.tsx rename to packages/react-components/react-spinbutton/src/stories/SpinButtonField/SpinButtonFieldDefault.stories.tsx diff --git a/packages/react-components/react-field/src/stories/SpinButtonField/SpinButtonFieldDescription.md b/packages/react-components/react-spinbutton/src/stories/SpinButtonField/SpinButtonFieldDescription.md similarity index 100% rename from packages/react-components/react-field/src/stories/SpinButtonField/SpinButtonFieldDescription.md rename to packages/react-components/react-spinbutton/src/stories/SpinButtonField/SpinButtonFieldDescription.md diff --git a/packages/react-components/react-field/src/stories/SpinButtonField/index.stories.tsx b/packages/react-components/react-spinbutton/src/stories/SpinButtonField/index.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/SpinButtonField/index.stories.tsx rename to packages/react-components/react-spinbutton/src/stories/SpinButtonField/index.stories.tsx diff --git a/packages/react-components/react-switch/etc/react-switch.api.md b/packages/react-components/react-switch/etc/react-switch.api.md index 6a8b8a437e0fb7..24cb88d73ad600 100644 --- a/packages/react-components/react-switch/etc/react-switch.api.md +++ b/packages/react-components/react-switch/etc/react-switch.api.md @@ -8,11 +8,14 @@ import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; +import { FieldControl } from '@fluentui/react-field'; +import type { FieldProps } from '@fluentui/react-field'; +import { FieldSlots } from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { Label } from '@fluentui/react-label'; import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; -import type { SlotClassNames } from '@fluentui/react-utilities'; +import { SlotClassNames } from '@fluentui/react-utilities'; // @public export const renderSwitch_unstable: (state: SwitchState) => JSX.Element; @@ -26,6 +29,15 @@ export const switchClassName: string; // @public (undocumented) export const switchClassNames: SlotClassNames; +// @public (undocumented) +export const SwitchField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const switchFieldClassNames: SlotClassNames>; + +// @public (undocumented) +export type SwitchFieldProps_unstable = Omit, 'labelPosition'>; + // @public (undocumented) export type SwitchOnChangeData = { checked: boolean; diff --git a/packages/react-components/react-switch/package.json b/packages/react-components/react-switch/package.json index 5a9fa48d0f42e9..887f8e521dc7ad 100644 --- a/packages/react-components/react-switch/package.json +++ b/packages/react-components/react-switch/package.json @@ -32,6 +32,7 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { + "@fluentui/react-field": "9.0.0-alpha.7", "@fluentui/react-icons": "^2.0.175", "@fluentui/react-label": "^9.0.9", "@fluentui/react-tabster": "^9.2.1", diff --git a/packages/react-components/react-field/src/SwitchField.ts b/packages/react-components/react-switch/src/SwitchField.ts similarity index 100% rename from packages/react-components/react-field/src/SwitchField.ts rename to packages/react-components/react-switch/src/SwitchField.ts diff --git a/packages/react-components/react-field/src/components/SwitchField/SwitchField.test.tsx b/packages/react-components/react-switch/src/components/SwitchField/SwitchField.test.tsx similarity index 100% rename from packages/react-components/react-field/src/components/SwitchField/SwitchField.test.tsx rename to packages/react-components/react-switch/src/components/SwitchField/SwitchField.test.tsx diff --git a/packages/react-components/react-field/src/components/SwitchField/SwitchField.tsx b/packages/react-components/react-switch/src/components/SwitchField/SwitchField.tsx similarity index 76% rename from packages/react-components/react-field/src/components/SwitchField/SwitchField.tsx rename to packages/react-components/react-switch/src/components/SwitchField/SwitchField.tsx index e1d1e85161a6d2..c4ec08a0a5a289 100644 --- a/packages/react-components/react-field/src/components/SwitchField/SwitchField.tsx +++ b/packages/react-components/react-switch/src/components/SwitchField/SwitchField.tsx @@ -1,8 +1,13 @@ import * as React from 'react'; -import { Switch } from '@fluentui/react-switch'; +import type { FieldProps } from '@fluentui/react-field'; +import { + getFieldClassNames, + renderField_unstable, + useFieldStyles_unstable, + useField_unstable, +} from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import type { FieldProps } from '../../Field'; -import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field'; +import { Switch } from '../../Switch'; // The Field's `label` prop overrides the Switch's built-in `label`. // Therefore, the Switch's `labelPosition` has no effect and is omitted to avoid confusion. diff --git a/packages/react-components/react-field/src/components/SwitchField/index.ts b/packages/react-components/react-switch/src/components/SwitchField/index.ts similarity index 100% rename from packages/react-components/react-field/src/components/SwitchField/index.ts rename to packages/react-components/react-switch/src/components/SwitchField/index.ts diff --git a/packages/react-components/react-switch/src/index.ts b/packages/react-components/react-switch/src/index.ts index 6ca6e3524f037b..7e59ba75a20776 100644 --- a/packages/react-components/react-switch/src/index.ts +++ b/packages/react-components/react-switch/src/index.ts @@ -8,3 +8,6 @@ export { useSwitch_unstable, } from './Switch'; export type { SwitchOnChangeData, SwitchProps, SwitchSlots, SwitchState } from './Switch'; + +export { SwitchField as SwitchField_unstable, switchFieldClassNames } from './SwitchField'; +export type { SwitchFieldProps as SwitchFieldProps_unstable } from './SwitchField'; diff --git a/packages/react-components/react-field/src/stories/SwitchField/SwitchFieldDefault.stories.tsx b/packages/react-components/react-switch/src/stories/SwitchField/SwitchFieldDefault.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/SwitchField/SwitchFieldDefault.stories.tsx rename to packages/react-components/react-switch/src/stories/SwitchField/SwitchFieldDefault.stories.tsx diff --git a/packages/react-components/react-field/src/stories/SwitchField/SwitchFieldDescription.md b/packages/react-components/react-switch/src/stories/SwitchField/SwitchFieldDescription.md similarity index 100% rename from packages/react-components/react-field/src/stories/SwitchField/SwitchFieldDescription.md rename to packages/react-components/react-switch/src/stories/SwitchField/SwitchFieldDescription.md diff --git a/packages/react-components/react-field/src/stories/SwitchField/index.stories.tsx b/packages/react-components/react-switch/src/stories/SwitchField/index.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/SwitchField/index.stories.tsx rename to packages/react-components/react-switch/src/stories/SwitchField/index.stories.tsx diff --git a/packages/react-components/react-textarea/etc/react-textarea.api.md b/packages/react-components/react-textarea/etc/react-textarea.api.md index 033194d9e76a70..c9141d859943b3 100644 --- a/packages/react-components/react-textarea/etc/react-textarea.api.md +++ b/packages/react-components/react-textarea/etc/react-textarea.api.md @@ -4,8 +4,13 @@ ```ts +/// + import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; +import { FieldControl } from '@fluentui/react-field'; +import type { FieldProps } from '@fluentui/react-field'; +import { FieldSlots } from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import * as React_2 from 'react'; import type { Slot } from '@fluentui/react-utilities'; @@ -20,6 +25,15 @@ export const Textarea: ForwardRefComponent; // @public (undocumented) export const textareaClassNames: SlotClassNames; +// @public (undocumented) +export const TextareaField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const textareaFieldClassNames: SlotClassNames>; + +// @public (undocumented) +export type TextareaFieldProps_unstable = FieldProps; + // @public export type TextareaProps = Omit, 'textarea'>, 'defaultValue' | 'onChange' | 'size' | 'value'> & { appearance?: 'outline' | 'filled-darker' | 'filled-lighter' | 'filled-darker-shadow' | 'filled-lighter-shadow'; diff --git a/packages/react-components/react-textarea/package.json b/packages/react-components/react-textarea/package.json index 78aabad1c9b5d7..d360cc2bcaa558 100644 --- a/packages/react-components/react-textarea/package.json +++ b/packages/react-components/react-textarea/package.json @@ -32,6 +32,7 @@ "@fluentui/scripts": "^1.0.0" }, "dependencies": { + "@fluentui/react-field": "9.0.0-alpha.7", "@fluentui/react-theme": "^9.1.1", "@fluentui/react-utilities": "^9.2.0", "@griffel/react": "^1.4.2", diff --git a/packages/react-components/react-field/src/TextareaField.ts b/packages/react-components/react-textarea/src/TextareaField.ts similarity index 100% rename from packages/react-components/react-field/src/TextareaField.ts rename to packages/react-components/react-textarea/src/TextareaField.ts diff --git a/packages/react-components/react-field/src/components/TextareaField/TextareaField.test.tsx b/packages/react-components/react-textarea/src/components/TextareaField/TextareaField.test.tsx similarity index 100% rename from packages/react-components/react-field/src/components/TextareaField/TextareaField.test.tsx rename to packages/react-components/react-textarea/src/components/TextareaField/TextareaField.test.tsx diff --git a/packages/react-components/react-field/src/components/TextareaField/TextareaField.tsx b/packages/react-components/react-textarea/src/components/TextareaField/TextareaField.tsx similarity index 71% rename from packages/react-components/react-field/src/components/TextareaField/TextareaField.tsx rename to packages/react-components/react-textarea/src/components/TextareaField/TextareaField.tsx index 86b140e534d8a4..9a5cfae1e95308 100644 --- a/packages/react-components/react-field/src/components/TextareaField/TextareaField.tsx +++ b/packages/react-components/react-textarea/src/components/TextareaField/TextareaField.tsx @@ -1,8 +1,13 @@ import * as React from 'react'; -import { Textarea } from '@fluentui/react-textarea'; +import type { FieldProps } from '@fluentui/react-field'; +import { + getFieldClassNames, + renderField_unstable, + useFieldStyles_unstable, + useField_unstable, +} from '@fluentui/react-field'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import type { FieldProps } from '../../Field'; -import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field'; +import { Textarea } from '../../Textarea'; export type TextareaFieldProps = FieldProps; diff --git a/packages/react-components/react-field/src/components/TextareaField/index.ts b/packages/react-components/react-textarea/src/components/TextareaField/index.ts similarity index 100% rename from packages/react-components/react-field/src/components/TextareaField/index.ts rename to packages/react-components/react-textarea/src/components/TextareaField/index.ts diff --git a/packages/react-components/react-textarea/src/index.ts b/packages/react-components/react-textarea/src/index.ts index f32e87b9a3a05c..21f80214cae517 100644 --- a/packages/react-components/react-textarea/src/index.ts +++ b/packages/react-components/react-textarea/src/index.ts @@ -6,3 +6,6 @@ export { useTextarea_unstable, } from './Textarea'; export type { TextareaProps, TextareaSlots, TextareaState } from './Textarea'; + +export { TextareaField as TextareaField_unstable, textareaFieldClassNames } from './TextareaField'; +export type { TextareaFieldProps as TextareaFieldProps_unstable } from './TextareaField'; diff --git a/packages/react-components/react-field/src/stories/TextareaField/TextareaFieldDefault.stories.tsx b/packages/react-components/react-textarea/src/stories/TextareaField/TextareaFieldDefault.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/TextareaField/TextareaFieldDefault.stories.tsx rename to packages/react-components/react-textarea/src/stories/TextareaField/TextareaFieldDefault.stories.tsx diff --git a/packages/react-components/react-field/src/stories/TextareaField/TextareaFieldDescription.md b/packages/react-components/react-textarea/src/stories/TextareaField/TextareaFieldDescription.md similarity index 100% rename from packages/react-components/react-field/src/stories/TextareaField/TextareaFieldDescription.md rename to packages/react-components/react-textarea/src/stories/TextareaField/TextareaFieldDescription.md diff --git a/packages/react-components/react-field/src/stories/TextareaField/index.stories.tsx b/packages/react-components/react-textarea/src/stories/TextareaField/index.stories.tsx similarity index 100% rename from packages/react-components/react-field/src/stories/TextareaField/index.stories.tsx rename to packages/react-components/react-textarea/src/stories/TextareaField/index.stories.tsx