Unify appearance of states in List, Card, and Table views

[mcarrano]

Currently there is inconsistency between hover, selected, and disabled states for list, card, and table views. These should be made more consistent.

[LHinson]

Research done on hover to date is here: https://docs.google.com/document/d/1ABGmLF_MxAoAGT7RFfFHukE5mjTiHzcc6CohiWOJmXw/edit

[mcarrano]

A story has been added to the PatternFly backlog: https://patternfly.atlassian.net/browse/PTNFLY-2428

[mcarrano]

@kybaker can you take a look at prior recommendation and let us know whether we need a corresponding visual story. OSIO has some priority around resolving gray hover states.

[ncameronbritt]

As discussed in the MGMT UX sharing on 9/11/17, maybe a simpler version of this issue is: Should the hover state on tables be blue if the rows are not interactive.

[mcarrano]

If we go with a light-blue hover state for either list or table views as the OS console team is selecting, we will need a different selected state for list view rows. I'm not entirely sure what the right answer is but agree this needs to be simplified. I have assigned this to myself and will try to articulate some options that can be reviewed.

[mcarrano]

I did some analysis on this to look at how we are representing state across the three primary content views (card, list, and table). @jennyhaines helped me by doing some quick mockups to explore some options. You can see this summarized here: https://docs.google.com/a/redhat.com/document/d/1qoAetrAZVVEFq8so2tlkP7eRJaCkITskooOMV4LjxzI/edit?usp=sharing

In short, the proposal is to use a slightly lighter blue for the hover state on list view (replacing the gray). This promotes consistency while maintaining enough differentiation between hover and selected states for the list view rows.

@kybaker can you review and let us know if you approve of this approach? If so, this issue can be resolved by simply changing the hover state color on list view (we might also consider using the same RGB for hover on table view, but I don't think that's critical).

[mcarrano]

This will be queued up for implementation. @jennyhaines we will need the RGB values of the lighter blue color to use for the list view hover state. Thanks again for your help!

[kybaker]

@mcarrano @jennyhaines The lighter blue looks good to me.

[mcarrano]

@zhutaoredhat will make updates to the design documentation to reflect this. There is a PatternFly story created here: https://patternfly.atlassian.net/browse/PTNFLY-2553 @jennyhaines can you communicate the RGB you used for this to make sure we get this right? @andresgalante will be updating CSS styles to make sure we keep this in sync.

[jennyhaines]

Hi @mcarrano - The hex for that hover state light blue is #edf8ff
Thanks!

[andresgalante]

Hi @jennyhaines that color is not on our color pallet: https://www.patternfly.org/styles/color-palette/

If it's ok with you I'll create a PR with pf-blue-50 #def3ff, what do you think?

[jennyhaines]

Hi @andresgalante - So does that mean that the selected (non-hover) state is #bee1f4 , and the hover state would be #def3ff (one tint lighter in the color palette)? If yes, I'm all for it!

[andresgalante]

@jennyhaines it'd be the same color active and hover :(
@kybaker Can we add a new color to the color pallet?

What about the new list? https://rawgit.com/patternfly/patternfly/master-dist/dist/tests/list-pf.html

@mcarrano Should it follow the same blue? I think that if we change it, it will break OpenShift

[mcarrano]

I'm a little confused about this question @andresgalante . I though that we were changing from gray to blue on hover per the request of the OpenShift team. Is that not the case?

[andresgalante]

@mcarrano me too. So, let me know what to do and I'll do it.

We have 2 types of lists and @jennyhaines is proposing a color that is not on our color pallet. I can absolutely change it if you think that's ok. I am just pointing out what I am required to do so we are all aware of the consequences.

[mcarrano]

I'll defer to @kybaker and @jennyhaines on the exact color and whether we need to add this as a new color to the palette.

[jennyhaines]

@andresgalante @mcarrano IMO, the color doesn't need to be added to the palette since it is really the only case I can see us needing it in our patterns, but I'm curious what Kyle thinks. I think that just setting the hover state to #edf8ff would work great.

[jeff-phillips-18]

I would suggest adding it to the palette. Applications may want to reference the same value to be consistent in other instances.

[kybaker]

@jennyhaines @andresgalante @mcarrano I agree with Jeff here. The cost of adding it is outweighed by the potential for promoting consistency. We should add it. @mcarrano can you add a story for updating the color palettes and the CSS to reflect this change?

[andresgalante]

I'll close this issue since this PR is open patternfly/patternfly#798