fix(Popover): opacity transition was not happening

[robertpenner]

This affects all components that use createSlideStyles (e.g. via Popover or MenuPopover):
AvatarGroup, InfoLabel, Popover, TeachingPopover, Menu, MenuButton, SplitButton, Breadcrumb, and various charts.

Current Behavior

There is no fade during the slide of a Popover. (public Storybook)

Popover.fade.isn.t.happening.-.2024-11-26.mp4

New Behavior

The popover transition has a fade-in while sliding. (PR Storybook)

Popover.fade.fixed.-.2024-11-26.mp4

Related Issue(s)

• Fixes #33420

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	220.849 kB 63.98 kB	221.431 kB 64.063 kB	582 B 83 B
react-components react-components: entire library	1.163 MB 291.391 kB	1.163 MB 291.493 kB	582 B 102 B
react-menu Menu (including children components)	152.683 kB 46.128 kB	152.974 kB 46.179 kB	291 B 51 B
react-menu Menu (including selectable components)	155.364 kB 46.61 kB	155.655 kB 46.661 kB	291 B 51 B
react-popover Popover	128.926 kB 40.326 kB	129.217 kB 40.377 kB	291 B 51 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react-avatar Avatar	49.303 kB 15.815 kB
react-avatar AvatarGroup	20.106 kB 7.968 kB
react-avatar AvatarGroupItem	63.447 kB 20.034 kB
react-breadcrumb @fluentui/react-breadcrumb - package	114.291 kB 31.695 kB
react-checkbox Checkbox	35.118 kB 12.077 kB
react-combobox Combobox (including child components)	104.401 kB 34.205 kB
react-combobox Dropdown (including child components)	105.025 kB 34.13 kB
react-components react-components: Button, FluentProvider & webLightTheme	69.21 kB 20.174 kB
react-components react-components: FluentProvider & webLightTheme	44.447 kB 14.59 kB
react-datepicker-compat DatePicker Compat	224.187 kB 63.434 kB
react-dialog Dialog (including children components)	100.276 kB 30.064 kB
react-field Field	23.399 kB 8.898 kB
react-input Input	28.014 kB 9.444 kB
react-list-preview List	89.164 kB 26.599 kB
react-list-preview ListItem	112.731 kB 33.432 kB
react-overflow hooks only	12.808 kB 4.819 kB
react-persona Persona	56.194 kB 17.695 kB
react-portal-compat PortalCompatProvider	8.39 kB 2.64 kB
react-positioning usePositioning	27.079 kB 9.71 kB
react-progress ProgressBar	17.084 kB 6.891 kB
react-radio Radio	32.672 kB 10.343 kB
react-radio RadioGroup	15.762 kB 6.423 kB
react-select Select	27.732 kB 10.124 kB
react-slider Slider	37.52 kB 12.621 kB
react-spinbutton SpinButton	34.839 kB 11.63 kB
react-swatch-picker @fluentui/react-swatch-picker - package	105.086 kB 30.516 kB
react-switch Switch	35.319 kB 11.314 kB
react-table DataGrid	161.034 kB 45.71 kB
react-table Table (Primitives only)	42.666 kB 13.854 kB
react-table Table as DataGrid	131.869 kB 36.57 kB
react-table Table (Selection only)	70.536 kB 19.999 kB
react-table Table (Sort only)	69.179 kB 19.61 kB
react-tag-picker @fluentui/react-tag-picker - package	184.105 kB 55.426 kB
react-tags InteractionTag	15.199 kB 6.157 kB
react-tags Tag	29.072 kB 9.55 kB
react-tags TagGroup	82.719 kB 24.524 kB
react-teaching-popover TeachingPopover	90.633 kB 27.604 kB
react-textarea Textarea	26.572 kB 9.755 kB
react-timepicker-compat TimePicker	107.39 kB 35.763 kB
react-tooltip Tooltip	56.074 kB 19.675 kB
react-tree FlatTree	145.321 kB 41.739 kB
react-tree PersonaFlatTree	146.007 kB 41.852 kB
react-tree PersonaTree	142.24 kB 40.67 kB
react-tree Tree	141.552 kB 40.568 kB

_{🤖 This report was generated against cad13936cd49ba0b34b50bc2f58395605c4e8da4}

[github-actions]

Pull request demo site: URL

[layershifter]

Great find, but let's improve the fix 👍

[robertpenner]

/azp run CI / main (pull_request)

[azure-pipelines]

No pipelines are associated with this pull request.