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

updating the accordion api's and introducing the disclosure component #4562

Draft
wants to merge 17 commits into
base: canary
Choose a base branch
from
Draft

updating the accordion api's and introducing the disclosure component #4562

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
fb74fc3
feat: adding the disclosure component
macci001 Jan 9, 2025
85c89b9
chore: using the disclosure api
macci001 Jan 14, 2025
61ebe06
feat: adding animation to the disclosure component
macci001 Jan 14, 2025
366e171
chore: fixing the animations
macci001 Jan 14, 2025
d1c81ce
fix: fixing the props type in accordian
macci001 Jan 14, 2025
be3a862
fix: fixing the stories
macci001 Jan 14, 2025
48b49f3
chore: fixing the tests
macci001 Jan 15, 2025
7814ef0
fix: fixing the storybook
macci001 Jan 15, 2025
e1bf895
chore: adding the support for the remaing props
macci001 Jan 15, 2025
8f5a318
fix: fixing the styles
macci001 Jan 15, 2025
91217e7
chore: modifying the docs based on the latest API
macci001 Jan 15, 2025
64bab8e
chore: nits
macci001 Jan 15, 2025
97d0088
chore: adding the storybook for disclosure
macci001 Jan 15, 2025
2a7e768
chore: adding the docs for disclosure
macci001 Jan 16, 2025
f7243ae
chore: adding the changeset
macci001 Jan 16, 2025
3607060
chore(changeset): update package name
wingkwong Jan 18, 2025
ee09209
chore: fixing conflict
macci001 Jan 20, 2025
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
8 changes: 8 additions & 0 deletions .changeset/tender-singers-notice.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"@heroui/disclosure": patch
"@heroui/accordion": patch
"@heroui/react": patch
"@heroui/theme": patch
---

