[joy-ui][Stepper] Add new Stepper components
#39688
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
siriwatknp
added
component: stepper
Netlify deploy preview@mui/joy: parsed: +1.94% , gzip: +1.46% Bundle size reportDetails of bundle changes (Toolpad) |
siriwatknp
requested review from
mnajdova and
zanivan
and removed request for
mnajdova and
zanivan
github-actions
bot
added
the
PR: out-of-date
zanivan
approved these changes
Nov 6, 2023
There was a problem hiding this comment.
Hey @siriwatknp this looks fantastic! A great addition to our catalog indeed.
I took the liberty to add a few adjustments to the component, to make it a bit lighter and denser to be more consistent with our current approach to sizes—I also added a few visual tweaks to the demos afterward.
Design-wise, it looks great! 🚀 🚀
mnajdova
reviewed
Nov 7, 2023
There was a problem hiding this comment.
Few things I noticed:
- Using
<Step oriention="vertical" />in vertical stepper does not have any effect. Is this expected? - On the playground, setting the stepper's orientation prop does not show any change in the code snippet
3. When first seeing the demos, the text for the medium size felt too big, but it could be just my perception
The customization demos look awesome!
github-actions
bot
removed
the
PR: out-of-date
mnajdova
approved these changes
Nov 10, 2023
| @@ -0,0 +1,107 @@ | |||
| --- | |||
| productId: material-ui | |||
There was a problem hiding this comment.
A quick fix d2cd42d. This was flagged in the SEO crawl. Bug: https://deploy-preview-39688--material-ui.netlify.app/joy-ui/react-stepper/#api
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
closes #38641
🖥️ Preview: https://deploy-preview-39688--material-ui.netlify.app/joy-ui/react-stepper/
Refs
Composition structure
Joy Steppers aims for 1-to-1 DOM mapping with an ordered list as explained in this article. So far, just 4 components that make sense to me (Material UI and Chakra UI have too much components):
ol)li)*For connector, Joy UI uses
::afterof each step and Typography for labels and texts which reduces a lot of components to maintain.Technical decisions
active,completed, andactiveare just classes without extra styles like Material UI to let developers own the customization.Customization improvements
Since Joy UI relies on global variant and CSS variables for customization of the active and completed states, it is more flexible and easier to customize.
By providing low-level customization, we can create various stepper designs and let developers copy the one closest to their use case.
Benchmark
Lines of code between Material UI and Joy UI