Skip to content

Conversation

@behowell
Copy link
Contributor

Current Behavior

ProgressBarField has a validationState prop, but it does not affect the color of the bar.

New Behavior

  • Add a validationState prop to Progress, which can make the bar red or green
  • Have ProgressBarField copy the field's validationState to the underlying Progress
  • Add stories
  • Add VR tests

Related Issue(s)

@behowell behowell self-assigned this Oct 15, 2022
@behowell behowell marked this pull request as ready for review October 15, 2022 00:27
@behowell behowell requested review from a team and tomi-msft as code owners October 15, 2022 00:27
@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 15, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit b4f9548:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 15, 2022

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-progress
Progress
12.789 kB
4.927 kB
13.131 kB
5.039 kB
342 B
112 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
62.94 kB
17.663 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
189.603 kB
52.909 kB
react-components
react-components: FluentProvider & webLightTheme
33.446 kB
11.033 kB
react-portal-compat
PortalCompatProvider
5.857 kB
1.978 kB
🤖 This report was generated against a560d5fd83652a667bbdfd5cab6082c8ab01a6c2

@size-auditor
Copy link

size-auditor bot commented Oct 15, 2022

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: a560d5fd83652a667bbdfd5cab6082c8ab01a6c2 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 15, 2022

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1169 1221 5000
Button mount 851 913 5000
FluentProvider mount 1535 1561 5000
FluentProviderWithTheme mount 640 638 10
FluentProviderWithTheme virtual-rerender 590 594 10
FluentProviderWithTheme virtual-rerender-with-unmount 621 623 10
MakeStyles mount 1855 1745 50000
SpinButton mount 2459 2482 5000

- Determinate Progress
- The determinate form of the Progress component that incrementally loads from 0% to 100%
- Error/success
- The validationState prop can be set to "error" or "success" to make the bar red or green, respectively.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should also include the warning state

@behowell behowell enabled auto-merge (squash) October 24, 2022 18:30
@behowell behowell merged commit f9436f5 into microsoft:master Oct 24, 2022
@behowell behowell deleted the progress/validationState branch October 24, 2022 19:21
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Oct 25, 2022
* master: (106 commits)
  fix: PopoverTriggerChildProps should be exported (microsoft#25159)
  feat: replace ToolbarRadio implementation by usage of toggle button as Radio (microsoft#25343)
  docs: improve Toolbar docs examples (microsoft#25269)
  feat(tools): add unstable API setup updates (microsoft#25355)
  applying package updates
  Fix wrong narration when legend selected (microsoft#24903)
  applying package updates
  chore(react-persona): Update beachball settings and change file's type (microsoft#25363)
  chore: Refactor Field VR tests to have individual tests per component (microsoft#25263)
  chore(react-persona, react-components, vr-tests-v9): Reverting react-persona's version to beta   (microsoft#25357)
  Publishing migration package (microsoft#25354)
  fix: Detailslist is still tabbable when isHeaderVisible=false (microsoft#25342)
  fix: list even/odd off-by-one issue (microsoft#25358)
  feat: add Dropdown a11y spec (microsoft#24917)
  spinbutton: update internal padding for small size (microsoft#25286)
  chore(global-context): migrate to new package structure (microsoft#25341)
  feat: Add validationState to Progress, to make the bar red or green (microsoft#25253)
  feat: Add accessibility scenarios for Fluent UI v9 components #3 (microsoft#23334)
  feat(Dropdown): Freeform search should be case insensitive (microsoft#24879)
  feat(what-input): Limit keyboard detection in inputs (microsoft#25087)
  ...
NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022
…icrosoft#25253)

Add a `validationState` prop to Progress, which can make the bar red, orange, or green
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Field: Add error state to field controls

3 participants