mi6 / mi6/ic-ui-kit

[ic-step]: Make `current` a separate boolean prop and consider renaming `stepType` prop to `state`

Open
#2,368 3 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

component: ic-step component: ic-stepper
Dominant language
TypeScript
Stars
53
Forks
63
Avg merge
2d 4h
Merged PRs (30d)
15

Description

## 💬 Description
At the moment, the `stepTypes` for stepper are: "active" | "completed" | "current" | "disabled". It's possible for a step to be both of these types, for example a step can be both current and active. Currently, it's on the user to control what type a step should be before and after it's been the current step. This includes logic that I assume a lot of users will be writing. We can improve `ic-stepper` by removing the need for this logic and introducing a separate `current` prop that works as a boolean.

In addition to this, we should consider changing the prop `stepType` to `state`. This likely requires further research but my opinion is that `state` is more reflective of what is changing on `ic-step`.

## 💰 Use value
Both of these changes will hopefully make `ic-stepper` more intuitive and better in terms of user experience.

## 📝 Acceptance Criteria

- [ ] `"current"` should be removed from the existing `stepType` prop
- [ ] There should be a new boolean prop called `current` which should take on the behaviour of the old "current" stepType prop
- [ ] Rename `stepType` prop to state

## 🧾 Guidance
Guidance may need to be written explaining the new `current` prop

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the ic-step and ic-stepper component implementations and their existing tests. Trace how stepType values, especially "current", are exposed and rendered, then review the component guidance. Done means current is a boolean prop, "current" is removed from the state prop, the rename to state is resolved, and tests and guidance reflect the final API.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.