f-button icon button CSS specificity

[DamianMullins]

Hi all, I've noticed that this rule within f-button is causing issues because it has a higher specificity than most four other rules, you can see an example of this in our storybook docs in the mega-modal where we're using f-button but the icon style overrides the width and height.

I'm not sure how best to fix this as the SVG which the CSS is targeting isn't actually in f-button but rather it's provided via a slot. Normally I'd create a new class and apply it to the SVG.

Any help on this would be appreciated.

[dandel10n]

I face the same problem in f-header and as a quick fix just overwrote styles with bigger specificity. But I will have a look now to find a proper fix

[dandel10n]

I think because we have specific sizes for icon buttons now, we can add size to the buttons like

.o-btn--icon.o-btn--sizeLarge {
    width: 56px;
    height: 56px;

    svg {
        width: 21px;
        height: 21px;
    }
}
.o-btn--icon.o-btn--sizeMedium {
    width: 48px;
    height: 48px;

    svg {
        width: 18px;
        height: 18px;
    }
}

I need to test it with different icons to see if it makes sense

[dandel10n]

I will make a PR shortly with my suggested fix

[DamianMullins]

Thanks, @dandel10n.