[HELP] How to use icon-text property ?

[Tstassin]

Hello,

Using react-bulma-components v4.0.3 (and first of all thank you for the amazing work)

How am i supposed to use the icon-text property from Bulma 0.9.2 ?
Looking into the repo I found references to a text boolean prop for the icon component, but I can't seem to make it work, and I find it a strange way of doing it

<Icon text>
  <Icon>..</Icon>
  <Element>..</Element>
</Icon> 

Using it this way outputs both iconand icon-text classnames to the parent Icon element, which renders buggy...
From my understanding the parent Component should be of type span/Element, not Icon..

[kennethnym]

Instead of using <Element> you should use span instead. You generally don't need <Element> at all in your project. Hope this helps.

Edit: #337 address this issue.

[kennethnym]

Aha - got it. If you enable text prop both icon and icon-text are present when only icon-text should exist. I tried removing the icon class in the codesandbox you provided via the inspector and it worked. I will open a PR for it.

[Tstassin]

Those props are available for all bulma components we export.

I understand that and use all these props a lot with every component, but if I understand you correctly would you advice when you only need something like <div className="has-text-centered">..</div> to write it like that instead of <Element textAlign='center'>..</Element> ?
Going back and forth between bulma classnames and the whole props you expose makes my head explode :-)

[kennethnym]

And regarding your question - yes, that is a valid use case. I didn't think of that at all.

[Tstassin]

Aha - got it. If you enable text prop both icon and icon-text are present when only icon-text should exist. I tried removing the icon class in the codesandbox you provided via the inspector and it worked. I will open a PR for it.

Isn't it strange to handle the wrapping icon-text with a prop of <Icon />?
For consistency shouldn't it be better to have it like a derived child component export from the component ?

<Icon.Text>
  <Icon />
  <span>text</span>
</Icon.Text>

[kennethnym]

Very good idea! Will move this to a new discussion.