1

While tinkering with Lightning base components, I realized that a linebreak - which may seem to have no effect at all - can actually have a visual impact. I don't have a strong HTML background so I'm asking here.

I was trying to a invoke lightning:tab component, with icon. This is the code and resulting visual:

<lightning:tab>
        <aura:set attribute="label">
            <lightning:icon iconName="utility:open" size="x-small" />Open
        </aura:set>
        Content1
    </lightning:tab>

Tab icon and label has no space inbetween

Then I add a linebreak after lightning:icon as below:

<lightning:tab>
        <aura:set attribute="label">
            <lightning:icon iconName="utility:open" size="x-small" />
            Open
        </aura:set>
        Content1
    </lightning:tab>

And now there's a space between icon and label, which now looks fine:

Tab icon and label has space inbetween

If I hadn't realized that, I was going to add slds-margin class attribute to each lightning:icon component, which is extra code.

Is this an expected behavior? If so, please redirect me to an online source where I can learn such HTML "secret spots".

| improve this question | | | | |
  • I believe you actually added a space, a line break would be represented as <br /> in your HTML – glls Feb 15 '18 at 20:26
  • You are correct, I used the wrong term for that. Thanks. – TSunar Feb 16 '18 at 13:54
2

All Lightning Design System components presume that you do not include any extra space before or after text/elements. HTML collapses multiple white space into a single white space if any are present. The following are rendered the same:

<a> Link Text </a>

<a>         Link        Text      </a>

<a>
  Link            Text
</a>

This is a problem with HTML in general, not specific to Lightning Components. When in doubt, do not introduce new white space, but instead use the appropriate padding CSS elements provided to you by SLDS.

Specific to Lightning Tabs, it is recommended that there be a space between the text, as demonstrated in the documentation:

 <aura:component>
    <lightning:tabset>
        <lightning:tab>
            <aura:set attribute="label">
                Item One
                <lightning:icon iconName="utility:connected_apps" />
            </aura:set>
        </lightning:tab>
    </lightning:tabset>
</aura:component>
| improve this answer | | | | |
  • Thanks for the detailed explanation. I see the "hidden" space after "Item One" now. I agree that sticking to SLDS margin and padding elements would be the better option. – TSunar Feb 16 '18 at 13:57
2

You are not actually adding a line break, in HTML a line break is <br /> and in the button icon, your OPEN text would actually appear in the line bellow, by simple hitting enter, or adding a space, you are adding a space in between the icon itself and the text

| improve this answer | | | | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.