Steps: Cannot style active step in unstyled mode

[girardinsamuel]

Describe the bug

Hi,

I am using Steps component in unstyled mode and I am trying to define styles. I managed to style the component, but not to style the active step (like putting a different background color).

Here is the code for the theme :

const Tailwind = {
    steps: {
            // ... other styles
            step: ({ props, state }) => ({
                className: clsx(
                    'flex items-center justify-center',
                    'text-zinc-950 dark:text-white border border-zinc-950/10 dark:border-white/10 w-[2rem] h-[2rem] leading-2rem text-sm z-10 rounded-full',
                    {
                        'bg-gray-500': props.activeIndex !== ?,
// here I don't know what I need to write to check if active, I don't have access to context.index ?
                        'bg-green-500': props.activeIndex == ?,
                    }
                ),
            }),
}

and the basic component usage :

import { useState } from 'react'
import { Steps } from 'primereact/steps'

export default function MyComponent() {
    const [activeIndex, setActiveIndex] = useState(0)
    const items = [
        {
            label: 'Personal Info'
        },
        {
            label: 'Reservation'
        },
        {
            label: 'Review'
        }
    ];

    return (
            <Steps model={items} activeIndex={activeIndex} />
    )
}
        

It seems that in steps theme we have access to props and state but I cannot manage to get a conditional expression to check if step is active or not...

In the demo, the active style exists but I don't know how to create it.
What is the solution 🙏 ?
Thank you in advance,

Reproducer

No response

PrimeReact version

10.7.0

React version

18.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[gcko]

@melloware The code for Steps does not make a distinction between an whether a step is currently active or not.

Functionally, it should be exactly the same as how it is handled in TabView.js for each tab.

Specifically, the following lines should be adapted for use in the Steps component: https://github.com/primefaces/primereact/blob/master/components/lib/tabview/TabView.js#L51-L83 and https://github.com/primefaces/primereact/blob/master/components/lib/tabview/TabView.js#L107-L126

[melloware]

@gcko i agree. Do you want to take this one?

[gcko]

@melloware sure I can take a look at implementing the functionality