PageToolbar: add bottom padding (#34602) (#34711)

* fix(pagetoolbar): pad elements top and bottom to keep vertical align and wrapper padding

* fix(sidemenu): prevent mobile sidemenu squashing dashboard, vertically align mobile sidemenu icon

* fix(dashboardsettings): prevent subheader overlap

* fix(pagetoolbar): center align all toolbar elements vertically

* refactor(pagetoolbar): combine vertical paddings to bring back original padding values

* refactor: update padding values for components that use PageToolbar

* fix(playlists): update Empty cta link route to prevent 404

* test(dashboard): update snapshot

(cherry picked from commit ad3b0b2272)

Co-authored-by: Jack Westbrook <jack.westbrook@gmail.com>

packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx

@@ -54,45 +54,42 @@ export const PageToolbar: FC<Props> = React.memo(
 
     return (
       <div className={mainStyle}>
-        <div className={styles.toolbarLeft}>
+        {pageIcon && !onGoBack && (
-          {pageIcon && !onGoBack && (
+          <div className={styles.pageIcon}>
-            <div className={styles.pageIcon}>
+            <Icon name={pageIcon} size="lg" />
-              <Icon name={pageIcon} size="lg" />
-            </div>
-          )}
-          {onGoBack && (
-            <div className={styles.goBackButton}>
-              <IconButton
-                name="arrow-left"
-                tooltip="Go back (Esc)"
-                tooltipPlacement="bottom"
-                size="xxl"
-                surface="dashboard"
-                aria-label={selectors.components.BackButton.backArrow}
-                onClick={onGoBack}
-              />
-            </div>
-          )}
-          <div className={styles.titleWrapper}>
-            {parent && onClickParent && (
-              <button onClick={onClickParent} className={cx(styles.titleLink, styles.parentLink)}>
-                {parent} <span className={styles.parentIcon}>/</span>
-              </button>
-            )}
-            {onClickTitle && (
-              <button onClick={onClickTitle} className={styles.titleLink}>
-                {title}
-              </button>
-            )}
-            {!onClickTitle && <div className={styles.titleText}>{title}</div>}
           </div>
-          {leftItems?.map((child, index) => (
+        )}
-            <div className={styles.leftActionItem} key={index}>
+        {onGoBack && (
-              {child}
+          <div className={styles.pageIcon}>
-            </div>
+            <IconButton
-          ))}
+              name="arrow-left"
-        </div>
+              tooltip="Go back (Esc)"
-        <div className={styles.spacer}></div>
+              tooltipPlacement="bottom"
+              size="xxl"
+              surface="dashboard"
+              aria-label={selectors.components.BackButton.backArrow}
+              onClick={onGoBack}
+            />
+          </div>
+        )}
+        {parent && onClickParent && (
+          <button onClick={onClickParent} className={cx(styles.titleText, styles.parentLink)}>
+            {parent} <span className={styles.parentIcon}>/</span>
+          </button>
+        )}
+        {onClickTitle && (
+          <button onClick={onClickTitle} className={styles.titleText}>
+            {title}
+          </button>
+        )}
+        {!onClickTitle && <div className={styles.titleText}>{title}</div>}
+        {leftItems?.map((child, index) => (
+          <div className={styles.leftActionItem} key={index}>
+            {child}
+          </div>
+        ))}
+
+        <div className={styles.spacer} />
         {React.Children.toArray(children)
           .filter(Boolean)
           .map((child, index) => {
@@ -114,7 +111,7 @@ const getStyles = (theme: GrafanaTheme2) => {
 
   const titleStyles = `
       font-size: ${typography.size.lg};
-      padding-left: ${spacing(1)};
+      padding: ${spacing(0.5, 1, 0.5, 1)};
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
@@ -131,71 +128,51 @@ const getStyles = (theme: GrafanaTheme2) => {
 
   return {
     toolbar: css`
-      display: flex;
+      align-items: center;
       background: ${theme.colors.background.canvas};
-      justify-content: flex-end;
-      flex-wrap: wrap;
-      padding: ${theme.spacing(1, 2, 0, 2)};
-    `,
-    toolbarLeft: css`
       display: flex;
-      flex-grow: 1;
+      flex-wrap: wrap;
-      min-width: 0;
+      justify-content: flex-end;
+      padding: ${theme.spacing(1.5, 2)};
     `,
     spacer: css`
       flex-grow: 1;
     `,
     pageIcon: css`
-      padding-top: ${spacing(1)};
-      align-items: center;
       display: none;
-
       @media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} {
         display: flex;
+        align-items: center;
       }
     `,
     titleWrapper: css`
       display: flex;
       align-items: center;
-      padding-top: ${spacing(1)};
-      padding-right: ${spacing(1)};
       min-width: 0;
       overflow: hidden;
     `,
-    goBackButton: css`
-      position: relative;
-      top: 8px;
-    `,
     parentIcon: css`
-      margin-left: 4px;
+      margin-left: ${theme.spacing(0.5)};
     `,
     titleText: css`
       ${titleStyles};
     `,
-    titleLink: css`
-      ${titleStyles};
-    `,
     parentLink: css`
       display: none;
-
+      padding-right: 0;
       @media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} {
-        display: inline-block;
+        display: unset;
       }
     `,
     actionWrapper: css`
-      padding-left: ${spacing(1)};
+      padding: ${spacing(0.5, 0, 0.5, 1)};
-      padding-top: ${spacing(1)};
     `,
     leftActionItem: css`
       display: none;
-      height: 40px;
-      position: relative;
-      top: 5px;
-      align-items: center;
-      padding-left: ${spacing(0.5)};
-
       @media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} {
+        align-items: center;
         display: flex;
+        padding-left: ${spacing(0.5)};
       }
     `,
   };

public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx

@@ -151,7 +151,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       background: ${theme.colors.background.primary};
       border: 1px solid ${theme.colors.border.weak};
       border-radius: ${theme.shape.borderRadius()};
-      margin: ${theme.spacing(2)};
+      margin: ${theme.spacing(0, 2, 2)};
       overflow: hidden;
       flex: 1;
     `,

public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx

@@ -185,7 +185,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
     display: flex;
   `,
   settingsWrapper: css`
-    margin: ${theme.spacing(2)};
+    margin: ${theme.spacing(0, 2, 2)};
     display: flex;
     flex-grow: 1;
   `,

public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx

@@ -67,7 +67,7 @@ const getStyles = (theme: GrafanaTheme) => {
       display: flex;
       flex: 1 1 0;
       flex-direction: column;
-      padding: ${theme.spacing.md} 0 0 0;
+      padding: 0;
     `,
     optionsWrapper: css`
       flex-grow: 1;

public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx

@@ -526,7 +526,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme, props: Props) => {
     `,
     panelToolbar: css`
       display: flex;
-      padding: ${paneSpacing} 0 ${paneSpacing} ${paneSpacing};
+      padding: 0 0 ${paneSpacing} ${paneSpacing};
       justify-content: space-between;
       flex-wrap: wrap;
     `,

public/app/features/dashboard/containers/DashboardPage.tsx

@@ -290,7 +290,8 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
   render() {
     const { dashboard, isInitSlow, initError, isPanelEditorOpen, queryParams, theme } = this.props;
     const { editPanel, viewPanel, scrollTop, updateScrollTop } = this.state;
-    const styles = getStyles(theme);
+    const kioskMode = getKioskMode(queryParams.kiosk);
+    const styles = getStyles(theme, kioskMode);
 
     if (!dashboard) {
       if (isInitSlow) {
@@ -303,7 +304,6 @@ export class UnthemedDashboardPage extends PureComponent<Props, State> {
     // Only trigger render when the scroll has moved by 25
     const approximateScrollTop = Math.round(scrollTop / 25) * 25;
     const inspectPanel = this.getInspectPanel();
-    const kioskMode = getKioskMode(queryParams.kiosk);
 
     return (
       <div className={styles.dashboardContainer}>
@@ -373,7 +373,8 @@ const mapDispatchToProps = {
 /*
  * Styles
  */
-export const getStyles = stylesFactory((theme: GrafanaTheme2) => {
+export const getStyles = stylesFactory((theme: GrafanaTheme2, kioskMode) => {
+  const contentPadding = kioskMode !== KioskMode.Full ? theme.spacing(0, 2, 2) : theme.spacing(2);
   return {
     dashboardContainer: css`
       position: absolute;
@@ -392,7 +393,7 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2) => {
       display: flex;
     `,
     dashboardContent: css`
-      padding: ${theme.spacing(2)};
+      padding: ${contentPadding};
       flex-basis: 100%;
       flex-grow: 1;
     `,

public/app/features/dashboard/containers/__snapshots__/DashboardPage.test.tsx.snap

@@ -128,7 +128,7 @@ exports[`DashboardPage Dashboard init completed  Should render dashboard grid 1`
       updateAfterMountMs={500}
     >
       <div
-        className="css-50qyg5"
+        className="css-1xodasp"
       >
         <div
           aria-label="Dashboard submenu"
@@ -507,7 +507,7 @@ exports[`DashboardPage When dashboard has editview url state should render setti
       updateAfterMountMs={500}
     >
       <div
-        className="css-50qyg5"
+        className="css-1xodasp"
       >
         <div
           aria-label="Dashboard submenu"

public/app/features/playlist/PlaylistPage.tsx

@@ -32,7 +32,7 @@ export const PlaylistPage: FC<Props> = ({ navModel }) => {
     <EmptyListCTA
       title="There are no playlists created yet"
       buttonIcon="plus"
-      buttonLink="playlists/create"
+      buttonLink="playlists/new"
       buttonTitle="Create Playlist"
       proTip="You can use playlists to cycle dashboards on TVs without user control"
       proTipLink="http://docs.grafana.org/reference/playlist/"

public/sass/components/_dashboard_settings.scss

@@ -49,8 +49,6 @@
 .dashboard-settings__subheader {
   color: $text-muted;
   font-style: italic;
-  position: relative;
-  top: -$space-lg;
 }
 
 .dashboard-settings__nav-item {

public/sass/components/_sidemenu.scss

@@ -207,7 +207,7 @@ li.sidemenu-org-switcher {
       background: $side-menu-bg-mobile;
       height: auto;
       box-shadow: $side-menu-shadow;
-      position: relative;
+      position: absolute;
       z-index: $zindex-sidemenu;
     }
 
@@ -233,7 +233,7 @@ li.sidemenu-org-switcher {
     }
 
     .sidemenu__logo_small_breakpoint {
-      padding: 13px;
+      padding: 16px 13px;
       display: flex;
       flex-direction: row;
       justify-content: space-between;