Skip to content

[Bug]: Step Label implementation in Steps component #349

@AregSoft

Description

@AregSoft

Component

Steps

Is this a regression?

None

Describe the bug

The step label within the Steps component is currently implemented as a custom button regardless of whether an linear prop is provided. This overcomplicates the component and applies unnecessary button styling and accessibility attributes when the step is not meant to be interactive.

This issue aims to refactor the step label implementation to use the dedicated Label component. The label should only be wrapped in an interactive element if an onChange prop is provided to the Steps component, making the step interactive.

To Reproduce

  1. Set up the component: Create an instance of the Steps component with at least three <Step> children.

  2. Omit the interaction prop: Do not pass an linear prop to the main Steps component.

  3. Inspect the DOM: Render the component and use browser developer tools to inspect the HTML structure of the step labels.

The step label text is wrapped within an <button> in the DOM.

Expected behavior

  1. The step label text for all steps should be contained within the custom Label component if onChange prop is not provided.

Screenshots

No response

Package version

v3.0.0

Desktop

. OS:
. Browser & version:
. Additional Information:

Smartphone

. Device:
. OS:
. Browser & version:
. Additional Information:

Exception or Error

Additional context

No response

Metadata

Metadata

Assignees

Labels

Type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions