@patternfly/react-core 6.6.1-prerelease.7 → 6.6.1-prerelease.9

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.1-prerelease.6","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.6.1-prerelease.8","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.1-prerelease.6","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.6.1-prerelease.8","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.1-prerelease.6","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.6.1-prerelease.8","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.6.1-prerelease.7",
+  "version": "6.6.1-prerelease.9",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.6.1-prerelease.2",
-    "@patternfly/react-styles": "^6.6.1-prerelease.1",
-    "@patternfly/react-tokens": "^6.6.1-prerelease.1",
+    "@patternfly/react-icons": "^6.6.1-prerelease.4",
+    "@patternfly/react-styles": "^6.6.1-prerelease.3",
+    "@patternfly/react-tokens": "^6.6.1-prerelease.3",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.6.0-prerelease.39",
+    "@patternfly/patternfly": "6.6.0-prerelease.41",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "a2d7f2396e73fb6f9e599dcfcaba23c6fb0d042d"
+  "gitHead": "103c595fefeee9e6cf6209cc94154b0551702f18"
 }

package/src/components/Drawer/Drawer.tsx

@@ -23,6 +23,8 @@ export interface DrawerProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   isInline?: boolean;
   /** @beta Indicates if the drawer will have pill styles */
   isPill?: boolean;
+  /** @beta Positions the drawer as fixed to fill the viewport. Place the drawer after Page as a sibling. */
+  isViewport?: boolean;
   /** Indicates if the drawer will always show both content and panel. */
   isStatic?: boolean;
   /** Position of the drawer panel. left and right are deprecated, use start and end instead. */
