Skip to content

Structure and slots for SearchBox, using Input as a slot#28090

Merged
smhigley merged 36 commits intomicrosoft:masterfrom
emmayjiang:react-search-create-SearchBox-slots
Jun 15, 2023
Merged

Structure and slots for SearchBox, using Input as a slot#28090
smhigley merged 36 commits intomicrosoft:masterfrom
emmayjiang:react-search-create-SearchBox-slots

Conversation

@emmayjiang
Copy link
Contributor

@emmayjiang emmayjiang commented May 31, 2023 •
edited
Loading

This PR begins laying out the slot structure and types for SearchBox.

image

As part of #26648

@fabricteam
Copy link
Collaborator

fabricteam commented May 31, 2023 •
edited
Loading

📊 Bundle size report

🤖 This report was generated against 02c7384de10ee35cc4db1a2132c32de59db58e1f

sopranopillow
sopranopillow reviewed May 31, 2023
View reviewed changes
@codesandbox-ci
Copy link

codesandbox-ci bot commented May 31, 2023 •
edited
Loading

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

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

@size-auditor
Copy link

size-auditor bot commented Jun 1, 2023 •
edited
Loading

Asset size changes

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

Baseline commit: 7516a6bde1bd7b8c957ca479ffcb0e737e9ca693 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 1, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-components)

Scenario Render type Master Ticks PR Ticks Iterations Status
InfoButton mount 14 11 5000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 576 578 5000
Button mount 291 291 5000
Field mount 1031 1037 5000
FluentProvider mount 638 630 5000
FluentProviderWithTheme mount 78 77 10
FluentProviderWithTheme virtual-rerender 68 67 10
FluentProviderWithTheme virtual-rerender-with-unmount 65 67 10
InfoButton mount 14 11 5000 Possible regression
MakeStyles mount 834 826 50000
Persona mount 1581 1561 5000
SpinButton mount 1265 1311 5000

@emmayjiang emmayjiang marked this pull request as ready for review June 1, 2023 13:57
@emmayjiang emmayjiang requested review from a team as code owners June 1, 2023 13:57
@fabricteam
Copy link
Collaborator

