Skip to content

Conversation

marcosmoura
Copy link
Contributor

Previous Behavior

DrawerBody was not accounting for content change to calculate the scroll state, that is responsible to define the separator.

New Behavior

DrawerBody now has a ResizeObserver to detect when the content changes, at least for when the height changes.

Related Issue(s)

@marcosmoura marcosmoura requested a review from a team as a code owner September 19, 2025 13:04
@marcosmoura marcosmoura changed the title fix: update drawer scroll state when content change fix(react-drawer): update drawer scroll state when content change Sep 19, 2025
@marcosmoura marcosmoura changed the title fix(react-drawer): update drawer scroll state when content change fix(react-drawer): update drawer scroll state when content changes Sep 19, 2025
@marcosmoura marcosmoura self-assigned this Sep 19, 2025
@marcosmoura marcosmoura added the Component: Drawer The Fluent v9 Drawer component label Sep 19, 2025
Copy link

github-actions bot commented Sep 19, 2025

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-components
react-components: entire library
1.277 MB
321.006 kB
1.278 MB
321.081 kB
179 B
75 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
510 B
328 B
global-context
createContextSelector
537 B
339 B
keyboard-key
keyboard-key package
3.746 kB
1.928 kB
keyboard-keys
Multiple keyCodes
50 B
70 B
keyboard-keys
Multiple keys
87 B
94 B
keyboard-keys
Single key
44 B
64 B
keyboard-keys
Single keyCode
39 B
59 B
priority-overflow
createOverflowManager
4.519 kB
1.881 kB
react
ActivityItem
71.196 kB
23.345 kB
react
Announced
38.466 kB
13.274 kB
react
Autofill
15.42 kB
4.766 kB
react
Breadcrumb
200.704 kB
59.591 kB
react
Button
194.253 kB
55.877 kB
react
ButtonGrid
179.141 kB
53.883 kB
react
Calendar
121.126 kB
36.822 kB
react
Callout
84.233 kB
27.586 kB
react
Check
53.182 kB
17.832 kB
react
Checkbox
59.948 kB
19.872 kB
react
ChoiceGroup
65.458 kB
21.462 kB
react
ChoiceGroupOption
58.745 kB
19.351 kB
react
Coachmark
92.652 kB
29.303 kB
react
Color
7.789 kB
3.127 kB
react
ColorPicker
134.856 kB
42.108 kB
react
ComboBox
250.586 kB
71.503 kB
react
CommandBar
201.76 kB
59.381 kB
react
ContextualMenu
154.128 kB
47.559 kB
react
DatePicker
183.167 kB
55.875 kB
react
DateTimeUtilities
5.244 kB
1.849 kB
react
DetailsList
229.894 kB
65.799 kB
react
Dialog
210.059 kB
62.349 kB
react
Divider
19.582 kB
6.838 kB
react
DocumentCard
215.742 kB
63.648 kB
react
DragDrop
8.343 kB
2.724 kB
react
DraggableZone
34.28 kB
11.488 kB
react
Dropdown
233.05 kB
67.954 kB
react
ExtendedPicker
96.823 kB
27.866 kB
react
Fabric
41.722 kB
14.34 kB
react
Facepile
209.276 kB
62.369 kB
react
FloatingPicker
240.764 kB
68.214 kB
react
FocusTrapZone
16.978 kB
5.889 kB
react
FocusZone
55.1 kB
17.451 kB
react
Grid
179.141 kB
53.883 kB
react
GroupedList
135.012 kB
40.664 kB
react
GroupedListV2
122.629 kB
37.753 kB
react
HoverCard
96.718 kB
30.685 kB
react
Icon
51.863 kB
17.261 kB
react
Icons
66.339 kB
24.385 kB
react
Image
46.877 kB
15.692 kB
react
Keytip
81.241 kB
26.671 kB
react
KeytipData
14.032 kB
4.582 kB
react
KeytipLayer
103.029 kB
31.896 kB
react
Keytips
105.801 kB
32.898 kB
react
Label
38.318 kB
13.239 kB
react
Layer
48.077 kB
16.346 kB
react
Link
39.659 kB
13.651 kB
react
List
39.346 kB
12.454 kB
react
MarqueeSelection
74.484 kB
22.396 kB
react
MessageBar
189.287 kB
56.32 kB
react
Modal
93.678 kB
30.217 kB
react
Nav
186.724 kB
55.713 kB
react
OverflowSet
33.336 kB
11.279 kB
react
Overlay
40.879 kB
14.075 kB
react
Panel
200.226 kB
59.327 kB
react
Persona
114.513 kB
36.43 kB
react
PersonaCoin
114.513 kB
36.43 kB
react
PersonaPresence
58.052 kB
19.371 kB
react
Pickers
297.809 kB
82.985 kB
react
Pivot
187.621 kB
56.485 kB
react
Popup
12.294 kB
4.195 kB
react
Positioning
22.764 kB
7.683 kB
react
PositioningContainer
73.415 kB
23.685 kB
react
ProgressIndicator
39.471 kB
13.526 kB
react
Rating
82.056 kB
26.086 kB
react
Fluent UI React (entire library)
1.019 MB
283.153 kB
react
ResizeGroup
13.338 kB
4.377 kB
react
ResponsiveMode
8.13 kB
2.966 kB
react
ScrollablePane
55.535 kB
17.715 kB
react
SearchBox
187.523 kB
55.912 kB
react
SelectableOption
724 B
413 B
react
SelectedItemsList
231.249 kB
67.169 kB
react
Selection
42.418 kB
12.26 kB
react
Separator
35.359 kB
12.13 kB
react
Shimmer
49.237 kB
16.255 kB
react
ShimmeredDetailsList
240.675 kB
68.541 kB
react
Slider
57.615 kB
19.194 kB
react
SpinButton
191.196 kB
56.998 kB
react
Spinner
41.753 kB
14.466 kB
react
Stack
42.03 kB
14.386 kB
react
Sticky
32.577 kB
10.488 kB
react
Styling
46.033 kB
15.135 kB
react
SwatchColorPicker
189.536 kB
57.41 kB
react
TeachingBubble
204.538 kB
60.3 kB
react
Text
36.886 kB
12.806 kB
react
TextField
80.768 kB
25.3 kB
react
Theme
43.486 kB
14.168 kB
react
ThemeGenerator
12.384 kB
4.116 kB
react
TimePicker
240.414 kB
69.299 kB
react
Toggle
46.189 kB
15.954 kB
react
Tooltip
87.013 kB
28.144 kB
react
Utilities
82.932 kB
25.149 kB
react
Viewport
23.872 kB
7.642 kB
react
WeeklyDayPicker
101.318 kB
31.639 kB
react
WindowProvider
1.059 kB
541 B
react-accordion
Accordion (including children components)
108.537 kB
33.183 kB
react-aria
ARIA - Default
237 B
181 B
react-avatar
Avatar
48.518 kB
15.508 kB
react-avatar
AvatarGroup
19.235 kB
7.617 kB
react-avatar
AvatarGroupItem
62.662 kB
19.727 kB
react-badge
Badge
25.089 kB
8.256 kB
react-badge
CounterBadge
25.869 kB
8.53 kB
react-badge
PresenceBadge
24.929 kB
9.147 kB
react-breadcrumb
@fluentui/react-breadcrumb - package
114.22 kB
31.522 kB
react-button
Button
36.705 kB
10.508 kB
react-button
CompoundButton
43.117 kB
11.812 kB
react-button
MenuButton
41.6 kB
11.902 kB
react-button
SplitButton
49.667 kB
13.477 kB
react-button
ToggleButton
52.636 kB
12.285 kB
react-calendar-compat
Calendar Compat
149.796 kB
39.951 kB
react-card
Card - All
106.044 kB
29.799 kB
react-card
Card
98.69 kB
27.924 kB
react-card
CardFooter
13.662 kB
5.517 kB
react-card
CardHeader
16.195 kB
6.38 kB
react-card
CardPreview
13.729 kB
5.645 kB
react-charts
AreaChart
384.803 kB
117.317 kB
react-charts
DeclarativeChart
681.289 kB
195.605 kB
react-charts
DonutChart
296.931 kB
88.744 kB
react-charts
FunnelChart
288.17 kB
85.701 kB
react-charts
GanttChart
368.041 kB
110.814 kB
react-charts
GaugeChart
311.221 kB
92.228 kB
react-charts
GroupedVerticalBarChart
371.572 kB
111.942 kB
react-charts
HeatMapChart
370.069 kB
112.439 kB
react-charts
HorizontalBarChart
295.674 kB
86.998 kB
react-charts
HorizontalBarChartWithAxis
63 B
83 B
react-charts
Legends
235.208 kB
69.59 kB
react-charts
LineChart
394.308 kB
118.854 kB
react-charts
SankeyChart
198.878 kB
61.101 kB
react-charts
ScatterChart
375.828 kB
113.387 kB
react-charts
Sparkline
91.123 kB
28.692 kB
react-charts
VerticalBarChart
410.642 kB
118.919 kB
react-charts
VerticalStackedBarChart
382.456 kB
114.785 kB
react-checkbox
Checkbox
34.335 kB
11.786 kB
react-color-picker
ColorArea
49.32 kB
17.32 kB
react-color-picker
ColorPicker
17.95 kB
7.143 kB
react-color-picker
ColorSlider
41.493 kB
15.375 kB
react-combobox
Combobox (including child components)
106.952 kB
34.798 kB
react-combobox
Dropdown (including child components)
107.582 kB
34.719 kB
react-components
react-components: Button, FluentProvider & webLightTheme
68.796 kB
19.903 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
236.943 kB
68.636 kB
react-components
react-components: FluentProvider & webLightTheme
43.63 kB
14.257 kB
react-datepicker-compat
DatePicker Compat
226.669 kB
64.105 kB
react-dialog
Dialog (including children components)
103.578 kB
30.891 kB
react-divider
Divider
20.626 kB
7.654 kB
react-field
Field
22.657 kB
8.602 kB
react-image
Image
14.473 kB
5.919 kB
react-input
Input
27.148 kB
9.108 kB
react-jsx-runtime
Classic Pragma
1.101 kB
550 B
react-jsx-runtime
JSX Dev Runtime
2.8 kB
1.251 kB
react-jsx-runtime
JSX Runtime
3.422 kB
1.493 kB
react-label
Label
13.799 kB
5.644 kB
react-link
Link
16.746 kB
6.785 kB
react-list
List
88.922 kB
26.387 kB
react-list
ListItem
112.381 kB
33.224 kB
react-menu
Menu (including children components)
165.367 kB
50.066 kB
react-menu
Menu (including selectable components)
168.349 kB
50.667 kB
react-message-bar
MessageBar (all components)
24.12 kB
8.966 kB
react-motion
@fluentui/react-motion - createMotionComponent()
4.109 kB
1.806 kB
react-motion
@fluentui/react-motion - createPresenceComponent()
5.771 kB
2.396 kB
react-motion
@fluentui/react-motion - PresenceGroup
1.727 kB
823 B
react-overflow
hooks only
12.931 kB
4.85 kB
react-persona
Persona
55.409 kB
17.389 kB
react-popover
Popover
132.3 kB
41.178 kB
react-portal
Portal
15.411 kB
5.385 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-positioning
usePositioning
28.865 kB
10.146 kB
react-positioning
useSafeZoneArea
12.29 kB
4.967 kB
react-progress
ProgressBar
16.593 kB
6.613 kB
react-provider
FluentProvider
23.806 kB
8.557 kB
react-radio
Radio
31.8 kB
10.006 kB
react-radio
RadioGroup
14.889 kB
6.09 kB
react-select
Select
26.95 kB
9.833 kB
react-slider
Slider
37.211 kB
12.461 kB
react-spinbutton
SpinButton
34.431 kB
11.449 kB
react-spinner
Spinner
24.396 kB
8.201 kB
react-swatch-picker
@fluentui/react-swatch-picker - package
106.047 kB
30.539 kB
react-switch
Switch
34.51 kB
11.014 kB
react-table
DataGrid
161.122 kB
45.55 kB
react-table
Table (Primitives only)
41.94 kB
13.559 kB
react-table
Table as DataGrid
131.446 kB
36.336 kB
react-table
Table (Selection only)
69.808 kB
19.693 kB
react-table
Table (Sort only)
68.451 kB
19.308 kB
react-tag-picker
@fluentui/react-tag-picker - package
188.33 kB
56.457 kB
react-tags
InteractionTag
14.561 kB
5.865 kB
react-tags
Tag
30.379 kB
9.779 kB
react-tags
TagGroup
83.125 kB
24.561 kB
react-teaching-popover
TeachingPopover
102.777 kB
30.738 kB
react-text
Text - Default
16.19 kB
6.366 kB
react-text
Text - Wrappers
19.35 kB
6.695 kB
react-textarea
Textarea
25.53 kB
9.361 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
36.081 kB
7.658 kB
react-theme
Teams: Light theme
20.025 kB
5.723 kB
react-timepicker-compat
TimePicker
109.935 kB
36.335 kB
react-toast
Toast (including Toaster)
103.665 kB
31.028 kB
react-tooltip
Tooltip
57.922 kB
20.084 kB
react-tree
FlatTree
149.326 kB
42.711 kB
react-tree
PersonaFlatTree
150.082 kB
42.837 kB
react-tree
PersonaTree
146.34 kB
41.686 kB
react-tree
Tree
145.588 kB
41.562 kB
react-utilities
SSRProvider
180 B
160 B
🤖 This report was generated against cf210d73c3618ad3b07666bfdb40f353c26cbea7

Copy link

Pull request demo site: URL

@marcosmoura marcosmoura requested a review from a team as a code owner September 19, 2025 15:31
@@ -1 +1,3 @@
/** Jest test setup file. */
const ResizeObserver = require('resize-observer-polyfill');
Copy link
Contributor Author

Choose a reason for hiding this comment

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

First time we use ResizeObserver for our components, so we need to mock it for the test env since Jest doesn't support ResizeObserver

Copy link
Contributor

Choose a reason for hiding this comment

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

Could you please make sure that it's get picked up by react-integration-tester (rit)?

"@fluentui/scripts-api-extractor": "*",
"@fluentui/scripts-cypress": "*"
"@fluentui/scripts-cypress": "*",
"resize-observer-polyfill": "1.5.1"
Copy link
Contributor

Choose a reason for hiding this comment

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

following the monorepo single version policy, so we should probably add this to the root package.json as well, correct @Hotell?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Drawer The Fluent v9 Drawer component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Drawer scrollState does not update when DrawerBody content changes size
2 participants