Skip to content

fix(Stack): correctly forward a Ref #6111

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

fix(Stack): correctly forward a Ref #6111

wants to merge 10 commits into from
+66 −48

Conversation

francinelucca
Copy link
Member

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

@Copilot Copilot AI review requested due to automatic review settings May 22, 2025 15:23
@francinelucca francinelucca requested a review from a team as a code owner May 22, 2025 15:23
@francinelucca francinelucca requested a review from joshblack May 22, 2025 15:23
@changeset-bot changeset-bot
Copy link

changeset-bot bot commented May 22, 2025 •
edited
Loading

🦋 Changeset detected

Latest commit: ee7e43e

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 github-actions bot added the staff Author is a staff member label May 22, 2025
@github-actions github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 22, 2025
@github-actions GitHub Actions
Copy link
Contributor

👋 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
Copilot AI reviewed May 22, 2025
View reviewed changes
Copy link
Contributor

@Copilot Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 github-actions bot requested a deployment to storybook-preview-6111 May 22, 2025 15:26 Abandoned
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented May 22, 2025 •
edited
Loading

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 94.37 KB (-0.07% 🔽)
packages/react/dist/browser.umd.js 94.4 KB (-0.17% 🔽)

@github-actions github-actions bot requested a deployment to storybook-preview-6111 May 22, 2025 15:29 Abandoned
@github-actions github-actions bot temporarily deployed to storybook-preview-6111 May 22, 2025 15:43 Inactive
joshblack
joshblack requested changes May 22, 2025
View reviewed changes
packages/react/src/Stack/Stack.tsx Outdated
className,
...rest
}: StackProps<As> & React.ComponentPropsWithRef<ElementType extends As ? As : 'div'>,
forwardedRef: React.Ref<HTMLDivElement> | undefined,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"
/>

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@francinelucca francinelucca requested a review from joshblack May 22, 2025 18:31
@github-actions github-actions bot requested a deployment to storybook-preview-6111 May 22, 2025 18:37 Abandoned
@github-actions github-actions bot temporarily deployed to storybook-preview-6111 May 22, 2025 18:51 Inactive
@github-actions github-actions bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels May 22, 2025
joshblack
joshblack requested changes May 23, 2025
View reviewed changes
@github-actions github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 28, 2025
@github-actions GitHub Actions
Copy link
Contributor

👋 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!

@francinelucca francinelucca requested a review from joshblack May 28, 2025 22:37
@github-actions GitHub Actions
Copy link
Contributor

👋 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 github-actions bot requested a deployment to storybook-preview-6111 May 28, 2025 22:40 Abandoned
@github-actions github-actions bot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 28, 2025
@github-actions GitHub Actions
Copy link
Contributor

👋 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 github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 28, 2025
@github-actions github-actions bot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 28, 2025
@github-actions GitHub Actions
Copy link
Contributor

👋 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 github-actions bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 28, 2025
@github-actions github-actions bot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels May 28, 2025
@github-actions GitHub Actions
Copy link
Contributor

👋 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 github-actions bot temporarily deployed to storybook-preview-6111 May 28, 2025 22:56 Inactive
@github-actions github-actions bot removed the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label May 28, 2025
@github-actions github-actions bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh labels May 28, 2025
@primer-integration
Copy link

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/380422

@primer-integration
Copy link

🔴 golden-jobs completed with status failure.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

Copilot code review Copilot Copilot left review comments

@joshblack joshblack Awaiting requested review from joshblack

Requested changes must be addressed to merge this pull request.

Assignees
No one assigned
Labels
integration-tests: failing Changes in this PR cause breaking changes in gh/gh staff Author is a staff member
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Stack does not properly forward ref
2 participants
@francinelucca @joshblack