Small and large buttons look wrong when in a button group

[aeons]

• Framework Version:
  3.0.0-alpha.3
• Flavor used:
  Default
• Operating System/Browser:
  Mac, Firefox, Safari and Chrome
• Code to reproduce:

<div class="button-group">
  <button>Horses</button>
  <button>are</button>
  <button>neat</button>
</div>

<div class="button-group">
  <button class="small">Horses</button>
  <button class="small">are</button>
  <button class="small">neat</button>
</div>

• Screenshots:

• Bug description:
  Buttons in a button group do not behave properly when they have either the class small or large.
• Additional information (Optional):

[Chalarangelo]

This is quite an interesting issue, I'll see if I can figure it out before the next release.

[Chalarangelo]

.button-group elements were never designed to work with .small and .large buttons. If you really want to make them compatible with that, you would have to tweak the _input_control.scss file to produce a selector with higher specificity or somehow get the mixins output before the .button-group rules in your final CSS (essentially, if you swap them in your CSS file, so that .small and .large come before .button-group, it will all work as they have the same specificity).

I will not be implementing this in the framework itself, as it will add quite a lot of overhead with the selectors, but swapping the order of selectors in the CSS should work just fine.

[aeons]

Cool, maybe a short note in the docs would make it clear that you should probably only use button-group with regular buttons?

[Chalarangelo]

Yup, I will add it soon!