StepSequenceItem line max-width property

[YariMVSage]

trafficstars

Desired behaviour

The UX/UI team has asked us to reduce the length of the line that appears before text in StepSequenceItem component and center all StepSequenceItem components. Trying to do so through CSS is a little bit tricky and we are not getting the expected results. We would like to have a property in the component to set the max-width of this line in an easier way

Current behaviour

Right now the StepSequenceItem component occupies all available space, and if we short the line through CSS then a long white space appears, we have tried to adjust it but if we do so, the line disappears.

Suggested Solution

No response

CodeSandbox or Storybook URL

https://codesandbox.io/s/hungry-hooks-2tq2u

Anything else we should know?

No response

Confidentiality

• [X] I confirm there is no confidential or commercially sensitive information included.

[nicktitchmarsh]

Hi @YariMVSage, You can use Box to adjust the layout of other components. Please see this sandbox and let us know if this solves your issue https://codesandbox.io/s/jovial-rui-uupns?file=/src/index.js:543-612

[samtjo]

@harpalsingh - is this something we'd like to introduce to the StepSequence component (https://carbon.sage.com/?path=/docs/step-sequence--default-story) - the ability to change the length of the lines between the items?

[Parsium]

Hi @harpalsingh do you have any updates on this?

[edleeks87]

@harpalsingh and @ljemmo any thoughts on this?

[YariMVSage]

Hi excuse me this request belongs to an old UX design, we don't need it anymore

[Parsium]

Thanks for letting us know @YariMVSage 👍🏼