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 <tw15egan@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Oct 7, 2020 · 5417c4e · 5417c4e
1 parent 7e47efd
commit 5417c4e
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 7 deletions.
diff --git 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
@@ -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
@@ -30,12 +30,39 @@ export const inline = () => (
 );
 
 export const multiline = () => (
-  <CodeSnippet type="multi" feedback="Copied to clipboard">
-    {`@mixin grid-container {
-     width: 100%;
-     padding-right: padding(mobile);
-     padding-left: padding(mobile);`}
-  </CodeSnippet>
+  <div style={{ width: '50%' }}>
+    <CodeSnippet {...props()} type="multi" feedback="Copied to clipboard">
+      {`  "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",`}
+    </CodeSnippet>
+  </div>
 );
 
 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
@@ -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
@@ -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.
 
 <Preview>
   <Story id="codesnippet--multiline" />