@@ -43,6 +45,7 @@ export interface DrawerContextProps {
   drawerRef?: React.RefObject<HTMLDivElement | null>;
   drawerContentRef?: React.RefObject<HTMLDivElement | null>;
   isInline: boolean;
+  isViewport: boolean;
 }
 
 export const DrawerContext = createContext<Partial<DrawerContextProps>>({
@@ -52,7 +55,8 @@ export const DrawerContext = createContext<Partial<DrawerContextProps>>({
   position: 'end',
   drawerRef: null,
   drawerContentRef: null,
-  isInline: false
+  isInline: false,
+  isViewport: false
 });
 
 export const Drawer: React.FunctionComponent<DrawerProps> = ({
@@ -61,6 +65,7 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   isExpanded = false,
   isInline = false,
   isPill = false,
+  isViewport = false,
   isStatic = false,
   position = 'end',
   onExpand = () => {},
@@ -73,13 +78,16 @@ export const Drawer: React.FunctionComponent<DrawerProps> = ({
   const drawerContentRef = useRef<HTMLDivElement>(undefined);
 
   return (
-    <DrawerContext.Provider value={{ isExpanded, isStatic, onExpand, position, drawerRef, drawerContentRef, isInline }}>
+    <DrawerContext.Provider
+      value={{ isExpanded, isStatic, onExpand, position, drawerRef, drawerContentRef, isInline, isViewport }}
+    >
       <div
         className={css(
           styles.drawer,
           isExpanded && styles.modifiers.expanded,
           isInline && styles.modifiers.inline,
           isPill && styles.modifiers.pill,
+          isViewport && styles.modifiers.viewport,
           isStatic && styles.modifiers.static,
           (position === 'left' || position === 'start') && styles.modifiers.panelLeft,
           position === 'bottom' && styles.modifiers.panelBottom,

package/src/components/Drawer/DrawerContent.tsx

@@ -13,7 +13,7 @@ export enum DrawerContentColorVariant {
 export interface DrawerContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the Drawer. */
   className?: string;
-  /** Content to be rendered in the drawer. */
+  /** Content to be rendered in the drawer. Can be omitted to leave the content container empty. */
   children?: React.ReactNode;
   /** Content rendered in the drawer panel. */
   panelContent: React.ReactNode;

package/src/components/Drawer/DrawerPanelContent.tsx

@@ -100,7 +100,8 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
   const panel = useRef<HTMLDivElement>(undefined);
   const splitterRef = useRef<HTMLDivElement>(undefined);
   const [separatorValue, setSeparatorValue] = useState(0);
-  const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, isInline } = useContext(DrawerContext);
+  const { position, isExpanded, isStatic, onExpand, drawerRef, drawerContentRef, isInline, isViewport } =
+    useContext(DrawerContext);
   const hidden = isStatic ? false : !isExpanded;
   const [isExpandedInternal, setIsExpandedInternal] = useState(!hidden);
   const [isFocusTrapActive, setIsFocusTrapActive] = useState(false);
@@ -126,9 +127,22 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
     }
   }, [isStatic, isExpanded]);
 
+  const getSizeElement = () => {
+    if (isViewport) {
+      return drawerRef?.current ?? drawerContentRef?.current;
+    }
+    return drawerContentRef?.current ?? drawerRef?.current;
+  };
+
   const calcValueNow = () => {
     let splitterPos;
     let drawerSize;
+    const sizeEl = getSizeElement();
+
+    if (!sizeEl || !panel.current || !splitterRef.current || !drawerRef?.current) {
+      return 0;
+    }
+
     const isRTL = getLanguageDirection(panel.current) === 'rtl';
 
     if (isInline && (position === 'end' || position === 'right')) {
@@ -149,37 +163,23 @@ export const DrawerPanelContent: React.FunctionComponent<DrawerPanelContentProps
       }
     } else if (position === 'end' || position === 'right') {
       if (isRTL) {
-        splitterPos =
-          drawerContentRef.current.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right;
-        drawerSize =
-          drawerContentRef.current.getBoundingClientRect().left -
-          drawerContentRef.current.getBoundingClientRect().right;
+        splitterPos = sizeEl.getBoundingClientRect().left - splitterRef.current.getBoundingClientRect().right;
+        drawerSize = sizeEl.getBoundingClientRect().left - sizeEl.getBoundingClientRect().right;
       } else {
-        splitterPos =
-          drawerContentRef.current.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
-        drawerSize =
-          drawerContentRef.current.getBoundingClientRect().right -
-          drawerContentRef.current.getBoundingClientRect().left;
+        splitterPos = sizeEl.getBoundingClientRect().right - splitterRef.current.getBoundingClientRect().left;
+        drawerSize = sizeEl.getBoundingClientRect().right - sizeEl.getBoundingClientRect().left;
       }
     } else if (position === 'start' || position === 'left') {
       if (isRTL) {
-        splitterPos =
-          splitterRef.current.getBoundingClientRect().left - drawerContentRef.current.getBoundingClientRect().right;
-        drawerSize =
-          drawerContentRef.current.getBoundingClientRect().left -
-          drawerContentRef.current.getBoundingClientRect().right;
+        splitterPos = splitterRef.current.getBoundingClientRect().left - sizeEl.getBoundingClientRect().right;
+        drawerSize = sizeEl.getBoundingClientRect().left - sizeEl.getBoundingClientRect().right;
       } else {
-        splitterPos =
-          splitterRef.current.getBoundingClientRect().right - drawerContentRef.current.getBoundingClientRect().left;
-        drawerSize =
-          drawerContentRef.current.getBoundingClientRect().right -
-          drawerContentRef.current.getBoundingClientRect().left;
+        splitterPos = splitterRef.current.getBoundingClientRect().right - sizeEl.getBoundingClientRect().left;
+        drawerSize = sizeEl.getBoundingClientRect().right - sizeEl.getBoundingClientRect().left;
       }
     } else if (position === 'bottom') {
-      splitterPos =
-        drawerContentRef.current.getBoundingClientRect().bottom - splitterRef.current.getBoundingClientRect().top;
-      drawerSize =
-        drawerContentRef.current.getBoundingClientRect().bottom - drawerContentRef.current.getBoundingClientRect().top;
+      splitterPos = sizeEl.getBoundingClientRect().bottom - splitterRef.current.getBoundingClientRect().top;
+      drawerSize = sizeEl.getBoundingClientRect().bottom - sizeEl.getBoundingClientRect().top;
     }
 
     const newSplitterPos = (splitterPos / drawerSize) * 100;

package/src/components/Drawer/__tests__/Drawer.test.tsx

@@ -231,3 +231,56 @@ test('Renders with ouiaSafe=false when specified', () => {
   );
   expect(screen.getByTestId('drawer')).toHaveAttribute('data-ouia-safe', 'false');
 });
+
+test(`Does not render with ${styles.modifiers.viewport} class by default`, () => {
+  render(
+    <Drawer data-testid="drawer">
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  expect(screen.getByTestId('drawer')).not.toHaveClass(styles.modifiers.viewport);
+});
+
+test(`Renders with ${styles.modifiers.viewport} when isViewport is specified`, () => {
+  render(
+    <Drawer data-testid="drawer" isViewport>
+      <DrawerContent panelContent={<DrawerPanelContent>panel</DrawerPanelContent>}>
+        <DrawerContentBody>content</DrawerContentBody>
+      </DrawerContent>
+    </Drawer>
+  );
+
+  expect(screen.getByTestId('drawer')).toHaveClass(styles.modifiers.viewport);
+});
+
+test('Resizeable DrawerPanelContent without drawer content does not throw', async () => {
+  const consoleError = jest.spyOn(console, 'error').mockImplementation();
+
+  const panelContent = (
+    <DrawerPanelContent isResizable>
+      <DrawerHead>
+        <span>drawer-panel</span>
+        <DrawerActions>
+          <DrawerCloseButton />
+        </DrawerActions>
+      </DrawerHead>
+    </DrawerPanelContent>
+  );
+
+  const user = userEvent.setup();
+
+  render(
+    <Drawer isExpanded isViewport>
+      <DrawerContent panelContent={panelContent} />
+    </Drawer>
+  );
+
+  await user.tab();
+  await user.keyboard(`{${KeyTypes.ArrowLeft}}`);
+
+  expect(consoleError).not.toHaveBeenCalled();
+  consoleError.mockRestore();
+});

package/src/components/Drawer/examples/Drawer.md

@@ -13,7 +13,7 @@ propComponents:
     DrawerCloseButton,
     DrawerPanelDescription,
     DrawerPanelBody,
-    DrawerPanelFocusTrapObject,
+    DrawerPanelFocusTrapObject
   ]
 section: components
 ---

package/src/components/Page/Page.tsx

@@ -118,6 +118,10 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   breadcrumbProps?: PageBreadcrumbProps;
   /** Enables children to fill the available vertical space. Child page sections or groups that should fill should be passed the isFilled property. */
   isContentFilled?: boolean;
+  /** Flag indicating the page should render without the content area background and overflow scroll. */
+  isPlain?: boolean;
+  /** Content rendered inside the page footer */
+  footer?: React.ReactNode;
 }
 
 export interface PageState {
@@ -141,7 +145,8 @@ class Page extends Component<PageProps, PageState> {
     mainComponent: 'main',
     getBreakpoint,
     getVerticalBreakpoint,
-    mainRef: undefined
+    mainRef: undefined,
+    isPlain: false
   };
   mainRef = this.props?.mainRef ? this.props.mainRef : createRef<HTMLDivElement>();
   pageRef = createRef<HTMLDivElement>();
@@ -284,6 +289,8 @@ class Page extends Component<PageProps, PageState> {
       isContentFilled,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       mainRef,
+      isPlain,
+      footer,
       ...rest
     } = this.props;
     const { mobileView, mobileIsSidebarOpen, desktopIsSidebarOpen, width, height } = this.state;
@@ -367,6 +374,7 @@ class Page extends Component<PageProps, PageState> {
             width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
             height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
             sidebar === null && styles.modifiers.noSidebar,
+            isPlain && styles.modifiers.plain,
             className
           )}
         >
@@ -397,6 +405,7 @@ class Page extends Component<PageProps, PageState> {
             </div>
           )}
           {!notificationDrawer && main}
+          {footer && footer}
         </div>
       </PageContextProvider>
     );

package/src/components/Page/PageFooter.tsx

@@ -0,0 +1,28 @@
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { css } from '@patternfly/react-styles';
+
+export interface PageFooterProps extends React.HTMLProps<HTMLElement> {
+  /** Content rendered inside the footer */
+  children?: React.ReactNode;
+  /** Additional classes added to the footer */
+  className?: string;
+  /** Sets the base component to render. Defaults to footer */
+  component?: keyof React.JSX.IntrinsicElements;
+}
+
+export const PageFooter: React.FunctionComponent<PageFooterProps> = ({
+  className,
+  children,
+  component = 'footer',
+  ...props
+}: PageFooterProps) => {
+  const Component = component as any;
+
+  return (
+    <Component {...props} className={css(styles.pageFooter, className)}>
+      {children}
+    </Component>
+  );
+};
+
+PageFooter.displayName = 'PageFooter';

package/src/components/Page/__tests__/Page.test.tsx

@@ -13,6 +13,7 @@ import { PageHeader } from '../PageHeader';
 import { Masthead } from '../../Masthead';
 
 import styles from '@patternfly/react-styles/css/components/Page/page';
+import { PageFooter } from '../PageFooter';
 
 const props = {
   'aria-label': 'Page layout',
@@ -520,4 +521,49 @@ describe('Page docked variant', () => {
     expect(header).toHaveClass(styles.pageHeader);
     expect(header.parentElement).toHaveClass(styles.page);
   });
+
+  test('Renders PageFooter when passed to the footer prop', () => {
+    render(
+      <Page {...props} footer={<PageFooter>Custom footer</PageFooter>}>
+        <PageSection>Custom content</PageSection>
+      </Page>
+    );
+
+    const footer = screen.getByRole('contentinfo');
+    expect(footer).toHaveClass(styles.pageFooter);
+    expect(footer.parentElement).toHaveClass(styles.page);
+  });
+
+  test(`Renders with ${styles.modifiers.plain} when isPlain is true`, () => {
+    render(
+      <Page {...props} isPlain data-testid="page">
+        <PageSection>Custom content</PageSection>
+      </Page>
+    );
+
+    const page = screen.getByTestId('page');
+    expect(page).toHaveClass(styles.modifiers.plain);
+  });
+
+  test(`Does not render with ${styles.modifiers.plain} when isPlain is false`, () => {
+    render(
+      <Page {...props} isPlain={false} data-testid="page">
+        <PageSection>Custom content</PageSection>
+      </Page>
+    );
+
+    const page = screen.getByTestId('page');
+    expect(page).not.toHaveClass(styles.modifiers.plain);
+  });
+
+  test(`Does not render with ${styles.modifiers.plain} when isPlain is not passed`, () => {
+    render(
+      <Page {...props} data-testid="page">
+        <PageSection>Custom content</PageSection>
+      </Page>
+    );
+
+    const page = screen.getByTestId('page');
+    expect(page).not.toHaveClass(styles.modifiers.plain);
+  });
 });

package/src/components/Page/__tests__/PageFooter.test.tsx

@@ -0,0 +1,38 @@
+import { render, screen } from '@testing-library/react';
+import styles from '@patternfly/react-styles/css/components/Page/page';
+import { PageFooter } from '../PageFooter';
+
+test('Renders children', () => {
+  render(<PageFooter>Footer content</PageFooter>);
+  expect(screen.getByRole('contentinfo')).toBeVisible();
+});
+
+test('Renders without children', () => {
+  render(<PageFooter data-testid="footer" />);
+  expect(screen.getByTestId('footer')).toBeVisible();
+});
+
+test(`Renders with class ${styles.pageFooter} by default`, () => {
+  render(<PageFooter>Footer content</PageFooter>);
+  expect(screen.getByRole('contentinfo')).toHaveClass(styles.pageFooter, { exact: true });
+});
+
+test('Renders as a footer by default', () => {
+  render(<PageFooter>Footer content</PageFooter>);
+  expect(screen.getByRole('contentinfo').tagName).toBe('FOOTER');
+});
+
+test('Renders as a custom component when component is passed', () => {
+  render(<PageFooter component="div">Footer content</PageFooter>);
+  expect(screen.getByText('Footer content').tagName).toBe('DIV');
+});
+
+test('Renders with custom classes when className is passed', () => {
+  render(<PageFooter className="custom-class">Footer content</PageFooter>);
+  expect(screen.getByRole('contentinfo')).toHaveClass('custom-class');
+});
+
+test('Renders with spread props', () => {
+  render(<PageFooter id="custom-id">Footer content</PageFooter>);
+  expect(screen.getByRole('contentinfo')).toHaveAttribute('id', 'custom-id');
+});

package/src/components/Page/examples/Page.md

@@ -33,14 +33,6 @@ The `<MastheadMain>` component includes the smaller area that typically contains
 - 1 or more `<PageSidebarBody>` components inside `<PageSidebar>` for vertical navigation or other sidebar content
 - 1 or more `<PageSection>` components
 
-### Page header
-
-To use a page header instead of passing a [masthead](/components/masthead) directly, pass a `<PageHeader>` to the `masthead` property. `<PageHeader>` should only be used to wrap custom header content.
-
-```ts file="./PageHeaderContent.tsx"
-
-```
-
 ### Vertical navigation
 
 To add a vertical sidebar to a `<Page>`, pass a `<PageSidebar>` component into the `sidebar` property. To render navigation in the sidebar, pass a `<PageSidebarBody>` component to `<PageSidebar>`.
@@ -158,3 +150,27 @@ In this example, a scroll event listener on the scroll parent container toggles
 ```ts file="./PageDynamicStickySection.tsx"
 
 ```
+
+### Custom header
+
+To use a page header instead of passing a [masthead](/components/masthead) directly, pass a `<PageHeader>` to the `masthead` property. `<PageHeader>` should only be used to wrap custom header content.
+
+```ts isBeta file="./PageCustomHeader.tsx"
+
+```
+
+### Footer
+
+`<PageFooter>` can be passed to the `footer` property, and should be used to wrap custom footer content.
+
+```ts isBeta file="./PageCustomFooter.tsx"
+
+```
+
+### Plain
+
+When a page should not have the default content area background or overflow scrolling, pass the `isPlain` property to `<Page>`.
+
+```ts isBeta file="./PagePlain.tsx"
+
+```

package/src/components/Page/examples/PageCustomFooter.tsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import {
+  Masthead,
+  MastheadMain,
+  MastheadToggle,
+  MastheadBrand,
+  MastheadLogo,
+  MastheadContent,
+  Page,
+  PageFooter,
+  PageSection,
+  PageSidebar,
+  PageSidebarBody,
+  PageToggleButton
+} from '@patternfly/react-core';
+
+export const PageCustomFooter: React.FunctionComponent = () => {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+  const onSidebarToggle = () => {
+    setIsSidebarOpen(!isSidebarOpen);
+  };
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadToggle>
+          <PageToggleButton
+            aria-label="Global navigation"
+            isSidebarOpen={isSidebarOpen}
+            onSidebarToggle={onSidebarToggle}
+            id="custom-footer-body-nav-toggle"
+            isHamburgerButton
+          />
+        </MastheadToggle>
+        <MastheadBrand>
+          <MastheadLogo href="https://patternfly.org" target="_blank">
+            Logo
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>Content</MastheadContent>
+    </Masthead>
+  );
+
+  const sidebar = (
+    <PageSidebar isSidebarOpen={isSidebarOpen} id="custom-footer-vertical-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page footer={<PageFooter>Page footer</PageFooter>} masthead={masthead} sidebar={sidebar}>
+      <PageSection aria-labelledby="custom-footer-section">
+        <h2 id="custom-footer-section">Page content</h2>
+      </PageSection>
+    </Page>
+  );
+};

