feat: add disabled version for Dropdown and Input

[silviuaavram]

Pull request checklist

• Addresses an existing issue: Fixes Dropdown: loading case has <li> contained by another <li> #12316
• Include a change request file using $ yarn change

Description of changes

Provides disabled behavior for Dropdown and also for Input (because we are using Input for DropdownSearchInput).

• only executes event handlers from predefinedProps if disabled is true.
• add disabled prop on native input and button.
• add disabled to Downshift so it does not give us handlers anymore.

Added examples in docsite for both components and also unit tests.

Focus areas to test

(optional)

Microsoft Reviewers: Open in CodeFlow

[size-auditor]

Asset size changes

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

Baseline commit: 1d135a297eaa4e2859e68fbd500d49cb3f4016af (build)

[msft-github-bot]

Perf Analysis

No significant results to display.

All results

Scenario	Master Ticks	PR Ticks	Status
BaseButton	714	673
BaseButton (experiments)	789	826
DefaultButton	883	909
DefaultButton (experiments)	1590	1639
DetailsRow	2925	2945
DetailsRow (fast icons)	2954	3003
DetailsRow without styles	2683	2766
DocumentCardTitle with truncation	1477	1479
MenuButton	1190	1186
MenuButton (experiments)	3020	3082
PrimaryButton	1044	1056
PrimaryButton (experiments)	1728	1698
SplitButton	2625	2671
SplitButton (experiments)	6228	6132
Stack	375	420
Stack with Intrinsic children	969	931
Stack with Text children	3425	3436
Text	301	312
Toggle	744	751
Toggle (experiments)	1940	1928
button	65	56

Perf Analysis (Fluent)

Perf comparison

Status	Scenario	Fluent TPI	Fabric TPI	Ratio	Iterations	Ticks
🔧	Avatar.Fluent	0.49	0.44	1.11:1	2000	975
🦄	Button.Fluent	0.08	0.16	0.5:1	5000	417
🔧	Checkbox.Fluent	0.66	0.35	1.89:1	1000	661
🔧	Dialog.Fluent	0.36	0.17	2.12:1	5000	1819
🔧	Dropdown.Fluent	3.38	0.43	7.86:1	1000	3380
🔧	Icon.Fluent	0.16	0.04	4:1	5000	776
🦄	Image.Fluent	0.06	0.09	0.67:1	5000	311
🔧	Slider.Fluent	1.48	0.36	4.11:1	1000	1477
🔧	Text.Fluent	0.07	0.02	3.5:1	5000	340
🦄	Tooltip.Fluent	0.11	15.66	0.01:1	5000	551

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
ChatWithPopoverPerf.default	733	656	1.12:1
DividerMinimalPerf.default	1002	943	1.06:1
AccordionMinimalPerf.default	244	232	1.05:1
AnimationMinimalPerf.default	598	571	1.05:1
ImageMinimalPerf.default	316	300	1.05:1
ToolbarMinimalPerf.default	1060	1008	1.05:1
InputMinimalPerf.default	1044	1002	1.04:1
SegmentMinimalPerf.default	1050	1010	1.04:1
TableMinimalPerf.default	619	594	1.04:1
Image.Fluent	311	300	1.04:1
AvatarMinimalPerf.default	575	560	1.03:1
DropdownMinimalPerf.default	3589	3477	1.03:1
GridMinimalPerf.default	781	759	1.03:1
SplitButtonMinimalPerf.default	11815	11499	1.03:1
ButtonSlotsPerf.default	628	617	1.02:1
CheckboxMinimalPerf.default	3289	3235	1.02:1
DialogMinimalPerf.default	1991	1952	1.02:1
DropdownManyItemsPerf.default	1518	1494	1.02:1
FlexMinimalPerf.default	248	244	1.02:1
ReactionMinimalPerf.default	2336	2300	1.02:1
RefMinimalPerf.default	193	190	1.02:1
TooltipMinimalPerf.default	800	782	1.02:1
VideoMinimalPerf.default	809	797	1.02:1
Icon.Fluent	776	760	1.02:1
AttachmentSlotsPerf.default	3537	3487	1.01:1
ListCommonPerf.default	954	948	1.01:1
ListNestedPerf.default	876	867	1.01:1
MenuMinimalPerf.default	1937	1917	1.01:1
ProviderMergeThemesPerf.default	1313	1295	1.01:1
SliderMinimalPerf.default	1491	1470	1.01:1
TextAreaMinimalPerf.default	2991	2966	1.01:1
CustomToolbarPrototype.default	3583	3544	1.01:1
Avatar.Fluent	975	968	1.01:1
Button.Fluent	417	412	1.01:1
ChatDuplicateMessagesPerf.default	430	432	1:1
HeaderSlotsPerf.default	1537	1542	1:1
HierarchicalTreeMinimalPerf.default	927	926	1:1
ItemLayoutMinimalPerf.default	1889	1885	1:1
PopupMinimalPerf.default	235	235	1:1
RadioGroupMinimalPerf.default	501	499	1:1
TextMinimalPerf.default	339	338	1:1
TreeMinimalPerf.default	1078	1083	1:1
Slider.Fluent	1477	1476	1:1
Tooltip.Fluent	551	549	1:1
BoxMinimalPerf.default	345	347	0.99:1
ButtonMinimalPerf.default	139	141	0.99:1
EmbedMinimalPerf.default	5211	5248	0.99:1
FormMinimalPerf.default	867	876	0.99:1
LayoutMinimalPerf.default	587	592	0.99:1
ListMinimalPerf.default	398	401	0.99:1
MenuButtonMinimalPerf.default	1418	1427	0.99:1
PortalMinimalPerf.default	264	267	0.99:1
Dropdown.Fluent	3380	3404	0.99:1
CarouselMinimalPerf.default	2065	2097	0.98:1
ListWith60ListItems.default	1117	1141	0.98:1
LoaderMinimalPerf.default	1005	1028	0.98:1
Dialog.Fluent	1819	1850	0.98:1
Checkbox.Fluent	661	681	0.97:1
ChatMinimalPerf.default	583	605	0.96:1
HeaderMinimalPerf.default	495	514	0.96:1
IconMinimalPerf.default	370	385	0.96:1
LabelMinimalPerf.default	339	352	0.96:1
Text.Fluent	340	354	0.96:1
AttachmentMinimalPerf.default	867	913	0.95:1
AlertMinimalPerf.default	576	611	0.94:1
ProviderMinimalPerf.default	594	631	0.94:1
StatusMinimalPerf.default	536	570	0.94:1
TreeWith60ListItems.default	215	229	0.94:1

[kolaps33]

I was looking on the PR. Checkout the branch and was looking on it with screen readers, it looks good :)

But it looked for me suspicious that we need to stop propagate events in "onClick", as I would suppose event is not invoked.
When I was debugging it, then I figure out is it because of chevron div(image) element. Am I correct? (pl. see screenshot)