This was the only way I could figure out to use a CSS sprite based icon on a MenuItem. My CssGlyphIconResource is just a transparent 14x14 icon. This worked fine (although a bit of a kludge) until beta6. With the release of beta6, I find that all the CSS classes of the MenuItem are cleared when the item is selected. This causes my sprite icon to be removed. I attached screenshots of the CSS class name before menu item selection and after.
Is there a better way to do styling of individual menu items such that the styles are not removes when the item is selected? Is there a better way to do CSS sprite icons in Vaadin in general? Is this just a bug with beta6 menu items?
This looks like an regression in the style name handling of menu items in the MenuBar. Made a ticket
#10077 tracking the issue. Should get fixed for the next beta.
While we’re on the topic, is there a better way to do CSS sprite icons in Vaadin in general? Most widgets take an icon Resource but that doesn’t work if you want the icon obtained via CSS. Maybe a CssThemeResource (or something similar) is needed which would support a addStyleName method. Or a addIconStyleName on the widget itself. Currently it is a bit of hack to put a transparent image as the icon and then add the icon style to the widget.
Ah, interesting idea. I’ll have to see how I can get it to work with my current style structure. Currently I have a base class for all icons which sets the sprite URL and then a class for each icon which sets the background position. Maybe I can come up with some SASS magic to make it easy to match buttons, tabs, menu items, etc that all use CSS sprite icons if I remove the empty icon (which removes the v-icon class that I’m currently selecting).