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.

Sign up for GitHub

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

Jump to bottom

fix (v8 MessageBar): Add showExpandButton prop to allow manual override to explicitly show the expand button #32884

Merged
merged 14 commits into from
Sep 30, 2024
Merged

fix (v8 MessageBar): Add showExpandButton prop to allow manual override to explicitly show the expand button #32884

merged 14 commits into from
Sep 30, 2024

Conversation

emmayjiang
Copy link
Contributor

Previous Behavior

v8 MessageBar with actions will truncate at high zooms.
image

New Behavior

By setting the showExpandButton prop, the v8 MessageBar can expand to show truncated content even with actions.
image
image

Related Issue(s)

@emmayjiang emmayjiang marked this pull request as ready for review September 20, 2024 22:42
@emmayjiang emmayjiang requested a review from a team as a code owner September 20, 2024 22:42
@fabricteam
Copy link
Collaborator

fabricteam commented Sep 20, 2024 •
edited
Loading

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react
MessageBar		 190.709 kB
57.085 kB		 190.735 kB
57.101 kB		 26 B
16 B
react
Fluent UI React (entire library)		 1.014 MB
281.941 kB		 1.014 MB
281.954 kB		 26 B
13 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react
ActivityItem		 71.224 kB
23.353 kB
react
Announced		 38.48 kB
13.282 kB
react
Autofill		 15.428 kB
4.768 kB
react
Breadcrumb		 202.219 kB
60.428 kB
react
Button		 195.674 kB
56.655 kB
react
ButtonGrid		 180.605 kB
54.635 kB
react
Calendar		 121.763 kB
37.01 kB
react
Callout		 84.292 kB
27.63 kB
react
Check		 53.185 kB
17.843 kB
react
Checkbox		 59.971 kB
19.889 kB
react
ChoiceGroup		 65.48 kB
21.488 kB
react
ChoiceGroupOption		 58.748 kB
19.364 kB
react
Coachmark		 93.132 kB
29.416 kB
react
Color		 7.789 kB
3.127 kB
react
ColorPicker		 135.222 kB
42.228 kB
react
ComboBox		 252.111 kB
72.343 kB
react
CommandBar		 203.26 kB
60.157 kB
react
ContextualMenu		 155.108 kB
48.186 kB
react
DatePicker		 184.185 kB
56.175 kB
react
DateTimeUtilities		 5.244 kB
1.849 kB
react
DetailsList		 229.966 kB
65.926 kB
react
Dialog		 211.526 kB
63.184 kB
react
Divider		 19.591 kB
6.841 kB
react
DocumentCard		 217.212 kB
64.461 kB
react
DragDrop		 8.343 kB
2.724 kB
react
DraggableZone		 34.305 kB
11.509 kB
react
Dropdown		 234.158 kB
68.695 kB
react
ExtendedPicker		 96.795 kB
27.893 kB
react
Fabric		 41.732 kB
14.349 kB
react
Facepile		 210.814 kB
63.197 kB
react
FloatingPicker		 242.255 kB
69.031 kB
react
FocusTrapZone		 17.03 kB
5.924 kB
react
FocusZone		 55.053 kB
17.47 kB
react
Grid		 180.605 kB
54.635 kB
react
GroupedList		 135.03 kB
40.749 kB
react
GroupedListV2		 122.619 kB
37.852 kB
react
HoverCard		 97.16 kB
30.816 kB
react
Icon		 51.873 kB
17.266 kB
react
Icons		 66.361 kB
24.397 kB
react
Image		 46.887 kB
15.703 kB
react
Keytip		 81.661 kB
26.758 kB
react
KeytipData		 14.028 kB
4.587 kB
react
KeytipLayer		 103.459 kB
32.014 kB
react
Keytips		 106.227 kB
33.014 kB
react
Label		 38.335 kB
13.251 kB
react
Layer		 48.084 kB
16.358 kB
react
Link		 39.668 kB
13.662 kB
react
List		 39.4 kB
12.481 kB
react
MarqueeSelection		 74.528 kB
22.424 kB
react
Modal		 93.657 kB
30.253 kB
react
Nav		 188.209 kB
56.53 kB
react
OverflowSet		 33.376 kB
11.317 kB
react
Overlay		 40.889 kB
14.084 kB
react
Panel		 201.267 kB
60.043 kB
react
Persona		 114.83 kB
36.503 kB
react
PersonaCoin		 114.83 kB
36.503 kB
react
PersonaPresence		 58.055 kB
19.378 kB
react
Pickers		 294.278 kB
82.446 kB
react
Pivot		 189.102 kB
57.262 kB
react
Popup		 12.294 kB
4.195 kB
react
Positioning		 22.807 kB
7.701 kB
react
PositioningContainer		 73.838 kB
23.759 kB
react
ProgressIndicator		 39.491 kB
13.54 kB
react
Rating		 81.995 kB
26.107 kB
react
ResizeGroup		 13.338 kB
4.377 kB
react
ResponsiveMode		 8.13 kB
2.966 kB
react
ScrollablePane		 55.551 kB
17.729 kB
react
SearchBox		 188.984 kB
56.693 kB
react
SelectableOption		 724 B
413 B
react
SelectedItemsList		 232.766 kB
67.939 kB
react
Selection		 42.464 kB
12.301 kB
react
Separator		 35.372 kB
12.142 kB
react
Shimmer		 49.238 kB
16.264 kB
react
ShimmeredDetailsList		 240.748 kB
68.656 kB
react
Slider		 57.639 kB
19.206 kB
react
SpinButton		 192.685 kB
57.791 kB
react
Spinner		 41.764 kB
14.469 kB
react
Stack		 41.734 kB
14.268 kB
react
Sticky		 32.613 kB
10.509 kB
react
Styling		 46.033 kB
15.135 kB
react
SwatchColorPicker		 190.93 kB
58.135 kB
react
TeachingBubble		 205.986 kB
61.064 kB
react
Text		 36.908 kB
12.822 kB
react
TextField		 80.792 kB
25.333 kB
react
Theme		 43.501 kB
14.183 kB
react
ThemeGenerator		 12.392 kB
4.126 kB
react
TimePicker		 241.893 kB
70.099 kB
react
Toggle		 46.21 kB
15.966 kB
react
Tooltip		 87.324 kB
28.217 kB
react
Utilities		 82.709 kB
25.127 kB
react
Viewport		 23.888 kB
7.656 kB
react
WeeklyDayPicker		 101.917 kB
31.829 kB
react
WindowProvider		 1.059 kB
541 B
🤖 This report was generated against df9de02b18d9142e81f657480f57ae2ac26e6f09

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 20, 2024 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 609 624 5000
Breadcrumb mount 1672 1680 1000
Checkbox mount 1672 1696 5000
CheckboxBase mount 1479 1477 5000
ChoiceGroup mount 3015 2994 5000
ComboBox mount 661 667 1000
CommandBar mount 6525 6483 1000
ContextualMenu mount 11871 11825 1000
DefaultButton mount 813 794 5000
DetailsRow mount 2221 2269 5000
DetailsRowFast mount 2236 2275 5000
DetailsRowNoStyles mount 2044 2032 5000
Dialog mount 2784 2810 1000
DocumentCardTitle mount 227 223 1000
Dropdown mount 2027 1972 5000
FocusTrapZone mount 1179 1133 5000
FocusZone mount 1076 1076 5000
GroupedList mount 42133 42592 2
GroupedList virtual-rerender 20220 20640 2
GroupedList virtual-rerender-with-unmount 51732 52001 2
GroupedListV2 mount 225 228 2
GroupedListV2 virtual-rerender 216 202 2
GroupedListV2 virtual-rerender-with-unmount 221 232 2
IconButton mount 1142 1133 5000
Label mount 339 344 5000
Layer mount 2716 2747 5000
Link mount 388 393 5000
MenuButton mount 967 975 5000
MessageBar mount 21299 21358 5000
Nav mount 2013 2031 1000
OverflowSet mount 765 773 5000
Panel mount 1933 1827 1000
Persona mount 751 753 1000
Pivot mount 918 903 1000
PrimaryButton mount 931 910 5000
Rating mount 4665 4746 5000
SearchBox mount 875 924 5000
Shimmer mount 1950 1846 5000
Slider mount 1338 1337 5000
SpinButton mount 3000 2975 5000
Spinner mount 406 382 5000
SplitButton mount 1857 1872 5000
Stack mount 422 421 5000
StackWithIntrinsicChildren mount 895 862 5000
StackWithTextChildren mount 2790 2785 5000
SwatchColorPicker mount 6392 6436 5000
TagPicker mount 1488 1438 5000
Text mount 390 387 5000
TextField mount 943 936 5000
ThemeProvider mount 846 845 5000
ThemeProvider virtual-rerender 576 596 5000
ThemeProvider virtual-rerender-with-unmount 1297 1303 5000
Toggle mount 615 619 5000
buttonNative mount 187 192 5000

