From 10010ea00723ebf03439faea2ffc27b2f621215a Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 21 Mar 2022 10:27:54 -0400
Subject: [PATCH 1/5] add basic and size to fit tsx files

---
 .../CodeEditor/examples/CodeEditor.md         | 140 +-----------------
 .../CodeEditor/examples/CodeEditorBasic.tsx   |  86 +++++++++++
 .../examples/CodeEditorSizeToFit.tsx          |  27 ++++
 3 files changed, 121 insertions(+), 132 deletions(-)
 create mode 100644 packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx
 create mode 100644 packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx

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 857fd563bcb..478e42544ad 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
@@ -12,147 +12,21 @@ import { CodeEditor, CodeEditorControl, Language } from '@patternfly/react-code-
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 ## Examples
+
 ### Basic
-```js
-import React from 'react';
-import { CodeEditor, Language } from '@patternfly/react-code-editor';
-import { Checkbox } from '@patternfly/react-core';
 
-class BasicCodeEditor extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isDarkTheme: false,
-      isLineNumbersVisible: true,
-      isReadOnly: false,
-      isMinimapVisible: true
-    };
-    
-    this.toggleDarkTheme = checked => {
-      this.setState({
-        isDarkTheme: checked
-      });
-    };
-    this.toggleLineNumbers = checked => {
-      this.setState({
-        isLineNumbersVisible: checked
-      });
-    };
-    this.toggleReadOnly = checked => {
-      this.setState({
-        isReadOnly: checked
-      });
-    };
-    this.toggleMinimap = checked => {
-      this.setState({
-        isMinimapVisible: checked
-      })
-    };
-    
-    this.onEditorDidMount = (editor, monaco) => {
-      console.log(editor.getValue());
-      editor.layout();
-      editor.focus();
-      monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
-    };
-    
-    this.onChange = value => {
-      console.log(value);
-    };
-  }
-  
-  render() {
-    const { isDarkTheme, isLineNumbersVisible, isReadOnly, isMinimapVisible } = this.state;
-    
-    return (
-      <>
-        <Checkbox
-          label="Dark theme"
-          isChecked={isDarkTheme}
-          onChange={this.toggleDarkTheme}
-          aria-label="dark theme checkbox"
-          id="toggle-theme"
-          name="toggle-theme"
-        />
-        <Checkbox
-          label="Line numbers"
-          isChecked={isLineNumbersVisible}
-          onChange={this.toggleLineNumbers}
-          aria-label="line numbers checkbox"
-          id="toggle-line-numbers"
-          name="toggle-line-numbers"
-        />
-        <Checkbox
-          label="Read only"
-          isChecked={isReadOnly}
-          onChange={this.toggleReadOnly}
-          aria-label="read only checkbox"
-          id="toggle-read-only"
-          name="toggle-read-only"
-        />
-        <Checkbox
-          label="Minimap"
-          isChecked={isMinimapVisible}
-          onChange={this.toggleMinimap}
-          aria-label="display minimap checkbox"
-          id="toggle-minimap"
-          name="toggle-minimap"
-        />
-        <CodeEditor
-          isDarkTheme={isDarkTheme}
-          isLineNumbersVisible={isLineNumbersVisible}
-          isReadOnly={isReadOnly}
-          isMinimapVisible={isMinimapVisible}
-          isLanguageLabelVisible
-          code="Some example content"
-          onChange={this.onChange}
-          language={Language.javascript}
-          onEditorDidMount={this.onEditorDidMount}
-          height='400px'
-        />
-      </>
-    );
-  }
-}
+```ts file="./CodeEditorBasic.tsx"
 ```
 
 ### With sizeToFit height, height will grow/shrink with content
-```js
-import React from 'react';
-import { CodeEditor, Language } from '@patternfly/react-code-editor';
 
-class BasicCodeEditor extends React.Component {
-  constructor(props) {
-    super(props);
-    
-    this.onEditorDidMount = (editor, monaco) => {
-      console.log(editor.getValue());
-      editor.layout();
-      editor.focus();
-      monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
-    };
-    
-    this.onChange = value => {
-      console.log(value);
-    };
-  }
-  
-  render() {    
-    return (
-      <CodeEditor
-        code="Some example content"
-        onChange={this.onChange}
-        language={Language.javascript}
-        onEditorDidMount={this.onEditorDidMount}
-        height='sizeToFit'
-      />
-    );
-  }
-}
+```ts file="./CodeEditorSizeToFit.tsx"
 ```
 
-### With shortcut menu and main header content.
+### 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.
+
 ```js
 import React from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
@@ -233,6 +107,7 @@ class BasicCodeEditor extends React.Component {
 ```
 
 ### With actions
+
 ```js
 import React from 'react';
 import { CodeEditor } from '@patternfly/react-code-editor';
@@ -247,6 +122,7 @@ import { CodeEditor } from '@patternfly/react-code-editor';
 ```
 
 ### With custom control
+
 ```js
 import React from 'react';
 import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx
new file mode 100644
index 00000000000..ecd6cff4b3a
--- /dev/null
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+import { Checkbox } from '@patternfly/react-core';
+
+export const BasicCodeEditor: React.FunctionComponent = () => {
+  const [isDarkTheme, setIsDarkTheme] = React.useState(false);
+  const [isLineNumbersVisible, setIsLineNumbersVisible] = React.useState(true);
+  const [isReadOnly, setIsReadOnly] = React.useState(false);
+  const [isMinimapVisible, setIsMinimapVisible] = React.useState(false);
+
+  const toggleDarkTheme = checked => {
+    setIsDarkTheme(checked);
+  };
+
+  const toggleLineNumbers = checked => {
+    setIsLineNumbersVisible(checked);
+  };
+  const toggleReadOnly = checked => {
+    setIsReadOnly(checked);
+  };
+  const toggleMinimap = checked => {
+    setIsMinimapVisible(checked);
+  };
+
+  const onEditorDidMount = (editor, monaco) => {
+    // eslint-disable-next-line no-console
+    console.log(editor.getValue());
+    editor.layout();
+    editor.focus();
+    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+  };
+
+  const onChange = value => {
+    // eslint-disable-next-line no-console
+    console.log(value);
+  };
+
+  return (
+    <>
+      <Checkbox
+        label="Dark theme"
+        isChecked={isDarkTheme}
+        onChange={toggleDarkTheme}
+        aria-label="dark theme checkbox"
+        id="toggle-theme"
+        name="toggle-theme"
+      />
+      <Checkbox
+        label="Line numbers"
+        isChecked={isLineNumbersVisible}
+        onChange={toggleLineNumbers}
+        aria-label="line numbers checkbox"
+        id="toggle-line-numbers"
+        name="toggle-line-numbers"
+      />
+      <Checkbox
+        label="Read only"
+        isChecked={isReadOnly}
+        onChange={toggleReadOnly}
+        aria-label="read only checkbox"
+        id="toggle-read-only"
+        name="toggle-read-only"
+      />
+      <Checkbox
+        label="Minimap"
+        isChecked={isMinimapVisible}
+        onChange={toggleMinimap}
+        aria-label="display minimap checkbox"
+        id="toggle-minimap"
+        name="toggle-minimap"
+      />
+      <CodeEditor
+        isDarkTheme={isDarkTheme}
+        isLineNumbersVisible={isLineNumbersVisible}
+        isReadOnly={isReadOnly}
+        isMinimapVisible={isMinimapVisible}
+        isLanguageLabelVisible
+        code="Some example content"
+        onChange={onChange}
+        language={Language.javascript}
+        onEditorDidMount={onEditorDidMount}
+        height="400px"
+      />
+    </>
+  );
+};
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx
new file mode 100644
index 00000000000..e985faf132e
--- /dev/null
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+
+export const SizeToFitCodeEditor: React.FunctionComponent = () => {
+  const onEditorDidMount = (editor, monaco) => {
+    // eslint-disable-next-line no-console
+    console.log(editor.getValue());
+    editor.layout();
+    editor.focus();
+    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+  };
+
+  const onChange = value => {
+    // eslint-disable-next-line no-console
+    console.log(value);
+  };
+
+  return (
+    <CodeEditor
+      code="Some example content"
+      onChange={onChange}
+      language={Language.javascript}
+      onEditorDidMount={onEditorDidMount}
+      height="sizeToFit"
+    />
+  );
+};

From 1864ff556222ce2d8b71a6c217d11f9f1d109a5b Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 21 Mar 2022 11:12:30 -0400
Subject: [PATCH 2/5] add all examples

---
 .../CodeEditor/examples/CodeEditor.md         | 136 +-----------------
 .../examples/CodeEditorCustomControl.tsx      |  39 +++++
 .../examples/CodeEditorShortcutMainHeader.tsx |  73 ++++++++++
 .../examples/CodeEditorWithActions.tsx        |   6 +
 4 files changed, 121 insertions(+), 133 deletions(-)
 create mode 100644 packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx
 create mode 100644 packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
 create mode 100644 packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorWithActions.tsx

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 478e42544ad..f99c68300f5 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md
@@ -27,145 +27,15 @@ 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.
 
-```js
-import React from 'react';
-import { CodeEditor, Language } from '@patternfly/react-code-editor';
-import { Checkbox, Grid, GridItem, Chip } from '@patternfly/react-core';
-
-class BasicCodeEditor extends React.Component {
-  constructor(props) {
-    super(props);
-    
-    this.onEditorDidMount = (editor, monaco) => {
-      console.log(editor.getValue());
-      editor.layout();
-      editor.focus();
-      monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
-    };
-    
-    this.onChange = value => {
-      console.log(value);
-    };
-  }
-  
-  render() {
-    const shortcuts = [
-      {
-        keys: ["Opt","F1"],
-        description: "Accessibility helps",
-      },
-      {
-        keys: ["F1"],
-        description: "View all editor shortcuts",
-      },
-      {
-        keys: ["Ctrl", "Space"],
-        description: "Activate auto complete",
-      },
-      {
-        keys: ["Cmd", "S"],
-        description: "Save",
-      },
-    ];
-    const shortcutsPopoverProps = {
-      bodyContent:
-        <Grid span={6} hasGutter>
-          {shortcuts.map(s => (
-            <>
-              <GridItem style={{ textAlign: 'right', marginRight: '1em' }}>
-                {s.keys
-                  .map(k => (
-                    <Chip key={k} isReadOnly>
-                      {k}
-                    </Chip>
-                  ))
-                  .reduce((prev, curr) => [prev, ' + ', curr])}
-              </GridItem>
-              <GridItem>{s.description}</GridItem>
-            </>
-          ))}
-        </Grid>,
-      'aria-label': "Shortcuts",
-    }
-    
-    return (
-      <>
-        <CodeEditor
-          headerMainContent="Shortcut Example"
-          shortcutsPopoverProps={shortcutsPopoverProps}
-          isLanguageLabelVisible
-          code="Some example content"
-          onChange={this.onChange}
-          language={Language.javascript}
-          onEditorDidMount={this.onEditorDidMount}
-          height='400px'
-        />
-      </>
-    );
-  }
-}
+```ts file="./CodeEditorShortcutMainHeader.tsx"
 ```
 
 ### With actions
 
