@patternfly/react-core 6.0.0-alpha.81 → 6.0.0-alpha.83

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-page__main-body"
+  >
+    Test
+  </div>
+</DocumentFragment>
+`;

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

@@ -5,7 +5,11 @@ exports[`page breadcrumb Verify basic render 1`] = `
   <section
     class="pf-v6-c-page__main-breadcrumb"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -15,7 +19,11 @@ exports[`page breadcrumb Verify bottom shadow 1`] = `
   <section
     class="pf-v6-c-page__main-breadcrumb pf-m-shadow-bottom"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -25,7 +33,11 @@ exports[`page breadcrumb Verify bottom sticky 1`] = `
   <section
     class="pf-v6-c-page__main-breadcrumb pf-m-sticky-bottom"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -50,7 +62,11 @@ exports[`page breadcrumb Verify overflow scroll 1`] = `
     class="pf-v6-c-page__main-breadcrumb pf-m-overflow-scroll"
     tabindex="0"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -60,7 +76,11 @@ exports[`page breadcrumb Verify top shadow 1`] = `
   <section
     class="pf-v6-c-page__main-breadcrumb pf-m-shadow-top"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -70,7 +90,11 @@ exports[`page breadcrumb Verify top sticky 1`] = `
   <section
     class="pf-v6-c-page__main-breadcrumb pf-m-sticky-top"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;

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

@@ -4,15 +4,23 @@ exports[`Check page main breadcrumb section against snapshot 1`] = `
 <DocumentFragment>
   <section
     class="pf-v6-c-page__main-breadcrumb"
-  />
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
 exports[`Check page main nav section against snapshot 1`] = `
 <DocumentFragment>
   <section
-    class="pf-v6-c-page__main-nav"
-  />
+    class="pf-v6-c-page__main-section"
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
@@ -20,7 +28,11 @@ exports[`Check page main subnav section against snapshot 1`] = `
 <DocumentFragment>
   <section
     class="pf-v6-c-page__main-subnav"
-  />
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
@@ -28,7 +40,11 @@ exports[`Check page main tabs section against snapshot 1`] = `
 <DocumentFragment>
   <section
     class="pf-v6-c-page__main-tabs"
-  />
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
@@ -48,7 +64,11 @@ exports[`Check page section with fill and no padding example against snapshot 1`
 <DocumentFragment>
   <section
     class="pf-v6-c-page__main-section pf-m-no-padding pf-m-fill"
-  />
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
@@ -56,7 +76,11 @@ exports[`Check page section with fill example against snapshot 1`] = `
 <DocumentFragment>
   <section
     class="pf-v6-c-page__main-section pf-m-fill"
-  />
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
@@ -76,7 +100,11 @@ exports[`Check page section with no fill example against snapshot 1`] = `
 <DocumentFragment>
   <section
     class="pf-v6-c-page__main-section pf-m-no-fill"
-  />
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
@@ -84,7 +112,11 @@ exports[`Check page section with no padding example against snapshot 1`] = `
 <DocumentFragment>
   <section
     class="pf-v6-c-page__main-section pf-m-no-padding"
-  />
+  >
+    <div
+      class="pf-v6-c-page__main-body"
+    />
+  </section>
 </DocumentFragment>
 `;
 
@@ -93,7 +125,11 @@ exports[`Verify page section bottom shadow 1`] = `
   <section
     class="pf-v6-c-page__main-section pf-m-shadow-bottom"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -103,7 +139,11 @@ exports[`Verify page section bottom sticky 1`] = `
   <section
     class="pf-v6-c-page__main-section pf-m-sticky-bottom"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -114,7 +154,11 @@ exports[`Verify page section overflow scroll 1`] = `
     class="pf-v6-c-page__main-section pf-m-overflow-scroll"
     tabindex="0"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -124,7 +168,11 @@ exports[`Verify page section top shadow 1`] = `
   <section
     class="pf-v6-c-page__main-section pf-m-shadow-top"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;
@@ -134,7 +182,11 @@ exports[`Verify page section top sticky 1`] = `
   <section
     class="pf-v6-c-page__main-section pf-m-sticky-top"
   >