package/src/components/Page/examples/PageCustomHeader.tsx

@@ -0,0 +1,17 @@
+import { Page, PageHeader, PageSection, PageSidebar, PageSidebarBody } from '@patternfly/react-core';
+
+export const PageCustomHeader: React.FunctionComponent = () => {
+  const sidebar = (
+    <PageSidebar isSidebarOpen id="custom-header-vertical-sidebar">
+      <PageSidebarBody>Navigation</PageSidebarBody>
+    </PageSidebar>
+  );
+
+  return (
+    <Page masthead={<PageHeader>Custom page header</PageHeader>} sidebar={sidebar}>
+      <PageSection aria-labelledby="custom-header-section">
+        <h2 id="custom-header-section">Page content</h2>
+      </PageSection>
+    </Page>
+  );
+};

package/src/components/Page/examples/PagePlain.tsx

@@ -0,0 +1,9 @@
+import { Page, PageHeader, PageSection } from '@patternfly/react-core';
+
+export const PagePlain: React.FunctionComponent = () => (
+  <Page isPlain masthead={<PageHeader>Custom header</PageHeader>} sidebar={null}>
+    <PageSection aria-labelledby="plain-page-section">
+      <h2 id="plain-page-section">Page content</h2>
+    </PageSection>
+  </Page>
+);

