microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
17.75k stars 2.65k forks source link

feat: Add `caseSensitive` prop to `ComboBox` #31247

Closed khmakoto closed 2 weeks ago

khmakoto commented 2 weeks ago

Previous Behavior

ComboBox would always match input with the options in a case insensitive way without the possibility of modifying this behavior.

New Behavior

A new caseSensitive prop is introduced to ComboBox in this PR, through which all internal comparisons in the logic of ComboBox are done in a case sensitive manner. A new example of what this behavior looks like is introduced in this PR as well.

Related Issue(s)

codesandbox-ci[bot] commented 2 weeks ago

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.

fabricteam commented 2 weeks ago

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react
ComboBox
250.194 kB
71.86 kB
250.423 kB
71.926 kB
229 B
66 B
react
Fluent UI React (entire library)
1.012 MB
281.033 kB
1.012 MB
281.091 kB
229 B
58 B
react
TimePicker
239.998 kB
69.624 kB
240.227 kB
69.693 kB
229 B
69 B
Unchanged fixtures | Package & Exports | Size (minified/GZIP) | | ----------------- | -------------------: | | react
ActivityItem | `71.019 kB`
`23.288 kB` | | react
Announced | `38.291 kB`
`13.239 kB` | | react
Autofill | `15.365 kB`
`4.743 kB` | | react
Breadcrumb | `200.619 kB`
`60.07 kB` | | react
Button | `194.573 kB`
`56.3 kB` | | react
ButtonGrid | `180.349 kB`
`54.518 kB` | | react
Calendar | `121.542 kB`
`36.943 kB` | | react
Callout | `84.108 kB`
`27.552 kB` | | react
Check | `52.963 kB`
`17.773 kB` | | react
Checkbox | `59.751 kB`
`19.806 kB` | | react
ChoiceGroup | `65.276 kB`
`21.438 kB` | | react
ChoiceGroupOption | `58.531 kB`
`19.309 kB` | | react
Coachmark | `92.937 kB`
`29.356 kB` | | react
Color | `7.737 kB`
`3.106 kB` | | react
ColorPicker | `132.985 kB`
`41.502 kB` | | react
CommandBar | `201.843 kB`
`59.824 kB` | | react
ContextualMenu | `154.789 kB`
`48.068 kB` | | react
DatePicker | `183.939 kB`
`56.079 kB` | | react
DateTimeUtilities | `5.244 kB`
`1.849 kB` | | react
DetailsList | `229.3 kB`
`65.63 kB` | | react
Dialog | `209.943 kB`
`62.812 kB` | | react
Divider | `19.399 kB`
`6.798 kB` | | react
DocumentCard | `215.628 kB`
`64.085 kB` | | react
DragDrop | `8.343 kB`
`2.724 kB` | | react
DraggableZone | `34.109 kB`
`11.448 kB` | | react
Dropdown | `232.588 kB`
`68.284 kB` | | react
ExtendedPicker | `96.565 kB`
`27.809 kB` | | react
Fabric | `41.537 kB`
`14.283 kB` | | react
Facepile | `210.48 kB`
`63.032 kB` | | react
FloatingPicker | `240.713 kB`
`68.651 kB` | | react
FocusTrapZone | `16.975 kB`
`5.917 kB` | | react
FocusZone | `54.844 kB`
`17.402 kB` | | react
Grid | `180.349 kB`
`54.518 kB` | | react
GroupedList | `134.634 kB`
`40.596 kB` | | react
GroupedListV2 | `122.251 kB`
`37.703 kB` | | react
HoverCard | `96.969 kB`
`30.741 kB` | | react
Icon | `51.644 kB`
`17.197 kB` | | react
Icons | `66.305 kB`
`24.379 kB` | | react
Image | `46.701 kB`
`15.646 kB` | | react
Keytip | `81.482 kB`
`26.712 kB` | | react
KeytipData | `13.969 kB`
`4.57 kB` | | react
KeytipLayer | `103.278 kB`
`31.961 kB` | | react
Keytips | `106.046 kB`
`32.966 kB` | | react
Label | `38.134 kB`
`13.207 kB` | | react
Layer | `47.887 kB`
`16.295 kB` | | react
Link | `39.488 kB`
`13.614 kB` | | react
List | `39.176 kB`
`12.384 kB` | | react
MarqueeSelection | `74.321 kB`
`22.385 kB` | | react
MessageBar | `189.134 kB`
`56.778 kB` | | react
Modal | `93.44 kB`
`30.18 kB` | | react
Nav | `187.931 kB`
`56.384 kB` | | react
OverflowSet | `33.191 kB`
`11.252 kB` | | react
Overlay | `40.694 kB`
`14.023 kB` | | react
Panel | `199.654 kB`
`59.727 kB` | | react
Persona | `114.617 kB`
`36.442 kB` | | react
PersonaCoin | `114.617 kB`
`36.442 kB` | | react
PersonaPresence | `57.833 kB`
`19.303 kB` | | react
Pickers | `292.399 kB`
`82.007 kB` | | react
Pivot | `188.845 kB`
`57.107 kB` | | react
Popup | `12.242 kB`
`4.181 kB` | | react
Positioning | `22.608 kB`
`7.63 kB` | | react
PositioningContainer | `73.643 kB`
`23.706 kB` | | react
ProgressIndicator | `39.286 kB`
`13.482 kB` | | react
Rating | `81.762 kB`
`26.057 kB` | | react
ResizeGroup | `13.286 kB`
`4.365 kB` | | react
ResponsiveMode | `8.078 kB`
`2.95 kB` | | react
ScrollablePane | `55.325 kB`
`17.669 kB` | | react
SearchBox | `187.409 kB`
`56.377 kB` | | react
SelectableOption | `724 B`
`413 B` | | react
SelectedItemsList | `231.169 kB`
`67.62 kB` | | react
Selection | `42.252 kB`
`12.203 kB` | | react
Separator | `35.183 kB`
`12.088 kB` | | react
Shimmer | `49.049 kB`
`16.206 kB` | | react
ShimmeredDetailsList | `240.075 kB`
`68.397 kB` | | react
Slider | `57.449 kB`
`19.143 kB` | | react
SpinButton | `191.137 kB`
`57.503 kB` | | react
Spinner | `41.481 kB`
`14.412 kB` | | react
Stack | `41.547 kB`
`14.233 kB` | | react
Sticky | `32.541 kB`
`10.49 kB` | | react
Styling | `45.853 kB`
`15.082 kB` | | react
SwatchColorPicker | `190.675 kB`
`57.985 kB` | | react
TeachingBubble | `204.685 kB`
`60.713 kB` | | react
Text | `36.723 kB`
`12.763 kB` | | react
TextField | `80.555 kB`
`25.262 kB` | | react
Theme | `43.321 kB`
`14.129 kB` | | react
ThemeGenerator | `12.34 kB`
`4.106 kB` | | react
Toggle | `46.02 kB`
`15.903 kB` | | react
Tooltip | `87.136 kB`
`28.164 kB` | | react
Utilities | `82.495 kB`
`25.047 kB` | | react
Viewport | `23.703 kB`
`7.589 kB` | | react
WeeklyDayPicker | `101.682 kB`
`31.738 kB` | | react
WindowProvider | `1.059 kB`
`541 B` |

🤖 This report was generated against cd78d70a00dbeae15585494c8853a5a2730a9f7d

fabricteam commented 2 weeks ago

🕵 fluentuiv8 No visual regressions between this PR and main

fabricteam commented 2 weeks ago

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 631 639 5000
Breadcrumb mount 1716 1677 1000
Checkbox mount 1730 1731 5000
CheckboxBase mount 1479 1491 5000
ChoiceGroup mount 3019 3077 5000
ComboBox mount 688 688 1000
CommandBar mount 6730 6743 1000
ContextualMenu mount 14578 14433 1000
DefaultButton mount 794 785 5000
DetailsRow mount 2226 2233 5000
DetailsRowFast mount 2218 2274 5000
DetailsRowNoStyles mount 2076 2045 5000
Dialog mount 2728 2903 1000
DocumentCardTitle mount 233 245 1000
Dropdown mount 2037 2066 5000
FocusTrapZone mount 1158 1177 5000
FocusZone mount 1095 1083 5000
GroupedList mount 38379 43773 2
GroupedList virtual-rerender 18177 20422 2
GroupedList virtual-rerender-with-unmount 52582 51851 2
GroupedListV2 mount 229 232 2
GroupedListV2 virtual-rerender 199 225 2
GroupedListV2 virtual-rerender-with-unmount 229 227 2
IconButton mount 1161 1130 5000
Label mount 339 355 5000
Layer mount 2823 2786 5000
Link mount 417 411 5000
MenuButton mount 1000 1038 5000
MessageBar mount 21584 21610 5000
Nav mount 2041 2083 1000
OverflowSet mount 811 828 5000
Panel mount 1873 1840 1000
Persona mount 731 764 1000
Pivot mount 937 935 1000
PrimaryButton mount 928 933 5000
Rating mount 4852 4764 5000
SearchBox mount 912 943 5000
Shimmer mount 1965 1931 5000
Slider mount 1361 1324 5000
SpinButton mount 2978 3016 5000
Spinner mount 385 388 5000
SplitButton mount 1871 1913 5000
Stack mount 414 421 5000
StackWithIntrinsicChildren mount 851 901 5000
StackWithTextChildren mount 2617 2684 5000
SwatchColorPicker mount 6414 6478 5000
TagPicker mount 1474 1481 5000
Text mount 378 389 5000
TextField mount 962 980 5000
ThemeProvider mount 886 881 5000
ThemeProvider virtual-rerender 597 596 5000
ThemeProvider virtual-rerender-with-unmount 1307 1348 5000
Toggle mount 627 622 5000
buttonNative mount 200 198 5000