-```js
-import React from 'react';
-import { CodeEditor } from '@patternfly/react-code-editor';
-
-<CodeEditor
-  isUploadEnabled
-  isDownloadEnabled
-  isCopyEnabled
-  isLanguageLabelVisible
-  height='400px'
-/>
+```ts file="./CodeEditorWithActions.tsx"
 ```
 
 ### With custom control
 
-```js
-import React from 'react';
-import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
-
-class customControlExample extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      code: ''
-    };
-    
-    this.onChange = code => {
-      this.setState({ code })
-    };
-    
-    this.onExecuteCode = (code) => {
-      console.log(code);
-    };
-  }
- 
-  render() {
-    const customControl = (
-      <CodeEditorControl 
-        icon={<PlayIcon/>}
-        aria-label="Execute code"
-        toolTipText="Execute code"
-        onClick={this.onExecuteCode}
-        isVisible={this.state.code !== ''}
-      />);
-    
-    return (
-      <>
-        <CodeEditor
-          isDownloadEnabled
-          isCopyEnabled
-          height='400px'
-          customControls={customControl}
-          code={this.state.code}
-          onChange={this.onChange}
-        />
-      </>
-    );
-  }
-}
+```ts file="CodeEditorCustomControl.tsx"
 ```
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx
new file mode 100644
index 00000000000..203d2ad077b
--- /dev/null
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
+import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
+
+export const CustomControlCodeEditor: React.FunctionComponent = () => {
+  const [code, setCode] = React.useState('');
+
+  const onChange = code => {
+    setCode(code);
+  };
+
+  const onExecuteCode = code => {
+    // eslint-disable-next-line no-console
+    console.log(code);
+  };
+
+  const customControl = (
+    <CodeEditorControl
+      icon={<PlayIcon />}
+      aria-label="Execute code"
+      toolTipText="Execute code"
+      onClick={onExecuteCode}
+      isVisible={code !== ''}
+    />
+  );
+
+  return (
+    <>
+      <CodeEditor
+        isDownloadEnabled
+        isCopyEnabled
+        height="400px"
+        customControls={customControl}
+        code={code}
+        onChange={onChange}
+      />
+    </>
+  );
+};
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
new file mode 100644
index 00000000000..213fbaf1427
--- /dev/null
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { CodeEditor, Language } from '@patternfly/react-code-editor';
+import { Grid, GridItem, Chip } from '@patternfly/react-core';
+
+export const ShortcutMainHeaderCodeEditor: React.FunctionComponent = () => {
+  const onEditorDidMount = (editor, monaco) => {
+    // eslint-disable-next-line no-console
+    console.log(editor.getValue());
+    editor.layout();
+    editor.focus();
+    monaco.editor.getModels()[0].updateOptions({ tabSize: 5 });
+  };
+
+  const onChange = value => {
+    // eslint-disable-next-line no-console
+    console.log(value);
+  };
+
+  const shortcuts = [
+    {
+      keys: ['Opt', 'F1'],
+      description: 'Accessibility helps'
+    },
+    {
+      keys: ['F1'],
+      description: 'View all editor shortcuts'
+    },
+    {
+      keys: ['Ctrl', 'Space'],
+      description: 'Activate auto complete'
+    },
+    {
+      keys: ['Cmd', 'S'],
+      description: 'Save'
+    }
+  ];
+  const shortcutsPopoverProps = {
+    bodyContent: (
+      <Grid span={6} hasGutter>
+        {shortcuts.map(s => (
+          <>
+            <GridItem style={{ textAlign: 'right', marginRight: '1em' }}>
+              {s.keys
+                .map(k => (
+                  <Chip key={k} isReadOnly>
+                    {k}
+                  </Chip>
+                ))
+                .reduce((prev, curr) => [prev, ' + ', curr] as any)}
+            </GridItem>
+            <GridItem>{s.description}</GridItem>
+          </>
+        ))}
+      </Grid>
+    ),
+    'aria-label': 'Shortcuts'
+  };
+
+  return (
+    <>
+      <CodeEditor
+        headerMainContent="Shortcut Example"
+        shortcutsPopoverProps={shortcutsPopoverProps}
+        isLanguageLabelVisible
+        code="Some example content"
+        onChange={onChange}
+        language={Language.javascript}
+        onEditorDidMount={onEditorDidMount}
+        height="400px"
+      />
+    </>
+  );
+};
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorWithActions.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorWithActions.tsx
new file mode 100644
index 00000000000..f9c90567878
--- /dev/null
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorWithActions.tsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import { CodeEditor } from '@patternfly/react-code-editor';
+
+export const ActionsCodeEditor: React.FunctionComponent = () => (
+  <CodeEditor isUploadEnabled isDownloadEnabled isCopyEnabled isLanguageLabelVisible height="400px" />
+);

