Skip to content

Combobox: child trigger/listbox pattern#22797

Closed
smhigley wants to merge 2 commits intomicrosoft:masterfrom
smhigley:combobox-child-trigger
Closed

Combobox: child trigger/listbox pattern#22797
smhigley wants to merge 2 commits intomicrosoft:masterfrom
smhigley:combobox-child-trigger

Conversation

@smhigley
Copy link
Copy Markdown
Contributor

@smhigley smhigley commented May 3, 2022 •
edited
Loading

Draft! One of two options, together with #22906

Important note: this PR is for discussion only. If we go this route, I'll break up the changes into multiple smaller PRs for detailed review.

This shows a variation of Combobox that is authored with children rather than slots for the trigger and listbox. Editable vs. non-editable comboboxes are done by swapping out the child trigger:

<Combobox {...props} value='Ferret'>
     <ComboButton appearance="outline" placeholder="Select an animal" />
     <Listbox>
       {options.map(option => (
         <Option key={option} disabled={option === 'Ferret'}>
           {option}
         </Option>
       ))}
     </Listbox>
</Combobox>

vs.

<Combobox {...props} value='Ferret'>
     <ComboboxInput appearance="outline" placeholder="Select an animal" />
     <Listbox>
       {options.map(option => (
         <Option key={option} disabled={option === 'Ferret'}>
           {option}
         </Option>
       ))}
     </Listbox>
</Combobox>

There are some known type failures in ComboboxInput that will be ironed out if this option is chosen.

The alternative (from before this PR) would be to author editable vs. non-editable like this:

<Combobox {...props} appearance="outline" value='Ferret'>
     {options.map(option => (
         <Option key={option} disabled={option === 'Ferret'}>
           {option}
         </Option>
       ))}
</Combobox>

vs.

<Dropdown {...props} appearance="outline" value='Ferret'>
     {options.map(option => (
         <Option key={option} disabled={option === 'Ferret'}>
           {option}
         </Option>
       ))}
</Dropdown>

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci bot commented May 3, 2022

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 fe0fb3d:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented May 3, 2022

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-accordion
Accordion (including children components)		 73.754 kB
22.494 kB
react-badge
Badge		 20.965 kB
6.605 kB
react-badge
CounterBadge		 21.918 kB
6.919 kB
react-badge
PresenceBadge		 22.005 kB
6.582 kB
react-divider
Divider		 15.455 kB
5.57 kB
react-switch
Switch		 24.401 kB
8.024 kB
react-textarea
Textarea		 20.672 kB
7.07 kB
🤖 This report was generated against 773b889cd09d46934feeabdbbc389c678b80f7a0

@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented May 3, 2022

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1157 1150 5000
Button mount 664 675 5000
FluentProvider mount 2289 2304 5000
FluentProviderWithTheme mount 365 372 10
FluentProviderWithTheme virtual-rerender 303 296 10
FluentProviderWithTheme virtual-rerender-with-unmount 376 397 10
MakeStyles mount 1912 1915 50000

@size-auditor
Copy link
Copy Markdown

size-auditor bot commented May 3, 2022

Asset size changes

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

Baseline commit: 2c0aaae6044f1c0a938704c13749e76b638e2072 (build)

