-
Notifications
You must be signed in to change notification settings - Fork 1.8k
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(CodeSnippet): overflow indicators updated onResize #9605
fix(CodeSnippet): overflow indicators updated onResize #9605
Conversation
✔️ Deploy Preview for carbon-react-next ready! 🔨 Explore the source changes: 3970da2 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-react-next/deploys/613a7ba182bcc60007b033a9 😎 Browse the preview: https://deploy-preview-9605--carbon-react-next.netlify.app |
✔️ Deploy Preview for carbon-elements ready! 🔨 Explore the source changes: 3970da2 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-elements/deploys/613a7ba15576a800080b09c7 😎 Browse the preview: https://deploy-preview-9605--carbon-elements.netlify.app |
✔️ Deploy Preview for carbon-components-react ready! 🔨 Explore the source changes: 3970da2 🔍 Inspect the deploy log: https://app.netlify.com/sites/carbon-components-react/deploys/613a7ba190f6be0007cd414a 😎 Browse the preview: https://deploy-preview-9605--carbon-components-react.netlify.app |
There was a problem hiding this 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 on Edge in Ubuntu 21 👍🏾
Closes #8441
Codesnippet had a bug that did not update the "overflow indicator" (gradient) when window was resized. This PR addresses that bug.
Removed
debounce
callback in theresizeObserver
because I realized it wasn't actually running the callback after 200ms. I think this is a lodash bug but I couldn't find any helpful issues related to this bug.How I came to this conclusion
handleScroll()
handleScroll
was being useda. within a
useEffect
hookb. within
useResizeObserver
which has anonResize
callback that updates several states for multi & single line snippetsc. within
onScroll
for the single & multilinediv
shasLeftOverflow
hasRightOverflow
were being updated properly each timehandleScroll
was being calledconsole.log
within theonResize
conditional wherehandleScroll
was being called to see if we were even getting within that conditional when resizing.We were "getting there". Which then led me to realize that for some reason, the debounce callback wasn't working.
handleScroll
instead and tested resizing the window. This time the overflow indicator states were updated properly.onResize
, I figured it was ok.Testing / Reviewing
a. check that right overflow indicator displays initially
b. scroll slightly right and check that left and right indicators display
c. scroll all the way right, and right indicator should go away
d. now resize the window so that the codesnippet component becomes smaller. The resizing should update the overflow indicators.
You can test it against this video (recording of bug) and notice the overflow indicator working on window resize.
Screen.Recording.2021-08-25.at.11.27.05.AM.mov