From 5132757474282330512f058d4de77f1e8af2b11c Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Wed, 5 Oct 2022 14:58:30 -0700 Subject: [PATCH 1/7] ProgressField implementation and stories --- .../src/stories/Field.stories.tsx | 2 + .../src/stories/Progress.stories.tsx | 45 +++++++++++++++++++ .../react-components/react-field/package.json | 1 + .../react-field/src/ProgressField.ts | 1 + .../ProgressField/ProgressField.test.tsx | 24 ++++++++++ .../ProgressField/ProgressField.tsx | 21 +++++++++ .../src/components/ProgressField/index.ts | 1 + .../react-components/react-field/src/index.ts | 3 ++ .../ProgressFieldDefault.stories.tsx | 14 ++++++ .../ProgressField/ProgressFieldDescription.md | 14 ++++++ .../stories/ProgressField/index.stories.tsx | 17 +++++++ .../components/Progress/useProgressStyles.ts | 1 + 12 files changed, 144 insertions(+) create mode 100644 apps/vr-tests-react-components/src/stories/Progress.stories.tsx create mode 100644 packages/react-components/react-field/src/ProgressField.ts create mode 100644 packages/react-components/react-field/src/components/ProgressField/ProgressField.test.tsx create mode 100644 packages/react-components/react-field/src/components/ProgressField/ProgressField.tsx create mode 100644 packages/react-components/react-field/src/components/ProgressField/index.ts create mode 100644 packages/react-components/react-field/src/stories/ProgressField/ProgressFieldDefault.stories.tsx create mode 100644 packages/react-components/react-field/src/stories/ProgressField/ProgressFieldDescription.md create mode 100644 packages/react-components/react-field/src/stories/ProgressField/index.stories.tsx 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 827ba779dda75..d84d951888ddd 100644 --- a/apps/vr-tests-react-components/src/stories/Field.stories.tsx +++ b/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 = ( + diff --git a/apps/vr-tests-react-components/src/stories/Progress.stories.tsx b/apps/vr-tests-react-components/src/stories/Progress.stories.tsx new file mode 100644 index 0000000000000..a1475d6c65c06 --- /dev/null +++ b/apps/vr-tests-react-components/src/stories/Progress.stories.tsx @@ -0,0 +1,45 @@ +import * as React from 'react'; +import { storiesOf } from '@storybook/react'; +import { Progress } from '@fluentui/react-progress'; +import { TestWrapperDecoratorNoAnimation } from '../utilities/TestWrapperDecorator'; + +storiesOf('Progress converged', module) + .addDecorator(TestWrapperDecoratorNoAnimation) + .addStory('Indeterminate', () => , { + includeDarkMode: true, + includeHighContrast: true, + includeRtl: true, + }) + .addStory('Indeterminate with thickness medium', () => , { + includeDarkMode: true, + includeHighContrast: true, + includeRtl: true, + }) + .addStory('Indeterminate with thickness large', () => , { + includeDarkMode: true, + includeHighContrast: true, + includeRtl: true, + }) + .addStory('Determinate', () => , { + includeDarkMode: true, + includeHighContrast: true, + includeRtl: true, + }) + .addStory( + 'Determinate with thickness medium', + () => , + { + includeDarkMode: true, + includeHighContrast: true, + includeRtl: true, + }, + ) + .addStory( + 'Determinate with thickness large', + () => , + { + includeDarkMode: true, + includeHighContrast: true, + includeRtl: true, + }, + ); diff --git a/packages/react-components/react-field/package.json b/packages/react-components/react-field/package.json index 33fd69d99a9fa..1610f89b00d42 100644 --- a/packages/react-components/react-field/package.json +++ b/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", diff --git a/packages/react-components/react-field/src/ProgressField.ts b/packages/react-components/react-field/src/ProgressField.ts new file mode 100644 index 0000000000000..bd6f2fb2cc211 --- /dev/null +++ b/packages/react-components/react-field/src/ProgressField.ts @@ -0,0 +1 @@ +export * from './components/ProgressField/index'; 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 new file mode 100644 index 0000000000000..1724b31d2fe81 --- /dev/null +++ b/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(); + + 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(); + }); +}); diff --git a/packages/react-components/react-field/src/components/ProgressField/ProgressField.tsx b/packages/react-components/react-field/src/components/ProgressField/ProgressField.tsx new file mode 100644 index 0000000000000..d4a5019d9e253 --- /dev/null +++ b/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; + +export const progressFieldClassNames = getFieldClassNames('ProgressField'); + +export const ProgressField: ForwardRefComponent = 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'; diff --git a/packages/react-components/react-field/src/components/ProgressField/index.ts b/packages/react-components/react-field/src/components/ProgressField/index.ts new file mode 100644 index 0000000000000..5f620e1005474 --- /dev/null +++ b/packages/react-components/react-field/src/components/ProgressField/index.ts @@ -0,0 +1 @@ +export * from './ProgressField'; diff --git a/packages/react-components/react-field/src/index.ts b/packages/react-components/react-field/src/index.ts index 34e3896262a7c..b5fb4651bf386 100644 --- a/packages/react-components/react-field/src/index.ts +++ b/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'; diff --git a/packages/react-components/react-field/src/stories/ProgressField/ProgressFieldDefault.stories.tsx b/packages/react-components/react-field/src/stories/ProgressField/ProgressFieldDefault.stories.tsx new file mode 100644 index 0000000000000..0753955e94549 --- /dev/null +++ b/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) => ( + +); diff --git a/packages/react-components/react-field/src/stories/ProgressField/ProgressFieldDescription.md b/packages/react-components/react-field/src/stories/ProgressField/ProgressFieldDescription.md new file mode 100644 index 0000000000000..d1dec04fe2bb4 --- /dev/null +++ b/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. + + + +> **⚠️ 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 diff --git a/packages/react-components/react-field/src/stories/ProgressField/index.stories.tsx b/packages/react-components/react-field/src/stories/ProgressField/index.stories.tsx new file mode 100644 index 0000000000000..7437111945529 --- /dev/null +++ b/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, + }, + }, + }, +}; diff --git a/packages/react-components/react-progress/src/components/Progress/useProgressStyles.ts b/packages/react-components/react-progress/src/components/Progress/useProgressStyles.ts index 132597ab1bc5b..219348c30f1be 100644 --- a/packages/react-components/react-progress/src/components/Progress/useProgressStyles.ts +++ b/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)': { From 6bb3c212ba11303c6bd4d2dd8ae5fa22d8e55040 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Wed, 5 Oct 2022 15:04:29 -0700 Subject: [PATCH 2/7] change file --- ...i-react-field-02d4e520-824a-4fd4-9f19-6ff8f747e31f.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-field-02d4e520-824a-4fd4-9f19-6ff8f747e31f.json diff --git a/change/@fluentui-react-field-02d4e520-824a-4fd4-9f19-6ff8f747e31f.json b/change/@fluentui-react-field-02d4e520-824a-4fd4-9f19-6ff8f747e31f.json new file mode 100644 index 0000000000000..c57eb42efd159 --- /dev/null +++ b/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" +} From e559a638917955ee6cb1adbde36a158801e9caea Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Wed, 5 Oct 2022 15:16:51 -0700 Subject: [PATCH 3/7] update api --- .../react-field/etc/react-field.api.md | 10 ++++++++++ 1 file changed, 10 insertions(+) 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 81cd3f8453104..3290a5408a8c1 100644 --- a/packages/react-components/react-field/etc/react-field.api.md +++ b/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>; // @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; From 6aa25b4934720f384a0468030d4f6376e955a9fa Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Wed, 5 Oct 2022 16:11:15 -0700 Subject: [PATCH 4/7] change files --- ...eact-progress-bf837b7d-856a-4256-94fc-ebd888027c86.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-progress-bf837b7d-856a-4256-94fc-ebd888027c86.json diff --git a/change/@fluentui-react-progress-bf837b7d-856a-4256-94fc-ebd888027c86.json b/change/@fluentui-react-progress-bf837b7d-856a-4256-94fc-ebd888027c86.json new file mode 100644 index 0000000000000..e739b35519696 --- /dev/null +++ b/change/@fluentui-react-progress-bf837b7d-856a-4256-94fc-ebd888027c86.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Add justify-self styling to Progress styles", + "packageName": "@fluentui/react-progress", + "email": "ololubek@microsoft.com", + "dependentChangeType": "patch" +} From a8bc3d6a22c9ebdbd9d44d1a2f483323edb34af4 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Wed, 5 Oct 2022 16:11:51 -0700 Subject: [PATCH 5/7] remove private true in package.json --- packages/react-components/react-progress/package.json | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-components/react-progress/package.json b/packages/react-components/react-progress/package.json index 2614f42fd2705..efc5762ebe4dc 100644 --- a/packages/react-components/react-progress/package.json +++ b/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", From b2906130a9ec36bd773b8c381b5cce814562f048 Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Thu, 6 Oct 2022 10:49:09 -0700 Subject: [PATCH 6/7] remove Progress Stories from vr-tests --- .../src/stories/Progress.stories.tsx | 45 ------------------- 1 file changed, 45 deletions(-) delete mode 100644 apps/vr-tests-react-components/src/stories/Progress.stories.tsx diff --git a/apps/vr-tests-react-components/src/stories/Progress.stories.tsx b/apps/vr-tests-react-components/src/stories/Progress.stories.tsx deleted file mode 100644 index a1475d6c65c06..0000000000000 --- a/apps/vr-tests-react-components/src/stories/Progress.stories.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import { storiesOf } from '@storybook/react'; -import { Progress } from '@fluentui/react-progress'; -import { TestWrapperDecoratorNoAnimation } from '../utilities/TestWrapperDecorator'; - -storiesOf('Progress converged', module) - .addDecorator(TestWrapperDecoratorNoAnimation) - .addStory('Indeterminate', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }) - .addStory('Indeterminate with thickness medium', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }) - .addStory('Indeterminate with thickness large', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }) - .addStory('Determinate', () => , { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }) - .addStory( - 'Determinate with thickness medium', - () => , - { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }, - ) - .addStory( - 'Determinate with thickness large', - () => , - { - includeDarkMode: true, - includeHighContrast: true, - includeRtl: true, - }, - ); From 82743154e1a791ac4f95e4ec0db1081e3204d41e Mon Sep 17 00:00:00 2001 From: Tomi Olubeko Date: Thu, 6 Oct 2022 11:34:44 -0700 Subject: [PATCH 7/7] update react-progress package.json and change file --- ...ui-react-progress-bf837b7d-856a-4256-94fc-ebd888027c86.json | 2 +- packages/react-components/react-progress/package.json | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/change/@fluentui-react-progress-bf837b7d-856a-4256-94fc-ebd888027c86.json b/change/@fluentui-react-progress-bf837b7d-856a-4256-94fc-ebd888027c86.json index e739b35519696..4d0f86b38102f 100644 --- a/change/@fluentui-react-progress-bf837b7d-856a-4256-94fc-ebd888027c86.json +++ b/change/@fluentui-react-progress-bf837b7d-856a-4256-94fc-ebd888027c86.json @@ -1,5 +1,5 @@ { - "type": "patch", + "type": "prerelease", "comment": "Add justify-self styling to Progress styles", "packageName": "@fluentui/react-progress", "email": "ololubek@microsoft.com", diff --git a/packages/react-components/react-progress/package.json b/packages/react-components/react-progress/package.json index efc5762ebe4dc..c7d2404900810 100644 --- a/packages/react-components/react-progress/package.json +++ b/packages/react-components/react-progress/package.json @@ -47,7 +47,8 @@ "beachball": { "disallowedChangeTypes": [ "major", - "prerelease" + "minor", + "patch" ] } }