Center S2 icons vertically inside the AccordionItemTitle

[javascriptjedi]

Provide a general summary of the feature here

The documentation implies that icons are supported contend inside of the AccordionItemTitle component. While they do render, they are not vertically aligned, via flex styling, like the rest of the content. The request is to automatically vertically align all content, but certainly supported components that are mentioned in the documentation.

🤔 Expected Behavior?

Ideally this component automatically detects icons and centers the content automatically. The next best option would be to allow the stlye macro styles to apply to the internally created element.

This may not be the best icon to demonstrate centering, a more-square one highlights the problematic default styilng better

😯 Current Behavior

Use the following code to see the problem (StackBlitz):

import {Accordion, AccordionItem, AccordionItemTitle, AccordionItemPanel, AccordionItemHeader} from '@react-spectrum/s2';
import User from '@react-spectrum/s2/icons/User'
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

export default function Example() {
  return (
    <Accordion>
      <AccordionItem styles={style({width: 250})}>
          <AccordionItemTitle><User />User Settings</AccordionItemTitle>
        <AccordionItemPanel>
          Configure your project settings including name, description, and permissions.
        </AccordionItemPanel>
      </AccordionItem>
      <AccordionItem id="preferences">
        <AccordionItemTitle>Preferences</AccordionItemTitle>
        <AccordionItemPanel>User preferences content</AccordionItemPanel>
      </AccordionItem>
    </Accordion>
    
  );
}

---

Besides the general problem mentioned above there are two other problems that prevent workarounds:

• If you use the style macro on the AccordionItemTitle component, it only applies the styling to the container div of the item and the icon, which is inside the "internal" button, remains uncentered in this scenario.

• If you use an AccordionItemHeader and an AccordionItemTitle, the icon appears outside and the chevron and collapse/expand button appears to the right. The "title" isn't just the title.

import {Accordion, AccordionItem, AccordionItemHeader, AccordionItemTitle, AccordionItemPanel} from '@react-spectrum/s2';
import User from '@react-spectrum/s2/icons/User'
import {style} from '@react-spectrum/s2/style' with {type: 'macro'};

export default function Example() {
  return (
    <Accordion>
      <AccordionItem styles={style({width: 250})}>
        <AccordionItemHeader>
          <User />
          <AccordionItemTitle>User Settings</AccordionItemTitle>
        </AccordionItemHeader>
        <AccordionItemPanel>
          Configure your project settings including name, description, and permissions.
        </AccordionItemPanel>
      </AccordionItem>
      <AccordionItem id="preferences">
        <AccordionItemTitle>Preferences</AccordionItemTitle>
        <AccordionItemPanel>User preferences content</AccordionItemPanel>
      </AccordionItem>
    </Accordion>
  );
}

💁 Possible Solution

No response

🔦 Context

I am trying to add visually-related icons to the text in the accordion title sections to match a design provided by our UX designers who are attempting to use Spectrum S2 as our base component system.

💻 Examples

No response

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[javascriptjedi]

import Calendar from '@react-spectrum/s2/icons/Calendar'

is a better example:

Ideally it would look like this: