feat: Publish react-field package, and export from react-components/u…

…nstable (#24235) * Publish `@fluentui/react-field` package * Add Field components to `@fluentui/react-components/unstable`
microsoft · Sep 12, 2022 · cd8f5a1 · cd8f5a1
1 parent f97dc9f
commit cd8f5a1
Show file tree

Hide file tree

Showing 18 changed files with 286 additions and 10 deletions.
diff --git a/change/@fluentui-react-components-de1ae615-fbbf-4fd4-8957-40d69ff9414f.json 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": "[email protected]",
+  "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
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Initial release",
+  "packageName": "@fluentui/react-field",
+  "email": "[email protected]",
+  "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
@@ -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
@@ -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
@@ -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
@@ -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/...ct-components/react-field/src/stories/CheckboxField/CheckboxFieldDescription.md b/...ct-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.
+
+<!-- Don't allow prettier to collapse code block into single line -->
+<!-- prettier-ignore -->
+> **⚠️ 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/...ct-components/react-field/src/stories/ComboboxField/ComboboxFieldDescription.md b/...ct-components/react-field/src/stories/ComboboxField/ComboboxFieldDescription.md
@@ -1 +1,14 @@
 ComboboxField adds a Label, validation message, and hint text to the Combobox control.
+
+<!-- Don't allow prettier to collapse code block into single line -->
+<!-- prettier-ignore -->
+> **⚠️ 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
diff --git 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
@@ -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/...es/react-components/react-field/src/stories/InputField/InputFieldDescription.md b/...es/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.
+
+<!-- Don't allow prettier to collapse code block into single line -->
+<!-- prettier-ignore -->
+> **⚠️ 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