Skip to content

Fix <Tabs> sync issue with inconsistent use of icon on <TabItem> components#1811

Merged
delucis merged 3 commits intowithastro:mainfrom
HiDeoo:hd-fix-synced-tabs-label-icons
May 6, 2024
Merged

Fix <Tabs> sync issue with inconsistent use of icon on <TabItem> components#1811
delucis merged 3 commits intowithastro:mainfrom
HiDeoo:hd-fix-synced-tabs-label-icons

Conversation

@HiDeoo
Copy link
Copy Markdown
Member

@HiDeoo HiDeoo commented May 1, 2024

Description

This PR fixes an issue with synced tabs when <Tabs> sharing the same syncKey have <TabItem> components that inconsistently use icon or not.

The issue is due to the fact that labels (which need to be identical for tabs to sync) were coming from the textContent property on the tab link which gets the content of all elements. In the presence of an icon, the textContent property could potentially include extra spaces due to the presence of the SVG icon.
This pull request fixes the issue by using the innerText property instead of textContent to get the label text as it only returns the rendered text content, which is the exact label text we want to compare.

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented May 1, 2024

🦋 Changeset detected

Latest commit: fa9146f

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

This PR includes changesets to release 1 package
Name Type
@astrojs/starlight 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

@vercel
Copy link
Copy Markdown

vercel bot commented May 1, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Updated (UTC)
starlight ✅ Ready (Inspect) Visit Preview May 6, 2024 6:38pm

@github-actions github-actions bot added the 🌟 core Changes to Starlight’s main package label May 1, 2024
Copy link
Copy Markdown
Member

@delucis delucis left a comment

Choose a reason for hiding this comment

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

Thanks for the fix @HiDeoo! LGTM 🚀

@delucis delucis added the 🌟 patch Change that triggers a patch release label May 6, 2024
@delucis delucis merged commit fe06aa1 into withastro:main May 6, 2024
@astrobot-houston astrobot-houston mentioned this pull request May 6, 2024
HiDeoo added a commit to HiDeoo/starlight that referenced this pull request May 8, 2024
* main:
  i18n(zh-cn): Update docs about synced-tabs (withastro#1834)
  i18n(zh-cn): Update some docs about withastro#1620 & withastro#1613 (withastro#1835)
  Add more diagnostic help to error messages thrown by `<Steps>` (withastro#1838)
  i18n(zh-cn): Update components.mdx (withastro#1836)
  i18n(zh-cn): Update community-content.mdx (withastro#1833)
  Improve type checking job (withastro#1831)
  [ci] format
  [ci] release (withastro#1832)
  i18n(ru): update ru.json (withastro#1826)
  Fix `<Tabs>` sync issue with inconsistent use of `icon` on `<TabItem>` components (withastro#1811)
  Enable `BASE_URL` tests (withastro#1828)
Yoxnear pushed a commit to Yoxnear/starlight-custom that referenced this pull request Jul 23, 2025
…` components (withastro#1811)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🌟 core Changes to Starlight’s main package 🌟 patch Change that triggers a patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants