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

fix(Tabs): select tab do not vertical scroll into view #6974

Merged
merged 3 commits into from
Oct 7, 2020

Conversation

gptt916
Copy link
Contributor

@gptt916 gptt916 commented Oct 5, 2020

Closes #6973

Prevent vertical scrolling when selecting tabs

Changelog

No longer vertically scrolls on new tab selection.

Use regular (bool) argument for the scrollIntoView api instead of the experimental (object) type argument, ref: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Testing / Reviewing

  1. Go to the storybook and open the storybook addons panel (Keyboard press 'A', or via the storybook menu)
  2. Drag the addons section such that it covers half the container portion (so the canvas is scrollable)
  3. Scroll the panel such that it's at the very top (i.e. showing a gap between the tabs and the top of the storybook container)
    image
  4. Click on the 2nd tab, it should no longer scroll vertically

@gptt916 gptt916 requested a review from a team as a code owner October 5, 2020 18:19
change experimental argument to non experimental argument type
@netlify
Copy link

netlify bot commented Oct 5, 2020

Deploy preview for carbon-elements ready!

Built with commit b2afa43

https://deploy-preview-6974--carbon-elements.netlify.app

@netlify
Copy link

netlify bot commented Oct 5, 2020

Deploy preview for carbon-elements ready!

Built with commit d1ed5c8

https://deploy-preview-6974--carbon-elements.netlify.app

@netlify
Copy link

netlify bot commented Oct 5, 2020

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit b2afa43

https://deploy-preview-6974--carbon-components-react.netlify.app

@netlify
Copy link

netlify bot commented Oct 5, 2020

Deploy preview for carbon-components-react ready!

Built without sensitive environment variables with commit d1ed5c8

https://deploy-preview-6974--carbon-components-react.netlify.app

Copy link
Member

@emyarod emyarod 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 to me, thanks for the fix

Copy link
Collaborator

@tw15egan tw15egan 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 quick fix 👍 ✅

@kodiakhq kodiakhq bot merged commit dabc9b5 into carbon-design-system:master Oct 7, 2020
@gptt916 gptt916 deleted the m-nick-tabs-fix branch October 7, 2020 18:30
tw15egan pushed a commit to tw15egan/carbon that referenced this pull request Oct 7, 2020
…-system#6974)

* fix(Tabs): select tab do not vertical scroll into view

* fix(Tabs): change argument type for scrollIntoView api

change experimental argument to non experimental argument type

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
@andreancardona andreancardona removed their request for review October 7, 2020 18:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tabs component scrolls tabs into view on click, no way to stop this behaviour
3 participants