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. If `height` prop is set to 100%, this will also become enabled. */
+  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,
@@ -522,6 +523,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}>
@@ -644,7 +646,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}
@@ -660,13 +662,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

@@ -24,6 +24,12 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 ```
 
+### With isFullHeight height, height will match the size of the parent
+
+```ts file="CodeEditorFullHeight.tsx"
+
+```
+
 ### With shortcut menu and main header content
 
 These examples below are the shortcuts that we recommend describing in the popover since they are monaco features.

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

@@ -0,0 +1,27 @@
+import React from 'react';
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+
+export const CodeEditorFullHeight: React.FunctionComponent = () => {
+  const onEditorDidMount = (editor, monaco) => {
+    editor.layout();
+    editor.focus();
+    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+  };
+
+  const onChange = (value) => {
+    // eslint-disable-next-line no-console
+    console.log(value);
+  };
+
+  return (
+    <div style={{ height: '400px' }}>
+      <CodeEditor
+        code="Some example content"
+        onChange={onChange}
+        language={Language.javascript}
+        onEditorDidMount={onEditorDidMount}
+        isFullHeight
+      />
+    </div>
+  );
+};

packages/react-core/package.json

@@ -54,7 +54,7 @@
     "tslib": "^2.7.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0",
+    "@patternfly/patternfly": "6.1.0-prerelease.2",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"

packages/react-docs/package.json

@@ -23,7 +23,7 @@
     "test:a11y": "patternfly-a11y --config patternfly-a11y.config"
   },
   "dependencies": {
-    "@patternfly/patternfly": "6.0.0",
+    "@patternfly/patternfly": "6.1.0-prerelease.2",
     "@patternfly/react-charts": "workspace:^",
     "@patternfly/react-code-editor": "workspace:^",
     "@patternfly/react-core": "workspace:^",

packages/react-icons/package.json

@@ -33,7 +33,7 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@patternfly/patternfly": "6.0.0",
+    "@patternfly/patternfly": "6.1.0-prerelease.2",
     "fs-extra": "^11.2.0",
     "tslib": "^2.7.0"
   },

packages/react-styles/package.json

@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0",
+    "@patternfly/patternfly": "6.1.0-prerelease.2",
     "change-case": "^5.4.4",
     "fs-extra": "^11.2.0"
   },

packages/react-tokens/package.json

@@ -29,7 +29,7 @@
     "clean": "rimraf dist"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0",
+    "@patternfly/patternfly": "6.1.0-prerelease.2",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
   }

yarn.lock

@@ -3160,10 +3160,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@patternfly/patternfly@npm:6.0.0":
-  version: 6.0.0
-  resolution: "@patternfly/patternfly@npm:6.0.0"
-  checksum: 10c0/b3bd98bc3a3831814773b67ac22090f7c3ac9f9e9963248ea6d1466a898cb571edb7750cc41e61160e833107e9b63ad1e40424904b1fbb1b837b81741a9d3454
+"@patternfly/patternfly@npm:6.1.0-prerelease.2":
+  version: 6.1.0-prerelease.2
+  resolution: "@patternfly/patternfly@npm:6.1.0-prerelease.2"
+  checksum: 10c0/6d5e861bbdebd4ea578bf81f6e6c730cf76e24624541747c478ca7e0e76fdeb2d4c2cab4c44abd0c720a1b2aada5deff4e25fb6cb6fc56b118b33f29ff7cce3b
   languageName: node
   linkType: hard
 
@@ -3257,7 +3257,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-core@workspace:packages/react-core"
   dependencies:
-    "@patternfly/patternfly": "npm:6.0.0"
+    "@patternfly/patternfly": "npm:6.1.0-prerelease.2"
     "@patternfly/react-icons": "workspace:^"
     "@patternfly/react-styles": "workspace:^"
     "@patternfly/react-tokens": "workspace:^"
@@ -3278,7 +3278,7 @@ __metadata:
   resolution: "@patternfly/react-docs@workspace:packages/react-docs"
   dependencies:
     "@patternfly/documentation-framework": "npm:^6.0.0-alpha.106"
-    "@patternfly/patternfly": "npm:6.0.0"
+    "@patternfly/patternfly": "npm:6.1.0-prerelease.2"
     "@patternfly/patternfly-a11y": "npm:5.0.0"
     "@patternfly/react-charts": "workspace:^"
     "@patternfly/react-code-editor": "workspace:^"
@@ -3317,7 +3317,7 @@ __metadata:
     "@fortawesome/free-brands-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-regular-svg-icons": "npm:^5.15.4"
     "@fortawesome/free-solid-svg-icons": "npm:^5.15.4"
-    "@patternfly/patternfly": "npm:6.0.0"
+    "@patternfly/patternfly": "npm:6.1.0-prerelease.2"
     fs-extra: "npm:^11.2.0"
     tslib: "npm:^2.7.0"
   peerDependencies:
@@ -3400,7 +3400,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-styles@workspace:packages/react-styles"
   dependencies:
-    "@patternfly/patternfly": "npm:6.0.0"
+    "@patternfly/patternfly": "npm:6.1.0-prerelease.2"
     change-case: "npm:^5.4.4"
     fs-extra: "npm:^11.2.0"
   languageName: unknown
@@ -3441,7 +3441,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
   dependencies:
-    "@patternfly/patternfly": "npm:6.0.0"
+    "@patternfly/patternfly": "npm:6.1.0-prerelease.2"
     css: "npm:^3.0.0"
     fs-extra: "npm:^11.2.0"
   languageName: unknown