add defaultOpen prop to Disclosure component (#447)

* add defaultOpen prop to Disclosure component * update changelog
tailwindlabs · Apr 26, 2021 · a6b1512 · a6b1512
1 parent 43d5270
commit a6b1512
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add `disabled` prop to `RadioGroup` and `RadioGroup.Option` ([#401](https://github.com/tailwindlabs/headlessui/pull/401))
+- Add `defaultOpen` prop to the `Disclosure` component ([#447](https://github.com/tailwindlabs/headlessui/pull/447))
 
 ## [Unreleased - Vue]
 
@@ -29,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Add `disabled` prop to `RadioGroup` and `RadioGroupOption` ([#401](https://github.com/tailwindlabs/headlessui/pull/401))
+- Add `defaultOpen` prop to the `Disclosure` component ([#447](https://github.com/tailwindlabs/headlessui/pull/447))
 
 ## [@headlessui/react@v1.0.0] - 2021-04-14
 

diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.test.tsx
@@ -79,6 +79,29 @@ describe('Rendering', () => {
         assertDisclosurePanel({ state: DisclosureState.Visible, textContent: 'Panel is: open' })
       })
     )
+
+    it('should be possible to render a Disclosure in an open state by default', async () => {
+      render(
+        <Disclosure defaultOpen>
+          {({ open }) => (
+            <>
+              <Disclosure.Button>Trigger</Disclosure.Button>
+              <Disclosure.Panel>Panel is: {open ? 'open' : 'closed'}</Disclosure.Panel>
+            </>
+          )}
+        </Disclosure>
+      )
+
+      assertDisclosureButton({
+        state: DisclosureState.Visible,
+        attributes: { id: 'headlessui-disclosure-button-1' },
+      })
+      assertDisclosurePanel({ state: DisclosureState.Visible, textContent: 'Panel is: open' })
+
+      await click(getDisclosureButton())
+
+      assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
+    })
   })
 
   describe('Disclosure.Button', () => {

diff --git a/packages/@headlessui-react/src/components/disclosure/disclosure.tsx b/packages/@headlessui-react/src/components/disclosure/disclosure.tsx
@@ -111,13 +111,16 @@ interface DisclosureRenderPropArg {
 }
 
 export function Disclosure<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_TAG>(
-  props: Props<TTag, DisclosureRenderPropArg>
+  props: Props<TTag, DisclosureRenderPropArg> & {
+    defaultOpen?: boolean
+  }
 ) {
+  let { defaultOpen = false, ...passthroughProps } = props
   let buttonId = `headlessui-disclosure-button-${useId()}`
   let panelId = `headlessui-disclosure-panel-${useId()}`
 
   let reducerBag = useReducer(stateReducer, {
-    disclosureState: DisclosureStates.Closed,
+    disclosureState: defaultOpen ? DisclosureStates.Open : DisclosureStates.Closed,
     linkedPanel: false,
     buttonId,
     panelId,
@@ -135,7 +138,7 @@ export function Disclosure<TTag extends ElementType = typeof DEFAULT_DISCLOSURE_
   return (
     <DisclosureContext.Provider value={reducerBag}>
       {render({
-        props,
+        props: passthroughProps,
         slot,
         defaultTag: DEFAULT_DISCLOSURE_TAG,
         name: 'Disclosure',

diff --git a/packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts b/packages/@headlessui-vue/src/components/disclosure/disclosure.test.ts
@@ -100,6 +100,29 @@ describe('Rendering', () => {
         assertDisclosurePanel({ state: DisclosureState.Visible, textContent: 'Panel is: open' })
       })
     )
+
+    it('should be possible to render a Disclosure in an open state by default', async () => {
+      renderTemplate(
+        html`
+          <Disclosure v-slot="{ open }" defaultOpen>
+            <DisclosureButton>Trigger</DisclosureButton>
+            <DisclosurePanel>Panel is: {{open ? 'open' : 'closed'}}</DisclosurePanel>
+          </Disclosure>
+        `
+      )
+
+      await new Promise<void>(nextTick)
+
+      assertDisclosureButton({
+        state: DisclosureState.Visible,
+        attributes: { id: 'headlessui-disclosure-button-1' },
+      })
+      assertDisclosurePanel({ state: DisclosureState.Visible, textContent: 'Panel is: open' })
+
+      await click(getDisclosureButton())
+
+      assertDisclosureButton({ state: DisclosureState.InvisibleUnmounted })
+    })
   })
 
   describe('DisclosureButton', () => {

diff --git a/packages/@headlessui-vue/src/components/disclosure/disclosure.ts b/packages/@headlessui-vue/src/components/disclosure/disclosure.ts
@@ -41,11 +41,12 @@ export let Disclosure = defineComponent({
   name: 'Disclosure',
   props: {
     as: { type: [Object, String], default: 'template' },
+    defaultOpen: { type: [Boolean], default: false },
   },
   setup(props, { slots, attrs }) {
-    let { ...passThroughProps } = props
-
-    let disclosureState = ref<StateDefinition['disclosureState']['value']>(DisclosureStates.Closed)
+    let disclosureState = ref<StateDefinition['disclosureState']['value']>(
+      props.defaultOpen ? DisclosureStates.Open : DisclosureStates.Closed
+    )
     let panelRef = ref<StateDefinition['panelRef']['value']>(null)
 
     let api = {
@@ -62,6 +63,7 @@ export let Disclosure = defineComponent({
     provide(DisclosureContext, api)
 
     return () => {
+      let { defaultOpen: _, ...passThroughProps } = props
       let slot = { open: disclosureState.value === DisclosureStates.Open }
       return render({ props: passThroughProps, slot, slots, attrs, name: 'Disclosure' })
     }