fix: Fix slot render functions by behowell · Pull Request #27561 · microsoft/fluentui

behowell · 2023-04-13T21:34:50Z

Previous Behavior

Slot render functions don't work. This was caused by the change to resolveShorthand in #27472. It now sets the render function on SLOT_RENDER_FUNCTION_SYMBOL instead of children. The existing getSlots function is unaware of SLOT_RENDER_FUNCTION_SYMBOL, and thus ignores the render function.

New Behavior

Make getSlots check for SLOT_RENDER_FUNCTION_SYMBOL and use that as the render function instead of children, if present.

Related Issue(s)

Fixes [Bug]: Slot render functions are broken #27559

Note: This PR is a quick fix and doesn't include tests. There should be tests written that would have caught this bug. I logged this to track adding tests:

chore: Add conformance tests for slot render functions #27566

codesandbox-ci · 2023-04-13T21:46:31Z

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 3894bc2:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration
fancy-resonance-eeh1q4	Issue #27559

size-auditor · 2023-04-13T21:47:10Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: d2f17a39e1ccd8b106a442a77a4a143432cb9d54 (build)

fabricteam · 2023-04-13T21:49:27Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-accordion` Accordion (including children components)	`88.959 kB` `26.571 kB`	`88.978 kB` `26.586 kB`	`19 B` `15 B`
`react-alert` Alert	`95.859 kB` `23.096 kB`	`95.877 kB` `23.104 kB`	`18 B` `8 B`
`react-avatar` Avatar	`59.524 kB` `15.558 kB`	`59.542 kB` `15.569 kB`	`18 B` `11 B`
`react-avatar` AvatarGroup	`18.137 kB` `6.67 kB`	`18.19 kB` `6.706 kB`	`53 B` `36 B`
`react-avatar` AvatarGroupItem	`75.785 kB` `20.059 kB`	`75.803 kB` `20.072 kB`	`18 B` `13 B`
`react-badge` Badge	`26.063 kB` `7.621 kB`	`26.075 kB` `7.629 kB`	`12 B` `8 B`
`react-badge` CounterBadge	`27.046 kB` `7.93 kB`	`27.058 kB` `7.938 kB`	`12 B` `8 B`
`react-badge` PresenceBadge	`34.535 kB` `8.716 kB`	`34.547 kB` `8.726 kB`	`12 B` `10 B`
`react-button` Button	`39.827 kB` `9.987 kB`	`39.845 kB` `10 kB`	`18 B` `13 B`
`react-button` CompoundButton	`46.999 kB` `11.456 kB`	`47.017 kB` `11.469 kB`	`18 B` `13 B`
`react-button` MenuButton	`44.514 kB` `11.332 kB`	`44.532 kB` `11.352 kB`	`18 B` `20 B`
`react-button` SplitButton	`53.009 kB` `12.898 kB`	`53.027 kB` `12.914 kB`	`18 B` `16 B`
`react-button` ToggleButton	`58.199 kB` `11.907 kB`	`58.217 kB` `11.922 kB`	`18 B` `15 B`
`react-card` Card - All	`83.566 kB` `23.927 kB`	`83.579 kB` `23.934 kB`	`13 B` `7 B`
`react-card` Card	`78.385 kB` `22.46 kB`	`78.398 kB` `22.468 kB`	`13 B` `8 B`
`react-card` CardFooter	`9.11 kB` `3.824 kB`	`9.122 kB` `3.832 kB`	`12 B` `8 B`
`react-card` CardHeader	`11.036 kB` `4.528 kB`	`11.048 kB` `4.537 kB`	`12 B` `9 B`
`react-card` CardPreview	`9.915 kB` `4.173 kB`	`9.927 kB` `4.18 kB`	`12 B` `7 B`
`react-checkbox` Checkbox	`37.097 kB` `11.277 kB`	`37.109 kB` `11.286 kB`	`12 B` `9 B`
`react-combobox` Combobox (including child components)	`89.865 kB` `28.545 kB`	`89.878 kB` `28.552 kB`	`13 B` `7 B`
`react-combobox` Dropdown (including child components)	`88.549 kB` `28.267 kB`	`88.562 kB` `28.275 kB`	`13 B` `8 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`68.075 kB` `18.416 kB`	`68.093 kB` `18.424 kB`	`18 B` `8 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`207.606 kB` `57.581 kB`	`207.629 kB` `57.6 kB`	`23 B` `19 B`
`react-components` react-components: FluentProvider & webLightTheme	`38.778 kB` `12.337 kB`	`38.833 kB` `12.37 kB`	`55 B` `33 B`
`react-datepicker-compat` DatePicker Compat	`251.351 kB` `67.358 kB`	`251.37 kB` `67.359 kB`	`19 B` `1 B`
`react-dialog` Dialog (including children components)	`93.319 kB` `27.389 kB`	`93.338 kB` `27.391 kB`	`19 B` `2 B`
`react-divider` Divider	`19.94 kB` `6.725 kB`	`19.958 kB` `6.736 kB`	`18 B` `11 B`
`react-field` Field	`21.571 kB` `7.437 kB`	`21.589 kB` `7.453 kB`	`18 B` `16 B`
`react-image` Image	`13.97 kB` `4.978 kB`	`14.023 kB` `5.008 kB`	`53 B` `30 B`
`react-infobutton` InfoButton	`130.671 kB` `39.464 kB`	`130.692 kB` `39.476 kB`	`21 B` `12 B`
`react-infobutton` InfoLabel	`133.97 kB` `40.505 kB`	`133.988 kB` `40.514 kB`	`18 B` `9 B`
`react-input` Input	`26.784 kB` `8.141 kB`	`26.796 kB` `8.148 kB`	`12 B` `7 B`
`react-label` Label	`12.645 kB` `4.609 kB`	`12.657 kB` `4.618 kB`	`12 B` `9 B`
`react-link` Link	`12.26 kB` `5.053 kB`	`12.313 kB` `5.081 kB`	`53 B` `28 B`
`react-menu` Menu (including children components)	`131.132 kB` `39.675 kB`	`131.151 kB` `39.687 kB`	`19 B` `12 B`
`react-menu` Menu (including selectable components)	`134.268 kB` `40.211 kB`	`134.287 kB` `40.226 kB`	`19 B` `15 B`
`react-persona` Persona	`66.55 kB` `17.502 kB`	`66.568 kB` `17.513 kB`	`18 B` `11 B`
`react-popover` Popover	`117.556 kB` `35.812 kB`	`117.611 kB` `35.839 kB`	`55 B` `27 B`
`react-progress` ProgressBar	`16.397 kB` `5.846 kB`	`16.409 kB` `5.855 kB`	`12 B` `9 B`
`react-provider` FluentProvider	`20.725 kB` `7.104 kB`	`20.78 kB` `7.135 kB`	`55 B` `31 B`
`react-radio` Radio	`29.903 kB` `9.108 kB`	`29.921 kB` `9.118 kB`	`18 B` `10 B`
`react-radio` RadioGroup	`13.897 kB` `5.128 kB`	`13.952 kB` `5.163 kB`	`55 B` `35 B`
`react-select` Select	`27.992 kB` `9.215 kB`	`28.004 kB` `9.223 kB`	`12 B` `8 B`
`react-slider` Slider	`36.922 kB` `11.506 kB`	`36.934 kB` `11.514 kB`	`12 B` `8 B`
`react-spinbutton` SpinButton	`36.693 kB` `10.784 kB`	`36.705 kB` `10.792 kB`	`12 B` `8 B`
`react-spinner` Spinner	`23.503 kB` `7.217 kB`	`23.515 kB` `7.226 kB`	`12 B` `9 B`
`react-switch` Switch	`32.515 kB` `9.726 kB`	`32.528 kB` `9.73 kB`	`13 B` `4 B`
`react-table` DataGrid	`150.938 kB` `41.062 kB`	`150.956 kB` `41.072 kB`	`18 B` `10 B`
`react-table` Table (Primitives only)	`47.196 kB` `12.732 kB`	`47.215 kB` `12.749 kB`	`19 B` `17 B`
`react-table` Table as DataGrid	`133.532 kB` `33.674 kB`	`133.551 kB` `33.685 kB`	`19 B` `11 B`
`react-table` Table (Selection only)	`81.366 kB` `19.658 kB`	`81.384 kB` `19.67 kB`	`18 B` `12 B`
`react-table` Table (Sort only)	`80.696 kB` `19.466 kB`	`80.714 kB` `19.479 kB`	`18 B` `13 B`
`react-text` Text - Default	`14.977 kB` `5.308 kB`	`15.03 kB` `5.339 kB`	`53 B` `31 B`
`react-text` Text - Wrappers	`15.531 kB` `5.215 kB`	`15.584 kB` `5.245 kB`	`53 B` `30 B`
`react-textarea` Textarea	`30.185 kB` `9.502 kB`	`30.203 kB` `9.519 kB`	`18 B` `17 B`
`react-tooltip` Tooltip	`49.465 kB` `16.844 kB`	`49.478 kB` `16.853 kB`	`13 B` `9 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`global-context` createContext	`533 B` `341 B`
`global-context` createContextSelector	`560 B` `352 B`
`react-overflow` hooks only	`11.214 kB` `4.271 kB`
`react-portal` Portal	`11.649 kB` `4.263 kB`
`react-portal-compat` PortalCompatProvider	`6.446 kB` `2.185 kB`
`react-positioning` usePositioning	`24.008 kB` `8.798 kB`
`react-utilities` SSRProvider	`180 B` `159 B`

