Skip to content
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.

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

<UnderlineNav.Item /> without counter shows loading indicator #4672

Open
cihad opened this issue Jun 14, 2024 · 2 comments · May be fixed by #4745
Open

<UnderlineNav.Item /> without counter shows loading indicator #4672

cihad opened this issue Jun 14, 2024 · 2 comments · May be fixed by #4745
Labels
bug Something isn't working react

Comments

@cihad
Copy link
Contributor

cihad commented Jun 14, 2024

Description

If loadingCounters is true and an UnderlineNav.Item does not have a counter prop, the loading indicator is shown. Normally, if there are 10 items, if 1 or 2 of them do not have a counter prop, it does not pose a problem. But if there are no counters in 5 of them, it is not a nice view.

loadingCounters: true:

Screenshot 2024-06-14 115757

loadingCounters: false:
Screenshot 2024-06-14 115648

Steps to reproduce

Sample view:

<UnderlineNav aria-label="Repository" loadingCounters={true}>
  <UnderlineNav.Item>Inspect</UnderlineNav.Item>
  <UnderlineNav.Item counter={0}>Resources</UnderlineNav.Item>
  <UnderlineNav.Item counter={0}>Packages</UnderlineNav.Item>
  <UnderlineNav.Item>Code</UnderlineNav.Item>
  <UnderlineNav.Item>Docs</UnderlineNav.Item>
  <UnderlineNav.Item>Debug</UnderlineNav.Item>
</UnderlineNav>

Version

36.7.1

Browser

No response

@cihad cihad added the bug Something isn't working label Jun 14, 2024
Copy link
Contributor

Uh oh! @cihad, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

@broccolinisoup
Copy link
Member

Hello @cihad 👋 Thanks for raising this issue. We think it makes sense and will give it a try. Feel free to push a PR if you would like, otherwise we will move this in our backlog.

@cihad cihad linked a pull request Jul 17, 2024 that will close this issue
13 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working react
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants