Can we use styling hooks on lightning-progress-indicator ? Or how to change background color of steps

cssldslightning-web-componentspathslds

I have been trying to modify the standard color for the 'completed' steps on the lightning-progress-indicator LWC (path type): https://developer.salesforce.com/docs/component-library/bundle/lightning-progress-indicator/example

I have a custom LWC that contains a lightning-progress-indicator with dinamically generated lightning-progress-step.

Custom LWC HTML:

<template>
<lightning-progress-indicator current-step={currentStep} type="path" variant="base">
        <template for:each={steps} for:item="step">
            <lightning-progress-step label={step.label} value={step.value} key={step.label} ></lightning-progress-step>
        </template>
</lightning-progress-indicator>

Custom LWC JS:

import { api, LightningElement } from 'lwc';
import getStepsForPath from '@salesforce/apex/Controller.getStepsForPath';
export default class ProgressIndicatorPathTypeWithIteration extends LightningElement {

steps;
currentStep;

connectedCallback() {
    getStepsForPath({})
        .then(result => {
            if (result) {
                let stepsResult = JSON.parse(result);
                for(let step of stepsResult) {
                    if(step.isCurrent) {
                        this.currentStep = step.value;
                        break;
                    }
                }
                this.steps = stepsResult;
            }                
        })
        .catch(error => { });
   }
}

Custom LWC CSS:

:host {    
    --slds-c-path-color-background: var(--lwc-colorBackgroundAltInverse) !important;
    --slds-c-path-link-color-background: var(--lwc-colorBackgroundAltInverse) !important;
    --slds-c-path-nav-color-background: var(--lwc-colorBackgroundAltInverse) !important;
    --slds-c-path-item-color-background: var(--lwc-colorBackgroundAltInverse) !important;
    --slds-c-path-color-background-hover: var(--lwc-colorBackgroundAltInverse) !important;
    --slds-c-path-link-color-background-hover: var(--lwc-colorBackgroundAltInverse) !important;
    --slds-c-path-nav-color-background-hover: var(--lwc-colorBackgroundAltInverse) !important;
    --slds-c-path-item-color-background-hover: var(--lwc-colorBackgroundAltInverse) !important;
}

All of the css in :host or any custom class is completely ignored. How can I change the background color of the steps inside the progress indicator component?

Best Answer

For type="base" use the progressBarColorBackgroundFill design token to change the default color of the Progress indicator.

CSS

.custom-css {
  --lwc-progressBarColorBackgroundFill: green;
}

HTML

<template>
    <lightning-card>
        <lightning-progress-indicator class="custom-css" current-step="3" type="base" has-error="true" variant="base">
            <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
            <lightning-progress-step label="Step 2" value="2"></lightning-progress-step>
            <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
            <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
        </lightning-progress-indicator>
    </lightning-card>
</template>

UPDATE: The above example is for type="base" and the below example is for type="path" for progress indicator.

For type="path" use the colorBackgroundPathComplete and colorBackgroundPathCompleteHover design token to change the default color of the progress indicator.

CSS

.custom-css {
  --lwc-colorBackgroundPathComplete:#5a1ba9;
  --lwc-colorBackgroundPathCompleteHover:#7526e3;
}

HTML

<template>
    <lightning-card>
        <lightning-progress-indicator class="custom-css" current-step="3" type="path" has-error="true" variant="base">
            <lightning-progress-step label="Step 1" value="1"></lightning-progress-step>
            <lightning-progress-step label="Step 2" value="2"></lightning-progress-step>
            <lightning-progress-step label="Step 3" value="3"></lightning-progress-step>
            <lightning-progress-step label="Step 4" value="4"></lightning-progress-step>
        </lightning-progress-indicator>
    </lightning-card>
</template>

Related Solutions

How to show only a certain amount of steps on progress-indicator

the SLDS Blueprints have an example for handling this type of scenario:

in a nutshell, you can set a max width to your path component alongside a CSS overflow Property, that way, you can scroll through a set number of steps in your path indicator.

example css properties:

max-width: some-width;
overflow-x: auto;

Set consistent styling across many LWCs using styling hooks

I would avoid loadStyle "workaround" as it's essentially going around the design of LWC and there's no guarantee that behavior won't change or be blocked in a future update.

Instead, you can create a single css file that leverages these styling hooks and share it across all your LWCs.

Share CSS Style Rules

cssLibrary
- cssLibrary.css
- cssLibrary.js-meta.xml

/* define the styling hooks as you'd like */
:host {
    --slds-c-badge-color-background: #0c9dda;
    --slds-c-badge-text-color: #c21010;
    --slds-c-button-brand-color-background: orange;
    --slds-c-button-brand-color-border: orange;
  }

Then, in your custom LWC - you import the css

@import 'c/cssLibrary';

<template>
    <div class="slds-badge">Traveler</div>
    <div class="slds-badge">Welcoming</div>
    <lightning-button label="click me" variant="brand"></lightning-button>
</template>

You didn't mention community, bu figured I'd point out the --dxp styling hooks for Lightning Web Runtime (LWR) Sites, where you can set a single hook that affects both base & custom Lightning Web Components throughout.

<style>
  /**
   * Scoped to the root of the document and all its descendant elements.
   */
  :root {
    --sds-c-button-color-background: peachpuff;
  }
 
  /**
   * Scoped to any element with the class applied and all its descendant elements
   */
  .container {
    --sds-c-button-color-background: peachpuff;
  }
</style>

Though it does mention

We recommend using --dxp styling hooks to make general changes across the components in you site. But if the --dxp branding defaults don’t provide exactly what you need, you can use --sds styling hooks to fine-tune the appearance of individual components where necessary.

Best Answer

Related Solutions

How to show only a certain amount of steps on progress-indicator

Set consistent styling across many LWCs using styling hooks

Related Topic