[SalesForce] Styling an LWC component with a lightning-tab to use the slds-has-success style

I have a LWC component that includes a set of tabs using the standard "lightning-tabset" and "lightning-tab" metaphor. When the actions in a specific tab have been completed, I want to style the tab with a green checkbox icon, to indicate that it is complete. It doesn't appear this is possible, the only conditional icon I have found is the part of the show-error-indicator attribute. I found, as a possible alternative, the "slds-has-success" class that according to the lightningdesignsystem documentation should style the tab with a green background. Even with my prototype that hard codes the class on a tab, the background color does not change, and it appears that class is overridden when the lwc renders.

This is my prototype code:

<template>
<lightning-tabset>
    <lightning-tab label="Tab 1" value="tab1"  onblur={tabdeselect} tabindex="0" icon-name="utility:travel _and_places"  >
            <c-tab-container tab-name="Tab 1" onvisibilitychange={vischange} onblur={handleBlur} ></c-tab-container>
    </lightning-tab>
    <lightning-tab label="Tab 2" value="tab2"  onblur={tabdeselect} tabindex="0" icon-name="utility:user"  show-error-indicator={tab2haserror} > 
        <c-tab-container tab-name="Tab 2" onblur={handleBlur}></c-tab-container>

    </lightning-tab>
</lightning-tabset>
</template>

The tab-container components currently just have a div with a text element showing the tab number.

Best Answer

Lightning Web Components introduced Shadow Dom. Therefore by standard you are not able to additionally modify ready to use LWC components in different way than by using attributes of the component (imagine that it is something like API for the component).

You can overcome your struggles in two ways:

Use icon-name (like you already do) or end-icon-name. When content under your tab is accepted, change attribute under end-icon-name to utility:success using js.
Use component blueprints from LightningDesignSystem and write your tabs 'manually'. You will have all the posibilities that you can imagine :)

Related Solutions

[SalesForce] Lightning: Get sobject tab icon

For any of those who may be looking for an even more generic solution, or possibly a use case where you are simply using the SLDS styles in a VF page, I have a method which returns the lightning style class for the wrapper of the tab icon, in addition to its Lightning png icon to fill it. This is supported in a managed package, and will also pull custom icons that are defined by customers/packages installed. If an object is passed in that does not have a tab definition, it simply returns the SLDS Custom icon as a default. My use case required dynamic loading of the icon depending on a configuration for the object, so a dynamic IMG binding was much more realistic to switch up on the fly than repainting an SVG.

Method that takes in sObject Name and returns a map of properties (iconStyle, iconURL)

/***
 * Explores the schema of the soject passed in and finds lightning icon style and image url for sObject
 * If nothing is found, defaults to the custom icon
 *
 * @param   sObjectTypeName       the sObject to find the icon for
 * @return  Map<String,String>    Map of properties about the icon to be consumed by the front end.
 *                                Right now, returns values for keys: iconStyle,iconURL
 */
global static Map<String,String> retrieveIconForObject(String sObjectName) {    
    String iconStyle;
    String iconURL;
    String iconTag;
    Map<String,String>                iconPropertyMap = new Map<String,String>();
    List<Schema.DescribeTabSetResult> tabSetDesc      = Schema.describeTabs();
    List<Schema.DescribeTabResult>    tabDesc         = new List<Schema.DescribeTabResult>();
    List<Schema.DescribeIconResult>   iconDesc        = new List<Schema.DescribeIconResult>();

    for(Schema.DescribeTabSetResult tsr : tabSetDesc){
       tabDesc.addAll(tsr.getTabs()); 
    }
    for(Schema.DescribeTabResult tr : tabDesc) {
        if( sObjectName == tr.getSobjectName() ) {
            system.debug(tr.getIcons());
            if(!tr.getIcons().isEmpty()){
                iconDesc.addAll(tr.getIcons());
            }else{
                if( tr.isCustom() == true ) {
                    iconStyle = 'slds-icon-standard-custom';
                    iconURL   = '/img/icon/t4v35/standard/custom_120.png';
                } else {
                    iconStyle = 'slds-icon-standard-' + sObjectName.toLowerCase();
                    iconURL   = '/img/icon/t4v35/standard/' + sObjectName.toLowerCase() + '_120.png';
                }
            }
        }
    }
    for (Schema.DescribeIconResult ir : iconDesc) {
        if(ir.getTheme() =='custom' && !ir.getContentType().startsWith('image/svg')){//custom icon thats not an svg
            iconTag   = 'custom';
            iconURL   = ir.getURL();
            iconStyle = 'slds-icon-standard-custom';
            break;
        }else if(ir.getWidth() == 120 && ir.getTheme() =='theme4' && ir.getContentType() == 'image/png'){//large lightning icon image
            if(ir.getURL().contains('/custom/')){ //Icon is from the Custom Sprite
                iconTag    = ir.getURL().substringBetween('custom/','.png').substringBefore('_');
                iconURL    = '/img/icon/t4v35/custom/' + iconTag + '_120.png';
                iconStyle  = 'slds-icon-custom-'+ iconTag;
                break;
            }else if(ir.getURL().contains('/standard/')){//Icon is from the Standard Sprite
                iconTag    = ir.getURL().substringBetween('standard/','.png').substringBefore('_');
                iconURL    = '/img/icon/t4v35/standard/' + iconTag + '_120.png';
                iconStyle  = 'slds-icon-standard-'+ iconTag;
                break;
            }
        }
    }
    //if no icons are found, just default to the Custom lightning icon
    if(iconStyle == null){
        iconStyle = 'slds-icon-standard-custom';
        iconURL   = '/img/icon/t4v35/standard/custom_120.png';
        iconTag   = 'No Lightning Icon Found';
    }
    //return a map with our properties for the front end
    iconPropertyMap.put('iconStyle',iconStyle);
    iconPropertyMap.put('iconURL',  iconURL);

    return iconPropertyMap;
}

Example usage for binding:

<span data-bind="css: selectedMapObjectIconClass" class="slds-icon_container slds-avatar">
  <img data-bind="attr:{src: selectedMapObjectIconUrl}"></img>
</span>

[SalesForce] Styling of Lightning UI-Component radioButton does not match SLDS Style

The "ui" elements are not styled after Lightning. If you want a Lightning style, you'd use "lightning" elements. In this case, it looks like you want the lightning:radioGroup to implement the desired look and feel. Note that you no longer have to create a bunch of radio elements, simply setting the "options" attribute with the desired values is sufficient.

Example From Documentation

<aura:component>
    <aura:attribute name="options" type="List" default="[
    {'label': 'apples', 'value': 'option1'},
    {'label': 'oranges', 'value': 'option2'}
    ]"/>
    <aura:attribute name="value" type="String" default="option1"/>
    <lightning:radioGroup 
        aura:id="mygroup"
        name="radioButtonGroup"
        label="Radio Button Group"
        options="{! v.options }"
        value="{! v.value }"
        onchange="{! c.handleChange }"
        required="true" />
</aura:component>

Best Answer

Related Solutions

[SalesForce] Lightning: Get sobject tab icon

[SalesForce] Styling of Lightning UI-Component radioButton does not match SLDS Style

Example From Documentation

Related Topic