Step connector is not responsive

[volkyeth]

The step Connector breaks when the step title/label/description changes in size:

This makes it unusable with dynamic content unless you set a fixed width to the Steps component

[jeanverster]

Thanks for pointing this out! I noticed this recently too and have been meaning to fix it 😅 Will try get around to it asap!

[Rezaabdi78]

Hi, I've also encountered this problem on my project.

My solution was to override the style of connector as described in Custom Styles.

const CustomSteps = {
    ...StepsStyleConfig,
    baseStyle: (props) => {
        return {
            ...StepsStyleConfig.baseStyle(props),
            connector: {
                ...StepsStyleConfig.baseStyle(props).connector,
                position: "relative",
            },
        };
    },
};

and in the application it looks to be working fine:

[MatthewCushing]

Hi, I've also encountered this problem on my project.

My solution was to override the style of connector as described in Custom Styles.

const CustomSteps = {
    ...StepsStyleConfig,
    baseStyle: (props) => {
        return {
            ...StepsStyleConfig.baseStyle(props),
            connector: {
                ...StepsStyleConfig.baseStyle(props).connector,
                position: "relative",
            },
        };
    },
};

and in the application it looks to be working fine:

Unfortunately, I tried implementing your solution and I'm still receiving the same issue as seen below (with your solution implemented)

On initial page render (notice the line extends to the full width as if there is an additional unseen option)

When Client is selected, which adds an additional option to choose the evaluation type

Selecting Admin or Counselor, which removes the evaluation step, it now only extends half the page and also removes the line that existed on the initial page render

Also note that I'm using "custom" icons on everything past Step 1 (that never changes step number) with a simple span <span>2</span> as the "icon" because the numbers get wonky when adding and removing steps dynamically.

Lastly, if you (@jeanverster) are working on implementing a fix for this, a great cherry on top would be some simple animations to slide the step to the left or right (up and down if vertical) when adding and/or removing steps dynamically instead of "popping" them in. I also noticed that the number inside of the circle has a "grow" animation from 0 to 1 when dynamically created (this does not occur when setting your own icon, maybe an additional prop to allow or disallow animations so that you can wrap the icon prop with the transition animation as well?). This is nice except that the circle around the number does not follow suite and just pops in (the number does not have an exit transition). Would be nice if the circle also had either a "grow" or "opacity" transition animation for entering and exiting. I find it's hard for a user to notice an additional step has been added when they are instantly popped in, but a short and smooth transition animation catches your eye with movement and gives better UX.

On a final note, great work on this component. Was super ecstatic when I found this for Chakra as a 3rd party component that was really well done. I would definitely be interested in helping you out with this issue, but I'm on a set deadline for this project. If you still have not completed it or had time to start it when I finish, I'll be more than willing to jump on board and help out if you wanted to create separate tagged feature issues for what you agree would be nice features to add (All of the above are related to "dynamic" steps but would be a rather large group of additions for a single issue) :). Thanks!