fix(CodeEditor): Set default height

The docs state that the default height is 100%. However, the examples just break if you don't pass in a height. This should help.

Author: rebeccaalpert

packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx

@@ -250,7 +250,6 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
     onEditorDidMount: () => {},
     language: Language.plaintext,
     isDarkTheme: false,
-    height: '',
     width: '',
     isLineNumbersVisible: true,
     isReadOnly: false,
@@ -641,7 +640,13 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
           );
 
           const editor = (
-            <div className={css(styles.codeEditorCode)} ref={this.wrapperRef} tabIndex={0} dir="ltr">
+            <div
+              className={css(styles.codeEditorCode)}
+              style={{ height: '100%' }}
+              ref={this.wrapperRef}
+              tabIndex={0}
+              dir="ltr"
+            >
               <Editor
                 height={height}
                 width={width}
@@ -658,7 +663,11 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
           );
 
           return (
-            <div className={css(styles.codeEditor, isReadOnly && styles.modifiers.readOnly, className)} ref={this.ref}>
+            <div
+              className={css(styles.codeEditor, isReadOnly && styles.modifiers.readOnly, className)}
+              style={{ height: '100%', display: 'flex', flexDirection: 'column' }}
+              ref={this.ref}
+            >
               {isUploadEnabled || providedEmptyState ? (
                 <div
                   {...getRootProps({
@@ -667,7 +676,10 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
                   className={css(isLoading && fileUploadStyles.modifiers.loading)}
                 >
                   {editorHeader}
-                  <div className={css(styles.codeEditorMain, isDragActive && styles.modifiers.dragHover)}>
+                  <div
+                    className={css(styles.codeEditorMain, isDragActive && styles.modifiers.dragHover)}
+                    style={{ flexGrow: 1 }}
+                  >
                     <div className={css(styles.codeEditorUpload)}>
                       <input {...getInputProps()} /* hidden, necessary for react-dropzone */ />
                       {(showEmptyState || providedEmptyState) && !value ? emptyState : editor}
@@ -677,7 +689,11 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
               ) : (
                 <>
                   {editorHeader}
-                  {showEditor && <div className={css(styles.codeEditorMain)}>{editor}</div>}
+                  {showEditor && (
+                    <div className={css(styles.codeEditorMain)} style={{ flexGrow: 1 }}>
+                      {editor}
+                    </div>
+                  )}
                 </>
               )}
             </div>

packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md

@@ -43,3 +43,9 @@ These examples below are the shortcuts that we recommend describing in the popov
 ```ts file="CodeEditorCustomControl.tsx"
 
 ```
+
+### With 100% height
+
+```ts file="CodeEditorModal.tsx"
+
+```

packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorModal.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';
+
+export const CodeEditorFullHeight: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const onEditorDidMount = (editor, monaco) => {
+    editor.layout();
+    editor.focus();
+    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+  };
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const onChange = (value) => {
+    // eslint-disable-next-line no-console
+    console.log(value);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle} ouiaId="ShowBasicModal">
+        Show basic modal with code editor inside
+      </Button>
+      <Modal
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        ouiaId="BasicModal"
+        aria-labelledby="basic-modal-title"
+        aria-describedby="modal-box-body-basic"
+        style={{ height: '800px' }}
+      >
+        <ModalHeader title="Basic modal" labelId="basic-modal-title" />
+        <ModalBody id="modal-box-body-basic">
+          <CodeEditor
+            isLanguageLabelVisible
+            code="Some example content"
+            onChange={onChange}
+            language={Language.javascript}
+            onEditorDidMount={onEditorDidMount}
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};