feat(condensed horizontal nav): updates condensed nav to match Core h…

…orizontal & vertical nav (patternfly#876) * feat(condensed horizontal nav): updates condensed nav to match Core for horizontal & vertical nav * consume PageContext in PageHeader * update page header test * check window is defined * pr comment updates * use this * comment updates
redallen · Nov 2, 2018 · 760cc7b · 760cc7b
1 parent 7590203
commit 760cc7b
Show file tree

Hide file tree

Showing 18 changed files with 406 additions and 148 deletions.
diff --git a/packages/patternfly-4/react-core/package.json b/packages/patternfly-4/react-core/package.json
@@ -47,7 +47,7 @@
     "@patternfly/react-tokens": "^1.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly-next": "1.0.64",
+    "@patternfly/patternfly-next": "1.0.66",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
     "glob": "^7.1.2",

diff --git a/packages/patternfly-4/react-core/src/components/Avatar/__snapshots__/Avatar.test.js.snap b/packages/patternfly-4/react-core/src/components/Avatar/__snapshots__/Avatar.test.js.snap
@@ -3,6 +3,8 @@
 exports[`simple avatar 1`] = `
 .pf-c-avatar {
   display: block;
+  width: 2.25rem;
+  height: 2.25rem;
   border-radius: 30em;
 }
 

diff --git a/packages/patternfly-4/react-core/src/components/Nav/NavList.d.ts b/packages/patternfly-4/react-core/src/components/Nav/NavList.d.ts
@@ -13,6 +13,7 @@ export interface NavListProps extends HTMLProps<HTMLDivElement> {
   isExpandable?: boolean;
   isExpanded?: boolean;
   isActive?: boolean;
+  isTall?: boolean;
 }
 
 declare const NavList: SFC<NavListProps>;

diff --git a/packages/patternfly-4/react-core/src/components/Nav/NavList.js b/packages/patternfly-4/react-core/src/components/Nav/NavList.js
@@ -3,24 +3,28 @@ import PropTypes from 'prop-types';
 import { NavVariants } from './NavVariants';
 import styles from '@patternfly/patternfly-next/components/Nav/nav.css';
 import { css } from '@patternfly/react-styles';
+import { PageContext } from '../../layouts/Page/Page';
 
 const propTypes = {
   /** Indicates the list type. */
   variant: PropTypes.oneOf(Object.values(NavVariants)),
   /** Children nodes */
   children: PropTypes.node,
   /** Additional classes added to the list */
-  className: PropTypes.string
+  className: PropTypes.string,
+  /** Impacts horizontal nav only: If true makes the nav taller. If nav is within a Page layout,
+   * the layout sets this prop automatically if the Page useCondensed feature is enabled. */
+  isTall: PropTypes.bool
 };
 
 const defaultProps = {
   variant: 'default',
   children: null,
-  className: ''
+  className: '',
+  isTall: false
 };
 
-const NavList = ({ variant, children, className, ...props }) => {
-
+const NavList = ({ variant, children, className, isTall, ...props }) => {
   const variantStyle = {
     [NavVariants.default]: styles.navList,
     [NavVariants.simple]: styles.navSimpleList,
@@ -29,11 +33,22 @@ const NavList = ({ variant, children, className, ...props }) => {
   };
 
   return (
-    <ul className={css(variantStyle[variant], className)} {...props}>
-      {children}
-    </ul>
+    <PageContext.Consumer>
+      {context => (
+        <ul
+          className={css(
+            variantStyle[variant],
+            ((context && context.isTall) || isTall) && styles.modifiers.tall,
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </ul>
+      )}
+    </PageContext.Consumer>
   );
-}
+};
 
 NavList.propTypes = propTypes;
 NavList.defaultProps = defaultProps;

diff --git a/packages/patternfly-4/react-core/src/components/Nav/__snapshots__/Nav.test.js.snap b/packages/patternfly-4/react-core/src/components/Nav/__snapshots__/Nav.test.js.snap
@@ -47,6 +47,7 @@ exports[`Default Nav List - Trigger item active update 1`] = `
   >
     <NavList
       className=""
+      isTall={false}
       variant="default"
     >
       <ul
@@ -197,6 +198,7 @@ exports[`Default Nav List 1`] = `
   >
     <NavList
       className=""
+      isTall={false}
       variant="default"
     >
       <ul
@@ -373,6 +375,7 @@ exports[`Expandable Nav List - Trigger toggle 1`] = `
   >
     <NavList
       className=""
+      isTall={false}
       variant="default"
     >
       <ul
@@ -616,6 +619,7 @@ exports[`Expandable Nav List 1`] = `
   >
     <NavList
       className=""
+      isTall={false}
       variant="default"
     >
       <ul
@@ -867,6 +871,7 @@ exports[`Expandable Nav List with aria label 1`] = `
   >
     <NavList
       className=""
+      isTall={false}
       variant="default"
     >
       <ul
@@ -1090,6 +1095,7 @@ exports[`Horizontal Nav List 1`] = `
   >
     <NavList
       className=""
+      isTall={false}
       variant="horizontal"
     >
       <ul
@@ -1311,6 +1317,7 @@ exports[`Nav Grouped List 1`] = `
         >
           <NavList
             className=""
+            isTall={false}
             variant="default"
           >
             <ul
@@ -1433,6 +1440,7 @@ exports[`Nav Grouped List 1`] = `
         >
           <NavList
             className=""
+            isTall={false}
             variant="default"
           >
             <ul
@@ -1568,6 +1576,7 @@ exports[`Nav List with custom item nodes 1`] = `
   >
     <NavList
       className=""
+      isTall={false}
       variant="tertiary"
     >
       <ul
@@ -1649,6 +1658,7 @@ exports[`Simple Nav List 1`] = `
   >
     <NavList
       className=""
+      isTall={false}
       variant="simple"
     >
       <ul
@@ -1799,6 +1809,7 @@ exports[`Tertiary Nav List 1`] = `
   >
     <NavList
       className=""
+      isTall={false}
       variant="tertiary"
     >
       <ul

diff --git a/packages/patternfly-4/react-core/src/demos/PageLayout/PageLayoutDemo.docs.js b/packages/patternfly-4/react-core/src/demos/PageLayout/PageLayoutDemo.docs.js
@@ -3,7 +3,8 @@ import PageLayoutExpandableNav from './examples/PageLayoutExpandableNav';
 import PageLayoutGroupsNav from './examples/PageLayoutGroupsNav';
 import PageLayoutHorizontalNav from './examples/PageLayoutHorizontalNav';
 import PageLayoutSimpleNav from './examples/PageLayoutSimpleNav';
-import PageLayoutCondensedHeader from './examples/PageLayoutCondensedHeader';
+import PageLayoutVerticalNavCondensed from './examples/PageLayoutVerticalNavCondensed';
+import PageLayoutHorizontalNavCondensed from './examples/PageLayoutHorizontalNavCondensed';
 
 export default {
   title: 'Page Layout Demos',
@@ -13,7 +14,8 @@ export default {
     PageLayoutGroupsNav,
     PageLayoutHorizontalNav,
     PageLayoutSimpleNav,
-    PageLayoutCondensedHeader
+    PageLayoutVerticalNavCondensed,
+    PageLayoutHorizontalNavCondensed
   ],
   fullPageOnly: true
 };