Skip to content
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.

Sign up for GitHub

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

[material-ui][docs] Revise the Accordion page #40284

Merged
merged 25 commits into from
Jan 5, 2024
Merged

[material-ui][docs] Revise the Accordion page #40284

Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
19ba8f6
document complementary components
anle9650 Dec 23, 2023
474bac3
Update AccordionUsage.js
anle9650 Dec 23, 2023
c80c90d
Create AccordionUsage.tsx
anle9650 Dec 23, 2023
3ac58dc
Update AccordionUsage.js
anle9650 Dec 23, 2023
25b36c0
add expand icons
anle9650 Dec 23, 2023
643df79
Update accordion.md
anle9650 Dec 23, 2023
2a10fda
push in revised page + updated demos
danilo-leal Dec 25, 2023
802eb4a
fix hydration issue
anle9650 Dec 25, 2023
af951a4
remove basic-usage links
anle9650 Dec 25, 2023
c974946
Update accordion.md
anle9650 Dec 25, 2023
c7756d1
Update docs/data/material/components/accordion/accordion.md
anle9650 Dec 25, 2023
2f465e0
Update accordion.md
anle9650 Dec 25, 2023
e0a8ed3
Update docs/data/material/components/accordion/accordion.md
anle9650 Dec 25, 2023
b6cfe65
Update docs/data/material/components/accordion/accordion.md
anle9650 Dec 25, 2023
32ecb12
Update docs/data/material/components/accordion/accordion.md
anle9650 Dec 25, 2023
803a8ac
Update docs/data/material/components/accordion/accordion.md
anle9650 Dec 25, 2023
f921db5
Update docs/data/material/components/accordion/accordion.md
anle9650 Dec 25, 2023
d08d64b
Update docs/data/material/components/accordion/accordion.md
anle9650 Dec 25, 2023
cb12522
Accordion's -> Accordion
anle9650 Dec 25, 2023
43372ea
Sam's review round two
danilo-leal Dec 26, 2023
7c55cba
add in more demos for other avaialble props
danilo-leal Dec 26, 2023
39aacc0
expanded -> defaultExpanded
anle9650 Dec 26, 2023
c09ada3
fix typos
danilo-leal Jan 4, 2024
422cdf4
transition demo tweaks based on Diego's guidance
danilo-leal Jan 4, 2024
d814a5e
Expanded typos
DiegoAndai Jan 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 43 additions & 0 deletions docs/data/material/components/accordion/AccordionExpandDefault.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

export default function AccordionExpandDefault() {
return (
<div>
<Accordion defaultExpanded>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
>
<Typography>Exapnded by default</Typography>
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2-content"
id="panel2-header"
>
<Typography>Header</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
</div>
);
}
43 changes: 43 additions & 0 deletions docs/data/material/components/accordion/AccordionExpandDefault.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

export default function AccordionExpandDefault() {
return (
<div>
<Accordion defaultExpanded>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
>
<Typography>Exapnded by default</Typography>
DiegoAndai marked this conversation as resolved.
Show resolved Hide resolved
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2-content"
id="panel2-header"
>
<Typography>Header</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
</div>
);
}
44 changes: 44 additions & 0 deletions docs/data/material/components/accordion/AccordionExpandIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

export default function AccordionExpandIcon() {
return (
<div>
<Accordion>
<AccordionSummary
expandIcon={<ArrowDownwardIcon />}
aria-controls="panel1-content"
id="panel1-header"
>
<Typography>Accordion 1</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ArrowDropDownIcon />}
aria-controls="panel2-content"
id="panel2-header"
>
<Typography>Accordion 2</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
</div>
);
}
44 changes: 44 additions & 0 deletions docs/data/material/components/accordion/AccordionExpandIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';

export default function AccordionExpandIcon() {
return (
<div>
<Accordion>
<AccordionSummary
expandIcon={<ArrowDownwardIcon />}
aria-controls="panel1-content"
id="panel1-header"
>
<Typography>Accordion 1</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ArrowDropDownIcon />}
aria-controls="panel2-content"
id="panel2-header"
>
<Typography>Accordion 2</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
</div>
);
}
59 changes: 59 additions & 0 deletions docs/data/material/components/accordion/AccordionTransition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Fade from '@mui/material/Fade';

export default function AccordionTransition() {
const [expanded, setExpanded] = React.useState(false);

const handleExpansion = () => {
setExpanded((prevExpanded) => !prevExpanded);
};

return (
<div>
<Accordion
expanded={expanded}
onChange={handleExpansion}
TransitionComponent={Fade}
TransitionProps={{ timeout: 200 }}
sx={{
'& .MuiAccordion-region': { height: expanded ? 'auto' : 0 },
'& .MuiAccordionDetails-root': { display: expanded ? 'block' : 'none' },
}}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
>
<Typography>Custom transition using Fade</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2-content"
id="panel2-header"
>
<Typography>Default transition using Collapse</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
</div>
);
}
59 changes: 59 additions & 0 deletions docs/data/material/components/accordion/AccordionTransition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import * as React from 'react';
import Accordion, { AccordionProps } from '@mui/material/Accordion';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Fade from '@mui/material/Fade';

export default function AccordionTransition() {
const [expanded, setExpanded] = React.useState(false);

const handleExpansion = () => {
setExpanded((prevExpanded) => !prevExpanded);
};

return (
<div>
<Accordion
expanded={expanded}
onChange={handleExpansion}
TransitionComponent={Fade as AccordionProps['TransitionComponent']}
TransitionProps={{ timeout: 200 }}
sx={{
'& .MuiAccordion-region': { height: expanded ? 'auto' : 0 },
'& .MuiAccordionDetails-root': { display: expanded ? 'block' : 'none' },
}}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
>
<Typography>Custom transition using Fade</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2-content"
id="panel2-header"
>
<Typography>Default transition using Collapse</Typography>
</AccordionSummary>
<AccordionDetails>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</Typography>
</AccordionDetails>
</Accordion>
</div>
);
}
57 changes: 57 additions & 0 deletions docs/data/material/components/accordion/AccordionUsage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
import * as React from 'react';
import Accordion from '@mui/material/Accordion';
import AccordionActions from '@mui/material/AccordionActions';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Button from '@mui/material/Button';

export default function AccordionUsage() {
return (
<div>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1-content"
id="panel1-header"
>
Accordion 1
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</AccordionDetails>
</Accordion>
<Accordion>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel2-content"
id="panel2-header"
>
Accordion 2
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</AccordionDetails>
</Accordion>
<Accordion defaultExpanded>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel3-content"
id="panel3-header"
>
Accordion Actions
</AccordionSummary>
<AccordionDetails>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
malesuada lacus ex, sit amet blandit leo lobortis eget.
</AccordionDetails>
<AccordionActions>
<Button>Cancel</Button>
<Button>Agree</Button>
</AccordionActions>
</Accordion>
</div>
);
}
Loading