PanelEditor: Tweak category design (#96760)

* PanelEditor: Tweak category design

* Update

* remove unused import

* Switch angle dirctions

* Fix test

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,9 +164,9 @@ 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 }}>
+    <Stack direction="column" gap={2}>
       <RadioButtonGroup
         value={type}
         options={DISTRIBUTION_OPTIONS}
@@ -177,7 +178,6 @@ export const ScaleDistributionEditor = ({ value, onChange }: StandardEditorProps
           });
         }}
       />
-      </div>
       {(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>
   );
 };

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();
     });

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>

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,

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}>