smhigley
smhigley reviewed Sep 23, 2024
View reviewed changes
Copy link
Contributor

@smhigley smhigley left a comment

Choose a reason for hiding this comment

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

The change looks great to me! I do like having that clone/width check in the example to point folks to, thanks for making it 😊

Left just some small/nitpicky comments, the substantive logic looks good 👍

packages/react/src/components/MessageBar/MessageBar.base.tsx Outdated Show resolved Hide resolved
packages/react-examples/src/react/MessageBar/MessageBar.Basic.Example.tsx Outdated Show resolved Hide resolved
packages/react/src/components/MessageBar/MessageBar.types.ts Outdated Show resolved Hide resolved
@emmayjiang emmayjiang enabled auto-merge (squash) September 30, 2024 22:36
@fabricteam
Copy link
Collaborator

🕵 fluentuiv8 No visual regressions between this PR and main

@emmayjiang emmayjiang merged commit ee47378 into microsoft:master Sep 30, 2024
17 of 19 checks passed
@emmayjiang emmayjiang deleted the v8-messageBar-example-fix branch September 30, 2024 22:54
mltejera pushed a commit to mltejera/office-ui-fabric-react that referenced this pull request Oct 3, 2024
@emmayjiang @smhigley @mltejera
fix (v8 MessageBar): Add showExpandButton prop to allow manual overri…
a4f6173 
…de to explicitly show the expand button (microsoft#32884)

Co-authored-by: Sarah Higley <smhigley@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@smhigley smhigley smhigley approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@emmayjiang @fabricteam @smhigley