Components: Fix the icon button level prop

[youknowriad]

This PR introduces a level prop for the IconButton instead of using the children prop for this purpose. Children can contain components etc... I think it's not suited for this.

Also, in #429 I'm using the children prop to display text next to the icon which is more appropriate IMO.

[jasmussen]

Took the liberty of tweaking the right margin of the number. I didn't notice it previously but it was slightly off. This looks better. Nice work! 👍

[aduth]

My original thinking was that since IconButton accepts arbitrary props to apply to the element, the data-level prop could be passed at the toolbar render than accepted as a level prop explicitly in the IconButton component itself.

[youknowriad]

@aduth I'm not sure I understand? Could you clarify?

[aduth]

level is not a natural concept of a generic IconButton component. Instead of rendering:

<IconButton level="1" />

And the implementation of IconButton understanding the incoming level prop, we could do:

<IconButton data-level="1" />

And IconButton doesn't need to know about that prop, but will pass it down through to the rendered button anyways because of the treatment of the additionalProps spread.

[youknowriad]

Tks for the explanation @aduth you raise a good point and it should be addressed now.

[aduth]

LGTM 👍

[aduth]

Likely no difference since styles ensure there's no impact on layout when empty, but this should probably only be applied if the control actually has a data-level attribute:

&[data-level]:after {