feat(react): add horizontal overflow to Tabs in v11 #10799
Conversation
…at/horizontal-overflow-tabs
|
✔️ Deploy Preview for carbon-react-next ready! 🔨 Explore the source changes: bb8932c 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/621fd0c39915b50008c4565a 😎 Browse the preview: https://deploy-preview-10799--carbon-react-next.netlify.app |
|
✔️ Deploy Preview for carbon-elements ready! 🔨 Explore the source changes: bb8932c 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/621fd0c3a2449500074260fe 😎 Browse the preview: https://deploy-preview-10799--carbon-elements.netlify.app |
|
✔️ Deploy Preview for carbon-components-react ready! 🔨 Explore the source changes: bb8932c 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/621fd0c344bc4a00086ae45f 😎 Browse the preview: https://deploy-preview-10799--carbon-components-react.netlify.app |
…at/horizontal-overflow-tabs
…y-carbon-fork into feat/horizontal-overflow-tabs
abbeyhrt
requested review from
laurenmrice
and removed request for
laurenmrice
…y-carbon-fork into feat/horizontal-overflow-tabs
|
I think I broke it. When I press and hold to the end I can't go back to the left no matter what I click Screen.Recording.2022-03-02.at.1.57.55.AM.mov |
|
@aledavila Yeah it was :/ that should be fixed now if you want to check it out! |
…stem#10799) * chore: check in progress * chore: check in progress * chore: check in progress * chore: check in progress * chore: check in progress * feat(react): add horizontal overflow to tabs * fix(react): adjust styles * feat(react): add horizontal overflow to tabs * chore(react): remove extraneous changes * chore(react): remove extraneous changes * fix(react): update snapshots and failing test * fix(react): replace use layout with use isomorphic * fix(react): fix incorrect import * fix(react): scroll tab into view when clicked * fix(react): scroll tab into view when clicked * feat(tabs): update scroll position on click * fix(tabs): update usePressable and fix interop with long press * fix(tabs): update animation mechanism and fix safari text selection issue * fix(tabs): add will-change: scroll-position * chore(tabs): remove extra comments on usePressable * fix(react): adjust next button visible and remove transparent keyowrd Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com> Co-authored-by: Josh Black <josh@josh.black>
Closes #10249
This was a doozy.
usePressable. By default, the events are called in this order: onMouseDown -> onMouseUp -> onClick. Because of this, usePressable coordinates whenonClick,onMouseDown, andonMouseUpare called so that onMouseDown isn't called when a user just clicks and that, if a user has been pressing and holding onMouseDown,onClickisn't called after it's released.Testing / Reviewing
Go to the Tabs stories in
nextstorybook and try out the horizontal overflow, holding press and just clicking. The first story has been changed to be in a small container so you can mess around with it (I'll remove before merging).With the other stories, test out that the overflow updates appropriately on resize.