Updated pickers with input attribute compatibility.

[tpalacino]

Previous Behavior

The Picker components that extend the BasePicker and BasePickerListBelow are missing properties that most other FluentUI user input component support. The missing properties include label, required, errorMessage, and onGetErrorMessage.

New Behavior

The pickers now support the following optional properties:

Property	Description
label	When specified renders consistently with how a label is rendered for a TextField.
required	When specified renders consistently with how the required attribute is rendered for a TextField.
errorMessage	When specified renders consistently with how an error message is rendered for a ComboBox.
onGetErrorMessage	When specified behaves consistently with how an error message function behaves for a TextField.

Related Issue(s)

• Fixes NormalPeoplePicker required attribute #22528

[tpalacino]

@gouttierre @msft-fluent-ui-bot @JustSlone @layershifter @khmakoto @micahgodbolt Can someone please help me merge this?

[smhigley]

Thanks for doing this work! I did an initial pass and left comments on stuff I saw. Let me know if they make sense, and if you have any questions!

[tpalacino]

@smhigley & @khmakoto Feedback has been resolved

[smhigley]

One tiny change that needs to be made, and one optional change. Otherwise this looks ready!

[tpalacino]

@khmakoto What are the next steps?

[khmakoto]

@tpalacino I'll merge your PR once all checks have completed (I just approved the workflows so CI starts to run those checks).

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
react ExtendedPicker	96.873 kB 27.893 kB	96.873 kB 27.892 kB	-1 B
react FloatingPicker	242.366 kB 69.001 kB	242.366 kB 69.002 kB	1 B
react Pickers	294.366 kB 82.356 kB	298.98 kB 83.626 kB	4.614 kB 1.27 kB
react Fluent UI React (entire library)	1.014 MB 281.718 kB	1.018 MB 282.769 kB	3.646 kB 1.051 kB
react SelectedItemsList	232.878 kB 67.891 kB	232.878 kB 67.893 kB	2 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
react ActivityItem	71.236 kB 23.357 kB
react Announced	38.489 kB 13.296 kB
react Autofill	15.42 kB 4.766 kB
react Breadcrumb	202.318 kB 60.388 kB
react Button	195.791 kB 56.627 kB
react ButtonGrid	180.722 kB 54.627 kB
react Calendar	121.875 kB 37.024 kB
react Callout	84.323 kB 27.64 kB
react Check	53.204 kB 17.848 kB
react Checkbox	59.985 kB 19.903 kB
react ChoiceGroup	65.494 kB 21.489 kB
react ChoiceGroupOption	58.767 kB 19.362 kB
react Coachmark	93.144 kB 29.42 kB
react Color	7.789 kB 3.127 kB
react ColorPicker	135.292 kB 42.21 kB
react ComboBox	252.203 kB 72.291 kB
react CommandBar	203.359 kB 60.141 kB
react ContextualMenu	155.243 kB 48.202 kB
react DatePicker	184.295 kB 56.15 kB
react DateTimeUtilities	5.244 kB 1.849 kB
react DetailsList	229.909 kB 65.781 kB
react Dialog	211.717 kB 63.165 kB
react Divider	19.603 kB 6.845 kB
react DocumentCard	217.336 kB 64.44 kB
react DragDrop	8.343 kB 2.724 kB
react DraggableZone	34.303 kB 11.511 kB
react Dropdown	234.251 kB 68.619 kB
react Fabric	41.745 kB 14.366 kB
react Facepile	210.893 kB 63.167 kB
react FocusTrapZone	17.023 kB 5.911 kB
react FocusZone	55.159 kB 17.492 kB
react Grid	180.722 kB 54.627 kB
react GroupedList	135.07 kB 40.7 kB
react GroupedListV2	122.687 kB 37.788 kB
react HoverCard	97.16 kB 30.787 kB
react Icon	51.885 kB 17.272 kB
react Icons	66.361 kB 24.397 kB
react Image	46.904 kB 15.707 kB
react Keytip	81.693 kB 26.766 kB
react KeytipData	14.032 kB 4.582 kB
react KeytipLayer	103.474 kB 32.015 kB
react Keytips	106.238 kB 33.013 kB
react Label	38.347 kB 13.257 kB
react Layer	48.099 kB 16.367 kB
react Link	39.682 kB 13.67 kB
react List	39.371 kB 12.463 kB
react MarqueeSelection	74.517 kB 22.433 kB
react MessageBar	190.869 kB 57.103 kB
react Modal	93.738 kB 30.271 kB
react Nav	188.306 kB 56.485 kB
react OverflowSet	33.385 kB 11.314 kB
react Overlay	40.902 kB 14.095 kB
react Panel	201.364 kB 59.98 kB
react Persona	114.948 kB 36.532 kB
react PersonaCoin	114.948 kB 36.532 kB
react PersonaPresence	58.074 kB 19.384 kB
react Pivot	189.226 kB 57.267 kB
react Popup	12.294 kB 4.195 kB
react Positioning	22.807 kB 7.701 kB
react PositioningContainer	73.85 kB 23.765 kB
react ProgressIndicator	39.494 kB 13.55 kB
react Rating	82.12 kB 26.127 kB
react ResizeGroup	13.338 kB 4.377 kB
react ResponsiveMode	8.13 kB 2.966 kB
react ScrollablePane	55.557 kB 17.728 kB
react SearchBox	189.118 kB 56.68 kB
react SelectableOption	724 B 413 B
react Selection	42.444 kB 12.278 kB
react Separator	35.384 kB 12.146 kB
react Shimmer	49.259 kB 16.268 kB
react ShimmeredDetailsList	240.691 kB 68.532 kB
react Slider	57.651 kB 19.217 kB
react SpinButton	192.821 kB 57.775 kB
react Spinner	41.775 kB 14.48 kB
react Stack	41.734 kB 14.268 kB
react Sticky	32.599 kB 10.504 kB
react Styling	46.033 kB 15.135 kB
react SwatchColorPicker	191.136 kB 58.151 kB
react TeachingBubble	206.116 kB 61.054 kB
react Text	36.908 kB 12.822 kB
react TextField	80.79 kB 25.315 kB
react Theme	43.493 kB 14.173 kB
react ThemeGenerator	12.392 kB 4.126 kB
react TimePicker	242.014 kB 70.049 kB
react Toggle	46.225 kB 15.986 kB
react Tooltip	87.437 kB 28.26 kB
react Utilities	82.931 kB 25.148 kB
react Viewport	23.888 kB 7.656 kB
react WeeklyDayPicker	102.017 kB 31.834 kB
react WindowProvider	1.059 kB 541 B

_{🤖 This report was generated against b9a11c54c2b7bd6d003ef1952b59f63647143451}

[github-actions]

Pull request demo site: URL