SubNav: Update selected styles to only apply to data-selected='true'

[broccolinisoup]

When the SunNav component is used in an environment with practical data, it is high likely that the selected attribute will be used in each SubNav children and their value will be conditionally rendered to true or false. Therefore the generated HTML will be

<a data-selected="false" aria-current="false" href="#nav1">Nav 1</a>
<a data-selected="true" aria-current="true" href="#nav2">Nav 2</a>
<a data-selected="false" aria-current="false" href="#nav3">Nav 3</a>

Currently the way we apply the selected styles are causing bug because the styles are applied to all links because all have data-selected property.

Here is an example from RL that shows the bug

There is currently no usage of SubNav at dotcom - this is why we probably didn't noticed the issue so far.

Changelog

New

Changed

• Instead of selecting data-selected attribute to apply selected styles, I updated the code to select data-selected="true"

Removed

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

If you could edit the Selected story so that each children have selected prop. You can repro the issue and with the change in this PR, you can verify the fix.

export const Selected = () => {
  const [selectedItem, setSelectedItem] = React.useState('home')

  return (
    <SubNav aria-label="Main">
      <SubNav.Links>
        <SubNav.Link href="#home" selected={selectedItem === 'home'}>
          Home
        </SubNav.Link>
        <SubNav.Link href="#documentation" selected={selectedItem === 'documentation'}>
          Documentation
        </SubNav.Link>
        <SubNav.Link href="#support" selected={selectedItem === 'support'}>
          Support
        </SubNav.Link>
      </SubNav.Links>
    </SubNav>
  )
}

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: 0ac27cd

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!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	105.9 KB (0%)
packages/react/dist/browser.umd.js	106.14 KB (0%)

[siddharthkp]

Thank you!