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

@@ -149,14 +149,16 @@ export interface CodeEditorProps extends Omit<React.HTMLProps<HTMLDivElement>, '
   emptyStateTitle?: React.ReactNode;
   /** Editor header main content title. */
   headerMainContent?: string;
-  /** Height of code editor. Defaults to 100%. 'sizeToFit' will automatically change the height
+  /** Height of code editor. 'sizeToFit' will automatically change the height
    * to the height of the content.
    */
   height?: string | 'sizeToFit';
   /** Flag to add copy button to code editor actions. */
   isCopyEnabled?: boolean;
   /** Flag indicating the editor is styled using monaco's dark theme. */
   isDarkTheme?: boolean;
+  /** Flag that enables component to consume the available height of its container */
+  isFullHeight?: boolean;
   /** Flag indicating the editor has a plain header. */
   isHeaderPlain?: boolean;
   /** Flag to add download button to code editor actions. */
@@ -250,7 +252,6 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
     onEditorDidMount: () => {},
     language: Language.plaintext,
     isDarkTheme: false,
-    height: '',
     width: '',
     isLineNumbersVisible: true,
     isReadOnly: false,
@@ -521,6 +522,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
       },
       ...optionsProp
     };
+    const isFullHeight = this.props.height === '100%' ? true : this.props.isFullHeight;
 
     return (
       <Dropzone multiple={false} onDropAccepted={this.onDropAccepted} onDropRejected={this.onDropRejected}>
@@ -643,7 +645,7 @@ class CodeEditor extends React.Component<CodeEditorProps, CodeEditorState> {
           const editor = (
             <div className={css(styles.codeEditorCode)} ref={this.wrapperRef} tabIndex={0} dir="ltr">
               <Editor
-                height={height}
+                height={height === '100%' ? undefined : height}
                 width={width}
                 language={language}
                 value={value}
@@ -658,13 +660,21 @@ 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,
+                isFullHeight && styles.modifiers.fullHeight,
+                className
+              )}
+              ref={this.ref}
+            >
               {isUploadEnabled || providedEmptyState ? (
                 <div
                   {...getRootProps({
                     onClick: (event) => event.stopPropagation() // Prevents clicking TextArea from opening file dialog
                   })}
-                  className={css(isLoading && fileUploadStyles.modifiers.loading)}
+                  className={css(styles.codeEditorContainer, isLoading && fileUploadStyles.modifiers.loading)}
                 >
                   {editorHeader}
                   <div className={css(styles.codeEditorMain, isDragActive && styles.modifiers.dragHover)}>

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,58 @@
+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}
+            isFullHeight
+          />
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};