@patternfly/react-core 6.5.0-prerelease.62 → 6.5.0-prerelease.64

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/demos/Compass/Compass.md

@@ -4,7 +4,7 @@ section: AI
 subsection: Generative UIs
 ---
 
-import { useRef, useState } from 'react';
+import { useRef, useState, useEffect } from 'react';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
 import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
@@ -14,8 +14,11 @@ import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import imgAvatar from '../assets/avatarImg.svg';
+import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import pfLogo from '../assets/PF-IconLogo-color.svg';
+import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
 
 ## Demos