website: Update Stepper documenation #1161
Conversation
adamhock
requested review from
a team,
mayank99 and
elephantcatdog
and removed request for
a team
| There are two different styles of stepper, depending on the amount of steps required to complete the process. | ||
|
|
||
| ### Short Stepper | ||
|
|
There was a problem hiding this comment.
Should an example for a "short" stepper be shown here even if it's similar (if not identical) to the main example at the top of the page?
There was a problem hiding this comment.
I don't know what would be best to do here, and this will likely pop up in future #961 PRs. I would like to hear @iTwin/itwinui thoughts on this.
If we don't get a clear direction from the comments, just do what you think is best and we can make sweeping changes once we make it to the end of documentation site content updates.
There was a problem hiding this comment.
I think the main example should be "the best version" of the component. The style of the stepper is defined by a prop and not automatically so I think we should have separate example of Short stepper just to say that this style is default.
There was a problem hiding this comment.
An example for short stepper has been added
There was a problem hiding this comment.
Could you do main and short example a bit more different? Maybe make short stepper to have only 3 steps or smth.
There was a problem hiding this comment.
The short example now only has 3 steps and the step labels are different from the main example
|
|
||
| The user may click on previous steps to go back. [Tooltips](tooltip) can also be implemented to give more information about a particular step. | ||
|
|
||
| Designers should confirm the display is acceptable due to the number of steps and labels at various resolutions. If text wrapping occurs or the stepper's visual quality decreases significantly when the window is re-sized, use the long stepper instead (see below). |
There was a problem hiding this comment.
Review this paragraph - is kinda confusing to read it.
Also use links to sections and not (see below)
|
|
||
| ### Short Stepper | ||
|
|
||
| The default "short" stepper example is suggested for processes with four (4) steps or less. Each step is named under the circle. This stepper is suggested if the step names can be summarized with very short labels. For example, instead of “Complete Billing Information”, simply use “Billing.” |
There was a problem hiding this comment.
Move usage guidelines to Usage section. You could also add example layout there.
There was a problem hiding this comment.
The usage guidelines have been moved to the usage section. The layout example is a WIP
There was a problem hiding this comment.
The layout example has been updated. I decided to go with a simpler layout than the screenshots provided, but there's a small bug I'm running into with inputs that I'm tackling
There was a problem hiding this comment.
You can add state management for inputs.
Or leave it as is because it's not a complete example.
There was a problem hiding this comment.
there is no need for state. you can fix the bug by using a different key for the different inputs
|
|
||
| 3. **Content** | ||
|
|
||
| 4. [**Buttons**](button): A [call-to-action button](button#call-to-action) for progress & one or two [default](button#default) buttons for canceling and/or going back one step. If the user has not completed a required task, the call-to-action button may be disabled. If the stepper is in a full screen page, the buttons can be placed within a sticky footer. |
There was a problem hiding this comment.
The hyperlinks for CTA and default buttons coincide with #1158
Changes
Testing
N/A
Docs
N/A