Improve hover state interaction for dropdowns and buttons

[mike-j-thomas]

We don't have a hover state for secondary buttons, and dropdowns in the Fleet UI.

Goal

Add a consistent hover state interaction for all dropdowns and secondary buttons in the Fleet UI.

Figma

https://www.figma.com/file/hdALBDsrti77QuDNSzLdkx/?node-id=3717%3A126303

Notes:

1. All interaction elements outlined in this ticket have the following states. All screenshots below show state in the following order:

• Enabled
• Disabled
• Hover
• Pressed
• Focused

2. As part of this effort, we will be updating all components we update to functional components, TypeScript and switch from Redux to Context.

Tasks

1

• Set all states for primary button.
• Ensure all states match design specs in Figma.

---

2

• Set all states for secondary button.
• Ensure all states match design specs in Figma.

---

3

• Set all states for dropdown menus.
• Ensure all states match design specs in Figma.

---

4

• Set all states for hotdog button.
• Ensure all states match design specs in Figma.

---

5

• Set all states for action button.
• Ensure all states match design specs in Figma.
• Note gradient fade background that appears when action button is shown in a table row.

---

6

• Update all states for tab navigation button.
• Ensure all states match design specs in Figma.

---

7

• Validate that implementation of all global component changes are displaying as intended throughout the app.

---

8

• Identify and resolve any "wildcard" implementations of buttons or dropdowns that are outside of these global changes.
• Will need to work with product to determine how to adjust wildcard elements on case-by-case.

[noahtalerman]

Thanks for filing this issue! @mike-j-thomas can you please add a UI element, for each dropdown and secondary button, to the Figma page linked in this issue's description?

I'm passing this issue to you.

This way, developers will know exactly which UI elements need to be updated. Currently the Figma page only includes an example for the "More options" UI element.

[mike-j-thomas]

Assigning this back to you, @noahtalerman. I have created a sticker sheet with the core UI controls, and have included a description for each.

This will be the beginnings of a more robust (and up-to-date) design system. Please let me know when you are ready to reify as I will need to migrate these local components to the style sheet doc, and make sure that there are no conflicts in Fleet EE (current).

[noahtalerman]

make sure that there are no Fleet EE (current).

@mike-j-thomas can you please clarify what do you mean by this?

I interpret this as...you'd like to make sure that all buttons, dropdowns, btn-hotdogs, btn-actions, and tab navigation in Fleet EE (current) are replaced by the new elements in this stickersheet. Is that correct?

Please let me know when you are ready to reify as I will need to migrate these local components to the style sheet doc

Will do.

I will let you know when these items are ready for reification

[mike-j-thomas]

I interpret this as...you'd like to make sure that all buttons, dropdowns, btn-hotdogs, btn-actions, and tab navigation in Fleet EE (current) are replaced by the new elements in this stickersheet. Is that correct?

@noahtalerman that's correct. My original comment was supposed to read "make sure that there are no conflicts in Fleet EE (current)"