@patternfly/react-core 6.4.1-prerelease.9 → 6.5.0-prerelease.10

package/src/components/ExpandableSection/ExpandableSectionToggle.tsx

@@ -34,6 +34,11 @@ export interface ExpandableSectionToggleProps extends Omit<React.HTMLProps<HTMLD
   toggleAriaLabel?: string;
   /** Accessible name via space delimtted list of IDs for the expandable section toggle. */
   toggleAriaLabelledBy?: string;
+  /** The HTML element to use for the toggle wrapper. Can be 'div' (default) or any heading level.
+   * When using heading elements, the button will be rendered inside the heading for proper semantics.
+   * This is useful when the toggle text should function as a heading in the document structure.
+   */
+  toggleWrapper?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionToggleProps> = ({
@@ -48,45 +53,50 @@ export const ExpandableSectionToggle: React.FunctionComponent<ExpandableSectionT
   isDetached,
   toggleAriaLabel,
   toggleAriaLabelledBy,
+  toggleWrapper = 'div',
   ...props
-}: ExpandableSectionToggleProps) => (
-  <div
-    className={css(
-      styles.expandableSection,
-      isExpanded && styles.modifiers.expanded,
-      hasTruncatedContent && styles.modifiers.truncate,
-      isDetached && 'pf-m-detached',
-      className
-    )}
-    {...props}
-  >
-    <div className={`${styles.expandableSection}__toggle`}>
-      <Button
-        variant="link"
-        {...(hasTruncatedContent && { isInline: true })}
-        aria-expanded={isExpanded}
-        aria-controls={contentId}
-        onClick={() => onToggle(!isExpanded)}
-        id={toggleId}
-        {...(!hasTruncatedContent && {
-          icon: (
-            <span
-              className={css(
-                styles.expandableSectionToggleIcon,
-                isExpanded && direction === 'up' && styles.modifiers.expandTop // TODO: next breaking change move this class to the outer styles.expandableSection wrapper
-              )}
-            >
-              <AngleRightIcon />
-            </span>
-          )
-        })}
-        aria-label={toggleAriaLabel}
-        aria-labelledby={toggleAriaLabelledBy}
-      >
-        {children}
-      </Button>
+}: ExpandableSectionToggleProps) => {
+  const ToggleWrapper = toggleWrapper as any;
+
+  return (
+    <div
+      className={css(
+        styles.expandableSection,
+        isExpanded && styles.modifiers.expanded,
+        hasTruncatedContent && styles.modifiers.truncate,
+        isDetached && 'pf-m-detached',
+        className
+      )}
+      {...props}
+    >
+      <ToggleWrapper className={`${styles.expandableSection}__toggle`}>
+        <Button
+          variant="link"
+          {...(hasTruncatedContent && { isInline: true })}
+          aria-expanded={isExpanded}
+          aria-controls={contentId}
+          onClick={() => onToggle(!isExpanded)}
+          id={toggleId}
+          {...(!hasTruncatedContent && {
+            icon: (
+              <span
+                className={css(
+                  styles.expandableSectionToggleIcon,
+                  isExpanded && direction === 'up' && styles.modifiers.expandTop // TODO: next breaking change move this class to the outer styles.expandableSection wrapper
+                )}
+              >
+                <AngleRightIcon />
+              </span>
+            )
+          })}
+          aria-label={toggleAriaLabel}
+          aria-labelledby={toggleAriaLabelledBy}
+        >
+          {children}
+        </Button>
+      </ToggleWrapper>
     </div>
-  </div>
-);
+  );
+};
 
 ExpandableSectionToggle.displayName = 'ExpandableSectionToggle';

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

@@ -208,3 +208,66 @@ test('Renders with aria-labelledby when toggleAriaLabelledBy is passed', () => {
 
   expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
 });
