UI issue with lightning buttonMenu variant after Winter 20 release

Question

We have a borderless button menu with a specified button icon set up in a custom lightning component. Since the Winter 20 release the icon is displaying with a border and padding/margins seem to be different.

We are using variant="container" and setting a standard utility icon.

The border only appears when specifying a button icon, otherwise the variant attribute behaves as expected:

<lightning:buttonMenu aura:id="menu"  
                      variant="container" 
                      iconName="utility:add" 
                      iconSize="small">
    <lightning:menuItem value="MenuItemOne" label="Menu Item One" />
    <lightning:menuItem value="MenuItemTwo" label="Menu Item Two" />
</lightning:buttonMenu>
<br/><br/>
<lightning:buttonMenu aura:id="menu"
                      variant="container">
    <lightning:menuItem value="MenuItemOne" label="Menu Item One" />
    <lightning:menuItem value="MenuItemTwo" label="Menu Item Two" />
</lightning:buttonMenu>

Has anyone come across this and figured out how to work around it? I don't want to apply compensating styles only for it to change again in the next release!

Answer 1

in your case issue with variant/ iconSize, container variant takes 32PX by 32 PX button space, i would recommended to go through button variant. in winter 20 release notes also they didn't mention about variant changes. so at this point workaround for this issue. you can change either iconSize to large or variant to bare

Tested CMP

<lightning:layout>
    <lightning:layoutItem  padding="around-small">
        <lightning:buttonMenu aura:id="menu"  
                              variant="bare" 
                              iconName="utility:add" 
                              iconSize="small">
            <lightning:menuItem value="BareItemOne" label="Bare Item One" />
            <lightning:menuItem value="BareItemTwo" label="Bare Item Two" />
        </lightning:buttonMenu>
    </lightning:layoutItem>
    <lightning:layoutItem  padding="around-small">
        <lightning:buttonMenu aura:id="menu1"
                              variant="container"
                              iconName="utility:add"
                              iconSize="large">
            <lightning:menuItem value="ContainerItemOne" label="Container Item One" />
            <lightning:menuItem value="ContainerItemTwo" label="Container Item Two" />
        </lightning:buttonMenu>
    </lightning:layoutItem>
    <lightning:layoutItem  padding="around-small">
        <lightning:buttonMenu aura:id="menu2"
                              variant="container"
                              iconName="utility:add"
                              iconSize="small">
            <lightning:menuItem value="ContainersmallItemOne" label="Container small Item One" />
            <lightning:menuItem value="ContainersmallItemTwo" label="Container small Item Two" />
        </lightning:buttonMenu>
    </lightning:layoutItem>
</lightning:layout>