fix(layout): Mini Layouts Align Icons with Hamburger Menu in Dense Mode

mlaursen · May 14, 2021 · abbe9a9 · abbe9a9
1 parent c9cc6a7
commit abbe9a9
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 65 deletions.
diff --git a/packages/layout/src/__tests__/__snapshots__/Layout.tsx.snap b/packages/layout/src/__tests__/__snapshots__/Layout.tsx.snap
@@ -206,7 +206,7 @@ exports[`Layout mini variant should display only valid nav items at the root in
         tabindex="-1"
       >
         <span
-          class="rmd-tree-item__content rmd-tree-item__content--clickable rmd-tree-item__content--selected"
+          class="rmd-tree-item__content rmd-tree-item__content--clickable rmd-tree-item__content--selected rmd-layout-nav__mini-item"
         >
           <svg
             aria-hidden="true"
@@ -239,7 +239,7 @@ exports[`Layout mini variant should display only valid nav items at the root in
         tabindex="-1"
       >
         <span
-          class="rmd-tree-item__content rmd-tree-item__content--clickable"
+          class="rmd-tree-item__content rmd-tree-item__content--clickable rmd-layout-nav__mini-item"
         >
           <svg
             aria-hidden="true"
@@ -276,7 +276,7 @@ exports[`Layout mini variant should display only valid nav items at the root in
         tabindex="-1"
       >
         <span
-          class="rmd-tree-item__content rmd-tree-item__content--clickable"
+          class="rmd-tree-item__content rmd-tree-item__content--clickable rmd-layout-nav__mini-item"
         >
           <svg
             aria-hidden="true"

diff --git a/packages/layout/src/_mixins.scss b/packages/layout/src/_mixins.scss
@@ -110,6 +110,10 @@
 
     flex: 1 1 auto;
     height: 100%;
+
+    &__mini-item {
+      justify-content: center;
+    }
   }
 
   .rmd-layout-tree {

diff --git a/packages/layout/src/defaultMiniNavigationItemRenderer.tsx b/packages/layout/src/defaultMiniNavigationItemRenderer.tsx
@@ -1,4 +1,5 @@
 import React, { ReactNode } from "react";
+import cn from "classnames";
 import { Divider } from "@react-md/divider";
 import { TreeItem, TreeItemRenderer } from "@react-md/tree";
 import { SrOnly } from "@react-md/typography";
@@ -25,70 +26,74 @@ import { LayoutNavigationItem } from "./types";
  * @see {@link TreeItemRenderer}
  * @see {@link defaultNavigationItemRenderer}
  */
-export const defaultMiniNavigationItemRenderer: TreeItemRenderer<LayoutNavigationItem> = (
-  itemProps,
-  item,
-  { linkComponent, getItemProps, getItemLabel, labelKey }
-) => {
-  const { key, renderChildItems, ...props } = itemProps;
-  const {
-    divider,
-    subheader,
-    leftAddon,
-    parentId,
-    style,
-    className,
-    liStyle,
-    liClassName,
-    as,
-    to,
-    href,
-    isLink,
-    contentComponent: propContentComponent,
-  } = item;
+export const defaultMiniNavigationItemRenderer: TreeItemRenderer<LayoutNavigationItem> =
+  (
+    itemProps,
+    item,
+    { linkComponent, getItemProps, getItemLabel, labelKey }
+  ) => {
+    const { key, renderChildItems, ...props } = itemProps;
+    const {
+      divider,
+      subheader,
+      leftAddon,
+      parentId,
+      style,
+      className,
+      liStyle,
+      liClassName,
+      as,
+      to,
+      href,
+      isLink,
+      contentComponent: propContentComponent,
+    } = item;
 
-  if (divider && parentId === null) {
-    return <Divider key={key} />;
-  }
+    if (divider && parentId === null) {
+      return <Divider key={key} />;
+    }
 
-  if (subheader || parentId !== null || !leftAddon || renderChildItems) {
-    return null;
-  }
+    if (subheader || parentId !== null || !leftAddon || renderChildItems) {
+      return null;
+    }
 
-  let contentComponent = propContentComponent;
-  if (!contentComponent && isLink !== false && (to || href || isLink)) {
-    contentComponent = linkComponent;
-  }
+    let contentComponent = propContentComponent;
+    if (!contentComponent && isLink !== false && (to || href || isLink)) {
+      contentComponent = linkComponent;
+    }
 
-  const { focused, selected, expanded } = itemProps;
-  const overrides = getItemProps({
-    ...item,
-    focused,
-    selected,
-    expanded,
-  });
-  let children: ReactNode = (overrides && overrides.children) || undefined;
-  if (typeof children === "undefined") {
-    children = getItemLabel(item, labelKey);
-  }
+    const { focused, selected, expanded } = itemProps;
+    const overrides = getItemProps({
+      ...item,
+      focused,
+      selected,
+      expanded,
+    });
+    let children: ReactNode = (overrides && overrides.children) || undefined;
+    if (typeof children === "undefined") {
+      children = getItemLabel(item, labelKey);
+    }
 
-  return (
-    <TreeItem
-      key={key}
-      {...props}
-      as={as}
-      to={to}
-      href={href}
-      isLink={isLink}
-      contentComponent={contentComponent}
-      style={overrides?.style ?? style}
-      className={overrides?.className ?? className}
-      liStyle={overrides?.liStyle ?? liStyle}
-      liClassName={overrides?.liClassName ?? liClassName}
-      textChildren={false}
-    >
-      {leftAddon}
-      <SrOnly>{children}</SrOnly>
-    </TreeItem>
-  );
-};
+    return (
+      <TreeItem
+        key={key}
+        {...props}
+        as={as}
+        to={to}
+        href={href}
+        isLink={isLink}
+        contentComponent={contentComponent}
+        style={overrides?.style ?? style}
+        className={cn(
+          "rmd-layout-nav__mini-item",
+          overrides?.className ?? className
+        )}
+        liStyle={overrides?.liStyle ?? liStyle}
+        liClassName={overrides?.liClassName ?? liClassName}
+        textChildren={false}
+      >
+        {leftAddon}
+        <SrOnly>{children}</SrOnly>
+      </TreeItem>
+    );
+  };