+
+test('Renders toggleContent as a function in uncontrolled mode (collapsed)', () => {
+  render(
+    <ExpandableSection toggleContent={(isExpanded) => (isExpanded ? 'Hide details' : 'Show details')}>
+      Test content
+    </ExpandableSection>
+  );
+
+  expect(screen.getByRole('button', { name: 'Show details' })).toBeInTheDocument();
+});
+
+test('Renders toggleContent as a function in uncontrolled mode (expanded after click)', async () => {
+  const user = userEvent.setup();
+
+  render(
+    <ExpandableSection toggleContent={(isExpanded) => (isExpanded ? 'Hide details' : 'Show details')}>
+      Test content
+    </ExpandableSection>
+  );
+
+  const button = screen.getByRole('button', { name: 'Show details' });
+  await user.click(button);
+
+  expect(screen.getByRole('button', { name: 'Hide details' })).toBeInTheDocument();
+});
+
+test('Renders toggleContent as a function in controlled mode', () => {
+  render(
+    <ExpandableSection isExpanded={true} toggleContent={(isExpanded) => (isExpanded ? 'Collapse' : 'Expand')}>
+      Test content
+    </ExpandableSection>
+  );
+
+  expect(screen.getByRole('button', { name: 'Collapse' })).toBeInTheDocument();
+});
+
+test('Renders with default div wrapper when toggleWrapper is not specified', () => {
+  render(<ExpandableSection data-testid="test-id">Test content</ExpandableSection>);
+
+  const toggle = screen.getByRole('button').parentElement;
+  expect(toggle?.tagName).toBe('DIV');
+});
+
+test('Renders with h2 wrapper when toggleWrapper="h2"', () => {
+  render(
+    <ExpandableSection data-testid="test-id" toggleWrapper="h2">
+      Test content
+    </ExpandableSection>
+  );
+
+  expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+});
+
+test('Renders with div wrapper when toggleWrapper="div"', () => {
+  render(
+    <ExpandableSection data-testid="test-id" toggleWrapper="div">
+      Test content
+    </ExpandableSection>
+  );
+
+  const toggle = screen.getByRole('button').parentElement;
+  expect(toggle?.tagName).toBe('DIV');
+});

package/src/components/ExpandableSection/__tests__/ExpandableSectionToggle.test.tsx

@@ -47,3 +47,31 @@ test('Renders with aria-labelledby when toggleAriaLabelledBy is passed', () => {
 
   expect(screen.getByRole('button')).toHaveAccessibleName('Test label');
 });
+
+test('Renders with default div wrapper when toggleWrapper is not specified', () => {
+  render(<ExpandableSectionToggle data-testid="test-id">Toggle test</ExpandableSectionToggle>);
+
+  const toggle = screen.getByRole('button').parentElement;
+  expect(toggle?.tagName).toBe('DIV');
+});
+
+test('Renders with h2 wrapper when toggleWrapper="h2"', () => {
+  render(
+    <ExpandableSectionToggle data-testid="test-id" toggleWrapper="h2">
+      Toggle test
+    </ExpandableSectionToggle>
+  );
+
+  expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
+});
+
+test('Renders with div wrapper when toggleWrapper="div"', () => {
+  render(
+    <ExpandableSectionToggle data-testid="test-id" toggleWrapper="div">
+      Toggle test
+    </ExpandableSectionToggle>
+  );
+
+  const toggle = screen.getByRole('button').parentElement;
+  expect(toggle?.tagName).toBe('DIV');
+});

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -28,6 +28,14 @@ import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle
 
 ```
 
+### Uncontrolled with dynamic toggle content (function)
+
+Use `toggleContent` as a function to dynamically render different content based on the expanded state without managing state yourself.
+
+```ts file="ExpandableSectionUncontrolledDynamicToggleFunction.tsx"
+
+```
+
 ### Detached
 
 When passing the `isDetached` property into `<ExpandableSection>`, you must also manually pass in the same `toggleId` and `contentId` properties to both `<ExpandableSection>` and `<ExpandableSectionToggle>`. This will link the content to the toggle via ARIA attributes.
@@ -62,6 +70,14 @@ By using the `toggleContent` prop, you can pass in content other than a simple s
 
 ```
 
