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

@@ -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",

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<FieldControl>,
+  InputFieldProps,
   'orientation' | 'required' | 'label' | 'validationState' | 'validationMessage' | 'validationMessageIcon' | 'hint'
 >;
 

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-checkbox/etc/react-checkbox.api.md

@@ -8,18 +8,33 @@
 
 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<CheckboxProps>;
 
 // @public (undocumented)
 export const checkboxClassNames: SlotClassNames<CheckboxSlots>;
 
+// @public (undocumented)
+export const CheckboxField_unstable: ForwardRefComponent<CheckboxFieldProps_unstable>;
+
+// @public (undocumented)
+export const checkboxFieldClassNames: SlotClassNames<FieldSlots<FieldControl>>;
+
+// @public (undocumented)
+export type CheckboxFieldProps_unstable = Omit<FieldProps<typeof Checkbox>, 'label'> & {
+    label?: CheckboxProps['label'];
+    fieldLabel?: FieldProps<typeof Checkbox>['label'];
+};
+
 // @public
 export interface CheckboxOnChangeData {
     // (undocumented)

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",

packages/react-components/react-field/src/components/CheckboxField/CheckboxField.test.tsx → 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', () => {

packages/react-components/react-field/src/components/CheckboxField/CheckboxField.tsx → 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<FieldProps<typeof Checkbox>, 'label'> & {
   /**

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';

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<ComboboxState, 'activeOption' | 'appeara
 // @public (undocumented)
 export type ComboboxContextValues = ComboboxBaseContextValues;
 
+// @public (undocumented)
+export const ComboboxField_unstable: ForwardRefComponent<ComboboxFieldProps_unstable>;
+
+// @public (undocumented)
+export const comboboxFieldClassNames: SlotClassNames<FieldSlots<FieldControl>>;
+
+// @public (undocumented)
+export type ComboboxFieldProps_unstable = FieldProps<typeof Combobox>;
+
 // @public (undocumented)
 export type ComboboxOpenChangeData = ComboboxBaseOpenChangeData;
 

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",

packages/react-components/react-field/src/components/ComboboxField/ComboboxField.tsx → 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<typeof Combobox>;
 

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';

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';