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
Merged
Merged
[Joy] Add Sheet
doc
#32820
Changes from 19 commits
Commits
Show all changes
22 commits
Select commit
Hold shift + click to select a range
26675f2
[Joy] Create a page for Sheet doc
hbjORbj 587e05c
Add SheetUsage example
hbjORbj 684326d
Add SimpleSheet example
hbjORbj e2f7851
Run prettier
hbjORbj 78b267f
copywriting adjustments
danilo-leal 34f61e3
[Joy] Create a page for Sheet doc
hbjORbj 739988b
copywriting adjustments
danilo-leal 0fe7b4c
Add more demos and improve
hbjORbj ab8b77d
Add title "Basic"
hbjORbj 5c5bc1e
Address Jun's feedback
hbjORbj 1f0c5e2
Apply suggestions from code review
siriwatknp 1b85fe4
Remove elevation prop
hbjORbj a5e723e
Remove all uses of elevation prop in Sheet
hbjORbj c56ef3a
Run prettier
hbjORbj 74b2705
Remove unused import
hbjORbj bf8ed0d
copywriting and demo tweaks
danilo-leal e5ce4e5
fix copywriting
danilo-leal 937e941
Use common component called JoyUsageDemo
hbjORbj 85884dc
Re-add Danilo's demo
hbjORbj 77ed108
Jun's review
danilo-leal 75cfd0b
Jun's review
danilo-leal 9ca3ca0
Jun's review
danilo-leal File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
import * as React from 'react'; | ||
import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo'; | ||
import Sheet from '@mui/joy/Sheet'; | ||
|
||
export default function SheetUsage() { | ||
return ( | ||
<JoyUsageDemo | ||
componentName="Sheet" | ||
data={[ | ||
{ | ||
propName: 'variant', | ||
knob: 'select', | ||
defaultValue: 'plain', | ||
options: ['plain', 'outlined', 'soft', 'solid'], | ||
}, | ||
{ | ||
propName: 'color', | ||
knob: 'color', | ||
defaultValue: 'neutral', | ||
options: ['neutral', 'primary', 'danger', 'info', 'success', 'warning'], | ||
}, | ||
]} | ||
renderDemo={(props) => ( | ||
<Sheet | ||
{...props} | ||
sx={{ | ||
width: 250, | ||
height: 200, | ||
m: 1, | ||
display: 'flex', | ||
alignItems: 'center', | ||
justifyContent: 'center', | ||
}} | ||
> | ||
Sheet | ||
</Sheet> | ||
)} | ||
/> | ||
); | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import Sheet from '@mui/joy/Sheet'; | ||
import * as React from 'react'; | ||
|
||
export default function SimpleSheet() { | ||
return ( | ||
<Sheet variant="outlined" sx={{ p: 4 }}> | ||
danilo-leal marked this conversation as resolved.
Show resolved
Hide resolved
|
||
Hello world! | ||
</Sheet> | ||
); | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import Sheet from '@mui/joy/Sheet'; | ||
import * as React from 'react'; | ||
|
||
export default function SimpleSheet() { | ||
return ( | ||
<Sheet variant="outlined" sx={{ p: 4 }}> | ||
danilo-leal marked this conversation as resolved.
Show resolved
Hide resolved
|
||
Hello world! | ||
</Sheet> | ||
); | ||
} |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
<Sheet variant="outlined" sx={{ p: 4 }}> | ||
danilo-leal marked this conversation as resolved.
Show resolved
Hide resolved
|
||
Hello world! | ||
</Sheet> |
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
--- | ||
product: joy-ui | ||
title: React Sheet component | ||
--- | ||
|
||
# Sheet | ||
|
||
<p class="description">Sheet is a useful surface component that implements the global variant feature.</p> | ||
|
||
## Introduction | ||
|
||
The `Sheet` container is a generic container. | ||
It's a sibling to the `Box` component with the difference being that it supports Joy UI's global variants out of the box. | ||
|
||
{{"demo": "SheetUsage.js", "hideToolbar": true, "bg": true}} | ||
|
||
{{"component": "modules/components/ComponentLinkHeader.js"}} | ||
|
||
## Component | ||
|
||
After [installation](/joy-ui/getting-started/installation/), you can start building with this component using the following basic elements: | ||
|
||
```jsx | ||
import Sheet from '@mui/joy/Sheet'; | ||
|
||
export default function MyApp() { | ||
return <Sheet>Holy sheet!</Sheet>; | ||
} | ||
``` | ||
|
||
### Basic usage | ||
|
||
The `Sheet` component, in addition to the variants, also has access to the `color` prop, allowing you to use every palette of the theme. | ||
|
||
{{"demo": "SimpleSheet.js"}} |
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
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
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import * as React from 'react'; | ||
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; | ||
import { demos, docs, demoComponents } from 'docs/data/joy/components/sheet/sheet.md?@mui/markdown'; | ||
|
||
export default function Page() { | ||
return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />; | ||
} |
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
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
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
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
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
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.
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
orSliderUsage.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!