From 6625147e74923a729a32c8e8e7f2a79ebe1c54b4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Wed, 30 Nov 2022 16:06:32 +0100
Subject: [PATCH] PanelEdit: Fixes alignment issue with collapse button
 (#59414)

* PanelEdit: Fixes alignment issue with collapse button

* Fix
---
 .../unified/components/CollapseToggle.tsx     |  2 +-
 .../components/alert-groups/AlertGroup.tsx    |  1 +
 .../unified/components/rules/RulesGroup.tsx   |  1 +
 .../PanelEditor/OptionsPaneCategory.tsx       | 20 +++++++++++++++----
 .../plugins/panel/alertGroups/AlertGroup.tsx  |  1 +
 5 files changed, 20 insertions(+), 5 deletions(-)

diff --git a/public/app/features/alerting/unified/components/CollapseToggle.tsx b/public/app/features/alerting/unified/components/CollapseToggle.tsx
index d5ae0433b00..9ea400226e6 100644
--- a/public/app/features/alerting/unified/components/CollapseToggle.tsx
+++ b/public/app/features/alerting/unified/components/CollapseToggle.tsx
@@ -29,6 +29,7 @@ export const CollapseToggle: FC<Props> = ({
     <Button
       type="button"
       fill="text"
+      variant="secondary"
       aria-expanded={!isCollapsed}
       aria-controls={idControlled}
       className={cx(styles.expandButton, className)}
@@ -43,7 +44,6 @@ export const CollapseToggle: FC<Props> = ({
 
 export const getStyles = (theme: GrafanaTheme2) => ({
   expandButton: css`
-    color: ${theme.colors.text.secondary};
     margin-right: ${theme.spacing(1)};
   `,
 });
diff --git a/public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx b/public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx
index c508875b588..0ba5409acea 100644
--- a/public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx
+++ b/public/app/features/alerting/unified/components/alert-groups/AlertGroup.tsx
@@ -25,6 +25,7 @@ export const AlertGroup = ({ alertManagerSourceName, group }: Props) => {
       <div className={styles.header}>
         <div className={styles.group} data-testid="alert-group">
           <CollapseToggle
+            size="sm"
             isCollapsed={isCollapsed}
             onToggle={() => setIsCollapsed(!isCollapsed)}
             data-testid="alert-group-collapse-toggle"
diff --git a/public/app/features/alerting/unified/components/rules/RulesGroup.tsx b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx
index eec77d0658b..2d75fdcf86b 100644
--- a/public/app/features/alerting/unified/components/rules/RulesGroup.tsx
+++ b/public/app/features/alerting/unified/components/rules/RulesGroup.tsx
@@ -192,6 +192,7 @@ export const RulesGroup: FC<Props> = React.memo(({ group, namespace, expandAll,
     <div className={styles.wrapper} data-testid="rule-group">
       <div className={styles.header} data-testid="rule-group-header">
         <CollapseToggle
+          size="sm"
           className={styles.collapseToggle}
           isCollapsed={isCollapsed}
           onToggle={setIsCollapsed}
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
index baa2878f749..426aca0ff5f 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
@@ -4,9 +4,8 @@ import { useLocalStorage } from 'react-use';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Counter, useStyles2 } from '@grafana/ui';
+import { Button, Counter, useStyles2 } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
-import { CollapseToggle } from 'app/features/alerting/unified/components/CollapseToggle';
 
 import { PANEL_EDITOR_UI_STATE_STORAGE_KEY } from './state/reducers';
 
@@ -107,7 +106,16 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
         ref={ref}
       >
         <div className={headerStyles} onClick={onToggle} aria-label={selectors.components.OptionsGroup.toggle(id)}>
-          <CollapseToggle isCollapsed={!isExpanded} idControlled={id} onToggle={onToggle} />
+          <Button
+            type="button"
+            fill="text"
+            size="sm"
+            variant="secondary"
+            aria-expanded={isExpanded}
+            className={styles.toggleButton}
+            icon={isExpanded ? 'angle-down' : 'angle-right'}
+            onClick={onToggle}
+          />
           <h6 id={`button-${id}`} className={styles.title}>
             {renderTitle(isExpanded)}
           </h6>
@@ -137,13 +145,14 @@ const getStyles = (theme: GrafanaTheme2) => {
       overflow: hidden;
       line-height: 1.5;
       font-size: 1rem;
+      padding-left: 6px;
       font-weight: ${theme.typography.fontWeightMedium};
       margin: 0;
     `,
     header: css`
       display: flex;
       cursor: pointer;
-      align-items: baseline;
+      align-items: center;
       padding: ${theme.spacing(0.5)};
       color: ${theme.colors.text.primary};
       font-weight: ${theme.typography.fontWeightMedium};
@@ -152,6 +161,9 @@ const getStyles = (theme: GrafanaTheme2) => {
         background: ${theme.colors.emphasize(theme.colors.background.primary, 0.03)};
       }
     `,
+    toggleButton: css`
+      align-self: baseline;
+    `,
     headerExpanded: css`
       color: ${theme.colors.text.primary};
     `,
diff --git a/public/app/plugins/panel/alertGroups/AlertGroup.tsx b/public/app/plugins/panel/alertGroups/AlertGroup.tsx
index a117c53a8e7..c2ba8196295 100644
--- a/public/app/plugins/panel/alertGroups/AlertGroup.tsx
+++ b/public/app/plugins/panel/alertGroups/AlertGroup.tsx
@@ -103,6 +103,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
     display: flex;
     flex-direction: row;
     align-items: center;
+    gap: ${theme.spacing(1)};
   `,
   alerts: css`
     margin: ${theme.spacing(0, 2, 0, 4)};