fabricteam commented Jun 1, 2023 •
edited
Loading

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
FlexMinimalPerf.default 166 145 1.14:1
PortalMinimalPerf.default 89 82 1.09:1
CarouselMinimalPerf.default 273 252 1.08:1
RosterPerf.default 1621 1498 1.08:1
TreeWith60ListItems.default 93 86 1.08:1
RefMinimalPerf.default 118 110 1.07:1
BoxMinimalPerf.default 200 189 1.06:1
AnimationMinimalPerf.default 311 297 1.05:1
ButtonMinimalPerf.default 91 87 1.05:1
ButtonSlotsPerf.default 329 312 1.05:1
ChatDuplicateMessagesPerf.default 156 149 1.05:1
FormMinimalPerf.default 232 221 1.05:1
InputMinimalPerf.default 548 522 1.05:1
LabelMinimalPerf.default 230 220 1.05:1
SkeletonMinimalPerf.default 208 198 1.05:1
GridMinimalPerf.default 199 192 1.04:1
LayoutMinimalPerf.default 207 199 1.04:1
MenuButtonMinimalPerf.default 966 931 1.04:1
ProviderMinimalPerf.default 210 201 1.04:1
SegmentMinimalPerf.default 204 197 1.04:1
ButtonOverridesMissPerf.default 665 645 1.03:1
TableMinimalPerf.default 247 240 1.03:1
TreeMinimalPerf.default 480 468 1.03:1
CheckboxMinimalPerf.default 1158 1134 1.02:1
DialogMinimalPerf.default 460 452 1.02:1
EmbedMinimalPerf.default 1905 1871 1.02:1
ImageMinimalPerf.default 230 225 1.02:1
ListCommonPerf.default 402 394 1.02:1
PopupMinimalPerf.default 355 348 1.02:1
ProviderMergeThemesPerf.default 667 654 1.02:1
TableManyItemsPerf.default 1152 1126 1.02:1
CardMinimalPerf.default 315 312 1.01:1
ChatWithPopoverPerf.default 197 195 1.01:1
DropdownManyItemsPerf.default 396 394 1.01:1
ItemLayoutMinimalPerf.default 711 706 1.01:1
ListMinimalPerf.default 313 310 1.01:1
IconMinimalPerf.default 392 389 1.01:1
AccordionMinimalPerf.default 83 83 1:1
DropdownMinimalPerf.default 1411 1415 1:1
MenuMinimalPerf.default 500 502 1:1
ReactionMinimalPerf.default 209 209 1:1
SliderMinimalPerf.default 753 751 1:1
StatusMinimalPerf.default 399 400 1:1
CustomToolbarPrototype.default 1484 1482 1:1
ToolbarMinimalPerf.default 529 530 1:1
VideoMinimalPerf.default 436 436 1:1
AvatarMinimalPerf.default 111 112 0.99:1
LoaderMinimalPerf.default 192 193 0.99:1
RadioGroupMinimalPerf.default 257 260 0.99:1
SplitButtonMinimalPerf.default 2267 2292 0.99:1
TooltipMinimalPerf.default 1309 1326 0.99:1
AttachmentSlotsPerf.default 644 657 0.98:1
DividerMinimalPerf.default 209 213 0.98:1
HeaderMinimalPerf.default 207 212 0.98:1
HeaderSlotsPerf.default 472 481 0.98:1
TextAreaMinimalPerf.default 295 300 0.98:1
ChatMinimalPerf.default 419 434 0.97:1
DatepickerMinimalPerf.default 3555 3657 0.97:1
AlertMinimalPerf.default 152 158 0.96:1
ListNestedPerf.default 328 341 0.96:1
ListWith60ListItems.default 366 380 0.96:1
AttachmentMinimalPerf.default 80 84 0.95:1
TextMinimalPerf.default 191 203 0.94:1

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 1, 2023 •
edited
Loading

🕵 fluentuiv8 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 1, 2023 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 613 607 5000
Breadcrumb mount 1677 1640 1000
Checkbox mount 1703 1684 5000
CheckboxBase mount 1453 1470 5000
ChoiceGroup mount 2908 2879 5000
ComboBox mount 665 644 1000
CommandBar mount 6271 6272 1000
ContextualMenu mount 14543 14303 1000
DefaultButton mount 732 739 5000
DetailsRow mount 2177 2155 5000
DetailsRowFast mount 2187 2142 5000
DetailsRowNoStyles mount 1983 2014 5000
Dialog mount 2587 2625 1000
DocumentCardTitle mount 227 226 1000
Dropdown mount 1979 1990 5000
FocusTrapZone mount 1131 1117 5000
FocusZone mount 1076 1051 5000
GroupedList mount 41199 41389 2
GroupedList virtual-rerender 19817 19658 2
GroupedList virtual-rerender-with-unmount 53743 53715 2
GroupedListV2 mount 231 230 2
GroupedListV2 virtual-rerender 209 211 2
GroupedListV2 virtual-rerender-with-unmount 221 235 2
IconButton mount 1072 1070 5000
Label mount 340 345 5000
Layer mount 2736 2711 5000
Link mount 392 397 5000
MenuButton mount 941 939 5000
MessageBar mount 21354 21313 5000
Nav mount 1974 1943 1000
OverflowSet mount 794 755 5000
Panel mount 1785 1798 1000
Persona mount 758 746 1000
Pivot mount 865 850 1000
PrimaryButton mount 850 864 5000
Rating mount 4582 4680 5000
SearchBox mount 914 894 5000
Shimmer mount 1916 1892 5000
Slider mount 1319 1287 5000
SpinButton mount 2838 2912 5000
Spinner mount 375 393 5000
SplitButton mount 1817 1806 5000
Stack mount 411 407 5000
StackWithIntrinsicChildren mount 871 858 5000
StackWithTextChildren mount 2679 2634 5000
SwatchColorPicker mount 6137 6025 5000
TagPicker mount 1432 1435 5000
Text mount 375 374 5000
TextField mount 921 974 5000
ThemeProvider mount 829 834 5000
ThemeProvider virtual-rerender 594 583 5000
ThemeProvider virtual-rerender-with-unmount 1290 1277 5000
Toggle mount 596 614 5000
buttonNative mount 189 189 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 1, 2023 •
edited
Loading

