Skip to content

Input: update appearance stories#22966

Merged
spmonahan merged 3 commits intomicrosoft:masterfrom
spmonahan:input/filled-contrast
May 13, 2022
Merged

Input: update appearance stories#22966
spmonahan merged 3 commits intomicrosoft:masterfrom
spmonahan:input/filled-contrast

Conversation

@spmonahan
Copy link
Contributor

Current Behavior

The filledDarker and filledLighter "Appearance" stories have insufficient contrast with their backgrounds.

New Behavior

  1. The filledDarker and filledLighter "Appreance" stories have sufficient contrast with their backgrounds.
  2. Design guidance has been added to the story.

Related Issue(s)

Fixes #21449

@codesandbox-ci
Copy link

codesandbox-ci bot commented May 12, 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 3578001:

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

@fabricteam
Copy link
Collaborator

fabricteam commented May 12, 2022

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
179.701 kB
50.147 kB
react-components
react-components: FluentProvider & webLightTheme
34.066 kB
11.089 kB
react-input
Input
22.522 kB
7.313 kB
react-spinbutton
SpinButton
42.623 kB
11.927 kB
🤖 This report was generated against fdb6dc95fdd003e61b2e6f1eaa361c9d8e588b72

@fabricteam
Copy link
Collaborator

fabricteam commented May 12, 2022

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1030 1075 5000
Button mount 659 653 5000
FluentProvider mount 2217 2242 5000
FluentProviderWithTheme mount 322 325 10
FluentProviderWithTheme virtual-rerender 271 249 10
FluentProviderWithTheme virtual-rerender-with-unmount 363 384 10
MakeStyles mount 1827 1831 50000

@size-auditor
Copy link

size-auditor bot commented May 12, 2022

Asset size changes

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

Baseline commit: fdb6dc95fdd003e61b2e6f1eaa361c9d8e588b72 (build)

Updates the background contrast for the filledDarker and filledLighter
appearances in Storybook. This ensures the story demonstrates an
acceptable background color from an accessible contrast perspective.

I've also added the design guidance about contrast to the story to
ensure the topic clearly visible to users.
@spmonahan spmonahan force-pushed the input/filled-contrast branch from 194f94d to 4b2da97 Compare May 12, 2022 18:12
- Adds a "Do's" and "Don'ts" section to Input Storybook.
- Removes some commented out styles from appearance story.
@spmonahan spmonahan merged commit bcafc0d into microsoft:master May 13, 2022
marwan38 pushed a commit to marwan38/fluentui that referenced this pull request Jun 13, 2022
* react-input: update appearance stories background contrast

Updates the background contrast for the filledDarker and filledLighter
appearances in Storybook. This ensures the story demonstrates an
acceptable background color from an accessible contrast perspective.

I've also added the design guidance about contrast to the story to
ensure the topic clearly visible to users.

* react-input: add do's and don'ts

- Adds a "Do's" and "Don'ts" section to Input Storybook.
- Removes some commented out styles from appearance story.

* react-input: add react-text to devdependencies
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.

Input has inadequate contrast in filledDarker/filledLighter

5 participants