package/src/components/Page/index.ts

@@ -1,6 +1,7 @@
 export * from './Page';
 export * from './PageBody';
 export * from './PageBreadcrumb';
+export * from './PageFooter';
 export * from './PageGroup';
 export * from './PageHeader';
 export * from './PageSidebar';

package/src/demos/CardView/CardView.md

@@ -6,7 +6,7 @@ section: patterns
 import { Fragment, useState } from 'react';
 import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import pfIcon from '../assets/pf-logo-small.svg';
+import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
 import activeMQIcon from '../assets/activemq-core_200x150.png';
 import avroIcon from '../assets/camel-avro_200x150.png';
 import dropBoxIcon from '../assets/camel-dropbox_200x150.png';

package/src/demos/CardView/examples/CardView.tsx

@@ -36,7 +36,7 @@ import {
 } from '@patternfly/react-core';
 import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import pfIcon from './assets/pf-logo-small.svg';
+import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
 import activeMQIcon from './assets/activemq-core_200x150.png';
 import avroIcon from './assets/camel-avro_200x150.png';
 import dropBoxIcon from './assets/camel-dropbox_200x150.png';

package/src/demos/Drawer/Drawer.md

@@ -0,0 +1,16 @@
+---
+id: Drawer
+section: components
+---
+
+import { Fragment, useRef, useState } from 'react';
+
+## Demos
+
+### Expanded resizable viewport drawer
+
+Use `isViewport` to position the drawer as `fixed` so it fills the viewport. Place the drawer after `<Page>` as a sibling. Omit children of `<DrawerContent>` so the content container stays empty; the empty container is still required so the panel can overlay the page.
+
+```ts file="./examples/DrawerViewport.tsx" isFullscreen isBeta
+
+```