Skip to content

Convenience APIs for adding icons/images to list items #2688

@rolfsmeds

Description

@rolfsmeds

Describe your motivation

Rendering icons or images as part of items in lists is an extremely common use case:

  • Menus often have icons next to their item's labels, providing a visual representation of the option or action.
  • Dropdown fields often have small images (icons, avatars, thumbnails...) as part of the items in their dropdown lists for the same reason.

Yet implementing these with Vaadin components like ComboBox, Select, MenuBar and ContextMenu requires a significant amount of boilerplate code for creating the layout containing the image and the label, and applying a classname or a bit of inline css to it. What could be a single line of code tends to be closer to at least five, and it is far from trivial to figure out how to do it.

Describe the solution you'd like

Simple, single-liner APIs for rendering images, icons, or why not any arbitrary component as a "prefix" to items in menus and lists.

Vaadin 8 had the ItemIconGenerator API, so that would seem like a pretty good option for ComboBox and Select (although I think ItemImageGenerator, or even ItemPrefixGenerator, would be preferable, as it's not always icons specifically).

The add-methods of MenuBar and ContextMenu could simply be overloaded with a second parameter for the prefix component:

menubar.addItem(VaadinIcon.ABACUS.create(), "Calculate stuff");

In terms of implementation, it would seem logical to add a slot for the prefix element in vaadin-item, which all of the above components use for their items, and ensuring that it, and the label next to it, are rendered nicely.

Additional context

This would also make it easier to migrate applications from Vaadin 7 and 8, in which corresponding APIs are used a lot.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions