feat(Page): added responsive docked nav

Author: thatblindgeye

packages/react-core/src/components/Button/Button.tsx

@@ -109,6 +109,10 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   hamburgerVariant?: 'expand' | 'collapse';
   /** @beta Flag indicating the button is a circle button. Intended for buttons that only contain an icon.. */
   isCircle?: boolean;
+  /** @beta Flag indicating the button is a dock variant button. For use in docked navigation. */
+  isDock?: boolean;
+  /** @beta Flag indicating the dock button should display text. Only applies when isDock is true. */
+  isTextExpanded?: boolean;
   /** @hide Forwarded ref */
   innerRef?: React.Ref<any>;
   /** Adds count number to button */
@@ -134,6 +138,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
   isHamburger,
   hamburgerVariant,
   isCircle,
+  isDock = false,
+  isTextExpanded = false,
   spinnerAriaValueText,
   spinnerAriaLabelledBy,
   spinnerAriaLabel,
@@ -265,6 +271,8 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
         size === ButtonSize.sm && styles.modifiers.small,
         size === ButtonSize.lg && styles.modifiers.displayLg,
         isCircle && styles.modifiers.circle,
+        isDock && styles.modifiers.dock,
+        isTextExpanded && styles.modifiers.textExpanded,
         className
       )}
       disabled={isButtonElement ? isDisabled : null}

packages/react-core/src/components/Masthead/MastheadLogo.tsx

@@ -11,12 +11,15 @@ export interface MastheadLogoProps extends React.DetailedHTMLProps<
   className?: string;
   /** Component type of the masthead logo. */
   component?: React.ElementType<any> | React.ComponentType<any>;
+  /** @beta Flag indicating the logo is a compact variant. Used in docked layouts. */
+  isCompact?: boolean;
 }
 
 export const MastheadLogo: React.FunctionComponent<MastheadLogoProps> = ({
   children,
   className,
   component,
+  isCompact = false,
   ...props
 }: MastheadLogoProps) => {
   let Component = component as any;
@@ -28,7 +31,11 @@ export const MastheadLogo: React.FunctionComponent<MastheadLogoProps> = ({
     }
   }
   return (
-    <Component className={css(styles.mastheadLogo, className)} {...(Component === 'a' && { tabIndex: 0 })} {...props}>
+    <Component
+      className={css(styles.mastheadLogo, isCompact && styles.modifiers.compact, className)}
+      {...(Component === 'a' && { tabIndex: 0 })}
+      {...props}
+    >
       {children}
     </Component>
   );

packages/react-core/src/components/MenuToggle/MenuToggle.tsx

@@ -51,6 +51,10 @@ export interface MenuToggleProps
   isCircle?: boolean;
   /** Flag indicating whether the toggle is a settings toggle. This will override the icon property */
   isSettings?: boolean;
+  /** @beta Flag indicating the toggle is a dock variant. For use in docked navigation. */
+  isDock?: boolean;
+  /** @beta Flag indicating the dock toggle should display text. Only applies when isDock is true. */
+  isTextExpanded?: boolean;
   /** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
   splitButtonItems?: React.ReactNode[];
   /** Variant styles of the menu toggle */
@@ -85,6 +89,8 @@ class MenuToggleBase extends Component<MenuToggleProps> {
     isFullHeight: false,
     isPlaceholder: false,
     isCircle: false,
+    isDock: false,
+    isTextExpanded: false,
     size: 'default',
     ouiaSafe: true
   };
@@ -102,6 +108,8 @@ class MenuToggleBase extends Component<MenuToggleProps> {
       isPlaceholder,
       isCircle,
       isSettings,
+      isDock,
+      isTextExpanded,
       splitButtonItems,
       variant,
       status,
@@ -185,6 +193,8 @@ class MenuToggleBase extends Component<MenuToggleProps> {
             isDisabled && styles.modifiers.disabled,
             isPlaceholder && styles.modifiers.placeholder,
             isSettings && styles.modifiers.settings,
+            isDock && styles.modifiers.dock,
+            isTextExpanded && styles.modifiers.textExpanded,
             size === MenuToggleSize.sm && styles.modifiers.small,
             className
           );

packages/react-core/src/components/Nav/Nav.tsx

@@ -39,6 +39,8 @@ export interface NavProps
   'aria-label'?: string;
   /** The nav variant to use. Docked is in beta. */
   variant?: 'default' | 'horizontal' | 'horizontal-subnav' | 'docked';
+  /** @beta Flag indicating the docked nav should display text. Only applies when variant is docked. */
+  isTextExpanded?: boolean;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
@@ -119,6 +121,7 @@ class Nav extends Component<NavProps, { isScrollable: boolean; flyoutRef: React.
       ouiaId,
       ouiaSafe,
       variant,
+      isTextExpanded = false,
       ...props
     } = this.props;
     const isHorizontal = ['horizontal', 'horizontal-subnav'].includes(variant);
@@ -156,6 +159,7 @@ class Nav extends Component<NavProps, { isScrollable: boolean; flyoutRef: React.
                 isHorizontal && styles.modifiers.horizontal,
                 variant === 'docked' && styles.modifiers.docked,
                 variant === 'horizontal-subnav' && styles.modifiers.subnav,
+                isTextExpanded && styles.modifiers.textExpanded,
                 this.state.isScrollable && styles.modifiers.scrollable,
                 className
               )}

packages/react-core/src/components/Page/Page.tsx

@@ -22,8 +22,13 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** @beta Indicates the layout variant */
   variant?: 'default' | 'docked';
+  /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when variant is docked. */
+  isDockExpanded?: boolean;
+  /** @beta Flag indicating the docked nav should display text. Only applies when variant is docked. */
+  isDockTextExpanded?: boolean;
   /** Masthead component (e.g. <Masthead />) */
   masthead?: React.ReactNode;
+  dockedMasthead?: React.ReactNode;
   /** Sidebar component for a side nav, recommended to be a PageSidebar. If set to null, the page grid layout
    * will render without a sidebar.
    */
@@ -232,7 +237,10 @@ class Page extends Component<PageProps, PageState> {
       className,
       children,
       variant,
+      isDockExpanded = false,
+      isDockTextExpanded = false,
       masthead,
+      dockedMasthead,
       sidebar,
       notificationDrawer,
       isNotificationDrawerExpanded,
@@ -349,9 +357,18 @@ class Page extends Component<PageProps, PageState> {
         >
           {skipToContent}
           {variant === 'docked' ? (
-            <div className={css(styles.pageDock)}>
-              <div className={css(styles.pageDockMain)}>{masthead}</div>
-            </div>
+            <>
+              {masthead}
+              <div
+                className={css(
+                  styles.pageDock,
+                  isDockExpanded && styles.modifiers.expanded,
+                  isDockTextExpanded && styles.modifiers.textExpanded
+                )}
+              >
+                <div className={css(styles.pageDockMain)}>{dockedMasthead}</div>
+              </div>
+            </>
           ) : (
             masthead
           )}

packages/react-core/src/demos/Page.md

@@ -18,6 +18,8 @@ import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 
 - All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
   1. Add an onNavToggle callback to PageHeader