@patternfly/react-core 4.229.0 → 4.231.0

package/src/demos/Page/Page.md

@@ -357,7 +357,7 @@ class PageLayoutGrouped extends React.Component {
                 </PageSection>
               }
               groupProps={{
-                sticky: 'top'
+                stickyOnBreakpoint: { default: 'top' },
               }}
             >
               <PageSection>
@@ -599,7 +599,9 @@ class PageLayoutGrouped extends React.Component {
             </PageSection>
           }
           groupProps={{
-            sticky: 'top'
+            stickyOnBreakpoint: {
+               default: 'top'
+            }
           }}
         >
           <PageSection>
@@ -788,7 +790,7 @@ class PageLayoutGroupedAlt extends React.Component {
     return (
       <React.Fragment>
         <Page header={Header} isManagedSidebar skipToContent={PageSkipToContent} mainContainerId={pageId}>
-          <PageGroup sticky="top">
+          <PageGroup stickyOnBreakpoint={{ default: 'top' }}>
             <PageNavigation isWidthLimited>
               <Nav variant="tertiary" onSelect={this.onNavSelect} aria-label="Nav">
                 <NavList>
@@ -847,3 +849,354 @@ class PageLayoutGroupedAlt extends React.Component {
   }
 }
 ```
+
+### Sticky section breadcrumb (with breakpoints)
+
+```js isFullscreen
+import React from 'react';
+import {
+  Avatar,
+  Brand,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  Checkbox,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownToggle,
+  DropdownItem,
+  DropdownSeparator,
+  Gallery,
+  GalleryItem,
+  KebabToggle,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadMain,
+  MastheadToggle,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSectionVariants,
+  PageSidebar,
+  PageToggleButton,
+  SkipToContent,
+  TextContent,
+  Text,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerContentBody,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+} from '@patternfly/react-core';
+import { css } from '@patternfly/react-styles';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
+import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+import imgBrand from './imgBrand.svg';
+import imgAvatar from './imgAvatar.svg';
+
+class PageLayoutGrouped extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isDropdownOpen: false,
+      isKebabDropdownOpen: false,
+      isFullKebabDropdownOpen: false,
+      activeItem: 0,
+      isDrawerExpanded: false
+    };
+    this.onDropdownToggle = isDropdownOpen => {
+      this.setState({
+        isDropdownOpen
+      });
+    };
+
+    this.onDropdownSelect = event => {
+      this.setState({
+        isDropdownOpen: !this.state.isDropdownOpen
+      });
+    };
+
+    this.onKebabDropdownToggle = isKebabDropdownOpen => {
+      this.setState({
+        isKebabDropdownOpen
+      });
+    };
+
+    this.onKebabDropdownSelect = event => {
+      this.setState({
+        isKebabDropdownOpen: !this.state.isKebabDropdownOpen
+      });
+    };
+
+    this.onNavSelect = result => {
+      this.setState({
+        activeItem: result.itemId
+      });
+    };
+
+    this.onFullKebabToggle = isFullKebabDropdownOpen => {
+      this.setState({
+        isFullKebabDropdownOpen
+      });
+    };
+
+    this.onFullKebabSelect = () => {
+      this.setState({
+        isFullKebabDropdownOpen: !this.state.isFullKebabDropdownOpen
+      });
+    };
+
+    this.onDrawerToggle = () => {
+      const isDrawerExpanded = !this.state.isDrawerExpanded;
+      this.setState({
+        isDrawerExpanded
+      });
+    };
+
+    this.onDrawerClose = () => {
+      this.setState({
+        isDrawerExpanded: false
+      });
+    };
+  }
+
+  render() {
+    const { isDropdownOpen, isKebabDropdownOpen, activeItem, isFullKebabDropdownOpen, isDrawerExpanded } = this.state;
+
+    const PageNav = (
+      <Nav onSelect={this.onNavSelect} aria-label="Nav">
+        <NavList>
+          <NavItem href="#" itemId={0} isActive={activeItem === 0}>
+            System panel
+          </NavItem>
+          <NavItem href="#" itemId={1} isActive={activeItem === 1}>
+            Policy
+          </NavItem>
+          <NavItem href="#" itemId={2} isActive={activeItem === 2}>
+            Authentication
+          </NavItem>
+          <NavItem href="#" itemId={3} isActive={activeItem === 3}>
+            Network services
+          </NavItem>
+          <NavItem href="#" itemId={4} isActive={activeItem === 4}>
+            Server
+          </NavItem>
+        </NavList>
+      </Nav>
+    );
+
+    const kebabDropdownItems = [
+      <DropdownItem>
+        <CogIcon /> Settings
+      </DropdownItem>,
+      <DropdownItem>
+        <HelpIcon /> Help
+      </DropdownItem>
+    ];
+
+    const userDropdownItems = [
+      <DropdownGroup key="group 2">
+        <DropdownItem key="group 2 profile">My profile</DropdownItem>
+        <DropdownItem key="group 2 user" component="button">
+          User management
+        </DropdownItem>
+        <DropdownItem key="group 2 logout">Logout</DropdownItem>
+      </DropdownGroup>
+    ];
+
+    const fullKebabItems = [
+      <DropdownGroup key="group 2">
+        <DropdownItem key="group 2 profile">My profile</DropdownItem>
+        <DropdownItem key="group 2 user" component="button">
+          User management
+        </DropdownItem>
+        <DropdownItem key="group 2 logout">Logout</DropdownItem>
+      </DropdownGroup>,
+      <Divider key="divider" />,
+      <DropdownItem key="kebab-1">
+        <CogIcon /> Settings
+      </DropdownItem>,
+      <DropdownItem key="kebab-2">
+        <HelpIcon /> Help
+      </DropdownItem>
+    ];
+
+    const headerToolbar = (
+      <Toolbar id="toolbar" isFullHeight isStatic>
+        <ToolbarContent>
+          <ToolbarGroup
+            variant="icon-button-group"
+            alignment={{ default: 'alignRight' }}
+            spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+          >
+            <ToolbarItem>
+              <Button aria-label="Toggle drawer" variant={ButtonVariant.plain} onClick={this.onDrawerToggle}>
+                <LightbulbIcon color={isDrawerExpanded ? 'yellow' : 'currentColor'} />
+              </Button>
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button aria-label="Notifications" variant={ButtonVariant.plain}>
+                <AttentionBellIcon />
+              </Button>
+            </ToolbarItem>
+            <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+              <ToolbarItem>
+                <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
+                  <CogIcon />
+                </Button>
+              </ToolbarItem>
+              <ToolbarItem>
+                <Button aria-label="Help actions" variant={ButtonVariant.plain}>
+                  <QuestionCircleIcon />
+                </Button>
+              </ToolbarItem>
+            </ToolbarGroup>
+            <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
+              <Dropdown
+                isPlain
+                position="right"
+                onSelect={this.onKebabDropdownSelect}
+                toggle={<KebabToggle onToggle={this.onKebabDropdownToggle} />}
+                isOpen={isKebabDropdownOpen}
+                dropdownItems={kebabDropdownItems}
+              />
+            </ToolbarItem>
+            <ToolbarItem visibility={{ default: 'visible', md: 'hidden', lg: 'hidden', xl: 'hidden', '2xl': 'hidden' }}>
+              <Dropdown
+                isPlain
+                position="right"
+                onSelect={this.onFullKebabSelect}
+                toggle={<KebabToggle onToggle={this.onFullKebabToggle} />}
+                isOpen={isFullKebabDropdownOpen}
+                dropdownItems={fullKebabItems}
+              />
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+            <Dropdown
+              position="right"
+              onSelect={this.onDropdownSelect}
+              isOpen={isDropdownOpen}
+              toggle={
+                <DropdownToggle icon={<Avatar src={imgAvatar} alt="Avatar" />} onToggle={this.onDropdownToggle}>
+                  John Smith
+                </DropdownToggle>
+              }
+              dropdownItems={userDropdownItems}
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+
+    const Header = (
+      <Masthead>
+        <MastheadToggle>
+          <PageToggleButton variant="plain" aria-label="Global navigation">
+            <BarsIcon />
+          </PageToggleButton>
+        </MastheadToggle>
+        <MastheadMain>
+          <MastheadBrand>
+            <Brand src={imgBrand} alt="Patternfly Logo" />
+          </MastheadBrand>
+        </MastheadMain>
+        <MastheadContent>{headerToolbar}</MastheadContent>
+      </Masthead>
+    );
+
+    const pageId = 'main-content-page-layout-tertiary-nav';
+    const PageSkipToContent = <SkipToContent href={`#${pageId}`}>Skip to content</SkipToContent>;
+
+    const PageBreadcrumb = (
+      <Breadcrumb>
+        <BreadcrumbItem>Section home</BreadcrumbItem>
+        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+        <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+        <BreadcrumbItem to="#" isActive>
+          Section landing
+        </BreadcrumbItem>
+      </Breadcrumb>
+    );
+
+    const panelContent = (
+      <DrawerPanelContent isResizable>
+        <DrawerHead>
+          <span tabIndex={isDrawerExpanded ? 0 : -1}>
+            drawer-panel
+          </span>
+          <DrawerActions>
+            <DrawerCloseButton onClick={this.onDrawerClose} />
+          </DrawerActions>
+        </DrawerHead>
+      </DrawerPanelContent>
+    );
+
+    const Sidebar = <PageSidebar nav={PageNav} />;
+
+    return (
+      <Drawer isExpanded={isDrawerExpanded} isInline onExpand={this.onExpand}>
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>
+            <Page
+              header={Header}
+              breadcrumb={PageBreadcrumb}
+              sidebar={Sidebar}
+              isManagedSidebar
+              isTertiaryNavWidthLimited
+              isBreadcrumbWidthLimited
+              skipToContent={PageSkipToContent}
+              mainContainerId={pageId}
+              isTertiaryNavGrouped
+              breadcrumbProps={{
+                stickyOnBreakpoint: { 
+                  md: 'top' 
+                }
+              }}
+            >
+              <PageSection variant={PageSectionVariants.light}>
+                  <TextContent>
+                    <Text component="h1">Main title</Text>
+                    <Text component="p">
+                      Body text should be Overpass Regular at 16px. It should have leading of 24px because <br />
+                      of its relative line height of 1.5.
+                    </Text>
+                  </TextContent>
+                </PageSection>
+                <PageSection isWidthLimited>
+                  <Gallery hasGutter>
+                    {Array.apply(0, Array(50)).map((x, i) => (
+                      <GalleryItem key={i}>
+                        <Card>
+                          <CardBody>This is a card</CardBody>
+                        </Card>
+                      </GalleryItem>
+                    ))}
+                  </Gallery>
+                </PageSection>
+            </Page>
+          </DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+}
+```

package/src/helpers/constants.ts

@@ -1,3 +1,15 @@
+import globalBreakpointSm from '@patternfly/react-tokens/dist/esm/global_breakpoint_sm';
+import globalBreakpointMd from '@patternfly/react-tokens/dist/esm/global_breakpoint_md';
+import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/global_breakpoint_lg';
+import globalBreakpointXl from '@patternfly/react-tokens/dist/esm/global_breakpoint_xl';
+import globalBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_breakpoint_2xl';
+
+import globalHeightBreakpointSm from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_sm';
+import globalHeightBreakpointMd from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_md';
+import globalHeightBreakpointLg from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_lg';
+import globalHeightBreakpointXl from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_xl';
+import globalHeightBreakpoint2xl from '@patternfly/react-tokens/dist/esm/global_height_breakpoint_2xl';
+
 export const KEY_CODES = { ARROW_UP: 38, ARROW_DOWN: 40, ESCAPE_KEY: 27, TAB: 9, ENTER: 13, SPACE: 32 };
 
 export const SIDE = { RIGHT: 'right', LEFT: 'left', BOTH: 'both', NONE: 'none' };
@@ -21,3 +33,19 @@ export const KeyTypes = {
   ArrowLeft: 'ArrowLeft',
   ArrowRight: 'ArrowRight'
 };
+
+export const globalWidthBreakpoints = {
+  sm: parseInt(globalBreakpointSm.value),
+  md: parseInt(globalBreakpointMd.value),
+  lg: parseInt(globalBreakpointLg.value),
+  xl: parseInt(globalBreakpointXl.value),
+  '2xl': parseInt(globalBreakpoint2xl.value)
+};
+
+export const globalHeightBreakpoints = {
+  sm: parseInt(globalHeightBreakpointSm.value),
+  md: parseInt(globalHeightBreakpointMd.value),
+  lg: parseInt(globalHeightBreakpointLg.value),
+  xl: parseInt(globalHeightBreakpointXl.value),
+  '2xl': parseInt(globalHeightBreakpoint2xl.value)
+};

package/src/helpers/util.ts

@@ -1,5 +1,5 @@
 import * as ReactDOM from 'react-dom';
-import { SIDE } from './constants';
+import { globalWidthBreakpoints, globalHeightBreakpoints, SIDE } from './constants';
 
 /**
  * @param {string} input - String to capitalize first letter
@@ -295,12 +295,13 @@ export const formatBreakpointMods = (
   mods: Mods,
   styles: any,
   stylePrefix: string = '',
-  breakpoint?: 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
+  breakpoint?: 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl',
+  vertical?: boolean
 ) => {
   if (!mods) {
     return '';
   }
-  if (breakpoint) {
+  if (breakpoint && !vertical) {
     if (breakpoint in mods) {
       return styles.modifiers[toCamel(`${stylePrefix}${mods[breakpoint as keyof Mods]}`)];
     }
@@ -314,8 +315,14 @@ export const formatBreakpointMods = (
     }
     return '';
   }
+
   return Object.entries(mods || {})
-    .map(([breakpoint, mod]) => `${stylePrefix}${mod}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`)
+    .map(
+      ([breakpoint, mod]) =>
+        `${stylePrefix}${mod}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}${
+          vertical && breakpoint !== 'default' ? '-height' : ''
+        }`
+    )
     .map(toCamel)
     .map(mod => mod.replace(/-?(\dxl)/gi, (_res, group) => `_${group}`))
     .map(modifierKey => styles.modifiers[modifierKey])
@@ -323,6 +330,34 @@ export const formatBreakpointMods = (
     .join(' ');
 };
 
+/**
+ * Return the breakpoint for the given height
+ *
+ * @param {number | null} height The height to check
+ * @returns {'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'} The breakpoint
+ */
+export const getVerticalBreakpoint = (height: number): 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' => {
+  if (height === null) {
+    return null;
+  }
+  if (height >= globalHeightBreakpoints['2xl']) {
+    return '2xl';
+  }
+  if (height >= globalHeightBreakpoints.xl) {
+    return 'xl';
+  }
+  if (height >= globalHeightBreakpoints.lg) {
+    return 'lg';
+  }
+  if (height >= globalHeightBreakpoints.md) {
+    return 'md';
+  }
+  if (height >= globalHeightBreakpoints.sm) {
+    return 'sm';
+  }
+  return 'default';
+};
+
 /**
  * Return the breakpoint for the given width
  *
@@ -333,19 +368,19 @@ export const getBreakpoint = (width: number): 'default' | 'sm' | 'md' | 'lg' | '
   if (width === null) {
     return null;
   }
-  if (width >= 1450) {
+  if (width >= globalWidthBreakpoints['2xl']) {
     return '2xl';
   }
-  if (width >= 1200) {
+  if (width >= globalWidthBreakpoints.xl) {
     return 'xl';
   }
-  if (width >= 992) {
+  if (width >= globalWidthBreakpoints.lg) {
     return 'lg';
   }
-  if (width >= 768) {
+  if (width >= globalWidthBreakpoints.md) {
     return 'md';
   }
-  if (width >= 576) {
+  if (width >= globalWidthBreakpoints.sm) {
     return 'sm';
   }
   return 'default';