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

Jump to bottom

[docs] Add accordion coming soon page #36279

Merged
merged 10 commits into from
Mar 28, 2023
Merged

[docs] Add accordion coming soon page #36279

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
db9d096
add accordion page
siriwatknp Feb 21, 2023
16e08ef
update content
siriwatknp Feb 21, 2023
48e3607
Apply suggestions from code review
siriwatknp Feb 24, 2023
98584fa
Merge branch 'master' of https://github.com/mui/material-ui into joy/…
siriwatknp Feb 27, 2023
0b04e19
update content
siriwatknp Feb 27, 2023
dd949e8
run docs:i18n
siriwatknp Feb 27, 2023
6393d7b
update content
siriwatknp Feb 27, 2023
a29896e
turn chip into primary and slightly format the content
danilo-leal Mar 21, 2023
7c3c2e6
Merge branch 'master' into joy/accordion-docs
siriwatknp Mar 28, 2023
44ff8b4
fix lint
siriwatknp Mar 28, 2023
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
50 changes: 50 additions & 0 deletions docs/data/joy/components/accordion/accordion.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
---
product: joy-ui
title: React Accordion component
githubLabel: 'component: accordion'
waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
---

# Accordion

<p class="description">The accordion component allows the user to show and hide sections of related content on a page.</p>
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved

:::success
Copy link
Member

@oliviertassinari oliviertassinari Mar 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a bit confused by the callout type. https://www.notion.so/mui-org/Callouts-and-their-usage-in-the-docs-7e709a02c72142cd8b1a0829861435c5 I would expect success as all is great, but the fact that it's not built-in makes me weigh a bit more toward info or even better warning to match/hint to the color in the side nav:

Screenshot 2023-03-21 at 20 19 35

Joy Accordion component is still **in development** but it should not block you from using Joy UI!
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved

The examples below demonstrate the featuring between Joy UI and popular headless libraries.
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
:::

If you need Joy UI Accordion, please upvote [this issue](https://github.com/mui/material-ui/issues/36281). It will help us prioritize the next component that we should work on.
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved

## Integration

Joy [`List`](/joy-ui/react-list/) components are perfect for building accordions because they are vertically stacked with the same size.
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved

- **List**: Wraps the accordions and set `component="div"` to remove it from the accessibility tree.
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
- **ListItemButton**: The accordion header that can toggle the visibility of the content.
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
- **ListItem**: The content container.
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved

### Radix UI
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved

siriwatknp marked this conversation as resolved.
Show resolved Hide resolved
- [installation](https://www.radix-ui.com/docs/primitives/components/accordion#installation)
- [documentation](https://www.radix-ui.com/docs/primitives/components/accordion)

<iframe src="https://codesandbox.io/embed/joy-ui-feat-radix-accordion-4n2p04?module=%2Fdemo.tsx&fontsize=14&hidenavigation=1&theme=dark&view=preview"
style="width:100%; height:360px; border:0; border-radius: 4px; overflow:hidden;"
title="Joy UI feat. Radix UI Accordion"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

### Headless UI
siriwatknp marked this conversation as resolved.
Show resolved Hide resolved

- [installation](https://headlessui.com/react/disclosure#installation)
- [documentation](https://headlessui.com/react/disclosure)

<iframe src="https://codesandbox.io/embed/joy-ui-feat-headless-ui-disclosure-g2mqpr?module=%2Fdemo.tsx&fontsize=14&hidenavigation=1&theme=dark&view=preview"
style="width:100%; height:360px; border:0; border-radius: 4px; overflow:hidden;"
title="Joy UI feat. Headless UI Disclosure"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>
6 changes: 5 additions & 1 deletion docs/data/joy/pages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,11 @@ const pages = [
{
pathname: '/joy-ui/components/surfaces',
subheader: 'surfaces',
children: [{ pathname: '/joy-ui/react-card' }, { pathname: '/joy-ui/react-sheet' }],
children: [
{ pathname: '/joy-ui/react-accordion', comingSoon: true },
{ pathname: '/joy-ui/react-card' },
{ pathname: '/joy-ui/react-sheet' },
],
},
{
pathname: '/joy-ui/components/navigation',
Expand Down
7 changes: 7 additions & 0 deletions docs/pages/joy-ui/react-accordion.js
View file
Open in desktop
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 * as pageProps from 'docs/data/joy/components/accordion/accordion.md?@mui/markdown';

export default function Page() {
return <MarkdownDocs {...pageProps} />;
}
5 changes: 5 additions & 0 deletions docs/src/MuiPage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,11 @@ export interface MuiPage {
* @default false
*/
newFeature?: boolean;
/**
* Indicates if the feature is in development.
* @default false
*/
comingSoon?: boolean;
}

export interface OrderedMuiPage extends MuiPage {
Expand Down
2 changes: 2 additions & 0 deletions docs/src/modules/components/AppNavDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,7 @@ function reduceChildRoutes(context) {
href={firstChild.pathname}
legacy={page.legacy}
newFeature={page.newFeature}
comingSoon={page.comingSoon}
plan={page.plan}
icon={page.icon}
subheader={subheader}
Expand Down Expand Up @@ -266,6 +267,7 @@ function reduceChildRoutes(context) {
href={page.pathname}
legacy={page.legacy}
newFeature={page.newFeature}
comingSoon={page.comingSoon}
plan={page.plan}
icon={page.icon}
subheader={Boolean(page.subheader)}
Expand Down
3 changes: 3 additions & 0 deletions docs/src/modules/components/AppNavDrawerItem.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,7 @@ export default function AppNavDrawerItem(props) {
icon,
legacy,
newFeature,
comingSoon,
linkProps,
onClick,
openImmediately,
Expand Down Expand Up @@ -271,6 +272,7 @@ export default function AppNavDrawerItem(props) {
{plan === 'premium' && <span className="plan-premium" title="Premium plan" />}
{legacy && <Chip label="Legacy" sx={sxChip('warning')} />}
{newFeature && <Chip label="New" sx={sxChip('success')} />}
{comingSoon && <Chip label="Coming soon" sx={sxChip('warning')} />}
{expandable && !subheader && <ItemButtonIcon className="ItemButtonIcon" open={open} />}
</Item>
{expandable ? (
Expand All @@ -286,6 +288,7 @@ export default function AppNavDrawerItem(props) {

AppNavDrawerItem.propTypes = {
children: PropTypes.node,
comingSoon: PropTypes.bool,
depth: PropTypes.number.isRequired,
href: PropTypes.string,
icon: PropTypes.string,
Expand Down