From bd07c6cf35254dbf7fdfeaed3906af6a11d1988a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 20 Nov 2024 19:37:51 +0100
Subject: [PATCH] PanelEditor: Tweak category design (#96760)

* PanelEditor: Tweak category design

* Update

* remove unused import

* Switch angle dirctions

* Fix test
---
 .../grafana-ui/src/options/builder/axis.tsx   | 32 +++++++++----------
 .../panel-edit/PanelOptions.test.tsx          |  2 +-
 .../PanelEditor/DynamicConfigValueEditor.tsx  |  2 +-
 .../PanelEditor/OptionsPaneCategory.tsx       | 17 +++++-----
 .../PanelEditor/OverrideCategoryTitle.tsx     | 11 +++++--
 5 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/packages/grafana-ui/src/options/builder/axis.tsx b/packages/grafana-ui/src/options/builder/axis.tsx
index 7e7730bfcb3..2e08654298c 100644
--- a/packages/grafana-ui/src/options/builder/axis.tsx
+++ b/packages/grafana-ui/src/options/builder/axis.tsx
@@ -10,6 +10,7 @@ import { AxisColorMode, AxisConfig, AxisPlacement, ScaleDistribution, ScaleDistr
 import { Field } from '../../components/Forms/Field';
 import { RadioButtonGroup } from '../../components/Forms/RadioButtonGroup/RadioButtonGroup';
 import { Input } from '../../components/Input/Input';
+import { Stack } from '../../components/Layout/Stack/Stack';
 import { Select } from '../../components/Select/Select';
 import { graphFieldOptions } from '../../components/uPlot/config';
 
@@ -163,21 +164,20 @@ const LOG_DISTRIBUTION_OPTIONS: Array<SelectableValue<number>> = [
 export const ScaleDistributionEditor = ({ value, onChange }: StandardEditorProps<ScaleDistributionConfig>) => {
   const type = value?.type ?? ScaleDistribution.Linear;
   const log = value?.log ?? 2;
+
   return (
-    <>
-      <div style={{ marginBottom: 16 }}>
-        <RadioButtonGroup
-          value={type}
-          options={DISTRIBUTION_OPTIONS}
-          onChange={(v) => {
-            onChange({
-              ...value,
-              type: v!,
-              log: v === ScaleDistribution.Linear ? undefined : log,
-            });
-          }}
-        />
-      </div>
+    <Stack direction="column" gap={2}>
+      <RadioButtonGroup
+        value={type}
+        options={DISTRIBUTION_OPTIONS}
+        onChange={(v) => {
+          onChange({
+            ...value,
+            type: v!,
+            log: v === ScaleDistribution.Linear ? undefined : log,
+          });
+        }}
+      />
       {(type === ScaleDistribution.Log || type === ScaleDistribution.Symlog) && (
         <Field label="Log base">
           <Select
@@ -193,7 +193,7 @@ export const ScaleDistributionEditor = ({ value, onChange }: StandardEditorProps
         </Field>
       )}
       {type === ScaleDistribution.Symlog && (
-        <Field label="Linear threshold">
+        <Field label="Linear threshold" style={{ marginBottom: 0 }}>
           <Input
             placeholder="1"
             value={value?.linearThreshold}
@@ -206,6 +206,6 @@ export const ScaleDistributionEditor = ({ value, onChange }: StandardEditorProps
           />
         </Field>
       )}
-    </>
+    </Stack>
   );
 };
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx b/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx
index cedf9e50a13..264c053de17 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx
@@ -146,7 +146,7 @@ describe('PanelOptions', () => {
     it('Can update', async () => {
       const {} = setup();
 
-      await userEvent.click(screen.getByLabelText('Remove label'));
+      await userEvent.click(screen.getByLabelText('Remove property'));
 
       expect(screen.queryByLabelText(overrideRuleTooltipDescription)).not.toBeInTheDocument();
     });
diff --git a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
index d062cfeb732..b30dcf490f0 100644
--- a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
@@ -71,7 +71,7 @@ export const DynamicConfigValueEditor = ({
         </Label>
         {!isSystemOverride && (
           <div>
-            <IconButton name="times" onClick={onRemove} tooltip="Remove label" />
+            <IconButton name="times" onClick={onRemove} tooltip="Remove property" />
           </div>
         )}
       </HorizontalGroup>
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
index a849f83f076..2540fe59a60 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
@@ -120,20 +120,20 @@ export const OptionsPaneCategory = React.memo(
         {/* this just provides a better experience for mouse users */}
         {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
         <div className={headerStyles} onClick={onToggle}>
+          <h6 id={`button-${id}`} className={styles.title}>
+            {renderTitle(isExpanded)}
+          </h6>
           <Button
             data-testid={selectors.components.OptionsGroup.toggle(id)}
             type="button"
             fill="text"
-            size="sm"
+            size="md"
             variant="secondary"
             aria-expanded={isExpanded}
             className={styles.toggleButton}
-            icon={isExpanded ? 'angle-down' : 'angle-right'}
+            icon={isExpanded ? 'angle-down' : 'angle-up'}
             onClick={onToggle}
           />
-          <h6 id={`button-${id}`} className={styles.title}>
-            {renderTitle(isExpanded)}
-          </h6>
         </div>
         {isExpanded && (
           <div className={bodyStyles} id={id} aria-labelledby={`button-${id}`}>
@@ -159,7 +159,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
     overflow: 'hidden',
     lineHeight: 1.5,
     fontSize: '1rem',
-    paddingLeft: '6px',
     fontWeight: theme.typography.fontWeightMedium,
     margin: 0,
   }),
@@ -167,7 +166,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: 'flex',
     cursor: 'pointer',
     alignItems: 'center',
-    padding: theme.spacing(0.5),
+    padding: theme.spacing(0.5, 1.5),
     color: theme.colors.text.primary,
     fontWeight: theme.typography.fontWeightMedium,
 
@@ -185,7 +184,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     padding: theme.spacing(0.5, 0, 0.5, 0),
   }),
   body: css({
-    padding: theme.spacing(1, 2, 1, 4),
+    padding: theme.spacing(1, 2, 1, 2),
   }),
   bodyNested: css({
     position: 'relative',
@@ -195,7 +194,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
       content: "''",
       position: 'absolute',
       top: 0,
-      left: '8px',
+      left: '1px',
       width: '1px',
       height: '100%',
       background: theme.colors.border.weak,
diff --git a/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx b/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx
index ca12ab018fc..eee7fbf8a9d 100644
--- a/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 
 import { FieldConfigOptionsRegistry, GrafanaTheme2, ConfigOverrideRule } from '@grafana/data';
-import { HorizontalGroup, Icon, IconButton, useStyles2 } from '@grafana/ui';
+import { Button, HorizontalGroup, Icon, useStyles2 } from '@grafana/ui';
 import { FieldMatcherUIRegistryItem } from '@grafana/ui/src/components/MatchersUI/types';
 
 interface Props {
@@ -29,7 +29,14 @@ export const OverrideCategoryTitle = ({
     <div>
       <HorizontalGroup justify="space-between">
         <div>{overrideName}</div>
-        <IconButton name="trash-alt" onClick={onOverrideRemove} tooltip="Remove override" />
+        <Button
+          variant="secondary"
+          fill="text"
+          icon="trash-alt"
+          onClick={onOverrideRemove}
+          tooltip="Remove override"
+          aria-label="Remove override"
+        />
       </HorizontalGroup>
       {!isExpanded && (
         <div className={styles.overrideDetails}>