From 18312a983dfb6296b314a02399e53d8e4845074b Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Tue, 25 Aug 2026 15:55:41 -0400 Subject: [PATCH 1/3] feat(Nav,Compass,Page): add support for expandable nav items in docked nav --- packages/react-core/package.json | 2 +- .../src/components/Compass/Compass.tsx | 6 +- .../Compass/__tests__/Compass.test.tsx | 15 +++ .../src/components/Nav/NavExpandable.tsx | 14 ++- .../__snapshots__/NavExpandable.test.tsx.snap | 6 +- .../Nav/__tests__/NavExpandable.test.tsx | 21 ++++ .../__tests__/__snapshots__/Nav.test.tsx.snap | 23 +++-- .../src/components/Nav/examples/Nav.md | 21 +++- .../src/components/Nav/examples/NavDocked.tsx | 97 +++++++++++++++++++ .../src/components/Nav/examples/NavIcons.tsx | 16 +-- .../react-core/src/components/Page/Page.tsx | 5 + .../components/Page/__tests__/Page.test.tsx | 20 ++++ .../react-core/src/demos/Compass/Compass.md | 4 +- .../Compass/examples/CompassDockDemo.tsx | 73 +++++++++++++- packages/react-core/src/demos/Nav.md | 4 +- .../src/demos/examples/Nav/NavDockedNav.tsx | 67 ++++++++++++- packages/react-core/src/helpers/index.ts | 1 + packages/react-docs/package.json | 2 +- packages/react-icons/package.json | 2 +- packages/react-styles/package.json | 2 +- packages/react-tokens/package.json | 2 +- yarn.lock | 18 ++-- 22 files changed, 372 insertions(+), 49 deletions(-) create mode 100644 packages/react-core/src/components/Nav/examples/NavDocked.tsx diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 0d75d1e346c..469328247f0 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -54,7 +54,7 @@ "tslib": "^2.8.1" }, "devDependencies": { - "@patternfly/patternfly": "6.6.0-prerelease.20", + "@patternfly/patternfly": "6.6.0-prerelease.37", "case-anything": "^3.1.2", "css": "^3.0.0", "fs-extra": "^11.3.3" diff --git a/packages/react-core/src/components/Compass/Compass.tsx b/packages/react-core/src/components/Compass/Compass.tsx index 34205644231..5669e9556c2 100644 --- a/packages/react-core/src/components/Compass/Compass.tsx +++ b/packages/react-core/src/components/Compass/Compass.tsx @@ -10,8 +10,10 @@ export interface CompassProps extends React.HTMLProps { masthead?: React.ReactNode; /** Content of the docked navigation area of the layout */ dock?: React.ReactNode; - /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when dock content is passed. */ + /** @beta Flag indicating the docked nav is expande on mobile. Only applies when dock content is passed. */ isDockExpanded?: boolean; + /** @beta Flag indicating a docked nav is expanded as an overlay, triggered by expandable nav children. Only applies when dock content is passed. */ + isDockExpandableExpanded?: boolean; /** @beta Flag indicating the docked nav should display text on desktop. Only applies when dock content is passed, and * will handle toggling the visibility of the text in individual isDocked components. */ @@ -45,6 +47,7 @@ export const Compass: React.FunctionComponent = ({ masthead, dock, isDockExpanded, + isDockExpandableExpanded, isDockTextExpanded, header, isHeaderExpanded = true, @@ -69,6 +72,7 @@ export const Compass: React.FunctionComponent = ({ className={css( `${styles.compass}__dock`, isDockExpanded && styles.modifiers.expanded, + isDockExpandableExpanded && styles.modifiers.expandableExpanded, isDockTextExpanded && styles.modifiers.textExpanded )} > diff --git a/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx b/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx index 52f60bfec79..5714a680108 100644 --- a/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx +++ b/packages/react-core/src/components/Compass/__tests__/Compass.test.tsx @@ -94,6 +94,21 @@ test('Renders footer without expanded class and with inert when isFooterExpanded expect(footerElement).toHaveAttribute('inert'); }); +test(`Renders with ${styles.modifiers.expandableExpanded} class when isDockExpandableExpanded is true`, () => { + render(Dock content} isDockExpandableExpanded />); + expect(screen.getByText('Dock content').parentElement).toHaveClass(styles.modifiers.expandableExpanded); +}); + +test(`Does not render with ${styles.modifiers.expandableExpanded} class when isDockExpandableExpanded is false`, () => { + render(Dock content} isDockExpandableExpanded={false} />); + expect(screen.getByText('Dock content').parentElement).not.toHaveClass(styles.modifiers.expandableExpanded); +}); + +test(`Does not render with ${styles.modifiers.expandableExpanded} class by default`, () => { + render(Dock content} />); + expect(screen.getByText('Dock content').parentElement).not.toHaveClass(styles.modifiers.expandableExpanded); +}); + test('Renders with drawer when drawerContent is provided', () => { render(Drawer content} />); expect(screen.getByText('Drawer content')).toBeVisible(); diff --git a/packages/react-core/src/components/Nav/NavExpandable.tsx b/packages/react-core/src/components/Nav/NavExpandable.tsx index 06ca47ccaa2..c81d6faa0d3 100644 --- a/packages/react-core/src/components/Nav/NavExpandable.tsx +++ b/packages/react-core/src/components/Nav/NavExpandable.tsx @@ -8,6 +8,7 @@ import { PickOptional } from '../../helpers/typeUtils'; import { getOUIAProps, OUIAProps } from '../../helpers'; import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds'; import { IS_INERT } from '../../helpers/inert'; +import RhUiEllipsisHorizontalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-horizontal-fill-icon'; export interface NavExpandableProps extends Omit, HTMLLIElement>, 'title'>, OUIAProps { @@ -17,6 +18,8 @@ export interface NavExpandableProps srText?: string; /** Boolean to pragmatically expand or collapse section */ isExpanded?: boolean; + /** Adds an expandable icon to indicate the section is expandable */ + hasExpandableIcon?: boolean; /** Anything that can be rendered inside of the expandable list */ children?: React.ReactNode; /** Additional classes added to the container */ @@ -50,7 +53,8 @@ class NavExpandable extends Component { className: '', groupId: null as string, isActive: false, - id: '' + id: '', + hasExpandableIcon: false }; state = { @@ -100,6 +104,7 @@ class NavExpandable extends Component { id, // eslint-disable-next-line @typescript-eslint/no-unused-vars isExpanded, + hasExpandableIcon, buttonProps, // eslint-disable-next-line @typescript-eslint/no-unused-vars onExpand, @@ -137,7 +142,12 @@ class NavExpandable extends Component { {...buttonProps} > {icon && {icon}} - {typeof title !== 'string' ? {title} : title} + {hasExpandableIcon && ( + + + + )} + {title} diff --git a/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap index 4db03db6f45..08fff4e80d6 100644 --- a/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap +++ b/packages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap @@ -12,7 +12,11 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = ` aria-expanded="false" class="pf-v6-c-nav__link" > - string + + string + diff --git a/packages/react-core/src/components/Nav/__tests__/NavExpandable.test.tsx b/packages/react-core/src/components/Nav/__tests__/NavExpandable.test.tsx index ca72e29b8b2..02ff44bf588 100644 --- a/packages/react-core/src/components/Nav/__tests__/NavExpandable.test.tsx +++ b/packages/react-core/src/components/Nav/__tests__/NavExpandable.test.tsx @@ -30,3 +30,24 @@ test('Does not render nav link icon wrapper when icon prop is not provided', () const button = screen.getByRole('button', { name: 'NavExpandable' }); expect(button.querySelector('.pf-v6-c-nav__link-icon')).not.toBeInTheDocument(); }); + +test(`Renders with expandable icon when hasExpandableIcon is true`, () => { + render(); + + const button = screen.getByRole('button', { name: 'NavExpandable' }); + expect(button.querySelector('.pf-v6-c-nav__link-expandable-icon')).toBeInTheDocument(); +}); + +test(`Does not render expandable icon when hasExpandableIcon is false`, () => { + render(); + + const button = screen.getByRole('button', { name: 'NavExpandable' }); + expect(button.querySelector('.pf-v6-c-nav__link-expandable-icon')).not.toBeInTheDocument(); +}); + +test(`Does not render expandable icon by default`, () => { + render(); + + const button = screen.getByRole('button', { name: 'NavExpandable' }); + expect(button.querySelector('.pf-v6-c-nav__link-expandable-icon')).not.toBeInTheDocument(); +}); diff --git a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap index 13d8b3c0156..3a27259bc92 100644 --- a/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap +++ b/packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap @@ -196,7 +196,11 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = ` class="pf-v6-c-nav__link" id="grp-1" > - Section 1 + + Section 1 + @@ -329,7 +333,11 @@ exports[`Nav Expandable Nav List 1`] = ` class="pf-v6-c-nav__link" id="grp-1" > - Section 1 + + Section 1 + @@ -461,7 +469,11 @@ exports[`Nav Expandable Nav List with aria label 1`] = ` aria-expanded="false" class="pf-v6-c-nav__link" > - Section 1 + + Section 1 + @@ -1018,10 +1030,7 @@ exports[`Nav Nav List with flyout 1`] = `
Flyout test diff --git a/packages/react-core/src/components/Nav/examples/Nav.md b/packages/react-core/src/components/Nav/examples/Nav.md index e3a828f2911..6f97adacb7e 100644 --- a/packages/react-core/src/components/Nav/examples/Nav.md +++ b/packages/react-core/src/components/Nav/examples/Nav.md @@ -9,11 +9,12 @@ ouia: true import { useState } from 'react'; import './nav.css'; import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon'; -import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon'; -import RhUiFolderOpenFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-fill-icon'; -import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon'; +import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon'; +import RhUiFolderIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-icon'; +import RhUiFolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-icon'; +import RhUiCloudIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-icon'; import RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon'; +import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon'; ## Examples @@ -81,6 +82,18 @@ A flyout should be a `Menu` component. Press `space` or `right arrow` to open a ``` +### Docked + +The docked variant of `Navigation` displays only icons passed to child `NavItems` or `NavExpandable`. Text becomes visible when `.pf-m-text-expanded` or `.pf-m-expandable-expanded` are applied to an outer page or compass dock. + +`NavExpandable` items should include the `hasExpandableIcon` prop to indicate their expandable nature while in the collapsed state of the docked nav as the caret will not be rendered. + +See the [docked nav demo](/components/navigation/react-demos#docked-nav) for a fully functional example. + +```ts file="./NavDocked.tsx" + +``` + ## Types ### NavSelectClickHandler diff --git a/packages/react-core/src/components/Nav/examples/NavDocked.tsx b/packages/react-core/src/components/Nav/examples/NavDocked.tsx new file mode 100644 index 00000000000..befe6c3ac74 --- /dev/null +++ b/packages/react-core/src/components/Nav/examples/NavDocked.tsx @@ -0,0 +1,97 @@ +import { useState } from 'react'; +import { Nav, NavItem, NavList, NavExpandable } from '@patternfly/react-core'; +import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon'; +import RhUiFolderIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-icon'; +import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon'; +import RhUiCloudIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-icon'; + +export const NavDocked: React.FunctionComponent = () => { + const [activeItem, setActiveItem] = useState(0); + const [isGroupExpanded, setIsGroupExpanded] = useState(false); + + const onSelect = (_event: React.FormEvent, result: { itemId: number | string }) => { + setActiveItem(result.itemId as number); + }; + + const onToggle = ( + _event: React.MouseEvent, + result: { groupId: number | string; isExpanded: boolean } + ) => { + setIsGroupExpanded(result.isExpanded); + }; + + return ( + + ); +}; diff --git a/packages/react-core/src/components/Nav/examples/NavIcons.tsx b/packages/react-core/src/components/Nav/examples/NavIcons.tsx index b70337c3e87..5b74265bfd3 100644 --- a/packages/react-core/src/components/Nav/examples/NavIcons.tsx +++ b/packages/react-core/src/components/Nav/examples/NavIcons.tsx @@ -1,9 +1,9 @@ import { useState } from 'react'; import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core'; -import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon'; -import RhUiFolderOpenFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-fill-icon'; -import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon'; +import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon'; +import RhUiFolderIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-icon'; +import RhUiFolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-icon'; +import RhUiCloudIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-icon'; import RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon'; export const NavIcons: React.FunctionComponent = () => { @@ -22,7 +22,7 @@ export const NavIcons: React.FunctionComponent = () => { to="#nav-icon-link1" itemId={0} isActive={activeItem === 0} - icon={} + icon={} > Link 1 @@ -32,7 +32,7 @@ export const NavIcons: React.FunctionComponent = () => { to="#nav-icon-link2" itemId={1} isActive={activeItem === 1} - icon={} + icon={} > Link 2 @@ -42,7 +42,7 @@ export const NavIcons: React.FunctionComponent = () => { to="#nav-icon-link3" itemId={2} isActive={activeItem === 2} - icon={} + icon={} > Link 3 @@ -56,7 +56,7 @@ export const NavIcons: React.FunctionComponent = () => { > Link 4 - } groupId="nav-icon-expandable"> + } groupId="nav-icon-expandable"> { variant?: 'default' | 'docked'; /** @beta Flag indicating the docked nav is expanded on mobile. Only applies when variant is docked. */ isDockExpanded?: boolean; + /** @beta Flag indicating a docked nav is expanded as an overlay, triggered by expandable nav children. Only applies when dock content is passed. */ + isDockExpandableExpanded?: boolean; /** @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. */ @@ -131,6 +133,7 @@ class Page extends Component { defaultManagedSidebarIsOpen: true, mainTabIndex: -1, isNotificationDrawerExpanded: false, + isDockExpandableExpanded: false, onNotificationDrawerExpand: () => null, mainComponent: 'main', getBreakpoint, @@ -245,6 +248,7 @@ class Page extends Component { variant, isDockExpanded = false, isDockTextExpanded = false, + isDockExpandableExpanded = false, masthead, dockContent, sidebar, @@ -371,6 +375,7 @@ class Page extends Component { className={css( styles.pageDock, isDockExpanded && styles.modifiers.expanded, + isDockExpandableExpanded && styles.modifiers.expandableExpanded, isDockTextExpanded && styles.modifiers.textExpanded )} > diff --git a/packages/react-core/src/components/Page/__tests__/Page.test.tsx b/packages/react-core/src/components/Page/__tests__/Page.test.tsx index c97e699685c..e1008df9276 100644 --- a/packages/react-core/src/components/Page/__tests__/Page.test.tsx +++ b/packages/react-core/src/components/Page/__tests__/Page.test.tsx @@ -481,6 +481,26 @@ describe('Page docked variant', () => { expect(pageDock).toHaveClass(styles.modifiers.textExpanded); }); + test(`Does not render with ${styles.modifiers.expandableExpanded} when by default and variant is docked`, () => { + render(Dock content} masthead={<>Masthead} data-testid="page">); + const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`); + expect(pageDock).not.toHaveClass(styles.modifiers.expandableExpanded); + }); + + test(`Renders with ${styles.modifiers.expandableExpanded} when isDockExpandableExpanded is true and variant is docked`, () => { + render( + Dock content} + masthead={<>Masthead} + data-testid="page" + > + ); + const pageDock = screen.getByText('Dock content').closest(`.${styles.pageDock}`); + expect(pageDock).toHaveClass(styles.modifiers.expandableExpanded); + }); + test(`Renders with ${styles.pageDockMain} wrapper when variant is docked`, () => { render(Dock content} masthead={<>Masthead} data-testid="page">); diff --git a/packages/react-core/src/demos/Compass/Compass.md b/packages/react-core/src/demos/Compass/Compass.md index be2a39879da..68600ddb41a 100644 --- a/packages/react-core/src/demos/Compass/Compass.md +++ b/packages/react-core/src/demos/Compass/Compass.md @@ -8,7 +8,6 @@ import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play- import RhUiAddSquareIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-square-icon'; import RhUiCopyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-icon'; import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon'; -import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon'; import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon'; import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon'; @@ -18,6 +17,9 @@ import imgAvatar from '../assets/avatarImg.svg'; import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon'; import pfLogo from '../assets/PF-IconLogo-color.svg'; import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg'; +import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon'; +import RhUiFolderIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-icon'; +import RhUiResourceIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-resource-icon'; ## Demos diff --git a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx index c9350b9e214..f127882c37b 100644 --- a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx +++ b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx @@ -26,14 +26,17 @@ import { Button, Tooltip, Divider, - PageToggleButton + PageToggleButton, + NavExpandable } from '@patternfly/react-core'; -import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon'; import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon'; import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon'; import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon'; import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon'; +import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon'; +import RhUiFolderIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-icon'; +import RhUiResourceIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-resource-icon'; import pfLogo from '../../assets/PF-IconLogo-color.svg'; import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon'; import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg'; @@ -46,8 +49,10 @@ interface NavOnSelectProps { export const CompassDockDemo: React.FunctionComponent = () => { const [activeItem, setActiveItem] = useState(0); + const [isNavGroupExpanded, setIsNavGroupExpanded] = useState(false); const [isDockExpanded, setIsDockExpanded] = useState(false); const [isDockTextExpanded, setIsDockTextExpanded] = useState(false); + const [isDockExpandableExpanded, setIsDockExpandableExpanded] = useState(false); const [isMobile, setIsMobile] = useState(false); useEffect(() => { @@ -65,6 +70,11 @@ export const CompassDockDemo: React.FunctionComponent = () => { const onNavSelect = (_event: React.FormEvent, selectedItem: NavOnSelectProps) => { typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId); + + setIsNavGroupExpanded(false); + setIsDockExpandableExpanded(false); + setIsDockTextExpanded(false); + setIsDockExpanded(false); }; const navItem1Ref = useRef(null); @@ -95,7 +105,34 @@ export const CompassDockDemo: React.FunctionComponent = () => { }, 200); } } else { - setIsDockTextExpanded(!isDockTextExpanded); + const nextDockTextExpanded = !isDockTextExpanded; + setIsDockTextExpanded(nextDockTextExpanded); + + if (!nextDockTextExpanded) { + setIsDockExpandableExpanded(false); + } + + if (isDockExpandableExpanded) { + setIsDockExpandableExpanded(false); + setIsDockTextExpanded(false); + } + } + }; + + const onToggleNavGroup = ( + _event: React.MouseEvent, + result: { groupId: number | string; isExpanded: boolean } + ) => { + setIsNavGroupExpanded(result.isExpanded); + + if (!isMobile) { + if (!isDockExpandableExpanded && !isDockTextExpanded) { + setIsDockExpandableExpanded(true); + } + + if (!isDockTextExpanded) { + setIsDockTextExpanded(false); + } } }; @@ -246,7 +283,13 @@ export const CompassDockDemo: React.FunctionComponent = () => { -