diff --git a/change/@fluentui-react-components-de1ae615-fbbf-4fd4-8957-40d69ff9414f.json b/change/@fluentui-react-components-de1ae615-fbbf-4fd4-8957-40d69ff9414f.json new file mode 100644 index 00000000000000..1915c01f825f13 --- /dev/null +++ b/change/@fluentui-react-components-de1ae615-fbbf-4fd4-8957-40d69ff9414f.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat: Add *Field components to @fluentui/react-components/unstable", + "packageName": "@fluentui/react-components", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-field-e888af0f-e684-4f66-8f86-8c950a9bb41e.json b/change/@fluentui-react-field-e888af0f-e684-4f66-8f86-8c950a9bb41e.json new file mode 100644 index 00000000000000..1c1f70819e76f5 --- /dev/null +++ b/change/@fluentui-react-field-e888af0f-e684-4f66-8f86-8c950a9bb41e.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Initial release", + "packageName": "@fluentui/react-field", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} 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 5600cc64c30a34..4577ffa79a7b54 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 @@ -41,9 +41,15 @@ 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 { 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 { ComboboxOpenChangeData } from '@fluentui/react-combobox'; import { ComboboxOpenEvents } from '@fluentui/react-combobox'; import { ComboboxProps } from '@fluentui/react-combobox'; @@ -92,6 +98,14 @@ import { DropdownOpenEvents } from '@fluentui/react-combobox'; import { DropdownProps } from '@fluentui/react-combobox'; import { DropdownSlots } from '@fluentui/react-combobox'; import { DropdownState } from '@fluentui/react-combobox'; +import { FieldConfig } from '@fluentui/react-field'; +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 { Listbox } from '@fluentui/react-combobox'; import { listboxClassNames } from '@fluentui/react-combobox'; import { ListboxContextValues } from '@fluentui/react-combobox'; @@ -112,6 +126,9 @@ import { Overflow } from '@fluentui/react-overflow'; import { OverflowItem } from '@fluentui/react-overflow'; import { OverflowItemProps } from '@fluentui/react-overflow'; import { OverflowProps } from '@fluentui/react-overflow'; +import { RadioGroupField } from '@fluentui/react-field'; +import { radioGroupFieldClassNames } from '@fluentui/react-field'; +import { RadioGroupFieldProps } from '@fluentui/react-field'; import { renderAlert_unstable } from '@fluentui/react-alert'; import { renderAvatarGroup_unstable } from '@fluentui/react-avatar'; import { renderAvatarGroupItem_unstable } from '@fluentui/react-avatar'; @@ -127,6 +144,7 @@ import { renderDialogSurface_unstable } from '@fluentui/react-dialog'; import { renderDialogTitle_unstable } from '@fluentui/react-dialog'; import { renderDialogTrigger_unstable } from '@fluentui/react-dialog'; import { renderDropdown_unstable } from '@fluentui/react-combobox'; +import { renderField_unstable } from '@fluentui/react-field'; import { renderListbox_unstable } from '@fluentui/react-combobox'; import { renderOption_unstable } from '@fluentui/react-combobox'; import { renderOptionGroup_unstable } from '@fluentui/react-combobox'; @@ -143,10 +161,22 @@ import { renderTableSelectionCell_unstable } from '@fluentui/react-table'; import { renderToolbar_unstable } from '@fluentui/react-toolbar'; 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 { 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 { 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 { Table } from '@fluentui/react-table'; import { TableBody } from '@fluentui/react-table'; import { tableBodyClassName } from '@fluentui/react-table'; @@ -199,6 +229,9 @@ import { TableSelectionCellSlots } from '@fluentui/react-table'; import { TableSelectionCellState } from '@fluentui/react-table'; import { TableSlots } from '@fluentui/react-table'; import { TableState } from '@fluentui/react-table'; +import { TextareaField } from '@fluentui/react-field'; +import { textareaFieldClassNames } from '@fluentui/react-field'; +import { TextareaFieldProps } from '@fluentui/react-field'; import { Toolbar } from '@fluentui/react-toolbar'; import { ToolbarButton } from '@fluentui/react-toolbar'; import { ToolbarButtonProps } from '@fluentui/react-toolbar'; @@ -243,6 +276,8 @@ import { useDialogTitleStyles_unstable } from '@fluentui/react-dialog'; import { useDialogTrigger_unstable } from '@fluentui/react-dialog'; import { useDropdown_unstable } from '@fluentui/react-combobox'; import { useDropdownStyles_unstable } from '@fluentui/react-combobox'; +import { useField_unstable } from '@fluentui/react-field'; +import { useFieldStyles_unstable } from '@fluentui/react-field'; import { useIsOverflowGroupVisible } from '@fluentui/react-overflow'; import { useIsOverflowItemVisible } from '@fluentui/react-overflow'; import { useListbox_unstable } from '@fluentui/react-combobox'; @@ -351,12 +386,24 @@ export { CardSlots } export { CardState } +export { CheckboxField } + +export { checkboxFieldClassNames } + +export { CheckboxFieldProps } + export { Combobox } export { comboboxClassNames } export { ComboboxContextValues } +export { ComboboxField } + +export { comboboxFieldClassNames } + +export { ComboboxFieldProps } + export { ComboboxOpenChangeData } export { ComboboxOpenEvents } @@ -453,6 +500,22 @@ export { DropdownSlots } export { DropdownState } +export { FieldConfig } + +export { FieldProps } + +export { FieldSlots } + +export { FieldState } + +export { getFieldClassNames } + +export { InputField } + +export { inputFieldClassNames } + +export { InputFieldProps } + export { Listbox } export { listboxClassNames } @@ -493,6 +556,12 @@ export { OverflowItemProps } export { OverflowProps } +export { RadioGroupField } + +export { radioGroupFieldClassNames } + +export { RadioGroupFieldProps } + export { renderAlert_unstable } export { renderAvatarGroup_unstable } @@ -523,6 +592,8 @@ export { renderDialogTrigger_unstable } export { renderDropdown_unstable } +export { renderField_unstable } + export { renderListbox_unstable } export { renderOption_unstable } @@ -555,14 +626,38 @@ export { Select } export { selectClassNames } +export { SelectField } + +export { selectFieldClassNames } + +export { SelectFieldProps } + export { SelectProps } export { SelectSlots } export { SelectState } +export { SliderField } + +export { sliderFieldClassNames } + +export { SliderFieldProps } + export { SortDirection } +export { SpinButtonField } + +export { spinButtonFieldClassNames } + +export { SpinButtonFieldProps } + +export { SwitchField } + +export { switchFieldClassNames } + +export { SwitchFieldProps } + export { Table } export { TableBody } @@ -667,6 +762,12 @@ export { TableSlots } export { TableState } +export { TextareaField } + +export { textareaFieldClassNames } + +export { TextareaFieldProps } + export { Toolbar } export { ToolbarButton } @@ -755,6 +856,10 @@ export { useDropdown_unstable } export { useDropdownStyles_unstable } +export { useField_unstable } + +export { useFieldStyles_unstable } + export { useIsOverflowGroupVisible } export { useIsOverflowItemVisible } diff --git a/packages/react-components/react-components/package.json b/packages/react-components/react-components/package.json index 51660f98cf3bbf..bbc1e528cf79b6 100644 --- a/packages/react-components/react-components/package.json +++ b/packages/react-components/react-components/package.json @@ -42,6 +42,7 @@ "@fluentui/react-combobox": "^9.0.0-beta.8", "@fluentui/react-dialog": "^9.0.0-beta.7", "@fluentui/react-divider": "^9.0.4", + "@fluentui/react-field": "9.0.0-alpha.0", "@fluentui/react-image": "^9.0.4", "@fluentui/react-input": "^9.0.4", "@fluentui/react-label": "^9.0.4", diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts index eee3ef5d540906..c37cfc4d640c6c 100644 --- a/packages/react-components/react-components/src/unstable/index.ts +++ b/packages/react-components/react-components/src/unstable/index.ts @@ -304,3 +304,43 @@ export type { TablePrimaryCellSlots, TablePrimaryCellState, } from '@fluentui/react-table'; + +export { + CheckboxField, + checkboxFieldClassNames, + ComboboxField, + comboboxFieldClassNames, + getFieldClassNames, + InputField, + inputFieldClassNames, + 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, + RadioGroupFieldProps, + SelectFieldProps, + SliderFieldProps, + SpinButtonFieldProps, + SwitchFieldProps, + TextareaFieldProps, +} from '@fluentui/react-field'; diff --git a/packages/react-components/react-field/package.json b/packages/react-components/react-field/package.json index 3c8f8bfcdf9433..eb4372c6942d62 100644 --- a/packages/react-components/react-field/package.json +++ b/packages/react-components/react-field/package.json @@ -1,8 +1,7 @@ { "name": "@fluentui/react-field", "version": "9.0.0-alpha.0", - "private": true, - "description": "Fluent UI Field component", + "description": "Fluent UI Field components", "main": "lib-commonjs/index.js", "module": "lib/index.js", "typings": "dist/index.d.ts", @@ -58,7 +57,8 @@ "beachball": { "disallowedChangeTypes": [ "major", - "prerelease" + "minor", + "patch" ] } } diff --git a/packages/react-components/react-field/src/stories/CheckboxField/CheckboxFieldDescription.md b/packages/react-components/react-field/src/stories/CheckboxField/CheckboxFieldDescription.md index ea905874fac1d6..7a143e8ed7364d 100644 --- a/packages/react-components/react-field/src/stories/CheckboxField/CheckboxFieldDescription.md +++ b/packages/react-components/react-field/src/stories/CheckboxField/CheckboxFieldDescription.md @@ -1,3 +1,16 @@ CheckboxField adds a validation message and hint text to the Checkbox control. Unlike other Field controls, the `label` appears to the right of the checkbox, as it does for the `Checkbox` control. If a standard field label is required, use the `fieldLabel` prop. + + + +> **⚠️ Preview components are considered unstable:** +> +> ```jsx +> +> import { CheckboxField } from '@fluentui/react-components/unstable'; +> +> ``` +> +> - Features and APIs may change before final release +> - Please contact us if you intend to use this in your product diff --git a/packages/react-components/react-field/src/stories/ComboboxField/ComboboxFieldDescription.md b/packages/react-components/react-field/src/stories/ComboboxField/ComboboxFieldDescription.md index baab8dcfa884d3..d9833369bd62c9 100644 --- a/packages/react-components/react-field/src/stories/ComboboxField/ComboboxFieldDescription.md +++ b/packages/react-components/react-field/src/stories/ComboboxField/ComboboxFieldDescription.md @@ -1 +1,14 @@ ComboboxField adds a Label, validation message, and hint text to the Combobox control. + + + +> **⚠️ Preview components are considered unstable:** +> +> ```jsx +> +> import { ComboboxField } from '@fluentui/react-components/unstable'; +> +> ``` +> +> - Features and APIs may change before final release +> - Please contact us if you intend to use this in your product diff --git a/packages/react-components/react-field/src/stories/Field/FieldBestPractices.md b/packages/react-components/react-field/src/stories/Field/FieldBestPractices.md deleted file mode 100644 index 08ff8ddeeb5f86..00000000000000 --- a/packages/react-components/react-field/src/stories/Field/FieldBestPractices.md +++ /dev/null @@ -1,5 +0,0 @@ -## Best practices - -### Do - -### Don't diff --git a/packages/react-components/react-field/src/stories/Field/FieldDescription.md b/packages/react-components/react-field/src/stories/Field/FieldDescription.md index 99113b98075c69..3b112efaa22dd3 100644 --- a/packages/react-components/react-field/src/stories/Field/FieldDescription.md +++ b/packages/react-components/react-field/src/stories/Field/FieldDescription.md @@ -1 +1,6 @@ Fields are a combination of the underlying control with a Label, validation message, and hint text. + +> **⚠️ Preview components are considered unstable:** +> +> - Features and APIs may change before final release +> - Please contact us if you intend to use this in your product diff --git a/packages/react-components/react-field/src/stories/Field/index.stories.tsx b/packages/react-components/react-field/src/stories/Field/index.stories.tsx index 425f6250a530d7..4fd860bfa24200 100644 --- a/packages/react-components/react-field/src/stories/Field/index.stories.tsx +++ b/packages/react-components/react-field/src/stories/Field/index.stories.tsx @@ -1,5 +1,4 @@ import descriptionMd from './FieldDescription.md'; -import bestPracticesMd from './FieldBestPractices.md'; export { Default } from './FieldDefault.stories'; export { Label } from './FieldLabel.stories'; @@ -15,7 +14,7 @@ export default { parameters: { docs: { description: { - component: [descriptionMd, bestPracticesMd].join('\n'), + component: descriptionMd, }, }, }, diff --git a/packages/react-components/react-field/src/stories/InputField/InputFieldDescription.md b/packages/react-components/react-field/src/stories/InputField/InputFieldDescription.md index e30e9c18a2a2d0..ab4a3168a40a45 100644 --- a/packages/react-components/react-field/src/stories/InputField/InputFieldDescription.md +++ b/packages/react-components/react-field/src/stories/InputField/InputFieldDescription.md @@ -1 +1,14 @@ InputField adds a Label, validation message, and hint text to the Input control. + + + +> **⚠️ Preview components are considered unstable:** +> +> ```jsx +> +> import { InputField } from '@fluentui/react-components/unstable'; +> +> ``` +> +> - Features and APIs may change before final release +> - Please contact us if you intend to use this in your product diff --git a/packages/react-components/react-field/src/stories/RadioGroupField/RadioGroupFieldDescription.md b/packages/react-components/react-field/src/stories/RadioGroupField/RadioGroupFieldDescription.md index 2de409b4453728..5eba5fb4b420ec 100644 --- a/packages/react-components/react-field/src/stories/RadioGroupField/RadioGroupFieldDescription.md +++ b/packages/react-components/react-field/src/stories/RadioGroupField/RadioGroupFieldDescription.md @@ -1 +1,14 @@ RadioGroupField adds a Label, validation message, and hint text to the RadioGroup control. + + + +> **⚠️ Preview components are considered unstable:** +> +> ```jsx +> +> import { RadioGroupField } from '@fluentui/react-components/unstable'; +> +> ``` +> +> - Features and APIs may change before final release +> - Please contact us if you intend to use this in your product diff --git a/packages/react-components/react-field/src/stories/SelectField/SelectFieldDescription.md b/packages/react-components/react-field/src/stories/SelectField/SelectFieldDescription.md index ef2552f8bdd609..38abb62c9a6e05 100644 --- a/packages/react-components/react-field/src/stories/SelectField/SelectFieldDescription.md +++ b/packages/react-components/react-field/src/stories/SelectField/SelectFieldDescription.md @@ -1 +1,14 @@ SelectField adds a Label, validation message, and hint text to the Select control. + + + +> **⚠️ Preview components are considered unstable:** +> +> ```jsx +> +> import { SelectField } from '@fluentui/react-components/unstable'; +> +> ``` +> +> - Features and APIs may change before final release +> - Please contact us if you intend to use this in your product diff --git a/packages/react-components/react-field/src/stories/SliderField/SliderFieldDescription.md b/packages/react-components/react-field/src/stories/SliderField/SliderFieldDescription.md index 529af5f731c4ab..06148a4d588202 100644 --- a/packages/react-components/react-field/src/stories/SliderField/SliderFieldDescription.md +++ b/packages/react-components/react-field/src/stories/SliderField/SliderFieldDescription.md @@ -1 +1,14 @@ SliderField adds a Label, validation message, and hint text to the Slider control. + + + +> **⚠️ Preview components are considered unstable:** +> +> ```jsx +> +> import { SliderField } from '@fluentui/react-components/unstable'; +> +> ``` +> +> - Features and APIs may change before final release +> - Please contact us if you intend to use this in your product diff --git a/packages/react-components/react-field/src/stories/SpinButtonField/SpinButtonFieldDescription.md b/packages/react-components/react-field/src/stories/SpinButtonField/SpinButtonFieldDescription.md index 4184d843a6da3e..11f7dc2208aaf0 100644 --- a/packages/react-components/react-field/src/stories/SpinButtonField/SpinButtonFieldDescription.md +++ b/packages/react-components/react-field/src/stories/SpinButtonField/SpinButtonFieldDescription.md @@ -1 +1,14 @@ SpinButtonField adds a Label, validation message, and hint text to the SpinButton control. + + + +> **⚠️ Preview components are considered unstable:** +> +> ```jsx +> +> import { SpinButtonField } from '@fluentui/react-components/unstable'; +> +> ``` +> +> - Features and APIs may change before final release +> - Please contact us if you intend to use this in your product diff --git a/packages/react-components/react-field/src/stories/SwitchField/SwitchFieldDescription.md b/packages/react-components/react-field/src/stories/SwitchField/SwitchFieldDescription.md index 65d4051a4a76c3..c260cbe1e6dc70 100644 --- a/packages/react-components/react-field/src/stories/SwitchField/SwitchFieldDescription.md +++ b/packages/react-components/react-field/src/stories/SwitchField/SwitchFieldDescription.md @@ -1 +1,14 @@ SwitchField adds a Label, validation message, and hint text to the Switch control. + + + +> **⚠️ Preview components are considered unstable:** +> +> ```jsx +> +> import { SwitchField } from '@fluentui/react-components/unstable'; +> +> ``` +> +> - Features and APIs may change before final release +> - Please contact us if you intend to use this in your product diff --git a/packages/react-components/react-field/src/stories/TextareaField/TextareaFieldDescription.md b/packages/react-components/react-field/src/stories/TextareaField/TextareaFieldDescription.md index 1fb6554f39b210..d7c3de2fa83996 100644 --- a/packages/react-components/react-field/src/stories/TextareaField/TextareaFieldDescription.md +++ b/packages/react-components/react-field/src/stories/TextareaField/TextareaFieldDescription.md @@ -1 +1,14 @@ TextareaField adds a Label, validation message, and hint text to the Textarea control. + + + +> **⚠️ Preview components are considered unstable:** +> +> ```jsx +> +> import { TextareaField } from '@fluentui/react-components/unstable'; +> +> ``` +> +> - Features and APIs may change before final release +> - Please contact us if you intend to use this in your product