fix: ResponseStatus QA

[catherine]

✨ Changes:

• fix: move paddingBottom from disclosure panel to wrapper so that it doesn't impact the height transition
• fix: don't stretch disclosure so that focus ring hugs content

📝 Test Instructions:

• content jump flicker no longer happening when expanding/collapsing ExecutionTraceItems
• tab to parent ResponseStatus and child ExecutionTraceItems and see focus ring hug content

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Build successful! 🎉

• View the storybook
• View the S2 storybook
• View the S2 docs
• View the React Aria docs

[rspbot]

Agent Skills Changes

Removed (6)

• react-aria/skills/react-aria/references/utilities/useAsyncList.md
• react-aria/skills/react-aria/references/utilities/useListData.md
• react-aria/skills/react-aria/references/utilities/useTreeData.md
• s2/skills/react-spectrum-s2/references/react-aria/utilities/useAsyncList.md
• s2/skills/react-spectrum-s2/references/react-aria/utilities/useListData.md
• s2/skills/react-spectrum-s2/references/react-aria/utilities/useTreeData.md

Modified (17)

• react-aria/skills/index.json $\color{red}{-3}$
• react-aria/skills/react-aria/SKILL.md $\color{red}{-3}$
• react-aria/skills/react-aria/references/components/Disclosure/useDisclosure.md $\color{red}{-1}$
• react-aria/skills/react-aria/references/components/GridList/useGridList.md $\color{red}{-1}$
• react-aria/skills/react-aria/references/components/Popover/usePopover.md $\color{red}{-1}$
• react-aria/skills/react-aria/references/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• react-aria/skills/react-aria/references/components/Table/useTable.md $\color{red}{-4}$
• react-aria/skills/react-aria/references/components/Toast/useToast.md $\color{red}{-1}$
• react-aria/skills/react-aria/references/llms.txt $\color{red}{-3}$
• s2/skills/index.json $\color{red}{-3}$
• s2/skills/react-spectrum-s2/references/react-aria/components/Disclosure/useDisclosure.md $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/react-aria/components/GridList/useGridList.md $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/react-aria/components/Popover/usePopover.md $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/react-aria/components/Separator/useSeparator.md $\color{green}{+1}$ $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/react-aria/components/Table/useTable.md $\color{red}{-4}$
• s2/skills/react-spectrum-s2/references/react-aria/components/Toast/useToast.md $\color{red}{-1}$
• s2/skills/react-spectrum-s2/references/react-aria/llms.txt $\color{red}{-3}$

Install

React Spectrum S2:

npx skills add https://d1pzu54gtk2aed.cloudfront.net/pr/ec6f7b1975103728e63a1e25879fb31dea497929/

React Aria:

npx skills add https://d5iwopk28bdhl.cloudfront.net/pr/ec6f7b1975103728e63a1e25879fb31dea497929/

[snowystinger]

Not sure what happened to the spacing between items? was that intentional?

Should all the content of the top level response status be only 2px in from the outside, it either doesn't look like enough to visually separate, or just ever so slightly off if it's supposed to align. It looks like the values match Disclosure, so I'm betting it's an issue with the padding on the ol, maybe reduce it from 4 to 2?

[snowystinger]

Is this correct? It looks like the child has CenterBaseline for an icon, so this should be display flex already.
Then I think we can remove the marginStart from detailTriggerChevronStyles

[snowystinger]

I think we could get rid of this negative margin if we changed the item to display as a grid

template areas
[['icon', 'button'],
 ['line', 'content']]

then we could center baseline the icon vertically in it's cell, which would be the same height as the text, even if the text were to wrap (don't know if that's a thing)

the line would just have stretch set

I think this would also help with eventual changes to font size or tshirt size