@patternfly/react-core 5.0.0-alpha.3 → 5.0.0-alpha.30

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

@@ -23,49 +23,99 @@ import './page.css';
 
 ## Examples
 
-### Vertical nav
+### Basic page components
+
+A page will typically contain the following components: 
+
+- A `<Page>` with a `header` that often contains a [masthead](/components/masthead)
+  - Mastheads contain the `<PageToggleButton>`, a `<MastheadMain>` that contains a `<MastheadBrand>`, and the page's header toolbar within `<MastheadContent>`. 
+- A `<PageSidebar>` for vertical navigation 
+- 1 or more `<PageSection>` components
+
+### Vertical navigation
+
+To add a vertical sidebar to a `<Page>`, pass a `<PageSidebar>` component into the `sidebar` property. To render navigation in the sidebar, use the `nav` property of the `<PageSidebar>`. 
+
+The `isNavOpen` property helps facilitate the opening and closing of the sidebar and should be 'true' when the navigation sidebar is visible. 
 
 ```ts file="./PageVerticalNav.tsx"
 ```
 
-### Horizontal nav
+### Legacy page header
+
+This example shows the legacy implementation of a page's vertical navigation. Our updated recommendation advises you to use a masthead and toolbar to make headers, rather than `<PageHeader>` and `<PageHeaderTools>` as shown in the following example.
+
+```ts file="./PageVerticalNavUsingPageHeaderComponent.tsx"
+```
+
+### Horizontal navigation
+
+To add horizontal navigation to the top of a `<Page>`, add the navigation inside of a `<ToolbarItem>` in the `<Toolbar>` that is passed to the `<MastheadContent>` of the `<Masthead>`.
 
 ```ts file="./PageHorizontalNav.tsx"
 ```
 
