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

feat: Adding subtle transition between states on Button components #25106

Merged
merged 2 commits into from
Oct 6, 2022

Conversation

khmakoto
Copy link
Member

@khmakoto khmakoto commented Oct 5, 2022

Previous Behavior

Style changes between states in Button components had no transition between them.

New Behavior

Style changes between states in Button components have a subtle transition between them according to the design spec: all 100ms easyEase. We are also making sure that we support the reduced motion settings by turning down the transition duration.

Note: We are not really using all as the transitionProperty as that would be really expensive and are instead opting for defining only the properties that change between states, which are background, border and color. If more properties change between states in the future, they'll need to be added as well.

Related Issue(s)

Fixes #22552

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-alert
Alert
84.117 kB
21.07 kB
84.529 kB
21.171 kB
412 B
101 B
react-button
Button
36.278 kB
9.636 kB
36.69 kB
9.818 kB
412 B
182 B
react-button
CompoundButton
43.303 kB
10.852 kB
43.715 kB
11.036 kB
412 B
184 B
react-button
MenuButton
38.972 kB
10.536 kB
39.384 kB
10.72 kB
412 B
184 B
react-button
SplitButton
46.418 kB
11.916 kB
46.83 kB
12.102 kB
412 B
186 B
react-button
ToggleButton
52.145 kB
11.108 kB
52.557 kB
11.29 kB
412 B
182 B
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
188.815 kB
52.287 kB
189.227 kB
52.474 kB
412 B
187 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-card
Card - All
67.17 kB
19.281 kB
react-card
Card
62.852 kB
18.198 kB
react-card
CardFooter
8.561 kB
3.601 kB
react-card
CardHeader
9.604 kB
3.94 kB
react-card
CardPreview
8.662 kB
3.656 kB
react-components
react-components: FluentProvider & webLightTheme
33.4 kB
11.008 kB
react-portal-compat
PortalCompatProvider
5.857 kB
1.978 kB
🤖 This report was generated against abcbd1e1328c85f9804b4cf5e3e48630ac553cc6

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 5, 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 110ebc4:

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

@size-auditor
Copy link

size-auditor bot commented Oct 5, 2022

Asset size changes

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

Baseline commit: abcbd1e1328c85f9804b4cf5e3e48630ac553cc6 (build)

@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 1281 1286 5000
Button mount 912 917 5000
FluentProvider mount 1496 1464 5000
FluentProviderWithTheme mount 570 582 10
FluentProviderWithTheme virtual-rerender 534 539 10
FluentProviderWithTheme virtual-rerender-with-unmount 573 574 10
MakeStyles mount 1951 1941 50000
SpinButton mount 2320 2315 5000

@khmakoto khmakoto merged commit 755d076 into microsoft:master Oct 6, 2022
@khmakoto khmakoto deleted the buttonTransition branch October 6, 2022 18:12
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Oct 10, 2022
* master: (23 commits)
  Revert "chore: screener-run workflow should report to PR (microsoft#25144)" (microsoft#25145)
  chore: screener-run workflow should report to PR (microsoft#25144)
  applying package updates
  fix: The Tooltip should not hide if it gets keyboard focus (microsoft#25138)
  fix: Tooltip should not hide if an element inside it gets focused (microsoft#25140)
  Create react-migration-v8-v9 with shims and stories (microsoft#25121)
  fix: CheckboxField to set a generated ID on the input, to match the label's htmlFor (microsoft#25079)
  feat: Overflow menu should be registered in overflowManager (microsoft#25091)
  fix: version-bump generator removes beachball disallowedChangeType config (microsoft#25130)
  fix: new overflow items should only be enqueued while observing (microsoft#25122)
  fix(script): allow runPublished call from CLI (microsoft#25127)
  feat: add vertical variation for toolbar (microsoft#24940)
  ProgressField implementation and stories (microsoft#25103)
  fix: Dropdown icon layout with no placeholder/value (microsoft#25049)
  chore: add a bundle size fixture (Button, Provider & theme) (microsoft#25113)
  feat: Adding subtle transition between states on Button components (microsoft#25106)
  Revert "chore: screener-run workflow should report to PR (microsoft#25096)" (microsoft#25115)
  chore: screener-run workflow should report to PR (microsoft#25096)
  fix(react-dialog): aria-* properties should be reassignable (microsoft#25092)
  fix(scripts): don't run publish if web-components are affected (microsoft#25095)
  ...
NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022
…icrosoft#25106)

* feat: Adding subtle transition between states on Button components.

* Adding change file.

Co-authored-by: Humberto Makoto Morimoto Burgos <[email protected]>
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.

[Feature]: Subtle transition between states on v9 Button
3 participants