Skip to content

feat: Add red border to form controls when aria-invalid is set#25252

Merged
behowell merged 17 commits intomicrosoft:masterfrom
behowell:field/invalid
Oct 17, 2022
Merged

feat: Add red border to form controls when aria-invalid is set#25252
behowell merged 17 commits intomicrosoft:masterfrom
behowell:field/invalid

Conversation

@behowell
Copy link
Contributor

@behowell behowell commented Oct 14, 2022

New Behavior

Change the border to be red when aria-invalid is set for: Combobox, Dropdown, Input, Select, SpinButton, and Textarea.

This also results in the border being red on the field versions of these controls when validationState="error", because Field sets aria-invalid in that case.

Example of an Input with a red border

For background on the reasoning why we're using the aria-invalid prop, see this discussion thread: #25225 (comment)

Related Issue(s)

@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 5e9d7c3:

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-combobox
Combobox (including child components)
75.141 kB
24.428 kB
75.85 kB
24.632 kB
709 B
204 B
react-combobox
Dropdown (including child components)
74.869 kB
24.385 kB
75.579 kB
24.594 kB
710 B
209 B
react-input
Input
23.808 kB
7.729 kB
24.428 kB
7.899 kB
620 B
170 B
react-select
Select
20.892 kB
7.367 kB
21.61 kB
7.568 kB
718 B
201 B
react-spinbutton
SpinButton
44.228 kB
12.454 kB
45.541 kB
12.758 kB
1.313 kB
304 B
react-textarea
Textarea
25.064 kB
8.158 kB
25.687 kB
8.331 kB
623 B
173 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.488 kB
52.587 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 21e5ce216620a11db2aeed0f3b3ecfdb9d61809a

@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 1334 1293 5000
Button mount 949 956 5000
FluentProvider mount 1569 1590 5000
FluentProviderWithTheme mount 633 643 10
FluentProviderWithTheme virtual-rerender 602 592 10
FluentProviderWithTheme virtual-rerender-with-unmount 635 645 10
MakeStyles mount 1921 1934 50000
SpinButton mount 2577 2557 5000

@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: 21e5ce216620a11db2aeed0f3b3ecfdb9d61809a (build)

@behowell behowell merged commit d55f663 into microsoft:master Oct 17, 2022
@behowell behowell deleted the field/invalid branch October 17, 2022 22:36
NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022
…soft#25252)

Change the border to be red when `aria-invalid` is set for: `Combobox`, `Dropdown`, `Input`, `Select`, `SpinButton`, and `Textarea`. 

This also results in the border being red on the field versions of these controls when `validationState="error"`, because Field sets `aria-invalid` in that case.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Field: Add error state to field controls

5 participants