fix(Stack): correctly forward a Ref

[francinelucca]

Closes #5446

Changelog

New

• Wrap Stack and StackItem in forwardRef call

Rollout strategy

• Patch release
• Minor release
• Major release; if selected, include a written rollout or migration plan
• None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 9b47199

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[Copilot]

Pull Request Overview

This PR ensures that both Stack and StackItem components correctly forward refs to their underlying DOM elements by wrapping them in forwardRef.

• Imported and applied forwardRef to Stack
• Imported and applied forwardRef to StackItem
• Adjusted prop types to include ref props

Comments suppressed due to low confidence (1)

packages/react/src/Stack/Stack.tsx:130

• [nitpick] The parameter name forwardRef shadows the imported forwardRef function and is inconsistent with the Stack component’s forwardedRef. Consider renaming this parameter to forwardedRef.

forwardRef: React.Ref<HTMLDivElement> | undefined,

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	94.56 KB (+0.08% 🔺)
packages/react/dist/browser.umd.js	94.52 KB (-0.1% 🔽)

[joshblack]

I think the type for this will get tricky because the forwardRef type should match whatever As is and I believe with the setup now it would always be HTMLDivElement.

The way this is typed also seems to be making the props inferred as any so they won't show up in autocomplete / won't fail if passed the wrong value (let me know if you're not seeing this locally though, could be something on my end)

 <Stack
  as="span"
  ref={node => {
    // `node` is `HTMLDivElement` instead of `HTMLSpanElement`
  }}
  // I don't think this will fail TS now the way the types are inferred
  gap="nonsense"
/>

[francinelucca]

Good catch! I didn't notice 😅. I think I fixed it now, lmk what you think!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[primer-integration]

🟢 golden-jobs completed with status success.

[joshblack]

I think since we're casting StackItem below with as that the generic here and the StackItemProps/ref can also be removed 👍

[francinelucca]

ah yeah my bad, fixed!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

[github-actions]

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!