PanelEdit: Fixes alignment issue with collapse button (#59414)

* PanelEdit: Fixes alignment issue with collapse button

* Fix

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)};
   `,
 });

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"

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}

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};
     `,

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