Adding the disclosure component and updating the api for the Accordion.
6 changes: 3 additions & 3 deletions apps/docs/app/examples/perf/client-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -479,7 +479,7 @@ export default function HeroUIPerf() {
</Select>

<Accordion>
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
<AccordionItem aria-label="Accordion 1" id="1" title="Accordion 1">
Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
Expand All @@ -497,15 +497,15 @@ export default function HeroUIPerf() {
elit consequat ea id. Lorem ea qui sunt enim occaecat excepteur officia ex consequat
nostrud. Tempor sint Lorem est culpa do.
</AccordionItem>
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
<AccordionItem aria-label="Accordion 2" id="2" title="Accordion 2">
Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
ipsum eiusmod veniam. Magna in laborum anim amet anim ex elit aliqua nostrud mollit.
Pariatur ullamco cillum proident aliqua nostrud. Labore ea veniam cillum duis veniam in
cupidatat voluptate eu officia. Ut laborum sunt nostrud magna. Ex magna esse cillum enim
</AccordionItem>
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
<AccordionItem aria-label="Accordion 3" id="3" title="Accordion 3">
Non est aliqua tempor occaecat laborum. Lorem culpa minim irure mollit. Est qui
reprehenderit commodo magna proident anim ipsum ex. Mollit id amet officia nisi excepteur
eu. Commodo elit commodo nisi nisi aute eu aliquip aliquip voluptate exercitation ullamco
Expand Down
7 changes: 7 additions & 0 deletions apps/docs/config/routes.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -260,6 +260,13 @@
"keywords": "date-range-picker, date-picker, time, input, timezone",
"path": "/docs/components/date-range-picker.mdx"
},
{
"key": "disclosure",
"title": "Disclosure",
"keywords": "disclosure, collapse, expandable sections, content hiding",
"path": "/docs/components/disclosure.mdx",
"newPost": true
},
{
"key": "divider",
"title": "Divider",
Expand Down
6 changes: 3 additions & 3 deletions apps/docs/content/components/accordion/bordered-variant.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ export default function App() {

return (
<Accordion variant="bordered">
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
<AccordionItem aria-label="Accordion 1" id="1" title="Accordion 1">
{defaultContent}
</AccordionItem>
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
<AccordionItem aria-label="Accordion 2" id="2" title="Accordion 2">
{defaultContent}
</AccordionItem>
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
<AccordionItem aria-label="Accordion 3" id="3" title="Accordion 3">
{defaultContent}
</AccordionItem>
</Accordion>
Expand Down
6 changes: 3 additions & 3 deletions apps/docs/content/components/accordion/compact.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ export default function App() {

return (
<Accordion isCompact>
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
<AccordionItem aria-label="Accordion 1" id="1" title="Accordion 1">
{defaultContent}
</AccordionItem>
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
<AccordionItem aria-label="Accordion 2" id="2" title="Accordion 2">
{defaultContent}
</AccordionItem>
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
<AccordionItem aria-label="Accordion 3" id="3" title="Accordion 3">
{defaultContent}
</AccordionItem>
</Accordion>
Expand Down
8 changes: 4 additions & 4 deletions apps/docs/content/components/accordion/controlled.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,14 @@ export default function App() {
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";

return (
<Accordion selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
<Accordion expandedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
<AccordionItem aria-label="Accordion 1" id="1" title="Accordion 1">
{defaultContent}
</AccordionItem>
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
<AccordionItem aria-label="Accordion 2" id="2" title="Accordion 2">
{defaultContent}
</AccordionItem>
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
<AccordionItem aria-label="Accordion 3" id="3" title="Accordion 3">
{defaultContent}
</AccordionItem>
</Accordion>
Expand Down
8 changes: 4 additions & 4 deletions apps/docs/content/components/accordion/controlled.raw.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@ export default function App() {
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";

return (
<Accordion selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
<Accordion expandedKeys={selectedKeys} onExpandedChange={setSelectedKeys}>
<AccordionItem aria-label="Accordion 1" id="1" title="Accordion 1">
{defaultContent}
</AccordionItem>
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
<AccordionItem aria-label="Accordion 2" id="2" title="Accordion 2">
{defaultContent}
</AccordionItem>
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
<AccordionItem aria-label="Accordion 3" id="3" title="Accordion 3">
{defaultContent}
</AccordionItem>
</Accordion>
Expand Down
50 changes: 7 additions & 43 deletions apps/docs/content/components/accordion/custom-motion.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,55 +3,19 @@ import {Accordion, AccordionItem} from "@heroui/react";
export default function App() {
const defaultContent =
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
const classNames = {
content: "ease-soft-spring",
};

return (
<Accordion
motionProps={{
variants: {
enter: {
y: 0,
opacity: 1,
height: "auto",
overflowY: "unset",
transition: {
height: {
type: "spring",
stiffness: 500,
damping: 30,
duration: 1,
},
opacity: {
easings: "ease",
duration: 1,
},
},
},
exit: {
y: -10,
opacity: 0,
height: 0,
overflowY: "hidden",
transition: {
height: {
easings: "ease",
duration: 0.25,
},
opacity: {
easings: "ease",
duration: 0.3,
},
},
},
},
}}
>
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
<Accordion>
<AccordionItem aria-label="Accordion 1" classNames={classNames} id="1" title="Accordion 1">
{defaultContent}
</AccordionItem>
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
<AccordionItem aria-label="Accordion 2" classNames={classNames} id="2" title="Accordion 2">
{defaultContent}
</AccordionItem>
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
<AccordionItem aria-label="Accordion 3" classNames={classNames} id="3" title="Accordion 3">
{defaultContent}
</AccordionItem>
</Accordion>
Expand Down
15 changes: 8 additions & 7 deletions apps/docs/content/components/accordion/custom-styles.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,13 +207,13 @@ export default function App() {
return (
<Accordion
className="p-2 flex flex-col gap-1 w-full max-w-[300px]"
itemClasses={itemClasses}
showDivider={false}
variant="shadow"
>
<AccordionItem
key="1"
aria-label="Connected devices"
classNames={itemClasses}
id="1"
startContent={<MonitorMobileIcon className="text-primary" />}
subtitle={
<p className="flex">
Expand All @@ -225,28 +225,29 @@ export default function App() {
{defaultContent}
</AccordionItem>
<AccordionItem
key="2"
aria-label="Apps Permissions"
classNames={itemClasses}
id="2"
startContent={<ShieldSecurityIcon />}
subtitle="3 apps have read permissions"
title="Apps Permissions"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="3"
aria-label="Pending tasks"
classNames={{subtitle: "text-warning"}}
classNames={{...itemClasses, subtitle: "text-warning"}}
id="3"
startContent={<InfoIcon className="text-warning" />}
subtitle="Complete your profile"
title="Pending tasks"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="4"
aria-label="Card expired"
classNames={{subtitle: "text-danger"}}
classNames={{...itemClasses, subtitle: "text-danger"}}
id="4"
startContent={<InvalidCardIcon className="text-danger" />}
subtitle="Please, update now"
title={
Expand Down
18 changes: 4 additions & 14 deletions apps/docs/content/components/accordion/default-expanded-keys.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,22 @@ export default function App() {

return (
<Accordion defaultExpandedKeys={["2"]}>
<AccordionItem
key="1"
aria-label="Accordion 1"
subtitle="Press to expand"
title="Accordion 1"
>
<AccordionItem aria-label="Accordion 1" id="1" subtitle="Press to expand" title="Accordion 1">
{defaultContent}
</AccordionItem>
<AccordionItem
key="2"
aria-label="Accordion 2"
id="2"
subtitle={
<span>
Press to expand <strong>key 2</strong>
Press to expand <strong>id 2</strong>
</span>
}
title="Accordion 2"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="3"
aria-label="Accordion 3"
subtitle="Press to expand"
title="Accordion 3"
>
<AccordionItem aria-label="Accordion 3" id="3" subtitle="Press to expand" title="Accordion 3">
{defaultContent}
</AccordionItem>
</Accordion>
Expand Down
18 changes: 4 additions & 14 deletions apps/docs/content/components/accordion/disabled-keys.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,32 +6,22 @@ export default function App() {

return (
<Accordion disabledKeys={["2"]}>
<AccordionItem
key="1"
aria-label="Accordion 1"
subtitle="Press to expand"
title="Accordion 1"
>
<AccordionItem aria-label="Accordion 1" id="1" subtitle="Press to expand" title="Accordion 1">
{defaultContent}
</AccordionItem>
<AccordionItem
key="2"
aria-label="Accordion 2"
id="2"
subtitle={
<span>
Press to expand <strong>key 2</strong>
Press to expand <strong>id 2</strong>
</span>
}
title="Accordion 2"
>
{defaultContent}
</AccordionItem>
<AccordionItem
key="3"
aria-label="Accordion 3"
subtitle="Press to expand"
title="Accordion 3"
>
<AccordionItem aria-label="Accordion 3" id="3" subtitle="Press to expand" title="Accordion 3">
{defaultContent}
</AccordionItem>
</Accordion>
Expand Down
10 changes: 5 additions & 5 deletions apps/docs/content/components/accordion/indicator-function.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,19 +84,19 @@ export default function App() {
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";

return (
<Accordion defaultExpandedKeys={["theme"]}>
<Accordion defaultExpandedids={["theme"]}>
<AccordionItem
key="theme"
aria-label="Theme"
indicator={({isOpen}) => (isOpen ? <SunIcon /> : <MoonIcon />)}
id="theme"
indicator={({isExpanded}) => (isExpanded ? <SunIcon /> : <MoonIcon />)}
title="Theme"
>
{defaultContent}
</AccordionItem>
<AccordionItem key="anchor" aria-label="Anchor" indicator={<AnchorIcon />} title="Anchor">
<AccordionItem aria-label="Anchor" id="anchor" indicator={<AnchorIcon />} title="Anchor">
{defaultContent}
</AccordionItem>
<AccordionItem key="sun" aria-label="Sun" indicator={<SunIcon />} title="Sun">
<AccordionItem aria-label="Sun" id="sun" indicator={<SunIcon />} title="Sun">
{defaultContent}
</AccordionItem>
</Accordion>
Expand Down
6 changes: 3 additions & 3 deletions apps/docs/content/components/accordion/indicator.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,13 +85,13 @@ export default function App() {

return (
<Accordion>
<AccordionItem key="anchor" aria-label="Anchor" indicator={<AnchorIcon />} title="Anchor">
<AccordionItem aria-label="Anchor" id="anchor" indicator={<AnchorIcon />} title="Anchor">
{defaultContent}
</AccordionItem>
<AccordionItem key="moon" aria-label="Moon" indicator={<MoonIcon />} title="Moon">
<AccordionItem aria-label="Moon" id="moon" indicator={<MoonIcon />} title="Moon">
{defaultContent}
</AccordionItem>
<AccordionItem key="sun" aria-label="Sun" indicator={<SunIcon />} title="Sun">
<AccordionItem aria-label="Sun" id="sun" indicator={<SunIcon />} title="Sun">
{defaultContent}
</AccordionItem>
</Accordion>
Expand Down
6 changes: 3 additions & 3 deletions apps/docs/content/components/accordion/light-variant.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ export default function App() {

return (
<Accordion variant="light">
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
<AccordionItem aria-label="Accordion 1" id="1" title="Accordion 1">
{defaultContent}
</AccordionItem>
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
<AccordionItem aria-label="Accordion 2" id="2" title="Accordion 2">
{defaultContent}
</AccordionItem>
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
<AccordionItem aria-label="Accordion 3" id="3" title="Accordion 3">
{defaultContent}
</AccordionItem>
</Accordion>
Expand Down
8 changes: 4 additions & 4 deletions apps/docs/content/components/accordion/multiple.raw.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ export default function App() {
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";

return (
<Accordion selectionMode="multiple">
<AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
<Accordion allowsMultipleExpanded>
<AccordionItem aria-label="Accordion 1" id="1" title="Accordion 1">
{defaultContent}
</AccordionItem>
<AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
<AccordionItem aria-label="Accordion 2" id="2" title="Accordion 2">
{defaultContent}
</AccordionItem>
<AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
<AccordionItem aria-label="Accordion 3" id="3" title="Accordion 3">
{defaultContent}
</AccordionItem>
</Accordion>
Expand Down
Loading
Loading