@patternfly/react-core 6.0.0-alpha.75 → 6.0.0-alpha.77

package/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx

@@ -79,19 +79,13 @@ export const OverflowMenuGroupTypes: React.FunctionComponent = () => {
         </OverflowMenuGroup>
         <OverflowMenuGroup groupType="icon">
           <OverflowMenuItem>
-            <Button variant={ButtonVariant.plain} aria-label="Align left">
-              <AlignLeftIcon />
-            </Button>
+            <Button variant={ButtonVariant.plain} aria-label="Align left" icon={<AlignLeftIcon />} />
           </OverflowMenuItem>
           <OverflowMenuItem>
-            <Button variant={ButtonVariant.plain} aria-label="Align center">
-              <AlignCenterIcon />
-            </Button>
+            <Button variant={ButtonVariant.plain} aria-label="Align center" icon={<AlignCenterIcon />} />
           </OverflowMenuItem>
           <OverflowMenuItem>
-            <Button variant={ButtonVariant.plain} aria-label="Align right">
-              <AlignRightIcon />
-            </Button>
+            <Button variant={ButtonVariant.plain} aria-label="Align right" icon={<AlignRightIcon />} />
           </OverflowMenuItem>
         </OverflowMenuGroup>
       </OverflowMenuContent>

package/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx

@@ -68,19 +68,13 @@ export const OverflowMenuMultiGroup: React.FunctionComponent = () => {
         </OverflowMenuGroup>
         <OverflowMenuGroup groupType="icon">
           <OverflowMenuItem>
-            <Button variant={ButtonVariant.plain} aria-label="Align left">
-              <AlignLeftIcon />
-            </Button>
+            <Button variant={ButtonVariant.plain} aria-label="Align left" icon={<AlignLeftIcon />} />
           </OverflowMenuItem>
           <OverflowMenuItem>
-            <Button variant={ButtonVariant.plain} aria-label="Align center">
-              <AlignCenterIcon />
-            </Button>
+            <Button variant={ButtonVariant.plain} aria-label="Align center" icon={<AlignCenterIcon />} />
           </OverflowMenuItem>
           <OverflowMenuItem>
-            <Button variant={ButtonVariant.plain} aria-label="Align right">
-              <AlignRightIcon />
-            </Button>
+            <Button variant={ButtonVariant.plain} aria-label="Align right" icon={<AlignRightIcon />} />
           </OverflowMenuItem>
         </OverflowMenuGroup>
       </OverflowMenuContent>

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

@@ -921,7 +921,11 @@ exports[`Page Check page to verify skip to content points to main content region
         data-ouia-safe="true"
         href="#main-content-page-layout-test-nav"
       >
-        Skip to Content
+        <span
+          class="pf-v6-c-button__text"
+        >
+          Skip to Content
+        </span>
       </a>
     </div>
     <header

package/src/components/Pagination/Navigation.tsx

@@ -195,9 +195,8 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
                 this.handleNewPage(event, 1);
                 this.setState({ userInputPage: 1 });
               }}
-            >
-              <AngleDoubleLeftIcon />
-            </Button>
+              icon={<AngleDoubleLeftIcon />}
+            />
           </div>
         )}
         <div className={styles.paginationNavControl}>
@@ -212,9 +211,8 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
               this.setState({ userInputPage: newPage });
             }}
             aria-label={toPreviousPageAriaLabel}
-          >
-            <AngleLeftIcon />
-          </Button>
+            icon={<AngleLeftIcon />}
+          />
         </div>
         {!isCompact && (
           <div className={styles.paginationNavPageSelect}>
@@ -249,9 +247,8 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
               this.handleNewPage(event, newPage);
               this.setState({ userInputPage: newPage });
             }}
-          >
-            <AngleRightIcon />
-          </Button>
+            icon={<AngleRightIcon />}
+          />
         </div>
         {!isCompact && (
           <div className={css(styles.paginationNavControl, styles.modifiers.last)}>
@@ -265,9 +262,8 @@ class Navigation extends React.Component<NavigationProps, NavigationState> {
                 this.handleNewPage(event, lastPage);
                 this.setState({ userInputPage: lastPage });
               }}
-            >
-              <AngleDoubleRightIcon />
-            </Button>
+              icon={<AngleDoubleRightIcon />}
+            />
           </div>
         )}
       </nav>

package/src/components/Pagination/PaginationOptionsMenu.tsx

@@ -73,7 +73,7 @@ export const PaginationOptionsMenu: React.FunctionComponent<PaginationOptionsMen
   firstIndex = 0,
   lastIndex = 0,
   isLastFullPageShown = false,
-  itemsTitle = 'items',
+  itemsTitle = '',
   toggleTemplate,
   onPerPageSelect = () => null as any,
   containerRef

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

@@ -25,19 +25,23 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         data-ouia-safe="true"
         type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 448 512"
-          width="1em"
+        <span
+          class="pf-v6-c-button__icon pf-m-start"
         >
-          <path
-            d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
-          />
-        </svg>
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34zm-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34z"
+            />
+          </svg>
+        </span>
       </button>
     </div>
     <div
@@ -53,19 +57,23 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         data-ouia-safe="true"
         type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 256 512"
-          width="1em"
+        <span
+          class="pf-v6-c-button__icon pf-m-start"
         >
-          <path
-            d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-          />
-        </svg>
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+            />
+          </svg>
+        </span>
       </button>
     </div>
     <div
@@ -100,19 +108,23 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         data-ouia-safe="true"
         type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 256 512"
-          width="1em"
+        <span
+          class="pf-v6-c-button__icon pf-m-start"
         >
-          <path
-            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-          />
-        </svg>
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 256 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            />
+          </svg>
+        </span>
       </button>
     </div>
     <div
@@ -128,19 +140,23 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         data-ouia-safe="true"
         type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 448 512"
-          width="1em"
+        <span
+          class="pf-v6-c-button__icon pf-m-start"
         >
-          <path
-            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
-          />
-        </svg>
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 448 512"
+            width="1em"
+          >
+            <path
+              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34zm192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8z"
+            />
+          </svg>
+        </span>
       </button>
     </div>
   </nav>