fix: Accordion release fixes (#7391)

* update DisclosureHeader to DisclosureTitle in v3 * update S2 Disclosure JSDoc * disable controlled S2 Accordion stories in docs * Update packages/@react-spectrum/accordion/docs/Accordion.mdx --------- Co-authored-by: Daniel Lu <dl1644@gmail.com>
adobe · Nov 19, 2024 · 0ab0544 · 0ab0544
1 parent 0574faf
commit 0ab0544
Show file tree

Hide file tree

Showing 16 changed files with 96 additions and 123 deletions.
diff --git a/examples/rsp-cra-18/src/sections/NavigationExamples.tsx b/examples/rsp-cra-18/src/sections/NavigationExamples.tsx
@@ -1,4 +1,4 @@
-import {Accordion, Disclosure, DisclosureHeader, DisclosurePanel, Flex, Divider, Breadcrumbs, Item, Link, Tabs, TabList, TabPanels} from '@adobe/react-spectrum';
+import {Accordion, Disclosure, DisclosureTitle, DisclosurePanel, Flex, Divider, Breadcrumbs, Item, Link, Tabs, TabList, TabPanels} from '@adobe/react-spectrum';
 
 export default function NavigationExamples() {
   return (
@@ -35,25 +35,25 @@ export default function NavigationExamples() {
         <h3>Accordion</h3>
         <Accordion maxWidth="size-3600">
           <Disclosure id="files">
-            <DisclosureHeader>
+            <DisclosureTitle>
               Files
-            </DisclosureHeader>
+            </DisclosureTitle>
             <DisclosurePanel>
               <p>Files content</p>
             </DisclosurePanel>
           </Disclosure>
           <Disclosure id="people">
-            <DisclosureHeader>
+            <DisclosureTitle>
               People
-            </DisclosureHeader>
+            </DisclosureTitle>
             <DisclosurePanel>
               <p>People content</p>
             </DisclosurePanel>
           </Disclosure>
         </Accordion>
         <h3>Disclosure</h3>
         <Disclosure>
-          <DisclosureHeader>System Requirements</DisclosureHeader>
+          <DisclosureTitle>System Requirements</DisclosureTitle>
           <DisclosurePanel>
             <p>Details about system requirements here.</p>
           </DisclosurePanel>

diff --git a/examples/rsp-next-ts-17/pages/index.tsx b/examples/rsp-next-ts-17/pages/index.tsx
@@ -80,7 +80,7 @@ import {
   ColorSwatch,
   Accordion,
   Disclosure,
-  DisclosureHeader,
+  DisclosureTitle,
   DisclosurePanel
 } from "@adobe/react-spectrum";
 import Edit from "@spectrum-icons/workflow/Edit";
@@ -316,17 +316,17 @@ export default function Home() {
             <h3>Accordion</h3>
             <Accordion>
               <Disclosure id="files">
-                <DisclosureHeader>
+                <DisclosureTitle>
                   Files
-                </DisclosureHeader>
+                </DisclosureTitle>
                 <DisclosurePanel>
                   <p>Files content</p>
                 </DisclosurePanel>
               </Disclosure>
               <Disclosure id="people">
-                <DisclosureHeader>
+                <DisclosureTitle>
                   People
-                </DisclosureHeader>
+                </DisclosureTitle>
                 <DisclosurePanel>
                   <p>People content</p>
                 </DisclosurePanel>
@@ -335,7 +335,7 @@ export default function Home() {
 
             <h3>Disclosure</h3>
             <Disclosure>
-              <DisclosureHeader>System Requirements</DisclosureHeader>
+              <DisclosureTitle>System Requirements</DisclosureTitle>
               <DisclosurePanel>
                 <p>Details about system requirements here.</p>
               </DisclosurePanel>

diff --git a/examples/rsp-next-ts/pages/index.tsx b/examples/rsp-next-ts/pages/index.tsx
@@ -80,7 +80,7 @@ import {
   ColorSwatch,
   Accordion,
   Disclosure,
-  DisclosureHeader,
+  DisclosureTitle,
   DisclosurePanel
 } from "@adobe/react-spectrum";
 import Edit from "@spectrum-icons/workflow/Edit";
@@ -324,17 +324,17 @@ export default function Home() {
             <h3>Accordion</h3>
             <Accordion>
               <Disclosure id="files">
-                <DisclosureHeader>
+                <DisclosureTitle>
                   Files
-                </DisclosureHeader>
+                </DisclosureTitle>
                 <DisclosurePanel>
                   <p>Files content</p>
                 </DisclosurePanel>
               </Disclosure>
               <Disclosure id="people">
-                <DisclosureHeader>
+                <DisclosureTitle>
                   People
-                </DisclosureHeader>
+                </DisclosureTitle>
                 <DisclosurePanel>
                   <p>People content</p>
                 </DisclosurePanel>
@@ -343,7 +343,7 @@ export default function Home() {
 
             <h3>Disclosure</h3>
             <Disclosure>
-              <DisclosureHeader>System Requirements</DisclosureHeader>
+              <DisclosureTitle>System Requirements</DisclosureTitle>
               <DisclosurePanel>
                 <p>Details about system requirements here.</p>
               </DisclosurePanel>

diff --git a/packages/@adobe/react-spectrum/src/index.ts b/packages/@adobe/react-spectrum/src/index.ts
@@ -17,7 +17,7 @@ import 'client-only';
 export {ActionGroup} from '@react-spectrum/actiongroup';
 export {Badge} from '@react-spectrum/badge';
 export {Breadcrumbs} from '@react-spectrum/breadcrumbs';
-export {Accordion, Disclosure, DisclosurePanel, DisclosureHeader} from '@react-spectrum/accordion';
+export {Accordion, Disclosure, DisclosurePanel, DisclosureTitle} from '@react-spectrum/accordion';
 export {ActionBar, ActionBarContainer} from '@react-spectrum/actionbar';
 export {ActionButton, Button, LogicButton, ToggleButton} from '@react-spectrum/button';
 export {Avatar} from '@react-spectrum/avatar';
@@ -123,4 +123,4 @@ export type {DateFormatter, DateFormatterOptions, Filter, FormatMessage, Locale,
 export type {SSRProviderProps} from '@react-aria/ssr';
 export type {DirectoryDropItem, DragAndDropHooks, DragAndDropOptions, DraggableCollectionEndEvent, DraggableCollectionMoveEvent, DraggableCollectionStartEvent, DragPreviewRenderer, DragTypes, DropItem, DropOperation, DroppableCollectionDropEvent, DroppableCollectionEnterEvent, DroppableCollectionExitEvent, DroppableCollectionInsertDropEvent, DroppableCollectionMoveEvent, DroppableCollectionOnItemDropEvent, DroppableCollectionReorderEvent, DroppableCollectionRootDropEvent, DropPosition, DropTarget, FileDropItem, ItemDropTarget, RootDropTarget, TextDropItem} from '@react-spectrum/dnd';
 export type {Key, Selection, ItemProps, SectionProps, RouterConfig} from '@react-types/shared';
-export type {SpectrumAccordionProps, SpectrumDisclosureProps, SpectrumDisclosurePanelProps, SpectrumDisclosureHeaderProps} from '@react-spectrum/accordion';
+export type {SpectrumAccordionProps, SpectrumDisclosureProps, SpectrumDisclosurePanelProps, SpectrumDisclosureTitleProps} from '@react-spectrum/accordion';
diff --git a/packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx b/packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Accordion, Disclosure, DisclosureHeader, DisclosurePanel} from '../';
+import {Accordion, Disclosure, DisclosurePanel, DisclosureTitle} from '../';
 import {Meta} from '@storybook/react';
 import React from 'react';
 
@@ -25,25 +25,25 @@ export default meta;
 export const Template = (args) => (
   <Accordion {...args}>
     <Disclosure id="files">
-      <DisclosureHeader>
+      <DisclosureTitle>
         Your files
-      </DisclosureHeader>
+      </DisclosureTitle>
       <DisclosurePanel>
         files
       </DisclosurePanel>
     </Disclosure>
     <Disclosure id="shared">
-      <DisclosureHeader>
+      <DisclosureTitle>
         Shared with you
-      </DisclosureHeader>
+      </DisclosureTitle>
       <DisclosurePanel>
         shared
       </DisclosurePanel>
     </Disclosure>
     <Disclosure id="last">
-      <DisclosureHeader>
+      <DisclosureTitle>
         Last item
-      </DisclosureHeader>
+      </DisclosureTitle>
       <DisclosurePanel>
         last
       </DisclosurePanel>
@@ -64,25 +64,25 @@ export const WithDisabledDisclosure = {
   render: (args) => (
     <Accordion {...args}>
       <Disclosure id="files">
-        <DisclosureHeader>
+        <DisclosureTitle>
           Your files
-        </DisclosureHeader>
+        </DisclosureTitle>
         <DisclosurePanel>
           files
         </DisclosurePanel>
       </Disclosure>
       <Disclosure id="shared">
-        <DisclosureHeader>
+        <DisclosureTitle>
           Shared with you
-        </DisclosureHeader>
+        </DisclosureTitle>
         <DisclosurePanel>
           shared
         </DisclosurePanel>
       </Disclosure>
       <Disclosure id="last" isDisabled>
-        <DisclosureHeader>
+        <DisclosureTitle>
           Last item
-        </DisclosureHeader>
+        </DisclosureTitle>
         <DisclosurePanel>
           last
         </DisclosurePanel>

diff --git a/packages/@react-spectrum/accordion/chromatic/Disclosure.stories.tsx b/packages/@react-spectrum/accordion/chromatic/Disclosure.stories.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {Disclosure, DisclosureHeader, DisclosurePanel} from '../';
+import {Disclosure, DisclosurePanel, DisclosureTitle} from '../';
 import {Meta} from '@storybook/react';
 import React from 'react';
 
@@ -24,9 +24,9 @@ export default meta;
 
 export const Template = (args) => (
   <Disclosure {...args}>
-    <DisclosureHeader>
+    <DisclosureTitle>
       Your files
-    </DisclosureHeader>
+    </DisclosureTitle>
     <DisclosurePanel>
       files
     </DisclosurePanel>

diff --git a/packages/@react-spectrum/accordion/docs/Accordion.mdx b/packages/@react-spectrum/accordion/docs/Accordion.mdx
@@ -20,7 +20,7 @@ keywords: [disclosure, accordion, collapse, expand]
 ---
 
 ```jsx import
-import {Accordion, Disclosure, DisclosureHeader, DisclosurePanel} from '@react-spectrum/accordion';
+import {Accordion, Disclosure, DisclosureTitle, DisclosurePanel} from '@react-spectrum/accordion';
 ```
 
 # Accordion
@@ -29,20 +29,20 @@ import {Accordion, Disclosure, DisclosureHeader, DisclosurePanel} from '@react-s
 
 <HeaderInfo
   packageData={packageData}
-  componentNames={['Accordion', 'Disclosure', 'DisclosureHeader', 'DisclosurePanel']} />
+  componentNames={['Accordion', 'Disclosure', 'DisclosureTitle', 'DisclosurePanel']} />
 
 ## Example
 
 ```tsx example
 <Accordion defaultExpandedKeys={['personal']}>
   <Disclosure id="personal">
-    <DisclosureHeader>Personal Information</DisclosureHeader>
+    <DisclosureTitle>Personal Information</DisclosureTitle>
     <DisclosurePanel>
       Personal information form here.
     </DisclosurePanel>
   </Disclosure>
   <Disclosure id="billing">
-    <DisclosureHeader>Billing Address</DisclosureHeader>
+    <DisclosureTitle>Billing Address</DisclosureTitle>
     <DisclosurePanel>
       Billing address form here.
     </DisclosurePanel>
@@ -72,13 +72,13 @@ function ControlledExpansion() {
     <>
       <Accordion expandedKeys={expandedKeys} onExpandedChange={setExpandedKeys}>
         <Disclosure id="personal">
-          <DisclosureHeader>Personal Information</DisclosureHeader>
+          <DisclosureTitle>Personal Information</DisclosureTitle>
           <DisclosurePanel>
             Personal information form here.
           </DisclosurePanel>
         </Disclosure>
         <Disclosure id="billing">
-          <DisclosureHeader>Billing Address</DisclosureHeader>
+          <DisclosureTitle>Billing Address</DisclosureTitle>
           <DisclosurePanel>
             Billing address form here.
           </DisclosurePanel>
@@ -97,13 +97,13 @@ By default, only one disclosure will be expanded at a time. To expand multiple d
 ```tsx example
 <Accordion allowsMultipleExpanded defaultExpandedKeys={['personal', 'billing']}>
   <Disclosure id="personal">
-    <DisclosureHeader>Personal Information</DisclosureHeader>
+    <DisclosureTitle>Personal Information</DisclosureTitle>
     <DisclosurePanel>
       Personal information form here.
     </DisclosurePanel>
   </Disclosure>
   <Disclosure id="billing">
-    <DisclosureHeader>Billing Address</DisclosureHeader>
+    <DisclosureTitle>Billing Address</DisclosureTitle>
     <DisclosurePanel>
       Billing address form here.
     </DisclosurePanel>
@@ -120,9 +120,9 @@ By default, only one disclosure will be expanded at a time. To expand multiple d
 
 <PropTable component={docs.exports.Disclosure} links={docs.links} />
 
-### Disclosure Header
+### Disclosure Title
 
-<PropTable component={docs.exports.DisclosureHeader} links={docs.links} />
+<PropTable component={docs.exports.DisclosureTitle} links={docs.links} />
 
 ### Disclosure Panel
 
@@ -135,13 +135,13 @@ By default, only one disclosure will be expanded at a time. To expand multiple d
 ```tsx example
 <Accordion isDisabled>
   <Disclosure id="personal">
-    <DisclosureHeader>Personal Information</DisclosureHeader>
+    <DisclosureTitle>Personal Information</DisclosureTitle>
     <DisclosurePanel>
       Personal information form here.
     </DisclosurePanel>
   </Disclosure>
   <Disclosure id="billing">
-    <DisclosureHeader>Billing Address</DisclosureHeader>
+    <DisclosureTitle>Billing Address</DisclosureTitle>
     <DisclosurePanel>
       Billing address form here.
     </DisclosurePanel>
@@ -154,13 +154,13 @@ By default, only one disclosure will be expanded at a time. To expand multiple d
 ```tsx example
 <Accordion isQuiet>
   <Disclosure id="personal">
-    <DisclosureHeader>Personal Information</DisclosureHeader>
+    <DisclosureTitle>Personal Information</DisclosureTitle>
     <DisclosurePanel>
       Personal information form here.
     </DisclosurePanel>
   </Disclosure>
   <Disclosure id="billing">
-    <DisclosureHeader>Billing Address</DisclosureHeader>
+    <DisclosureTitle>Billing Address</DisclosureTitle>
     <DisclosurePanel>
       Billing address form here.
     </DisclosurePanel>