@patternfly/react-core 6.5.0-prerelease.61 → 6.5.0-prerelease.63

package/src/components/OverflowMenu/examples/OverflowMenuSimpleVertical.tsx

@@ -0,0 +1,76 @@
+import { useState } from 'react';
+import {
+  OverflowMenu,
+  OverflowMenuControl,
+  OverflowMenuContent,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  OverflowMenuDropdownItem,
+  MenuToggle,
+  Dropdown,
+  DropdownList
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export const OverflowMenuSimpleVertical: React.FunctionComponent = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const onToggle = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const onSelect = () => {
+    setIsOpen(!isOpen);
+  };
+
+  const dropdownItems = [
+    <OverflowMenuDropdownItem itemId={0} key="item1" isShared>
+      Item 1
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={1} key="item2" isShared>
+      Item 2
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={2} key="item3" isShared>
+      Item 3
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={3} key="item4" isShared>
+      Item 4
+    </OverflowMenuDropdownItem>,
+    <OverflowMenuDropdownItem itemId={4} key="item5" isShared>
+      Item 5
+    </OverflowMenuDropdownItem>
+  ];
+
+  return (
+    <OverflowMenu breakpoint="md" isVertical>
+      <OverflowMenuContent>
+        <OverflowMenuItem>Item</OverflowMenuItem>
+        <OverflowMenuItem>Item</OverflowMenuItem>
+        <OverflowMenuGroup>
+          <OverflowMenuItem>Item</OverflowMenuItem>
+          <OverflowMenuItem>Item</OverflowMenuItem>
+          <OverflowMenuItem>Item</OverflowMenuItem>
+        </OverflowMenuGroup>
+      </OverflowMenuContent>
+      <OverflowMenuControl>
+        <Dropdown
+          onSelect={onSelect}
+          toggle={(toggleRef) => (
+            <MenuToggle
+              ref={toggleRef}
+              aria-label="Simple example overflow menu"
+              variant="plain"
+              onClick={onToggle}
+              isExpanded={isOpen}
+              icon={<EllipsisVIcon />}
+            />
+          )}
+          isOpen={isOpen}
+          onOpenChange={(isOpen) => setIsOpen(isOpen)}
+        >
+          <DropdownList>{dropdownItems}</DropdownList>
+        </Dropdown>
+      </OverflowMenuControl>
+    </OverflowMenu>
+  );
+};

package/src/components/Page/Page.tsx

@@ -24,9 +24,9 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   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 on desktop. Only applies when variant is docked, and will handle
-   * setting isTextExpanded on individual isDocked components.
-   * */
+  /** @beta Flag indicating the docked nav should display text on desktop. Only applies when variant is docked, and
+   * will handle toggling the visibility of the text in individual isDocked components.
+   */
   isDockTextExpanded?: boolean;
   /** The horizontal masthead content (e.g. <Masthead />). When using the docked variant, this content will only render at mobile viewports. */
   masthead?: React.ReactNode;

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

@@ -6,7 +6,7 @@ import { SearchInput } from '../SearchInput';
 import { FormGroup } from '../../Form';
 import { Button } from '../../Button';
 import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group';
