ProgressField implementation and stories (microsoft#25103)

* ProgressField implementation and stories

* change file

* update api

* change files

* remove private true in package.json

* remove Progress Stories from vr-tests

* update react-progress package.json and change file

apps/vr-tests-react-components/src/stories/Field.stories.tsx

@@ -7,6 +7,7 @@ import {
   ComboboxField,
   InputField,
   InputFieldProps,
+  ProgressField,
   RadioGroupField,
   SelectField,
   SliderField,
@@ -27,6 +28,7 @@ const AllFields = (
       <CheckboxField label="Checkbox" {...props} />
       <ComboboxField label="Combo box field" {...props} />
       <InputField label="Input field" {...props} />
+      <ProgressField label="Progress field" {...props} />
       <RadioGroupField label="Radio group field" {...props}>
         <Radio label="Option one" />
         <Radio label="Option two" />

change/@fluentui-react-field-02d4e520-824a-4fd4-9f19-6ff8f747e31f.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add ProgressField to @fluentui/react-field",
+  "packageName": "@fluentui/react-field",
+  "email": "ololubek@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-progress-bf837b7d-856a-4256-94fc-ebd888027c86.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Add justify-self styling to Progress styles",
+  "packageName": "@fluentui/react-progress",
+  "email": "ololubek@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -14,6 +14,7 @@ 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';
@@ -87,6 +88,15 @@ export const inputFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
 // @public (undocumented)
 export type InputFieldProps = FieldProps<typeof Input>;
 
+// @public (undocumented)
+export const ProgressField: ForwardRefComponent<ProgressFieldProps>;
+
+// @public (undocumented)
+export const progressFieldClassNames: SlotClassNames<FieldSlots<FieldComponent>>;
+
+// @public (undocumented)
+export type ProgressFieldProps = FieldProps<typeof Progress>;
+
 // @public (undocumented)
 export const RadioGroupField: ForwardRefComponent<RadioGroupFieldProps>;
 

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

@@ -37,6 +37,7 @@
     "@fluentui/react-icons": "^2.0.175",
     "@fluentui/react-input": "^9.2.0",
     "@fluentui/react-label": "^9.0.6",
+    "@fluentui/react-progress": "9.0.0-alpha.0",
     "@fluentui/react-radio": "^9.0.7",
     "@fluentui/react-select": "9.0.0-beta.10",
     "@fluentui/react-slider": "^9.0.6",

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

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

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

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { isConformant } from '../../common/isConformant';
+import { ProgressField } from './ProgressField';
+
+describe('ProgressField', () => {
+  isConformant({
+    Component: ProgressField,
+    displayName: 'ProgressField',
+  });
+
+  // Most functionality is tested by Field.test.tsx, and RadioGroup's tests
+
+  it('uses aria-labelledby for the label', () => {
+    const result = render(<ProgressField label="Test label" />);
+
+    const progress = result.getByRole('progressbar');
+    const label = result.getByText('Test label') as HTMLLabelElement;
+
+    expect(label.id).toBeTruthy();
+    expect(progress.getAttribute('aria-labelledby')).toBe(label.id);
+    expect(label.htmlFor).toBeFalsy();
+  });
+});

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Progress } from '@fluentui/react-progress';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { FieldProps } from '../../Field';
+import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';
+
+export type ProgressFieldProps = FieldProps<typeof Progress>;
+
+export const progressFieldClassNames = getFieldClassNames('ProgressField');
+
+export const ProgressField: ForwardRefComponent<ProgressFieldProps> = React.forwardRef((props, ref) => {
+  const state = useField_unstable(props, ref, {
+    component: Progress,
+    classNames: progressFieldClassNames,
+    labelConnection: 'aria-labelledby',
+  });
+  useFieldStyles_unstable(state);
+  return renderField_unstable(state);
+});
+
+ProgressField.displayName = 'ProgressField';

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

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

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

@@ -10,6 +10,9 @@ 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';
 

packages/react-components/react-field/src/stories/ProgressField/ProgressFieldDefault.stories.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { ProgressFieldProps } from '@fluentui/react-field';
+import { ProgressField } from '@fluentui/react-field';
+
+export const Default = (props: Partial<ProgressFieldProps>) => (
+  <ProgressField
+    label="Example Progress field"
+    value={0.75}
+    validationState="success"
+    validationMessage="This is a success message"
+    hint="This is a hint message"
+    {...props}
+  />
+);

packages/react-components/react-field/src/stories/ProgressField/ProgressFieldDescription.md

@@ -0,0 +1,14 @@
+ProgressField adds a Label, validation message, and hint text to the Progress control.
+
+<!-- Don't allow prettier to collapse code block into single line -->
+<!-- prettier-ignore -->
+> **⚠️ Preview components are considered unstable:**
+>
+> ```jsx
+>
+> import { ProgressField } from '@fluentui/react-components/unstable';
+>
+> ```
+>
+> - Features and APIs may change before final release
+> - Please contact us if you intend to use this in your product

packages/react-components/react-field/src/stories/ProgressField/index.stories.tsx

@@ -0,0 +1,17 @@
+import { ProgressField } from '@fluentui/react-field';
+
+import descriptionMd from './ProgressFieldDescription.md';
+
+export { Default } from './ProgressFieldDefault.stories';
+
+export default {
+  title: 'Preview Components/Field/ProgressField',
+  component: ProgressField,
+  parameters: {
+    docs: {
+      description: {
+        component: descriptionMd,
+      },
+    },
+  },
+};

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

@@ -1,7 +1,6 @@
 {
   "name": "@fluentui/react-progress",
   "version": "9.0.0-alpha.0",
-  "private": true,
   "description": "Progress component for FluentUI v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -48,7 +47,8 @@
   "beachball": {
     "disallowedChangeTypes": [
       "major",
-      "prerelease"
+      "minor",
+      "patch"
     ]
   }
 }

packages/react-components/react-progress/src/components/Progress/useProgressStyles.ts

@@ -34,6 +34,7 @@ const useRootStyles = makeStyles({
   root: {
     display: 'block',
     backgroundColor: tokens.colorNeutralBackground6,
+    justifySelf: 'stretch',
     ...shorthands.overflow('hidden'),
 
     '@media screen and (forced-colors: active)': {