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(SplitButton): Remove borders from hover and pressed state in primary split buttons #25059

Merged
merged 6 commits into from
Oct 5, 2022

Conversation

sopranopillow
Copy link
Contributor

Current Behavior

When the split button is hovered or pressed, a 1px border is added changing the width based on the rest state.

See images in issue for more details.

New Behavior

Split Button no longer adds a border when hovered or pressed.

rest:
image

hovered:
image

pressed:
image

Related Issue(s)

Fixes #25053

@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 9d43bf1:

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.545 kB 198.602 kB ExceedsBaseline     57 bytes
office-ui-fabric-react fluentui-react-SpinButton 180.745 kB 180.802 kB ExceedsBaseline     57 bytes
office-ui-fabric-react fluentui-react-CommandBar 190.416 kB 190.473 kB ExceedsBaseline     57 bytes
office-ui-fabric-react fluentui-react-DocumentCard 204.618 kB 204.675 kB ExceedsBaseline     57 bytes
office-ui-fabric-react fluentui-react-Dropdown 220.179 kB 220.236 kB ExceedsBaseline     57 bytes
office-ui-fabric-react fluentui-react-Button 184.142 kB 184.199 kB ExceedsBaseline     57 bytes
office-ui-fabric-react fluentui-react-FloatingPicker 229.566 kB 229.623 kB ExceedsBaseline     57 bytes
office-ui-fabric-react fluentui-react-Breadcrumb 189.352 kB 189.409 kB ExceedsBaseline     57 bytes
office-ui-fabric-react fluentui-react-MessageBar 177.942 kB 177.999 kB ExceedsBaseline     57 bytes
office-ui-fabric-react fluentui-react-Panel 188.319 kB 188.376 kB ExceedsBaseline     57 bytes
office-ui-fabric-react fluentui-react-Pickers 278.78 kB 278.837 kB ExceedsBaseline     57 bytes
office-ui-fabric-react fluentui-react-SearchBox 176.847 kB 176.904 kB ExceedsBaseline     57 bytes
office-ui-fabric-react fluentui-react-SelectedItemsList 219.975 kB 220.032 kB ExceedsBaseline     57 bytes
office-ui-fabric-react fluentui-react-ComboBox 236.674 kB 236.731 kB ExceedsBaseline     57 bytes
office-ui-fabric-react fluentui-react-TeachingBubble 193.022 kB 193.079 kB ExceedsBaseline     57 bytes
office-ui-fabric-react fluentui-react-TimePicker 225.684 kB 225.741 kB ExceedsBaseline     57 bytes

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

Baseline commit: 0b45dbb1df893c61086b5de4f312f7258d3d8fd7 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 3, 2022

📊 Bundle size report

🤖 This report was generated against 0b45dbb1df893c61086b5de4f312f7258d3d8fd7

@khmakoto khmakoto changed the title fix(SplitButton): Remove borders from hover and pressed state in Primary button fix(SplitButton): Remove borders from hover and pressed state in primary split buttons Oct 3, 2022
@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 1551 1556 5000
Breadcrumb mount 3660 3642 1000
Checkbox mount 3482 3433 5000
CheckboxBase mount 3075 3149 5000
ChoiceGroup mount 5891 5954 5000
ComboBox mount 1562 1589 1000
CommandBar mount 12044 12183 1000
ContextualMenu mount 14097 14333 1000
DefaultButton mount 1855 1853 5000
DetailsRow mount 4763 4877 5000
DetailsRowFast mount 4819 4822 5000
DetailsRowNoStyles mount 4621 4532 5000
Dialog mount 4004 3985 1000
DocumentCardTitle mount 709 718 1000
Dropdown mount 4298 4249 5000
FocusTrapZone mount 2600 2625 5000
FocusZone mount 2510 2503 5000
GroupedList mount 72603 82975 2
GroupedList virtual-rerender 34100 34028 2
GroupedList virtual-rerender-with-unmount 114296 113470 2
GroupedListV2 mount 711 704 2
GroupedListV2 virtual-rerender 665 663 2
GroupedListV2 virtual-rerender-with-unmount 698 700 2
IconButton mount 2563 2622 5000
Label mount 891 907 5000
Layer mount 5459 5410 5000
Link mount 1082 1051 5000
MenuButton mount 2220 2257 5000
MessageBar mount 2993 2954 5000
Nav mount 4307 4346 1000
OverflowSet mount 1724 1743 5000
Panel mount 3217 3219 1000
Persona mount 1651 1666 1000
Pivot mount 2173 2127 1000
PrimaryButton mount 1996 2017 5000
Rating mount 9725 9715 5000
SearchBox mount 2018 2052 5000
Shimmer mount 3921 3807 5000
Slider mount 2699 2773 5000
SpinButton mount 6139 6116 5000
Spinner mount 1012 999 5000
SplitButton mount 4032 4158 5000
Stack mount 1097 1114 5000
StackWithIntrinsicChildren mount 3339 3349 5000
StackWithTextChildren mount 6732 6781 5000
SwatchColorPicker mount 13823 13695 5000
TagPicker mount 3617 3522 5000
TeachingBubble mount 112704 115414 5000
Text mount 1016 1010 5000
TextField mount 2159 2130 5000
ThemeProvider mount 1947 1991 5000
ThemeProvider virtual-rerender 1345 1364 5000
ThemeProvider virtual-rerender-with-unmount 2693 2742 5000
Toggle mount 1417 1436 5000
buttonNative mount 711 711 5000

@sopranopillow sopranopillow reopened this Oct 4, 2022
@sopranopillow sopranopillow merged commit 1c8b241 into microsoft:master Oct 5, 2022
@sopranopillow sopranopillow deleted the button/primary-fix branch October 5, 2022 01:28
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
…ary split buttons (microsoft#25059)

* fix: Remove border in hover/pressed state of split button.

* change file

* updating snapshots

* typo

* updating to only apply styles to primary splitbutton

* adding requested changes
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.

[Bug]: Primary button's width changes when hovered/active
4 participants