🕵 FluentUI-v0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jun 1, 2023 •
edited
Loading

🕵 fluentuiv9 No visual regressions between this PR and main

@emmayjiang emmayjiang marked this pull request as draft June 5, 2023 17:45
@emmayjiang emmayjiang changed the title SearchBox slot structure and types Structure and slots for SearchBox, without Input as a slot Jun 5, 2023
@emmayjiang emmayjiang changed the title Structure and slots for SearchBox, without Input as a slot Structure and slots for SearchBox, using Input as a slot Jun 5, 2023
@smhigley
Copy link
Contributor

smhigley commented Jun 15, 2023

/azp run

@azure-pipelines
Copy link

azure-pipelines bot commented Jun 15, 2023

Azure Pipelines successfully started running 4 pipeline(s).

@smhigley
Copy link
Contributor

smhigley commented Jun 15, 2023

/azp run Fluent UI React - PR and CI

@azure-pipelines
Copy link

azure-pipelines bot commented Jun 15, 2023

Azure Pipelines successfully started running 1 pipeline(s).

@smhigley
Copy link
Contributor

smhigley commented Jun 15, 2023

/azp run Fluent UI React - PR and CI

@azure-pipelines
Copy link

azure-pipelines bot commented Jun 15, 2023

Azure Pipelines successfully started running 1 pipeline(s).

@smhigley smhigley merged commit 89f6b7c into microsoft:master Jun 15, 2023
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Jun 20, 2023
@marcosmoura
Merge branch 'master' into feat/drawer-motion
9f3fc91 
* master: (32 commits)
  applying package updates
  feat(react-tags): add styles for size (microsoft#28229)
  docs(react-dialog): update DialogTriggerOutsideDialog to include focus behavior (microsoft#28176)
  bugfix: Ensures dialog actions stretches on breakpoints (microsoft#28258)
  applying package updates
  fix: TableHeaderCell should not render button when not sortable (microsoft#28097)
  fix(react-file-type-icons): Map mhtml extension to html icon (microsoft#28112)
  Fix overlapping axis labels on smaller viewports (microsoft#28239)
  useArrowNavigationGroup grid-linear axis (microsoft#28253)
  applying package updates
  fix: Alert example missing aria-label for icon (microsoft#28234)
  Overflow divider fix (microsoft#28011)
  feat(tools): implement `cypress-component-configuration` generator (microsoft#28115)
  chore: migrate to TS 4.7 (microsoft#28067)
  fix(scripts-tasks): make generate-api work in deterministic way (microsoft#28215)
  feat(react-tags): add overflow story (microsoft#28012)
  Structure and slots for SearchBox, using Input as a slot (microsoft#28090)
  feat(tokens): Add/update theme tokens (microsoft#27791)
  feat(react-tags): add a11y role and best practices guide (microsoft#28075)
  fix: Toast intent should always be present in the context (microsoft#28226)
  ...
@levithomason levithomason mentioned this pull request Jul 24, 2023
Closed
6 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sopranopillow sopranopillow sopranopillow left review comments

@spmonahan spmonahan spmonahan left review comments

@smhigley smhigley smhigley approved these changes

@tudorpopams tudorpopams tudorpopams approved these changes

Assignees

@micahgodbolt micahgodbolt

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

7 participants

@emmayjiang @fabricteam @smhigley @sopranopillow @spmonahan @tudorpopams @micahgodbolt