Skip to content

feat: add large size for toolbar#25830

Merged
chpalac merged 9 commits intomicrosoft:masterfrom
chpalac:feat/support-large-size
Dec 2, 2022
Merged

feat: add large size for toolbar#25830
chpalac merged 9 commits intomicrosoft:masterfrom
chpalac:feat/support-large-size

Conversation

@chpalac
Copy link
Contributor

@chpalac chpalac commented Nov 29, 2022

Overview

Fixes: #25800
Fixes: #25801

Add support for Large in the toolbar, add the example for it and also adding explicit example for Medium.

Size

@size-auditor
Copy link

size-auditor bot commented Nov 29, 2022

Asset size changes

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

Baseline commit: a847f4059f4863a8d707f253b4a82f75855a3a89 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Nov 29, 2022

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
59.018 kB
16.371 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
186.456 kB
52.327 kB
react-components
react-components: FluentProvider & webLightTheme
33.48 kB
11.037 kB
react-portal-compat
PortalCompatProvider
5.857 kB
1.978 kB
🤖 This report was generated against a847f4059f4863a8d707f253b4a82f75855a3a89

@codesandbox-ci
Copy link

codesandbox-ci bot commented Nov 29, 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 b820278:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Nov 29, 2022

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
Persona mount 512 2807 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1292 1283 5000
Button mount 935 906 5000
FluentProvider mount 1487 1479 5000
FluentProviderWithTheme mount 574 588 10
FluentProviderWithTheme virtual-rerender 543 543 10
FluentProviderWithTheme virtual-rerender-with-unmount 571 581 10
MakeStyles mount 1996 1960 50000
Persona mount 512 2807 5000 Possible regression
SpinButton mount 2374 2384 5000

@ling1726
Copy link
Contributor

Let's update the VR test too to include it

@chpalac chpalac requested a review from a team as a code owner November 29, 2022 20:10
@chpalac
Copy link
Contributor Author

chpalac commented Nov 29, 2022

Let's update the VR test too to include it

@ling1726 Done 17dce09

@fabricteam
Copy link
Collaborator

fabricteam commented Nov 29, 2022

🕵 fluentuiv9 Open the Visual Regressions report to inspect the 3 screenshots

✅ There was 3 screenshots added, 0 screenshots removed, 1745 screenshots unchanged, 6 screenshots with different dimensions and 0 screenshots with visible difference.

unknown 3 screenshots
Image Name Diff(in Pixels) Image Type
Toolbar Converged.Large.Button Pressed.chromium.png 0 Added
Toolbar Converged.Large.Toggle On.chromium.png 0 Added
Toolbar Converged.Large.default.chromium.png 0 Added

Copy link
Contributor

@ling1726 ling1726 left a comment

Choose a reason for hiding this comment

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

Something is wrong here, according to the figma spec the size should only influence the container

image

However, I see that the button size is changing in this PR https://fluentuipr.z22.web.core.windows.net/pull/25830/public-docsite-v9/storybook/index.html?path=/docs/preview-components-toolbar--default#medium

image

@chpalac
Copy link
Contributor Author

chpalac commented Nov 30, 2022

@ling1726 removed the size prop being passed down to Button inside ToolbarButton 41e5dcf

@ling1726
Copy link
Contributor

ling1726 commented Nov 30, 2022

There are still funny things happening with large

image

Also might be useful to set a background colour on the toolbar in the stories so you can see that the size of the container changes

@chpalac
Copy link
Contributor Author

chpalac commented Nov 30, 2022

@ling1726 Fixed

@chpalac chpalac merged commit 1bff9a3 into microsoft:master Dec 2, 2022
@chpalac chpalac deleted the feat/support-large-size branch December 2, 2022 12:00
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Dec 2, 2022
* master:
  fix: Pressed and Hover states for toolbar buttons (microsoft#25835)
  feat: add large size for toolbar (microsoft#25830)
  applying package updates
  adding perf test for Persona (microsoft#25863)
  fix: Fixing Slider's programmatic focus (microsoft#25869)
  chore(v0 docs): Add storybook stories that reference docsite examples for 1JS VR tool migration (microsoft#25663)
  fix: Respecting user-provided ids in ComboBox options (microsoft#25867)
  refactor(scripts): more domain boundaries encapsulation (microsoft#25851)
  docs: add documentation about how to migrate V0 createSvgIcon (microsoft#25828)
  support cross story linking and create example in Menu story (microsoft#25850)
Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023
* feat: add large size for toolbar

* chore: add change

* chore: add api update

* chore: add large to vr tests

* fix: remove size being passed to Button

* fix: align for flex toolbar container

* chore: add borders to toolbar sizing stories

* chore: fix height when vertical
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.

Toolbar: medium buttons should be 32px Toolbar: Large size variation missing

5 participants