@patternfly/react-core 6.0.0-alpha.86 → 6.0.0-alpha.87

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.0.0-alpha.85","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.0.0-alpha.86","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.0.0-alpha.85","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.0.0-alpha.86","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.0.0-alpha.85","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.0.0-alpha.86","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.0.0-alpha.86",
+  "version": "6.0.0-alpha.87",
   "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",
@@ -47,15 +47,15 @@
     "clean:exports": "node scripts/cleanDistExports.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.0.0-alpha.30",
-    "@patternfly/react-styles": "^6.0.0-alpha.29",
-    "@patternfly/react-tokens": "^6.0.0-alpha.29",
+    "@patternfly/react-icons": "^6.0.0-alpha.31",
+    "@patternfly/react-styles": "^6.0.0-alpha.30",
+    "@patternfly/react-tokens": "^6.0.0-alpha.30",
     "focus-trap": "7.5.4",
     "react-dropzone": "^14.2.3",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.0.0-alpha.187",
+    "@patternfly/patternfly": "6.0.0-alpha.190",
     "case-anything": "^2.1.13",
     "css": "^3.0.0",
     "fs-extra": "^11.2.0"
@@ -64,5 +64,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "25a8747bbb2bd86419ea3ee470535709f6e7fe26"
+  "gitHead": "8e897861592c3ee8b186f6aef3958741073312e7"
 }

package/src/components/Page/Page.tsx

@@ -94,6 +94,8 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   groupProps?: PageGroupProps;
   /** Additional props of the breadcrumb */
   breadcrumbProps?: PageBreadcrumbProps;