From 8db99c4b726b0af1a5918f299557ba3e6420148e Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 21 Mar 2022 15:26:56 -0400
Subject: [PATCH 3/5] resolve TS error in code shortcut example

---
 .../CodeEditor/examples/CodeEditorShortcutMainHeader.tsx      | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
index 213fbaf1427..7e744bf234b 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
@@ -46,7 +46,9 @@ export const ShortcutMainHeaderCodeEditor: React.FunctionComponent = () => {
                     {k}
                   </Chip>
                 ))
-                .reduce((prev, curr) => [prev, ' + ', curr] as any)}
+                .reduce((prev, curr) => (
+                  <>{[prev, ' + ', curr]}</>
+                ))}
             </GridItem>
             <GridItem>{s.description}</GridItem>
           </>

From 6bd98d4e3814d2165d5e67e7c2461753e79aa54f Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 23 Mar 2022 14:31:48 -0400
Subject: [PATCH 4/5] PR feedback from Katie

---
 .../examples/CodeEditorCustomControl.tsx      | 18 +++++++--------
 .../examples/CodeEditorShortcutMainHeader.tsx | 22 +++++++++----------
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx
index 203d2ad077b..fccda4fa7c8 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx
@@ -25,15 +25,13 @@ export const CustomControlCodeEditor: React.FunctionComponent = () => {
   );
 
   return (
-    <>
-      <CodeEditor
-        isDownloadEnabled
-        isCopyEnabled
-        height="400px"
-        customControls={customControl}
-        code={code}
-        onChange={onChange}
-      />
-    </>
+    <CodeEditor
+      isDownloadEnabled
+      isCopyEnabled
+      height="400px"
+      customControls={customControl}
+      code={code}
+      onChange={onChange}
+    />
   );
 };
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
index 7e744bf234b..8cbb895ac2e 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
@@ -59,17 +59,15 @@ export const ShortcutMainHeaderCodeEditor: React.FunctionComponent = () => {
   };
 
   return (
-    <>
-      <CodeEditor
-        headerMainContent="Shortcut Example"
-        shortcutsPopoverProps={shortcutsPopoverProps}
-        isLanguageLabelVisible
-        code="Some example content"
-        onChange={onChange}
-        language={Language.javascript}
-        onEditorDidMount={onEditorDidMount}
-        height="400px"
-      />
-    </>
+    <CodeEditor
+      headerMainContent="Shortcut Example"
+      shortcutsPopoverProps={shortcutsPopoverProps}
+      isLanguageLabelVisible
+      code="Some example content"
+      onChange={onChange}
+      language={Language.javascript}
+      onEditorDidMount={onEditorDidMount}
+      height="400px"
+    />
   );
 };

