feat: support icons inside of S2 DisclosureTitle

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

@@ -19,10 +19,13 @@ import {
 } from '../src/Accordion';
 
 import {ActionButton} from '../src/ActionButton';
+import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
+import People from '../s2wf-icons/S2_Icon_People_20_N.svg';
 import React from 'react';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
+import {Text} from '../src/Content';
 import {TextField} from '../src/TextField';
 
 const meta: Meta<typeof Accordion> = {
@@ -169,3 +172,32 @@ export const WithActionButton: Story = {
     );
   }
 };
+
+export const WithIcon: Story = {
+  render: (args) => {
+    return (
+      <div className={style({minHeight: 240})}>
+        <Accordion {...args}>
+          <AccordionItem id="files">
+            <AccordionItemTitle>
+              <File />
+              <Text>Files</Text>
+            </AccordionItemTitle>
+            <AccordionItemPanel>
+              Files content
+            </AccordionItemPanel>
+          </AccordionItem>
+          <AccordionItem id="people">
+            <AccordionItemTitle>
+              <People />
+              <Text>People</Text>
+            </AccordionItemTitle>
+            <AccordionItemPanel>
+              <TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />
+            </AccordionItemPanel>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    );
+  }
+};

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

@@ -13,10 +13,12 @@
 import {ActionButton} from '../src/ActionButton';
 
 import {Disclosure, DisclosureHeader, DisclosurePanel, DisclosureTitle} from '../src/Disclosure';
+import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import React from 'react';
 import {style} from '../style/spectrum-theme' with { type: 'macro' };
+import {Text} from '../src/Content';
 
 const meta: Meta<typeof Disclosure> = {
   component: Disclosure,
@@ -87,3 +89,21 @@ export const WithActionButton: Story = {
     );
   }
 };
+
+export const WithIcon: Story = {
+  render: (args) => {
+    return (
+      <div className={style({minHeight: 240})}>
+        <Disclosure {...args}>
+          <DisclosureTitle>
+            <File />
+            <Text>Files</Text>
+          </DisclosureTitle>
+          <DisclosurePanel>
+            Files content
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+    );
+  }
+};

packages/@react-spectrum/s2/exports/Accordion.ts

@@ -1,3 +1,5 @@
 export {Accordion, AccordionContext, AccordionItem, AccordionItemHeader, AccordionItemTitle, AccordionItemPanel} from '../src/Accordion';
 export type {AccordionProps, AccordionItemProps, AccordionItemHeaderProps, AccordionItemTitleProps, AccordionItemPanelProps, AccordionItemState, AccordionItemRenderProps} from '../src/Accordion';
 export type {Key} from '@react-types/shared';
+
+export {Text} from '../src/Content';

packages/@react-spectrum/s2/exports/Disclosure.ts

@@ -1,2 +1,4 @@
 export {DisclosureHeader, Disclosure, DisclosurePanel, DisclosureContext, DisclosureTitle} from '../src/Disclosure';
 export type {DisclosureProps, DisclosurePanelProps} from '../src/Disclosure';
+
+export {Text} from '../src/Content';

packages/@react-spectrum/s2/src/Disclosure.tsx

