fix: improve properties panel styling

awslabs · Jan 31, 2024 · f3de67e · f3de67e
1 parent 70a109e
commit f3de67e
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 103 deletions.
diff --git a/packages/dashboard/src/customization/propertiesSections/axisSettings/section.tsx b/packages/dashboard/src/customization/propertiesSections/axisSettings/section.tsx
@@ -1,11 +1,11 @@
 import * as React from 'react';
 import {
+  Box,
   ExpandableSection,
   Input,
   SpaceBetween,
   Toggle,
 } from '@cloudscape-design/components';
-import ExpandableSectionHeader from '../shared/expandableSectionHeader';
 import type { FC } from 'react';
 import type { InputProps, ToggleProps } from '@cloudscape-design/components';
 import type { NonCancelableEventHandler } from '@cloudscape-design/components/internal/events';
@@ -62,56 +62,56 @@ const AxisSection: FC<AxisSectionProps> = ({
 
   return (
     <ExpandableSection
-      headerText={
-        <ExpandableSectionHeader>
-          {defaultMessages.header}
-        </ExpandableSectionHeader>
-      }
+      className='accordian-header'
+      headerText={defaultMessages.header}
       defaultExpanded
+      variant='footer'
     >
-      <SpaceBetween size='m' direction='vertical'>
-        <SpaceBetween size='s' direction='horizontal'>
-          <Toggle
-            checked={!!axis.showX}
-            onChange={toggleShowX}
-            data-test-id='axis-setting-x-toggle'
-          >
-            {defaultMessages.toggleXLabel}
-          </Toggle>
-
-          {usesYAxis && (
+      <Box padding='s'>
+        <SpaceBetween size='m' direction='vertical'>
+          <SpaceBetween size='s' direction='horizontal'>
             <Toggle
-              checked={!!axis.showY}
-              onChange={toggleShowY}
-              data-test-id='axis-setting-y-toggle'
+              checked={!!axis.showX}
+              onChange={toggleShowX}
+              data-test-id='axis-setting-x-toggle'
             >
-              {defaultMessages.toggleYLabel}
+              {defaultMessages.toggleXLabel}
             </Toggle>
-          )}
-        </SpaceBetween>
 
-        {usesYAxis && (
-          <div
-            className='axis-property-label'
-            style={{ gap: awsui.spaceScaledS }}
-          >
-            <label
-              htmlFor='axis-label-y'
-              data-test-id='axis-setting-y-label-content'
+            {usesYAxis && (
+              <Toggle
+                checked={!!axis.showY}
+                onChange={toggleShowY}
+                data-test-id='axis-setting-y-toggle'
+              >
+                {defaultMessages.toggleYLabel}
+              </Toggle>
+            )}
+          </SpaceBetween>
+
+          {usesYAxis && (
+            <div
+              className='axis-property-label'
+              style={{ gap: awsui.spaceScaledS }}
             >
-              {defaultMessages.yLabelContent}
-            </label>
-            <div className='axis-property-label-y'>
-              <Input
-                controlId='axis-label-y'
-                value={axis.yAxisLabel || ''}
-                onChange={updateLabel}
-                data-test-id='axis-setting-y-label-input'
-              />
+              <label
+                htmlFor='axis-label-y'
+                data-test-id='axis-setting-y-label-content'
+              >
+                {defaultMessages.yLabelContent}
+              </label>
+              <div className='axis-property-label-y'>
+                <Input
+                  controlId='axis-label-y'
+                  value={axis.yAxisLabel || ''}
+                  onChange={updateLabel}
+                  data-test-id='axis-setting-y-label-input'
+                />
+              </div>
             </div>
-          </div>
-        )}
-      </SpaceBetween>
+          )}
+        </SpaceBetween>
+      </Box>
     </ExpandableSection>
   );
 };

diff --git a/packages/dashboard/src/customization/propertiesSections/settings/section.tsx b/packages/dashboard/src/customization/propertiesSections/settings/section.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 
 import {
+  Box,
   ExpandableSection,
   Input,
   InputProps,
@@ -13,7 +14,6 @@ import { numberFromDetail } from '~/util/inputEvent';
 
 import './section.css';
 import { isNumeric } from '@iot-app-kit/core/dist/es/common/number';
-import { spaceScaledXs } from '@cloudscape-design/design-tokens';
 
 export const SettingsSection = ({
   significantDigits,
@@ -30,12 +30,14 @@ export const SettingsSection = ({
     );
   };
 
-  const sectionStyle = {
-    padding: spaceScaledXs,
-  };
   return (
-    <div style={sectionStyle}>
-      <ExpandableSection headerText='Settings' defaultExpanded>
+    <ExpandableSection
+      className='accordian-header'
+      headerText='Settings'
+      defaultExpanded
+      variant='footer'
+    >
+      <Box padding='s'>
         <SpaceBetween size='m' direction='vertical'>
           <div
             className='settings-property-label'
@@ -53,7 +55,7 @@ export const SettingsSection = ({
             </div>
           </div>
         </SpaceBetween>
-      </ExpandableSection>
-    </div>
+      </Box>
+    </ExpandableSection>
   );
 };
diff --git a/packages/dashboard/src/customization/propertiesSections/textSettings/link.tsx b/packages/dashboard/src/customization/propertiesSections/textSettings/link.tsx
@@ -4,6 +4,7 @@ import {
   Input,
   Toggle,
   SpaceBetween,
+  Box,
 } from '@cloudscape-design/components';
 import type { FC } from 'react';
 import type { InputProps } from '@cloudscape-design/components';
@@ -59,21 +60,25 @@ const LinkSettings: FC<LinkSettingsProps> = ({
 
   return (
     <ExpandableSection
+      className='accordian-header'
       headerText={header}
-      defaultExpanded={isUrl}
       data-test-id='text-widget-link-section'
+      defaultExpanded={isUrl}
+      variant='footer'
     >
-      <div className='link-configuration' style={{ gap: awsui.spaceScaledS }}>
-        <label className='section-item-label'>{defaultMessages.url}</label>
-        <div className='link-input'>
-          <Input
-            ariaLabel='text widget link input'
-            value={href}
-            onChange={onLinkTextChange}
-            data-test-id='text-widget-link-input'
-          />
+      <Box>
+        <div className='link-configuration' style={{ gap: awsui.spaceScaledS }}>
+          <label className='section-item-label'>{defaultMessages.url}</label>
+          <div className='link-input'>
+            <Input
+              ariaLabel='text widget link input'
+              value={href}
+              onChange={onLinkTextChange}
+              data-test-id='text-widget-link-input'
+            />
+          </div>
         </div>
-      </div>
+      </Box>
     </ExpandableSection>
   );
 };

diff --git a/packages/dashboard/src/customization/propertiesSections/textSettings/text.tsx b/packages/dashboard/src/customization/propertiesSections/textSettings/text.tsx
@@ -5,6 +5,7 @@ import type {
   SelectProps,
 } from '@cloudscape-design/components';
 import {
+  Box,
   ExpandableSection,
   Select,
   SpaceBetween,
@@ -90,49 +91,56 @@ const TextSettings: FC<TextSettingsProps> = ({
   };
 
   return (
-    <ExpandableSection headerText={defaultMessages.title} defaultExpanded>
-      <div className='text-configuration' style={{ gap: awsui.spaceScaledS }}>
-        <label htmlFor='text-color-picker'>{defaultMessages.color}</label>
-        <ColorPicker
-          id='text-color-picker'
-          color={fontColor}
-          updateColor={updateFontColor}
-        />
+    <ExpandableSection
+      className='accordian-header'
+      headerText={defaultMessages.title}
+      defaultExpanded
+      variant='footer'
+    >
+      <Box padding='s'>
+        <div className='text-configuration' style={{ gap: awsui.spaceScaledS }}>
+          <label htmlFor='text-color-picker'>{defaultMessages.color}</label>
+          <ColorPicker
+            id='text-color-picker'
+            color={fontColor}
+            updateColor={updateFontColor}
+          />
 
-        <label>{defaultMessages.style}</label>
-        <SpaceBetween size='xxs' direction='horizontal'>
-          <ButtonWithState
-            aria-label='toggle bold text'
-            checked={isBold}
-            onToggle={() => toggleBold(!isBold)}
-          >
-            <b>B</b>
-          </ButtonWithState>
-          <ButtonWithState
-            aria-label='toggle italicize text'
-            checked={isItalic}
-            onToggle={() => toggleItalic(!isItalic)}
-          >
-            <i>I</i>
-          </ButtonWithState>
-          <ButtonWithState
-            aria-label='toggle underline text'
-            checked={isUnderlined}
-            onToggle={() => toggleUnderlined(!isUnderlined)}
-          >
-            <u>U</u>
-          </ButtonWithState>
-        </SpaceBetween>
+          <label>{defaultMessages.style}</label>
+          <SpaceBetween size='xxs' direction='horizontal'>
+            <ButtonWithState
+              aria-label='toggle bold text'
+              checked={isBold}
+              onToggle={() => toggleBold(!isBold)}
+            >
+              <b>B</b>
+            </ButtonWithState>
+            <ButtonWithState
+              aria-label='toggle italicize text'
+              checked={isItalic}
+              onToggle={() => toggleItalic(!isItalic)}
+            >
+              <i>I</i>
+            </ButtonWithState>
+            <ButtonWithState
+              aria-label='toggle underline text'
+              checked={isUnderlined}
+              onToggle={() => toggleUnderlined(!isUnderlined)}
+            >
+              <u>U</u>
+            </ButtonWithState>
+          </SpaceBetween>
 
-        <label>{defaultMessages.size}</label>
-        <Select
-          selectedOption={{ label: `${fontSize} px`, value: `${fontSize}` }}
-          options={fontSizeOptions}
-          onChange={onFontSizeChange}
-          ariaLabel='dropdown font size'
-          data-test-id='text-widget-setting-font-size'
-        />
-      </div>
+          <label>{defaultMessages.size}</label>
+          <Select
+            selectedOption={{ label: `${fontSize} px`, value: `${fontSize}` }}
+            options={fontSizeOptions}
+            onChange={onFontSizeChange}
+            ariaLabel='dropdown font size'
+            data-test-id='text-widget-setting-font-size'
+          />
+        </div>
+      </Box>
     </ExpandableSection>
   );
 };