Improve hover state interaction for dropdowns and buttons

mike-j-thomas commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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)"

lukeheath commented 2 years ago

@mike-j-thomas Should we add any hover states for text links? There are some cases we use normal text links instead of secondary buttons. For example:

Currently there is no hover state for text links.

lukeheath commented 2 years ago

@mike-j-thomas Will there be any changes to the dropdown popup menu styling? If so, would you please provide a design comp showing the changes?

mike-j-thomas commented 2 years ago

Should we add any hover states for text links? There are some cases we use normal text links instead of secondary buttons. For example:

Yes, we should have a hover state. It's on my mind but I haven't had a chance to action anything for it yet.

Will there be any changes to the dropdown popup menu styling? If so, would you please provide a design comp showing the changes?

Yes, I think we should improve them, but I haven't got anything for it just yet. I'll have a think about this.

Added both to my list.

lukeheath commented 2 years ago

@noahtalerman I added the :blocked label, moved this back to Architect, and assigned to you to indicate that we are blocked on this ticket until we receive direction from #4023.

noahtalerman commented 2 years ago

Thanks :)

@lukeheath I think the latest comments from Mike Thomas in #4023 provide the necessary direction: https://github.com/fleetdm/fleet/issues/4023#issuecomment-1038651837

Please tag and reassign me to this issue if this is not the case.

noahtalerman commented 2 years ago

@lukeheath heads up, I'm pulling this issue back to the drafting/wireframing phase for priority drafting.

I unable to argue that the current goal of this issue aligns with quickly shipping valuable changes.

Thus, I plan to update the goal and reduce the number of UI changes to allow us to quickly ship valuable changes.

I unassigned you from the issue, removed the ":architect" label, and moved the issue to the product team (weekly) board.

noahtalerman commented 2 years ago

@mike-j-thomas these UI changes are an awesome improvement.

FYI I'm moving this issue into the "🤩 Inspire me" column in the Fleet core roadmap project. Currently, the Fleet team doesn't have the capacity to implement these changes.

I'm excited to be able to implement these new styles when we have the capacity to take them on 🦾

fleetdm / fleet