Scope .icon to direct child of .has-icons-left|right

[langsys]

This is about Bulma. I consider it a bug.

Overview of the problem

This is about the Bulma CSS framework I'm using Bulma version 0.9.4

.control.has-icons-left|right .icon is overreaching, .icon should not match all descendants.

The bulma docs indicate the form field icon should be implemented with a span.icon as a direct child of the .control, but the css matches any descendant. This can be a problem if you are using a different icon system that also requires its element to have the class icon.

Proposal

Forms .control.has-icons-left .icon should be .control.has-icons-left > .icon

Fix in saas sass/form/tools.saas (line 183)

- 183 | .icon
+ 183 | >.icon

Tradeoffs

So long as people have implemented according to docs, this minor change should have no negative side-effects, but could fix many issues.

Testing Done

Specifically my use case was implementing an icon from my framework which generated html as:

<p class="control is-expanded has-icons-left">
  <input class="input" type="text" placeholder="Name"> 
  <span class="icon is-small is-left"><i class="icon material-icons" style="">person </i></span>
</p>

I have changed my own tools.sass and tested my entire app, saw no negative impact, but it did fix all the forms which was displaying like this:

And after fix:

Changelog updated?

No.

[jgthms]

I understand your issue here but this generated HTML seems to not happen often:

<span class="icon is-small is-left"><i class="icon material-icons" style="">person </i></span>

Here, the icon class on <i class="icon material-icons" style="">person </i> is causing your issue. Are you generating the HTML yourself? Because having an icon nested inside another icon will cause issues in any context.

[langsys]

@jgthms No the framework generates the icon html from the component.

Adding the child combinator makes bulma more accurate and less conflicting with other libraries. Seeing as how bulma is far from a complete UI kit, you can expect it to be used along side other libraries. Making it apply styles more restrictively makes it far more compatible. 🤷‍♂️