@patternfly/react-code-editor 6.0.0-alpha.7 → 6.0.0-alpha.71

package/src/components/CodeEditor/__test__/__snapshots__/CodeEditorControl.test.tsx.snap

@@ -0,0 +1,22 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    style="display: contents;"
+  >
+    <button
+      aria-disabled="false"
+      class="pf-v6-c-button pf-m-plain"
+      data-ouia-component-id="OUIA-Generated-Button-plain-1"
+      data-ouia-component-type="PF6/Button"
+      data-ouia-safe="true"
+      type="button"
+    >
+      <div>
+        icon
+      </div>
+    </button>
+  </div>
+</DocumentFragment>
+`;

package/src/components/CodeEditor/examples/CodeEditor.md

@@ -15,11 +15,13 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 ### Basic
 
 ```ts file="./CodeEditorBasic.tsx"
+
 ```
 
 ### With sizeToFit height, height will grow/shrink with content
 
 ```ts file="./CodeEditorSizeToFit.tsx"
+
 ```
 
 ### With shortcut menu and main header content
@@ -27,14 +29,17 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 These examples below are the shortcuts that we recommend describing in the popover since they are monaco features.
 
 ```ts file="./CodeEditorShortcutMainHeader.tsx"
+
 ```
 
 ### With actions
 
 ```ts file="./CodeEditorWithActions.tsx"
+
 ```
 
 ### With custom control
 
 ```ts file="CodeEditorCustomControl.tsx"
+
 ```

package/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx

@@ -3,7 +3,7 @@ import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 export const CodeEditorCustomControl: React.FunctionComponent = () => {
-  const [code, setCode] = React.useState('');
+  const [code, setCode] = React.useState('Some example content');
 
   const onChange = (code) => {
     setCode(code);
@@ -32,6 +32,7 @@ export const CodeEditorCustomControl: React.FunctionComponent = () => {
       customControls={customControl}
       code={code}
       onChange={onChange}
+      isHeaderPlain={code === ''}
     />
   );
 };

package/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
-import { Grid, GridItem, Chip } from '@patternfly/react-core';
+import { Grid, GridItem, Label } from '@patternfly/react-core';
 
 export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
   const onEditorDidMount = (editor, monaco) => {
@@ -40,9 +40,9 @@ export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
             <GridItem style={{ textAlign: 'right', marginRight: '1em' }}>
               {shortcut.keys
                 .map((key) => (
-                  <Chip key={key} isReadOnly>
+                  <Label variant="outline" key={key}>
                     {key}
-                  </Chip>
+                  </Label>
                 ))
                 .reduce((prev, curr) => (
                   <>{[prev, ' + ', curr]}</>