Add all Field components to react-field

packages/react-components/react-field/.storybook/main.js

@@ -2,7 +2,12 @@ const rootMain = require('../../../../.storybook/main');
 
 module.exports = /** @type {Omit<import('../../../../.storybook/main'), 'typescript'|'babel'>} */ ({
   ...rootMain,
-  stories: [...rootMain.stories, '../src/**/*.stories.mdx', '../src/**/index.stories.@(ts|tsx)'],
+  stories: [
+    ...rootMain.stories,
+    '../src/**/*.stories.mdx',
+    '../src/stories/Field/index.stories.@(ts|tsx)',
+    '../src/**/index.stories.@(ts|tsx)',
+  ],
   addons: [...rootMain.addons],
   webpackFinal: (config, options) => {
     const localConfig = { ...rootMain.webpackFinal(config, options) };

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

@@ -6,16 +6,46 @@
 
 /// <reference types="react" />
 
+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 type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { ForwardRefComponent } from '@fluentui/react-utilities';
 import { Input } from '@fluentui/react-input';
 import { Label } from '@fluentui/react-label';
+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 { 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<CheckboxFieldProps>;
+
+// @public (undocumented)
+export const checkboxFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+// @public (undocumented)
+export type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {
+    label?: CheckboxProps['label'];
+    fieldLabel?: FieldProps<typeof Checkbox>['label'];
+};
+
+// @public (undocumented)
+export const ComboboxField: ForwardRefComponent<ComboboxFieldProps>;
+
+// @public (undocumented)
+export const comboboxFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+// @public (undocumented)
+export type ComboboxFieldProps = FieldProps<typeof Combobox>;
 
 // @public
 export type FieldProps<T extends FieldComponent> = ComponentProps<Partial<FieldSlots<T>>, 'control'> & {
@@ -50,9 +80,63 @@ export const inputFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
 // @public (undocumented)
 export type InputFieldProps = FieldProps<typeof Input>;
 
+// @public (undocumented)
+export const RadioGroupField: ForwardRefComponent<RadioGroupFieldProps>;
+
+// @public (undocumented)
+export const radioGroupFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+// @public (undocumented)
+export type RadioGroupFieldProps = FieldProps<typeof RadioGroup>;
+
 // @public
 export const renderField_unstable: <T extends FieldComponent>(state: FieldState<T>) => JSX.Element;
 
+// @public (undocumented)
+export const SelectField: ForwardRefComponent<SelectFieldProps>;
+
+// @public (undocumented)
+export const selectFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+// @public (undocumented)
+export type SelectFieldProps = FieldProps<typeof Select>;
+
+// @public (undocumented)
+export const SliderField: ForwardRefComponent<SliderFieldProps>;
+
+// @public (undocumented)
+export const sliderFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+// @public (undocumented)
+export type SliderFieldProps = FieldProps<typeof Slider>;
+
+// @public (undocumented)
+export const SpinButtonField: ForwardRefComponent<SpinButtonFieldProps>;
+
+// @public (undocumented)
+export const spinButtonFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+// @public (undocumented)
+export type SpinButtonFieldProps = FieldProps<typeof SpinButton>;
+
+// @public (undocumented)
+export const SwitchField: ForwardRefComponent<SwitchFieldProps>;
+
+// @public (undocumented)
+export const switchFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+// @public (undocumented)
+export type SwitchFieldProps = FieldProps<typeof Switch>;
+
+// @public (undocumented)
+export const TextareaField: ForwardRefComponent<TextareaFieldProps>;
+
+// @public (undocumented)
+export const textareaFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+// @public (undocumented)
+export type TextareaFieldProps = FieldProps<typeof Textarea>;
+
 // @public
 export const useField_unstable: <T extends FieldComponent>(params: UseFieldParams<T>) => FieldState<T>;
 

packages/react-components/react-field/package.json

@@ -32,10 +32,18 @@
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
+    "@fluentui/react-checkbox": "^9.0.4",
+    "@fluentui/react-combobox": "^9.0.0-beta.8",
     "@fluentui/react-context-selector": "^9.0.2",
     "@fluentui/react-icons": "^2.0.175",
     "@fluentui/react-input": "^9.0.4",
     "@fluentui/react-label": "^9.0.4",
+    "@fluentui/react-radio": "^9.0.4",
+    "@fluentui/react-select": "9.0.0-beta.8",
+    "@fluentui/react-slider": "^9.0.3",
+    "@fluentui/react-spinbutton": "^9.0.0",
+    "@fluentui/react-switch": "^9.0.4",
+    "@fluentui/react-textarea": "^9.0.4",
     "@fluentui/react-theme": "^9.0.0",
     "@fluentui/react-utilities": "^9.0.2",
     "@griffel/react": "^1.3.0",

packages/react-components/react-field/src/CheckboxField.ts

@@ -0,0 +1 @@
+export * from './components/CheckboxField/index';

packages/react-components/react-field/src/ComboboxField.ts

@@ -0,0 +1 @@
+export * from './components/ComboboxField/index';

packages/react-components/react-field/src/RadioGroupField.ts

@@ -0,0 +1 @@
+export * from './components/RadioGroupField/index';

packages/react-components/react-field/src/SelectField.ts

@@ -0,0 +1 @@
+export * from './components/SelectField/index';

packages/react-components/react-field/src/SliderField.ts

@@ -0,0 +1 @@
+export * from './components/SliderField/index';

packages/react-components/react-field/src/SpinButtonField.ts

@@ -0,0 +1 @@
+export * from './components/SpinButtonField/index';

packages/react-components/react-field/src/SwitchField.ts

@@ -0,0 +1 @@
+export * from './components/SwitchField/index';

packages/react-components/react-field/src/TextareaField.ts

@@ -0,0 +1 @@
+export * from './components/TextareaField/index';

packages/react-components/react-field/src/components/CheckboxField/CheckboxField.test.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { resetIdsForTests } from '@fluentui/react-utilities';
+import { render } from '@testing-library/react';
+import { isConformant } from '../../common/isConformant';
+import { CheckboxField, checkboxFieldClassNames } from './CheckboxField';
+
+describe('CheckboxField', () => {
+  isConformant({
+    Component: CheckboxField,
+    displayName: 'CheckboxField',
+    primarySlot: 'control',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            label: 'label',
+            fieldLabel: 'fieldLabel',
+            validationState: 'error',
+            validationMessage: 'validationMessage',
+            hint: 'hint',
+          },
+          expectedClassNames: checkboxFieldClassNames,
+        },
+      ],
+    },
+  });
+
+  beforeEach(resetIdsForTests);
+
+  it('renders a default state', () => {
+    const result = render(<CheckboxField label="Checkbox" />);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-components/react-field/src/components/CheckboxField/CheckboxField.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import type { CheckboxProps } from '@fluentui/react-checkbox';
+import { Checkbox } from '@fluentui/react-checkbox';
+import { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { FieldProps } from '../../Field';
+import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
+
+export type CheckboxFieldProps = Omit<FieldProps<typeof Checkbox>, 'label'> & {
+  /**
+   * The Checkbox's label.
+   */
+  label?: CheckboxProps['label'];
+
+  /**
+   * The label for the CheckboxField, which appears above or before the Checkbox, depending on the `orientation` prop.
+   * It is recommended to only set the `label` prop, and not `fieldLabel`.
+   */
+  fieldLabel?: FieldProps<typeof Checkbox>['label'];
+};
+
+export const checkboxFieldClassNames = getFieldClassNames('CheckboxField');
+
+export const CheckboxField: ForwardRefComponent<CheckboxFieldProps> = React.forwardRef((props, ref) => {
+  const { fieldLabel, required, label, control, ...restOfProps } = props;
+
+  const state = useField_unstable({
+    props: {
+      // Use the fieldLabel prop as the Field's label
+      label: fieldLabel,
+      // Use the label prop as the Checkbox's label
+      control: { label, required, ...control },
+      ...restOfProps,
+    },
+    ref,
+    component: Checkbox,
+    classNames: checkboxFieldClassNames,
+  });
+  useFieldStyles_unstable(state);
+  return renderField_unstable(state);
+});
+
+CheckboxField.displayName = 'CheckboxField';

packages/react-components/react-field/src/components/CheckboxField/__snapshots__/CheckboxField.test.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CheckboxField renders a default state 1`] = `
+<div>
+  <div
+    class="fui-CheckboxField"
+  >
+    <span
+      class="fui-Checkbox fui-CheckboxField__control"
+    >
+      <input
+        class="fui-Checkbox__input"
+        type="checkbox"
+      />
+      <div
+        aria-hidden="true"
+        class="fui-Checkbox__indicator"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          fill="currentColor"
+          height="12"
+          viewBox="0 0 12 12"
+          width="12"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M9.76 3.2c.3.29.32.76.04 1.06l-4.25 4.5a.75.75 0 01-1.08.02L2.22 6.53a.75.75 0 011.06-1.06l1.7 1.7L8.7 3.24a.75.75 0 011.06-.04z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <label
+        class="fui-Label fui-Checkbox__label"
+        for="checkbox-2"
+      >
+        Checkbox
+      </label>
+    </span>
+  </div>
+</div>
+`;

packages/react-components/react-field/src/components/CheckboxField/index.ts

@@ -0,0 +1 @@
+export * from './CheckboxField';

packages/react-components/react-field/src/components/ComboboxField/ComboboxField.test.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { resetIdsForTests } from '@fluentui/react-utilities';
+import { render } from '@testing-library/react';
+import { isConformant } from '../../common/isConformant';
+import { ComboboxField, comboboxFieldClassNames } from './ComboboxField';
+
+describe('ComboboxField', () => {
+  isConformant({
+    Component: ComboboxField,
+    displayName: 'ComboboxField',
+    primarySlot: 'control',
+    testOptions: {
+      'has-static-classnames': [
+        {
+          props: {
+            label: 'label',
+            validationState: 'error',
+            validationMessage: 'validationMessage',
+            hint: 'hint',
+          },
+          expectedClassNames: comboboxFieldClassNames,
+        },
+      ],
+    },
+  });
+
+  beforeEach(resetIdsForTests);
+
+  it('renders a default state', () => {
+    const result = render(<ComboboxField />);
+    expect(result.container).toMatchSnapshot();
+  });
+});

packages/react-components/react-field/src/components/ComboboxField/ComboboxField.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Combobox } from '@fluentui/react-combobox';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { FieldProps } from '../../Field';
+import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
+
+export type ComboboxFieldProps = FieldProps<typeof Combobox>;
+
+export const comboboxFieldClassNames = getFieldClassNames('ComboboxField');
+
+export const ComboboxField: ForwardRefComponent<ComboboxFieldProps> = React.forwardRef((props, ref) => {
+  const state = useField_unstable({ props, ref, component: Combobox, classNames: comboboxFieldClassNames });
+  useFieldStyles_unstable(state);
+  return renderField_unstable(state);
+});
+
+ComboboxField.displayName = 'ComboboxField';

packages/react-components/react-field/src/components/ComboboxField/__snapshots__/ComboboxField.test.tsx.snap

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ComboboxField renders a default state 1`] = `
+<div>
+  <div
+    class="fui-ComboboxField"
+  >
+    <div
+      class="fui-Combobox fui-ComboboxField__control"
+    >
+      <input
+        aria-expanded="false"
+        class="fui-Combobox__input"
+        role="combobox"
+        type="text"
+        value=""
+      />
+      <span
+        class="fui-Combobox__expandIcon"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          fill="currentColor"
+          height="1em"
+          viewBox="0 0 20 20"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M15.85 7.65c.2.2.2.5 0 .7l-5.46 5.49a.55.55 0 01-.78 0L4.15 8.35a.5.5 0 11.7-.7L10 12.8l5.15-5.16c.2-.2.5-.2.7 0z"
+            fill="currentColor"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+</div>
+`;

packages/react-components/react-field/src/components/ComboboxField/index.ts

@@ -0,0 +1 @@
+export * from './ComboboxField';

packages/react-components/react-field/src/components/Field/Field.types.ts

@@ -24,9 +24,6 @@ export type FieldSlots<T extends FieldComponent> = {
 
   /**
    * The underlying component wrapped by this field.
-   *
-   * This is the PRIMARY slot: all intrinsic HTML properties will be applied to this slot,
-   * except `className` and `style`, which remain on the root slot.
    */
   control: SlotComponent<T>;