Stepper component custom theming support

[buildxyz]

Hi I purchased cdbreact-pro because I was interested in the stepper component` but I don't see any exposed props or documentation on how to override the theme to change the colors of the steps.

I can use styled components to override CDBStep like this:

const StyledStep = styled(CDBStep)`
    display: table-cell;
    text-align: center;
    position: relative;

    & .default-node {
        background-color: blue !important; 
    }
`;

But since the color of step element changes depending of if the element is active/complete/incomplete, my step icon just stay blue indefinitely.

I figure there must be an easy way to override the theme of components as this is a reusable UI component library. Maybe I missed the docs on general theming support? So I thought I would ask before I start digging into the source code or just develop my own stepper component.

Any help is appreciated!

[Speedwares]

Hey @buildxyz-git thanks for opening an issue about this. We have a mainColor prop which is exposed in the CDBStepper component for updating the theme and this is also passed down to the CDBStep Component. It accepts a string. So you can pass your color code here.

Eg

<CDBStepper direction="vertical"  mainColor="#342ae2">
       <CDBStep
         id={1}
         icon="pencil-alt"
         name="Basic Information"
         handleClick={() => handleNextPrevClick(1)}
         active={active}
         component={<Step1 handleNextPrevClick={handleNextPrevClick} />}
       />
   
     </CDBStepper>

This was missed in our documentation and we will be updating it to cover this. Thanks for pointing this out and let me know if this worked for you.

[buildxyz]

I have tried that, it just seems to override the tooltip color?

Ideally I would like to control all the colors in the step component, so a different color for active/complete/incomplete and I would like change groups of step to different colors to denote a new section. My application has many steps :)

[Speedwares]

Gotcha! We currently don't have those props exposed but rest assured we will be adding them in the coming days. You can leave this issue open as a reference so you can be notified once it's shipped.

To be sure I properly understand your use case. when you say

I would like change groups of step to different colors to denote a new section.

Do you mean different colors for different CDBStepper components or CDBStep? Because we will be exposing this prop only on the CDBStepper level and not on each individual CDBStep.

[buildxyz]

So I specifically mean CDBStep color groups within the same CDBStepper, Sounds like this won't be possible? Being able to dynamically color each step in JSX would be a valuable use case imo. So these would likely be props introduced to the CDBStep component.

Since the library implements styled components, maybe we can pass it our own custom ThemeProvider?

[Speedwares]

Ok I see what you mean here. We should be able to implement this as well. Although not a very common use case. I do agree it will be useful and will make the stepper more flexible as well.

…

On Tue, 11 Apr 2023 at 22:19, buildxyz ***@***.***> wrote: So I specifically mean CDBStep color groups within the same stepper, Sounds like this won't be possible? Being able to dynamically color each step in JSX would be a valuable use case imo. So these would likely be props introduced to the CDBStep component. Since the library implements styled components, maybe we can pass it our own custom ThemeProvider <https://styled-components.com/docs/advanced>? — Reply to this email directly, view it on GitHub <#25 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ADRQHQRYPKVQFNCJMMYJHSLXAXDF7ANCNFSM6AAAAAAW2YHPOE> . You are receiving this because you commented.Message ID: ***@***.***>

[Speedwares]

Also updated as well in cdbreact-pro v1.7.7