Skip to content

Commit

Permalink
fix(layout): Mini Layouts Align Icons with Hamburger Menu in Dense Mode
Browse files Browse the repository at this point in the history
  • Loading branch information
mlaursen committed May 14, 2021
1 parent c9cc6a7 commit abbe9a9
Show file tree
Hide file tree
Showing 3 changed files with 74 additions and 65 deletions.
6 changes: 3 additions & 3 deletions packages/layout/src/__tests__/__snapshots__/Layout.tsx.snap
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
4 changes: 4 additions & 0 deletions packages/layout/src/_mixins.scss
Expand Up @@ -110,6 +110,10 @@

flex: 1 1 auto;
height: 100%;

&__mini-item {
justify-content: center;
}
}

.rmd-layout-tree {
Expand Down
129 changes: 67 additions & 62 deletions 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";
Expand All @@ -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>
);
};

0 comments on commit abbe9a9

Please sign in to comment.