Skip to content

Conversation

@joshblack
Copy link
Member

Remove the nested <a> from TabNav.Link. This helps to avoid the following validateDOMNesting error that comes from React:

  console.error
    Warning: validateDOMNesting(...): <a> cannot appear as a descendant of <a>.
        at a
        at a
        at StyledComponent (/Users/joshblack/gh/primer/react/node_modules/styled-components/dist/styled-components.cjs.js:1950:5)
        at TabNav__TabNavLink
        at div
        at StyledComponent (/Users/joshblack/gh/primer/react/node_modules/styled-components/dist/styled-components.cjs.js:1950:5)
        at TabNav__TabNavTabList
        at nav
        at StyledComponent (/Users/joshblack/gh/primer/react/node_modules/styled-components/dist/styled-components.cjs.js:1950:5)
        at TabNav__TabNavNav
        at div
        at StyledComponent (/Users/joshblack/gh/primer/react/node_modules/styled-components/dist/styled-components.cjs.js:1950:5)
        at TabNav__TabNavBase
        at children (/Users/joshblack/gh/primer/react/src/TabNav.tsx:31:18)
        at div
        at StyledComponent (/Users/joshblack/gh/primer/react/node_modules/styled-components/dist/styled-components.cjs.js:1950:5)
        at Box
        at WrapperComponent (/Users/joshblack/gh/primer/react/node_modules/@wojtekmaj/enzyme-adapter-utils/src/createMountWrapper.jsx:46:26)

      at printWarning (node_modules/react-dom/cjs/react-dom.development.js:67:30)
      at error (node_modules/react-dom/cjs/react-dom.development.js:43:5)
      at validateDOMNesting (node_modules/react-dom/cjs/react-dom.development.js:10083:7)
      at createInstance (node_modules/react-dom/cjs/react-dom.development.js:10181:5)
      at completeWork (node_modules/react-dom/cjs/react-dom.development.js:19464:28)
      at completeUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22812:16)
      at performUnitOfWork (node_modules/react-dom/cjs/react-dom.development.js:22787:5)

This also updates the test to reference only the tab and no longer includes the link.

@joshblack joshblack requested review from a team and siddharthkp November 3, 2022 18:03
@changeset-bot
Copy link

changeset-bot bot commented Nov 3, 2022

⚠️ No Changeset found

Latest commit: c15e08f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@joshblack joshblack added the skip changeset This change does not need a changelog label Nov 3, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Nov 3, 2022

size-limit report 📦

Path Size
dist/browser.esm.js 78.87 KB (0%)
dist/browser.umd.js 79.52 KB (0%)

@joshblack joshblack temporarily deployed to github-pages November 3, 2022 18:11 Inactive
Copy link
Member

@broccolinisoup broccolinisoup left a comment

Choose a reason for hiding this comment

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

Looks like this test is written recently and seems like a valid case but should it be a link ? In the PR description, it mentions about a case where there is a nested button inside the tab so maybe instead of removing this test case, we can use a button element and still make sure to cover nested buttons test?

@joshblack
Copy link
Member Author

@broccolinisoup I think what they end up doing in Memex is changing the container <a> to a div for the "active tab" and so I could try doing that for the test to keep it in place 👀

@joshblack joshblack temporarily deployed to github-pages November 4, 2022 21:10 Inactive
@joshblack
Copy link
Member Author

bump @siddharthkp @broccolinisoup let me know if you have any questions!

@broccolinisoup
Copy link
Member

@broccolinisoup I think what they end up doing in Memex is changing the container <a> to a div for the "active tab" and so I could try doing that for the test to keep it in place 👀

Ah I see. Thanks for clarification! I feel like we are good without testing this case as it is very specific to their implementation and not necessarily a part of the TabNav functionality

@joshblack joshblack enabled auto-merge (squash) November 8, 2022 15:15
@joshblack joshblack temporarily deployed to github-pages November 8, 2022 15:21 Inactive
@joshblack joshblack merged commit af7e064 into main Nov 8, 2022
@joshblack joshblack deleted the test/update-tab-nav-test branch November 8, 2022 15:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

skip changeset This change does not need a changelog

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants