From 20232030453f30cf07d5fe43f2a37b95313eeb49 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 23 Feb 2023 17:03:00 +0100
Subject: [PATCH] SectionNav: Simplify section toggle styling (#63653)

---
 .../core/components/PageNew/SectionNav.tsx    | 33 +------------------
 .../components/PageNew/SectionNavToggle.tsx   | 31 ++++++++++++++---
 2 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/public/app/core/components/PageNew/SectionNav.tsx b/public/app/core/components/PageNew/SectionNav.tsx
index f2777bb029d..430df2cf918 100644
--- a/public/app/core/components/PageNew/SectionNav.tsx
+++ b/public/app/core/components/PageNew/SectionNav.tsx
@@ -33,13 +33,7 @@ export function SectionNav({ model }: Props) {
           </div>
         </CustomScrollbar>
       </nav>
-      <SectionNavToggle
-        className={cx(styles.collapseIcon, {
-          [styles.collapseIconExpanded]: isExpanded,
-        })}
-        isExpanded={Boolean(isExpanded)}
-        onClick={onToggleSectionNav}
-      />
+      <SectionNavToggle isExpanded={isExpanded} onClick={onToggleSectionNav} />
     </div>
   );
 }
@@ -109,30 +103,5 @@ const getStyles = (theme: GrafanaTheme2) => {
         padding: theme.spacing(4.5, 1, 2, 2),
       },
     }),
-    collapseIcon: css({
-      alignSelf: 'center',
-      margin: theme.spacing(1, 0),
-      position: 'relative',
-      top: theme.spacing(0),
-      transform: 'rotate(90deg)',
-      transition: theme.transitions.create('opacity'),
-
-      [theme.breakpoints.up('md')]: {
-        alignSelf: 'flex-start',
-        left: 0,
-        margin: theme.spacing(0, 0, 0, 1),
-        top: theme.spacing(2),
-        transform: 'none',
-      },
-
-      'div:hover > &, &:focus': {
-        opacity: 1,
-      },
-    }),
-    collapseIconExpanded: css({
-      [theme.breakpoints.up('md')]: {
-        opacity: 0,
-      },
-    }),
   };
 };
diff --git a/public/app/core/components/PageNew/SectionNavToggle.tsx b/public/app/core/components/PageNew/SectionNavToggle.tsx
index e220cf9ad01..cf744eebcd4 100644
--- a/public/app/core/components/PageNew/SectionNavToggle.tsx
+++ b/public/app/core/components/PageNew/SectionNavToggle.tsx
@@ -6,12 +6,11 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { Button, useTheme2 } from '@grafana/ui';
 
 export interface Props {
-  className?: string;
-  isExpanded: boolean;
+  isExpanded?: boolean;
   onClick: () => void;
 }
 
-export const SectionNavToggle = ({ className, isExpanded, onClick }: Props) => {
+export const SectionNavToggle = ({ isExpanded, onClick }: Props) => {
   const theme = useTheme2();
   const styles = getStyles(theme);
 
@@ -20,7 +19,7 @@ export const SectionNavToggle = ({ className, isExpanded, onClick }: Props) => {
       title={'Toggle section navigation'}
       aria-label={isExpanded ? 'Close section navigation' : 'Open section navigation'}
       icon="arrow-to-right"
-      className={classnames(className, styles.icon, {
+      className={classnames(styles.icon, {
         [styles.iconExpanded]: isExpanded,
       })}
       variant="secondary"
@@ -35,11 +34,33 @@ SectionNavToggle.displayName = 'SectionNavToggle';
 
 const getStyles = (theme: GrafanaTheme2) => ({
   icon: css({
+    alignSelf: 'center',
+    margin: theme.spacing(1, 0),
+    top: theme.spacing(0),
+    transform: 'rotate(90deg)',
+    transition: theme.transitions.create('opacity'),
     color: theme.colors.text.secondary,
-    marginRight: 0,
     zIndex: 1,
+
+    [theme.breakpoints.up('md')]: {
+      alignSelf: 'flex-start',
+      position: 'relative',
+      left: 0,
+      margin: theme.spacing(0, 0, 0, 1),
+      top: theme.spacing(2),
+      transform: 'none',
+    },
+
+    'div:hover > &, &:focus': {
+      opacity: 1,
+    },
   }),
   iconExpanded: css({
     rotate: '180deg',
+
+    [theme.breakpoints.up('md')]: {
+      opacity: 0,
+      margin: 0,
+    },
   }),
 });