feat: add font size control to CodeEditorConfigurationModal example

Author: logonoff

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

@@ -14,6 +14,7 @@ import HashtagIcon from '@patternfly/react-icons/dist/esm/icons/hashtag-icon';
 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';
 
 ## Examples
 

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

@@ -2,38 +2,47 @@ import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 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 { CodeEditor, CodeEditorControl } from '@patternfly/react-code-editor';
-import { Flex, FlexItem, Icon, Modal, ModalBody, ModalHeader, Switch, SwitchProps } from '@patternfly/react-core';
+import {
+  Flex,
+  FlexItem,
+  Icon,
+  Modal,
+  ModalBody,
+  ModalHeader,
+  NumberInput,
+  Switch,
+  SwitchProps
+} from '@patternfly/react-core';
 import { useState } from 'react';
 
 interface ConfigModalItemProps {
   /** Icon rendered inside the configuration modal. */
   icon?: React.ReactNode;
   /** Description of the configuration option. */
   description: string;
-  /** Flag indicating whether the option is enabled or disabled. */
-  isChecked?: SwitchProps['isChecked'];
-  /** onChange handler for the switch. */
-  onChange?: SwitchProps['onChange'];
   /** Title of the configuration option. We assume that titles are unique. */
   title: string;
-  /** Labels for the enabled and disabled states of the switch. */
-  labels?: {
-    enabled: string;
-    disabled: string;
-  };
-  /** Optional OUIA ID of the configuration option. Also used as a prefix for the ids of inner elements. */
+  /**
+   * Optional OUIA ID of the configuration option. Also used as a prefix for the ids of inner elements.
+   * - `${ouiaId}-title` for the element which contains the title
+   * - `${ouiaId}-description` for the element which contains the description
+   */
   ouiaId?: string;
+  /**
+   * Slot to render inside the configuration modal. Remember to add `aria-labelledby` and `aria-describedby` props
+   * to the control inside the slot, pointing to the title and description ids respectively.
+   */
+  slot?: React.ReactNode;
 }
 
 const ConfigModalItem: React.FunctionComponent<ConfigModalItemProps> = ({
   icon = <CogIcon />,
   description,
-  isChecked = false,
-  labels = { enabled: undefined, disabled: undefined },
-  onChange,
   title,
-  ouiaId
+  ouiaId = `ConfigModalItem-${title.replace(/\s+/g, '-').toLowerCase()}`,
+  slot
 }) => (
   <Flex
     alignItems={{ default: 'alignItemsCenter' }}
@@ -50,7 +59,37 @@ const ConfigModalItem: React.FunctionComponent<ConfigModalItemProps> = ({
 
       <div id={`${ouiaId}-description`}>{description}</div>
     </FlexItem>
-    <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>
+    <FlexItem alignSelf={{ default: 'alignSelfCenter' }}>{slot}</FlexItem>
+  </Flex>
+);
+
+interface ConfigModalSwitchProps extends Omit<ConfigModalItemProps, 'slot'> {
+  /** Flag indicating whether the option is enabled or disabled. */
+  isChecked?: SwitchProps['isChecked'];
+  /** onChange handler for the switch. */
+  onChange?: SwitchProps['onChange'];
+  /** Labels for the enabled and disabled states of the switch. */
+  labels?: {
+    enabled: string;
+    disabled: string;
+  };
+}
+
+const ConfigModalSwitch: React.FunctionComponent<ConfigModalSwitchProps> = ({
+  icon = <CogIcon />,
+  description,
+  title,
+  ouiaId = `ConfigModalSwitch-${title.replace(/\s+/g, '-').toLowerCase()}`,
+  isChecked = false,
+  onChange,
+  labels = { enabled: undefined, disabled: undefined }
+}) => (
+  <ConfigModalItem
+    icon={icon}
+    description={description}
+    title={title}
+    ouiaId={ouiaId}
+    slot={
       <Switch
         aria-labelledby={`${ouiaId}-title`}
         aria-describedby={`${ouiaId}-description`}
@@ -60,13 +99,13 @@ const ConfigModalItem: React.FunctionComponent<ConfigModalItemProps> = ({
         label={isChecked ? labels.enabled : labels.disabled}
         onChange={onChange}
       />
-    </FlexItem>
-  </Flex>
+    }
+  />
 );
 
 interface ConfigModalControlProps {
-  /** Array of configuration controls to be rendered inside the modal. */
-  controls: ConfigModalItemProps[];
+  /** Controls to be rendered inside the configuration modal. */
+  children: React.ReactNode;
   /** Title of the configuration modal. */
   title?: string;
   /** Description of the configuration modal. */
@@ -76,11 +115,11 @@ interface ConfigModalControlProps {
 }
 
 const ConfigModalControl: React.FunctionComponent<ConfigModalControlProps> = ({
-  controls,
+  children,
   title = 'Editor settings',
   description = 'Settings will be applied immediately',
   ouiaId = 'CodeEditorConfigurationModal'
-}) => {
+}: ConfigModalControlProps) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
@@ -96,13 +135,7 @@ const ConfigModalControl: React.FunctionComponent<ConfigModalControlProps> = ({
         <ModalHeader title={title} description={description} labelId={`${ouiaId}-title`} />
         <ModalBody id={`${ouiaId}-body`}>
           <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsMd' }}>
-            {controls.map((control) => (
-              <ConfigModalItem
-                key={control.title}
-                ouiaId={`${ouiaId}-${control.title.replace(/\s+/g, '-').toLowerCase()}`}
-                {...control}
-              />
-            ))}
+            {children}
           </Flex>
         </ModalBody>
       </Modal>
@@ -123,37 +156,58 @@ export const CodeEditorConfigurationModal: React.FunctionComponent = () => {
   const [isMinimapVisible, setIsMinimapVisible] = useState(true);
   const [isDarkTheme, setIsDarkTheme] = useState(false);
   const [isLineNumbersVisible, setIsLineNumbersVisible] = useState(true);
+  const [fontSize, setFontSize] = useState(14);
 
   const onChange = (code: string) => {
     setCode(code);
   };
 
   const customControl = (
-    <ConfigModalControl
-      controls={[
-        {
-          title: 'Minimap',
-          description: 'Show a preview of the full code on the side of the editor',
-          isChecked: isMinimapVisible,
-          onChange: (_e, checked) => setIsMinimapVisible(checked),
-          icon: <MapIcon />
-        },
-        {
-          title: 'Dark theme',
-          description: 'Switch the editor to a dark color theme',
-          isChecked: isDarkTheme,
-          onChange: (_e, checked) => setIsDarkTheme(checked),
-          icon: <MoonIcon />
-        },
-        {
-          title: 'Line numbers',
-          description: 'Show line numbers to the left of each line of code',
-          isChecked: isLineNumbersVisible,
-          onChange: (_e, checked) => setIsLineNumbersVisible(checked),
-          icon: <HashtagIcon />
+    <ConfigModalControl>
+      <ConfigModalSwitch
+        key="minimap-switch"
+        title="Minimap"
+        description="Show a preview of the full code on the side of the editor"
+        isChecked={isMinimapVisible}
+        onChange={(_e, checked) => setIsMinimapVisible(checked)}
+        icon={<MapIcon />}
+      />
+      <ConfigModalSwitch
+        key="dark-theme-switch"
+        title="Dark theme"
+        description="Switch the editor to a dark color theme"
+        isChecked={isDarkTheme}
+        onChange={(_e, checked) => setIsDarkTheme(checked)}
+        icon={<MoonIcon />}
+      />
+      <ConfigModalSwitch
+        key="line-numbers-switch"
+        title="Line numbers"
+        description="Show line numbers to the left of each line of code"
+        isChecked={isLineNumbersVisible}
+        onChange={(_e, checked) => setIsLineNumbersVisible(checked)}
+        icon={<HashtagIcon />}
+      />
+      <ConfigModalItem
+        key="font-size"
+        title="Font size"
+        description="Adjust the font size of the code editor"
+        ouia-id="font-size"
+        icon={<FontIcon />}
+        slot={
+          <NumberInput
+            aria-labelledby="font-size-title"
+            aria-describedby="font-size-description"
+            value={fontSize}
+            min={5}
+            onMinus={() => setFontSize((size) => Math.max(5, size - 1))}
+            onChange={(event) => setFontSize(Number((event.target as HTMLInputElement).value))}
+            onPlus={() => setFontSize((size) => size + 1)}
+            widthChars={2}
+          />
         }
-      ]}
-    />
+      />
+    </ConfigModalControl>
   );
 
   return (
@@ -165,6 +219,7 @@ export const CodeEditorConfigurationModal: React.FunctionComponent = () => {
       isLineNumbersVisible={isLineNumbersVisible}
       isMinimapVisible={isMinimapVisible}
       onChange={onChange}
+      options={{ fontSize }}
     />
   );
 };