Suggestion hover: remove `active` class ; allow `list-group-item-{variant}` for background variants ?

[Owumaro]

trafficstars

When we hover a suggestion, the class active is added to the list item.

However, the class active renders very aggressively (bg-primary) and should be applied only once the option is selected. Hovering should only make a light emphasis the suggestion.

The current other classes of the suggestions do the job: with .list-group-item-action, there is already a light hover effect, which is less aggressive and a better hover feedback. (see https://getbootstrap.com/docs/4.1/components/list-group/#contextual-classes, 2nd example (there is no direct anchor for this example...))

Let me know what you think about this.

Also, the background-variant property is not a good idea. For example, if you try to use bg-light, when hovering, the text will still be white because of the active class, but with the light background. If you remove the active class, the text will have the color set by the bg class and it will work.

Also, bootstrap was thought to use list-group-item-* classes to set colors on list items (example list-group-item-primary) and not bg-*. But these colors are lighter and I understand that you may want the real primary blue on hover.

To make everyone happy we could replace the bg-${backgroundVariant} class by a custom class + a custom hover class. This way you could have the default + bg-primary on hover, or use list-group-item-* classes.

If you agree on this, I can work on a PR when I have time.

Thanks

[alexurquhart]

Good suggestions, I think being using list-group-item-action classes as a prop, perhaps 'itemVariant`, with an option for custom list element and hover classes would work well.

Right now the coloring of the text can be set with the textVariant prop, but it doesn't allow users to select a more subtle color theme. Also, the active class leaves a bright blue outline around a list element regardless of it's background or text variant, which isn't desirable but can be fixed with a custom hover class.

I think an API like the following would work, but I'm open to suggestion

• itemVariant Defaults to list-group-item-action, with no contextual color applied.
• itemClass
• itemHoverClass

[qadirfarooq]

did you merged these features, do we have this feature available in any version? itemVariant Defaults to list-group-item-action, with no contextual color applied. **itemClass **itemHoverClass

*** did some one implemented these?