search

patternfly / patternfly-elements

PatternFly Elements. A set of community-created web components based on PatternFly design.
https://patternflyelements.org/
MIT License
378 stars 96 forks source link

Add hover bg color effect to pfe-autocomplete droplist list item #951

Open kelsS opened 4 years ago

kelsS commented 4 years ago

Component name:

Name/Description of the component being updated pfe-autocomplete - dropdown ul list items

Design specification updates

Currently when you hover over a dropdown list item the background color does not change to more clearly indicate which item the user is hovering over with their mouse. The bg color only changes when selecting a dropdown item with the keyboard.

pfe autocomplete with hover effect on dropdown items

Need to add following style updates to ul li styles in pfe-search-droplist.scss around line 55

      &:hover,
      &.active {
          background-color: #{pfe-color( surface--lighter )};
      }

Location of file to be updated on GitHub

Accessibility updates

Interaction updates

Analytics updates

castastrophe commented 4 years ago

@eyevana This might be a good reason why we should swap to using the ui color sets for this component rather than the surface set. The ui sets have state variants that would map to this interaction. Is there a set of UI colors that would work for the dropdown background colors? If not, we can talk about adding a new set.