-    test
+    <div
+      class="pf-v6-c-page__main-body"
+    >
+      test
+    </div>
   </section>
 </DocumentFragment>
 `;

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

@@ -3,16 +3,7 @@ id: Page
 section: components
 cssPrefix: pf-v5-c-page
 propComponents:
-  [
-    'Page',
-    'PageSidebar',
-    'PageSidebarBody',
-    'PageSection',
-    'PageGroup',
-    'PageBreadcrumb',
-    'PageNavigation',
-    'PageToggleButton'
-  ]
+  ['Page', 'PageSidebar', 'PageSidebarBody', 'PageSection', 'PageGroup', 'PageBreadcrumb', 'PageToggleButton']
 ---
 
 import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
@@ -107,7 +98,7 @@ This example shows all types of page sections.
 
 To group page content sections, add 1 or more `<PageGroup>` components to a `<Page>`.
 
-The following example adds a group containing `<PageNavigation>`, `<PageBreadcrumb>`, and `<PageSection>` components.
+The following example adds a group containing `<PageBreadcrumb>` and `<PageSection>` components.
 
 To add additional components and information to a group, you may use the following properties:
 

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

@@ -11,7 +11,6 @@ import {
   PageSection,
   PageGroup,
   PageBreadcrumb,
-  PageNavigation,
   PageToggleButton,
   Breadcrumb,
   BreadcrumbItem,
@@ -70,27 +69,25 @@ export const PageGroupSection: React.FunctionComponent = () => {
   return (
     <Page masthead={masthead} sidebar={sidebar}>
       <PageGroup>
-        <PageNavigation>
-          <Nav aria-label="Group section navigation" variant="horizontal-subnav">
-            <NavList>
-              <NavItem href="#" itemId={0} isActive>
-                System panel
-              </NavItem>
-              <NavItem href="#" itemId={1}>
-                Policy
-              </NavItem>
-              <NavItem href="#" itemId={2}>
-                Authentication
-              </NavItem>
-              <NavItem href="#" itemId={3}>
-                Network services
-              </NavItem>
-              <NavItem href="#" itemId={4}>
-                Server
-              </NavItem>
-            </NavList>
-          </Nav>
-        </PageNavigation>
+        <Nav aria-label="Group section navigation" variant="horizontal-subnav">
+          <NavList>
+            <NavItem href="#" itemId={0} isActive>
+              System panel
+            </NavItem>
+            <NavItem href="#" itemId={1}>
+              Policy
+            </NavItem>
+            <NavItem href="#" itemId={2}>
+              Authentication
+            </NavItem>
+            <NavItem href="#" itemId={3}>
+              Network services
+            </NavItem>
+            <NavItem href="#" itemId={4}>
+              Server
+            </NavItem>
+          </NavList>
+        </Nav>
         <PageBreadcrumb>
           <Breadcrumb>
             <BreadcrumbItem>Section home</BreadcrumbItem>

package/src/components/Page/index.ts

@@ -1,9 +1,9 @@
 export * from './Page';
+export * from './PageBody';
 export * from './PageBreadcrumb';
 export * from './PageGroup';
 export * from './PageSidebar';
 export * from './PageSidebarBody';
 export * from './PageSection';
-export * from './PageNavigation';
 export * from './PageToggleButton';
 export * from './PageContext';

package/src/components/Toolbar/Toolbar.tsx

@@ -38,8 +38,6 @@ export interface ToolbarProps extends React.HTMLProps<HTMLDivElement>, OUIAProps
   isFullHeight?: boolean;
   /** Flag indicating the toolbar is static */
   isStatic?: boolean;
-  /** Flag indicating the toolbar should use the Page insets */
-  usePageInsets?: boolean;
   /** Flag indicating the toolbar should stick to the top of its container */
   isSticky?: boolean;
   /** Insets at various breakpoints. */
@@ -140,7 +138,6 @@ class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
       isFullHeight,
       isStatic,
       inset,
-      usePageInsets,
       isSticky,
       ouiaId,
       numberOfFiltersText,
@@ -164,7 +161,6 @@ class Toolbar extends React.Component<ToolbarProps, ToolbarState> {
               styles.toolbar,
               isFullHeight && styles.modifiers.fullHeight,
               isStatic && styles.modifiers.static,
-              usePageInsets && styles.modifiers.pageInsets,
               isSticky && styles.modifiers.sticky,
               formatBreakpointMods(inset, styles, '', getBreakpoint(width)),
               colorVariant === 'primary' && styles.modifiers.primary,

package/src/components/Toolbar/ToolbarContent.tsx

@@ -16,8 +16,6 @@ export interface ToolbarContentProps extends React.HTMLProps<HTMLDivElement> {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** Vertical alignment. */
-  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
   /** Vertical alignment of children */
   alignItems?: 'start' | 'center' | 'baseline' | 'default';
   /** Content to be rendered as children of the content row */
@@ -56,7 +54,6 @@ class ToolbarContent extends React.Component<ToolbarContentProps> {
       clearAllFilters,
       showClearFiltersButton,
       clearFiltersButtonText,
-      alignSelf,
       ...props
     } = this.props;
 
@@ -100,10 +97,7 @@ class ToolbarContent extends React.Component<ToolbarContentProps> {
                         styles.toolbarContentSection,
                         alignItems === 'center' && styles.modifiers.alignItemsCenter,
                         alignItems === 'start' && styles.modifiers.alignItemsStart,
-                        alignItems === 'baseline' && styles.modifiers.alignItemsBaseline,
-                        alignSelf === 'center' && styles.modifiers.alignSelfCenter,
-                        alignSelf === 'start' && styles.modifiers.alignSelfStart,
-                        alignSelf === 'baseline' && styles.modifiers.alignSelfBaseline
+                        alignItems === 'baseline' && styles.modifiers.alignItemsBaseline
                       )}
                     >
                       {children}

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -6,14 +6,23 @@ import { PageContext } from '../Page/PageContext';
 
 export enum ToolbarGroupVariant {
   'filter-group' = 'filter-group',
-  'icon-button-group' = 'icon-button-group'
+  'action-group' = 'action-group',
+  'action-group-inline' = 'action-group-inline',
+  'action-group-plain' = 'action-group-plain',
+  'label-group' = 'label-group'
 }
 
 export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
   /** Classes applied to root element of the data toolbar group */
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of group */
-  variant?: ToolbarGroupVariant | 'filter-group' | 'icon-button-group';
+  variant?:
+    | ToolbarGroupVariant
+    | 'filter-group'
+    | 'action-group'
+    | 'action-group-inline'
+    | 'action-group-plain'
+    | 'label-group';
   /** Visibility at various breakpoints. */
   visibility?: {
     default?: 'hidden' | 'visible';
@@ -24,16 +33,16 @@ export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>,
   };
   /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
   align?: {
-    default?: 'alignEnd' | 'alignStart';
-    md?: 'alignEnd' | 'alignStart';
-    lg?: 'alignEnd' | 'alignStart';
-    xl?: 'alignEnd' | 'alignStart';
-    '2xl'?: 'alignEnd' | 'alignStart';
+    default?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    md?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    lg?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    xl?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    '2xl'?: 'alignEnd' | 'alignStart' | 'alignCenter';
   };
   /** Vertical alignment of children */
-  alignItems?: 'start' | 'center' | 'baseline' | 'default';
+  alignItems?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';
   /** Vertical alignment */
-  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
+  alignSelf?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';
   /** Sets both the column and row gap at various breakpoints. */
   gap?: {
     default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
@@ -180,7 +189,15 @@ class ToolbarGroupWithRef extends React.Component<ToolbarGroupProps> {
           <div
             className={css(
               styles.toolbarGroup,
-              variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
+              variant &&
+                styles.modifiers[
+                  toCamel(variant) as
+                    | 'filterGroup'
+                    | 'actionGroup'
+                    | 'actionGroupInline'
+                    | 'actionGroupPlain'
+                    | 'labelGroup'
+                ],
               formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
               formatBreakpointMods(align, styles, '', getBreakpoint(width)),
               formatBreakpointMods(gap, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/ToolbarItem.tsx

@@ -28,16 +28,16 @@ export interface ToolbarItemProps extends React.HTMLProps<HTMLDivElement> {
   };
   /** Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis */
   align?: {
-    default?: 'alignEnd' | 'alignStart';
-    md?: 'alignEnd' | 'alignStart';
-    lg?: 'alignEnd' | 'alignStart';
-    xl?: 'alignEnd' | 'alignStart';
-    '2xl'?: 'alignEnd' | 'alignStart';
+    default?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    md?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    lg?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    xl?: 'alignEnd' | 'alignStart' | 'alignCenter';
+    '2xl'?: 'alignEnd' | 'alignStart' | 'alignCenter';
   };
   /** Vertical alignment of children */
-  alignItems?: 'start' | 'center' | 'baseline' | 'default';
+  alignItems?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';
   /** Vertical alignment */
-  alignSelf?: 'start' | 'center' | 'baseline' | 'default';
+  alignSelf?: 'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch';
   /** Sets both the column and row gap at various breakpoints. */
   gap?: {
     default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';

package/src/components/Toolbar/ToolbarLabelGroupContent.tsx

@@ -69,6 +69,8 @@ class ToolbarLabelGroupContent extends React.Component<ToolbarLabelGroupContentP
     }
 
     const isHidden = numberOfFilters === 0 || isExpanded;
+    const showNumberOfFilters = collapseListedFilters && numberOfFilters > 0 && !isExpanded;
+    const showDefaultClearFilter = showClearFiltersButton && !isExpanded && !customLabelGroupContent;
 
     return (
       <div
@@ -82,19 +84,19 @@ class ToolbarLabelGroupContent extends React.Component<ToolbarLabelGroupContentP
           {...(collapseListedFilters && { hidden: true })}
           {...(collapseListedFilters && { 'aria-hidden': true })}
         />
-        {collapseListedFilters && numberOfFilters > 0 && !isExpanded && (
-          <ToolbarGroup>
-            <ToolbarItem>{numberOfFiltersText(numberOfFilters)}</ToolbarItem>
+        {(showNumberOfFilters || showDefaultClearFilter || customLabelGroupContent) && (
+          <ToolbarGroup variant="action-group-inline">
+            {showNumberOfFilters && <ToolbarItem>{numberOfFiltersText(numberOfFilters)}</ToolbarItem>}
+            {showDefaultClearFilter && (
+              <ToolbarItem>
+                <Button variant="link" onClick={clearLabelGroups} isInline>
+                  {clearFiltersButtonText}
+                </Button>
+              </ToolbarItem>
+            )}
+            {customLabelGroupContent && customLabelGroupContent}
           </ToolbarGroup>
         )}
-        {showClearFiltersButton && !isExpanded && !customLabelGroupContent && (
-          <ToolbarItem>
-            <Button variant="link" onClick={clearLabelGroups} isInline>
-              {clearFiltersButtonText}
-            </Button>
-          </ToolbarItem>
-        )}
-        {customLabelGroupContent && customLabelGroupContent}
       </div>
     );
   }

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -27,14 +27,6 @@ export interface ToolbarToggleGroupProps extends ToolbarGroupProps {
     xl?: 'hidden' | 'visible';
     '2xl'?: 'hidden' | 'visible';
   };
-  /** Alignment at various breakpoints. */
-  alignment?: {
-    default?: 'alignEnd' | 'alignStart';
-    md?: 'alignEnd' | 'alignStart';
-    lg?: 'alignEnd' | 'alignStart';
-    xl?: 'alignEnd' | 'alignStart';
-    '2xl'?: 'alignEnd' | 'alignStart';
-  };
   /** Sets both the column and row gap at various breakpoints. */
   gap?: {
     default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';
@@ -176,7 +168,6 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
       variant,
       visibility,
       breakpoint,
-      alignment,
       gap,
       columnGap,
       rowGap,
@@ -260,10 +251,17 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                         className={css(
                           styles.toolbarGroup,
                           styles.modifiers.toggleGroup,
-                          variant && styles.modifiers[toCamel(variant) as 'filterGroup' | 'iconButtonGroup'],
+                          variant &&
+                            styles.modifiers[
+                              toCamel(variant) as
+                                | 'filterGroup'
+                                | 'actionGroup'
+                                | 'actionGroupInline'
+                                | 'actionGroupPlain'
+                                | 'labelGroup'
+                            ],
                           formatBreakpointMods(breakpointMod, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(visibility, styles, '', getBreakpoint(width)),
-                          formatBreakpointMods(alignment, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(gap, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(columnGap, styles, '', getBreakpoint(width)),
                           formatBreakpointMods(rowGap, styles, '', getBreakpoint(width)),

package/src/components/Toolbar/ToolbarUtils.tsx

@@ -45,8 +45,8 @@ export const ToolbarContentContext = React.createContext<ToolbarContentContextPr
 });
 
 export const globalBreakpoints = {
-  md: parseInt(globalBreakpointMd.value),
-  lg: parseInt(globalBreakpointLg.value),
-  xl: parseInt(globalBreakpointXl.value),
-  '2xl': parseInt(globalBreakpoint2xl.value)
+  md: parseInt(globalBreakpointMd.value) * 16,
+  lg: parseInt(globalBreakpointLg.value) * 16,
+  xl: parseInt(globalBreakpointXl.value) * 16,
+  '2xl': parseInt(globalBreakpoint2xl.value) * 16
 };

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

@@ -43,25 +43,6 @@ describe('Toolbar', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render with page inset flag', () => {
-    const items = (
-      <React.Fragment>
-        <ToolbarItem>Test</ToolbarItem>
-        <ToolbarItem>Test 2</ToolbarItem>
-        <ToolbarItem variant="separator" />
-        <ToolbarItem>Test 3 </ToolbarItem>
-      </React.Fragment>
-    );
-
-    const { asFragment } = render(
-      <Toolbar id="toolbar" usePageInsets>
-        <ToolbarContent>{items}</ToolbarContent>
-      </Toolbar>
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-
   it('should render with custom label content', () => {
     const items = (
       <React.Fragment>