Adding support to add custom attributes on SpinButton and ComboBox

[pagaur]

Pull request checklist

• Addresses an existing issue: Fixes Support to set custom attributes on Spin button or ComboBox components #9871
• Include a change request file using $ npm run change

Description of changes

This change allows some custom attribute to set on Spin button or ComboBox components (BaseButton and Checkbox are already passing custom attributes if passed to it).
The container where we want to host buttons expects a custom property 'data-nav:true' to be set to enable keyboard navigation between various buttons on that surface.

Focus areas to test

These changes should not affect existing

Microsoft Reviewers: Open in CodeFlow

[msftclas]

All CLA requirements met.

[joschect]

@pagaur I'm surprised that you can't already pass those down through to combobox's autofill and buttonicon. I wonder if there is a typing issue somewhere since you can pass those options directly to autofill. @JasonGore do you have any idea why you might be able to pass a prop directly to a react element but not through a props object?

vs

[size-auditor]

Bundle test	Size (minified)	Diff from master
SpinButton	177.514 kB	50 bytes
ComboBox	222.667 kB	25 bytes

  Exceeds Tolerance       Exceeds Baseline       Below Baseline     1 kB = 1000 bytes

[JasonGore]

Yes, I just had a discussion with the TypeScript team about this recently. The TypeScript compiler is basically hardcoded to support data- and aria- props passed to elements. Unfortunately this means there's really no easy way to allow them in arbitrary props objects without just allowing all strings. The ability to support that is covered by this TypeScript PR and this TypeScript PR.

For now, I think the only thing you can do is cast data- attributes to any when assigning them to props object props, or create the props object separately and cast it as IAutofillProps.

[msft-github-bot]

Component Perf Analysis:

Scenario	Master Samples *	PR Samples *
BaseButton	854	851
BaseButton (experiments)	1727	1719
DefaultButton	1161	1166
DefaultButton (experiments)	1973	1950
DetailsRow	5811	5732
DetailsRow without styles	5499	5424
DocumentCardTitle with truncation	43197	44134
MenuButton	2030	2069
MenuButton (experiments)	4926	4974
PrimaryButton	1399	1409
PrimaryButton (experiments)	2484	2449
SplitButton	3975	3975
SplitButton (experiments)	9005	9116
Stack	514	515
Stack with Intrinsic children	2012	1927
Stack with Text children	5400	5331
Text	415	419
Toggle	997	976
Toggle (experiments)	2439	2460
button	69	75

* Sample counts can vary by up to 30% and shouldn't be used solely for determining regression. For more information please see the Perf Testing wiki.

[pagaur]

when I try to add data-nav on autofill props, compiler gives me following error:
error TS2322: Type '{ 'data-nav': boolean; }' is not assignable to type 'IAutofillProps'.
Object literal may only specify known properties, and ''data-nav'' does not exist in type 'IAutofillProps'.

[joschect]

@pagaur Per Jason's comment this is an issue with typescript, if you type those props as any they will work and should get passed down to the input. See the screenshot attached

[pagaur]

cool, I will remove the autoFillCutomProps from the CL, does other changes looks fine?

[aneeshack4]

We could potentially do what ComboBox has done with Autofill in order to let InputHTMLAttributes to be mixed in but what you have right now is better because it's less confusing what the root element is this way.

[msft-github-bot]

🎉[email protected] has been released which incorporates this pull request.:tada:

Handy links:

• Release Notes
• Official NPM Release
• Test the release with Developer Demo Site