MenuBar MenuItem Style Behavior Change

In beta5 was styling the MenuItems in a MenuBar with code similar to:


MenuItem programsItem = menuBar.addItem("Programs", new CssGlyphIconResource(), null);
programsItem.setStyleName("normal icon-white icon-headphones"); 

I then had a styles like:


[class^="icon-"]
 .v-icon,
[class*=" icon-"]
 .v-icon {
    background-image: url("img/glyphicons-halflings.png");
    background-position: 14px 14px;
    background-repeat: no-repeat;
    display: inline-block;
    height: 14px;
    line-height: 14px;
    vertical-align: middle;
    width: 14px;
}

.icon-headphones .v-icon{
    background-position: -336px -24px;
}

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?
12600.png
12601.png

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.

Thanks for the reply and I look forward to beta7.

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.

-mike

Instead of using MenuItem.setIcon() you could use pure CSS styling to style the menu item. That way you can do it in pure CSS.

Here is a little snippet that might prove useful:


.v-menubar-menuitem-<menu item stylename> .v-menubar-menuitem-caption:before {
	vertical-align:middle;
    display:inline-block;
    content: " ";
	width:18px;
	height:14px;	
	background-image: url(<icon url>);
	background-repeat: no-repeat;
}

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).

Thanks,
-mike