@patternfly/react-core 6.5.0-prerelease.2 → 6.5.0-prerelease.3

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.1","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.2","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.1","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.2","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.1","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.2","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.2",
+  "version": "6.5.0-prerelease.3",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "c7b90a136c135c4cf74a7fc768cc17ee39227a6d"
+  "gitHead": "40a5015cf1eb4730bda9c5c15e328f6d544bc857"
 }

package/src/components/ExpandableSection/ExpandableSection.tsx

@@ -44,8 +44,10 @@ export interface ExpandableSectionProps extends Omit<React.HTMLProps<HTMLDivElem
    * use the onToggle property of the expandable section toggle sub-component.
    */
   onToggle?: (event: React.MouseEvent, isExpanded: boolean) => void;
-  /** React node that appears in the attached toggle in place of the toggleText property. */
-  toggleContent?: React.ReactNode;
+  /** React node that appears in the attached toggle in place of the toggleText property.
+   * Can also be a function that receives the expanded state and returns a React node.
+   */
+  toggleContent?: React.ReactNode | ((isExpanded: boolean) => React.ReactNode);
   /** Text that appears in the attached toggle. */
   toggleText?: string;
   /** Text that appears in the attached toggle when collapsed (will override toggleText if
@@ -246,6 +248,9 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
       propOrStateIsExpanded
     );
 
+    const computedToggleContent =
+      typeof toggleContent === 'function' ? toggleContent(propOrStateIsExpanded) : toggleContent;
+
     const expandableToggle = !isDetached && (
       <div className={`${styles.expandableSection}__toggle`}>
         <Button
@@ -265,7 +270,7 @@ class ExpandableSection extends Component<ExpandableSectionProps, ExpandableSect
           aria-label={toggleAriaLabel}
           aria-labelledby={toggleAriaLabelledBy}
         >
-          {toggleContent || computedToggleText}
+          {computedToggleContent || computedToggleText}
         </Button>
       </div>
     );

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

@@ -208,3 +208,37 @@ 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();
+});

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.

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/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>

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

@@ -12,7 +12,7 @@ exports[`Page Check dark page against snapshot 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     >
       <div
@@ -55,7 +55,7 @@ exports[`Page Check page horizontal layout example against snapshot 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -92,7 +92,7 @@ exports[`Page Check page to verify breadcrumb is created - PageBreadcrumb syntax
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -237,7 +237,7 @@ exports[`Page Check page to verify breadcrumb is created 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -386,7 +386,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - new components s
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -629,7 +629,7 @@ exports[`Page Check page to verify grouped nav and breadcrumb - old / props synt
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -913,7 +913,7 @@ exports[`Page Check page to verify skip to content points to main content region
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -1063,7 +1063,7 @@ exports[`Page Check page vertical layout example against snapshot 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     >
       <div
@@ -1106,7 +1106,7 @@ exports[`Page Sticky bottom breadcrumb on all height breakpoints - PageBreadcrum
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -1251,7 +1251,7 @@ exports[`Page Verify sticky bottom breadcrumb on all height breakpoints 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -1400,7 +1400,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints - PageBread
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div
@@ -1545,7 +1545,7 @@ exports[`Page Verify sticky top breadcrumb on all height breakpoints 1`] = `
     />
     <div
       aria-hidden="false"
-      class="pf-v6-c-page__sidebar pf-m-expanded"
+      class="pf-v6-c-page__sidebar"
       id="page-sidebar"
     />
     <div

package/src/components/Progress/Progress.tsx

@@ -48,6 +48,8 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;
+  /** Flag indicating whether the status icon should be hidden, helpful when space is limited (such as within table cells). When set to true, you must ensure the context of the status is provided in another way, such as via the progress measure. */
+  hideStatusIcon?: boolean;
 }
 
 class Progress extends Component<ProgressProps> {
@@ -94,6 +96,7 @@ class Progress extends Component<ProgressProps> {
       'aria-labelledby': ariaLabelledBy,
       'aria-describedby': ariaDescribedBy,
       helperText,
+      hideStatusIcon,
       ...props
     } = this.props;
 
@@ -151,6 +154,7 @@ class Progress extends Component<ProgressProps> {
           isTitleTruncated={isTitleTruncated}
           tooltipPosition={tooltipPosition}
           helperText={helperText}
+          hideStatusIcon={hideStatusIcon}
         />
       </div>
     );

package/src/components/Progress/ProgressContainer.tsx

@@ -58,6 +58,8 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;
+  /** Hide the status icon, helpful when space is limited (such as within table cells) */
+  hideStatusIcon?: boolean;
 }
 
 const variantToIcon = {
@@ -76,9 +78,10 @@ export const ProgressContainer: React.FunctionComponent<ProgressContainerProps>
   measureLocation = ProgressMeasureLocation.top,
   isTitleTruncated = false,
   tooltipPosition,
-  helperText
+  helperText,
+  hideStatusIcon = false
 }: ProgressContainerProps) => {
-  const StatusIcon = variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
+  const StatusIcon = !hideStatusIcon && variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
   const [tooltip, setTooltip] = useState('');
   const titleRef = useRef(null);
   const updateTooltip = (event: any) => {

package/src/components/Progress/__tests__/Generated/ProgressContainer.test.tsx

@@ -15,6 +15,7 @@ it('ProgressContainer should match snapshot (auto-generated)', () => {
       variant={'danger'}
       measureLocation={'outside'}
       value={42}
+      hideStatusIcon={false}
     />
   );
   expect(asFragment()).toMatchSnapshot();

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

@@ -108,3 +108,35 @@ test('Renders passed helper text', () => {
 
   expect(screen.getByText('Test helper text')).toBeVisible();
 });
+
+describe('hideStatusIcon prop behavior', () => {
+  test('shows status icon by default when hideStatusIcon is not set', () => {
+    render(<Progress id="default-status-icon-test" value={100} variant="success" />);
+
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+  });
+
+  test('hides status icon when hideStatusIcon flag is set with success variant', () => {
+    render(<Progress id="hide-icon-success" value={100} variant="success" hideStatusIcon />);
+
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+  });
+
+  test('hides status icon when hideStatusIcon flag is set with danger variant', () => {
+    render(<Progress id="hide-icon-danger" value={50} variant="danger" hideStatusIcon />);
+
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+  });
+
+  test('hides status icon when hideStatusIcon flag is set with warning variant', () => {
+    render(<Progress id="hide-icon-warning" value={75} variant="warning" hideStatusIcon />);
+
+    expect(screen.queryByRole('img', { hidden: true })).not.toBeInTheDocument();
+  });
+
+  test('shows status icon when hideStatusIcon is explicitly false', () => {
+    render(<Progress id="show-icon-success" value={100} variant="success" hideStatusIcon={false} />);
+
+    expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument();
+  });
+});

package/src/components/Progress/examples/Progress.md

@@ -107,20 +107,8 @@ When conveying status, you should ensure:
 
 ```
 
-### Inside success
+### Interactive status icon and measure location
 
-```ts file="./ProgressInsideSuccess.tsx"
-
-```
-
-### Outside failure
-
-```ts file="./ProgressOutsideFailure.tsx"
-
-```
-
-### Failure without measure
-
-```ts file="./ProgressFailureWithoutMeasure.tsx"
+```ts file="./ProgressInteractiveFailure.tsx"
 
 ```

package/src/components/Progress/examples/ProgressInteractiveFailure.tsx

@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import {
+  Progress,
+  ProgressMeasureLocation,
+  ProgressVariant,
+  Radio,
+  Checkbox,
+  Form,
+  FormGroup
+} from '@patternfly/react-core';
+
+export const ProgressInteractiveFailure: React.FunctionComponent = () => {
+  const [measureLocation, setMeasureLocation] = useState<ProgressMeasureLocation>(ProgressMeasureLocation.inside);
+  const [hideStatusIcon, setHideStatusIcon] = useState<boolean>(false);
+
+  const measureLocationOptions = [
+    { value: ProgressMeasureLocation.inside, label: 'Inside' },
+    { value: ProgressMeasureLocation.outside, label: 'Outside' },
+    { value: ProgressMeasureLocation.top, label: 'Top' },
+    { value: ProgressMeasureLocation.none, label: 'None' }
+  ];
+
+  return (
+    <Form>
+      <FormGroup fieldId="measure-location" label="Measure location">
+        {measureLocationOptions.map((option) => (
+          <Radio
+            key={option.value}
+            id={`measure-location-${option.value}`}
+            name="measure-location"
+            label={option.label}
+            value={option.value}
+            isChecked={measureLocation === option.value}
+            onChange={() => setMeasureLocation(option.value)}
+          />
+        ))}
+      </FormGroup>
+      <FormGroup fieldId="hide-status-icon">
+        <Checkbox
+          id="hide-status-icon"
+          label="Hide status icon"
+          isChecked={hideStatusIcon}
+          onChange={(_, checked) => setHideStatusIcon(checked)}
+        />
+      </FormGroup>
+      <Progress
+        value={33}
+        title="Title"
+        measureLocation={measureLocation}
+        variant={ProgressVariant.danger}
+        hideStatusIcon={hideStatusIcon}
+      />
+    </Form>
+  );
+};

package/src/components/Progress/examples/ProgressFailureWithoutMeasure.tsx

@@ -1,5 +0,0 @@
-import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-export const ProgressFailureWithoutMeasure: React.FunctionComponent = () => (
-  <Progress value={33} title="Title" measureLocation={ProgressMeasureLocation.none} variant={ProgressVariant.danger} />
-);

package/src/components/Progress/examples/ProgressInsideSuccess.tsx

@@ -1,10 +0,0 @@
-import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-export const ProgressInsideSuccess: React.FunctionComponent = () => (
-  <Progress
-    value={100}
-    title="Title"
-    measureLocation={ProgressMeasureLocation.inside}
-    variant={ProgressVariant.success}
-  />
-);

package/src/components/Progress/examples/ProgressOutsideFailure.tsx

@@ -1,10 +0,0 @@
-import { Progress, ProgressMeasureLocation, ProgressVariant } from '@patternfly/react-core';
-
-export const ProgressOutsideFailure: React.FunctionComponent = () => (
-  <Progress
-    value={33}
-    title="Title"
-    measureLocation={ProgressMeasureLocation.outside}
-    variant={ProgressVariant.danger}
-  />
-);