fix: Accordion/Disclosure release prep (#7216)

* RAC Disclosure SSR tests

* tests for nested disclosures and interactive adjacent elements

* DisclosurePanel: add DOMProps and render props type/table

* update v3 stories and chromatic

* update v3 Accordion deps

* add v3 Accordion SSR test

* update DisclosureGroupProps type to remove collection in jsdoc

* more v3 accordion tests

* yarn.lock

* lint

* add isQuiet to v3 Accordion/Disclosure

* add focus ring style

* update stories/chromatic

* lint

* remove active outline

* lint

* add isQuiet to v3 docs

Author: reidbarber

packages/@adobe/spectrum-css-temp/components/accordion/index.css

@@ -20,6 +20,8 @@ governing permissions and limitations under the License.
 
   --spectrum-accordion-item-title-padding-y: var(--spectrum-global-dimension-size-150);
   --spectrum-accordion-item-line-height: 1.3;
+
+  --spectrum-accordion-item-focus-ring-color: var(--spectrum-alias-focus-color);
 }
 
 .spectrum-Accordion {
@@ -51,13 +53,18 @@ governing permissions and limitations under the License.
   &:first-of-type {
     border-top: var(--spectrum-accordion-item-border-size) solid transparent;
   }
+
+  &.spectrum-Accordion-item--quiet, &.spectrum-Accordion-item--quiet:first-of-type {
+    border-color: transparent;
+  }
 }
 
 .spectrum-Accordion-itemHeading {
   margin: 0;
 }
 
 .spectrum-Accordion-itemHeader {
+  outline: none;
   position: relative;
 
   display: flex;
@@ -85,24 +92,16 @@ governing permissions and limitations under the License.
   -moz-appearance: none;
   appearance: none;
   background-color: inherit;
-  border: 0;
   font-family: inherit;
   text-align: start;
   width: 100%;
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--spectrum-global-dimension-static-size-100);
 
-  &:focus {
-    outline: none;
-
-    &::after {
-      content: '';
-
-      position: absolute;
-      inset-inline-start: 0;
-      top: calc(var(--spectrum-accordion-item-border-size) * -1);
-      bottom: calc(var(--spectrum-accordion-item-border-size) * -1);
-
-      width: var(--spectrum-accordion-item-border-size-key-focus);
-    }
+  &.focus-ring {
+    outline: solid 2px var(--spectrum-accordion-item-focus-ring-color);
+    outline-offset: -4px;
   }
 }
 

packages/@adobe/spectrum-css-temp/components/accordion/skin.css

@@ -30,12 +30,6 @@ governing permissions and limitations under the License.
 
     background-color: var(--spectrum-accordion-background-color-hover);
   }
-
-  &:focus-visible {
-    &:after  {
-      background-color: var(--spectrum-accordion-border-left-color-key-focus);
-    }
-  }
 }
 
 .spectrum-Accordion-item {

packages/@react-spectrum/accordion/chromatic/Accordion.stories.tsx

@@ -55,7 +55,7 @@ export const Default = {
   render: Template
 };
 
-export const WithExpanedKeys = {
+export const WithExpandedKeys = {
   render: Template,
   args: {defaultExpandedKeys: ['shared']}
 };
@@ -90,4 +90,12 @@ export const WithDisabledDisclosure = {
     </Accordion>)
 };
 
-// TODO: more stories
+export const Disabled = {
+  render: Template,
+  args: {isDisabled: true}
+};
+
+export const Quiet = {
+  render: Template,
+  args: {isQuiet: true}
+};

packages/@react-spectrum/accordion/chromatic/Disclosure.stories.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Disclosure, DisclosureHeader, DisclosurePanel} from '../';
+import {Meta} from '@storybook/react';
+import React from 'react';
+
+const meta: Meta = {
+  title: 'Accordion',
+  component: Disclosure,
+  excludeStories: ['Template']
+};
+
+export default meta;
+
+export const Template = (args) => (
+  <Disclosure {...args}>
+    <DisclosureHeader>
+      Your files
+    </DisclosureHeader>
+    <DisclosurePanel>
+      files
+    </DisclosurePanel>
+  </Disclosure>
+);
+
+export const Default = {
+  render: Template
+};
+
+export const Disabled = {
+  render: Template,
+  args: {isDisabled: true}
+};
+
+export const Quiet = {
+  render: Template,
+  args: {isQuiet: true}
+};