_{🤖 This report was generated against d2f17a39e1ccd8b106a442a77a4a143432cb9d54}

fabricteam · 2023-04-13T21:50:05Z

Perf Analysis (`@fluentui/react-components`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	701	700	5000
Button	mount	394	414	5000
Field	mount	1237	1251	5000
FluentProvider	mount	775	764	5000
FluentProviderWithTheme	mount	103	110	10
FluentProviderWithTheme	virtual-rerender	90	100	10
FluentProviderWithTheme	virtual-rerender-with-unmount	96	97	10
InfoButton	mount	13	19	5000
MakeStyles	mount	1197	1183	50000
Persona	mount	1870	1894	5000
SpinButton	mount	1443	1491	5000

…lots/fix-render-function

fabricteam · 2023-04-13T22:01:23Z

🕵 fluentuiv9 No visual regressions between this PR and main

bsunderhus · 2023-04-14T10:57:31Z

Here's the follow up on test #27575

fix: Fix slot render functions

8a6da34

behowell self-assigned this Apr 13, 2023

github-actions Bot added this to the April Project Cycle Q2 2023 milestone Apr 13, 2023

behowell added the Fluent UI react-components (v9) label Apr 13, 2023

behowell added 2 commits April 13, 2023 14:56

Merge branch 'master' of https://github.com/microsoft/fluentui into s…

2800bb6

…lots/fix-render-function

Clean up

3894bc2

behowell marked this pull request as ready for review April 13, 2023 22:01

behowell requested a review from a team as a code owner April 13, 2023 22:01

khmakoto approved these changes Apr 13, 2023

View reviewed changes

bsunderhus approved these changes Apr 14, 2023

View reviewed changes

bsunderhus mentioned this pull request Apr 14, 2023

chore(react-utilities): add test to ensure slot render functions #27575

Merged

bsunderhus merged commit c156e76 into microsoft:master Apr 14, 2023

behowell deleted the slots/fix-render-function branch February 15, 2024 21:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: Fix slot render functions#27561

fix: Fix slot render functions#27561
bsunderhus merged 3 commits into
microsoft:masterfrom
behowell:slots/fix-render-function

behowell commented Apr 13, 2023 •

edited

Loading

Uh oh!

codesandbox-ci Bot commented Apr 13, 2023 •

edited

Loading

Uh oh!

size-auditor Bot commented Apr 13, 2023 •

edited

Loading

Uh oh!

fabricteam commented Apr 13, 2023 •

edited

Loading

Uh oh!

fabricteam commented Apr 13, 2023 •

edited

Loading

Uh oh!

fabricteam commented Apr 13, 2023 •

edited

Loading

Uh oh!

bsunderhus commented Apr 14, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

behowell commented Apr 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

codesandbox-ci Bot commented Apr 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

size-auditor Bot commented Apr 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Apr 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

fabricteam commented Apr 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react-components)

Uh oh!

fabricteam commented Apr 13, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv9 No visual regressions between this PR and main

Uh oh!

bsunderhus commented Apr 14, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

behowell commented Apr 13, 2023 •

edited

Loading

codesandbox-ci Bot commented Apr 13, 2023 •

edited

Loading

size-auditor Bot commented Apr 13, 2023 •

edited

Loading

fabricteam commented Apr 13, 2023 •

edited

Loading

fabricteam commented Apr 13, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react-components`)

fabricteam commented Apr 13, 2023 •

edited

Loading