From d534a0e5fc8ae948784c8eccd4b3a6f190b9c211 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Thu, 6 Feb 2020 22:50:49 -0500 Subject: [PATCH 01/11] fix for setMaxListeners Mutation Notifier --- scripts/jest/polyfills/mutation_observer.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/jest/polyfills/mutation_observer.js b/scripts/jest/polyfills/mutation_observer.js index 7bf55f00a90..efd725e7d8d 100644 --- a/scripts/jest/polyfills/mutation_observer.js +++ b/scripts/jest/polyfills/mutation_observer.js @@ -524,7 +524,7 @@ var MutationNotifier = /** @class */ (function (_super) { __extends(MutationNotifier, _super); function MutationNotifier() { var _this = _super.call(this) || this; - _this.setMaxListeners(150); // bump this as needed - some tests do not perform the unmounting lifecycle + _this.setMaxListeners(294); // bump this as needed - some tests do not perform the unmounting lifecycle return _this; } MutationNotifier.getInstance = function () { From 535e3b3d1b6239d87fc5a761bba6ca77d168fce1 Mon Sep 17 00:00:00 2001 From: Dimitri Mitropoulos Date: Thu, 6 Feb 2020 22:52:22 -0500 Subject: [PATCH 02/11] converts EuiCode and EuiCodeBlock to TypeScript --- package.json | 3 +- ...test.js.snap => _code_block.test.tsx.snap} | 0 .../{code.test.js.snap => code.test.tsx.snap} | 0 ....test.js.snap => code_block.test.tsx.snap} | 4 +- ...ode_block.test.js => _code_block.test.tsx} | 4 +- .../code/{_code_block.js => _code_block.tsx} | 140 +++++++++--------- src/components/code/code.js | 14 -- .../code/{code.test.js => code.test.tsx} | 4 +- src/components/code/code.tsx | 39 +++++ src/components/code/code_block.js | 14 -- ...code_block.test.js => code_block.test.tsx} | 4 +- src/components/code/code_block.tsx | 15 ++ src/components/code/html.d.ts | 1 + src/components/code/index.d.ts | 59 +------- src/components/code/{index.js => index.ts} | 2 - src/components/index.d.ts | 1 - yarn.lock | 5 + 17 files changed, 146 insertions(+), 163 deletions(-) rename src/components/code/__snapshots__/{_code_block.test.js.snap => _code_block.test.tsx.snap} (100%) rename src/components/code/__snapshots__/{code.test.js.snap => code.test.tsx.snap} (100%) rename src/components/code/__snapshots__/{code_block.test.js.snap => code_block.test.tsx.snap} (98%) rename src/components/code/{_code_block.test.js => _code_block.test.tsx} (95%) rename src/components/code/{_code_block.js => _code_block.tsx} (75%) delete mode 100644 src/components/code/code.js rename src/components/code/{code.test.js => code.test.tsx} (86%) create mode 100644 src/components/code/code.tsx delete mode 100644 src/components/code/code_block.js rename src/components/code/{code_block.test.js => code_block.test.tsx} (97%) create mode 100644 src/components/code/code_block.tsx create mode 100644 src/components/code/html.d.ts rename src/components/code/{index.js => index.ts} (98%) diff --git a/package.json b/package.json index c9affa3ddd2..6d77bfa6d9c 100644 --- a/package.json +++ b/package.json @@ -48,8 +48,8 @@ "@types/enzyme": "^3.1.13", "@types/lodash": "^4.14.116", "@types/numeral": "^0.0.25", - "@types/react-virtualized": "^9.18.7", "@types/react-beautiful-dnd": "^10.1.0", + "@types/react-virtualized": "^9.18.7", "chroma-js": "^2.0.4", "classnames": "^2.2.5", "highlight.js": "^9.12.0", @@ -85,6 +85,7 @@ "@svgr/core": "5.0.1", "@svgr/plugin-svgo": "^4.0.3", "@types/classnames": "^2.2.6", + "@types/highlight.js": "^9.12.3", "@types/jest": "^24.0.6", "@types/react": "^16.9.11", "@types/react-dom": "^16.9.4", diff --git a/src/components/code/__snapshots__/_code_block.test.js.snap b/src/components/code/__snapshots__/_code_block.test.tsx.snap similarity index 100% rename from src/components/code/__snapshots__/_code_block.test.js.snap rename to src/components/code/__snapshots__/_code_block.test.tsx.snap diff --git a/src/components/code/__snapshots__/code.test.js.snap b/src/components/code/__snapshots__/code.test.tsx.snap similarity index 100% rename from src/components/code/__snapshots__/code.test.js.snap rename to src/components/code/__snapshots__/code.test.tsx.snap diff --git a/src/components/code/__snapshots__/code_block.test.js.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap similarity index 98% rename from src/components/code/__snapshots__/code_block.test.js.snap rename to src/components/code/__snapshots__/code_block.test.tsx.snap index e279826b59a..a13558dccb2 100644 --- a/src/components/code/__snapshots__/code_block.test.js.snap +++ b/src/components/code/__snapshots__/code_block.test.tsx.snap @@ -142,11 +142,11 @@ console.log(some); exports[`EuiCodeBlock props overflowHeight is rendered 1`] = ` 
      {
+  static defaultProps = {
+    transparentBackground: false,
+    paddingSize: 'l',
+    fontSize: 's',
+    isCopyable: false,
+  };
 
-  constructor(props) {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -48,12 +83,18 @@ export class EuiCodeBlockImpl extends Component {
     };
   }
 
+  codeTarget = document.createElement('div');
+  code: HTMLElement | null = null;
+  codeFullScreen: HTMLElement | null = null;
+
   highlight = () => {
-    // because React maintains a mapping between its Virtual DOM representation and the actual
-    // DOM elements (including text nodes), and hljs modifies the DOM structure which leads
-    // to React updating detached nodes, we render to a document fragment and
-    // copy from that fragment into the target elements
-    // (https://github.com/elastic/eui/issues/2322)
+    /**
+     * because React maintains a mapping between its Virtual DOM representation and the actual
+     * DOM elements (including text nodes), and hljs modifies the DOM structure which leads
+     * to React updating detached nodes, we render to a document fragment and
+     * copy from that fragment into the target elements
+     * (https://github.com/elastic/eui/issues/2322)
+     */
     const html = this.codeTarget.innerHTML;
 
     if (this.code) {
@@ -64,7 +105,9 @@ export class EuiCodeBlockImpl extends Component {
     }
 
     if (this.props.language) {
-      hljs.highlightBlock(this.code);
+      if (this.code) {
+        hljs.highlightBlock(this.code);
+      }
 
       if (this.codeFullScreen) {
         hljs.highlightBlock(this.codeFullScreen);
@@ -72,7 +115,7 @@ export class EuiCodeBlockImpl extends Component {
     }
   };
 
-  onKeyDown = event => {
+  onKeyDown = (event: KeyboardEvent) => {
     if (event.keyCode === keyCodes.ESCAPE) {
       event.preventDefault();
       event.stopPropagation();
@@ -128,10 +171,10 @@ export class EuiCodeBlockImpl extends Component {
 
     const codeClasses = classNames('euiCodeBlock__code', language);
 
-    const optionalStyles = {};
+    const optionalStyles: CSSProperties = {};
 
     if (overflowHeight) {
-      optionalStyles.maxHeight = overflowHeight;
+      optionalStyles.maxHeight = String(overflowHeight);
     }
 
     const codeSnippet = (
@@ -158,14 +201,14 @@ export class EuiCodeBlockImpl extends Component {
       );
     }
 
-    function getCopyButton(textToCopy) {
-      let copyButton;
+    const getCopyButton = (textToCopy?: string) => {
+      let copyButton: JSX.Element | undefined;
 
-      if (isCopyable) {
+      if (isCopyable && textToCopy) {
         copyButton = (
           

             
-              {copyButton => (
+              {(copyButton: string) => (
                 
                   {copy => (
                     
-          {([fullscreenCollapse, fullscreenExpand]) => (
+          {([fullscreenCollapse, fullscreenExpand]: string[]) => (
              {
       let codeBlockControls;
       const copyButton = getCopyButton(textToCopy);
 
@@ -226,17 +269,13 @@ export class EuiCodeBlockImpl extends Component {
       }
 
       return codeBlockControls;
-    }
+    };
 
-    const getFullScreenDisplay = codeBlockControls => {
+    const getFullScreenDisplay = (codeBlockControls?: JSX.Element) => {
       let fullScreenDisplay;
 
       if (this.state.isFullScreen) {
-        {
-          /*
-          Force fullscreen to use large font and padding.
-        */
-        }
+        // Force fullscreen to use large font and padding.
         const fullScreenClasses = classNames(
           'euiCodeBlock',
           fontSizeToClassNameMap[fontSize],
@@ -299,34 +338,3 @@ export class EuiCodeBlockImpl extends Component {
     );
   }
 }
-
-EuiCodeBlockImpl.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  paddingSize: PropTypes.oneOf(PADDING_SIZES),
-
-  /**
-   * Sets the syntax highlighting for a specific language
-   */
-  language: PropTypes.string,
-  overflowHeight: PropTypes.number,
-  fontSize: PropTypes.oneOf(FONT_SIZES),
-  transparentBackground: PropTypes.bool,
-
-  /**
-   * Displays the passed code in an inline format. Also removes any margins set.
-   */
-  inline: PropTypes.bool,
-
-  /**
-   * Displays an icon button to copy the code snippet to the clipboard.
-   */
-  isCopyable: PropTypes.bool,
-};
-
-EuiCodeBlockImpl.defaultProps = {
-  transparentBackground: false,
-  paddingSize: 'l',
-  fontSize: 's',
-  isCopyable: false,
-};
diff --git a/src/components/code/code.js b/src/components/code/code.js
deleted file mode 100644
index fed2a994970..00000000000
--- a/src/components/code/code.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-import { EuiCodeBlockImpl } from './_code_block';
-
-export const EuiCode = ({
-  inline, // eslint-disable-line
-  ...rest
-}) => {
-  return ;
-};
-
-EuiCode.propTypes = {
-  ...EuiCodeBlockImpl.propTypes,
-};
diff --git a/src/components/code/code.test.js b/src/components/code/code.test.tsx
similarity index 86%
rename from src/components/code/code.test.js
rename to src/components/code/code.test.tsx
index 4dee84b378d..0e91febc1c7 100644
--- a/src/components/code/code.test.js
+++ b/src/components/code/code.test.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 
 import { EuiCode } from './code';
 
-function snapshotCodeBlock(component) {
+function snapshotCodeBlock(component: ReactWrapper) {
   // Get the Portal's sibling and return its html
   const renderedHtml = component.find('Portal + *').html();
   const container = document.createElement('div');
diff --git a/src/components/code/code.tsx b/src/components/code/code.tsx
new file mode 100644
index 00000000000..8560d3abbeb
--- /dev/null
+++ b/src/components/code/code.tsx
@@ -0,0 +1,39 @@
+import { CommonProps } from '../common';
+
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+
+import { EuiCodeBlockImpl } from './_code_block';
+
+/**
+ * There isn't a specific type for the  element, and MDN says that it only supports the HTMLElement interface.
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
+ * */
+export type HTMLCodeElement = HTMLElement;
+
+type FontSize = 's' | 'm' | 'l';
+type PaddingSize = 'none' | 's' | 'm' | 'l';
+
+export interface EuiCodeSharedProps {
+  paddingSize?: PaddingSize;
+
+  /**
+   * 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;
+  fontSize?: FontSize;
+  transparentBackground?: boolean;
+  isCopyable?: boolean;
+}
+
+export interface EuiCodeProps extends EuiCodeSharedProps {
+  inline?: true;
+}
+
+type Props = CommonProps & EuiCodeProps & HTMLAttributes;
+
+export const EuiCode: FunctionComponent = ({ inline, ...rest }) => {
+  return ;
+};
diff --git a/src/components/code/code_block.js b/src/components/code/code_block.js
deleted file mode 100644
index 3df1bc38251..00000000000
--- a/src/components/code/code_block.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-import { EuiCodeBlockImpl } from './_code_block';
-
-export const EuiCodeBlock = ({
-  inline, // eslint-disable-line
-  ...rest
-}) => {
-  return ;
-};
-
-EuiCodeBlock.propTypes = {
-  ...EuiCodeBlockImpl.propTypes,
-};
diff --git a/src/components/code/code_block.test.js b/src/components/code/code_block.test.tsx
similarity index 97%
rename from src/components/code/code_block.test.js
rename to src/components/code/code_block.test.tsx
index 66e92dd16fd..8b6c8b7ab4e 100644
--- a/src/components/code/code_block.test.js
+++ b/src/components/code/code_block.test.tsx
@@ -1,13 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import ReactDOM from 'react-dom';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 import html from 'html';
 import { requiredProps } from '../../test/required_props';
 
 import { EuiCodeBlock } from './code_block';
 import { FONT_SIZES, PADDING_SIZES } from './_code_block';
 
-function snapshotCodeBlock(component) {
+function snapshotCodeBlock(component: ReactWrapper) {
   // Get the Portal's sibling and return its html
   const renderedHtml = component.find('Portal + *').html();
   const container = document.createElement('div');
diff --git a/src/components/code/code_block.tsx b/src/components/code/code_block.tsx
new file mode 100644
index 00000000000..e22a02cf9ff
--- /dev/null
+++ b/src/components/code/code_block.tsx
@@ -0,0 +1,15 @@
+import React, { FunctionComponent, HTMLAttributes } from 'react';
+import { CommonProps } from '../common';
+
+import { EuiCodeBlockImpl } from './_code_block';
+import { EuiCodeSharedProps, HTMLCodeElement } from './code';
+
+export interface EuiCodeBlockProps extends EuiCodeSharedProps {
+  inline?: false;
+}
+
+type Props = CommonProps & EuiCodeBlockProps & HTMLAttributes;
+
+export const EuiCodeBlock: FunctionComponent = ({ inline, ...rest }) => {
+  return ;
+};
diff --git a/src/components/code/html.d.ts b/src/components/code/html.d.ts
new file mode 100644
index 00000000000..e097089dcea
--- /dev/null
+++ b/src/components/code/html.d.ts
@@ -0,0 +1 @@
+declare module 'html';
diff --git a/src/components/code/index.d.ts b/src/components/code/index.d.ts
index 480715659dc..d9f8f53fa34 100644
--- a/src/components/code/index.d.ts
+++ b/src/components/code/index.d.ts
@@ -1,57 +1,2 @@
-import { CommonProps } from '../common';
-
-import { FunctionComponent, HTMLAttributes } from 'react';
-
-declare module '@elastic/eui' {
-  type FontSize = 's' | 'm' | 'l';
-  type PaddingSize = 'none' | 's' | 'm' | 'l';
-
-  // there isn't a specific type for the  element, and MDN
-  // says that it only supports the HTMLElement interface
-  // https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
-  type HTMLCodeElement = HTMLElement;
-
-  interface EuiCodeSharedProps {
-    paddingSize?: PaddingSize;
-
-    /**
-     * 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;
-    fontSize?: FontSize;
-    transparentBackground?: boolean;
-    isCopyable?: boolean;
-  }
-
-  /**
-   * EuiCode type defs
-   *
-   * @see './code.js'
-   */
-
-  export interface EuiCodeProps extends EuiCodeSharedProps {
-    inline?: true;
-  }
-
-  export const EuiCode: FunctionComponent<
-    CommonProps & EuiCodeProps & HTMLAttributes
-  >;
-
-  /**
-   * EuiCodeBlock type defs
-   *
-   * @see './code_block.js'
-   */
-
-  export interface EuiCodeBlockProps extends EuiCodeSharedProps {
-    inline?: false;
-  }
-
-  export const EuiCodeBlock: FunctionComponent<
-    CommonProps & EuiCodeBlockProps & HTMLAttributes
-  >;
-}
+export { EuiCode, EuiCodeProps } from './code';
+export { EuiCodeBlock, EuiCodeBlockProps } from './code_block';
diff --git a/src/components/code/index.js b/src/components/code/index.ts
similarity index 98%
rename from src/components/code/index.js
rename to src/components/code/index.ts
index bf0d4cd4a87..ac89d78026e 100644
--- a/src/components/code/index.js
+++ b/src/components/code/index.ts
@@ -1,5 +1,3 @@
 export { EuiCode } from './code';
-
 export { EuiCodeBlock } from './code_block';
-
 export { EuiCodeBlockImpl } from './_code_block';
diff --git a/src/components/index.d.ts b/src/components/index.d.ts
index 02be59523be..24be6528a3f 100644
--- a/src/components/index.d.ts
+++ b/src/components/index.d.ts
@@ -1,4 +1,3 @@
-/// 
 /// 
 /// 
 /// 
diff --git a/yarn.lock b/yarn.lock
index 69accd29c94..3b78ccecb33 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1241,6 +1241,11 @@
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
   integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
 
+"@types/highlight.js@^9.12.3":
+  version "9.12.3"
+  resolved "https://registry.yarnpkg.com/@types/highlight.js/-/highlight.js-9.12.3.tgz#b672cfaac25cbbc634a0fd92c515f66faa18dbca"
+  integrity sha512-pGF/zvYOACZ/gLGWdQH8zSwteQS1epp68yRcVLJMgUck/MjEn/FBYmPub9pXT8C1e4a8YZfHo1CKyV8q1vKUnQ==
+
 "@types/jest-diff@*":
   version "20.0.1"
   resolved "https://registry.yarnpkg.com/@types/jest-diff/-/jest-diff-20.0.1.tgz#35cc15b9c4f30a18ef21852e255fdb02f6d59b89"

From 50905d4f2013ecfae524377e11d4b1ce58c347af Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos 
Date: Thu, 6 Feb 2020 23:54:13 -0500
Subject: [PATCH 03/11] adds changelog entry

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c61f5471f14..e2d52e1bc6b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiCode` and `EuiCodeBlock` and to Typescript ([#2835](https://github.com/elastic/eui/pull/2835))
 - Converted `EuiFilePicker` to TypeScript ([#2832](https://github.com/elastic/eui/issues/2832))
 - Exported `EuiSelectOptionProps` type ([#2830](https://github.com/elastic/eui/pull/2830))
 - Added `paperClip` glyph to `EuiIcon` ([#2845](https://github.com/elastic/eui/pull/2845))

From 2207cf2abfe077fb79b03a44fb3d41cffd4b8dd7 Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos 
Date: Fri, 7 Feb 2020 00:02:13 -0500
Subject: [PATCH 04/11] undoes String cast per review feedback

---
 src/components/code/__snapshots__/code_block.test.tsx.snap | 4 ++--
 src/components/code/_code_block.tsx                        | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/code/__snapshots__/code_block.test.tsx.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap
index a13558dccb2..e279826b59a 100644
--- a/src/components/code/__snapshots__/code_block.test.tsx.snap
+++ b/src/components/code/__snapshots__/code_block.test.tsx.snap
@@ -142,11 +142,11 @@ console.log(some);
 exports[`EuiCodeBlock props overflowHeight is rendered 1`] = `
 

   
      {
     const optionalStyles: CSSProperties = {};
 
     if (overflowHeight) {
-      optionalStyles.maxHeight = String(overflowHeight);
+      optionalStyles.maxHeight = overflowHeight;
     }
 
     const codeSnippet = (

From 024ea3378441e9b3378ffbbcc048b120bd8d0b9a Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos 
Date: Fri, 7 Feb 2020 21:59:03 -0500
Subject: [PATCH 05/11] moves prop exports to `index.ts` and removes
 `index.d.ts`

https://github.com/elastic/eui/pull/2835#discussion_r376652227
---
 src/components/code/index.d.ts | 2 --
 src/components/code/index.ts   | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)
 delete mode 100644 src/components/code/index.d.ts

diff --git a/src/components/code/index.d.ts b/src/components/code/index.d.ts
deleted file mode 100644
index d9f8f53fa34..00000000000
--- a/src/components/code/index.d.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { EuiCode, EuiCodeProps } from './code';
-export { EuiCodeBlock, EuiCodeBlockProps } from './code_block';
diff --git a/src/components/code/index.ts b/src/components/code/index.ts
index ac89d78026e..fa0b2253380 100644
--- a/src/components/code/index.ts
+++ b/src/components/code/index.ts
@@ -1,3 +1,3 @@
-export { EuiCode } from './code';
-export { EuiCodeBlock } from './code_block';
+export { EuiCode, EuiCodeProps } from './code';
+export { EuiCodeBlock, EuiCodeBlockProps } from './code_block';
 export { EuiCodeBlockImpl } from './_code_block';

From b0cd6e46191d56afaa4ed20a8e8aed0d34714929 Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos 
Date: Fri, 7 Feb 2020 22:15:51 -0500
Subject: [PATCH 06/11] uses `keysOf` per review feedback

---
 src/components/code/_code_block.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index 7ea8fc4ec77..459cc46ced0 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -14,15 +14,16 @@ import { EuiFocusTrap } from '../focus_trap';
 import { keyCodes } from '../../services';
 import { EuiI18n } from '../i18n';
 import { EuiInnerText } from '../inner_text';
+import { keysOf } from '../common';
 
 type FontSize = 's' | 'm' | 'l';
-const fontSizeToClassNameMap: { [fontSize in FontSize]: string } = {
+const fontSizeToClassNameMap = {
   s: 'euiCodeBlock--fontSmall',
   m: 'euiCodeBlock--fontMedium',
   l: 'euiCodeBlock--fontLarge',
 };
 
-export const FONT_SIZES = Object.keys(fontSizeToClassNameMap) as FontSize[];
+export const FONT_SIZES = keysOf(fontSizeToClassNameMap);
 
 type PaddingSize = 's' | 'm' | 'l' | 'none';
 const paddingSizeToClassNameMap: { [paddingSize in PaddingSize]: string } = {
@@ -32,9 +33,7 @@ const paddingSizeToClassNameMap: { [paddingSize in PaddingSize]: string } = {
   l: 'euiCodeBlock--paddingLarge',
 };
 
-export const PADDING_SIZES = Object.keys(
-  paddingSizeToClassNameMap
-) as PaddingSize[];
+export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
 
 interface Props {
   className?: string;

From f9b1dff8d3d4d9d388d7d4e6d0996e79190126e5 Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos 
Date: Fri, 7 Feb 2020 22:23:30 -0500
Subject: [PATCH 07/11] uses `HTMLCodeElement` custom type per review feedback

---
 src/components/code/_code_block.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index 459cc46ced0..36540152ec3 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -15,6 +15,7 @@ import { keyCodes } from '../../services';
 import { EuiI18n } from '../i18n';
 import { EuiInnerText } from '../inner_text';
 import { keysOf } from '../common';
+import { HTMLCodeElement } from './code';
 
 type FontSize = 's' | 'm' | 'l';
 const fontSizeToClassNameMap = {
@@ -83,8 +84,8 @@ export class EuiCodeBlockImpl extends Component {
   }
 
   codeTarget = document.createElement('div');
-  code: HTMLElement | null = null;
-  codeFullScreen: HTMLElement | null = null;
+  code: HTMLCodeElement | null = null;
+  codeFullScreen: HTMLCodeElement | null = null;
 
   highlight = () => {
     /**

From 183f789747a8760ac7728e112723e8a8373c153e Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos 
Date: Fri, 7 Feb 2020 22:26:41 -0500
Subject: [PATCH 08/11] single source of truth for `FontSize` and `PaddingSize`

---
 src/components/code/_code_block.tsx | 4 +---
 src/components/code/code.tsx        | 4 ++--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index 36540152ec3..213b9e84d09 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -15,9 +15,8 @@ import { keyCodes } from '../../services';
 import { EuiI18n } from '../i18n';
 import { EuiInnerText } from '../inner_text';
 import { keysOf } from '../common';
-import { HTMLCodeElement } from './code';
+import { HTMLCodeElement, FontSize, PaddingSize } from './code';
 
-type FontSize = 's' | 'm' | 'l';
 const fontSizeToClassNameMap = {
   s: 'euiCodeBlock--fontSmall',
   m: 'euiCodeBlock--fontMedium',
@@ -26,7 +25,6 @@ const fontSizeToClassNameMap = {
 
 export const FONT_SIZES = keysOf(fontSizeToClassNameMap);
 
-type PaddingSize = 's' | 'm' | 'l' | 'none';
 const paddingSizeToClassNameMap: { [paddingSize in PaddingSize]: string } = {
   none: '',
   s: 'euiCodeBlock--paddingSmall',
diff --git a/src/components/code/code.tsx b/src/components/code/code.tsx
index 8560d3abbeb..9ef5dad261b 100644
--- a/src/components/code/code.tsx
+++ b/src/components/code/code.tsx
@@ -10,8 +10,8 @@ import { EuiCodeBlockImpl } from './_code_block';
  * */
 export type HTMLCodeElement = HTMLElement;
 
-type FontSize = 's' | 'm' | 'l';
-type PaddingSize = 'none' | 's' | 'm' | 'l';
+export type FontSize = 's' | 'm' | 'l';
+export type PaddingSize = 'none' | 's' | 'm' | 'l';
 
 export interface EuiCodeSharedProps {
   paddingSize?: PaddingSize;

From 8d2c6016600c22503483f2a08cb47239acc70265 Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos 
Date: Tue, 18 Feb 2020 14:41:47 -0500
Subject: [PATCH 09/11] uses `HTMLElement` directly instead of
 `HTMLCodeElement` alias

---
 src/components/code/_code_block.tsx | 6 +++---
 src/components/code/code.tsx        | 8 +-------
 src/components/code/code_block.tsx  | 4 ++--
 3 files changed, 6 insertions(+), 12 deletions(-)

diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index 213b9e84d09..14ecd0993dc 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -15,7 +15,7 @@ import { keyCodes } from '../../services';
 import { EuiI18n } from '../i18n';
 import { EuiInnerText } from '../inner_text';
 import { keysOf } from '../common';
-import { HTMLCodeElement, FontSize, PaddingSize } from './code';
+import { FontSize, PaddingSize } from './code';
 
 const fontSizeToClassNameMap = {
   s: 'euiCodeBlock--fontSmall',
@@ -82,8 +82,8 @@ export class EuiCodeBlockImpl extends Component {
   }
 
   codeTarget = document.createElement('div');
-  code: HTMLCodeElement | null = null;
-  codeFullScreen: HTMLCodeElement | null = null;
+  code: HTMLElement | null = null;
+  codeFullScreen: HTMLElement | null = null;
 
   highlight = () => {
     /**
diff --git a/src/components/code/code.tsx b/src/components/code/code.tsx
index 9ef5dad261b..d6668c8aeff 100644
--- a/src/components/code/code.tsx
+++ b/src/components/code/code.tsx
@@ -4,12 +4,6 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 
 import { EuiCodeBlockImpl } from './_code_block';
 
-/**
- * There isn't a specific type for the  element, and MDN says that it only supports the HTMLElement interface.
- * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code
- * */
-export type HTMLCodeElement = HTMLElement;
-
 export type FontSize = 's' | 'm' | 'l';
 export type PaddingSize = 'none' | 's' | 'm' | 'l';
 
@@ -32,7 +26,7 @@ export interface EuiCodeProps extends EuiCodeSharedProps {
   inline?: true;
 }
 
-type Props = CommonProps & EuiCodeProps & HTMLAttributes;
+type Props = CommonProps & EuiCodeProps & HTMLAttributes;
 
 export const EuiCode: FunctionComponent = ({ inline, ...rest }) => {
   return ;
diff --git a/src/components/code/code_block.tsx b/src/components/code/code_block.tsx
index e22a02cf9ff..01861bee93f 100644
--- a/src/components/code/code_block.tsx
+++ b/src/components/code/code_block.tsx
@@ -2,13 +2,13 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import { CommonProps } from '../common';
 
 import { EuiCodeBlockImpl } from './_code_block';
-import { EuiCodeSharedProps, HTMLCodeElement } from './code';
+import { EuiCodeSharedProps } from './code';
 
 export interface EuiCodeBlockProps extends EuiCodeSharedProps {
   inline?: false;
 }
 
-type Props = CommonProps & EuiCodeBlockProps & HTMLAttributes;
+type Props = CommonProps & EuiCodeBlockProps & HTMLAttributes;
 
 export const EuiCodeBlock: FunctionComponent = ({ inline, ...rest }) => {
   return ;

From 15cbc88ada06e7007fc7be59c4708b34a4a8c872 Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos 
Date: Tue, 18 Feb 2020 14:47:48 -0500
Subject: [PATCH 10/11] exports entire props definition for EuiCodeBlock

---
 src/components/code/code_block.tsx | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/code/code_block.tsx b/src/components/code/code_block.tsx
index 01861bee93f..01f766f6db7 100644
--- a/src/components/code/code_block.tsx
+++ b/src/components/code/code_block.tsx
@@ -4,12 +4,17 @@ import { CommonProps } from '../common';
 import { EuiCodeBlockImpl } from './_code_block';
 import { EuiCodeSharedProps } from './code';
 
-export interface EuiCodeBlockProps extends EuiCodeSharedProps {
+interface OwnProps extends EuiCodeSharedProps {
   inline?: false;
 }
 
-type Props = CommonProps & EuiCodeBlockProps & HTMLAttributes;
+export type EuiCodeBlockProps = CommonProps &
+  OwnProps &
+  HTMLAttributes;
 
-export const EuiCodeBlock: FunctionComponent = ({ inline, ...rest }) => {
+export const EuiCodeBlock: FunctionComponent = ({
+  inline,
+  ...rest
+}) => {
   return ;
 };

From bee45962993f530a2d76896f79ffb1c1f8aea124 Mon Sep 17 00:00:00 2001
From: Dimitri Mitropoulos 
Date: Wed, 19 Feb 2020 14:14:38 -0500
Subject: [PATCH 11/11] switches precedence of exported Props for EuiCodeProps
 per review feedback

---
 src/components/code/code.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/code/code.tsx b/src/components/code/code.tsx
index d6668c8aeff..60e2477286e 100644
--- a/src/components/code/code.tsx
+++ b/src/components/code/code.tsx
@@ -22,12 +22,15 @@ export interface EuiCodeSharedProps {
   isCopyable?: boolean;
 }
 
-export interface EuiCodeProps extends EuiCodeSharedProps {
+interface Props extends EuiCodeSharedProps {
   inline?: true;
 }
 
-type Props = CommonProps & EuiCodeProps & HTMLAttributes;
+export type EuiCodeProps = CommonProps & Props & HTMLAttributes;
 
-export const EuiCode: FunctionComponent = ({ inline, ...rest }) => {
+export const EuiCode: FunctionComponent = ({
+  inline,
+  ...rest
+}) => {
   return ;
 };