From 737612cc1eb2a9ae726269504a1c9c46283900a5 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 4 Apr 2022 14:02:22 -0400
Subject: [PATCH 5/5] rename function components to match file names

---
 .../src/components/CodeEditor/examples/CodeEditorBasic.tsx      | 2 +-
 .../components/CodeEditor/examples/CodeEditorCustomControl.tsx  | 2 +-
 .../CodeEditor/examples/CodeEditorShortcutMainHeader.tsx        | 2 +-
 .../src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx  | 2 +-
 .../components/CodeEditor/examples/CodeEditorWithActions.tsx    | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx
index ecd6cff4b3a..06d9298faf7 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorBasic.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 import { Checkbox } from '@patternfly/react-core';
 
-export const BasicCodeEditor: React.FunctionComponent = () => {
+export const CodeEditorBasic: React.FunctionComponent = () => {
   const [isDarkTheme, setIsDarkTheme] = React.useState(false);
   const [isLineNumbersVisible, setIsLineNumbersVisible] = React.useState(true);
   const [isReadOnly, setIsReadOnly] = React.useState(false);
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx
index fccda4fa7c8..889f96ece06 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorCustomControl.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
-export const CustomControlCodeEditor: React.FunctionComponent = () => {
+export const CodeEditorCustomControl: React.FunctionComponent = () => {
   const [code, setCode] = React.useState('');
 
   const onChange = code => {
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
index 8cbb895ac2e..10443db4628 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorShortcutMainHeader.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 import { Grid, GridItem, Chip } from '@patternfly/react-core';
 
-export const ShortcutMainHeaderCodeEditor: React.FunctionComponent = () => {
+export const CodeEditorShortcutMainHeader: React.FunctionComponent = () => {
   const onEditorDidMount = (editor, monaco) => {
     // eslint-disable-next-line no-console
     console.log(editor.getValue());
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx
index e985faf132e..3b285d9771e 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorSizeToFit.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { CodeEditor, Language } from '@patternfly/react-code-editor';
 
-export const SizeToFitCodeEditor: React.FunctionComponent = () => {
+export const CodeEditorSizeToFit: React.FunctionComponent = () => {
   const onEditorDidMount = (editor, monaco) => {
     // eslint-disable-next-line no-console
     console.log(editor.getValue());
diff --git a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorWithActions.tsx b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorWithActions.tsx
index f9c90567878..bc0b4a4ecd2 100644
--- a/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorWithActions.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/examples/CodeEditorWithActions.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { CodeEditor } from '@patternfly/react-code-editor';
 
-export const ActionsCodeEditor: React.FunctionComponent = () => (
+export const CodeEditorWithActions: React.FunctionComponent = () => (
   <CodeEditor isUploadEnabled isDownloadEnabled isCopyEnabled isLanguageLabelVisible height="400px" />
 );