[docs] Update unstyled demos to not depend on @material-ui/core
#26869
Conversation
| @@ -74,13 +72,15 @@ function BadgeContent() { | |||
|
|
|||
| export default function UnstyledBadge() { | |||
| return ( | |||
| <Stack spacing={4} direction="row"> | |||
There was a problem hiding this comment.
Why not keep the Stack? It's meant as a CSS helper. It might where the limit between @material-ui/system and @material-ui/core is. Developers won't use it when they copy the demo.
There was a problem hiding this comment.
The goal was to eliminate any dependency on @material-ui/core. Once we have a dedicated doc for the unstyled components I think it would be strange that we have the @material-ui/core as a dependency here. Anyway, no strong opinion as as you mention it is a CSS helper, so I could revert this change.
There was a problem hiding this comment.
Interesting problem, not sure what would be best, no objection to moving forward with your approach.
- Stack break the system only dependency narrative
- Stack is superior to Box in this case
- Stack is not meant to be part of the examples, but to support the demo ("demo" is the whole file, "example" is one instance of the demo".
- Stack is not available in the system, maybe Grid, Typography, Stack should be in the system, generic style helpers unrelated to Material Design.
We could likely add the Stack back once migrated to the system?
There was a problem hiding this comment.
Stack is not available in the system, maybe Grid, Typography, Stack should be in the system, generic style helpers unrelated to Material Design.
This makes sense 👍 will leave the comment open for reference, and will keep the demo without the Stack component for now.
There was a problem hiding this comment.
What changed now? I remember also trying to remove unrelated components from demos and I think I was shut down.
To be clear: I'm very much in favor of removing unrelated components like Stack or Box because they make the learning curve steeper.
There was a problem hiding this comment.
Oops, the conversation got moved to #26869 (comment).
oliviertassinari
added
docs
|
@eps1lon I think that it depends on the perspective. There are multiple
possible views:
- Stack is imported from the core, but we want stronger isolation in
anticipation of a stronger isolation of the structure of the documentation
between MD and the system. It should be removed or moved inside the system.
- Stack reduces clutter in the source, allowing developers to focus on the
examples inside the demo. It's more descriptive/shorter than a Box with sx.
- Stack is a new piece of the demo that developers have to learn. Either we
want them to learn it and it's seen as beneficial, or we consider we don't,
and it's extra mental overhead.
I would personally vote for the version of being true to reality (sorted
desc by % of confidence):
- Stack is reducing the noise in the demo. Devs learning Stack is worth the
mental overhead. Isolation of the system from MD is better. Stack should be
in the system.
But it doesn't mean that it's the true version of reality.
|
For you. I guarentee that 99% of developers are more familiar with CSS than what a "Stack" component does. |
@eps1lon How about we use Twitter to resolve the question (what would yield the best DX in the demos)? At the end of the day, we are trying to be a proxy for what the community enjoy more. We can improve our intuition by asking them from time to time, e.g. when we have two distinct version of reality. Do you want to frame the question so that it would match your expectations of non biases in the poll? Otherwise, I can propose something. |
Co-authored-by: Olivier Tassinari <[email protected]>
These are already people following us not new learners.
I'm not. I try to give people the right tools to build good UIs. The web is for the end-user not the developer. |
Co-authored-by: Olivier Tassinari <[email protected]>
Preview: https://deploy-preview-26869--material-ui.netlify.app/components/slider/#unstyled