Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(react-input, react-textarea): Deprecating filled with shadow appearance variants #24900

Merged

Conversation

sopranopillow
Copy link
Contributor

@sopranopillow sopranopillow commented Sep 21, 2022

This PR removes the filled with shadow appearance variants. This is due to the shadow appearances not being visible when used on a background that meets our contrast ratio guidelines.

This is how our current docs show the variants:
image

To be able to see the shadow, a lighter background is required like this one:
image

This contradicts our guidelines on using a background with enough contrast ratio for accessibility requirements.

@spmonahan
Copy link
Contributor

This PR removes the filled with shadow appearance variants due to encouraging the use of a background that doesn't meet an accessible contrast ratio.

Can you expand on the issue a bit more please?

@codesandbox-ci
Copy link

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 b4077e2:

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

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-input
Input
23.757 kB
7.704 kB
23.762 kB
7.706 kB
5 B
2 B
react-textarea
Textarea
25.013 kB
8.133 kB
25.018 kB
8.133 kB
5 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
188.672 kB
52.359 kB
react-components
react-components: FluentProvider & webLightTheme
33.394 kB
11.007 kB
react-portal-compat
PortalCompatProvider
5.851 kB
1.964 kB
react-spinbutton
SpinButton
44.102 kB
12.425 kB
🤖 This report was generated against 483f160617f1037e672fe74b8e52abfee9378517

@sopranopillow
Copy link
Contributor Author

sopranopillow commented Sep 22, 2022

This PR removes the filled with shadow appearance variants due to encouraging the use of a background that doesn't meet an accessible contrast ratio.

Can you expand on the issue a bit more please?

I just updated it :) I'm mainly preparing this PR to discuss it next week.

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1295 1312 5000
Button mount 933 949 5000
FluentProvider mount 1604 1571 5000
FluentProviderWithTheme mount 622 633 10
FluentProviderWithTheme virtual-rerender 591 585 10
FluentProviderWithTheme virtual-rerender-with-unmount 630 625 10
MakeStyles mount 1886 1887 50000
SpinButton mount 2529 2537 5000

@size-auditor
Copy link

size-auditor bot commented Sep 22, 2022

Asset size changes

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

Baseline commit: 483f160617f1037e672fe74b8e52abfee9378517 (build)

@sopranopillow sopranopillow merged commit 316aa1e into microsoft:master Sep 27, 2022
@sopranopillow sopranopillow deleted the inputs/deprecate-shadows branch September 27, 2022 22:19
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Sep 28, 2022
* master: (21 commits)
  chore: Migrate react-avatar to use new build (microsoft#24969)
  applying package updates
  chore(react-input, react-textarea): Deprecating filled with shadow appearance variants (microsoft#24900)
  fix: v8 Dropdown no longer sets incorrect and unnecessary aria-activedescendant (microsoft#24593)
  feat: v0 Tooltip migration from v9 (microsoft#24908)
  chore: bump devDeps to fix critical security vulnerability (microsoft#24891)
  Fixing Tree chart issues (microsoft#24752)
  init: new package react-avatar-context (microsoft#24968)
  ci(.github): add issues write permisions to triage-bot worflow (microsoft#24963)
  applying package updates
  fix(Toolbar): close previous submenu when opening another submenu (microsoft#24836)
  fix: update non-focus-trap Popover role to be group (microsoft#24897)
  feat: Avatar's aria label includes 'active' or 'inactive' when using the active prop (microsoft#24901)
  feat(scripts): implement triage-bot module (microsoft#24911)
  chore: bump @octokit/rest to v18 (microsoft#24919)
  stress test: add "build-fixture" command (microsoft#24928)
  BREAKING-CHANGE: new ChatMessageContent for style caching (microsoft#24691)
  bugfix: fix changefile to properly update version of react-components with a patch (microsoft#24949)
  feat(scripts): enable strict checking for additional sub-folders(packages) (microsoft#24526)
  chore: exports DialogContent as unstable (microsoft#24943)
  ...
NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022
…pearance variants (microsoft#24900)

* fix: Deprecate filled with shadow appearance variants.

* change files

* wording
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.

3 participants