New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Joy] Add Sheet
doc
#32820
[Joy] Add Sheet
doc
#32820
Conversation
@danilo-leal @siriwatknp |
Added |
I agree! @siriwatknp Should we add some other examples other than the playground? Do you have ideas? |
May be not in this PR since the variant override feature is not done. |
@hbjORbj I wonder if we remove the elevation prop from the sheet. I afraid that developers might be confused because the behavior of the elevation in Joy is different from Material-UI. We should have lean API as much as possible. The shadow is can be added by the sx prop. If you are agree with this, please remove the prop from the implementation. |
Hm... I'm not sure about it, I don't think that the point of the default value should be to showcase the component well enough but rather what would be the most common use case for the component in real apps. As the Sheet is a generic container/wrapper component, I'd bet that in most cases, using it plainly, without any borders or lighter backgrounds, would be the most common. But of course, this is my position now, we could change as we get different experiences :) |
@danilo-leal Gottcha gottcha 👍 |
@@ -0,0 +1,244 @@ | |||
import * as React from 'react'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I created a reusable component for showing the usage playground. Please take a look at ChipUsage.js
or SliderUsage.js
for how to use.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure, done!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 Looks great. left one comment to add color
prop to the demo because the description mention the color
prop but I don't see it on the demo (I got confused at first).
The `Sheet` component, in addition to the variants, also has access to the `color` prop, allowing you to use every palette of the theme.
Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com>
Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com>
Co-authored-by: Siriwat K <siriwatkunaporn@gmail.com>
Merging this one for now! It's good enough for a first pass, nice work you two! |
Preview: https://deploy-preview-32820--material-ui.netlify.app/joy-ui/react-sheet/