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,85 +2,125 @@ 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. */
-  ouiaId?: string;
+  /**
+   * Optional ID of the configuration option. Also used as a prefix for the ids of inner elements and the OUIA id.
+   * - `${ouiaId}-title` for the element which contains the title
+   * - `${ouiaId}-description` for the element which contains the description
+   */
+  id?: 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
+  id = `ConfigModalItem-${title.replace(/\s+/g, '-').toLowerCase()}`,
+  slot
 }) => (
   <Flex
     alignItems={{ default: 'alignItemsCenter' }}
     justifyContent={{ default: 'justifyContentSpaceBetween' }}
     spaceItems={{ default: 'spaceItemsMd' }}
+    id={id}
   >
     <FlexItem flex={{ default: 'flex_1' }}>
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <Icon isInline>{icon}</Icon>
-        <strong id={`${ouiaId}-title`} className="pf-v6-u-font-weight-bold">
+        <strong id={`${id}-title`} className="pf-v6-u-font-weight-bold">
           {title}
         </strong>
       </Flex>
 
-      <div id={`${ouiaId}-description`}>{description}</div>
+      <div id={`${id}-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,
+  id = `ConfigModalSwitch-${title.replace(/\s+/g, '-').toLowerCase()}`,
+  isChecked = false,
+  onChange,
+  labels = { enabled: undefined, disabled: undefined }
+}) => (
+  <ConfigModalItem
+    icon={icon}
+    description={description}
+    title={title}
+    id={id}
+    slot={
       <Switch
-        aria-labelledby={`${ouiaId}-title`}
-        aria-describedby={`${ouiaId}-description`}
-        ouiaId={`${ouiaId}-switch`}
+        aria-labelledby={`${id}-title`}
+        aria-describedby={`${id}-description`}
+        ouiaId={`${id}-switch`}
         isChecked={isChecked}
         isReversed
         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. */
   description?: string;
-  /** Optional OUIA ID of the configuration modal. Also used as a prefix for the ids of inner elements. */
+  /** OptionalID of the configuration modal. Also used as a prefix for the ids of inner elements and the OUIA id. */
   ouiaId?: string;
 }
 
 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,20 +136,14 @@ 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>
       <CodeEditorControl
         aria-label={title}
         aria-haspopup="dialog"
-        icon={<CogIcon />}
+        isSettings
         onClick={() => setIsModalOpen(true)}
         tooltipProps={{ content: title, ariaLive: 'off' }}
       />
@@ -123,37 +157,61 @@ 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="ConfigModalItem-font-size"
+        icon={<FontIcon />}
+        slot={
+          <NumberInput
+            aria-labelledby="ConfigModalItem-font-size-title"
+            aria-describedby="ConfigModalItem-font-size-description"
+            minusBtnAriaLabel="Decrease font size"
+            plusBtnAriaLabel="Increase font size"
+            role="group" // For screen readers to group the input and buttons as one widget
+            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 +223,7 @@ export const CodeEditorConfigurationModal: React.FunctionComponent = () => {
       isLineNumbersVisible={isLineNumbersVisible}
       isMinimapVisible={isMinimapVisible}
       onChange={onChange}
+      options={{ fontSize }}
     />
   );
 };