@@ -12,9 +12,9 @@
 
 import {ActionButtonContext} from './ActionButton';
 import {AriaLabelingProps, DOMProps, DOMRef, DOMRefValue, forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
-import {baseColor, centerPadding, focusRing, lightDark, space, style} from '../style' with { type: 'macro' };
+import {baseColor, centerPadding, focusRing, fontRelative, lightDark, space, style} from '../style' with { type: 'macro' };
 import {Button} from 'react-aria-components/Button';
-import {CenterBaseline} from './CenterBaseline';
+import {CenterBaseline, centerBaseline} from './CenterBaseline';
 
 import Chevron from '../ui-icons/Chevron';
 
@@ -29,7 +29,9 @@ import {
 import {filterDOMProps} from 'react-aria/filterDOMProps';
 import {getAllowedOverrides, StyleProps, UnsafeStyles} from './style-utils' with {type: 'macro'};
 import {Heading} from 'react-aria-components/Heading';
+import {IconContext} from './Icon';
 import React, {createContext, forwardRef, ReactNode, useContext} from 'react';
+import {Text, TextContext} from './Content';
 import {useDOMRef} from './useDOMRef';
 import {useLocale} from 'react-aria/I18nProvider';
 import {useSpectrumContextProps} from './useSpectrumContextProps';
@@ -153,12 +155,18 @@ const buttonStyles = style({
     }
   },
   lineHeight: 'ui',
-  display: 'flex',
-  flexGrow: 1,
+  display: 'grid',
+  gridTemplateAreas: [
+    'expand-button icon label'
+  ],
+  gridTemplateColumns: ['auto', 'auto', 'minmax(0, 1fr)'],
   alignItems: 'baseline',
-  paddingX: 'calc(self(minHeight) * 3/8 - 1px)',
+  '--spacingGap': {
+    type: 'marginEnd',
+    value: 'calc(self(minHeight) * 3/8 - 1px)'
+  },
+  paddingX: '--spacingGap',
   paddingY: centerPadding(),
-  gap: 'calc(self(minHeight) * 3/8 - 1px)',
   minHeight: {
     // compact is equivalent to 'control', but other densities have more padding.
     size: {
@@ -220,8 +228,7 @@ const chevronStyles = style({
   '--iconPrimary': {
     type: 'fill',
     value: 'currentColor'
-  },
-  flexShrink: 0
+  }
 });
 
 const InternalDisclosureHeader = createContext<{} | null>(null);
@@ -288,10 +295,19 @@ export const DisclosureTitle = forwardRef(function DisclosureTitle(props: Disclo
       style={UNSAFE_style}
       className={(UNSAFE_className ?? '') + headingStyle}>
       <Button className={(renderProps) => buttonStyles({...renderProps, size, density, isQuiet})} slot="trigger">
-        <CenterBaseline>
+        <CenterBaseline styles={style({gridArea: 'expand-button', marginEnd: '--spacingGap'})}>
           <Chevron size={size} className={chevronStyles({isExpanded, isRTL})} aria-hidden="true" />
         </CenterBaseline>
-        {props.children}
+        <Provider
+          values={[
+            [IconContext, {
+              render: centerBaseline({slot: 'icon', styles: style({gridArea: 'icon', marginEnd: 'text-to-visual', '--iconPrimary': {type: 'fill', value: 'currentColor'}})}),
+              styles: style({size: fontRelative(16)})
+            }],
+            [TextContext, {styles: style({gridArea: 'label'})}]
+          ]}>
+          {typeof props.children === 'string' ? <Text>{props.children}</Text> : props.children}
+        </Provider>
       </Button>
     </Heading>
   );

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

@@ -19,11 +19,14 @@ import {
 } from '../src/Accordion';
 
 import {ActionButton} from '../src/ActionButton';
+import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import {Key} from '@react-types/shared';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
+import People from '../s2wf-icons/S2_Icon_People_20_N.svg';
 import React from 'react';
 import {style} from '../style' with { type: 'macro' };
+import {Text} from '../src/Content';
 import {TextField} from '../src/TextField';
 
 
@@ -224,6 +227,7 @@ export const WithActionButton: Story = {
           <AccordionItem id="files">
             <AccordionItemHeader>
               <AccordionItemTitle>
+                <File />
                 Files
               </AccordionItemTitle>
               <ActionButton aria-label="Add new file"><NewIcon /></ActionButton>
@@ -248,3 +252,32 @@ export const WithActionButton: Story = {
     );
   }
 };
+
+export const WithIcon: Story = {
+  render: (args) => {
+    return (
+      <div className={style({minHeight: 240})}>
+        <Accordion {...args}>
+          <AccordionItem id="files">
+            <AccordionItemTitle>
+              <File />
+              <Text>Files</Text>
+            </AccordionItemTitle>
+            <AccordionItemPanel>
+              Files content
+            </AccordionItemPanel>
+          </AccordionItem>
+          <AccordionItem id="people">
+            <AccordionItemTitle>
+              <People />
+              <Text>People</Text>
+            </AccordionItemTitle>
+            <AccordionItemPanel>
+              <TextField label="Name" styles={style({maxWidth: 176})} placeholder="Enter your name" />
+            </AccordionItemPanel>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    );
+  }
+};

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

@@ -13,10 +13,12 @@
 import {ActionButton} from '../src/ActionButton';
 
 import {Disclosure, DisclosureHeader, DisclosurePanel, DisclosureTitle} from '../src/Disclosure';
+import File from '../s2wf-icons/S2_Icon_File_20_N.svg';
 import type {Meta, StoryObj} from '@storybook/react';
 import NewIcon from '../s2wf-icons/S2_Icon_New_20_N.svg';
 import React from 'react';
 import {style} from '../style' with { type: 'macro' };
+import {Text} from '../src/Content';
 
 
 const meta: Meta<typeof Disclosure> = {
@@ -142,3 +144,21 @@ export const WithActionButton: Story = {
   }
 };
 
+export const WithIcon: Story = {
+  render: (args) => {
+    return (
+      <div className={style({minHeight: 240})}>
+        <Disclosure {...args}>
+          <DisclosureTitle>
+            <File />
+            <Text>Files</Text>
+          </DisclosureTitle>
+          <DisclosurePanel>
+            Files content
+          </DisclosurePanel>
+        </Disclosure>
+      </div>
+    );
+  }
+};
+

packages/dev/s2-docs/pages/s2/Accordion.mdx

@@ -91,6 +91,41 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 </Accordion>
 ```
 
+### Slots
+
+`AccordionItemTitle` supports icons, `Text` as children.
+
+```tsx render
+"use client";
+import {Accordion, AccordionItem, AccordionItemTitle, AccordionItemPanel, AccordionItemHeader, Text} from '@react-spectrum/s2/Accordion';
+import Project from '@react-spectrum/s2/icons/Project';
+import Settings from '@react-spectrum/s2/icons/Settings';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+<Accordion>
+  <AccordionItem styles={style({width: 250})}>
+    <AccordionItemHeader>
+      {/*- begin highlight -*/}
+      <AccordionItemTitle>
+        <Project />
+        <Text>Project Settings</Text>
+      </AccordionItemTitle>
+      {/*- end highlight -*/}
+    </AccordionItemHeader>
+    <AccordionItemPanel>
+      Configure your project settings including name, description, and permissions.
+    </AccordionItemPanel>
+  </AccordionItem>
+  <AccordionItem id="preferences">
+    <AccordionItemTitle>
+      <Settings />
+      <Text>Preferences</Text>
+    </AccordionItemTitle>
+    <AccordionItemPanel>User preferences content</AccordionItemPanel>
+  </AccordionItem>
+</Accordion>
+```
+
 ## API
 
 ```tsx links={{Accordion: '#accordion', AccordionItem: '#accordionitem', AccordionItemHeader: '#accordionitemheader', AccordionItemTitle: '#accordionitemtitle', AccordionItemPanel: '#accordionitempanel'}}

packages/dev/s2-docs/pages/s2/Disclosure.mdx

@@ -73,6 +73,32 @@ import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 </Disclosure>
 ```
 
+### Slots
+
+`DisclosureTitle` supports icons, `Text` as children.
+
+```tsx render
+"use client"
+
+import {Disclosure, DisclosureTitle, DisclosurePanel, DisclosureHeader, Text} from '@react-spectrum/s2/Disclosure';
+import Project from '@react-spectrum/s2/icons/Project';
+import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
+
+<Disclosure styles={style({width: 250})}>
+  <DisclosureHeader>
+    {/*- begin highlight -*/}
+    <DisclosureTitle>
+      <Project />
+      <Text>Project Settings</Text>
+    </DisclosureTitle>
+    {/*- end highlight -*/}
+  </DisclosureHeader>
+  <DisclosurePanel>
+    Configure your project settings including name, description, and permissions.
+  </DisclosurePanel>
+</Disclosure>
+```
+
 ## API
 
 ```tsx links={{Disclosure: '#disclosure', DisclosureHeader: '#disclosureheader', DisclosureTitle: '#disclosuretitle', DisclosurePanel: '#disclosurepanel'}}