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

Header: add overflow #4768

Merged
merged 2 commits into from
Aug 1, 2024
Merged

Header: add overflow #4768

merged 2 commits into from
Aug 1, 2024

Conversation

siddharthkp
Copy link
Member

@siddharthkp siddharthkp commented Jul 23, 2024

We recommend rethinking how this component's CSS is implemented. While it currently focuses primarily on making sure items are vertically aligned, it does not account for cases where the content is wider than the viewport. This may require further design consideration (for instance, forcing content to break to a new line whenever there is insufficient space).

Before After
When there a lot of items, the Header makes the page grow wider and adds a scrollbar When there are a lot of items, the Header becomes scrollable without making the page wider
When there a lot of items, the Header makes the page grow wider and adds a scrollbar When there are a lot of items, the Header becomes scrollable without making the page wider

Note: This is a bit of a silly fix because it's not common at all to have a scrollable Header.

However, this component however is an outdated pattern that is barely used: 6 instances in dotcom out of 0 are as it's intended usage as a navigation header. 5 in other places. We have alternatives like UnderlineNav that are recommended.

So this feels like a safe change to make to pass an accessibility review without getting into a rabbit hole about correct usage or deprecation in this PR

Copy link

changeset-bot bot commented Jul 23, 2024

🦋 Changeset detected

Latest commit: 1dcfabb

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

@siddharthkp siddharthkp self-assigned this Jul 23, 2024
@github-actions github-actions bot added the staff Author is a staff member label Jul 23, 2024
Copy link
Contributor

github-actions bot commented Jul 23, 2024

size-limit report 📦

Path Size
packages/react/dist/browser.esm.js 92.35 KB (-0.02% 🔽)
packages/react/dist/browser.umd.js 92.71 KB (+0.03% 🔺)

Copy link
Contributor

@TylerJDev TylerJDev left a comment

Choose a reason for hiding this comment

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

Looks good!

I see there's some differing opinions on if 1.4.10 Reflow passes with a scrollbar in one dimension or if all content should be fully present in the viewport. I think this is a good approach, and if we need to iterate further in the future we can. I don't think we need to go the strict route since the usage of this component is limited, and part of the responsibility is on the consumer, at least for now.

@siddharthkp siddharthkp added this pull request to the merge queue Aug 1, 2024
@github-merge-queue github-merge-queue bot removed this pull request from the merge queue due to failed status checks Aug 1, 2024
@siddharthkp siddharthkp added this pull request to the merge queue Aug 1, 2024
Merged via the queue into main with commit b7c90ea Aug 1, 2024
41 checks passed
@siddharthkp siddharthkp deleted the header-add-overflow branch August 1, 2024 15:31
@primer primer bot mentioned this pull request Aug 1, 2024
@primer primer bot mentioned this pull request Oct 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
accessibility react staff Author is a staff member
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants