diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss index 6a3c87adee73..4b749e0dacdd 100644 --- a/packages/components/src/components/code-snippet/_code-snippet.scss +++ b/packages/components/src/components/code-snippet/_code-snippet.scss @@ -197,20 +197,19 @@ } } - //closed snippet container + //collapsed snippet container .#{$prefix}--snippet--multi .#{$prefix}--snippet-container { position: relative; order: 1; min-height: rem(56px); - max-height: rem(238px); - overflow: hidden; + max-height: 100%; + overflow-y: auto; transition: max-height $duration--moderate-01 motion(standard, productive); } // expanded snippet container .#{$prefix}--snippet--multi.#{$prefix}--snippet--expand .#{$prefix}--snippet-container { - max-height: 100%; padding-bottom: $spacing-05; transition: max-height $duration--moderate-01 motion(standard, productive); } @@ -220,7 +219,7 @@ word-wrap: break-word; } - // closed pre + // collapsed pre .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre { padding-right: $carbon--spacing-08; padding-bottom: rem(24px); diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 33d423097682..e3e837d7a362 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -383,6 +383,12 @@ Map { "light": Object { "type": "bool", }, + "maxCollapsedNumberOfRows": Object { + "type": "number", + }, + "maxExpandedNumberOfRows": Object { + "type": "number", + }, "onClick": Object { "type": "func", }, diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index bb2bf1df6442..3ed94de292d9 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js @@ -7,7 +7,13 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; -import { withKnobs, boolean, text, select } from '@storybook/addon-knobs'; +import { + withKnobs, + boolean, + text, + select, + number, +} from '@storybook/addon-knobs'; import CodeSnippet from '../CodeSnippet'; import CodeSnippetSkeleton from './CodeSnippet.Skeleton'; import mdx from './CodeSnippet.mdx'; @@ -43,6 +49,14 @@ const props = () => ({ copyButtonDescription: text('Copy button title', 'Copy code snippet'), ariaLabel: text('ARIA label', 'Container label'), wrapText: boolean('Wrap text (wrapText)', true), + maxCollapsedNumberOfRows: number( + 'maxCollapsedNumberOfRows: Specify the maximum number of rows to be shown when in collapsed view', + 15 + ), + maxExpandedNumberOfRows: number( + 'maxExpandedNumberOfRows: Specify the maximum number of rows to be shown when in expanded view', + 0 + ), }); export const inline = () => ( diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js index f451581785bf..f19bcfcd9b5c 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.js @@ -20,8 +20,9 @@ import copy from 'copy-to-clipboard'; const { prefix } = settings; -const rowHeightInPixels = 18; -const defaultCollapsedHeightInRows = 15; +const rowHeightInPixels = 16; +const defaultMaxCollapsedNumberOfRows = 15; +const defaultMaxExpandedNumberOfRows = 0; function CodeSnippet({ className, @@ -38,6 +39,8 @@ function CodeSnippet({ showLessText, hideCopyButton, wrapText, + maxCollapsedNumberOfRows = defaultMaxCollapsedNumberOfRows, + maxExpandedNumberOfRows = defaultMaxExpandedNumberOfRows, ...rest }) { const [expandedCode, setExpandedCode] = useState(false); @@ -93,23 +96,35 @@ function CodeSnippet({ ); }, [type, getCodeRefDimensions]); - useResizeObserver({ - ref: getCodeRef(), - onResize: () => { - if (codeContentRef?.current && type === 'multi') { - const { height } = codeContentRef.current.getBoundingClientRect(); - setShouldShowMoreLessBtn( - height > defaultCollapsedHeightInRows * rowHeightInPixels - ); - } - if ( - (codeContentRef?.current && type === 'multi') || - (codeContainerRef?.current && type === 'single') - ) { - debounce(handleScroll, 200); - } + useResizeObserver( + { + ref: getCodeRef(), + onResize: () => { + if (codeContentRef?.current && type === 'multi') { + const { height } = codeContentRef.current.getBoundingClientRect(); + + if ( + maxCollapsedNumberOfRows > 0 && + (maxExpandedNumberOfRows === 0 || + maxExpandedNumberOfRows > maxCollapsedNumberOfRows) && + height > maxCollapsedNumberOfRows * rowHeightInPixels + ) { + setShouldShowMoreLessBtn(true); + } else { + setShouldShowMoreLessBtn(false); + setExpandedCode(false); + } + } + if ( + (codeContentRef?.current && type === 'multi') || + (codeContainerRef?.current && type === 'single') + ) { + debounce(handleScroll, 200); + } + }, }, - }); + [type, maxCollapsedNumberOfRows, maxExpandedNumberOfRows, rowHeightInPixels] + ); useEffect(() => { handleScroll(); @@ -156,6 +171,23 @@ function CodeSnippet({ ); } + let containerStyle = {}; + if (type === 'multi') { + if (expandedCode) { + if (maxExpandedNumberOfRows > 0) { + containerStyle.style = { + maxHeight: maxExpandedNumberOfRows * rowHeightInPixels, + }; + } + } else { + if (maxCollapsedNumberOfRows > 0) { + containerStyle.style = { + maxHeight: maxCollapsedNumberOfRows * rowHeightInPixels, + }; + } + } + } + return (
+ onScroll={(type === 'single' && handleScroll) || null} + {...containerStyle}>