+### With heading semantics
+
+When the toggle text should function as a heading in the document structure, use the `toggleWrapper` prop to specify a heading element (h1-h6). This ensures proper semantic structure for screen readers and other assistive technologies. The component automatically uses a native button element when heading wrappers are used, allowing the heading styles to display properly.
+
+```ts file="ExpandableSectionWithHeading.tsx"
+
+```
+
 ### Truncate expansion
 
 By passing in `variant="truncate"`, the expandable content will be visible up to a maximum number of lines before being truncated, with the toggle revealing or hiding the truncated content. By default the expandable content will truncate after 3 lines, and this can be customized by also passing in the `truncateMaxLines` prop.

package/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { ExpandableSection, Badge } from '@patternfly/react-core';
+import { ExpandableSection, Badge, Stack, StackItem } from '@patternfly/react-core';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
 
 export const ExpandableSectionCustomToggle: React.FunctionComponent = () => {
@@ -10,20 +10,35 @@ export const ExpandableSectionCustomToggle: React.FunctionComponent = () => {
   };
 
   return (
-    <ExpandableSection
-      toggleContent={
-        <div>
-          <span>You can also use icons </span>
-          <CheckCircleIcon />
-          <span> or badges </span>
-          <Badge isRead={true}>4</Badge>
-          <span> !</span>
-        </div>
-      }
-      onToggle={onToggle}
-      isExpanded={isExpanded}
-    >
-      This content is visible only when the component is expanded.
-    </ExpandableSection>
+    <Stack hasGutter>
+      <StackItem>
+        <h3>Custom Toggle Content</h3>
+        <p>You can use custom content such as icons and badges in the toggle:</p>
+        <ExpandableSection
+          toggleContent={
+            <div>
+              <span>You can also use icons </span>
+              <CheckCircleIcon />
+              <span> or badges </span>
+              <Badge isRead={true}>4</Badge>
+              <span> !</span>
+            </div>
+          }
+          onToggle={onToggle}
+          isExpanded={isExpanded}
+        >
+          This content is visible only when the component is expanded.
+        </ExpandableSection>
+      </StackItem>
+
+      <StackItem>
+        <h3>Accessibility Note</h3>
+        <p>
+          <strong>Important:</strong> If you need the toggle text to function as a heading in the document structure, do
+          NOT put heading elements (h1-h6) inside the <code>toggleContent</code> prop, as this creates invalid HTML
+          structure. Instead, use the <code>toggleWrapper</code> prop.
+        </p>
+      </StackItem>
+    </Stack>
   );
 };

package/src/components/ExpandableSection/examples/ExpandableSectionUncontrolledDynamicToggleFunction.tsx

@@ -0,0 +1,13 @@
+import { ExpandableSection } from '@patternfly/react-core';
+
+export const ExpandableSectionUncontrolledDynamicToggleFunction: React.FunctionComponent = () => (
+  <ExpandableSection
+    toggleContent={(isExpanded) =>
+      isExpanded
+        ? 'Show less uncontrolled dynamic toggle example content'
+        : 'Show more uncontrolled dynamic toggle example content'
+    }
+  >
+    This content is visible only when the component is expanded.
+  </ExpandableSection>
+);

package/src/components/ExpandableSection/examples/ExpandableSectionWithHeading.tsx