@@ -128,7 +128,7 @@ describe('SearchInput', () => {
         advancedSearchDelimiter=":"
         formAdditionalItems={
           <FormGroup fieldId="test-form-group">
-            <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
+            <Button variant="link" isInline icon={<RhUiExternalLinkFillIcon />} iconPosition="right">
               Link
             </Button>
           </FormGroup>

package/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap

@@ -496,11 +496,11 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                         fill="currentColor"
                         height="1em"
                         role="img"
-                        viewBox="0 0 448 512"
+                        viewBox="0 0 32 32"
                         width="1em"
                       >
                         <path
-                          d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"
+                          d="M28.5 2h-25C2.673 2 2 2.673 2 3.5v25c0 .827.673 1.5 1.5 1.5h25c.827 0 1.5-.673 1.5-1.5v-25c0-.827-.673-1.5-1.5-1.5Zm-3.375 17a1.125 1.125 0 0 1-2.25 0v-8.284L11.796 21.795a1.122 1.122 0 0 1-1.592 0 1.127 1.127 0 0 1 0-1.591l11.08-11.08H13a1.125 1.125 0 0 1 0-2.25h10.5c.896 0 1.625.729 1.625 1.625v10.5Z"
                         />
                       </svg>
                     </span>

package/src/components/SearchInput/examples/SearchInput.md

@@ -6,7 +6,7 @@ propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpand
 ---
 
 import { useRef, useState } from 'react';
-import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 
 ## Examples
 

package/src/components/SearchInput/examples/SearchInputAdvanced.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button, Checkbox, FormGroup, SearchInput } from '@patternfly/react-core';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 
 export const SearchInputAdvanced: React.FunctionComponent = () => {
   const [value, setValue] = useState('username:player firstname:john');
@@ -45,7 +45,7 @@ export const SearchInputAdvanced: React.FunctionComponent = () => {
         formAdditionalItems={
           useCustomFooter ? (
             <FormGroup>
-              <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
+              <Button variant="link" isInline icon={<RhUiExternalLinkFillIcon />} iconPosition="end">
                 Link
               </Button>
             </FormGroup>

package/src/components/Toolbar/Toolbar.tsx

@@ -38,8 +38,12 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   isFullHeight?: boolean;
   /** Flag indicating the toolbar is static */
   isStatic?: boolean;
-  /** Flag indicating the toolbar should stick to the top of its container */
+  /** Flag indicating the toolbar should stick to the top of its container. This property applies both the sticky position and styling. */
   isSticky?: boolean;
+  /** @beta Flag indicating the toolbar should have sticky positioning to the top of its container */
+  isStickyBase?: boolean;
+  /** @beta Flag indicating the toolbar should have stuck styling, when the toolbar is not at the top of the scroll container */
+  isStickyStuck?: boolean;
   /** @beta Flag indicating the toolbar has a vertical orientation */
   isVertical?: boolean;
   /** Insets at various breakpoints. */
@@ -144,6 +148,8 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
       children,
       isFullHeight,
       isStatic,
+      isStickyBase,
+      isStickyStuck,
       inset,
       isSticky,
       isVertical,
@@ -171,6 +177,8 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
               isFullHeight && styles.modifiers.fullHeight,
               isStatic && styles.modifiers.static,
               isSticky && styles.modifiers.sticky,
+              isStickyBase && styles.modifiers.stickyBase,
+              isStickyStuck && styles.modifiers.stickyStuck,
               isVertical && styles.modifiers.vertical,
               formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
               colorVariant === 'primary' && styles.modifiers.primary,

package/src/components/Toolbar/ToolbarContent.tsx

@@ -8,7 +8,7 @@ import { PageContext } from '../Page/PageContext';
 export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
   /** Classes applied to root element of the data toolbar content row */
   className?: string;
-  /** Visibility at various breakpoints. */
+  /** Visibility at various width breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
     md?: 'hidden' | 'visible';
@@ -16,6 +16,14 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
+  /** Visibility at various height breakpoints. */
+  visibilityAtHeight?: {
+    default?: 'hidden' | 'visible';
+    md?: 'hidden' | 'visible';
+    lg?: 'hidden' | 'visible';
+    xl?: 'hidden' | 'visible';
+    '2xl'?: 'hidden' | 'visible';
+  };
   /** Value to set for content wrapping at various breakpoints */
   rowWrap?: {
     default?: 'wrap' | 'nowrap';
@@ -59,6 +67,7 @@ class ToolbarContent extends Component<ToolbarContentProps> {
       isExpanded,
       toolbarId,
       visibility,
+      visibilityAtHeight,
       rowWrap,
       alignItems,
       clearAllFilters,
@@ -69,11 +78,12 @@ class ToolbarContent extends Component<ToolbarContentProps> {
 
     return (
       <PageContext.Consumer>
-        {({ width, getBreakpoint }) => (
+        {({ width, getBreakpoint, height, getVerticalBreakpoint }) => (
           <div
             className={css(
               styles.toolbarContent,
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(visibilityAtHeight, styles, '', getVerticalBreakpoint(height), true),
               className
             )}
             ref={this.expandableContentRef}

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -23,7 +23,7 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
     | 'action-group-inline'
     | 'action-group-plain'
     | 'label-group';
-  /** Visibility at various breakpoints. */
+  /** Visibility at various width breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
     md?: 'hidden' | 'visible';
@@ -31,6 +31,14 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
+  /** Visibility at various height breakpoints. */
+  visibilityAtHeight?: {
+    default?: 'hidden' | 'visible';
+    md?: 'hidden' | 'visible';
+    lg?: 'hidden' | 'visible';
+    xl?: 'hidden' | 'visible';
+    '2xl'?: 'hidden' | 'visible';
+  };
   /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
   align?: {
     default?: 'alignEnd' | 'alignStart' | 'alignCenter';
@@ -178,6 +186,7 @@ class ToolbarGroupWithRef extends Component<ToolbarGroupProps> {
   render() {
     const {
       visibility,
+      visibilityAtHeight,
       align,
       alignItems,
       alignSelf,
@@ -195,7 +204,7 @@ class ToolbarGroupWithRef extends Component<ToolbarGroupProps> {
 
     return (
       <PageContext.Consumer>
-        {({ width, getBreakpoint }) => (
+        {({ width, getBreakpoint, height, getVerticalBreakpoint }) => (
           <div
             className={css(
               styles.toolbarGroup,
@@ -209,6 +218,7 @@ class ToolbarGroupWithRef extends Component<ToolbarGroupProps> {
                     | 'labelGroup'
                 ],
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
+              formatBreakpointMods(visibilityAtHeight, styles, '', getVerticalBreakpoint(height), true),
               formatBreakpointMods(align, styles, '', getBreakpoint(width)),
               formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
               formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/ToolbarItem.tsx

@@ -17,7 +17,7 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of item */
   variant?: ToolbarItemVariant | 'pagination' | 'label' | 'label-group' | 'separator' | 'expand-all';
-  /** Visibility at various breakpoints. */
+  /** Visibility at various width breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
     md?: 'hidden' | 'visible';
@@ -25,6 +25,14 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
+  /** Visibility at various height breakpoints. */
+  visibilityAtHeight?: {
+    default?: 'hidden' | 'visible';
+    md?: 'hidden' | 'visible';
+    lg?: 'hidden' | 'visible';
+    xl?: 'hidden' | 'visible';
+    '2xl'?: 'hidden' | 'visible';
+  };
   /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
   align?: {
     default?: 'alignEnd' | 'alignStart' | 'alignCenter';
@@ -174,6 +182,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   className,
   variant,
   visibility,
+  visibilityAtHeight,
   gap,
   columnGap,
   rowGap,
@@ -202,7 +211,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
 
   return (
     <PageContext.Consumer>
-      {({ width, getBreakpoint }) => (
+      {({ width, getBreakpoint, height, getVerticalBreakpoint }) => (
         <div
           className={css(
             styles.toolbarItem,
@@ -211,6 +220,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
             isAllExpanded && styles.modifiers.expanded,
             isOverflowContainer && styles.modifiers.overflowContainer,
             formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
+            formatBreakpointMods(visibilityAtHeight, styles, '', getVerticalBreakpoint(height), true),
             formatBreakpointMods(align, styles, '', getBreakpoint(width)),
             formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
             formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),

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

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { createElement, Fragment } from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom';
 
@@ -206,6 +206,32 @@ describe('Toolbar', () => {
     });
   });
 
+  const bps = ['default', 'md', 'lg', 'xl', '2xl'] as const;
+  describe.each(bps)(`ToolbarContent visibilityAtHeight`, (bp) => {
+    it(`Applies correct visible class at ${bp}`, () => {
+      render(
+        <ToolbarContent data-testid="toolbarcontent" visibilityAtHeight={{ [bp]: 'visible' }}>
+          Test
+        </ToolbarContent>
+      );
+
+      if (bp !== 'default') {
+        expect(screen.getByTestId('toolbarcontent')).toHaveClass(`pf-m-visible-on-${bp}-height`);
+      }
+    });
+
+    it(`Applies correct hidden class at ${bp}`, () => {
+      render(
+        <ToolbarContent data-testid="toolbarcontent" visibilityAtHeight={{ [bp]: 'hidden' }}>
+          Test
+        </ToolbarContent>
+      );
+
+      const expectedClass = bp === 'default' ? 'pf-m-hidden' : `pf-m-hidden-on-${bp}-height`;
+      expect(screen.getByTestId('toolbarcontent')).toHaveClass(expectedClass);
+    });
+  });
+
   it(`Renders toolbar without ${styles.modifiers.vertical} by default`, () => {
     render(
       <Toolbar data-testid="Toolbar-test-is-not-vertical">
@@ -220,7 +246,7 @@ describe('Toolbar', () => {
     expect(screen.getByTestId('Toolbar-test-is-not-vertical')).not.toHaveClass(styles.modifiers.vertical);
   });
 
-  it('Renders with class ${styles.modifiers.vertical} when isVertical is true', () => {
+  it(`Renders with class ${styles.modifiers.vertical} when isVertical is true`, () => {
     const items = (
       <Fragment>
         <ToolbarItem>Test</ToolbarItem>
@@ -238,4 +264,39 @@ describe('Toolbar', () => {
 
     expect(screen.getByTestId('Toolbar-test-is-vertical')).toHaveClass(styles.modifiers.vertical);
   });
+
+  it(`Does not add ${styles.modifiers.stickyBase} and ${styles.modifiers.stickyStuck} classes by default`, () => {
+    render(
+      <Toolbar data-testid="toolbar-sticky-default">
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    const el = screen.getByTestId('toolbar-sticky-default');
+    expect(el).not.toHaveClass(styles.modifiers.stickyBase);
+    expect(el).not.toHaveClass(styles.modifiers.stickyStuck);
+  });
+
+  it(`Adds ${styles.modifiers.stickyBase} when isStickyBase is true`, () => {
+    render(
+      <Toolbar data-testid="toolbar-sticky-base" isStickyBase>
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    expect(screen.getByTestId('toolbar-sticky-base')).toHaveClass(styles.modifiers.stickyBase);
+  });
+
+  it(`Adds ${styles.modifiers.stickyStuck} when isStickyStuck is true`, () => {
+    render(
+      <Toolbar data-testid="toolbar-sticky-stuck" isStickyStuck>
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+    );
+    expect(screen.getByTestId('toolbar-sticky-stuck')).toHaveClass(styles.modifiers.stickyStuck);
+  });
 });

package/src/components/Toolbar/__tests__/ToolbarGroup.test.tsx

@@ -37,4 +37,30 @@ describe('ToolbarGroup', () => {
       });
     });
   });
+
+  const bps = ['default', 'md', 'lg', 'xl', '2xl'] as const;
+  describe.each(bps)(`ToolbarGroup visibilityAtHeight`, (bp) => {
+    it(`Applies correct visible class at ${bp}`, () => {
+      render(
+        <ToolbarGroup data-testid="toolbargroup" visibilityAtHeight={{ [bp]: 'visible' }}>
+          Test
+        </ToolbarGroup>
+      );
+
+      if (bp !== 'default') {
+        expect(screen.getByTestId('toolbargroup')).toHaveClass(`pf-m-visible-on-${bp}-height`);
+      }
+    });
+
+    it(`Applies correct hidden class at ${bp}`, () => {
+      render(
+        <ToolbarGroup data-testid="toolbargroup" visibilityAtHeight={{ [bp]: 'hidden' }}>
+          Test
+        </ToolbarGroup>
+      );
+
+      const expectedClass = bp === 'default' ? 'pf-m-hidden' : `pf-m-hidden-on-${bp}-height`;
+      expect(screen.getByTestId('toolbargroup')).toHaveClass(expectedClass);
+    });
+  });
 });

package/src/components/Toolbar/__tests__/ToolbarItem.test.tsx

@@ -37,4 +37,30 @@ describe('ToolbarItem', () => {
       });
     });
   });
+
+  const bps = ['default', 'md', 'lg', 'xl', '2xl'] as const;
+  describe.each(bps)(`ToolbarItem visibilityAtHeight`, (bp) => {
+    it(`Applies correct visible class at ${bp}`, () => {
+      render(
+        <ToolbarItem data-testid="toolbaritem" visibilityAtHeight={{ [bp]: 'visible' }}>
+          Test
+        </ToolbarItem>
+      );
+
+      if (bp !== 'default') {
+        expect(screen.getByTestId('toolbaritem')).toHaveClass(`pf-m-visible-on-${bp}-height`);
+      }
+    });
+
+    it(`Applies correct hidden class at ${bp}`, () => {
+      render(
+        <ToolbarItem data-testid="toolbaritem" visibilityAtHeight={{ [bp]: 'hidden' }}>
+          Test
+        </ToolbarItem>
+      );
+
+      const expectedClass = bp === 'default' ? 'pf-m-hidden' : `pf-m-hidden-on-${bp}-height`;
+      expect(screen.getByTestId('toolbaritem')).toHaveClass(expectedClass);
+    });
+  });
 });

package/src/components/Toolbar/examples/Toolbar.md

@@ -5,7 +5,7 @@ propComponents: ['Toolbar', 'ToolbarContent', 'ToolbarGroup', 'ToolbarItem', 'To
 section: components
 ---
 
-import { Fragment, useState } from 'react';
+import { Fragment, useState, useLayoutEffect, useRef } from 'react';
 
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
@@ -34,6 +34,14 @@ To adjust a toolbar’s inset, use the `inset` property. You can set the inset v
 
 ```
 
+### Vertical toolbar
+
+A toolbar's orientation may be changed using the `isVertical` property. Responsive behavior when height is adjusted may be customized for the `ToolbarContent`, `ToolbarGroup`, and `ToolbarItem` components using their respective `visibilityAtHeight` property.
+
+```ts file="./ToolbarVertical.tsx"
+
+```
+
 ### Sticky toolbar
 
 To lock a toolbar and prevent it from scrolling with other content, use a sticky toolbar.
@@ -44,6 +52,14 @@ In the following example, toggle the "is toolbar sticky" checkbox to see the dif
 
 ```
 
+### Dynamic sticky toolbar
+
+A toolbar may alternatively be made sticky with two properties: `isStickyBase` and `isStickyStuck` - which allows separate control of the sticky position and sticky styling respectively. In this example, `isStickyStuck` is only applied when the sticky element is not at the top of the scroll parent container.
+
+```ts file="./ToolbarDynamicSticky.tsx"
+
+```
+
 ### With groups of items
 
 You can group similar items together to create desired associations and to enable items to respond to changes in viewport width together.
@@ -114,11 +130,13 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
 ```
 
 ## Examples with spacers and wrapping
+
 You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
 
 Items are spaced “16px” apart by default and can be modified by changing their or their parents' `gap`, `columnGap`, and `rowGap` properties. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
 
 ### Toolbar content wrapping
+
 The toolbar content section will wrap by default, but you can set the `rowRap` property to `noWrap` to make it not wrap.
 
 ```ts file="./ToolbarContentWrap.tsx"

package/src/components/Toolbar/examples/ToolbarDynamicSticky.tsx

@@ -0,0 +1,75 @@
+import { useLayoutEffect, useState, useRef } from 'react';
+import { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core';
+
+const useIsStuckFromScrollParent = ({
+  shouldTrack,
+  scrollParentRef
+}: {
+  /** Indicates whether to track the scroll top position of the scroll parent element */
+  shouldTrack: boolean;
+  /** Reference to the scroll parent element */
+  scrollParentRef: React.RefObject<any>;
+}): boolean => {
+  const [isStuck, setIsStuck] = useState(false);
+
+  useLayoutEffect(() => {
+    if (!shouldTrack) {
+      setIsStuck(false);
+      return;
+    }
+
+    const scrollElement = scrollParentRef.current;
+    if (!scrollElement) {
+      setIsStuck(false);
+      return;
+    }
+
+    const syncFromScroll = () => {
+      setIsStuck(scrollElement.scrollTop > 0);
+    };
+    syncFromScroll();
+    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });
+    return () => scrollElement.removeEventListener('scroll', syncFromScroll);
+  }, [shouldTrack, scrollParentRef]);
+
+  return isStuck;
+};
+
+export const ToolbarDynamicSticky = () => {
+  const scrollParentRef = useRef<HTMLDivElement>(null);
+  const isStickyStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef });
+  const [showEvenOnly, setShowEvenOnly] = useState(true);
+  const [searchValue, setSearchValue] = useState('');
+  const array = Array.from(Array(30), (_, x) => x); // create array of numbers from 1-30 for demo purposes
+  const numbers = showEvenOnly ? array.filter((number) => number % 2 === 0) : array;
+
+  return (
+    <div id="dynamic-sticky-scroll-parent" ref={scrollParentRef} style={{ overflowY: 'scroll', height: '200px' }}>
+      <Toolbar id="toolbar-dynamic-sticky" inset={{ default: 'insetNone' }} isStickyBase isStickyStuck={isStickyStuck}>
+        <ToolbarContent>
+          <ToolbarItem>
+            <SearchInput
+              aria-label="Sticky example search input"
+              value={searchValue}
+              onChange={(_event, value) => setSearchValue(value)}
+              onClear={() => setSearchValue('')}
+            />
+          </ToolbarItem>
+          <ToolbarItem alignSelf="center">
+            <Checkbox
+              label="Show only even number items"
+              isChecked={showEvenOnly}
+              onChange={(_event, checked) => setShowEvenOnly(checked)}
+              id="showOnlyEvenCheckbox"
+            />
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <ul>
+        {numbers.map((number) => (
+          <li key={number}>{`item ${number}`}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};

package/src/components/Toolbar/examples/ToolbarVertical.tsx

@@ -0,0 +1,22 @@
+import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';
+
+export const ToolbarVertical: React.FunctionComponent = () => (
+  <Toolbar id="toolbar-vertical" isVertical>
+    <ToolbarContent>
+      <ToolbarGroup variant="action-group-plain">
+        <ToolbarItem>Item 1</ToolbarItem>
+        <ToolbarItem>Item 2</ToolbarItem>
+        <ToolbarItem>Item 3</ToolbarItem>
+      </ToolbarGroup>
+      <ToolbarGroup variant="action-group-plain" visibilityAtHeight={{ default: 'hidden', md: 'visible' }}>
+        <ToolbarItem>Item 4 (visible above md breakpoint)</ToolbarItem>
+        <ToolbarItem visibilityAtHeight={{ default: 'hidden', lg: 'visible' }}>
+          Item 5 (visible above lg breakpoint)
+        </ToolbarItem>
+        <ToolbarItem visibilityAtHeight={{ default: 'hidden', lg: 'visible' }}>
+          Item 6 (visible above lg breakpoint)
+        </ToolbarItem>
+      </ToolbarGroup>
+    </ToolbarContent>
+  </Toolbar>
+);

package/src/components/Tooltip/examples/Tooltip.md

@@ -6,7 +6,7 @@ propComponents: ['Tooltip']
 ---
 
 import { useEffect, useRef, useState } from 'react';
-import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import './TooltipExamples.css';