Navigation: Rough implementation of new navbar design (#46909)

packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx

@@ -30,7 +30,7 @@ export const CollapsableSection: FC<Props> = ({
 }) => {
   const [open, toggleOpen] = useState<boolean>(isOpen);
   const styles = useStyles2(collapsableSectionStyles);
-  const tooltip = `Click to ${open ? 'collapse' : 'expand'}`;
+
   const onClick = (e: React.MouseEvent) => {
     if (e.target instanceof HTMLElement && e.target.tagName === 'A') {
       return;
@@ -48,7 +48,7 @@ export const CollapsableSection: FC<Props> = ({
 
   return (
     <>
-      <div onClick={onClick} className={cx(styles.header, className)} title={tooltip}>
+      <div onClick={onClick} className={cx(styles.header, className)}>
         <button
           id={`collapse-button-${id}`}
           className={styles.button}
@@ -88,9 +88,6 @@ const collapsableSectionStyles = (theme: GrafanaTheme2) => ({
     padding: `${theme.spacing(0.5)} 0`,
     '&:focus-within': getFocusStyles(theme),
   }),
-  headerClosed: css({
-    borderBottom: `1px solid ${theme.colors.border.weak}`,
-  }),
   button: css({
     all: 'unset',
     '&:focus-visible': {

packages/grafana-ui/src/themes/mixins.ts

@@ -43,7 +43,9 @@ export const focusCss = (theme: GrafanaTheme) => `
   outline: 2px dotted transparent;
   outline-offset: 2px;
   box-shadow: 0 0 0 2px ${theme.colors.bodyBg}, 0 0 0px 4px ${theme.colors.formFocusOutline};
-  transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
+  transition-property: outline, outline-offset, box-shadow;
+  transition-duration: 0.2s;
+  transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
 `;
 
 export function getMouseFocusStyles(theme: GrafanaTheme2): CSSObject {
@@ -58,7 +60,9 @@ export function getFocusStyles(theme: GrafanaTheme2): CSSObject {
     outline: '2px dotted transparent',
     outlineOffset: '2px',
     boxShadow: `0 0 0 2px ${theme.colors.background.canvas}, 0 0 0px 4px ${theme.colors.primary.main}`,
-    transition: `all 0.2s cubic-bezier(0.19, 1, 0.22, 1)`,
+    transitionTimingFunction: `cubic-bezier(0.19, 1, 0.22, 1)`,
+    transitionDuration: '0.2s',
+    transitionProperty: 'outline, outline-offset, box-shadow',
   };
 }