@patternfly/react-core 6.5.0-prerelease.21 → 6.5.0-prerelease.25

package/src/components/Toolbar/Toolbar.tsx

@@ -40,6 +40,8 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   isStatic?: boolean;
   /** Flag indicating the toolbar should stick to the top of its container */
   isSticky?: boolean;
+  /** @beta Flag indicating the toolbar has a vertical orientation */
+  isVertical?: boolean;
   /** Insets at various breakpoints. */
   inset?: {
     default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';
@@ -143,6 +145,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
       isStatic,
       inset,
       isSticky,
+      isVertical,
       ouiaId,
       numberOfFiltersText,
       customLabelGroupContent,
@@ -167,6 +170,7 @@ class Toolbar extends Component<ToolbarProps, ToolbarState> {
               isFullHeight && styles.modifiers.fullHeight,
               isStatic && styles.modifiers.static,
               isSticky && styles.modifiers.sticky,
+              isVertical && styles.modifiers.vertical,
               formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
               colorVariant === 'primary' && styles.modifiers.primary,
               colorVariant === 'secondary' && styles.modifiers.secondary,

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

@@ -54,7 +54,7 @@ describe('Toolbar', () => {
         </ToolbarContent>
       </Toolbar>
     );
-    expect(screen.getByTestId('toolbar')).not.toHaveClass('pf-m-no-padding');
+    expect(screen.getByTestId('toolbar')).not.toHaveClass(styles.modifiers.noPadding);
   });
 
   it(`should render toolbar with ${styles.modifiers.noPadding} class when hasNoPadding is true`, () => {
@@ -205,4 +205,37 @@ describe('Toolbar', () => {
       });
     });
   });
+
+  it(`Renders toolbar without ${styles.modifiers.vertical} by default`, () => {
+    render(
+      <Toolbar data-testid="Toolbar-test-is-not-vertical">
+        <ToolbarContent>
+          <ToolbarItem>Test</ToolbarItem>
+          <ToolbarItem>Test 2</ToolbarItem>
+          <ToolbarItem variant="separator" />
+          <ToolbarItem>Test 3 </ToolbarItem>
+        </ToolbarContent>
+      </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', () => {
+    const items = (
+      <Fragment>
+        <ToolbarItem>Test</ToolbarItem>
+        <ToolbarItem>Test 2</ToolbarItem>
+        <ToolbarItem variant="separator" />
+        <ToolbarItem>Test 3 </ToolbarItem>
+      </Fragment>
+    );
+
+    render(
+      <Toolbar id="toolbar" isVertical data-testid="Toolbar-test-is-vertical">
+        <ToolbarContent>{items}</ToolbarContent>
+      </Toolbar>
+    );
+
+    expect(screen.getByTestId('Toolbar-test-is-vertical')).toHaveClass(styles.modifiers.vertical);
+  });
 });

package/src/components/Wizard/WizardNavInternal.tsx

