Clay label doesn't support icons inside

[4lejandrito]

• I have searched the issues of this repository and believe that this is not a duplicate.

Is there an example you can provide via codesandbox.com?

https://codesandbox.io/s/nostalgic-diffie-yck1g

What are the steps to reproduce?

Create a ClayLabel with a ClayIcon + text inside.

What is the expected result?

The icon is on the left of the text.

We need this to support the labels in this Figma design.

Environment

Tech	Version
Clay	v3
React	16

[bryceosterhaus]

@4lejandrito we can get this added for the next release. How urgent of a need is this? Our next scheduled release is Feb 27th.

[4lejandrito]

Hi @bryceosterhaus,

It is not urgent.

Thanks!

[kresimir-coko]

@4lejandrito Hey, I've got a question about this issue. Currently the way ClayLabel works is that it allows the user to define the children of the component like. It also accepts a className prop that will allow the user to style the component however they want.

<ClayLabel className="custom-class">
    <ClayIcon spritemap="/icons.svg" symbol="repository" /> 
    
    Text...
</ClayLabel>

Why not leave the component as is and leave the responsibility on the user to add the icon and style it the way they want?

Otherwise can you specify what the expected behaviour of the ClayLabelWithIcon should be, eg. will the icon only be on the left side of the ClayLabel?

[4lejandrito]

Hi @kresimir-coko,

I agree with you that it is possible to achieve now. But I also think it is not expected to put an icon and a text inside and have them behave like "block" elements.

I think it would be much more natural to have them one next to the other. Same with any other kind of elements you put inside.

But it is up to you guys.

Thanks!

[kresimir-coko]

Alright, that helps clarify it a bit, thanks @4lejandrito