From 5417c4e30b11c22209817afcf8e272451a7a90b7 Mon Sep 17 00:00:00 2001 From: Eric Charpentier <22177887+echarpibm@users.noreply.github.com> Date: Wed, 7 Oct 2020 10:32:53 -0400 Subject: [PATCH] feat(CodeSnippet): add support for word wrap (#6960) * feat(CodeSnippet): add support for word wrap * feat(CodeSnippet): change documentation for consistency * test(snapshot): update snapshot tests Co-authored-by: TJ Egan Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com> --- .../code-snippet/_code-snippet.scss | 5 +++ .../__snapshots__/PublicAPI-test.js.snap | 4 ++ .../CodeSnippet/CodeSnippet-story.js | 40 ++++++++++++++++--- .../src/components/CodeSnippet/CodeSnippet.js | 8 ++++ .../components/CodeSnippet/CodeSnippet.mdx | 3 +- 5 files changed, 53 insertions(+), 7 deletions(-) diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss index b5b2e6f8a28c..3d2eb89fd1fb 100644 --- a/packages/components/src/components/code-snippet/_code-snippet.scss +++ b/packages/components/src/components/code-snippet/_code-snippet.scss @@ -179,6 +179,11 @@ transition: max-height $duration--moderate-01 motion(standard, productive); } + .#{$prefix}--snippet--multi.#{$prefix}--snippet--wraptext pre { + white-space: pre-wrap; + word-wrap: break-word; + } + // closed pre .#{$prefix}--snippet--multi .#{$prefix}--snippet-container pre { padding-right: $carbon--spacing-08; diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 45d28a6fe85a..291c7334e09d 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -285,6 +285,7 @@ Map { "showLessText": "Show less", "showMoreText": "Show more", "type": "single", + "wrapText": false, }, "propTypes": Object { "ariaLabel": Object { @@ -330,6 +331,9 @@ Map { ], "type": "oneOf", }, + "wrapText": Object { + "type": "bool", + }, }, }, "ComboBox" => Object { diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js index 0d223212c13d..573fbd1bec07 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js @@ -30,12 +30,39 @@ export const inline = () => ( ); export const multiline = () => ( - - {`@mixin grid-container { - width: 100%; - padding-right: padding(mobile); - padding-left: padding(mobile);`} - +
+ + {` "scripts": { + "build": "lerna run build --stream --prefix --npm-client yarn", + "ci-check": "carbon-cli ci-check", + "clean": "lerna run clean && lerna clean --yes && rimraf node_modules", + "doctoc": "doctoc --title '## Table of Contents'", + "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'", + "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'", + "lint": "eslint actions config codemods packages", + "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables", + "sync": "carbon-cli sync", + "test": "cross-env BABEL_ENV=test jest", + "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'" + }, + "resolutions": { + "react": "~16.9.0", + "react-dom": "~16.9.0", + "react-is": "~16.9.0", + "react-test-renderer": "~16.9.0" + }, + "devDependencies": { + "@babel/core": "^7.10.0", + "@babel/plugin-proposal-class-properties": "^7.7.4", + "@babel/plugin-proposal-export-default-from": "^7.7.4", + "@babel/plugin-proposal-export-namespace-from": "^7.7.4", + "@babel/plugin-transform-runtime": "^7.10.0", + "@babel/preset-env": "^7.10.0", + "@babel/preset-react": "^7.10.0", + "@babel/runtime": "^7.10.0", + "@commitlint/cli": "^8.3.5",`} + +
); export const singleline = () => ( @@ -85,6 +112,7 @@ const props = () => ({ onClick: action('onClick'), copyButtonDescription: text('Copy button title', 'Copy code snippet'), ariaLabel: text('ARIA label', 'Container label'), + wrapText: boolean('Wrap text', true), }); export const playground = () => ( diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js index 3317e0ab5d01..8f25a38f7f13 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.js @@ -31,6 +31,7 @@ function CodeSnippet({ showMoreText, showLessText, hideCopyButton, + wrapText, ...rest }) { const [expandedCode, setExpandedCode] = useState(false); @@ -54,6 +55,7 @@ function CodeSnippet({ [`${prefix}--snippet--expand`]: expandedCode, [`${prefix}--snippet--light`]: light, [`${prefix}--snippet--no-copy`]: hideCopyButton, + [`${prefix}--snippet--wraptext`]: wrapText, }); const expandCodeBtnText = expandedCode ? showLessText : showMoreText; @@ -185,12 +187,18 @@ CodeSnippet.propTypes = { * Provide the type of Code Snippet */ type: PropTypes.oneOf(['single', 'inline', 'multi']), + + /** + * Specify whether or not to wrap the text. + */ + wrapText: PropTypes.bool, }; CodeSnippet.defaultProps = { type: 'single', showMoreText: 'Show more', showLessText: 'Show less', + wrapText: false, }; export default CodeSnippet; diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx index 8fe9cceef6ad..93ec8c44d15d 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.mdx +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.mdx @@ -55,7 +55,8 @@ name or similar small piece of code from it's surrounding text. Multiple line code snippets are used for displaying code with more than one line. They're shown in a block and useful for showing classes, functions, blocks -of styles and the like. +of styles and the like. There is an option to wrap the lines displayed if the lines +are longer than the container.