@@ -48,7 +48,7 @@ export const WizardNavInternal = ({
           let firstSubStepIndex: number;
           let hasActiveChild = false;
 
-          const subNavItems = step.subStepIds?.map((subStepId, subStepIndex) => {
+          const subNavItems = step.subStepIds?.map((subStepId, _subStepIndex) => {
             const subStep = steps.find((step) => step.id === subStepId);
             const hasVisitedNextStep = steps.some((step) => step.index > subStep.index && step.isVisited);
             const isSubStepDisabled =
@@ -66,8 +66,8 @@ export const WizardNavInternal = ({
               return;
             }
 
-            // Store the first sub-step index so that when its parent is clicked, the first sub-step is focused
-            if (subStepIndex === 0) {
+            // Store the first visible sub-step index so that when its parent is clicked, the first sub-step is focused
+            if (firstSubStepIndex === undefined) {
               firstSubStepIndex = subStep.index;
             }
 

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

@@ -627,3 +627,42 @@ test('onStepChange skips over disabled or hidden steps and substeps', async () =
     WizardStepChangeScope.Back
   );
 });
+
+test('clicking parent step navigates to first visible sub-step when first sub-step is hidden', async () => {
+  const user = userEvent.setup();
+  const onStepChange = jest.fn();
+
+  render(
+    <Wizard onStepChange={onStepChange}>
+      <WizardStep id="step-1" name="Test step 1" />
+      <WizardStep
+        id="step-2"
+        name="Test step 2"
+        steps={[
+          <WizardStep id="step2-sub1" name="Hidden sub step" isHidden />,
+          <WizardStep id="step2-sub2" name="Visible sub step 1" />,
+          <WizardStep id="step2-sub3" name="Visible sub step 2" />
+        ]}
+      />
+      <WizardStep id="step-3" name="Test step 3" />
+    </Wizard>
+  );
+
+  // Navigate to step 3 first
+  await user.click(screen.getByRole('button', { name: 'Test step 3' }));
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step-3' }),
+    expect.objectContaining({ id: 'step-1' }),
+    WizardStepChangeScope.Nav
+  );
+
+  // Click on parent step 2 - should navigate to the first VISIBLE sub-step (step2-sub2), not crash
+  await user.click(screen.getByRole('button', { name: 'Test step 2' }));
+  expect(onStepChange).toHaveBeenCalledWith(
+    null,
+    expect.objectContaining({ id: 'step2-sub2' }),
+    expect.objectContaining({ id: 'step-3' }),
+    WizardStepChangeScope.Nav
+  );
+});

package/src/demos/Compass/Compass.md

@@ -0,0 +1,40 @@
+---
+id: Compass
+section: AI
+subsection: Generative UIs
+---
+
+import { useRef, useState } 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';
+import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import imgAvatar from '../assets/avatarImg.svg';
+import pfLogo from '../assets/PF-IconLogo-color.svg';
+
+## Demos
+
+### Compass layout
+
+This demo showcases an implementation of the following Compass features:
+
+- Middle navigation in the `header`, featuring top-level primary tabs and a secondary container for sub-tabs.
+- Vertical sidebars utilizing `<ActionList>` groups with buttons that use the `isCircle` prop.
+- A custom gradient background in the `<Hero>`, visible in dark mode.
+- Background images that automatically adapt to both light and dark modes.
+- A `footer` section containing the `<CompassMessageBar>`, that could be used for AI text input.
+
+```ts isFullscreen file="./examples/CompassDemo.tsx"
+
+```
+
+### Docked nav demo
+
+```ts isFullscreen file="./examples/CompassDockDemo.tsx"
+
+```

package/src/demos/Compass/examples/CompassDockDemo.tsx

@@ -0,0 +1,215 @@
+import { useRef, useState } from 'react';
+import {
+  Compass,
+  CompassContent,
+  CompassMainHeader,
+  CompassPanel,
+  Title,
+  NavItem,
+  NavList,
+  Nav,
+  Brand,
+  MastheadLogo,
+  MastheadBrand,
+  MastheadContent,
+  MastheadMain,
+  Masthead,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+  ToolbarGroup,
+  Dropdown,
+  DropdownList,
+  MenuToggle,
+  DropdownItem,
+  Button,
+  ButtonVariant,
+  Avatar,
+  Tooltip,
+  Divider
+} from '@patternfly/react-core';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import pfLogo from '../../assets/PF-IconLogo-color.svg';
+import imgAvatar from '../../assets/avatarImg.svg';
+
+interface NavOnSelectProps {
+  groupId: number | string;
+  itemId: number | string;
+  to: string;
+}
+
+export const CompassDockDemo: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = useState<number>(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
+    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
+  };
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen((prevIsOpen) => !prevIsOpen);
+  };
+
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(false);
+  };
+
+  const userDropdownItems = [
+    <>
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user">User management</DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </>
+  ];
+
+  const navItem1Ref = useRef<HTMLAnchorElement>(null);
+  const navItem2Ref = useRef<HTMLAnchorElement>(null);
+  const navItem3Ref = useRef<HTMLAnchorElement>(null);
+  const navItem4Ref = useRef<HTMLAnchorElement>(null);
+  const settingsRef = useRef<HTMLButtonElement>(null);
+  const helpRef = useRef<HTMLButtonElement>(null);
+  const userMenuRef = useRef<HTMLButtonElement>(null);
+
+  const dockContent = (
+    <Masthead id="icon-router-link" variant="docked">
+      <MastheadMain>
+        <MastheadBrand>
+          <MastheadLogo component={(props) => <a {...props} href="#" />}>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '37px' }} />
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <Divider />
+      <MastheadContent>
+        <Toolbar id="toolbar" isVertical>
+          <ToolbarContent>
+            <ToolbarItem>
+              <Nav onSelect={onNavSelect} variant="docked" aria-label="Icon global" ouiaId="IconNav">
+                <NavList>
+                  <NavItem
+                    key="nav-icon-link1"
+                    preventDefault
+                    id="nav-icon-link1"
+                    to="#nav-icon-link1"
+                    itemId={0}
+                    isActive={activeItem === 0}
+                    icon={<CubeIcon />}
+                    anchorRef={navItem1Ref}
+                    aria-label="Link 1"
+                  />
+                  <NavItem
+                    key="nav-icon-link2"
+                    preventDefault
+                    id="nav-icon-link2"
+                    to="#nav-icon-link2"
+                    itemId={1}
+                    isActive={activeItem === 1}
+                    icon={<FolderIcon />}
+                    anchorRef={navItem2Ref}
+                    aria-label="Link 2"
+                  />
+                  <NavItem
+                    key="nav-icon-link3"
+                    preventDefault
+                    id="nav-icon-link3"
+                    to="#nav-icon-link3"
+                    itemId={2}
+                    isActive={activeItem === 2}
+                    icon={<CloudIcon />}
+                    anchorRef={navItem3Ref}
+                    aria-label="Link 3"
+                  />
+                  <NavItem
+                    key="nav-icon-link4"
+                    preventDefault
+                    id="nav-icon-link4"
+                    to="#nav-icon-link4"
+                    itemId={3}
+                    isActive={activeItem === 3}
+                    icon={<CodeIcon />}
+                    anchorRef={navItem4Ref}
+                    aria-label="Link 4"
+                  />
+                </NavList>
+              </Nav>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem1Ref} content="Link 1"></Tooltip>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem2Ref} content="Link 2"></Tooltip>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem3Ref} content="Link 3"></Tooltip>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem4Ref} content="Link 4"></Tooltip>
+            </ToolbarItem>
+            <ToolbarGroup
+              variant="action-group-plain"
+              align={{ default: 'alignEnd' }}
+              gap={{ default: 'gapNone', md: 'gapMd' }}
+            >
+              <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
+                <ToolbarItem>
+                  <Tooltip aria="none" aria-live="off" triggerRef={settingsRef} content="Settings">
+                    <Button ref={settingsRef} aria-label="Settings" isSettings variant="plain" />
+                  </Tooltip>
+                </ToolbarItem>
+                <ToolbarItem>
+                  <Tooltip aria="none" aria-live="off" triggerRef={helpRef} content="Help">
+                    <Button
+                      ref={helpRef}
+                      aria-label="Help"
+                      variant={ButtonVariant.plain}
+                      icon={<QuestionCircleIcon />}
+                    />
+                  </Tooltip>
+                </ToolbarItem>
+              </ToolbarGroup>
+            </ToolbarGroup>
+            <ToolbarItem>
+              <Dropdown
+                isOpen={isDropdownOpen}
+                shouldFocusToggleOnSelect
+                onSelect={onDropdownSelect}
+                onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
+                toggle={{
+                  toggleNode: (
+                    <Tooltip content="User menu" aria="none" aria-live="off" triggerRef={userMenuRef}>
+                      <MenuToggle
+                        ref={userMenuRef}
+                        onClick={onDropdownToggle}
+                        isExpanded={isDropdownOpen}
+                        icon={<Avatar src={imgAvatar} alt="" size="sm" />}
+                        variant="plain"
+                        aria-label="User menu"
+                      />
+                    </Tooltip>
+                  ),
+                  toggleRef: userMenuRef
+                }}
+              >
+                <DropdownList>{userDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
+    </Masthead>
+  );
+
+  const mainContent = (
+    <>
+      <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
+      <CompassContent>
+        <CompassPanel>Content</CompassPanel>
+      </CompassContent>
+    </>
+  );
+
+  return (
+    <Compass
+      dock={dockContent}
+      main={mainContent}
+      backgroundSrcDark="/assets/images/pf-background.svg"
+      backgroundSrcLight="/assets/images/pf-background.svg"
+    />
+  );
+};

package/src/demos/Page.md

@@ -3,7 +3,7 @@ id: Page
 section: components
 ---
 
-import { useState } from 'react';
+import { useState, useRef, useEffect } from 'react';
 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';
@@ -13,7 +13,12 @@ import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-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 EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
+import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';
 
 - All examples set the `isManagedSidebar` prop on the Page component to have the sidebar automatically close for smaller screen widths. You can also manually control this behavior by not adding the `isManagedSidebar` prop and instead:
 
@@ -49,3 +54,9 @@ When adding a context selector/perspective switcher in a `PageSidebar`, you must
 ```ts file='./examples/Page/PageContextSelector.tsx' isFullscreen
 
 ```
+
+### Docked nav
+
+```ts file='./examples/Page/PageDockedNav.tsx' isFullscreen
+
+```

package/src/demos/assets/PF-IconLogo-color.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="158px" height="158px" viewBox="0 0 158 158" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>PF-IconLogo-color </title>
+    <defs>
+        <linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#2B9AF3" offset="0%"></stop>
+            <stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="PF-IconLogo-color" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Logo">
+            <path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" id="Rectangle-Copy-17" fill="#0066CC"></path>
+            <path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" id="Path-2" fill="url(#linearGradient-1)"></path>
+            <path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" id="Path-2" fill="url(#linearGradient-1)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path>
+        </g>
+    </g>
+</svg>