+  /** Enables children to fill the available vertical space. Child page sections or groups that should fill should be passed the isFilled property. */
+  isContentFilled?: boolean;
 }
 
 export interface PageState {
@@ -249,6 +251,7 @@ class Page extends React.Component<PageProps, PageState> {
       additionalGroupedContent,
       groupProps,
       breadcrumbProps,
+      isContentFilled,
       ...rest
     } = this.props;
     const { mobileView, mobileIsSidebarOpen, desktopIsSidebarOpen, width, height } = this.state;
@@ -294,7 +297,7 @@ class Page extends React.Component<PageProps, PageState> {
     const Component: keyof JSX.IntrinsicElements = mainComponent;
 
     const main = (
-      <div className={css(styles.pageMainContainer)}>
+      <div className={css(styles.pageMainContainer, isContentFilled && styles.modifiers.fill)}>
         <Component
           ref={this.mainRef}
           role={role}

package/src/components/Page/PageGroup.tsx

@@ -17,6 +17,8 @@ export interface PageGroupProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'top' | 'bottom';
     '2xl'?: 'top' | 'bottom';
   };
+  /** Enables the page group to fill the available vertical space if true, or disable filling if false. */
+  isFilled?: boolean;
   /** Modifier indicating if PageGroup should have a shadow at the top */
   hasShadowTop?: boolean;
   /** Modifier indicating if PageGroup should have a shadow at the bottom */
@@ -31,6 +33,7 @@ export const PageGroup = ({
   className = '',
   children,
   stickyOnBreakpoint,
+  isFilled,
   hasShadowTop = false,
   hasShadowBottom = false,
   hasOverflowScroll = false,
@@ -52,6 +55,8 @@ export const PageGroup = ({
       className={css(
         styles.pageMainGroup,
         formatBreakpointMods(stickyOnBreakpoint, styles, 'sticky-', getVerticalBreakpoint(height), true),
+        isFilled === false && styles.modifiers.noFill,
+        isFilled === true && styles.modifiers.fill,
         hasShadowTop && styles.modifiers.shadowTop,
         hasShadowBottom && styles.modifiers.shadowBottom,
         hasOverflowScroll && styles.modifiers.overflowScroll,

package/src/components/Page/PageSection.tsx

@@ -27,7 +27,7 @@ export interface PageSectionProps extends React.HTMLProps<HTMLDivElement> {
   variant?: 'default' | 'secondary';
   /** Section type variant */
   type?: 'default' | 'subnav' | 'breadcrumb' | 'tabs' | 'wizard';
-  /** Enables the page section to fill the available vertical space */
+  /** Enables the page section to fill the available vertical space if true, or disable filling if false. */
   isFilled?: boolean;
   /** Limits the width of the section */
   isWidthLimited?: boolean;

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

@@ -13,6 +13,8 @@ import { PageBreadcrumb } from '../PageBreadcrumb';
 import { PageGroup } from '../PageGroup';
 import { Masthead } from '../../Masthead';
 
+import styles from '@patternfly/react-styles/css/components/Page/page';
+
 const props = {
   'aria-label': 'Page layout',
   id: 'PageId',
@@ -352,4 +354,23 @@ describe('Page', () => {
     expect(screen.getByTestId('page-test-id')).toHaveAttribute('id', props.id);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isContentFilled is not passed`, () => {
+    render(<Page {...props} role="main"></Page>);
+
+    expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.fill);
+    expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
+  });
+
+  test(`Renders with ${styles.modifiers.fill} if isContentFilled={true} is passed`, () => {
+    render(<Page {...props} role="main" isContentFilled={true}></Page>);
+
+    expect(screen.getByRole('main').parentElement).toHaveClass(styles.modifiers.fill);
+  });
+
+  test(`Does not render with ${styles.modifiers.noFill} if isContentFilled={false} is passed`, () => {
+    render(<Page {...props} role="main" isContentFilled={false}></Page>);
+
+    expect(screen.getByRole('main').parentElement).not.toHaveClass(styles.modifiers.noFill);
+  });
 });

package/src/components/Page/__tests__/PageGroup.test.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { render, screen } from '@testing-library/react';
 import { PageGroup } from '../PageGroup';
+import styles from '@patternfly/react-styles/css/components/Page/page';
 
 describe('page group', () => {
   test('Verify basic render', () => {
@@ -71,4 +72,23 @@ describe('page group', () => {
 
     expect(consoleWarning).toHaveBeenCalled();
   });
+
+  test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isFilled is not passed`, () => {
+    render(<PageGroup>test</PageGroup>);
+
+    expect(screen.getByText('test')).not.toHaveClass(styles.modifiers.fill);
+    expect(screen.getByText('test')).not.toHaveClass(styles.modifiers.noFill);
+  });
+
+  test(`Renders with ${styles.modifiers.fill} if isFilled={true} is passed`, () => {
+    render(<PageGroup isFilled={true}>test</PageGroup>);
+
+    expect(screen.getByText('test')).toHaveClass(styles.modifiers.fill);
+  });
+
+  test(`Renders with ${styles.modifiers.noFill} if isFilled={false} is passed`, () => {
+    render(<PageGroup isFilled={false}>test</PageGroup>);
+
+    expect(screen.getByText('test')).toHaveClass(styles.modifiers.noFill);
+  });
 });

package/src/components/Page/__tests__/PageSection.test.tsx

@@ -153,3 +153,30 @@ test('Does not render with PageBody wrapper when hasBodyWrapper is false', () =>
 
   expect(screen.getByText('test')).not.toHaveClass(styles.pageMainBody);
 });
+
+test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isFilled is not passed`, () => {
+  render(<PageSection component="main">test</PageSection>);
+
+  expect(screen.getByRole('main')).not.toHaveClass(styles.modifiers.fill);
+  expect(screen.getByRole('main')).not.toHaveClass(styles.modifiers.noFill);
+});
+
+test(`Renders with ${styles.modifiers.fill} if isFilled={true} is passed`, () => {
+  render(
+    <PageSection component="main" isFilled={true}>
+      test
+    </PageSection>
+  );
+
+  expect(screen.getByRole('main')).toHaveClass(styles.modifiers.fill);
+});
+
+test(`Renders with ${styles.modifiers.noFill} if isFilled={false} is passed`, () => {
+  render(
+    <PageSection component="main" isFilled={false}>
+      test
+    </PageSection>
+  );
+
+  expect(screen.getByRole('main')).toHaveClass(styles.modifiers.noFill);
+});

package/src/components/Page/examples/Page.md

@@ -62,9 +62,9 @@ When the `isManagedSidebar` property is true, it manages the sidebar open/close
 
 ### Filled page sections
 
-By default, the last page section is "filled", meaning it fills the available vertical space of a page.
+By default, page sections will not expand to fill in the available vertical space in a page.
 
-To change the default behavior, use the `isFilled` property. To make other page sections "filled", set `isFilled` equal to "true". To disable the last page section from being "filled", set `isFilled` equal to "false".
+To change this default behavior, pass `isContentFilled` to the `<Page>` component and `isFilled={true}` to any child `<PageSection>` or `<PageGroup>` component that you want to fill the space. If multiple components are set to fill, then the available space will be split equally between them.
 
 ```ts file="./PageWithOrWithoutFill.tsx"
 

package/src/components/Page/examples/PageWithOrWithoutFill.tsx

@@ -60,13 +60,12 @@ export const PageWithOrWithoutFill: React.FunctionComponent = () => {
   );
 
   return (
-    <Page masthead={masthead} sidebar={sidebar}>
+    <Page isContentFilled masthead={masthead} sidebar={sidebar}>
       <PageSection>A default page section</PageSection>
-      <PageSection isFilled={true}>This section fills the available space.</PageSection>
-      <PageSection isFilled={false}>
-        This section is set to not fill the available space, since the last page section is set to fill the available
-        space by default.
+      <PageSection isFilled={true} variant="secondary">
+        This section fills the available space.
       </PageSection>
+      <PageSection>A default page section</PageSection>
     </Page>
   );
 };

package/src/components/Wizard/Wizard.tsx

@@ -92,10 +92,12 @@ export const Wizard = ({
     }
   }, [startIndex]);
 
-  // When children change, active step index should reset
+  // When the number of steps changes and pushes activeStepIndex out of bounds, reset back to startIndex
   React.useEffect(() => {
-    setActiveStepIndex(startIndex);
-  }, [children, startIndex]);
+    if (activeStepIndex > initialSteps.length) {
+      setActiveStepIndex(startIndex);
+    }
+  }, [initialSteps, activeStepIndex, startIndex]);
 
   const focusMainContentElement = () =>
     setTimeout(() => {

package/src/components/Wizard/WizardContext.tsx

@@ -74,10 +74,20 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
   const [currentSteps, setCurrentSteps] = React.useState<WizardStepType[]>(initialSteps);
   const [currentFooter, setCurrentFooter] = React.useState<WizardFooterType>();
 
-  // Callback to update steps if they change after initial render
+  // Callback to update steps if the overall step number changes
   React.useEffect(() => {
-    setCurrentSteps(initialSteps);
-  }, [initialSteps]);
+    if (currentSteps.length !== initialSteps.length) {
+      const newSteps = initialSteps.map((newStep) => {
+        const currentStepMatch = currentSteps.find((step) => step.id === newStep.id);
+        // If an existing step has the same id as a new step, carry over props
+        if (currentStepMatch) {
+          return { ...currentStepMatch, ...newStep };
+        }
+        return newStep;
+      });
+      setCurrentSteps(newSteps);
+    }
+  }, [currentSteps, initialSteps]);
 
   // Combined initial and current state steps
   const steps = React.useMemo(
@@ -130,7 +140,6 @@ export const WizardContextProvider: React.FunctionComponent<WizardContextProvide
           if (prevStep.id === step.id) {
             return { ...prevStep, ...step };
           }
-
           return prevStep;
         })
       ),