Skip to content

Commit

Permalink
feat(CodeSnippet): add support for word wrap (#6960)
Browse files Browse the repository at this point in the history
* feat(CodeSnippet): add support for word wrap

* feat(CodeSnippet): change documentation for consistency

* test(snapshot): update snapshot tests

Co-authored-by: TJ Egan <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
  • Loading branch information
3 people authored Oct 7, 2020
1 parent 7e47efd commit 5417c4e
Show file tree
Hide file tree
Showing 5 changed files with 53 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,7 @@ Map {
"showLessText": "Show less",
"showMoreText": "Show more",
"type": "single",
"wrapText": false,
},
"propTypes": Object {
"ariaLabel": Object {
Expand Down Expand Up @@ -330,6 +331,9 @@ Map {
],
"type": "oneOf",
},
"wrapText": Object {
"type": "bool",
},
},
},
"ComboBox" => Object {
Expand Down
40 changes: 34 additions & 6 deletions packages/react/src/components/CodeSnippet/CodeSnippet-story.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 = () => (
Expand Down Expand Up @@ -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 = () => (
Expand Down
8 changes: 8 additions & 0 deletions packages/react/src/components/CodeSnippet/CodeSnippet.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ function CodeSnippet({
showMoreText,
showLessText,
hideCopyButton,
wrapText,
...rest
}) {
const [expandedCode, setExpandedCode] = useState(false);
Expand All @@ -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;
Expand Down Expand Up @@ -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;
3 changes: 2 additions & 1 deletion packages/react/src/components/CodeSnippet/CodeSnippet.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down

0 comments on commit 5417c4e

Please sign in to comment.