diff --git a/src-docs/src/views/code/code_block_pre.js b/src-docs/src/views/code/code_block_pre.js index baf324957f7..ec73c3b3b9e 100644 --- a/src-docs/src/views/code/code_block_pre.js +++ b/src-docs/src/views/code/code_block_pre.js @@ -20,9 +20,10 @@ export default () => ( paddingSize="m" color="dark" overflowHeight={300} + whiteSpace="pre" isCopyable>
- When the whiteSpace property is set to pre all the whitespaces will be kept as is and the text only wraps when line breaks are in the content. + In this example, the whiteSpace property is set to pre. All the whitespaces will be kept as is and the text only wraps when line breaks are in the content.
diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js index 2a56e74b8e9..ac6520b9d4e 100644 --- a/src-docs/src/views/code/code_example.js +++ b/src-docs/src/views/code/code_example.js @@ -72,7 +72,7 @@ export const CodeExample = { demo: , }, { - title: 'CodeBlock with pre white space', + title: 'CodeBlock and white-space', source: [ { type: GuideSectionTypes.JS, @@ -85,8 +85,11 @@ export const CodeExample = { ], text: (

- EuiCodeBlock allows whiteSpace property to be set - allowing user to breaks/white space forcefuly or not. + By default, the whiteSpace property is set to{' '} + pre-wrap. This makes the text wrap when needed. You + can, however, pass pre to the{' '} + whiteSpace prop and the text won't wrap unless + line breaks are in the content.

), props: { EuiCodeBlockImpl },