From ae62ef833808ab9411625c51d153880ac1be1357 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Tue, 17 Sep 2024 14:16:01 -0400 Subject: [PATCH] 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. --- .../src/components/CodeEditor/CodeEditor.tsx | 20 ++++++++++---- .../__snapshots__/CodeEditor.test.tsx.snap | 2 +- .../CodeEditor/examples/CodeEditor.md | 6 +++++ .../examples/CodeEditorFullHeight.tsx | 27 +++++++++++++++++++ packages/react-core/package.json | 2 +- packages/react-docs/package.json | 2 +- packages/react-icons/package.json | 2 +- packages/react-styles/package.json | 2 +- packages/react-tokens/package.json | 2 +- yarn.lock | 18 ++++++------- 10 files changed, 63 insertions(+), 20 deletions(-) create mode 100644 packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorFullHeight.tsx diff --git a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx index c9e73e0da74..06e4bc4bf0a 100644 --- a/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx +++ b/packages/react-code-editor/src/components/CodeEditor/CodeEditor.tsx @@ -149,7 +149,7 @@ export interface CodeEditorProps extends Omit, ' 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'; @@ -157,6 +157,8 @@ export interface CodeEditorProps extends Omit, ' 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 { onEditorDidMount: () => {}, language: Language.plaintext, isDarkTheme: false, - height: '', width: '', isLineNumbersVisible: true, isReadOnly: false, @@ -522,6 +523,7 @@ class CodeEditor extends React.Component { }, ...optionsProp }; + const isFullHeight = this.props.height === '100%' ? true : this.props.isFullHeight; return ( @@ -644,7 +646,7 @@ class CodeEditor extends React.Component { const editor = (
{ ); return ( -
+
{isUploadEnabled || providedEmptyState ? (
event.stopPropagation() // Prevents clicking TextArea from opening file dialog })} - className={css(isLoading && fileUploadStyles.modifiers.loading)} + className={css(styles.codeEditorContainer, isLoading && fileUploadStyles.modifiers.loading)} > {editorHeader}
diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap index 5fe4b80e31e..b6f102a86c7 100644 --- a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap +++ b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap @@ -6,7 +6,7 @@ exports[`Matches snapshot with control buttons enabled 1`] = ` class="pf-v6-c-code-editor" >
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md index 374cacf46f7..0b5aea6d89a 100644 --- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md +++ b/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. diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorFullHeight.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorFullHeight.tsx new file mode 100644 index 00000000000..7326455f40f --- /dev/null +++ b/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 ( +
+ +
+ ); +}; diff --git a/packages/react-core/package.json b/packages/react-core/package.json index fbfa2081f30..20b9ef145dd 100644 --- a/packages/react-core/package.json +++ b/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" diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index 6c035b395cf..17a7dd2f913 100644 --- a/packages/react-docs/package.json +++ b/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:^", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index 17a8d9bb630..3115d1891fd 100644 --- a/packages/react-icons/package.json +++ b/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" }, diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index 49b1adc028b..ea42f50327e 100644 --- a/packages/react-styles/package.json +++ b/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" }, diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index 04689c3dcc8..a533d8afa9d 100644 --- a/packages/react-tokens/package.json +++ b/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" } diff --git a/yarn.lock b/yarn.lock index fb5db285b7e..24656a8cee6 100644 --- a/yarn.lock +++ b/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