packages/@react-spectrum/accordion/docs/Accordion.mdx

@@ -134,3 +134,22 @@ By default, only one disclosure will be expanded at a time. To expand multiple d
   </Disclosure>
 </Accordion>
 ```
+
+### Quiet
+
+```tsx example
+<Accordion isQuiet>
+  <Disclosure id="personal">
+    <DisclosureHeader>Personal Information</DisclosureHeader>
+    <DisclosurePanel>
+      <p>Personal information form here.</p>
+    </DisclosurePanel>
+  </Disclosure>
+  <Disclosure id="billing">
+    <DisclosureHeader>Billing Address</DisclosureHeader>
+    <DisclosurePanel>
+      <p>Billing address form here.</p>
+    </DisclosurePanel>
+  </Disclosure>
+</Accordion>
+```

packages/@react-spectrum/accordion/docs/Disclosure.mdx

@@ -112,3 +112,14 @@ function ControlledExpansion() {
   </DisclosurePanel>
 </Disclosure>
 ```
+
+### Quiet
+
+```tsx example
+<Disclosure isQuiet>
+  <DisclosureHeader>System Requirements</DisclosureHeader>
+  <DisclosurePanel>
+    <p>Details about system requirements here.</p>
+  </DisclosurePanel>
+</Disclosure>
+```

packages/@react-spectrum/accordion/package.json

@@ -36,14 +36,8 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/accordion": "3.0.0-alpha.35",
-    "@react-aria/focus": "^3.18.4",
     "@react-aria/i18n": "^3.12.3",
-    "@react-aria/interactions": "^3.22.4",
-    "@react-aria/utils": "^3.25.3",
     "@react-spectrum/utils": "^3.11.11",
-    "@react-stately/collections": "^3.11.0",
-    "@react-stately/tree": "^3.8.5",
     "@react-types/shared": "^3.25.0",
     "@spectrum-icons/ui": "^3.6.10",
     "@swc/helpers": "^0.5.0",

packages/@react-spectrum/accordion/src/Accordion.tsx

