feat(Dropdown): update styles for dark and hc Teams themes

[mnajdova]

Fixes #1215 - Dropdown theming.
Fixes #1329 - onClick is breaking the triggerButton behavior.
Fixes #1254 - Dropdown event handlers should be refactored.

In order for the styles to applied correctly, I've added the following things:

• selected prop for the DropdownItem, which is set to true from the Dropdown, if the selection is single, and the item is the selected one
• isFromKeyboard prop for the DropdownItem, which is set from the Dropdown, based on the type of event received from Downshift, when the item is set to active
• isFromKeyboard state for the Dropdown

Thins that will be addressed in separte PRs:

• adding inverted prop to the Dropdown
• adding selected icon for the selected list item (may be implemented differently)

[codepretty]

Click anywhere on the dropdown doesn't seem to work anymore

[codecov]

Codecov Report

Merging #1299 into master will decrease coverage by 0.17%.
The diff coverage is 47.05%.

@@            Coverage Diff             @@
##           master    #1299      +/-   ##
==========================================
- Coverage   72.33%   72.16%   -0.18%     
==========================================
  Files         759      762       +3     
  Lines        5694     5734      +40     
  Branches     1688     1702      +14     
==========================================
+ Hits         4119     4138      +19     
- Misses       1569     1590      +21     
  Partials        6        6

Impacted Files	Coverage Δ
...s-high-contrast/components/Input/inputVariables.ts	0% <ø> (ø)	⬆️
...ges/react/src/components/Dropdown/DropdownItem.tsx	71.42% <ø> (ø)	⬆️
...mes/teams/components/Dropdown/dropdownVariables.ts	50% <ø> (ø)	⬆️
...eams-dark/components/Dropdown/dropdownVariables.ts	0% <0%> (ø)
.../components/Dropdown/dropdownSelectedItemStyles.ts	25% <0%> (-25%)	⬇️
...-contrast/components/Dropdown/dropdownVariables.ts	0% <0%> (ø)
...es/teams/components/Dropdown/dropdownItemStyles.ts	20% <0%> (-13.34%)	⬇️
...kages/react/src/themes/teams-dark/siteVariables.ts	100% <100%> (ø)	⬆️
...igh-contrast/components/Dropdown/dropdownStyles.ts	40% <40%> (ø)
...ackages/react/src/components/Dropdown/Dropdown.tsx	87.53% <76.92%> (-0.23%)	⬇️
... and 4 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 5c2688a...b039e21. Read the comment docs.

[mnajdova]

The issue with the trigger button is resolved, everything works as expected now.

[kuzhelov]

is toggle and trigger button the same thing? Seems that yes, given where props of toggleButton are applied to. Would suggest to maintain naming consistency in this case

[mnajdova]

getToggleButtonProps as a method comes from Downshift, and we are using this method on the triggerButton - main area of the single selection Dropdown, and the toggleIndicator, the arrow on the right side of the Dropdown. Can you please let me know what should be renamed in this case?

[kuzhelov]

given that method is named renderTriggerButton, as well as that props contained in scoped variable toggleButtonProps are applied to trigger button only in the context of this method, I would rename it as triggerButtonProps - yes, we have getToggleButtonProps as method from Downshift, but in the context of our method, where everything is scoped to this method, I would expect to see everything related to triggerButton, accordingly

[mnajdova]

Got it, will rename the const to triggerButtonProps.

[bmdalex]

👍 awesome changes, GG @mnajdova
just couple of comments

[kuzhelov]

this is another good example of why we should refrain from blindly passing all calculated props to any slot's content - we might imagine what it would be if regular <button />, or even any other Stardust component type which is different from Button will be provided here