feat(CodeEditor): add isHighContrastTheme (#12384)

Adds a new prop, `isHighContrastTheme`, which switches the CodeEditor over to the monaco-provided `hc-black` and `hc-light` themes (based on the value of `isDarkTheme`) when enabled.

A custom PatternFly variant of the hc-black and hc-light themes can come in a follow up, depending on the direction design wants to take on this

Author: logonoff

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

@@ -1,4 +1,4 @@
-import { HTMLProps, ReactNode, useEffect, useRef, useState } from 'react';
+import { HTMLProps, ReactNode, useEffect, useMemo, useRef, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor';
 import fileUploadStyles from '@patternfly/react-styles/css/components/FileUpload/file-upload';
@@ -157,6 +157,8 @@ export interface CodeEditorProps extends Omit<HTMLProps<HTMLDivElement>, 'onChan
   isCopyEnabled?: boolean;
   /** Flag indicating the editor is styled using monaco's dark theme. */
   isDarkTheme?: boolean;
+  /** Flag indicating the editor is styled using monaco's high contrast themes. */
+  isHighContrastTheme?: 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. */
@@ -286,6 +288,7 @@ export const CodeEditor = ({
   height,
   isCopyEnabled = false,
   isDarkTheme = false,
+  isHighContrastTheme = false,
   isDownloadEnabled = false,
   isFullHeight = false,
   isHeaderPlain = false,
@@ -462,6 +465,13 @@ export const CodeEditor = ({
     headerMainContent ||
     !!shortcutsPopoverProps.bodyContent;
 
+  const theme = useMemo(() => {
+    if (isHighContrastTheme) {
+      return isDarkTheme ? 'hc-black' : 'hc-light';
+    }
+    return isDarkTheme ? 'pf-v6-theme-dark' : 'pf-v6-theme-light';
+  }, [isHighContrastTheme, isDarkTheme]);
+
   return (
     <Dropzone multiple={false} onDropAccepted={onDropAccepted} onDropRejected={onDropRejected}>
       {({ getRootProps, getInputProps, isDragActive, open }) => {
@@ -579,7 +589,7 @@ export const CodeEditor = ({
               onChange={onModelChange}
               onMount={editorDidMount}
               loading={loading}
-              theme={isDarkTheme ? 'pf-v6-theme-dark' : 'pf-v6-theme-light'}
+              theme={theme}
               {...editorProps}
               beforeMount={editorBeforeMount}
             />

packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx

@@ -2,7 +2,9 @@ import { render, screen, act } from '@testing-library/react';
 import { CodeEditor, Language } from '../CodeEditor';
 import styles from '@patternfly/react-styles/css/components/CodeEditor/code-editor';
 
-jest.mock('@monaco-editor/react', () => jest.fn(() => <div data-testid="mock-editor"></div>));
+jest.mock('@monaco-editor/react', () =>
+  jest.fn((props: any) => <div data-testid="mock-editor" data-theme={props.theme}></div>)
+);
 
 test('Matches snapshot without props', () => {
   const { asFragment } = render(<CodeEditor code="test" />);
@@ -72,3 +74,23 @@ test(`Renders with shortcuts when shortcutsPopoverButtonText is passed`, () => {
   });
   expect(screen.getByText('shortcuts')).toBeInTheDocument();
 });
+
+test('Uses pf-v6-theme-light by default', () => {
+  render(<CodeEditor code="test" />);
+  expect(screen.getByTestId('mock-editor')).toHaveAttribute('data-theme', 'pf-v6-theme-light');
+});
+
+test('Uses pf-v6-theme-dark when isDarkTheme is true', () => {
+  render(<CodeEditor isDarkTheme code="test" />);
+  expect(screen.getByTestId('mock-editor')).toHaveAttribute('data-theme', 'pf-v6-theme-dark');
+});
+
+test('Uses hc-light when isHighContrast is true', () => {
+  render(<CodeEditor isHighContrastTheme code="test" />);
+  expect(screen.getByTestId('mock-editor')).toHaveAttribute('data-theme', 'hc-light');
+});
+
+test('Uses hc-black when both isHighContrast and isDarkTheme are true', () => {
+  render(<CodeEditor isHighContrastTheme isDarkTheme code="test" />);
+  expect(screen.getByTestId('mock-editor')).toHaveAttribute('data-theme', 'hc-black');
+});

packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap

@@ -164,6 +164,7 @@ exports[`Matches snapshot with control buttons enabled 1`] = `
         >
           <div
             data-testid="mock-editor"
+            data-theme="pf-v6-theme-light"
           />
         </div>
       </div>
@@ -196,6 +197,7 @@ exports[`Matches snapshot without props 1`] = `
       >
         <div
           data-testid="mock-editor"
+          data-theme="pf-v6-theme-light"
         />
       </div>
     </div>

packages/react-code-editor/src/components/CodeEditor/examples/CodeEditor.md

@@ -15,6 +15,7 @@ import MapIcon from '@patternfly/react-icons/dist/esm/icons/map-icon';
 import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import FontIcon from '@patternfly/react-icons/dist/esm/icons/font-icon';
+import AdjustIcon from '@patternfly/react-icons/dist/esm/icons/adjust-icon';
 
 ## Examples
 

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

@@ -4,6 +4,7 @@ import { Checkbox } from '@patternfly/react-core';
 
 export const CodeEditorBasic: React.FunctionComponent = () => {
   const [isDarkTheme, setIsDarkTheme] = useState(false);
+  const [isHighContrastTheme, setIsHighContrastTheme] = useState(false);
   const [isLineNumbersVisible, setIsLineNumbersVisible] = useState(true);
   const [isReadOnly, setIsReadOnly] = useState(false);
   const [isMinimapVisible, setIsMinimapVisible] = useState(false);
@@ -12,6 +13,10 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
     setIsDarkTheme(checked);
   };
 
+  const toggleHighContrastTheme = (checked) => {
+    setIsHighContrastTheme(checked);
+  };
+
   const toggleLineNumbers = (checked) => {
     setIsLineNumbersVisible(checked);
   };
@@ -43,6 +48,14 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
         id="toggle-theme"
         name="toggle-theme"
       />
+      <Checkbox
+        label="High contrast theme"
+        isChecked={isHighContrastTheme}
+        onChange={(_event, checked) => toggleHighContrastTheme(checked)}
+        aria-label="high contrast theme checkbox"
+        id="toggle-high-contrast-theme"
+        name="toggle-high-contrast-theme"
+      />
       <Checkbox
         label="Line numbers"
         isChecked={isLineNumbersVisible}
@@ -69,6 +82,7 @@ export const CodeEditorBasic: React.FunctionComponent = () => {
       />
       <CodeEditor
         isDarkTheme={isDarkTheme}
+        isHighContrastTheme={isHighContrastTheme}
         isLineNumbersVisible={isLineNumbersVisible}
         isReadOnly={isReadOnly}
         isMinimapVisible={isMinimapVisible}

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

@@ -3,6 +3,7 @@ import MapIcon from '@patternfly/react-icons/dist/esm/icons/map-icon';
 import MoonIcon from '@patternfly/react-icons/dist/esm/icons/moon-icon';
 import HashtagIcon from '@patternfly/react-icons/dist/esm/icons/hashtag-icon';
 import FontIcon from '@patternfly/react-icons/dist/esm/icons/font-icon';
+import AdjustIcon from '@patternfly/react-icons/dist/esm/icons/adjust-icon';
 import { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
 import {
   Flex,
@@ -156,6 +157,7 @@ export const CodeEditorConfigurationModal: React.FunctionComponent = () => {
 
   const [isMinimapVisible, setIsMinimapVisible] = useState(true);
   const [isDarkTheme, setIsDarkTheme] = useState(false);
+  const [isHighContrastTheme, setIsHighContrastTheme] = useState(false);
   const [isLineNumbersVisible, setIsLineNumbersVisible] = useState(true);
   const [fontSize, setFontSize] = useState(14);
 
@@ -181,6 +183,14 @@ export const CodeEditorConfigurationModal: React.FunctionComponent = () => {
         onChange={(_e, checked) => setIsDarkTheme(checked)}
         icon={<MoonIcon />}
       />
+      <ConfigModalSwitch
+        key="high-contrast-theme-switch"
+        title="High contrast theme"
+        description="Switch the editor to a high contrast color theme"
+        isChecked={isHighContrastTheme}
+        onChange={(_e, checked) => setIsHighContrastTheme(checked)}
+        icon={<AdjustIcon />}
+      />
       <ConfigModalSwitch
         key="line-numbers-switch"
         title="Line numbers"
@@ -221,6 +231,7 @@ export const CodeEditorConfigurationModal: React.FunctionComponent = () => {
       customControls={customControl}
       height="400px"
       isDarkTheme={isDarkTheme}
+      isHighContrastTheme={isHighContrastTheme}
       isLineNumbersVisible={isLineNumbersVisible}
       isMinimapVisible={isMinimapVisible}
       onChange={onChange}

packages/react-integration/demo-app-ts/src/components/demos/CodeEditorDemo/CodeEditorDemo.tsx

@@ -5,6 +5,7 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 
 interface CodeEditorDemoState {
   isDarkTheme: boolean;
+  isHighContrastTheme: boolean;
   isLineNumbersVisible: boolean;
   isReadOnly: boolean;
   isMinimapVisible: boolean;
@@ -17,6 +18,7 @@ export class CodeEditorDemo extends Component<CodeEditorProps, CodeEditorDemoSta
     super(props);
     this.state = {
       isDarkTheme: false,
+      isHighContrastTheme: false,
       isLineNumbersVisible: true,
       isReadOnly: false,
       isMinimapVisible: true,
@@ -30,6 +32,12 @@ export class CodeEditorDemo extends Component<CodeEditorProps, CodeEditorDemoSta
     });
   };
 
+  toggleHighContrastTheme = (checked: boolean) => {
+    this.setState({
+      isHighContrastTheme: checked
+    });
+  };
+
   toggleLineNumbers = (checked: boolean) => {
     this.setState({
       isLineNumbersVisible: checked
@@ -70,8 +78,7 @@ export class CodeEditorDemo extends Component<CodeEditorProps, CodeEditorDemoSta
   };
 
   render() {
-    const { isDarkTheme, isLineNumbersVisible, isReadOnly, isMinimapVisible, code } = this.state;
-
+    const { isDarkTheme, isHighContrastTheme, isLineNumbersVisible, isReadOnly, isMinimapVisible, code } = this.state;
     const customControl = (
       <CodeEditorControl
         icon={<PlayIcon />}
@@ -91,6 +98,14 @@ export class CodeEditorDemo extends Component<CodeEditorProps, CodeEditorDemoSta
           id="toggle-theme"
           name="toggle-theme"
         />
+        <Checkbox
+          label="High contrast theme"
+          isChecked={isHighContrastTheme}
+          onChange={(_event, checked) => this.toggleHighContrastTheme(checked)}
+          aria-label="high contrast theme checkbox"
+          id="toggle-high-contrast-theme"
+          name="toggle-high-contrast-theme"
+        />
         <Checkbox
           label="Line numbers"
           isChecked={isLineNumbersVisible}
@@ -120,6 +135,7 @@ export class CodeEditorDemo extends Component<CodeEditorProps, CodeEditorDemoSta
         </Button>
         <CodeEditor
           isDarkTheme={isDarkTheme}
+          isHighContrastTheme={isHighContrastTheme}
           isLineNumbersVisible={isLineNumbersVisible}
           isReadOnly={isReadOnly}
           isMinimapVisible={isMinimapVisible}