From 76fff3dfb2a035ec654d247e124084b09a0ce32a Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 00:25:01 -0800 Subject: [PATCH 01/20] chore: Clean up Field tests and story imports in preparation of moving to individual packages --- ...ld-3b26a8a7-ed4d-445f-92c9-818f523ef4b4.json | 7 +++++++ .../react-field/etc/react-field.api.md | 12 ++++++++++++ .../src/common/fieldConformanceTestOptions.ts | 17 +++++++++++++++++ .../react-field/src/common/isConformant.ts | 17 ----------------- .../CheckboxField/CheckboxField.test.tsx | 1 + .../ComboboxField/ComboboxField.test.tsx | 3 +++ .../components/InputField/InputField.test.tsx | 3 +++ .../ProgressField/ProgressField.test.tsx | 3 +++ .../RadioGroupField/RadioGroupField.test.tsx | 3 +++ .../components/SelectField/SelectField.test.tsx | 3 +++ .../components/SliderField/SliderField.test.tsx | 3 +++ .../SpinButtonField/SpinButtonField.test.tsx | 3 +++ .../components/SwitchField/SwitchField.test.tsx | 3 +++ .../TextareaField/TextareaField.test.tsx | 3 +++ .../react-components/react-field/src/index.ts | 1 + .../CheckboxFieldDefault.stories.tsx | 4 ++-- .../CheckboxFieldFieldLabel.stories.tsx | 2 +- .../src/stories/CheckboxField/index.stories.tsx | 2 +- .../ComboboxFieldDefault.stories.tsx | 4 ++-- .../src/stories/ComboboxField/index.stories.tsx | 2 +- .../src/stories/Field/FieldDefault.stories.tsx | 2 +- .../src/stories/Field/FieldHint.stories.tsx | 2 +- .../stories/Field/FieldHorizontal.stories.tsx | 2 +- .../src/stories/Field/FieldLabel.stories.tsx | 2 +- .../src/stories/Field/FieldRequired.stories.tsx | 2 +- .../src/stories/Field/FieldSize.stories.tsx | 2 +- .../Field/FieldValidationState.stories.tsx | 2 +- .../InputField/InputFieldDefault.stories.tsx | 4 ++-- .../src/stories/InputField/index.stories.tsx | 2 +- .../ProgressFieldDefault.stories.tsx | 4 ++-- .../src/stories/ProgressField/index.stories.tsx | 2 +- .../RadioGroupFieldDefault.stories.tsx | 4 ++-- .../stories/RadioGroupField/index.stories.tsx | 2 +- .../SelectField/SelectFieldDefault.stories.tsx | 4 ++-- .../src/stories/SelectField/index.stories.tsx | 2 +- .../SliderField/SliderFieldDefault.stories.tsx | 4 ++-- .../src/stories/SliderField/index.stories.tsx | 2 +- .../SpinButtonFieldDefault.stories.tsx | 4 ++-- .../stories/SpinButtonField/index.stories.tsx | 2 +- .../SwitchField/SwitchFieldDefault.stories.tsx | 4 ++-- .../src/stories/SwitchField/index.stories.tsx | 2 +- .../TextareaFieldDefault.stories.tsx | 4 ++-- .../src/stories/TextareaField/index.stories.tsx | 2 +- 43 files changed, 103 insertions(+), 55 deletions(-) create mode 100644 change/@fluentui-react-field-3b26a8a7-ed4d-445f-92c9-818f523ef4b4.json create mode 100644 packages/react-components/react-field/src/common/fieldConformanceTestOptions.ts diff --git a/change/@fluentui-react-field-3b26a8a7-ed4d-445f-92c9-818f523ef4b4.json b/change/@fluentui-react-field-3b26a8a7-ed4d-445f-92c9-818f523ef4b4.json new file mode 100644 index 0000000000000..7e1219e93c352 --- /dev/null +++ b/change/@fluentui-react-field-3b26a8a7-ed4d-445f-92c9-818f523ef4b4.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "chore: Clean up Field tests and story imports in preparation of moving to individual packages", + "packageName": "@fluentui/react-field", + "email": "behowell@microsoft.com", + "dependentChangeType": "patch" +} 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 fdace08fb846f..71c0225acd4f2 100644 --- a/packages/react-components/react-field/etc/react-field.api.md +++ b/packages/react-components/react-field/etc/react-field.api.md @@ -56,6 +56,18 @@ export type FieldConfig = { ariaInvalidOnError?: boolean; }; +// @internal +export const fieldConformanceTestOptions: { + 'has-static-classnames': { + props: { + label: string; + validationState: string; + validationMessage: string; + hint: string; + }; + }[]; +}; + // @public export type FieldProps = ComponentProps>, 'control'> & { orientation?: 'vertical' | 'horizontal'; diff --git a/packages/react-components/react-field/src/common/fieldConformanceTestOptions.ts b/packages/react-components/react-field/src/common/fieldConformanceTestOptions.ts new file mode 100644 index 0000000000000..ed1741d5b2030 --- /dev/null +++ b/packages/react-components/react-field/src/common/fieldConformanceTestOptions.ts @@ -0,0 +1,17 @@ +/** + * Defaults for the isConformant tests of field components. + * + * @internal + */ +export const fieldConformanceTestOptions = { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], +}; diff --git a/packages/react-components/react-field/src/common/isConformant.ts b/packages/react-components/react-field/src/common/isConformant.ts index de10869ca225f..c35cc6e735834 100644 --- a/packages/react-components/react-field/src/common/isConformant.ts +++ b/packages/react-components/react-field/src/common/isConformant.ts @@ -8,23 +8,6 @@ export function isConformant( const defaultOptions: Partial> = { componentPath: module!.parent!.filename.replace('.test', ''), extraTests: griffelTests as TestObject, - - // Field-specific defaults - primarySlot: 'control' as keyof TProps, - testOptions: testInfo.testOptions?.['has-static-classnames'] - ? undefined - : { - 'has-static-classnames': [ - { - props: { - label: 'label text', - validationState: 'error', - validationMessage: 'validation message text', - hint: 'hint text', - }, - }, - ], - }, }; baseIsConformant(defaultOptions, testInfo); diff --git a/packages/react-components/react-field/src/components/CheckboxField/CheckboxField.test.tsx b/packages/react-components/react-field/src/components/CheckboxField/CheckboxField.test.tsx index 41c99c1d55379..b8eff12194f28 100644 --- a/packages/react-components/react-field/src/components/CheckboxField/CheckboxField.test.tsx +++ b/packages/react-components/react-field/src/components/CheckboxField/CheckboxField.test.tsx @@ -7,6 +7,7 @@ describe('CheckboxField', () => { isConformant({ Component: CheckboxField, displayName: 'CheckboxField', + primarySlot: 'control', testOptions: { 'has-static-classnames': [ { diff --git a/packages/react-components/react-field/src/components/ComboboxField/ComboboxField.test.tsx b/packages/react-components/react-field/src/components/ComboboxField/ComboboxField.test.tsx index f15221eb2bac7..d7956de76657f 100644 --- a/packages/react-components/react-field/src/components/ComboboxField/ComboboxField.test.tsx +++ b/packages/react-components/react-field/src/components/ComboboxField/ComboboxField.test.tsx @@ -1,3 +1,4 @@ +import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { ComboboxField } from './ComboboxField'; @@ -5,6 +6,8 @@ describe('ComboboxField', () => { isConformant({ Component: ComboboxField, displayName: 'ComboboxField', + primarySlot: 'control', + testOptions: fieldConformanceTestOptions, }); // Most functionality is tested by Field.test.tsx, and Combobox's tests diff --git a/packages/react-components/react-field/src/components/InputField/InputField.test.tsx b/packages/react-components/react-field/src/components/InputField/InputField.test.tsx index 05219e41786fd..c7621c84f658d 100644 --- a/packages/react-components/react-field/src/components/InputField/InputField.test.tsx +++ b/packages/react-components/react-field/src/components/InputField/InputField.test.tsx @@ -1,3 +1,4 @@ +import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { InputField } from './InputField'; @@ -5,6 +6,8 @@ describe('InputField', () => { isConformant({ Component: InputField, displayName: 'InputField', + primarySlot: 'control', + testOptions: fieldConformanceTestOptions, }); // Most functionality is tested by Field.test.tsx, and Input's tests diff --git a/packages/react-components/react-field/src/components/ProgressField/ProgressField.test.tsx b/packages/react-components/react-field/src/components/ProgressField/ProgressField.test.tsx index 71d0adff6888f..174c61ce2a21a 100644 --- a/packages/react-components/react-field/src/components/ProgressField/ProgressField.test.tsx +++ b/packages/react-components/react-field/src/components/ProgressField/ProgressField.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { render } from '@testing-library/react'; import { isConformant } from '../../common/isConformant'; import { ProgressField } from './ProgressField'; @@ -7,6 +8,8 @@ describe('ProgressField', () => { isConformant({ Component: ProgressField, displayName: 'ProgressField', + primarySlot: 'control', + testOptions: fieldConformanceTestOptions, }); // Most functionality is tested by Field.test.tsx and Progress.test.tsx diff --git a/packages/react-components/react-field/src/components/RadioGroupField/RadioGroupField.test.tsx b/packages/react-components/react-field/src/components/RadioGroupField/RadioGroupField.test.tsx index 2f4c981b14ee8..5a7c83f4f624c 100644 --- a/packages/react-components/react-field/src/components/RadioGroupField/RadioGroupField.test.tsx +++ b/packages/react-components/react-field/src/components/RadioGroupField/RadioGroupField.test.tsx @@ -1,4 +1,5 @@ import * as React from 'react'; +import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { Radio } from '@fluentui/react-radio'; import { render } from '@testing-library/react'; import { isConformant } from '../../common/isConformant'; @@ -8,6 +9,8 @@ describe('RadioGroupField', () => { isConformant({ Component: RadioGroupField, displayName: 'RadioGroupField', + primarySlot: 'control', + testOptions: fieldConformanceTestOptions, }); // Most functionality is tested by Field.test.tsx, and RadioGroup's tests diff --git a/packages/react-components/react-field/src/components/SelectField/SelectField.test.tsx b/packages/react-components/react-field/src/components/SelectField/SelectField.test.tsx index b64bd86dfc68a..7c9dc3e67fbcd 100644 --- a/packages/react-components/react-field/src/components/SelectField/SelectField.test.tsx +++ b/packages/react-components/react-field/src/components/SelectField/SelectField.test.tsx @@ -1,3 +1,4 @@ +import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { SelectField } from './SelectField'; @@ -5,6 +6,8 @@ describe('SelectField', () => { isConformant({ Component: SelectField, displayName: 'SelectField', + primarySlot: 'control', + testOptions: fieldConformanceTestOptions, }); // Most functionality is tested by Field.test.tsx, and Select's tests diff --git a/packages/react-components/react-field/src/components/SliderField/SliderField.test.tsx b/packages/react-components/react-field/src/components/SliderField/SliderField.test.tsx index f4d931234d86c..3c5f54b945c11 100644 --- a/packages/react-components/react-field/src/components/SliderField/SliderField.test.tsx +++ b/packages/react-components/react-field/src/components/SliderField/SliderField.test.tsx @@ -1,3 +1,4 @@ +import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { SliderField } from './SliderField'; @@ -5,6 +6,8 @@ describe('SliderField', () => { isConformant({ Component: SliderField, displayName: 'SliderField', + primarySlot: 'control', + testOptions: fieldConformanceTestOptions, }); // Most functionality is tested by Field.test.tsx, and Slider's tests diff --git a/packages/react-components/react-field/src/components/SpinButtonField/SpinButtonField.test.tsx b/packages/react-components/react-field/src/components/SpinButtonField/SpinButtonField.test.tsx index 0d9d2d87eb5b5..eb7da150478b9 100644 --- a/packages/react-components/react-field/src/components/SpinButtonField/SpinButtonField.test.tsx +++ b/packages/react-components/react-field/src/components/SpinButtonField/SpinButtonField.test.tsx @@ -1,3 +1,4 @@ +import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { SpinButtonField } from './SpinButtonField'; @@ -5,6 +6,8 @@ describe('SpinButtonField', () => { isConformant({ Component: SpinButtonField, displayName: 'SpinButtonField', + primarySlot: 'control', + testOptions: fieldConformanceTestOptions, }); // Most functionality is tested by Field.test.tsx, and SpinButton's tests diff --git a/packages/react-components/react-field/src/components/SwitchField/SwitchField.test.tsx b/packages/react-components/react-field/src/components/SwitchField/SwitchField.test.tsx index 0d2f4b1101768..3f1f4fbb7fd0c 100644 --- a/packages/react-components/react-field/src/components/SwitchField/SwitchField.test.tsx +++ b/packages/react-components/react-field/src/components/SwitchField/SwitchField.test.tsx @@ -1,3 +1,4 @@ +import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { SwitchField } from './SwitchField'; @@ -5,6 +6,8 @@ describe('SwitchField', () => { isConformant({ Component: SwitchField, displayName: 'SwitchField', + primarySlot: 'control', + testOptions: fieldConformanceTestOptions, }); // Most functionality is tested by Field.test.tsx, and Switch's tests diff --git a/packages/react-components/react-field/src/components/TextareaField/TextareaField.test.tsx b/packages/react-components/react-field/src/components/TextareaField/TextareaField.test.tsx index 2f4f4806819be..9d0d5df641f63 100644 --- a/packages/react-components/react-field/src/components/TextareaField/TextareaField.test.tsx +++ b/packages/react-components/react-field/src/components/TextareaField/TextareaField.test.tsx @@ -1,3 +1,4 @@ +import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { TextareaField } from './TextareaField'; @@ -5,6 +6,8 @@ describe('TextareaField', () => { isConformant({ Component: TextareaField, displayName: 'TextareaField', + primarySlot: 'control', + testOptions: fieldConformanceTestOptions, }); // Most functionality is tested by Field.test.tsx, and Textarea's tests diff --git a/packages/react-components/react-field/src/index.ts b/packages/react-components/react-field/src/index.ts index b5fb4651bf386..1e506333512ab 100644 --- a/packages/react-components/react-field/src/index.ts +++ b/packages/react-components/react-field/src/index.ts @@ -1,3 +1,4 @@ +export { fieldConformanceTestOptions } from './common/fieldConformanceTestOptions'; export { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field'; export type { FieldProps, FieldSlots, FieldState, FieldConfig } from './Field'; diff --git a/packages/react-components/react-field/src/stories/CheckboxField/CheckboxFieldDefault.stories.tsx b/packages/react-components/react-field/src/stories/CheckboxField/CheckboxFieldDefault.stories.tsx index 5a15a4792746a..0ec85e63acc88 100644 --- a/packages/react-components/react-field/src/stories/CheckboxField/CheckboxFieldDefault.stories.tsx +++ b/packages/react-components/react-field/src/stories/CheckboxField/CheckboxFieldDefault.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import type { CheckboxFieldProps } from '@fluentui/react-field'; -import { CheckboxField } from '@fluentui/react-field'; +import type { CheckboxFieldProps } from '@fluentui/react-components/unstable'; +import { CheckboxField } from '@fluentui/react-components/unstable'; export const Default = (props: Partial) => ( ; diff --git a/packages/react-components/react-field/src/stories/CheckboxField/index.stories.tsx b/packages/react-components/react-field/src/stories/CheckboxField/index.stories.tsx index 760e3cee55f28..5f93fe32574d6 100644 --- a/packages/react-components/react-field/src/stories/CheckboxField/index.stories.tsx +++ b/packages/react-components/react-field/src/stories/CheckboxField/index.stories.tsx @@ -1,4 +1,4 @@ -import { CheckboxField } from '@fluentui/react-field'; +import { CheckboxField } from '@fluentui/react-components/unstable'; import descriptionMd from './CheckboxFieldDescription.md'; diff --git a/packages/react-components/react-field/src/stories/ComboboxField/ComboboxFieldDefault.stories.tsx b/packages/react-components/react-field/src/stories/ComboboxField/ComboboxFieldDefault.stories.tsx index 55c5916861853..385ec203cb0f1 100644 --- a/packages/react-components/react-field/src/stories/ComboboxField/ComboboxFieldDefault.stories.tsx +++ b/packages/react-components/react-field/src/stories/ComboboxField/ComboboxFieldDefault.stories.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { Option } from '@fluentui/react-combobox'; -import type { ComboboxFieldProps } from '@fluentui/react-field'; -import { ComboboxField } from '@fluentui/react-field'; +import type { ComboboxFieldProps } from '@fluentui/react-components/unstable'; +import { ComboboxField } from '@fluentui/react-components/unstable'; export const Default = (props: Partial) => ( ) => ( ; diff --git a/packages/react-components/react-field/src/stories/Field/FieldHorizontal.stories.tsx b/packages/react-components/react-field/src/stories/Field/FieldHorizontal.stories.tsx index 06023c8756367..17a6f98ac65cf 100644 --- a/packages/react-components/react-field/src/stories/Field/FieldHorizontal.stories.tsx +++ b/packages/react-components/react-field/src/stories/Field/FieldHorizontal.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { makeStyles, tokens } from '@fluentui/react-components'; -import { InputField } from '@fluentui/react-field'; +import { InputField } from '@fluentui/react-components/unstable'; const useStyles = makeStyles({ stack: { diff --git a/packages/react-components/react-field/src/stories/Field/FieldLabel.stories.tsx b/packages/react-components/react-field/src/stories/Field/FieldLabel.stories.tsx index e943bf7f39d5e..9935999d29083 100644 --- a/packages/react-components/react-field/src/stories/Field/FieldLabel.stories.tsx +++ b/packages/react-components/react-field/src/stories/Field/FieldLabel.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { InputField } from '@fluentui/react-field'; +import { InputField } from '@fluentui/react-components/unstable'; export const Label = () => ; diff --git a/packages/react-components/react-field/src/stories/Field/FieldRequired.stories.tsx b/packages/react-components/react-field/src/stories/Field/FieldRequired.stories.tsx index 2259f02bc7997..0ebdfccec8131 100644 --- a/packages/react-components/react-field/src/stories/Field/FieldRequired.stories.tsx +++ b/packages/react-components/react-field/src/stories/Field/FieldRequired.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { InputField } from '@fluentui/react-field'; +import { InputField } from '@fluentui/react-components/unstable'; export const Required = () => ; diff --git a/packages/react-components/react-field/src/stories/Field/FieldSize.stories.tsx b/packages/react-components/react-field/src/stories/Field/FieldSize.stories.tsx index 9cd39ab5d2221..27cdf90fc8ab1 100644 --- a/packages/react-components/react-field/src/stories/Field/FieldSize.stories.tsx +++ b/packages/react-components/react-field/src/stories/Field/FieldSize.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { makeStyles, tokens } from '@fluentui/react-components'; -import { InputField } from '@fluentui/react-field'; +import { InputField } from '@fluentui/react-components/unstable'; const useStyles = makeStyles({ stack: { diff --git a/packages/react-components/react-field/src/stories/Field/FieldValidationState.stories.tsx b/packages/react-components/react-field/src/stories/Field/FieldValidationState.stories.tsx index c3c9560e13636..042ce9a30d56a 100644 --- a/packages/react-components/react-field/src/stories/Field/FieldValidationState.stories.tsx +++ b/packages/react-components/react-field/src/stories/Field/FieldValidationState.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { makeStyles, tokens } from '@fluentui/react-components'; -import { InputField } from '@fluentui/react-field'; +import { InputField } from '@fluentui/react-components/unstable'; import { SparkleFilled } from '@fluentui/react-icons'; const useStyles = makeStyles({ diff --git a/packages/react-components/react-field/src/stories/InputField/InputFieldDefault.stories.tsx b/packages/react-components/react-field/src/stories/InputField/InputFieldDefault.stories.tsx index 50a9e11e7d81a..c91243d493f49 100644 --- a/packages/react-components/react-field/src/stories/InputField/InputFieldDefault.stories.tsx +++ b/packages/react-components/react-field/src/stories/InputField/InputFieldDefault.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import type { InputFieldProps } from '@fluentui/react-field'; -import { InputField } from '@fluentui/react-field'; +import type { InputFieldProps } from '@fluentui/react-components/unstable'; +import { InputField } from '@fluentui/react-components/unstable'; export const Default = (props: Partial) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( ) => ( Date: Wed, 9 Nov 2022 00:31:29 -0800 Subject: [PATCH 02/20] Rename FieldComponent to FieldControl --- .../react-field/etc/react-field.api.md | 36 +++++++++---------- .../src/components/Field/Field.types.ts | 12 +++---- .../src/components/Field/renderField.tsx | 6 ++-- .../src/components/Field/useField.tsx | 8 ++--- .../src/components/Field/useFieldStyles.ts | 12 +++---- 5 files changed, 37 insertions(+), 37 deletions(-) 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 71c0225acd4f2..b60d219207c8e 100644 --- a/packages/react-components/react-field/etc/react-field.api.md +++ b/packages/react-components/react-field/etc/react-field.api.md @@ -31,7 +31,7 @@ import { Textarea } from '@fluentui/react-textarea'; export const CheckboxField: ForwardRefComponent; // @public (undocumented) -export const checkboxFieldClassNames: SlotClassNames>; +export const checkboxFieldClassNames: SlotClassNames>; // @public (undocumented) export type CheckboxFieldProps = Omit, 'label'> & { @@ -43,13 +43,13 @@ export type CheckboxFieldProps = Omit, 'label'> & { export const ComboboxField: ForwardRefComponent; // @public (undocumented) -export const comboboxFieldClassNames: SlotClassNames>; +export const comboboxFieldClassNames: SlotClassNames>; // @public (undocumented) export type ComboboxFieldProps = FieldProps; // @public -export type FieldConfig = { +export type FieldConfig = { component: T; classNames: SlotClassNames>; labelConnection?: 'htmlFor' | 'aria-labelledby'; @@ -69,13 +69,13 @@ export const fieldConformanceTestOptions: { }; // @public -export type FieldProps = ComponentProps>, 'control'> & { +export type FieldProps = ComponentProps>, 'control'> & { orientation?: 'vertical' | 'horizontal'; validationState?: 'error' | 'warning' | 'success'; }; // @public -export type FieldSlots = { +export type FieldSlots = { root: NonNullable>; control: SlotComponent; label?: Slot; @@ -85,18 +85,18 @@ export type FieldSlots = { }; // @public -export type FieldState = ComponentState>> & Pick, 'orientation' | 'validationState'> & { +export type FieldState = ComponentState>> & Pick, 'orientation' | 'validationState'> & { classNames: SlotClassNames>; }; // @public (undocumented) -export const getFieldClassNames: (name: string) => SlotClassNames>; +export const getFieldClassNames: (name: string) => SlotClassNames>; // @public (undocumented) export const InputField: ForwardRefComponent; // @public (undocumented) -export const inputFieldClassNames: SlotClassNames>; +export const inputFieldClassNames: SlotClassNames>; // @public (undocumented) export type InputFieldProps = FieldProps; @@ -105,7 +105,7 @@ export type InputFieldProps = FieldProps; export const ProgressField: ForwardRefComponent; // @public (undocumented) -export const progressFieldClassNames: SlotClassNames>; +export const progressFieldClassNames: SlotClassNames>; // @public (undocumented) export type ProgressFieldProps = FieldProps; @@ -114,19 +114,19 @@ export type ProgressFieldProps = FieldProps; export const RadioGroupField: ForwardRefComponent; // @public (undocumented) -export const radioGroupFieldClassNames: SlotClassNames>; +export const radioGroupFieldClassNames: SlotClassNames>; // @public (undocumented) export type RadioGroupFieldProps = FieldProps; // @public -export const renderField_unstable: (state: FieldState) => JSX.Element; +export const renderField_unstable: (state: FieldState) => JSX.Element; // @public (undocumented) export const SelectField: ForwardRefComponent; // @public (undocumented) -export const selectFieldClassNames: SlotClassNames>; +export const selectFieldClassNames: SlotClassNames>; // @public (undocumented) export type SelectFieldProps = FieldProps; @@ -135,7 +135,7 @@ export type SelectFieldProps = FieldProps; export const SliderField: ForwardRefComponent; // @public (undocumented) -export const sliderFieldClassNames: SlotClassNames>; +export const sliderFieldClassNames: SlotClassNames>; // @public (undocumented) export type SliderFieldProps = FieldProps; @@ -144,7 +144,7 @@ export type SliderFieldProps = FieldProps; export const SpinButtonField: ForwardRefComponent; // @public (undocumented) -export const spinButtonFieldClassNames: SlotClassNames>; +export const spinButtonFieldClassNames: SlotClassNames>; // @public (undocumented) export type SpinButtonFieldProps = FieldProps; @@ -153,7 +153,7 @@ export type SpinButtonFieldProps = FieldProps; export const SwitchField: ForwardRefComponent; // @public (undocumented) -export const switchFieldClassNames: SlotClassNames>; +export const switchFieldClassNames: SlotClassNames>; // @public (undocumented) export type SwitchFieldProps = Omit, 'labelPosition'>; @@ -162,16 +162,16 @@ export type SwitchFieldProps = Omit, 'labelPosition'>; export const TextareaField: ForwardRefComponent; // @public (undocumented) -export const textareaFieldClassNames: SlotClassNames>; +export const textareaFieldClassNames: SlotClassNames>; // @public (undocumented) export type TextareaFieldProps = FieldProps; // @public -export const useField_unstable: (props: FieldPropsWithOptionalComponentProps, ref: React_2.Ref, params: FieldConfig) => FieldState; +export const useField_unstable: (props: FieldPropsWithOptionalComponentProps, ref: React_2.Ref, params: FieldConfig) => FieldState; // @public -export const useFieldStyles_unstable: (state: FieldState) => void; +export const useFieldStyles_unstable: (state: FieldState) => void; // (No @packageDocumentation comment for this package) diff --git a/packages/react-components/react-field/src/components/Field/Field.types.ts b/packages/react-components/react-field/src/components/Field/Field.types.ts index f1644d289d9ae..c5103fe179864 100644 --- a/packages/react-components/react-field/src/components/Field/Field.types.ts +++ b/packages/react-components/react-field/src/components/Field/Field.types.ts @@ -9,7 +9,7 @@ import type { SlotComponent } from './SlotComponent.types'; * Note: the use of VoidFunctionComponent means that component is not *required* to have a children prop, * but it is still allowed to have a children prop. */ -export type FieldComponent = React.VoidFunctionComponent< +export type FieldControl = React.VoidFunctionComponent< Pick< React.HTMLAttributes, 'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage' @@ -19,7 +19,7 @@ export type FieldComponent = React.VoidFunctionComponent< /** * Slots added by Field */ -export type FieldSlots = { +export type FieldSlots = { root: NonNullable>; /** @@ -54,7 +54,7 @@ export type FieldSlots = { /** * Field Props */ -export type FieldProps = ComponentProps>, 'control'> & { +export type FieldProps = ComponentProps>, 'control'> & { /** * The orientation of the label relative to the field component. * This only affects the label, and not the validationMessage or hint (which always appear below the field component). @@ -79,7 +79,7 @@ export type FieldProps = ComponentProps = FieldProps & { +export type FieldPropsWithOptionalComponentProps = FieldProps & { /** * Whether the field label should be marked as required. */ @@ -96,7 +96,7 @@ export type FieldPropsWithOptionalComponentProps = Fie /** * Configuration parameters for a Field class, passed to useField_unstable */ -export type FieldConfig = { +export type FieldConfig = { /** * The underlying input component that this field is wrapping. */ @@ -129,7 +129,7 @@ export type FieldConfig = { /** * State used in rendering Field */ -export type FieldState = ComponentState>> & +export type FieldState = ComponentState>> & Pick, 'orientation' | 'validationState'> & { classNames: SlotClassNames>; }; diff --git a/packages/react-components/react-field/src/components/Field/renderField.tsx b/packages/react-components/react-field/src/components/Field/renderField.tsx index c3a5c6e2577ff..4727909444e6f 100644 --- a/packages/react-components/react-field/src/components/Field/renderField.tsx +++ b/packages/react-components/react-field/src/components/Field/renderField.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { getSlots } from '@fluentui/react-utilities'; -import type { FieldComponent, FieldSlots, FieldState } from './Field.types'; +import type { FieldControl, FieldSlots, FieldState } from './Field.types'; /** * Render the final JSX of Field */ -export const renderField_unstable = (state: FieldState) => { - const { slots, slotProps } = getSlots>(state as FieldState); +export const renderField_unstable = (state: FieldState) => { + const { slots, slotProps } = getSlots>(state as FieldState); return ( diff --git a/packages/react-components/react-field/src/components/Field/useField.tsx b/packages/react-components/react-field/src/components/Field/useField.tsx index acd4da41721ca..c88fad0b33492 100644 --- a/packages/react-components/react-field/src/components/Field/useField.tsx +++ b/packages/react-components/react-field/src/components/Field/useField.tsx @@ -3,8 +3,8 @@ import { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@ import { Label } from '@fluentui/react-label'; import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities'; import type { - FieldComponent, FieldConfig, + FieldControl, FieldProps, FieldPropsWithOptionalComponentProps, FieldState, @@ -19,7 +19,7 @@ const validationMessageIcons = { /** * Partition the props used by the Field itself, from the props that are passed to the underlying field component. */ -export const getPartitionedFieldProps = >(props: Props) => { +export const getPartitionedFieldProps = >(props: Props) => { const { className, control, @@ -60,7 +60,7 @@ export const getPartitionedFieldProps = ( +export const useField_unstable = ( props: FieldPropsWithOptionalComponentProps, ref: React.Ref, params: FieldConfig, @@ -134,7 +134,7 @@ export const useField_unstable = ( } } - const state: FieldState = { + const state: FieldState = { orientation, validationState, classNames: params.classNames, 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 005ac098c8853..bf37191fc707a 100644 --- a/packages/react-components/react-field/src/components/Field/useFieldStyles.ts +++ b/packages/react-components/react-field/src/components/Field/useFieldStyles.ts @@ -1,9 +1,9 @@ -import { makeStyles, mergeClasses } from '@griffel/react'; -import type { FieldComponent, FieldProps, FieldSlots, FieldState } from './Field.types'; -import type { SlotClassNames } from '@fluentui/react-utilities'; 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'; -export const getFieldClassNames = (name: string): SlotClassNames> => ({ +export const getFieldClassNames = (name: string): SlotClassNames> => ({ root: `fui-${name}`, control: `fui-${name}__control`, label: `fui-${name}__label`, @@ -81,9 +81,9 @@ const useValidationMessageIconStyles = makeStyles({ /** * Apply styling to the Field slots based on the state */ -export const useFieldStyles_unstable = (state: FieldState) => { +export const useFieldStyles_unstable = (state: FieldState) => { const classNames = state.classNames; - const validationState: FieldProps['validationState'] = state.validationState; + const validationState: FieldProps['validationState'] = state.validationState; const horizontal = state.orientation === 'horizontal'; const rootStyles = useRootStyles(); From 8b2be4b0e796cfb129f65aebcc4aa1ea8f569106 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 09:58:16 -0800 Subject: [PATCH 03/20] Inline fieldConformanceTestOptions, and remove export --- .../react-field/etc/react-field.api.md | 12 ------------ .../src/common/fieldConformanceTestOptions.ts | 17 ----------------- .../CheckboxField/CheckboxField.test.tsx | 1 + .../ComboboxField/ComboboxField.test.tsx | 15 +++++++++++++-- .../components/InputField/InputField.test.tsx | 15 +++++++++++++-- .../ProgressField/ProgressField.test.tsx | 15 +++++++++++++-- .../RadioGroupField/RadioGroupField.test.tsx | 15 +++++++++++++-- .../components/SelectField/SelectField.test.tsx | 15 +++++++++++++-- .../components/SliderField/SliderField.test.tsx | 15 +++++++++++++-- .../SpinButtonField/SpinButtonField.test.tsx | 15 +++++++++++++-- .../components/SwitchField/SwitchField.test.tsx | 15 +++++++++++++-- .../TextareaField/TextareaField.test.tsx | 15 +++++++++++++-- .../react-components/react-field/src/index.ts | 1 - 13 files changed, 118 insertions(+), 48 deletions(-) delete mode 100644 packages/react-components/react-field/src/common/fieldConformanceTestOptions.ts 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 71c0225acd4f2..fdace08fb846f 100644 --- a/packages/react-components/react-field/etc/react-field.api.md +++ b/packages/react-components/react-field/etc/react-field.api.md @@ -56,18 +56,6 @@ export type FieldConfig = { ariaInvalidOnError?: boolean; }; -// @internal -export const fieldConformanceTestOptions: { - 'has-static-classnames': { - props: { - label: string; - validationState: string; - validationMessage: string; - hint: string; - }; - }[]; -}; - // @public export type FieldProps = ComponentProps>, 'control'> & { orientation?: 'vertical' | 'horizontal'; diff --git a/packages/react-components/react-field/src/common/fieldConformanceTestOptions.ts b/packages/react-components/react-field/src/common/fieldConformanceTestOptions.ts deleted file mode 100644 index ed1741d5b2030..0000000000000 --- a/packages/react-components/react-field/src/common/fieldConformanceTestOptions.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Defaults for the isConformant tests of field components. - * - * @internal - */ -export const fieldConformanceTestOptions = { - 'has-static-classnames': [ - { - props: { - label: 'label text', - validationState: 'error', - validationMessage: 'validation message text', - hint: 'hint text', - }, - }, - ], -}; diff --git a/packages/react-components/react-field/src/components/CheckboxField/CheckboxField.test.tsx b/packages/react-components/react-field/src/components/CheckboxField/CheckboxField.test.tsx index b8eff12194f28..6e9617c1eb90f 100644 --- a/packages/react-components/react-field/src/components/CheckboxField/CheckboxField.test.tsx +++ b/packages/react-components/react-field/src/components/CheckboxField/CheckboxField.test.tsx @@ -21,6 +21,7 @@ describe('CheckboxField', () => { }, ], }, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and Checkbox's tests diff --git a/packages/react-components/react-field/src/components/ComboboxField/ComboboxField.test.tsx b/packages/react-components/react-field/src/components/ComboboxField/ComboboxField.test.tsx index d7956de76657f..63fcb3bf6331f 100644 --- a/packages/react-components/react-field/src/components/ComboboxField/ComboboxField.test.tsx +++ b/packages/react-components/react-field/src/components/ComboboxField/ComboboxField.test.tsx @@ -1,4 +1,3 @@ -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { ComboboxField } from './ComboboxField'; @@ -7,7 +6,19 @@ describe('ComboboxField', () => { Component: ComboboxField, displayName: 'ComboboxField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and Combobox's tests diff --git a/packages/react-components/react-field/src/components/InputField/InputField.test.tsx b/packages/react-components/react-field/src/components/InputField/InputField.test.tsx index c7621c84f658d..6d558646db91f 100644 --- a/packages/react-components/react-field/src/components/InputField/InputField.test.tsx +++ b/packages/react-components/react-field/src/components/InputField/InputField.test.tsx @@ -1,4 +1,3 @@ -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { InputField } from './InputField'; @@ -7,7 +6,19 @@ describe('InputField', () => { Component: InputField, displayName: 'InputField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and Input's tests diff --git a/packages/react-components/react-field/src/components/ProgressField/ProgressField.test.tsx b/packages/react-components/react-field/src/components/ProgressField/ProgressField.test.tsx index 174c61ce2a21a..f4d428a293cee 100644 --- a/packages/react-components/react-field/src/components/ProgressField/ProgressField.test.tsx +++ b/packages/react-components/react-field/src/components/ProgressField/ProgressField.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { render } from '@testing-library/react'; import { isConformant } from '../../common/isConformant'; import { ProgressField } from './ProgressField'; @@ -9,7 +8,19 @@ describe('ProgressField', () => { Component: ProgressField, displayName: 'ProgressField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx and Progress.test.tsx diff --git a/packages/react-components/react-field/src/components/RadioGroupField/RadioGroupField.test.tsx b/packages/react-components/react-field/src/components/RadioGroupField/RadioGroupField.test.tsx index 5a7c83f4f624c..c5647f8bd2a66 100644 --- a/packages/react-components/react-field/src/components/RadioGroupField/RadioGroupField.test.tsx +++ b/packages/react-components/react-field/src/components/RadioGroupField/RadioGroupField.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { Radio } from '@fluentui/react-radio'; import { render } from '@testing-library/react'; import { isConformant } from '../../common/isConformant'; @@ -10,7 +9,19 @@ describe('RadioGroupField', () => { Component: RadioGroupField, displayName: 'RadioGroupField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and RadioGroup's tests diff --git a/packages/react-components/react-field/src/components/SelectField/SelectField.test.tsx b/packages/react-components/react-field/src/components/SelectField/SelectField.test.tsx index 7c9dc3e67fbcd..b4786ea4a6842 100644 --- a/packages/react-components/react-field/src/components/SelectField/SelectField.test.tsx +++ b/packages/react-components/react-field/src/components/SelectField/SelectField.test.tsx @@ -1,4 +1,3 @@ -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { SelectField } from './SelectField'; @@ -7,7 +6,19 @@ describe('SelectField', () => { Component: SelectField, displayName: 'SelectField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and Select's tests diff --git a/packages/react-components/react-field/src/components/SliderField/SliderField.test.tsx b/packages/react-components/react-field/src/components/SliderField/SliderField.test.tsx index 3c5f54b945c11..93710ecfcb669 100644 --- a/packages/react-components/react-field/src/components/SliderField/SliderField.test.tsx +++ b/packages/react-components/react-field/src/components/SliderField/SliderField.test.tsx @@ -1,4 +1,3 @@ -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { SliderField } from './SliderField'; @@ -7,7 +6,19 @@ describe('SliderField', () => { Component: SliderField, displayName: 'SliderField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and Slider's tests diff --git a/packages/react-components/react-field/src/components/SpinButtonField/SpinButtonField.test.tsx b/packages/react-components/react-field/src/components/SpinButtonField/SpinButtonField.test.tsx index eb7da150478b9..d78df05fd8423 100644 --- a/packages/react-components/react-field/src/components/SpinButtonField/SpinButtonField.test.tsx +++ b/packages/react-components/react-field/src/components/SpinButtonField/SpinButtonField.test.tsx @@ -1,4 +1,3 @@ -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { SpinButtonField } from './SpinButtonField'; @@ -7,7 +6,19 @@ describe('SpinButtonField', () => { Component: SpinButtonField, displayName: 'SpinButtonField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and SpinButton's tests diff --git a/packages/react-components/react-field/src/components/SwitchField/SwitchField.test.tsx b/packages/react-components/react-field/src/components/SwitchField/SwitchField.test.tsx index 3f1f4fbb7fd0c..624e647345aed 100644 --- a/packages/react-components/react-field/src/components/SwitchField/SwitchField.test.tsx +++ b/packages/react-components/react-field/src/components/SwitchField/SwitchField.test.tsx @@ -1,4 +1,3 @@ -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { SwitchField } from './SwitchField'; @@ -7,7 +6,19 @@ describe('SwitchField', () => { Component: SwitchField, displayName: 'SwitchField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and Switch's tests diff --git a/packages/react-components/react-field/src/components/TextareaField/TextareaField.test.tsx b/packages/react-components/react-field/src/components/TextareaField/TextareaField.test.tsx index 9d0d5df641f63..7b1ca24a96567 100644 --- a/packages/react-components/react-field/src/components/TextareaField/TextareaField.test.tsx +++ b/packages/react-components/react-field/src/components/TextareaField/TextareaField.test.tsx @@ -1,4 +1,3 @@ -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { TextareaField } from './TextareaField'; @@ -7,7 +6,19 @@ describe('TextareaField', () => { Component: TextareaField, displayName: 'TextareaField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and Textarea's tests diff --git a/packages/react-components/react-field/src/index.ts b/packages/react-components/react-field/src/index.ts index 1e506333512ab..b5fb4651bf386 100644 --- a/packages/react-components/react-field/src/index.ts +++ b/packages/react-components/react-field/src/index.ts @@ -1,4 +1,3 @@ -export { fieldConformanceTestOptions } from './common/fieldConformanceTestOptions'; export { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field'; export type { FieldProps, FieldSlots, FieldState, FieldConfig } from './Field'; From 2342d0f8ed6759ac67dd9720586cea9386aadda2 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 09:58:38 -0800 Subject: [PATCH 04/20] chore: Move field components out of react-field and into their base component's package --- .../react-checkbox/etc/react-checkbox.api.md | 18 ++- .../react-checkbox/package.json | 1 + .../src/CheckboxField.ts | 0 .../CheckboxField/CheckboxField.test.tsx | 3 +- .../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 | 11 ++ .../react-combobox/package.json | 1 + .../src/ComboboxField.ts | 0 .../ComboboxField/ComboboxField.test.tsx | 1 + .../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 | 107 +----------------- .../react-components/react-field/package.json | 10 -- .../react-components/react-field/src/index.ts | 30 ----- .../react-input/etc/react-input.api.md | 15 ++- .../react-components/react-input/package.json | 1 + .../src/InputField.ts | 0 .../components/InputField/InputField.test.tsx | 3 +- .../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 | 15 ++- .../react-progress/package.json | 1 + .../src/ProgressField.ts | 0 .../ProgressField/ProgressField.test.tsx | 1 + .../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 | 13 ++- .../react-components/react-radio/package.json | 1 + .../src/RadioGroupField.ts | 0 .../RadioGroupField/RadioGroupField.test.tsx | 1 + .../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 | 11 ++ .../react-select/package.json | 1 + .../src/SelectField.ts | 0 .../SelectField/SelectField.test.tsx | 3 +- .../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 | 1 + .../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 | 11 ++ .../react-spinbutton/package.json | 1 + .../src/SpinButtonField.ts | 0 .../SpinButtonField/SpinButtonField.test.tsx | 1 + .../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 | 13 ++- .../react-switch/package.json | 1 + .../src/SwitchField.ts | 0 .../SwitchField/SwitchField.test.tsx | 1 + .../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 | 13 +++ .../react-textarea/package.json | 1 + .../src/TextareaField.ts | 0 .../TextareaField/TextareaField.test.tsx | 1 + .../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 106 files changed, 325 insertions(+), 253 deletions(-) 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 (90%) 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 (80%) 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%) 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 (69%) 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 (93%) 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 (90%) 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 (69%) 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 (80%) 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 (81%) 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 (80%) 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 (80%) 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/packages/react-components/react-checkbox/etc/react-checkbox.api.md b/packages/react-components/react-checkbox/etc/react-checkbox.api.md index 77b94ea4e82ae..b132b2a9feca0 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,13 @@ import { ComponentProps } from '@fluentui/react-utilities'; import { ComponentState } from '@fluentui/react-utilities'; -import type { ForwardRefComponent } from '@fluentui/react-utilities'; +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 +22,18 @@ export const Checkbox: ForwardRefComponent; // @public (undocumented) export const checkboxClassNames: SlotClassNames; +// @public (undocumented) +export const CheckboxField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const checkboxFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; + +// @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 b1aec2ca284c1..fb4bacae9a81a 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 90% 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 b8eff12194f28..9c72ba88a9a04 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', () => { @@ -21,6 +21,7 @@ describe('CheckboxField', () => { }, ], }, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and Checkbox's tests 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 f8c26120b101b..321a658dba5f6 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 1bb3babd0ea8b..21a66ccad202f 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 0b3719b173c67..9d3d72f9a5bd4 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,8 @@ import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; import { FC } from 'react'; +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 +31,15 @@ export type ComboboxContextValue = Pick; + +// @public (undocumented) +export const comboboxFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; + +// @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 cbda7396cd037..1fa2533e8d7bc 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 80% 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 index d7956de76657f..2e0c735733522 100644 --- a/packages/react-components/react-field/src/components/ComboboxField/ComboboxField.test.tsx +++ b/packages/react-components/react-combobox/src/components/ComboboxField/ComboboxField.test.tsx @@ -8,6 +8,7 @@ describe('ComboboxField', () => { displayName: 'ComboboxField', primarySlot: 'control', testOptions: fieldConformanceTestOptions, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and Combobox's tests 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 88690183f3a9c..592fd9b45c8e9 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 bb95cbfb3cb5b..2466a11ac994c 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 284fa37ded125..37c45f244d8ab 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 64f5386ebd9bd..b817fe3eadd1b 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 b60d219207c8e..735c1c3d4c69b 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 = { @@ -92,81 +59,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 9fdf7f31c0122..1a05cc4ca93de 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/index.ts b/packages/react-components/react-field/src/index.ts index 1e506333512ab..d42b9fa976838 100644 --- a/packages/react-components/react-field/src/index.ts +++ b/packages/react-components/react-field/src/index.ts @@ -1,33 +1,3 @@ export { fieldConformanceTestOptions } from './common/fieldConformanceTestOptions'; 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'; 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 e041af374e7d9..7936ec9c905e8 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,16 @@ ```ts +/// + import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; +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 +21,15 @@ export const Input: ForwardRefComponent; // @public (undocumented) export const inputClassNames: SlotClassNames; +// @public (undocumented) +export const InputField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const inputFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; + +// @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 71b0d20097123..4180d89bde947 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 69% 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 c7621c84f658d..05152012fde0b 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,5 +1,5 @@ import { fieldConformanceTestOptions } from '@fluentui/react-field'; -import { isConformant } from '../../common/isConformant'; +import { isConformant } from '../../testing/isConformant'; import { InputField } from './InputField'; describe('InputField', () => { @@ -8,6 +8,7 @@ describe('InputField', () => { displayName: 'InputField', primarySlot: 'control', testOptions: fieldConformanceTestOptions, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and Input's tests 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 3bb40228bb88e..db1e7707bab7a 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 3deb992114c00..3cc92509a586a 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 5c1f21cf89253..5692197703c5b 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,16 @@ ```ts +/// + import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; +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 +21,15 @@ export const Progress: ForwardRefComponent; // @public (undocumented) export const progressClassNames: SlotClassNames; +// @public (undocumented) +export const ProgressField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const progressFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; + +// @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 7a4c8cde73a3f..cfe0964264e28 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 93% 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 index 174c61ce2a21a..d605667706677 100644 --- a/packages/react-components/react-field/src/components/ProgressField/ProgressField.test.tsx +++ b/packages/react-components/react-progress/src/components/ProgressField/ProgressField.test.tsx @@ -10,6 +10,7 @@ describe('ProgressField', () => { displayName: 'ProgressField', primarySlot: 'control', testOptions: fieldConformanceTestOptions, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx and Progress.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 799ad6c7452fb..64c6c2f357792 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 62dd3290f0328..7c49362a2fcdd 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 83642ec6569c0..21598db1cbedb 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,15 @@ 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 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 +40,15 @@ export type RadioGroupContextValues = { radioGroup: RadioGroupContextValue; }; +// @public (undocumented) +export const RadioGroupField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const radioGroupFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; + +// @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 05429ef37aee9..d50732d24084f 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 90% 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 index 5a7c83f4f624c..8cd2b0841af2d 100644 --- a/packages/react-components/react-field/src/components/RadioGroupField/RadioGroupField.test.tsx +++ b/packages/react-components/react-radio/src/components/RadioGroupField/RadioGroupField.test.tsx @@ -11,6 +11,7 @@ describe('RadioGroupField', () => { displayName: 'RadioGroupField', primarySlot: 'control', testOptions: fieldConformanceTestOptions, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and RadioGroup's tests 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 418ea74b9b1a9..394a9493b30c8 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 980ca2af6b761..4488c58d851c0 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 d6acc6e9f5e5f..8ed505c7d763b 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,8 @@ import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; +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 +24,15 @@ export const Select: ForwardRefComponent; // @public (undocumented) export const selectClassNames: SlotClassNames; +// @public (undocumented) +export const SelectField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const selectFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; + +// @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 a740d32c80a42..b265a28e2cddd 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 69% 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 7c9dc3e67fbcd..c0beca0056129 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,5 +1,5 @@ import { fieldConformanceTestOptions } from '@fluentui/react-field'; -import { isConformant } from '../../common/isConformant'; +import { isConformant } from '../../testing/isConformant'; import { SelectField } from './SelectField'; describe('SelectField', () => { @@ -8,6 +8,7 @@ describe('SelectField', () => { displayName: 'SelectField', primarySlot: 'control', testOptions: fieldConformanceTestOptions, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and Select's tests 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 b7c72dc584521..bd07722505d81 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 cdee7bc148ca6..a580ba518797e 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 2f1a515f1c83a..7dc84a2152f18 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 'packages/react-components/react-field/src/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 800cab78693f8..3575eeaf1e95a 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 80% 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 3c5f54b945c11..3d9a0837932df 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 @@ -8,6 +8,7 @@ describe('SliderField', () => { displayName: 'SliderField', primarySlot: 'control', testOptions: fieldConformanceTestOptions, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and Slider's tests 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 d18166e094af5..ef628533d66aa 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 ab4888c042fc3..d5e2b01a479cf 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 4f5b687318f89..404340aa13665 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,8 @@ import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; +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 +30,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, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; + +// @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 e2bcd6e5bca60..4268884242e9a 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 81% 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 index eb7da150478b9..32228c1c42f15 100644 --- a/packages/react-components/react-field/src/components/SpinButtonField/SpinButtonField.test.tsx +++ b/packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.test.tsx @@ -8,6 +8,7 @@ describe('SpinButtonField', () => { displayName: 'SpinButtonField', primarySlot: 'control', testOptions: fieldConformanceTestOptions, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and SpinButton's tests 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 7a4137415fc3f..b28be0199f37b 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 3f33ebd3d253b..6f3e63c275cef 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 6a8b8a437e0fb..1df159d2dcd67 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,13 @@ import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; +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 +28,15 @@ export const switchClassName: string; // @public (undocumented) export const switchClassNames: SlotClassNames; +// @public (undocumented) +export const SwitchField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const switchFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; + +// @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 5a9fa48d0f42e..887f8e521dc7a 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 80% 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 index 3f1f4fbb7fd0c..ae01c889dac73 100644 --- a/packages/react-components/react-field/src/components/SwitchField/SwitchField.test.tsx +++ b/packages/react-components/react-switch/src/components/SwitchField/SwitchField.test.tsx @@ -8,6 +8,7 @@ describe('SwitchField', () => { displayName: 'SwitchField', primarySlot: 'control', testOptions: fieldConformanceTestOptions, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and Switch's tests 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 e1d1e85161a6d..c4ec08a0a5a28 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 6ca6e3524f037..7e59ba75a2077 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 033194d9e76a7..5d161286b5ff8 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,12 @@ ```ts +/// + import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; +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 +24,15 @@ export const Textarea: ForwardRefComponent; // @public (undocumented) export const textareaClassNames: SlotClassNames; +// @public (undocumented) +export const TextareaField_unstable: ForwardRefComponent; + +// @public (undocumented) +export const textareaFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; + +// @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 78aabad1c9b5d..d360cc2bcaa55 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 80% 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 index 9d0d5df641f63..6df7d4e53f638 100644 --- a/packages/react-components/react-field/src/components/TextareaField/TextareaField.test.tsx +++ b/packages/react-components/react-textarea/src/components/TextareaField/TextareaField.test.tsx @@ -8,6 +8,7 @@ describe('TextareaField', () => { displayName: 'TextareaField', primarySlot: 'control', testOptions: fieldConformanceTestOptions, + disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); // Most functionality is tested by Field.test.tsx, and Textarea's tests 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 86b140e534d8a..9a5cfae1e9530 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 f32e87b9a3a05..21f80214cae51 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 From 21f96ac6a05c2c5a4cb580d5d5b34983ce030774 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 09:58:59 -0800 Subject: [PATCH 05/20] Inline fieldConformanceTestOptions and remove export --- .../ComboboxField/ComboboxField.test.tsx | 14 ++++++++++++-- .../react-field/etc/react-field.api.md | 12 ------------ .../src/common/fieldConformanceTestOptions.ts | 17 ----------------- .../react-components/react-field/src/index.ts | 1 - .../components/InputField/InputField.test.tsx | 14 ++++++++++++-- .../ProgressField/ProgressField.test.tsx | 14 ++++++++++++-- .../RadioGroupField/RadioGroupField.test.tsx | 14 ++++++++++++-- .../components/SelectField/SelectField.test.tsx | 14 ++++++++++++-- .../components/SliderField/SliderField.test.tsx | 14 ++++++++++++-- .../SpinButtonField/SpinButtonField.test.tsx | 14 ++++++++++++-- .../components/SwitchField/SwitchField.test.tsx | 14 ++++++++++++-- .../TextareaField/TextareaField.test.tsx | 14 ++++++++++++-- 12 files changed, 108 insertions(+), 48 deletions(-) delete mode 100644 packages/react-components/react-field/src/common/fieldConformanceTestOptions.ts diff --git a/packages/react-components/react-combobox/src/components/ComboboxField/ComboboxField.test.tsx b/packages/react-components/react-combobox/src/components/ComboboxField/ComboboxField.test.tsx index 2e0c735733522..63fcb3bf6331f 100644 --- a/packages/react-components/react-combobox/src/components/ComboboxField/ComboboxField.test.tsx +++ b/packages/react-components/react-combobox/src/components/ComboboxField/ComboboxField.test.tsx @@ -1,4 +1,3 @@ -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { ComboboxField } from './ComboboxField'; @@ -7,7 +6,18 @@ describe('ComboboxField', () => { Component: ComboboxField, displayName: 'ComboboxField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); 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 735c1c3d4c69b..19ceb926cf4a1 100644 --- a/packages/react-components/react-field/etc/react-field.api.md +++ b/packages/react-components/react-field/etc/react-field.api.md @@ -23,18 +23,6 @@ export type FieldConfig = { ariaInvalidOnError?: boolean; }; -// @internal -export const fieldConformanceTestOptions: { - 'has-static-classnames': { - props: { - label: string; - validationState: string; - validationMessage: string; - hint: string; - }; - }[]; -}; - // @public export type FieldProps = ComponentProps>, 'control'> & { orientation?: 'vertical' | 'horizontal'; diff --git a/packages/react-components/react-field/src/common/fieldConformanceTestOptions.ts b/packages/react-components/react-field/src/common/fieldConformanceTestOptions.ts deleted file mode 100644 index ed1741d5b2030..0000000000000 --- a/packages/react-components/react-field/src/common/fieldConformanceTestOptions.ts +++ /dev/null @@ -1,17 +0,0 @@ -/** - * Defaults for the isConformant tests of field components. - * - * @internal - */ -export const fieldConformanceTestOptions = { - 'has-static-classnames': [ - { - props: { - label: 'label text', - validationState: 'error', - validationMessage: 'validation message text', - hint: 'hint text', - }, - }, - ], -}; diff --git a/packages/react-components/react-field/src/index.ts b/packages/react-components/react-field/src/index.ts index d42b9fa976838..970839f59721f 100644 --- a/packages/react-components/react-field/src/index.ts +++ b/packages/react-components/react-field/src/index.ts @@ -1,3 +1,2 @@ -export { fieldConformanceTestOptions } from './common/fieldConformanceTestOptions'; export { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field'; export type { FieldProps, FieldSlots, FieldState, FieldConfig } from './Field'; diff --git a/packages/react-components/react-input/src/components/InputField/InputField.test.tsx b/packages/react-components/react-input/src/components/InputField/InputField.test.tsx index 05152012fde0b..933979074e3bb 100644 --- a/packages/react-components/react-input/src/components/InputField/InputField.test.tsx +++ b/packages/react-components/react-input/src/components/InputField/InputField.test.tsx @@ -1,4 +1,3 @@ -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../testing/isConformant'; import { InputField } from './InputField'; @@ -7,7 +6,18 @@ describe('InputField', () => { Component: InputField, displayName: 'InputField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); diff --git a/packages/react-components/react-progress/src/components/ProgressField/ProgressField.test.tsx b/packages/react-components/react-progress/src/components/ProgressField/ProgressField.test.tsx index d605667706677..f4d428a293cee 100644 --- a/packages/react-components/react-progress/src/components/ProgressField/ProgressField.test.tsx +++ b/packages/react-components/react-progress/src/components/ProgressField/ProgressField.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { render } from '@testing-library/react'; import { isConformant } from '../../common/isConformant'; import { ProgressField } from './ProgressField'; @@ -9,7 +8,18 @@ describe('ProgressField', () => { Component: ProgressField, displayName: 'ProgressField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); diff --git a/packages/react-components/react-radio/src/components/RadioGroupField/RadioGroupField.test.tsx b/packages/react-components/react-radio/src/components/RadioGroupField/RadioGroupField.test.tsx index 8cd2b0841af2d..c5647f8bd2a66 100644 --- a/packages/react-components/react-radio/src/components/RadioGroupField/RadioGroupField.test.tsx +++ b/packages/react-components/react-radio/src/components/RadioGroupField/RadioGroupField.test.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { Radio } from '@fluentui/react-radio'; import { render } from '@testing-library/react'; import { isConformant } from '../../common/isConformant'; @@ -10,7 +9,18 @@ describe('RadioGroupField', () => { Component: RadioGroupField, displayName: 'RadioGroupField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); diff --git a/packages/react-components/react-select/src/components/SelectField/SelectField.test.tsx b/packages/react-components/react-select/src/components/SelectField/SelectField.test.tsx index c0beca0056129..cbdfc9eb2c981 100644 --- a/packages/react-components/react-select/src/components/SelectField/SelectField.test.tsx +++ b/packages/react-components/react-select/src/components/SelectField/SelectField.test.tsx @@ -1,4 +1,3 @@ -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../testing/isConformant'; import { SelectField } from './SelectField'; @@ -7,7 +6,18 @@ describe('SelectField', () => { Component: SelectField, displayName: 'SelectField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); diff --git a/packages/react-components/react-slider/src/components/SliderField/SliderField.test.tsx b/packages/react-components/react-slider/src/components/SliderField/SliderField.test.tsx index 3d9a0837932df..93710ecfcb669 100644 --- a/packages/react-components/react-slider/src/components/SliderField/SliderField.test.tsx +++ b/packages/react-components/react-slider/src/components/SliderField/SliderField.test.tsx @@ -1,4 +1,3 @@ -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { SliderField } from './SliderField'; @@ -7,7 +6,18 @@ describe('SliderField', () => { Component: SliderField, displayName: 'SliderField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); diff --git a/packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.test.tsx b/packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.test.tsx index 32228c1c42f15..d78df05fd8423 100644 --- a/packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.test.tsx +++ b/packages/react-components/react-spinbutton/src/components/SpinButtonField/SpinButtonField.test.tsx @@ -1,4 +1,3 @@ -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { SpinButtonField } from './SpinButtonField'; @@ -7,7 +6,18 @@ describe('SpinButtonField', () => { Component: SpinButtonField, displayName: 'SpinButtonField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); diff --git a/packages/react-components/react-switch/src/components/SwitchField/SwitchField.test.tsx b/packages/react-components/react-switch/src/components/SwitchField/SwitchField.test.tsx index ae01c889dac73..624e647345aed 100644 --- a/packages/react-components/react-switch/src/components/SwitchField/SwitchField.test.tsx +++ b/packages/react-components/react-switch/src/components/SwitchField/SwitchField.test.tsx @@ -1,4 +1,3 @@ -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { SwitchField } from './SwitchField'; @@ -7,7 +6,18 @@ describe('SwitchField', () => { Component: SwitchField, displayName: 'SwitchField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); diff --git a/packages/react-components/react-textarea/src/components/TextareaField/TextareaField.test.tsx b/packages/react-components/react-textarea/src/components/TextareaField/TextareaField.test.tsx index 6df7d4e53f638..7b1ca24a96567 100644 --- a/packages/react-components/react-textarea/src/components/TextareaField/TextareaField.test.tsx +++ b/packages/react-components/react-textarea/src/components/TextareaField/TextareaField.test.tsx @@ -1,4 +1,3 @@ -import { fieldConformanceTestOptions } from '@fluentui/react-field'; import { isConformant } from '../../common/isConformant'; import { TextareaField } from './TextareaField'; @@ -7,7 +6,18 @@ describe('TextareaField', () => { Component: TextareaField, displayName: 'TextareaField', primarySlot: 'control', - testOptions: fieldConformanceTestOptions, + testOptions: { + 'has-static-classnames': [ + { + props: { + label: 'label text', + validationState: 'error', + validationMessage: 'validation message text', + hint: 'hint text', + }, + }, + ], + }, disabledTests: ['exported-top-level'], // TODO re-enable once component is exported without _unstable }); From 61559e96d8d43189919f8dcd34b7ef4980dcf62e Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 10:09:54 -0800 Subject: [PATCH 06/20] Rename FieldComponent to FieldControl --- .../react-field/src/components/Field/Field.types.ts | 12 ++++++------ .../react-field/src/components/Field/renderField.tsx | 6 +++--- .../react-field/src/components/Field/useField.tsx | 8 ++++---- .../src/components/Field/useFieldStyles.ts | 8 ++++---- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/packages/react-components/react-field/src/components/Field/Field.types.ts b/packages/react-components/react-field/src/components/Field/Field.types.ts index f1644d289d9ae..c5103fe179864 100644 --- a/packages/react-components/react-field/src/components/Field/Field.types.ts +++ b/packages/react-components/react-field/src/components/Field/Field.types.ts @@ -9,7 +9,7 @@ import type { SlotComponent } from './SlotComponent.types'; * Note: the use of VoidFunctionComponent means that component is not *required* to have a children prop, * but it is still allowed to have a children prop. */ -export type FieldComponent = React.VoidFunctionComponent< +export type FieldControl = React.VoidFunctionComponent< Pick< React.HTMLAttributes, 'id' | 'className' | 'style' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-errormessage' @@ -19,7 +19,7 @@ export type FieldComponent = React.VoidFunctionComponent< /** * Slots added by Field */ -export type FieldSlots = { +export type FieldSlots = { root: NonNullable>; /** @@ -54,7 +54,7 @@ export type FieldSlots = { /** * Field Props */ -export type FieldProps = ComponentProps>, 'control'> & { +export type FieldProps = ComponentProps>, 'control'> & { /** * The orientation of the label relative to the field component. * This only affects the label, and not the validationMessage or hint (which always appear below the field component). @@ -79,7 +79,7 @@ export type FieldProps = ComponentProps = FieldProps & { +export type FieldPropsWithOptionalComponentProps = FieldProps & { /** * Whether the field label should be marked as required. */ @@ -96,7 +96,7 @@ export type FieldPropsWithOptionalComponentProps = Fie /** * Configuration parameters for a Field class, passed to useField_unstable */ -export type FieldConfig = { +export type FieldConfig = { /** * The underlying input component that this field is wrapping. */ @@ -129,7 +129,7 @@ export type FieldConfig = { /** * State used in rendering Field */ -export type FieldState = ComponentState>> & +export type FieldState = ComponentState>> & Pick, 'orientation' | 'validationState'> & { classNames: SlotClassNames>; }; diff --git a/packages/react-components/react-field/src/components/Field/renderField.tsx b/packages/react-components/react-field/src/components/Field/renderField.tsx index c3a5c6e2577ff..4727909444e6f 100644 --- a/packages/react-components/react-field/src/components/Field/renderField.tsx +++ b/packages/react-components/react-field/src/components/Field/renderField.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; import { getSlots } from '@fluentui/react-utilities'; -import type { FieldComponent, FieldSlots, FieldState } from './Field.types'; +import type { FieldControl, FieldSlots, FieldState } from './Field.types'; /** * Render the final JSX of Field */ -export const renderField_unstable = (state: FieldState) => { - const { slots, slotProps } = getSlots>(state as FieldState); +export const renderField_unstable = (state: FieldState) => { + const { slots, slotProps } = getSlots>(state as FieldState); return ( diff --git a/packages/react-components/react-field/src/components/Field/useField.tsx b/packages/react-components/react-field/src/components/Field/useField.tsx index acd4da41721ca..751d1fb7b2935 100644 --- a/packages/react-components/react-field/src/components/Field/useField.tsx +++ b/packages/react-components/react-field/src/components/Field/useField.tsx @@ -3,7 +3,7 @@ import { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@ import { Label } from '@fluentui/react-label'; import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities'; import type { - FieldComponent, + FieldControl, FieldConfig, FieldProps, FieldPropsWithOptionalComponentProps, @@ -19,7 +19,7 @@ const validationMessageIcons = { /** * Partition the props used by the Field itself, from the props that are passed to the underlying field component. */ -export const getPartitionedFieldProps = >(props: Props) => { +export const getPartitionedFieldProps = >(props: Props) => { const { className, control, @@ -60,7 +60,7 @@ export const getPartitionedFieldProps = ( +export const useField_unstable = ( props: FieldPropsWithOptionalComponentProps, ref: React.Ref, params: FieldConfig, @@ -134,7 +134,7 @@ export const useField_unstable = ( } } - const state: FieldState = { + const state: FieldState = { orientation, validationState, classNames: params.classNames, 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 005ac098c8853..964cb96eb7b3c 100644 --- a/packages/react-components/react-field/src/components/Field/useFieldStyles.ts +++ b/packages/react-components/react-field/src/components/Field/useFieldStyles.ts @@ -1,9 +1,9 @@ import { makeStyles, mergeClasses } from '@griffel/react'; -import type { FieldComponent, FieldProps, FieldSlots, FieldState } from './Field.types'; +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> => ({ +export const getFieldClassNames = (name: string): SlotClassNames> => ({ root: `fui-${name}`, control: `fui-${name}__control`, label: `fui-${name}__label`, @@ -81,9 +81,9 @@ const useValidationMessageIconStyles = makeStyles({ /** * Apply styling to the Field slots based on the state */ -export const useFieldStyles_unstable = (state: FieldState) => { +export const useFieldStyles_unstable = (state: FieldState) => { const classNames = state.classNames; - const validationState: FieldProps['validationState'] = state.validationState; + const validationState: FieldProps['validationState'] = state.validationState; const horizontal = state.orientation === 'horizontal'; const rootStyles = useRootStyles(); From bf1a5badc55d4d4d7b613f21e72fc4ea203fb8d6 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 10:18:11 -0800 Subject: [PATCH 07/20] yarn change --- ...eact-checkbox-f0dd6e86-d619-4d17-979a-7b4efd0a43dd.json | 7 +++++++ ...eact-combobox-c71ab8ad-51c9-4bc6-9ffc-d879cd1a55cd.json | 7 +++++++ ...ct-components-0b5338a3-9929-4ff6-abd6-a75b17e44acd.json | 7 +++++++ ...i-react-input-b96abe0f-346a-4350-a96b-cd6ccd7aa966.json | 7 +++++++ ...eact-progress-de15dbe8-5231-4e75-9a8e-276175a1d272.json | 7 +++++++ ...i-react-radio-acf36340-f653-4e00-8699-549e3b0fbc39.json | 7 +++++++ ...-react-select-b2eec4a4-a310-45a4-bf09-ea74862bb758.json | 7 +++++++ ...-react-slider-1c2e9093-a868-42cb-b5b2-d4f9d36aaf5c.json | 7 +++++++ ...ct-spinbutton-10a09639-41a9-4a6c-a3ae-afdfad89a493.json | 7 +++++++ ...-react-switch-56fe5dfc-0079-452f-a406-fba40e6febb7.json | 7 +++++++ ...eact-textarea-e9ae3fbc-ff3c-4a7d-b889-a686f90bb859.json | 7 +++++++ 11 files changed, 77 insertions(+) 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-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 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 0000000000000..7a633d8a6320c --- /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 0000000000000..01192943f793b --- /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 0000000000000..218ed067146ae --- /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-input-b96abe0f-346a-4350-a96b-cd6ccd7aa966.json b/change/@fluentui-react-input-b96abe0f-346a-4350-a96b-cd6ccd7aa966.json new file mode 100644 index 0000000000000..902ed63eeb211 --- /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 0000000000000..e3e09cb29e34d --- /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 0000000000000..c169dcb85179e --- /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 0000000000000..7acde6c058056 --- /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 0000000000000..873a176ee81c8 --- /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 0000000000000..61e20e93f8346 --- /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 0000000000000..92d44c54ab896 --- /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 0000000000000..80a64fee7203a --- /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" +} From e43e3308fa38c129a49e943fa3f6ca59d3f09e3c Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 10:50:54 -0800 Subject: [PATCH 08/20] .api.md --- .../react-field/etc/react-field.api.md | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) 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 fdace08fb846f..6f6faa615973c 100644 --- a/packages/react-components/react-field/etc/react-field.api.md +++ b/packages/react-components/react-field/etc/react-field.api.md @@ -31,7 +31,7 @@ import { Textarea } from '@fluentui/react-textarea'; export const CheckboxField: ForwardRefComponent; // @public (undocumented) -export const checkboxFieldClassNames: SlotClassNames>; +export const checkboxFieldClassNames: SlotClassNames>; // @public (undocumented) export type CheckboxFieldProps = Omit, 'label'> & { @@ -43,13 +43,13 @@ export type CheckboxFieldProps = Omit, 'label'> & { export const ComboboxField: ForwardRefComponent; // @public (undocumented) -export const comboboxFieldClassNames: SlotClassNames>; +export const comboboxFieldClassNames: SlotClassNames>; // @public (undocumented) export type ComboboxFieldProps = FieldProps; // @public -export type FieldConfig = { +export type FieldConfig = { component: T; classNames: SlotClassNames>; labelConnection?: 'htmlFor' | 'aria-labelledby'; @@ -57,13 +57,13 @@ export type FieldConfig = { }; // @public -export type FieldProps = ComponentProps>, 'control'> & { +export type FieldProps = ComponentProps>, 'control'> & { orientation?: 'vertical' | 'horizontal'; validationState?: 'error' | 'warning' | 'success'; }; // @public -export type FieldSlots = { +export type FieldSlots = { root: NonNullable>; control: SlotComponent; label?: Slot; @@ -73,18 +73,18 @@ export type FieldSlots = { }; // @public -export type FieldState = ComponentState>> & Pick, 'orientation' | 'validationState'> & { +export type FieldState = ComponentState>> & Pick, 'orientation' | 'validationState'> & { classNames: SlotClassNames>; }; // @public (undocumented) -export const getFieldClassNames: (name: string) => SlotClassNames>; +export const getFieldClassNames: (name: string) => SlotClassNames>; // @public (undocumented) export const InputField: ForwardRefComponent; // @public (undocumented) -export const inputFieldClassNames: SlotClassNames>; +export const inputFieldClassNames: SlotClassNames>; // @public (undocumented) export type InputFieldProps = FieldProps; @@ -93,7 +93,7 @@ export type InputFieldProps = FieldProps; export const ProgressField: ForwardRefComponent; // @public (undocumented) -export const progressFieldClassNames: SlotClassNames>; +export const progressFieldClassNames: SlotClassNames>; // @public (undocumented) export type ProgressFieldProps = FieldProps; @@ -102,19 +102,19 @@ export type ProgressFieldProps = FieldProps; export const RadioGroupField: ForwardRefComponent; // @public (undocumented) -export const radioGroupFieldClassNames: SlotClassNames>; +export const radioGroupFieldClassNames: SlotClassNames>; // @public (undocumented) export type RadioGroupFieldProps = FieldProps; // @public -export const renderField_unstable: (state: FieldState) => JSX.Element; +export const renderField_unstable: (state: FieldState) => JSX.Element; // @public (undocumented) export const SelectField: ForwardRefComponent; // @public (undocumented) -export const selectFieldClassNames: SlotClassNames>; +export const selectFieldClassNames: SlotClassNames>; // @public (undocumented) export type SelectFieldProps = FieldProps; @@ -123,7 +123,7 @@ export type SelectFieldProps = FieldProps; export const SliderField: ForwardRefComponent; // @public (undocumented) -export const sliderFieldClassNames: SlotClassNames>; +export const sliderFieldClassNames: SlotClassNames>; // @public (undocumented) export type SliderFieldProps = FieldProps; @@ -132,7 +132,7 @@ export type SliderFieldProps = FieldProps; export const SpinButtonField: ForwardRefComponent; // @public (undocumented) -export const spinButtonFieldClassNames: SlotClassNames>; +export const spinButtonFieldClassNames: SlotClassNames>; // @public (undocumented) export type SpinButtonFieldProps = FieldProps; @@ -141,7 +141,7 @@ export type SpinButtonFieldProps = FieldProps; export const SwitchField: ForwardRefComponent; // @public (undocumented) -export const switchFieldClassNames: SlotClassNames>; +export const switchFieldClassNames: SlotClassNames>; // @public (undocumented) export type SwitchFieldProps = Omit, 'labelPosition'>; @@ -150,16 +150,16 @@ export type SwitchFieldProps = Omit, 'labelPosition'>; export const TextareaField: ForwardRefComponent; // @public (undocumented) -export const textareaFieldClassNames: SlotClassNames>; +export const textareaFieldClassNames: SlotClassNames>; // @public (undocumented) export type TextareaFieldProps = FieldProps; // @public -export const useField_unstable: (props: FieldPropsWithOptionalComponentProps, ref: React_2.Ref, params: FieldConfig) => FieldState; +export const useField_unstable: (props: FieldPropsWithOptionalComponentProps, ref: React_2.Ref, params: FieldConfig) => FieldState; // @public -export const useFieldStyles_unstable: (state: FieldState) => void; +export const useFieldStyles_unstable: (state: FieldState) => void; // (No @packageDocumentation comment for this package) From 6e7a2ace459d0e8fb9f3864798dc298bd67e75cd Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 10:57:07 -0800 Subject: [PATCH 09/20] Remove isConformant.ts, since it is not currently used in react-field --- .../react-field/src/common/isConformant.ts | 14 -------------- 1 file changed, 14 deletions(-) delete mode 100644 packages/react-components/react-field/src/common/isConformant.ts 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 c35cc6e735834..0000000000000 --- 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: module!.parent!.filename.replace('.test', ''), - extraTests: griffelTests as TestObject, - }; - - baseIsConformant(defaultOptions, testInfo); -} From f96f312a22a58b23b2cdc74f7a3a99086eb7d5a8 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 12:23:56 -0800 Subject: [PATCH 10/20] Rename FieldComponent to FieldControl in VR tests --- .../src/stories/Field.stories.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 663edb6328523..5dfbd5608bded 100644 --- a/apps/vr-tests-react-components/src/stories/Field.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx @@ -15,17 +15,17 @@ import { TextareaField, } from '@fluentui/react-field'; import { SparkleFilled } from '@fluentui/react-icons'; -import { FieldComponent, FieldPropsWithOptionalComponentProps } from '@fluentui/react-field/src/Field'; +import { FieldControl, FieldPropsWithOptionalComponentProps } from '@fluentui/react-field/src/Field'; -type FieldComponentProps = Pick< - FieldPropsWithOptionalComponentProps, +type FieldControlProps = Pick< + FieldPropsWithOptionalComponentProps, 'orientation' | 'required' | 'label' | 'validationState' | 'validationMessage' | 'validationMessageIcon' | 'hint' >; /** * Common VR tests for all field components. Pass the given Field component (or a wrapper around it). */ -const storiesOfField = (name: string, Field: React.VoidFunctionComponent) => +const storiesOfField = (name: string, Field: React.VoidFunctionComponent) => storiesOf(name, module) .addDecorator(story => {story()}) .addDecorator(story => ( @@ -65,7 +65,7 @@ const storiesOfField = (name: string, Field: React.VoidFunctionComponent, + Field: React.VoidFunctionComponent, ) => storiesOfField(name, Field) .addStory('size:small', () => ) From 873fc8a94d9a6464f268f92de72683f629f6a685 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 12:50:12 -0800 Subject: [PATCH 11/20] Fix VR test imports --- apps/vr-tests-react-components/package.json | 1 + .../src/stories/Field.stories.tsx | 25 ++++++++----------- 2 files changed, 12 insertions(+), 14 deletions(-) diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index 9743e4411c7ea..3b5c9891f30aa 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 5dfbd5608bded..68dba77bad6ac 100644 --- a/apps/vr-tests-react-components/src/stories/Field.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx @@ -1,21 +1,18 @@ 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 { SparkleFilled } from '@fluentui/react-icons'; +import { CheckboxField_unstable as CheckboxField } from '@fluentui/react-checkbox'; +import { ComboboxField_unstable as ComboboxField } from '@fluentui/react-combobox'; import { FieldControl, FieldPropsWithOptionalComponentProps } from '@fluentui/react-field/src/Field'; +import { SparkleFilled } from '@fluentui/react-icons'; +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, From c3fae68102438b9d18da15e55d4acbeadcb78f7f Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 15:15:43 -0800 Subject: [PATCH 12/20] Organize imports --- .../react-field/src/components/Field/useField.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-field/src/components/Field/useField.tsx b/packages/react-components/react-field/src/components/Field/useField.tsx index 751d1fb7b2935..c88fad0b33492 100644 --- a/packages/react-components/react-field/src/components/Field/useField.tsx +++ b/packages/react-components/react-field/src/components/Field/useField.tsx @@ -3,8 +3,8 @@ import { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@ import { Label } from '@fluentui/react-label'; import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities'; import type { - FieldControl, FieldConfig, + FieldControl, FieldProps, FieldPropsWithOptionalComponentProps, FieldState, From ea439043228d4ff6418cabb0ab4f4bd874ec9573 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 15:19:16 -0800 Subject: [PATCH 13/20] Fix package version build error --- apps/vr-tests-react-components/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json index 3b5c9891f30aa..1ba68c3591fae 100644 --- a/apps/vr-tests-react-components/package.json +++ b/apps/vr-tests-react-components/package.json @@ -28,7 +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-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", From cc9316ef22a81cb158c3f027e88acbbca94ed0a2 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 15:29:11 -0800 Subject: [PATCH 14/20] Fix capitalization in import --- .../react-components/react-components/src/unstable/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts index b817fe3eadd1b..2cf3b8124806c 100644 --- a/packages/react-components/react-components/src/unstable/index.ts +++ b/packages/react-components/react-components/src/unstable/index.ts @@ -299,8 +299,8 @@ export type { SelectFieldProps_unstable as SelectFieldProps } from '@fluentui/re 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 { 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'; From 90b99a980cef14192a4bd2f4234d4b6f466dbe89 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 15:30:15 -0800 Subject: [PATCH 15/20] .api.md --- .../react-components/etc/react-components.unstable.api.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) 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 37c45f244d8ab..1057aff1024a4 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 @@ -164,9 +164,9 @@ 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_unstable as SpinButtonField } from '@fluentui/react-spinButton'; -import { spinButtonFieldClassNames } from '@fluentui/react-spinButton'; -import { SpinButtonFieldProps_unstable as SpinButtonFieldProps } from '@fluentui/react-spinButton'; +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'; From e217aef9bf9c4b851b40bedeb4fb2a791074b544 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 15:55:52 -0800 Subject: [PATCH 16/20] Fix SliderField.test.tsx --- .../src/components/SliderField/SliderField.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-slider/src/components/SliderField/SliderField.test.tsx b/packages/react-components/react-slider/src/components/SliderField/SliderField.test.tsx index 93710ecfcb669..ca1606cd43b4b 100644 --- a/packages/react-components/react-slider/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', () => { From e9b8ba8f309880ca9f447ff9ad8e4c66b537efa4 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 16:20:06 -0800 Subject: [PATCH 17/20] Fix capitalization in import --- apps/vr-tests-react-components/src/stories/Field.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 68dba77bad6ac..96cfd5b4b7e40 100644 --- a/apps/vr-tests-react-components/src/stories/Field.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx @@ -10,7 +10,7 @@ import { ProgressField_unstable as ProgressField } from '@fluentui/react-progres 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 { 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'; From 301b50ad7f5fbea79872eb56653beba9e501baaf Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 16:32:59 -0800 Subject: [PATCH 18/20] yarn change --- ...i-react-field-95380452-1f87-4389-8454-6f91c1f3e002.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-field-95380452-1f87-4389-8454-6f91c1f3e002.json 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 0000000000000..864ad06023faf --- /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" +} From 426be9732a6d895035dd68eecc70a48bed67f9f8 Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 16:59:46 -0800 Subject: [PATCH 19/20] Fix vr-test imports --- apps/vr-tests-react-components/src/stories/Field.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 96cfd5b4b7e40..8f1fae22d29d7 100644 --- a/apps/vr-tests-react-components/src/stories/Field.stories.tsx +++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx @@ -3,8 +3,8 @@ import Screener, { Steps } from 'screener-storybook/src/screener'; import { storiesOf } from '@storybook/react'; import { CheckboxField_unstable as CheckboxField } from '@fluentui/react-checkbox'; import { ComboboxField_unstable as ComboboxField } from '@fluentui/react-combobox'; -import { FieldControl, FieldPropsWithOptionalComponentProps } from '@fluentui/react-field/src/Field'; import { SparkleFilled } from '@fluentui/react-icons'; +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'; @@ -15,7 +15,7 @@ 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' >; From 797915a58613ba9f8c8d10346612cba7e43b771f Mon Sep 17 00:00:00 2001 From: Ben Howell Date: Wed, 9 Nov 2022 17:25:48 -0800 Subject: [PATCH 20/20] Add missing FieldControl export --- .../react-components/react-checkbox/etc/react-checkbox.api.md | 3 ++- .../react-components/react-combobox/etc/react-combobox.api.md | 3 ++- packages/react-components/react-field/etc/react-field.api.md | 3 +++ packages/react-components/react-field/src/index.ts | 2 +- packages/react-components/react-input/etc/react-input.api.md | 3 ++- .../react-components/react-progress/etc/react-progress.api.md | 3 ++- packages/react-components/react-radio/etc/react-radio.api.md | 3 ++- packages/react-components/react-select/etc/react-select.api.md | 3 ++- packages/react-components/react-slider/etc/react-slider.api.md | 2 +- .../react-spinbutton/etc/react-spinbutton.api.md | 3 ++- packages/react-components/react-switch/etc/react-switch.api.md | 3 ++- .../react-components/react-textarea/etc/react-textarea.api.md | 3 ++- 12 files changed, 23 insertions(+), 11 deletions(-) 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 b132b2a9feca0..a9f6ea7b129e6 100644 --- a/packages/react-components/react-checkbox/etc/react-checkbox.api.md +++ b/packages/react-components/react-checkbox/etc/react-checkbox.api.md @@ -8,6 +8,7 @@ import { ComponentProps } from '@fluentui/react-utilities'; import { 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 { ForwardRefComponent } from '@fluentui/react-utilities'; @@ -26,7 +27,7 @@ export const checkboxClassNames: SlotClassNames; export const CheckboxField_unstable: ForwardRefComponent; // @public (undocumented) -export const checkboxFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; +export const checkboxFieldClassNames: SlotClassNames>; // @public (undocumented) export type CheckboxFieldProps_unstable = Omit, 'label'> & { 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 9d3d72f9a5bd4..2b7bf39e9bb3d 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,7 @@ 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'; @@ -35,7 +36,7 @@ export type ComboboxContextValues = ComboboxBaseContextValues; export const ComboboxField_unstable: ForwardRefComponent; // @public (undocumented) -export const comboboxFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; +export const comboboxFieldClassNames: SlotClassNames>; // @public (undocumented) export type ComboboxFieldProps_unstable = FieldProps; 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 19ceb926cf4a1..3fee9ffbe65ee 100644 --- a/packages/react-components/react-field/etc/react-field.api.md +++ b/packages/react-components/react-field/etc/react-field.api.md @@ -23,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'; diff --git a/packages/react-components/react-field/src/index.ts b/packages/react-components/react-field/src/index.ts index 970839f59721f..8bb2bf317eca5 100644 --- a/packages/react-components/react-field/src/index.ts +++ b/packages/react-components/react-field/src/index.ts @@ -1,2 +1,2 @@ export { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field'; -export type { FieldProps, FieldSlots, FieldState, FieldConfig } from './Field'; +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 7936ec9c905e8..8e555a21d414e 100644 --- a/packages/react-components/react-input/etc/react-input.api.md +++ b/packages/react-components/react-input/etc/react-input.api.md @@ -8,6 +8,7 @@ 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'; @@ -25,7 +26,7 @@ export const inputClassNames: SlotClassNames; export const InputField_unstable: ForwardRefComponent; // @public (undocumented) -export const inputFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; +export const inputFieldClassNames: SlotClassNames>; // @public (undocumented) export type InputFieldProps_unstable = FieldProps; 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 5692197703c5b..fbcfb4fbafde7 100644 --- a/packages/react-components/react-progress/etc/react-progress.api.md +++ b/packages/react-components/react-progress/etc/react-progress.api.md @@ -8,6 +8,7 @@ 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'; @@ -25,7 +26,7 @@ export const progressClassNames: SlotClassNames; export const ProgressField_unstable: ForwardRefComponent; // @public (undocumented) -export const progressFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; +export const progressFieldClassNames: SlotClassNames>; // @public (undocumented) export type ProgressFieldProps_unstable = FieldProps; 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 21598db1cbedb..4b3dd6eb70cc9 100644 --- a/packages/react-components/react-radio/etc/react-radio.api.md +++ b/packages/react-components/react-radio/etc/react-radio.api.md @@ -10,6 +10,7 @@ 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'; @@ -44,7 +45,7 @@ export type RadioGroupContextValues = { export const RadioGroupField_unstable: ForwardRefComponent; // @public (undocumented) -export const radioGroupFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; +export const radioGroupFieldClassNames: SlotClassNames>; // @public (undocumented) export type RadioGroupFieldProps_unstable = FieldProps; 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 8ed505c7d763b..d1e56c19f7ad4 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,7 @@ 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'; @@ -28,7 +29,7 @@ export const selectClassNames: SlotClassNames; export const SelectField_unstable: ForwardRefComponent; // @public (undocumented) -export const selectFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; +export const selectFieldClassNames: SlotClassNames>; // @public (undocumented) export type SelectFieldProps_unstable = FieldProps; 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 7dc84a2152f18..852b0f0c50298 100644 --- a/packages/react-components/react-slider/etc/react-slider.api.md +++ b/packages/react-components/react-slider/etc/react-slider.api.md @@ -8,7 +8,7 @@ import type { ComponentProps } from '@fluentui/react-utilities'; import type { ComponentState } from '@fluentui/react-utilities'; -import { FieldControl } from 'packages/react-components/react-field/src/Field'; +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'; 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 404340aa13665..e62b4eb5ce9bc 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,7 @@ 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'; @@ -34,7 +35,7 @@ export const spinButtonClassNames: SlotClassNames; export const SpinButtonField_unstable: ForwardRefComponent; // @public (undocumented) -export const spinButtonFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; +export const spinButtonFieldClassNames: SlotClassNames>; // @public (undocumented) export type SpinButtonFieldProps_unstable = FieldProps; 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 1df159d2dcd67..24cb88d73ad60 100644 --- a/packages/react-components/react-switch/etc/react-switch.api.md +++ b/packages/react-components/react-switch/etc/react-switch.api.md @@ -8,6 +8,7 @@ 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'; @@ -32,7 +33,7 @@ export const switchClassNames: SlotClassNames; export const SwitchField_unstable: ForwardRefComponent; // @public (undocumented) -export const switchFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; +export const switchFieldClassNames: SlotClassNames>; // @public (undocumented) export type SwitchFieldProps_unstable = Omit, 'labelPosition'>; 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 5d161286b5ff8..c9141d859943b 100644 --- a/packages/react-components/react-textarea/etc/react-textarea.api.md +++ b/packages/react-components/react-textarea/etc/react-textarea.api.md @@ -8,6 +8,7 @@ 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'; @@ -28,7 +29,7 @@ export const textareaClassNames: SlotClassNames; export const TextareaField_unstable: ForwardRefComponent; // @public (undocumented) -export const textareaFieldClassNames: SlotClassNames, "style" | "className" | "id" | "aria-describedby" | "aria-errormessage" | "aria-invalid" | "aria-labelledby">>>>; +export const textareaFieldClassNames: SlotClassNames>; // @public (undocumented) export type TextareaFieldProps_unstable = FieldProps;