@@ -15,44 +15,54 @@ import {Button, UNSTABLE_DisclosureGroup as DisclosureGroup, DisclosureGroupProp
 import ChevronLeftMedium from '@spectrum-icons/ui/ChevronLeftMedium';
 import ChevronRightMedium from '@spectrum-icons/ui/ChevronRightMedium';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
-import React, {forwardRef} from 'react';
+import React, {createContext, forwardRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/accordion/vars.css';
 import {useLocale} from '@react-aria/i18n';
 import {useProviderProps} from '@react-spectrum/provider';
 
 export interface SpectrumAccordionProps extends Omit<DisclosureGroupProps, 'className' | 'style' | 'children'>, StyleProps, DOMProps {
+  /** Whether the Accordion should be displayed with a quiet style. */
+  isQuiet?: boolean,
   /** The disclosures within the accordion group. */
   children: React.ReactNode
 }
 
+const InternalAccordionContext = createContext<{isQuiet: boolean} | null>(null);
+
 function Accordion(props: SpectrumAccordionProps, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let {styleProps} = useStyleProps(props);
   let domRef = useDOMRef(ref);
   return (
-    <DisclosureGroup
-      {...props}
-      {...styleProps}
-      ref={domRef}
-      className={classNames(styles, 'spectrum-Accordion', styleProps.className)}>
-      {props.children}
-    </DisclosureGroup>
+    <InternalAccordionContext.Provider value={{isQuiet: props.isQuiet || false}}>
+      <DisclosureGroup
+        {...props}
+        {...styleProps}
+        ref={domRef}
+        className={classNames(styles, 'spectrum-Accordion', styleProps.className)}>
+        {props.children}
+      </DisclosureGroup>
+    </InternalAccordionContext.Provider>
   );
 }
 
 export interface SpectrumDisclosureProps extends Omit<DisclosureProps, 'className' | 'style' | 'children'>, AriaLabelingProps  {
+  /** Whether the Disclosure should be displayed with a quiet style. */
+  isQuiet?: boolean,
   /** The contents of the disclosure. The first child should be the header, and the second child should be the panel. */
   children: React.ReactNode
 }
 
 function Disclosure(props: SpectrumDisclosureProps, ref: DOMRef<HTMLDivElement>) {
   props = useProviderProps(props);
   let domRef = useDOMRef(ref);
+  let accordionContext = React.useContext(InternalAccordionContext)!;
   return (
     <RACDisclosure
       {...props}
       ref={domRef}
       className={({isExpanded, isDisabled}) => classNames(styles, 'spectrum-Accordion-item', {
+        'spectrum-Accordion-item--quiet': accordionContext?.isQuiet ?? props.isQuiet,
         'is-expanded': isExpanded,
         'is-disabled': isDisabled
       })}>

packages/@react-spectrum/accordion/stories/Accordion.stories.tsx

@@ -10,17 +10,25 @@
  * governing permissions and limitations under the License.
  */
 
-import {Accordion, Disclosure, DisclosureHeader, DisclosurePanel} from '../src';
-import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
+import {Accordion, Disclosure, DisclosureHeader, DisclosurePanel, SpectrumAccordionProps} from '../src';
+import {Meta, StoryObj} from '@storybook/react';
 import React from 'react';
 
-export default {
+const meta: Meta<SpectrumAccordionProps> = {
   title: 'Accordion',
   component: Accordion,
-  argTypes: {}
-} as ComponentMeta<typeof Accordion>;
+  argTypes: {
+    isDisabled: {
+      control: 'boolean'
+    },
+    isQuiet: {
+      control: 'boolean'
+    }
+  }
+};
 
-export type AccordionStory = ComponentStoryObj<typeof Accordion>;
+export default meta;
+type AccordionStory = StoryObj<typeof Accordion>;
 
 export const Default: AccordionStory = {
   render: (args) => (
@@ -44,3 +52,39 @@ export const Default: AccordionStory = {
     </Accordion>
   )
 };
+
+export const WithExpandedKeys: AccordionStory = {
+  ...Default,
+  args: {defaultExpandedKeys: ['files']}
+};
+
+export const WithDisabledDisclosure: AccordionStory = {
+  render: (args) => (
+    <Accordion {...args}>
+      <Disclosure id="files">
+        <DisclosureHeader>
+          Your files
+        </DisclosureHeader>
+        <DisclosurePanel>
+          files
+        </DisclosurePanel>
+      </Disclosure>
+      <Disclosure id="shared">
+        <DisclosureHeader>
+          Shared with you
+        </DisclosureHeader>
+        <DisclosurePanel>
+          shared
+        </DisclosurePanel>
+      </Disclosure>
+      <Disclosure id="last" isDisabled>
+        <DisclosureHeader>
+          Last item
+        </DisclosureHeader>
+        <DisclosurePanel>
+          last
+        </DisclosurePanel>
+      </Disclosure>
+    </Accordion>
+  )
+};

packages/@react-spectrum/accordion/stories/Disclosure.stories.tsx

@@ -0,0 +1,44 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {Disclosure, DisclosureHeader, DisclosurePanel, SpectrumDisclosureProps} from '../src';
+import {Meta, StoryObj} from '@storybook/react';
+import React from 'react';
+
+const meta: Meta<SpectrumDisclosureProps> = {
+  title: 'Disclosure',
+  component: Disclosure,
+  argTypes: {
+    isDisabled: {
+      control: 'boolean'
+    },
+    isQuiet: {
+      control: 'boolean'
+    }
+  }
+};
+
+export default meta;
+type DisclosureStory = StoryObj<typeof Disclosure>;
+
+export const Default: DisclosureStory = {
+  render: (args) => (
+    <Disclosure {...args}>
+      <DisclosureHeader>
+        Files
+      </DisclosureHeader>
+      <DisclosurePanel>
+        <p>Files content</p>
+      </DisclosurePanel>
+    </Disclosure>
+  )
+};