@patternfly/react-core 6.0.0-alpha.99 → 6.0.0-prerelease.2

package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx

@@ -89,9 +89,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
               onClick={() => onToggle('groups-kebab-toggle-1')}
               variant="plain"
               aria-label={`Groups example header kebab toggle`}
-            >
-              <EllipsisVIcon aria-hidden="true" />
-            </MenuToggle>
+              icon={<EllipsisVIcon aria-hidden="true" />}
+            />
           )}
         >
           <DropdownList>{dropdownItems}</DropdownList>
@@ -125,9 +124,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-2')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 1 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>
@@ -156,9 +154,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-3')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 2 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>
@@ -188,9 +185,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-4')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 3 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>
@@ -219,9 +215,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-5')}
                         variant="plain"
                         aria-label={`Groups example group 1 notification 4 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>
@@ -259,9 +254,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-6')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 1 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>
@@ -290,9 +284,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-7')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 2 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>
@@ -322,9 +315,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-8')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 3 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>
@@ -353,9 +345,8 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
                         onClick={() => onToggle('groups-kebab-toggle-9')}
                         variant="plain"
                         aria-label={`Groups example group 2 notification 4 kebab toggle`}
-                      >
-                        <EllipsisVIcon aria-hidden="true" />
-                      </MenuToggle>
+                        icon={<EllipsisVIcon aria-hidden="true" />}
+                      />
                     )}
                   >
                     <DropdownList>{dropdownItems}</DropdownList>

package/src/components/NumberInput/NumberInput.tsx

@@ -124,12 +124,13 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
             aria-label={minusBtnAriaLabel}
             isDisabled={isDisabled || (typeof value === 'number' ? value : DEFAULT_VALUE) <= min}
             onClick={(evt) => onMinus(evt, inputName)}
+            icon={
+              <span className={css(styles.numberInputIcon)}>
+                <MinusIcon aria-hidden="true" />
+              </span>
+            }
             {...minusBtnProps}
-          >
-            <span className={css(styles.numberInputIcon)}>
-              <MinusIcon aria-hidden="true" />
-            </span>
-          </Button>
+          />
         </InputGroupItem>
         <InputGroupItem>
           <TextInput
@@ -152,12 +153,13 @@ export const NumberInput: React.FunctionComponent<NumberInputProps> = ({
             aria-label={plusBtnAriaLabel}
             isDisabled={isDisabled || (typeof value === 'number' ? value : DEFAULT_VALUE) >= max}
             onClick={(evt) => onPlus(evt, inputName)}
+            icon={
+              <span className={css(styles.numberInputIcon)}>
+                <PlusIcon aria-hidden="true" />
+              </span>
+            }
             {...plusBtnProps}
-          >
-            <span className={css(styles.numberInputIcon)}>
-              <PlusIcon aria-hidden="true" />
-            </span>
-          </Button>
+          />
         </InputGroupItem>
       </InputGroup>
       {unit && unitPosition === 'after' && numberInputUnit}

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

@@ -22,7 +22,7 @@ exports[`numberInput disables lower threshold 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -75,7 +75,7 @@ exports[`numberInput disables lower threshold 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -123,7 +123,7 @@ exports[`numberInput disables upper threshold 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -177,7 +177,7 @@ exports[`numberInput disables upper threshold 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -226,7 +226,7 @@ exports[`numberInput passes button props successfully 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -280,7 +280,7 @@ exports[`numberInput passes button props successfully 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -328,7 +328,7 @@ exports[`numberInput passes input props successfully 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -381,7 +381,7 @@ exports[`numberInput passes input props successfully 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -430,7 +430,7 @@ exports[`numberInput renders custom width 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -483,7 +483,7 @@ exports[`numberInput renders custom width 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -532,7 +532,7 @@ exports[`numberInput renders defaults & extra props 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -585,7 +585,7 @@ exports[`numberInput renders defaults & extra props 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -634,7 +634,7 @@ exports[`numberInput renders disabled 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -689,7 +689,7 @@ exports[`numberInput renders disabled 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -737,7 +737,7 @@ exports[`numberInput renders error validated 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -811,7 +811,7 @@ exports[`numberInput renders error validated 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -859,7 +859,7 @@ exports[`numberInput renders success validated 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -933,7 +933,7 @@ exports[`numberInput renders success validated 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -986,7 +986,7 @@ exports[`numberInput renders unit & position 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -1039,7 +1039,7 @@ exports[`numberInput renders unit & position 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -1087,7 +1087,7 @@ exports[`numberInput renders unit 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -1140,7 +1140,7 @@ exports[`numberInput renders unit 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -1193,7 +1193,7 @@ exports[`numberInput renders value 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -1246,7 +1246,7 @@ exports[`numberInput renders value 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -1294,7 +1294,7 @@ exports[`numberInput renders warning validated 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"
@@ -1368,7 +1368,7 @@ exports[`numberInput renders warning validated 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-button__text"
+            class="pf-v6-c-button__icon"
           >
             <span
               class="pf-v6-c-number-input__icon"

package/src/components/Page/Page.tsx

@@ -76,6 +76,9 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
    * https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/helpers/util.ts
    */
   getVerticalBreakpoint?: (height: number | null) => 'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+  /** Banner component for the page. This will be rendered above a breadcrumb if one is also passed.
+   */
+  banner?: React.ReactNode;
   /** Breadcrumb component for the page */
   breadcrumb?: React.ReactNode;
   /** Horizontal sub navigation component for the page */
@@ -219,6 +222,7 @@ class Page extends React.Component<PageProps, PageState> {
 
   render() {
     const {
+      banner,
       breadcrumb,
       isBreadcrumbWidthLimited,
       className,
@@ -289,6 +293,7 @@ class Page extends React.Component<PageProps, PageState> {
     const group = isGrouped ? (
       <PageGroup {...groupProps}>
         {isHorizontalSubnavGrouped && nav}
+        {banner}
         {isBreadcrumbGrouped && crumb}
         {additionalGroupedContent}
       </PageGroup>
@@ -308,6 +313,7 @@ class Page extends React.Component<PageProps, PageState> {
         >
           {group}
           {!isHorizontalSubnavGrouped && nav}
+          {banner}
           {!isBreadcrumbGrouped && crumb}
           {children}
         </Component>

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

@@ -26,7 +26,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -58,7 +58,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -109,7 +109,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"
@@ -141,7 +141,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-button__icon pf-m-start"
+          class="pf-v6-c-button__icon"
         >
           <svg
             aria-hidden="true"