@@ -0,0 +1,89 @@
+import { useState, MouseEvent } from 'react';
+import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+
+export const ExpandableSectionWithHeading = () => {
+  const [isExpanded1, setIsExpanded1] = useState(false);
+  const [isExpanded2, setIsExpanded2] = useState(false);
+  const [isExpandedDetached, setIsExpandedDetached] = useState(false);
+
+  const onToggle1 = (_event: MouseEvent, isExpanded: boolean) => {
+    setIsExpanded1(isExpanded);
+  };
+
+  const onToggle2 = (_event: MouseEvent, isExpanded: boolean) => {
+    setIsExpanded2(isExpanded);
+  };
+
+  const onToggleDetached = (isExpanded: boolean) => {
+    setIsExpandedDetached(isExpanded);
+  };
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <h4>Document with Expandable Sections</h4>
+        <p>This demonstrates how to use expandable sections with proper heading semantics.</p>
+
+        {/* Using toggleWrapper prop for proper heading semantics */}
+        <ExpandableSection
+          toggleWrapper="h5"
+          toggleText="Toggle as a heading"
+          onToggle={onToggle1}
+          isExpanded={isExpanded1}
+        >
+          <p>
+            This content is visible only when the component is expanded. The toggle text above functions as a proper
+            heading in the document structure, which is important for screen readers and other assistive technologies.
+          </p>
+          <p>
+            When using the <code>toggleWrapper</code> prop with heading elements (h1-h6), the button is rendered inside
+            the heading element, maintaining proper semantic structure.
+          </p>
+        </ExpandableSection>
+      </StackItem>
+
+      <StackItem>
+        <h4>Detached Variant with Heading</h4>
+        <p>You can also use the detached variant with heading semantics:</p>
+
+        <ExpandableSectionToggle
+          toggleWrapper="h5"
+          toggleId="detached-heading-toggle"
+          contentId="detached-heading-content"
+          isExpanded={isExpandedDetached}
+          onToggle={onToggleDetached}
+        >
+          Detached Toggle with Heading
+        </ExpandableSectionToggle>
+
+        <ExpandableSection
+          isDetached
+          toggleId="detached-heading-toggle"
+          contentId="detached-heading-content"
+          isExpanded={isExpandedDetached}
+        >
+          <p>This is detached content that can be positioned anywhere in the DOM.</p>
+        </ExpandableSection>
+      </StackItem>
+
+      <StackItem>
+        <h4>Custom Content with Heading</h4>
+        <p>You can also use custom content within heading wrappers:</p>
+
+        <ExpandableSection
+          toggleWrapper="h5"
+          toggleContent={
+            <span>
+              <CheckCircleIcon /> Custom Heading Content with Icon
+            </span>
+          }
+          onToggle={onToggle2}
+          isExpanded={isExpanded2}
+        >
+          <p>This expandable section uses custom content with an icon inside a heading wrapper.</p>
+        </ExpandableSection>
+      </StackItem>
+    </Stack>
+  );
+};

package/src/components/Menu/Menu.tsx

@@ -70,7 +70,6 @@ export interface MenuState {
   ouiaStateId: string;
   transitionMoveTarget: HTMLElement;
   flyoutRef: React.Ref<HTMLLIElement> | null;
-  disableHover: boolean;
   currentDrilldownMenuId: string;
 }
 
@@ -99,7 +98,6 @@ class MenuBase extends Component<MenuProps, MenuState> {
     ouiaStateId: getDefaultOUIAId(Menu.displayName),
     transitionMoveTarget: null,
     flyoutRef: null,
-    disableHover: false,
     currentDrilldownMenuId: this.props.id
   };
 
@@ -117,9 +115,6 @@ class MenuBase extends Component<MenuProps, MenuState> {
   }
 
   componentDidMount() {
-    if (this.context) {
-      this.setState({ disableHover: this.context.disableHover });
-    }
     if (canUseDOM && this.props.containsDrilldown && this.props.isRootMenu) {
       window.addEventListener('transitionend', this.handleDrilldownTransition);
     }
@@ -284,7 +279,7 @@ class MenuBase extends Component<MenuProps, MenuState> {
           onGetMenuHeight,
           flyoutRef: this.state.flyoutRef,
           setFlyoutRef: (flyoutRef) => this.setState({ flyoutRef }),
-          disableHover: this.state.disableHover,
+          disableHover: this.context?.disableHover ?? false,
           role
         }}
       >

package/src/components/MenuToggle/MenuToggle.tsx

@@ -45,6 +45,8 @@ export interface MenuToggleProps
   isFullWidth?: boolean;
   /** Flag indicating the toggle contains placeholder text */
   isPlaceholder?: boolean;
