Skip to content

Commit 87c49e3

Browse files
authored
Merge pull request #910 from buildo/disclosure-fix-controlled
[Disclosure] fix controlled mode
2 parents 74d47c0 + 4f55fb1 commit 87c49e3

File tree

2 files changed

+26
-2
lines changed

2 files changed

+26
-2
lines changed

packages/bento-design-system/src/Disclosure/Disclosure.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export function Disclosure({
3636
const config = useBentoConfig().disclosure;
3737
const iconPosition = iconPosition_ ?? config.defaultIconPosition;
3838

39-
const [internalIsOpen, setInternalIsOpen] = useState(isOpen ?? initialIsOpen);
39+
const [internalIsOpen, setInternalIsOpen] = useState(initialIsOpen);
4040
const open = internalIsOpen ?? isOpen;
4141
const onPress = onToggle ? () => onToggle(!isOpen) : () => setInternalIsOpen(!internalIsOpen);
4242
const { pressProps } = usePress({ onPress });

packages/bento-design-system/stories/Components/Disclosure.stories.tsx

+25-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { Card, Disclosure, Placeholder } from "..";
1+
import { Card, Chip, Disclosure, Placeholder, Stack } from "..";
22
import { Meta, StoryObj } from "@storybook/react";
3+
import { useState } from "react";
34

45
const meta = {
56
component: Disclosure,
@@ -42,3 +43,26 @@ export const InCard = {
4243
),
4344
],
4445
} satisfies Story;
46+
47+
export const Controlled = {
48+
decorators: [
49+
(Story) => {
50+
const [open, setOpen] = useState(true);
51+
52+
return (
53+
<Stack space={16}>
54+
<Chip label={open ? "open" : "closed"} color="pink" />
55+
<Disclosure title="Title" isOpen={open} onToggle={setOpen}>
56+
<Placeholder />
57+
</Disclosure>
58+
</Stack>
59+
);
60+
},
61+
],
62+
} satisfies Story;
63+
64+
export const InitialOpen = {
65+
args: {
66+
initialIsOpen: true,
67+
},
68+
} satisfies Story;

0 commit comments

Comments
 (0)