-
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
feat(CodeSnippet): set closed and expanded max number of rows #8085
feat(CodeSnippet): set closed and expanded max number of rows #8085
Conversation
defaulted the height to show everything (100%) added two new props maxClosedNumberOfRows and maxExpandedNumberOfRows added logic using the new props to determine when to show moreLessBtn added maxHeight style based on new props
Deploy preview for carbon-elements ready! Built with commit 1735893 |
Deploy preview for carbon-components-react ready! Built without sensitive environment variables with commit 1735893 https://deploy-preview-8085--carbon-components-react.netlify.app |
Where can I see the conformance list for the platforms and browsers Carbon supports? The reason being... I viewed CodeSnippet on my Samsung Tablet and the number of lines displayed does not match the max values given. |
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.
Carbon targets evergreen browsers, but that would include the mobile variants so I think the issue with the incorrect number of lines being shown on mobile browsers should be addressed together
@emyarod You mention evergreen browsers... can you point me to the conformance text on the Carbon Design System pages that mentions this? The list of evergreen browsers (I learnt something) is huge and my ability to test them is limited (I can do mac, win, Samsung Tab S2, and a very old chromebook) so hard to tell if it works everywhere. |
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.
also requesting ux/visual review for this feature
Since this PR introduces the ability to set the max number of rows when expanded to less than the total number of lines, I think we'll also need to add a selector that allows vertical scrolling, something like .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand
.#{$prefix}--snippet-container {
overflow-y: auto;
} |
I completely agree that overflow(scrollbars) should be taken into account for this. |
@guigueb in the current implementation, when the content is expanded, it shows every line of code. If this PR introduces the ability to show less than the max number, you need to be able to scroll to the bottom to view all the code, and should not be handled in a separate PR. Example: In the preview, set the max expanded to |
I aware of the issue and agree, I tried to address this with my other PR - and was told to stick to the props. With current CodeSnippet showing 100% if there are 20000 lines you see only what you can... and the rest of the code cannot be scrolled to (same issue different number of max rows). |
@guigueb it seems like we just need to add the line I suggested to fix that issue. The current implementation will push all other content down, no matter the number of lines. I'm not seeing any "unreachable" code |
allow snippet-mult + snippet-container to auto scroll, both x and y remove scroll/overflow from nested snippet-expand, pre, and code conditions this will show the horizontal scroll when the snippet is closed or expanded it is a behavour change/bug fix, it will address 7574
add background to buttons to stop scrollbars from stomping on them
changing to overflow - from -x/-y - on the snippet-container caused issues with scrollbars colliding with the buttons. for now only add overflow-y and address overflow clean up and scrollbars/button collisions in carbon-design-system#7574
…ax-number-of-rows
packages/components/src/components/code-snippet/_code-snippet.scss
Outdated
Show resolved
Hide resolved
apply it for both closed and expanded modes
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.
Thanks for working on this! LGTM 👍 ✅
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.
Just one small piece of feedback on prop naming. Looks great otherwise!
changed closed to collapsed
update snapshot
rename closed to collapsed in the story
…set-closed-and-expanded-max-number-of-rows
…ax-number-of-rows
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 like it's working and looking correct to me!
…ax-number-of-rows
defaulted the height to show everything (100%)
added two new props maxClosedNumberOfRows and maxExpandedNumberOfRows
added logic using the new props to determine when to show moreLessBtn
added maxHeight style based on new props
Closes #
#7579
Testing / Reviewing
See 7579 for the tests to verify this PR.
Tested:
MacOS - Chrome, FireFox, and Safari
Win10 - Chrome, FireFox, and Edge
The margin fix described in 7582 was not done based on comments in 7826.
Any issues with (scrollbar, WCAG 1.4.10 compliance, minHeight, and overFlow indicators) have been discussed in 7826 will be addressed in these future PRs.
8056 CodeSnippet: there should be a way to set the min number of rows when in closed and expanded mode
7574 CodeSnippet: missing horizontal scrollbar when type is multi and there is a long row of data
8057 CodeSnippet: the scrollable content needs to be WCAG 1.4.10 compliant
8059 CodeSnippet: Remove or improve the overflow indicators