feat(dashboard): enable font size dropdown selection

awslabs · Mar 28, 2023 · fe25dd7 · fe25dd7
1 parent c1c0125
commit fe25dd7
Showing 1 changed file with 36 additions and 9 deletions.
diff --git a/packages/dashboard/src/components/sidePanel/sections/textSettingSection/text.tsx b/packages/dashboard/src/components/sidePanel/sections/textSettingSection/text.tsx
@@ -1,18 +1,15 @@
+import type { FC, MouseEventHandler, ReactNode } from 'react';
 import React from 'react';
+import type { NonCancelableCustomEvent, SelectProps } from '@cloudscape-design/components';
 import { ExpandableSection, Select, SpaceBetween } from '@cloudscape-design/components';
+import * as awsui from '@cloudscape-design/design-tokens';
 import { fontFamilyBase, fontFamilyMonospace } from '@cloudscape-design/design-tokens';
 import ColorPicker from '../../shared/colorPicker';
 import { useWidgetLense } from '../../utils/useWidgetLense';
-
-import type { FC, MouseEventHandler, ReactNode } from 'react';
-import type { SelectProps } from '@cloudscape-design/components';
-import type { NonCancelableEventHandler } from '@cloudscape-design/components/internal/events';
 import type { DashboardMessages } from '~/messages';
 import type { TextWidget } from '~/customization/widgets/types';
 import { Widget } from '~/types';
 
-import * as awsui from '@cloudscape-design/design-tokens';
-
 import './index.css';
 
 export const isTextWidget = (widget: Widget): widget is TextWidget => widget.type === 'text';
@@ -60,6 +57,11 @@ const fontOptions = Object.keys(fontLabelMap).map((key) => ({
   value: fontLabelMap[key],
 }));
 
+const fontSizeOptions = [8, 10, 12, 14, 16, 20, 24, 32, 48].map((size) => ({
+  label: `${size} px`,
+  value: `${size}`,
+}));
+
 const defaultMessages = {
   title: 'Text',
   font: 'Font',
@@ -122,16 +124,35 @@ const TextSettings: FC<TextWidget> = (widget) => {
     })
   );
 
-  const onFontChange: NonCancelableEventHandler<SelectProps.ChangeDetail> = ({
+  const [fontSize = 16, updateSize] = useWidgetLense<TextWidget, number | undefined>(
+    widget,
+    (w) => w.properties.fontSettings?.fontSize,
+    (w, fontSize) => ({
+      ...w,
+      properties: { ...w.properties, fontSettings: { ...w.properties.fontSettings, fontSize } },
+    })
+  );
+
+  const onFontChange = ({
     detail: {
       selectedOption: { value },
     },
-  }) => {
+  }: NonCancelableCustomEvent<SelectProps.ChangeDetail>) => {
     if (value) {
       updateFont(value);
     }
   };
 
+  const onFontSizeChange = ({
+    detail: {
+      selectedOption: { value },
+    },
+  }: NonCancelableCustomEvent<SelectProps.ChangeDetail>) => {
+    if (value) {
+      updateSize(parseInt(value, 10));
+    }
+  };
+
   return (
     <ExpandableSection headerText={defaultMessages.title} defaultExpanded>
       <div className='text-configuration' style={{ gap: awsui.spaceScaledS }}>
@@ -164,7 +185,13 @@ const TextSettings: FC<TextWidget> = (widget) => {
         </SpaceBetween>
 
         <label>{defaultMessages.size}</label>
-        <Select selectedOption={null} disabled data-test-id='text-widget-setting-font-size' />
+        <Select
+          selectedOption={{ label: `${fontSize} px`, value: `${fontSize}` }}
+          options={fontSizeOptions}
+          onChange={onFontSizeChange}
+          ariaLabel='dropdown font size'
+          data-test-id='text-widget-setting-font-size'
+        />
 
         <label>{defaultMessages.horizontal}</label>
         <Select selectedOption={null} disabled data-test-id='text-widget-setting-horizontal-align' />