EuiCodeEditor: added theme prop to documentation, added test for theme

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- `EuiCodeEditor` now has proper props theme option to select among various themes ([#2970](https://github.com/elastic/eui/pull/2970))
 - `EuiButton` now has a single return statement ([#2954](https://github.com/elastic/eui/pull/2954))
 - Added `isSortable` props to `EuiDataGridColumn` and `EuiDataGridSchemaDetector` to mark them as un-sortable ([#2952](https://github.com/elastic/eui/pull/2952))
 - Converted `EuiForm` to TypeScript, added many missing `/form` Prop types ([#2896](https://github.com/elastic/eui/pull/2896))

src/components/code_editor/__snapshots__/code_editor.test.tsx.snap

@@ -526,3 +526,118 @@ exports[`EuiCodeEditor props isReadOnly renders alternate hint text 1`] = `
   </div>
 </div>
 `;
+
+exports[`EuiCodeEditor props theme renders terminal theme 1`] = `
+<div
+  class="euiCodeEditorWrapper"
+  data-test-subj="codeEditorContainer"
+>
+  <div
+    class="euiCodeEditorKeyboardHint"
+    data-test-subj="codeEditorHint"
+    id="htmlId"
+    role="button"
+    tabindex="0"
+  >
+    <p
+      class="euiText"
+    >
+      Press Enter to start editing.
+    </p>
+    <p
+      class="euiText"
+    >
+      When you're done, press Escape to stop editing.
+    </p>
+  </div>
+  <div
+    class=" ace_editor ace-tm"
+    id="htmlId"
+    style="width: 500px; height: 500px;"
+  >
+    <textarea
+      autocapitalize="off"
+      autocorrect="off"
+      class="ace_text-input"
+      spellcheck="false"
+      style="opacity: 0;"
+      tabindex="-1"
+      wrap="off"
+    />
+    <div
+      aria-hidden="true"
+      class="ace_gutter"
+    >
+      <div
+        class="ace_layer ace_gutter-layer ace_folding-enabled"
+      />
+      <div
+        class="ace_gutter-active-line"
+      />
+    </div>
+    <div
+      class="ace_scroller"
+    >
+      <div
+        class="ace_content"
+      >
+        <div
+          class="ace_layer ace_print-margin-layer"
+        >
+          <div
+            class="ace_print-margin"
+            style="left: 4px; visibility: visible;"
+          />
+        </div>
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_text-layer"
+          style="padding: 0px 4px;"
+        />
+        <div
+          class="ace_layer ace_marker-layer"
+        />
+        <div
+          class="ace_layer ace_cursor-layer ace_hidden-cursors"
+        >
+          <div
+            class="ace_cursor"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-v"
+      style="display: none; width: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="width: 20px;"
+      />
+    </div>
+    <div
+      class="ace_scrollbar ace_scrollbar-h"
+      style="display: none; height: 20px;"
+    >
+      <div
+        class="ace_scrollbar-inner"
+        style="height: 20px;"
+      />
+    </div>
+    <div
+      style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+    >
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      />
+      <div
+        style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+      >
+        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+      </div>
+    </div>
+  </div>
+</div>
+`;

src/components/code_editor/code_editor.test.tsx

@@ -27,6 +27,13 @@ describe('EuiCodeEditor', () => {
       });
     });
 
+    describe('theme', () => {
+      test('renders terminal theme', () => {
+        const component = mount(<EuiCodeEditor theme="terminal" />);
+        expect(takeMountedSnapshot(component)).toMatchSnapshot();
+      });
+    });
+
     describe('aria attributes', () => {
       test('allows setting aria-labelledby on textbox', () => {
         const component = mount(

src/components/code_editor/code_editor.tsx

@@ -36,6 +36,20 @@ export interface EuiCodeEditorProps
   setOptions: IAceEditorProps['setOptions'];
   cursorStart?: number;
   'data-test-subj'?: string;
+  /**
+   * Select theme for code-editor
+   */
+  theme?:
+    | 'monokai'
+    | 'tomorrow'
+    | 'github'
+    | 'kuroir'
+    | 'twilight'
+    | 'xcode'
+    | 'solarized_light'
+    | 'solarized_dark'
+    | 'terminal'
+    | 'textmate';
 
   /**
    * Use string for a built-in mode or object for a custom mode
@@ -171,6 +185,7 @@ export class EuiCodeEditor extends Component<
       cursorStart,
       mode = DEFAULT_MODE,
       'data-test-subj': dataTestSubj = 'codeEditorContainer',
+      theme = 'github',
       ...rest
     } = this.props;
 
@@ -255,6 +270,7 @@ export class EuiCodeEditor extends Component<
           // prior to dynamically setting a custom mode (https://github.com/elastic/eui/pull/2616)
           mode={this.isCustomMode() ? DEFAULT_MODE : (mode as string)} // https://github.com/securingsincity/react-ace/pull/771
           name={this.idGenerator()}
+          theme={theme}
           ref={this.aceEditorRef}
           width={width}
           height={height}