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

fix(Button): Remove margin added to buttons by Safari #25052

Merged
merged 4 commits into from
Oct 3, 2022

Conversation

sopranopillow
Copy link
Contributor

@sopranopillow sopranopillow commented Oct 3, 2022

Current Behavior

image

New Behavior

image

Note: this was verified in Safari 15.

Related Issue(s)

Fixes #19988

@sopranopillow sopranopillow added Component: Button Fluent UI react (v8) Issues about @fluentui/react (v8) labels Oct 3, 2022
@sopranopillow sopranopillow self-assigned this Oct 3, 2022
@sopranopillow sopranopillow requested review from a team and khmakoto as code owners October 3, 2022 18:47
@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 3, 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 47a385c:

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

@size-auditor
Copy link

size-auditor bot commented Oct 3, 2022

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-Dialog 198.544 kB 198.553 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-SpinButton 180.744 kB 180.753 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-SearchBox 176.846 kB 176.855 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-Pivot 178.171 kB 178.18 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-Pickers 278.779 kB 278.788 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-Nav 177.341 kB 177.35 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-MessageBar 177.941 kB 177.95 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-Grid 170.032 kB 170.041 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-FloatingPicker 229.565 kB 229.574 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-Facepile 199.315 kB 199.324 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-Dropdown 220.178 kB 220.187 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-DocumentCard 204.617 kB 204.626 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-Breadcrumb 189.351 kB 189.36 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-Button 184.137 kB 184.146 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-ButtonGrid 170.032 kB 170.041 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-CommandBar 190.415 kB 190.424 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-ComboBox 236.673 kB 236.682 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-SelectedItemsList 219.97 kB 219.979 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-Panel 188.318 kB 188.327 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-TeachingBubble 193.025 kB 193.034 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-SwatchColorPicker 179.724 kB 179.733 kB ExceedsBaseline     9 bytes
office-ui-fabric-react fluentui-react-TimePicker 225.683 kB 225.692 kB ExceedsBaseline     9 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: b0b7f99bbbb05b0bd136432983a74fea252c7163 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 3, 2022

📊 Bundle size report

🤖 This report was generated against b0b7f99bbbb05b0bd136432983a74fea252c7163

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 3, 2022

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 1561 1509 5000
Breadcrumb mount 3669 3765 1000
Checkbox mount 3398 3400 5000
CheckboxBase mount 3054 3041 5000
ChoiceGroup mount 5736 5769 5000
ComboBox mount 1581 1586 1000
CommandBar mount 12043 11965 1000
ContextualMenu mount 13532 13902 1000
DefaultButton mount 1762 1798 5000
DetailsRow mount 4687 4674 5000
DetailsRowFast mount 4634 4605 5000
DetailsRowNoStyles mount 4508 4492 5000
Dialog mount 3971 3968 1000
DocumentCardTitle mount 751 718 1000
Dropdown mount 4299 4196 5000
FocusTrapZone mount 2573 2585 5000
FocusZone mount 2435 2446 5000
GroupedList mount 67831 78000 2
GroupedList virtual-rerender 32225 32940 2
GroupedList virtual-rerender-with-unmount 112892 114199 2
GroupedListV2 mount 723 705 2
GroupedListV2 virtual-rerender 694 675 2
GroupedListV2 virtual-rerender-with-unmount 689 726 2
IconButton mount 2501 2500 5000
Label mount 922 924 5000
Layer mount 5463 5429 5000
Link mount 1028 1033 5000
MenuButton mount 2182 2182 5000
MessageBar mount 2910 2923 5000
Nav mount 4307 4190 1000
OverflowSet mount 1768 1737 5000
Panel mount 3257 3273 1000
Persona mount 1651 1660 1000
Pivot mount 2105 2156 1000
PrimaryButton mount 1949 1986 5000
Rating mount 9285 9342 5000
SearchBox mount 2052 1990 5000
Shimmer mount 3796 3711 5000
Slider mount 2697 2719 5000
SpinButton mount 6010 6062 5000
Spinner mount 988 969 5000
SplitButton mount 4052 4002 5000
Stack mount 1155 1120 5000
StackWithIntrinsicChildren mount 3235 3223 5000
StackWithTextChildren mount 6705 6533 5000
SwatchColorPicker mount 13442 13477 5000
TagPicker mount 3399 3466 5000
TeachingBubble mount 104946 106836 5000
Text mount 1031 1058 5000
TextField mount 2095 2104 5000
ThemeProvider mount 1956 1947 5000
ThemeProvider virtual-rerender 1366 1370 5000
ThemeProvider virtual-rerender-with-unmount 2734 2779 5000
Toggle mount 1418 1401 5000
buttonNative mount 686 689 5000

@spmonahan
Copy link
Contributor

@sopranopillow after you described your repro I am able to repro in Safari 16 as well.

@sopranopillow sopranopillow merged commit e059a9f into microsoft:master Oct 3, 2022
@sopranopillow sopranopillow deleted the button/macos-fix branch October 3, 2022 21:56
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Oct 5, 2022
* master: (62 commits)
  chore(migrate-converged): add functionality to execute various v9 package file restructuring tasks (microsoft#24458)
  chore(react-dialog): updates stories (microsoft#25070)
  refactor Progress to remove label and description slots (microsoft#25067)
  fix(SplitButton): Remove borders from hover and pressed state in primary split buttons (microsoft#25059)
  chore(react-persona): Add vr, conformance, and unit tests (microsoft#25007)
  (docs): update Icon docs with examples (microsoft#24768)
  Split button/primary hc fix (microsoft#25066)
  chore(react-utilities): restricts trigger API types (microsoft#25044)
  Add utilities export @fluentui/style-utilities v8 (microsoft#25065)
  chore: migrate whole repo to webpack 5 (microsoft#24542)
  applying package updates
  BREAKING: refactor `useTable` to be composable (microsoft#24947)
  Added shims to shim packages (microsoft#25048)
  Add Progress SPEC (microsoft#24418)
  applying package updates
  chore(react-persona): Add bundle-size command for bundle-size fixtures (microsoft#25055)
  fix(Button): Remove margin added to buttons by Safari (microsoft#25052)
  fix: Menu triggers no longer take focus when they are mounted (microsoft#25016)
  chore: deletes react-trigger package (microsoft#25042)
  Fixed a minor typo: immmediately => immediately (microsoft#25036)
  ...
NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022
* fix: Removing 2px margin that Safari adds to all buttons.

* change file

* updating snapshots

* adding react-experiments snapshots
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Button Fluent UI react (v8) Issues about @fluentui/react (v8)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Safari adds 2px margin: Fix in Fluent UI?
5 participants