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

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

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

wants to merge 10 commits into from
+62 −18

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.675 kB
57.075 kB		 190.701 kB
57.09 kB		 26 B
15 B
react
Fluent UI React (entire library)		 1.014 MB
281.935 kB		 1.014 MB
281.948 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.185 kB
60.419 kB
react
Button		 195.64 kB
56.642 kB
react
ButtonGrid		 180.571 kB
54.626 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.077 kB
72.336 kB
react
CommandBar		 203.226 kB
60.147 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.492 kB
63.169 kB
react
Divider		 19.591 kB
6.841 kB
react
DocumentCard		 217.178 kB
64.45 kB
react
DragDrop		 8.343 kB
2.724 kB
react
DraggableZone		 34.305 kB
11.509 kB
react
Dropdown		 234.124 kB
68.674 kB
react
ExtendedPicker		 96.795 kB
27.893 kB
react
Fabric		 41.732 kB
14.349 kB
react
Facepile		 210.78 kB
63.193 kB
react
FloatingPicker		 242.221 kB
69.023 kB
react
FocusTrapZone		 17.03 kB
5.924 kB
react
FocusZone		 55.053 kB
17.47 kB
react
Grid		 180.571 kB
54.626 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.175 kB
56.524 kB
react
OverflowSet		 33.376 kB
11.317 kB
react
Overlay		 40.889 kB
14.084 kB
react
Panel		 201.233 kB
60.035 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.244 kB
82.438 kB
react
Pivot		 189.068 kB
57.252 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.95 kB
56.685 kB
react
SelectableOption		 724 B
413 B
react
SelectedItemsList		 232.732 kB
67.931 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.651 kB
57.78 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.896 kB
58.128 kB
react
TeachingBubble		 205.952 kB
61.057 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.859 kB
70.092 kB
react
Toggle		 46.21 kB
15.966 kB
react
Tooltip		 87.324 kB
28.217 kB
react
Utilities		 82.675 kB
25.119 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 c414d2cf5e4004490e02df876f71514b3f854270

@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 634 614 5000
Breadcrumb mount 1712 1688 1000
Checkbox mount 1709 1743 5000
CheckboxBase mount 1475 1504 5000
ChoiceGroup mount 2969 2957 5000
ComboBox mount 684 694 1000
CommandBar mount 6661 6714 1000
ContextualMenu mount 13878 14707 1000
DefaultButton mount 812 793 5000
DetailsRow mount 2205 2247 5000
DetailsRowFast mount 2224 2213 5000
DetailsRowNoStyles mount 2044 2039 5000
Dialog mount 2854 2748 1000
DocumentCardTitle mount 220 232 1000
Dropdown mount 2012 2019 5000
FocusTrapZone mount 1155 1166 5000
FocusZone mount 1071 1083 5000
GroupedList mount 43241 43479 2
GroupedList virtual-rerender 20522 20710 2
GroupedList virtual-rerender-with-unmount 52640 52694 2
GroupedListV2 mount 234 239 2
GroupedListV2 virtual-rerender 213 221 2
GroupedListV2 virtual-rerender-with-unmount 247 237 2
IconButton mount 1149 1163 5000
Label mount 348 347 5000
Layer mount 2773 2725 5000
Link mount 405 393 5000
MenuButton mount 967 1002 5000
MessageBar mount 21491 21579 5000
Nav mount 2061 2060 1000
OverflowSet mount 842 790 5000
Panel mount 1887 1843 1000
Persona mount 724 762 1000
Pivot mount 931 903 1000
PrimaryButton mount 919 937 5000
Rating mount 4622 4638 5000
SearchBox mount 923 926 5000
Shimmer mount 1860 1948 5000
Slider mount 1346 1313 5000
SpinButton mount 2982 2986 5000
Spinner mount 401 411 5000
SplitButton mount 1848 1873 5000
Stack mount 429 417 5000
StackWithIntrinsicChildren mount 876 866 5000
StackWithTextChildren mount 2784 2736 5000
SwatchColorPicker mount 6409 6318 5000
TagPicker mount 1488 1444 5000
Text mount 390 390 5000
TextField mount 942 923 5000
ThemeProvider mount 862 841 5000
ThemeProvider virtual-rerender 590 584 5000
ThemeProvider virtual-rerender-with-unmount 1301 1310 5000
Toggle mount 604 605 5000
buttonNative mount 195 191 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
);
}

window.onresize = onResize;
Copy link
Contributor

Choose a reason for hiding this comment

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

two small tweaks to how the resize handler is added to window:

  • this should probably be in a useEffect with a cleanup that removes it
  • instead of the global window, you should be able to get it more safely from useWindow from @fluentui/react-window-provider

packages/react/src/components/MessageBar/MessageBar.types.ts Outdated Show resolved Hide resolved
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@smhigley smhigley smhigley left review comments

@fabricteam fabricteam fabricteam left review comments

At least 1 approving review is required to merge this pull request.

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