+  /** @beta Flag indicating the toggle has circular styling. Can only be applied to plain toggles. */
+  isCircle?: boolean;
   /** Flag indicating whether the toggle is a settings toggle. This will override the icon property */
   isSettings?: boolean;
   /** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
@@ -84,6 +86,7 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
     isFullWidth: false,
     isFullHeight: false,
     isPlaceholder: false,
+    isCircle: false,
     size: 'default',
     ouiaSafe: true
   };
@@ -103,6 +106,7 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
       isFullHeight,
       isFullWidth,
       isPlaceholder,
+      isCircle,
       isSettings,
       splitButtonItems,
       variant,
@@ -225,7 +229,7 @@ class MenuToggleBase extends Component<MenuToggleProps, MenuToggleState> {
 
     return (
       <button
-        className={css(commonStyles)}
+        className={css(commonStyles, isCircle && isPlain && styles.modifiers.circle)}
         type="button"
         aria-label={ariaLabel}
         aria-expanded={isExpanded}

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

@@ -55,6 +55,8 @@ describe('Old Snapshot tests - remove when refactoring', () => {
   });
 });
 
+const toggleVariants = ['default', 'plain', 'primary', 'plainText', 'secondary', 'typeahead'];
+
 test(`Renders with class ${styles.modifiers.small} when size="sm" is passed`, () => {
   render(<MenuToggle size="sm">Toggle</MenuToggle>);
   expect(screen.getByRole('button')).toHaveClass(styles.modifiers.small);
@@ -110,6 +112,24 @@ test(`Renders with class ${styles.modifiers.settings} when isSettings is passed`
   expect(screen.getByRole('button')).toHaveClass(styles.modifiers.settings);
 });
 
+test(`Renders with class ${styles.modifiers.circle} when variant="plain" and isCircle is true`, () => {
+  render(<MenuToggle isCircle variant="plain" aria-label="Toggle"></MenuToggle>);
+  expect(screen.getByRole('button')).toHaveClass(styles.modifiers.circle);
+});
+
+toggleVariants
+  .filter((variant) => variant !== 'plain')
+  .forEach((variant) => {
+    test(`Does not with class ${styles.modifiers.circle} when variant="${variant}" and isCircle is true`, () => {
+      render(
+        <MenuToggle isCircle variant={variant as 'default' | 'primary' | 'plainText' | 'secondary' | 'typeahead'}>
+          Toggle
+        </MenuToggle>
+      );
+      expect(screen.getByRole('button')).not.toHaveClass(styles.modifiers.circle);
+    });
+  });
+
 test('Does not render custom icon when icon prop and isSettings are passed', () => {
   render(
     <MenuToggle isSettings icon={<div>Custom icon</div>}>

package/src/components/MenuToggle/examples/MenuToggle.md

@@ -20,6 +20,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 A toggle is collapsed until it is selected by a user.
 
 ```ts file="MenuToggleCollapsed.tsx"
+
 ```
 
 ### Expanded toggle
@@ -27,6 +28,7 @@ A toggle is collapsed until it is selected by a user.
 When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `isExpanded` property .
 
 ```ts file ="MenuToggleExpanded.tsx"
+
 ```
 
 ### Small toggle
@@ -42,6 +44,7 @@ You can pass `size="sm"` to a MenuToggle to style it as a small toggle, such as
 To disable the selection and expansion of a toggle, use the `isDisabled` property.
 
 ```ts file="MenuToggleDisabled.tsx"
+
 ```
 
 ### With a badge
@@ -49,6 +52,7 @@ To disable the selection and expansion of a toggle, use the `isDisabled` propert
 To display a count of selected items in a toggle, use the `badge` property. You can also pass in `variant="plainText"` for a badge only toggle.
 
 ```ts file="MenuToggleBadge.tsx"
+
 ```
 
 ### Settings toggle
@@ -76,6 +80,7 @@ You can also pass images into the `icon` property. The following example passes
 This can be used alongside a text label that provides more context for the image.
 
 ```ts file="MenuToggleAvatarText.tsx"
+
 ```
 
 ### Variant styles
@@ -83,6 +88,7 @@ This can be used alongside a text label that provides more context for the image
 Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `variant="primary"` into the `<MenuToggle>` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”.
 
 ```ts file="MenuToggleVariantStyles.tsx"
+
 ```
 
 ### Plain toggle with icon
@@ -92,6 +98,15 @@ To apply plain styling to a menu toggle with an icon, pass in `variant="plain"`.
 If the toggle does not have any visible text content, use the `aria-label` property to provide an accessible name.
 
 ```ts file="MenuTogglePlainIcon.tsx"
+
+```
+
+### Plain circle toggle
+
+You can also pass the `isCircle` property to a plain, icon-only toggle to adjust the styling to a complete circular shape, rather than a rounded square.
+
+```ts file="MenuTogglePlainCircle.tsx"
+
 ```
 
 ### Plain toggle with text label
@@ -99,6 +114,7 @@ If the toggle does not have any visible text content, use the `aria-label` prope
 To apply plain styling to a menu toggle with a text label, pass in `variant="plainText"`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.
 
 ```ts file="MenuTogglePlainTextLabel.tsx"
+
 ```
 
 ### Split toggle with checkbox
@@ -150,6 +166,7 @@ A full height toggle fills the height of its parent. To flag a full height toggl
 In the following example, the toggle fills the size of the "80px" `<div>` element that it is within.
 
 ```ts file="MenuToggleFullHeight.tsx"
+
 ```
 
 ### Full width toggle
@@ -159,6 +176,7 @@ A full width toggle fills the width of its parent. To flag a full width toggle,
 In the following example, the toggle fills the width of its parent as the window size changes.
 
 ```ts file="MenuToggleFullWidth.tsx"
+
 ```
 
 ### Typeahead toggle

package/src/components/MenuToggle/examples/MenuTogglePlainCircle.tsx

@@ -0,0 +1,11 @@
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+
+export const MenuTogglePlainCircle: React.FunctionComponent = () => (
+  <Fragment>
+    <MenuToggle isCircle icon={<EllipsisVIcon />} variant="plain" aria-label="plain circle kebab" />{' '}
+    <MenuToggle isCircle icon={<EllipsisVIcon />} variant="plain" isExpanded aria-label="plain circle expanded kebab" />{' '}
+    <MenuToggle isCircle icon={<EllipsisVIcon />} variant="plain" isDisabled aria-label="disabled plain circle kebab" />
+  </Fragment>
+);

package/src/components/Page/Page.tsx

@@ -266,6 +266,7 @@ class Page extends Component<PageProps, PageState> {
       isManagedSidebar,
       onSidebarToggle: mobileView ? this.onSidebarToggleMobile : this.onSidebarToggleDesktop,
       isSidebarOpen: mobileView ? mobileIsSidebarOpen : desktopIsSidebarOpen,
+      isMobile: mobileView,
       width,
       height,
       getBreakpoint,

package/src/components/Page/PageContext.tsx

@@ -6,6 +6,7 @@ export interface PageContextProps {
   isManagedSidebar: boolean;
   onSidebarToggle: () => void;
   isSidebarOpen: boolean;
+  isMobile: boolean;
   width: number;
   height: number;
   getBreakpoint: (width: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
@@ -16,6 +17,7 @@ export const pageContextDefaults: PageContextProps = {
   isManagedSidebar: false,
   isSidebarOpen: false,
   onSidebarToggle: () => null,
+  isMobile: false,
   width: null,
   height: null,
   getBreakpoint,

package/src/components/Page/PageSidebar.tsx

@@ -35,7 +35,7 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
   ...props
 }: PageSidebarProps) => (
   <PageContextConsumer>
-    {({ isManagedSidebar, isSidebarOpen: managedIsNavOpen }: PageSidebarProps) => {
+    {({ isManagedSidebar, isSidebarOpen: managedIsNavOpen, isMobile }) => {
       const sidebarOpen = isManagedSidebar ? managedIsNavOpen : isSidebarOpen;
 
       return (
@@ -43,7 +43,7 @@ export const PageSidebar: React.FunctionComponent<PageSidebarProps> = ({
           id={id}
           className={css(
             styles.pageSidebar,
-            sidebarOpen && styles.modifiers.expanded,
+            sidebarOpen && isMobile && styles.modifiers.expanded,
             !sidebarOpen && styles.modifiers.collapsed,
             className
           )}

package/src/components/Page/__tests__/Generated/__snapshots__/PageSidebar.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`PageSidebar should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="false"
-    class="pf-v6-c-page__sidebar pf-m-expanded ''"
+    class="pf-v6-c-page__sidebar ''"
     id="page-sidebar"
   >
     <div>