Adding whitespace prop to EuiCodeBlockProps

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `whiteSpace` prop to `EuiCodeBlock`. ([#4475](https://github.com/elastic/eui/pull/4475))
 - Added `EuiOverlayMask` directly to `EuiModal` ([#4480](https://github.com/elastic/eui/pull/4480))
 
 **Bug fixes**

src-docs/src/views/code/code_example.js

@@ -4,7 +4,7 @@ import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
 
-import { EuiCode, EuiCodeBlockImpl } from '../../../../src/components';
+import { EuiCode, EuiCodeBlock } from '../../../../src/components';
 import { codeBlockConfig, codeConfig } from './playground';
 
 import Code from './code';
@@ -46,6 +46,7 @@ export const CodeExample = {
         </p>
       ),
       snippet: codeSnippet,
+      props: { EuiCode },
       demo: <Code />,
     },
     {
@@ -69,7 +70,7 @@ export const CodeExample = {
         </p>
       ),
       snippet: codeBlockSnippet,
-      props: { EuiCodeBlockImpl },
+      props: { EuiCodeBlock },
       demo: <CodeBlock />,
     },
     {
@@ -93,7 +94,7 @@ export const CodeExample = {
           line breaks are in the content.
         </p>
       ),
-      props: { EuiCodeBlockImpl },
+      props: { EuiCodeBlock },
       demo: <CodeBlockPre />,
     },
   ],

src/components/code/_code_block.tsx

@@ -28,27 +28,24 @@ import React, {
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import hljs from 'highlight.js';
-
 import { EuiCopy } from '../copy';
-
 import { EuiButtonIcon } from '../button';
-
 import { EuiOverlayMask } from '../overlay_mask';
-
 import { EuiFocusTrap } from '../focus_trap';
-
 import { keys } from '../../services';
 import { EuiI18n } from '../i18n';
 import { EuiInnerText } from '../inner_text';
 import { keysOf } from '../common';
-import { FontSize, PaddingSize } from './code_block';
 
 const fontSizeToClassNameMap = {
   s: 'euiCodeBlock--fontSmall',
   m: 'euiCodeBlock--fontMedium',
   l: 'euiCodeBlock--fontLarge',
 };
 
+type PaddingSize = 'none' | 's' | 'm' | 'l';
+type FontSize = 's' | 'm' | 'l';
+
 export const FONT_SIZES = keysOf(fontSizeToClassNameMap);
 
 const paddingSizeToClassNameMap: { [paddingSize in PaddingSize]: string } = {
@@ -60,7 +57,7 @@ const paddingSizeToClassNameMap: { [paddingSize in PaddingSize]: string } = {
 
 export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
 
-interface Props {
+export interface EuiCodeBlockImplProps {
   className?: string;
   fontSize?: FontSize;
 
@@ -76,6 +73,8 @@ interface Props {
 
   /**
    * Sets the syntax highlighting for a specific language
+   * @see http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases
+   * for options
    */
   language?: string;
   overflowHeight?: number;
@@ -93,7 +92,7 @@ interface Props {
  * This is the base component extended by EuiCode and EuiCodeBlock.
  * These components share the same propTypes definition with EuiCodeBlockImpl.
  */
-export const EuiCodeBlockImpl: FunctionComponent<Props> = ({
+export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
   transparentBackground = false,
   paddingSize = 'l',
   fontSize = 's',

src/components/code/code.tsx

@@ -21,27 +21,12 @@ import { CommonProps } from '../common';
 
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 
-import { EuiCodeBlockImpl } from './_code_block';
+import { EuiCodeBlockImpl, EuiCodeBlockImplProps } from './_code_block';
 
-export interface EuiCodeSharedProps {
-  /**
-   * Sets the syntax highlighting for a specific language
-   * @see http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases
-   * for options
-   */
-  language?: string;
-  transparentBackground?: boolean;
-}
+export type EuiCodeProps = CommonProps &
+  Omit<EuiCodeBlockImplProps, 'inline'> &
+  HTMLAttributes<HTMLElement>;
 
-interface Props extends EuiCodeSharedProps {
-  inline?: true;
-}
-
-export type EuiCodeProps = CommonProps & Props & HTMLAttributes<HTMLElement>;
-
-export const EuiCode: FunctionComponent<EuiCodeProps> = ({
-  inline,
-  ...rest
-}) => {
+export const EuiCode: FunctionComponent<EuiCodeProps> = ({ ...rest }) => {
   return <EuiCodeBlockImpl inline={true} {...rest} />;
 };

src/components/code/code_block.tsx

@@ -20,26 +20,13 @@
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import { CommonProps } from '../common';
 
-import { EuiCodeBlockImpl } from './_code_block';
-import { EuiCodeSharedProps } from './code';
-
-export type PaddingSize = 'none' | 's' | 'm' | 'l';
-export type FontSize = 's' | 'm' | 'l';
-
-interface OwnProps extends EuiCodeSharedProps {
-  inline?: false;
-  paddingSize?: PaddingSize;
-  fontSize?: FontSize;
-  overflowHeight?: number;
-  isCopyable?: boolean;
-}
+import { EuiCodeBlockImpl, EuiCodeBlockImplProps } from './_code_block';
 
 export type EuiCodeBlockProps = CommonProps &
-  OwnProps &
+  Omit<EuiCodeBlockImplProps, 'inline'> &
   HTMLAttributes<HTMLElement>;
 
 export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
-  inline,
   ...rest
 }) => {
   return <EuiCodeBlockImpl inline={false} {...rest} />;