add scroll to top/bottom buttons to all pages #4607
Conversation
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
tekton-robot
added
the
do-not-merge/work-in-progress
tekton-robot
added
the
size/L
|
/kind feature |
tekton-robot
added
kind/feature
LyndseyBu
force-pushed
the
log_scroll
branch
from
ea42c7b to
f8fa0f6
Compare
tekton-robot
removed
the
do-not-merge/work-in-progress
LyndseyBu
force-pushed
the
log_scroll
branch
from
7f49dbb to
16b2c17
Compare
AlanGreene
left a comment
AlanGreene
left a comment
There was a problem hiding this comment.
Looks good and works well in my testing so far. Just a few minor comments, let me know if you have any questions.
| right: .75rem; | ||
| bottom: 1rem; |
There was a problem hiding this comment.
Make sure we use logical properties for positioning:
| right: .75rem; | |
| bottom: 1rem; | |
| inset-inline-end: .75rem; | |
| inset-block-end: 1rem; |
| z-index: 10000; | ||
| } | ||
| .tkn--scroll-buttons--maximized{ | ||
| right: 2rem; |
There was a problem hiding this comment.
| right: 2rem; | |
| inset-inline-end: 2rem; |
| id="log-scroll-to-start-btn" | ||
| kind="secondary" | ||
| onClick={scrollToTop} | ||
| renderIcon={() => ( |
There was a problem hiding this comment.
Do we need to provide the title again here or does iconDescription not already cover it?
There was a problem hiding this comment.
yep I just checked the carbon doc and icon description will cover it, will make the updates
|
|
||
| const scrollToTop = () => { | ||
| if (maximizedContainerRef.current) { | ||
| maximizedContainerRef.current.scrollTo({ top: 0, behavior: 'smooth' }); |
There was a problem hiding this comment.
If we're enabling smooth scrolling I think we also need to check https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion, and only use smooth if the user has no preference set.
3 participants
Changes
Resolves #4561
Submitter Checklist
As the author of this PR, please check off the items in this checklist:
functionality, content, code)
/kind <type>. Valid types are bug, cleanup, design, documentation, feature, flake, misc, question, tepRelease Notes