-### Tertiary nav
+### Legacy tertiary navigation
+
+[Horizontal sub-navigation](/components/navigation#horizontal-subnav) is now recommended instead of tertiary-level navigation. 
+
+Tertiary navigation allows you to add an additional navigation menu alongside vertical or horizontal navigation. To create tertiary navigation, use the `tertiaryNav` property. The following example passes `tertiaryNav="Navigation"` into a `<Page>` component.
 
 ```ts file="./PageTertiaryNav.tsx"
 ```
 
-### With or without fill
+### Uncontrolled navigation
+
+When the `isManagedSidebar` property is true, it manages the sidebar open/close state, removing the need to pass both `isNavOpen` into the `<PageSidebar>` and `onNavToggle` into the `<PageHeader>`.
+
+```ts file="./PageUncontrolledNav.tsx"
+```
+
+### Filled page sections
+
+By default, the last page section is "filled", meaning it fills the available vertical space of 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".
 
 ```ts file="./PageWithOrWithoutFill.tsx"
 ```
 
 ### Main section padding
 
-```ts file="./PageMainSectionPadding.tsx"
-```
+To adjust the padding of a `<PageSection>`, you can pass in different values to the `padding` property. These values should be aligned to a specific breakpoint: 'default', 'sm', 'md', 'lg', 'xl', and '2xl'. Each breakpoint passed into the property should be given a value of either ‘padding’ or ‘noPadding’. 
 
-### Uncontrolled nav
+As the page's viewport width increases, breakpoints inherit the padding behavior of the previous breakpoint. For example, padding that is set on 'lg' also applies to 'xl' and '2xl'. 
 
-```ts file="./PageUncontrolledNav.tsx"
+To remove padding entirely, pass 'noPadding' to the `default` breakpoint. For example, the second section in this example passes in `padding={{ default: 'noPadding' }}`. Since no specific breakpoints are mentioned, every breakpoint will have 'noPadding'.
+
+To add padding at specific breakpoints, pass in "padding" at those breakpoints. For example, the third section in this example passes in `padding={{ default: 'noPadding', md: 'padding' }}`. At 'md', 'lg',  'xl', and '2xl' breakpoints, the default value will be overwritten, and padding will be added.
+
+To remove padding at specific breakpoints, pass in 'noPadding' at those breakpoints. For example, the fourth section in this example passes in `padding={{ md: 'noPadding' }}`, which means that 'md', 'lg'  'xl', and '2xl' breakpoints will have `noPadding`.
+
+```ts file="./PageMainSectionPadding.tsx"
 ```
 
 ### Group section
 
-```ts file="./PageGroupSection.tsx"
-```
+To group page content sections, add 1 or more `<PageGroup>` components to a `<Page>`. 
 
-### Vertical nav using PageHeader component
+The following example adds a group containing `<PageNavigation>`, `<PageBreadcrumb>`, and `<PageSection>` components.
 
-This example is provided because PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools.
+To add additional components and information to a group, you may use the following properties: 
 
-```ts file="./PageVerticalNavUsingPageHeaderComponent.tsx"
+- To indicate that a breadcrumb should be in a group, use `isBreadcrumbGrouped`. 
+- To indicate that tertiary navigation should be in a group, use `isTertiaryNavGrouped`.
+- To specify additional group content, use `additionalGroupedContent`. 
+
+
+```ts file="./PageGroupSection.tsx"
 ```
 
 ### Centered section
 
+By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property.  When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
+
+The content in this example is placed in a card to better illustrate how the section behaves when it is centered, but a card is not required to center a page section.
+
 ```ts file="./PageCenteredSection.tsx"
 ```

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

@@ -61,9 +61,7 @@ export const PageMainSectionPadding: React.FunctionComponent = () => {
       <PageSection variant={PageSectionVariants.light} padding={{ default: 'noPadding' }}>
         Section with no padding
       </PageSection>
-      <PageSection padding={{ default: 'noPadding', md: 'padding', lg: 'padding' }}>
-        Section with padding only on medium/large
-      </PageSection>
+      <PageSection padding={{ default: 'noPadding', md: 'padding' }}>Section with padding on medium</PageSection>
       <PageSection variant={PageSectionVariants.light} padding={{ md: 'noPadding' }}>
         Section with no padding on medium
       </PageSection>

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -79,11 +79,11 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   const containerRef = React.useRef<HTMLDivElement>(null);
 
   const onToggle = () => {
-    setIsOpen(prevState => !prevState);
+    setIsOpen((prevState) => !prevState);
   };
 
   const onSelect = () => {
-    setIsOpen(prevState => !prevState);
+    setIsOpen((prevState) => !prevState);
     toggleRef.current?.focus();
   };
 
@@ -156,7 +156,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
         key={value}
         data-action={`per-page-${value}`}
         isSelected={perPage === value}
-        onClick={event => handleNewPerPage(event, value)}
+        onClick={(event) => handleNewPerPage(event, value)}
       >
         {title}
         {` ${perPageSuffix}`}
@@ -200,7 +200,9 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
     <div ref={containerRef}>
       <Popper
         trigger={toggle}
+        triggerRef={toggleRef}
         popper={menu}
+        popperRef={menuRef}
         isVisible={isOpen}
         direction={dropDirection}
         appendTo={containerRef.current || undefined}

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap

@@ -3,51 +3,47 @@
 exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div>
-    <div
-      style="display: contents;"
+    <button
+      aria-expanded="false"
+      aria-haspopup="listbox"
+      class="pf-c-menu-toggle pf-m-plain pf-m-text"
+      id="''-toggle"
+      type="button"
     >
-      <button
-        aria-expanded="false"
-        aria-haspopup="listbox"
-        class="pf-c-menu-toggle pf-m-plain pf-m-text"
-        id="''-toggle"
-        type="button"
+      <span
+        class="pf-c-menu-toggle__text"
+      >
+        <b>
+          0 - 0
+        </b>
+         of 
+        <b>
+          0
+        </b>
+         'items'
+      </span>
+      <span
+        class="pf-c-menu-toggle__controls"
       >
         <span
-          class="pf-c-menu-toggle__text"
-        >
-          <b>
-            0 - 0
-          </b>
-           of 
-          <b>
-            0
-          </b>
-           'items'
-        </span>
-        <span
-          class="pf-c-menu-toggle__controls"
+          class="pf-c-menu-toggle__toggle-icon"
         >
-          <span
-            class="pf-c-menu-toggle__toggle-icon"
+          <svg
+            aria-hidden="true"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            style="vertical-align: -0.125em;"
+            viewBox="0 0 320 512"
+            width="1em"
           >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 320 512"
-              width="1em"
-            >
-              <path
-                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-              />
-            </svg>
-          </span>
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
         </span>
-      </button>
-    </div>
+      </span>
+    </button>
   </div>
 </DocumentFragment>
 `;

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

@@ -115,11 +115,9 @@ describe('Pagination', () => {
       expect(screen.getByLabelText('test label')).toHaveAttribute('id', id);
     });
 
-    test('should not update generated options menu id on rerenders', () => {
-      const { rerender } = render(<Pagination titles={{optionsToggleAriaLabel: "test label"}} itemCount={20}/>);
-      const id = screen.getByLabelText("test label").getAttribute("id");
-      rerender(<Pagination titles={{optionsToggleAriaLabel: "test label"}} itemCount={20} />);
-      expect(screen.getByLabelText("test label")).toHaveAttribute("id", id);
+    test('page insets', () => {
+      render(<Pagination data-testid="pagination-insets" usePageInsets />);
+      expect(screen.getByTestId('pagination-insets')).toHaveClass('pf-m-page-insets');
     });
 
     test('page insets', () => {