@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented May 3, 2022

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ChatWithPopoverPerf.default 465 393 1.18:1
AvatarMinimalPerf.default 215 187 1.15:1
BoxMinimalPerf.default 385 342 1.13:1
TreeWith60ListItems.default 195 179 1.09:1
HeaderSlotsPerf.default 831 767 1.08:1
CustomToolbarPrototype.default 2996 2772 1.08:1
GridMinimalPerf.default 368 343 1.07:1
ProviderMergeThemesPerf.default 1276 1187 1.07:1
ProviderMinimalPerf.default 416 389 1.07:1
RadioGroupMinimalPerf.default 505 475 1.06:1
SkeletonMinimalPerf.default 370 349 1.06:1
DropdownMinimalPerf.default 3242 3079 1.05:1
ListCommonPerf.default 717 682 1.05:1
ListNestedPerf.default 631 601 1.05:1
ReactionMinimalPerf.default 399 380 1.05:1
ChatMinimalPerf.default 855 822 1.04:1
DialogMinimalPerf.default 817 787 1.04:1
InputMinimalPerf.default 1374 1317 1.04:1
TableMinimalPerf.default 430 414 1.04:1
AttachmentMinimalPerf.default 161 157 1.03:1
ButtonSlotsPerf.default 601 586 1.03:1
CheckboxMinimalPerf.default 2864 2785 1.03:1
PopupMinimalPerf.default 665 644 1.03:1
VideoMinimalPerf.default 717 699 1.03:1
DatepickerMinimalPerf.default 6221 6107 1.02:1
MenuButtonMinimalPerf.default 1909 1866 1.02:1
RefMinimalPerf.default 224 220 1.02:1
StatusMinimalPerf.default 752 738 1.02:1
TableManyItemsPerf.default 2183 2150 1.02:1
ToolbarMinimalPerf.default 1063 1047 1.02:1
AnimationMinimalPerf.default 565 558 1.01:1
ImageMinimalPerf.default 422 416 1.01:1
ItemLayoutMinimalPerf.default 1268 1252 1.01:1
ListMinimalPerf.default 563 555 1.01:1
MenuMinimalPerf.default 950 939 1.01:1
RosterPerf.default 1252 1241 1.01:1
IconMinimalPerf.default 682 677 1.01:1
ButtonOverridesMissPerf.default 1621 1624 1:1
ListWith60ListItems.default 718 721 1:1
SplitButtonMinimalPerf.default 4776 4792 1:1
TooltipMinimalPerf.default 1172 1171 1:1
TreeMinimalPerf.default 865 861 1:1
AttachmentSlotsPerf.default 1139 1147 0.99:1
CarouselMinimalPerf.default 503 507 0.99:1
LabelMinimalPerf.default 432 438 0.99:1
LoaderMinimalPerf.default 733 737 0.99:1
PortalMinimalPerf.default 169 170 0.99:1
SliderMinimalPerf.default 1778 1794 0.99:1
FormMinimalPerf.default 449 458 0.98:1
ChatDuplicateMessagesPerf.default 304 315 0.97:1
DividerMinimalPerf.default 395 409 0.97:1
SegmentMinimalPerf.default 369 382 0.97:1
TextMinimalPerf.default 356 368 0.97:1
AlertMinimalPerf.default 294 305 0.96:1
EmbedMinimalPerf.default 4306 4468 0.96:1
DropdownManyItemsPerf.default 739 774 0.95:1
HeaderMinimalPerf.default 369 387 0.95:1
AccordionMinimalPerf.default 153 163 0.94:1
CardMinimalPerf.default 597 632 0.94:1
LayoutMinimalPerf.default 367 396 0.93:1
FlexMinimalPerf.default 296 324 0.91:1
TextAreaMinimalPerf.default 526 579 0.91:1
ButtonMinimalPerf.default 163 186 0.88:1

@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented May 3, 2022

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 740 696 5000
Breadcrumb mount 2103 2382 1000
Checkbox mount 1304 1283 5000
CheckboxBase mount 1076 1102 5000
ChoiceGroup mount 3993 3849 5000
ComboBox mount 844 756 1000
CommandBar mount 8969 9086 1000
ContextualMenu mount 10135 9970 1000
DefaultButton mount 980 970 5000
DetailsRow mount 3338 3341 5000
DetailsRowFast mount 3308 3281 5000
DetailsRowNoStyles mount 3013 3111 5000
Dialog mount 1929 2001 1000
DocumentCardTitle mount 149 156 1000
Dropdown mount 2830 2846 5000
FocusTrapZone mount 1461 1545 5000
FocusZone mount 1576 1590 5000
IconButton mount 1484 1503 5000
Label mount 304 293 5000
Layer mount 2546 2561 5000
Link mount 346 370 5000
MenuButton mount 1246 1268 5000
MessageBar mount 1879 1847 5000
Nav mount 2714 2884 1000
OverflowSet mount 956 973 5000
Panel mount 1766 1837 1000
Persona mount 894 860 1000
Pivot mount 1248 1241 1000
PrimaryButton mount 1119 1090 5000
Rating mount 6616 6351 5000
SearchBox mount 1044 2980 5000
Shimmer mount 2123 2111 5000
Slider mount 1655 1635 5000
SpinButton mount 4300 4245 5000
Spinner mount 388 379 5000
SplitButton mount 2649 2679 5000
Stack mount 446 444 5000
StackWithIntrinsicChildren mount 1973 1892 5000
StackWithTextChildren mount 4413 4477 5000
SwatchColorPicker mount 10225 10082 5000
TagPicker mount 2336 2419 5000
TeachingBubble mount 85629 87178 5000
Text mount 371 362 5000
TextField mount 1234 1217 5000
ThemeProvider mount 1032 984 5000
ThemeProvider virtual-rerender 564 542 5000
ThemeProvider virtual-rerender-with-unmount 1602 1557 5000
Toggle mount 683 666 5000
buttonNative mount 99 101 5000

@smhigley smhigley assigned smhigley and unassigned GeoffCoxMSFT May 3, 2022
@TristanWatanabe TristanWatanabe mentioned this pull request May 4, 2022
Merged
This was referenced May 9, 2022
Closed
Closed
@smhigley
Copy link
Copy Markdown
Contributor Author

smhigley commented Jun 6, 2022

Closing, since we decided to go with a modified slot pattern.

@smhigley smhigley closed this Jun 6, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@smhigley smhigley

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@smhigley @fabricteam @GeoffCoxMSFT