feat(Toolbar): dynamic sticky (#12375)

* feat(Toolbar): dynamic sticky

* add id to example

* update example description

* Update packages/react-core/src/components/Toolbar/examples/ToolbarDynamicSticky.tsx

---------

Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>

Author: kmcfaul

packages/react-core/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,

packages/react-core/src/components/Toolbar/__tests__/Toolbar.test.tsx

@@ -220,7 +220,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 +238,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);
+  });
 });

packages/react-core/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';
@@ -44,6 +44,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 +122,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"

packages/react-core/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>
+  );
+};