Skip to content

Conversation

@smhigley
Copy link
Contributor

Resolves part of #23926

  • Fixes the hover/active border colors for the outline style
  • Fixes inner content padding for the Dropdown button and Combobox input
  • Updates minWidth so both Dropdown and Combobox are the same width by default
  • Updates borders to use tokens for width

@codesandbox-ci
Copy link

codesandbox-ci bot commented Aug 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 845fee2:

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

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 12, 2022

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-combobox
Combobox (including child components)
72.549 kB
23.686 kB
73.757 kB
23.969 kB
1.208 kB
283 B
react-combobox
Dropdown (including child components)
71.741 kB
23.559 kB
73.344 kB
23.876 kB
1.603 kB
317 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
188.818 kB
51.901 kB
react-components
react-components: FluentProvider & webLightTheme
33.19 kB
10.921 kB
🤖 This report was generated against 9e86978c43db785ec3f40ee9e0bd35693e26189d

@size-auditor
Copy link

size-auditor bot commented Aug 12, 2022

Asset size changes

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

Baseline commit: 9e86978c43db785ec3f40ee9e0bd35693e26189d (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Aug 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 1303 1306 5000
Button mount 957 960 5000
FluentProvider mount 1561 1620 5000
FluentProviderWithTheme mount 632 645 10
FluentProviderWithTheme virtual-rerender 586 598 10
FluentProviderWithTheme virtual-rerender-with-unmount 629 634 10
MakeStyles mount 1914 1914 50000
SpinButton mount 2515 2542 5000

fontSize: tokens.fontSizeBase400,
lineHeight: tokens.lineHeightBase400,
...shorthands.padding('7px', 0, '7px', tokens.spacingHorizontalM),
...shorthands.padding('7px', 0, '7px', `calc(${tokens.spacingHorizontalM} + ${tokens.spacingHorizontalSNudge})`),
Copy link
Member

Choose a reason for hiding this comment

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

is there a reason why this padding is horizontalM and HorizontalSNudge? Do we need a new token to define these new widths? Or maybe we need a comment to explain why these calculations are happening.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

we talked a while ago about using calc instead of adding an extra node within Dropdown to wrap the text, which would be the other option.

For combobox, it's pretty much just necessary, since <input>s can't have children

@smhigley smhigley merged commit 286479f into microsoft:master Aug 29, 2022
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Sep 1, 2022
* master: (99 commits)
  applying package updates
  add coastal to @fluentui/react package and components (microsoft#24599)
  fix(react-18-tests-v9): extend correct tsconfig.json (microsoft#24626)
  feat(react-18-tests-v9): Add cypress setup to enable writing cypress tests (microsoft#24619)
  chore: Removing CompoundButtonAsToggleButton story since it was importing non-exported functions (microsoft#24620)
  Update PeoplePicker focus styles for the close button - Add borderRadius to getFocusStyle (microsoft#24596)
  fix(react-theme): Rename colorNeutralForegroundInvertedStatic token to colorNeutralForegroundStaticInverted (microsoft#24611)
  Website fabric core (microsoft#24613)
  fix(react-theme) update react theme colors mapping (microsoft#24608)
  Remove downloaded artifact file after using it (microsoft#24606)
  Fix artifact downloading race condition (microsoft#24607)
  chore(deps): bump moment-timezone from 0.5.34 to 0.5.37 (microsoft#24604)
  Remove check for commit existence and make it optional (microsoft#24587)
  Update "screener-build.yml" to include lage's output (microsoft#24586)
  fix(react-theme): Change colorBrandForeground2 mapping in teamsDark theme (microsoft#24579)
  Add scoping for workflow (microsoft#24466)
  fix(react-theme): Swap Background1 and Foreground1 in HC color palette (microsoft#24498)
  applying package updates
  Add support for javascript date localization (microsoft#24577)
  fix: Combobox and Dropdown hover/active borders and padding style fixes (microsoft#24362)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants