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

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

@@ -26,26 +26,30 @@ exports[`expandable vertical with subsection 1`] = `
             type="button"
           >
             <span
-              class="pf-v6-c-jump-links__toggle-icon"
+              class="pf-v6-c-button__text"
             >
-              <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-jump-links__toggle-icon"
               >
-                <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>
-            <span
-              class="pf-v6-c-jump-links__toggle-text"
-            >
-               Jump to section 
+                <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>
+              <span
+                class="pf-v6-c-jump-links__toggle-text"
+              >
+                 Jump to section 
+              </span>
             </span>
           </button>
         </div>
@@ -74,9 +78,13 @@ exports[`expandable vertical with subsection 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Inactive section
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Inactive section
+                </span>
               </span>
             </a>
           </span>
@@ -96,9 +104,13 @@ exports[`expandable vertical with subsection 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Section with active subsection
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Section with active subsection
+                </span>
               </span>
             </a>
           </span>
@@ -122,9 +134,13 @@ exports[`expandable vertical with subsection 1`] = `
                   href="#"
                 >
                   <span
-                    class="pf-v6-c-jump-links__link-text"
+                    class="pf-v6-c-button__text"
                   >
-                    Active subsection
+                    <span
+                      class="pf-v6-c-jump-links__link-text"
+                    >
+                      Active subsection
+                    </span>
                   </span>
                 </a>
               </span>
@@ -144,9 +160,13 @@ exports[`expandable vertical with subsection 1`] = `
                   href="#"
                 >
                   <span
-                    class="pf-v6-c-jump-links__link-text"
+                    class="pf-v6-c-button__text"
                   >
-                    Inactive subsection
+                    <span
+                      class="pf-v6-c-jump-links__link-text"
+                    >
+                      Inactive subsection
+                    </span>
                   </span>
                 </a>
               </span>
@@ -166,9 +186,13 @@ exports[`expandable vertical with subsection 1`] = `
                   href="#"
                 >
                   <span
-                    class="pf-v6-c-jump-links__link-text"
+                    class="pf-v6-c-button__text"
                   >
-                    Inactive subsection
+                    <span
+                      class="pf-v6-c-jump-links__link-text"
+                    >
+                      Inactive subsection
+                    </span>
                   </span>
                 </a>
               </span>
@@ -190,9 +214,13 @@ exports[`expandable vertical with subsection 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Inactive section
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Inactive section
+                </span>
               </span>
             </a>
           </span>
@@ -212,9 +240,13 @@ exports[`expandable vertical with subsection 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Inactive section
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Inactive section
+                </span>
               </span>
             </a>
           </span>
@@ -255,9 +287,13 @@ exports[`jumplinks centered 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Inactive section
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Inactive section
+                </span>
               </span>
             </a>
           </span>
@@ -278,9 +314,13 @@ exports[`jumplinks centered 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Active section
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Active section
+                </span>
               </span>
             </a>
           </span>
@@ -300,9 +340,13 @@ exports[`jumplinks centered 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Inactive section
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Inactive section
+                </span>
               </span>
             </a>
           </span>
@@ -350,9 +394,13 @@ exports[`jumplinks with label 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Inactive section
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Inactive section
+                </span>
               </span>
             </a>
           </span>
@@ -373,9 +421,13 @@ exports[`jumplinks with label 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Active section
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Active section
+                </span>
               </span>
             </a>
           </span>
@@ -395,9 +447,13 @@ exports[`jumplinks with label 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Inactive section
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Inactive section
+                </span>
               </span>
             </a>
           </span>
@@ -438,9 +494,13 @@ exports[`simple jumplinks 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Inactive section
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Inactive section
+                </span>
               </span>
             </a>
           </span>
@@ -461,9 +521,13 @@ exports[`simple jumplinks 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Active section
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Active section
+                </span>
               </span>
             </a>
           </span>
@@ -483,9 +547,13 @@ exports[`simple jumplinks 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Inactive section
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Inactive section
+                </span>
               </span>
             </a>
           </span>
@@ -533,9 +601,13 @@ exports[`vertical with label 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Inactive section
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Inactive section
+                </span>
               </span>
             </a>
           </span>
@@ -556,9 +628,13 @@ exports[`vertical with label 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Active section
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Active section
+                </span>
               </span>
             </a>
           </span>
@@ -578,9 +654,13 @@ exports[`vertical with label 1`] = `
               href="#"
             >
               <span
-                class="pf-v6-c-jump-links__link-text"
+                class="pf-v6-c-button__text"
               >
-                Inactive section
+                <span
+                  class="pf-v6-c-jump-links__link-text"
+                >
+                  Inactive section
+                </span>
               </span>
             </a>
           </span>

package/src/components/Label/Label.tsx

@@ -238,9 +238,8 @@ export const Label: React.FunctionComponent<LabelProps> = ({
       aria-label={closeBtnAriaLabel || `Close ${children}`}
       {...(isClickableDisabled && { isDisabled: true })}
       {...closeBtnProps}
-    >
-      <TimesIcon />
-    </Button>
+      icon={<TimesIcon />}
+    />
   );
 
   const closeButton = <span className={css(styles.labelActions)}>{closeBtn || defaultCloseButton}</span>;

package/src/components/Label/LabelGroup.tsx

@@ -210,9 +210,8 @@ class LabelGroup extends React.Component<LabelGroupProps, LabelGroupState> {
             onClick={onClick}
             id={`remove_group_${id}`}
             aria-labelledby={`remove_group_${id} ${id}`}
-          >
-            <TimesCircleIcon aria-hidden="true" />
-          </Button>
+            icon={<TimesCircleIcon aria-hidden="true" />}
+          />
         </div>
       );
 

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

@@ -27,19 +27,23 @@ exports[`Label editable label 1`] = `
         data-ouia-safe="true"
         type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 352 512"
-          width="1em"
+        <span
+          class="pf-v6-c-button__icon pf-m-start"
         >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
-        </svg>
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 352 512"
+            width="1em"
+          >
+            <path
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            />
+          </svg>
+        </span>
       </button>
     </span>
   </span>
@@ -161,19 +165,23 @@ exports[`Label label with close button 1`] = `
         data-ouia-safe="true"
         type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 352 512"
-          width="1em"
+        <span
+          class="pf-v6-c-button__icon pf-m-start"
         >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
-        </svg>
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 352 512"
+            width="1em"
+          >
+            <path
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            />
+          </svg>
+        </span>
       </button>
     </span>
   </span>
@@ -206,19 +214,23 @@ exports[`Label label with close button and outline variant 1`] = `
         data-ouia-safe="true"
         type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 352 512"
-          width="1em"
+        <span
+          class="pf-v6-c-button__icon pf-m-start"
         >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
-        </svg>
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 352 512"
+            width="1em"
+          >
+            <path
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            />
+          </svg>
+        </span>
       </button>
     </span>
   </span>

package/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap

@@ -262,19 +262,23 @@ exports[`LabelGroup label group with closable category 1`] = `
         id="remove_group_generated-id"
         type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 512 512"
-          width="1em"
+        <span
+          class="pf-v6-c-button__icon pf-m-start"
         >
-          <path
-            d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
-          />
-        </svg>
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 512 512"
+            width="1em"
+          >
+            <path
+              d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+            />
+          </svg>
+        </span>
       </button>
     </div>
   </div>

package/src/components/LoginPage/LoginForm.tsx

@@ -127,9 +127,8 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
                 variant="control"
                 onClick={() => setPasswordHidden(!passwordHidden)}
                 aria-label={passwordHidden ? showPasswordAriaLabel : hidePasswordAriaLabel}
-              >
-                {passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-              </Button>
+                icon={passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+              />
             </InputGroupItem>
           </InputGroup>
         )}

package/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap

@@ -138,7 +138,11 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
             data-ouia-safe="true"
             type="submit"
           >
-            Log In
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Log In
+            </span>
           </button>
         </div>
       </div>
@@ -258,19 +262,23 @@ exports[`LoginForm LoginForm with show password 1`] = `
               data-ouia-safe="true"
               type="button"
             >
-              <svg
-                aria-hidden="true"
-                class="pf-v6-svg"
-                fill="currentColor"
-                height="1em"
-                role="img"
-                viewBox="0 0 576 512"
-                width="1em"
+              <span
+                class="pf-v6-c-button__icon pf-m-start"
               >
-                <path
-                  d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
-                />
-              </svg>
+                <svg
+                  aria-hidden="true"
+                  class="pf-v6-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 576 512"
+                  width="1em"
+                >
+                  <path
+                    d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"
+                  />
+                </svg>
+              </span>
             </button>
           </div>
         </div>
@@ -293,7 +301,11 @@ exports[`LoginForm LoginForm with show password 1`] = `
             data-ouia-safe="true"
             type="submit"
           >
-            Log In
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Log In
+            </span>
           </button>
         </div>
       </div>
@@ -413,7 +425,11 @@ exports[`LoginForm should render Login form 1`] = `
             data-ouia-safe="true"
             type="submit"
           >
-            Log In
+            <span
+              class="pf-v6-c-button__text"
+            >
+              Log In
+            </span>
           </button>
         </div>
       </div>

package/src/components/LoginPage/examples/LoginPageBasic.tsx

@@ -47,29 +47,19 @@ export const SimpleLoginPage: React.FunctionComponent = () => {
   const socialMediaLoginContent = (
     <React.Fragment>
       <LoginMainFooterLinksItem>
-        <Button variant="plain" aria-label="Login with Google">
-          <GoogleIcon />
-        </Button>
+        <Button variant="plain" aria-label="Login with Google" icon={<GoogleIcon />} />
       </LoginMainFooterLinksItem>
       <LoginMainFooterLinksItem>
-        <Button variant="plain" aria-label="Login with Github">
-          <GithubIcon />
-        </Button>
+        <Button variant="plain" aria-label="Login with Github" icon={<GithubIcon />} />
       </LoginMainFooterLinksItem>
       <LoginMainFooterLinksItem>
-        <Button variant="plain" aria-label="Login with Dropbox">
-          <DropboxIcon />
-        </Button>
+        <Button variant="plain" aria-label="Login with Dropbox" icon={<DropboxIcon />} />
       </LoginMainFooterLinksItem>
       <LoginMainFooterLinksItem>
-        <Button variant="plain" aria-label="Login with Facebook">
-          <FacebookSquareIcon />
-        </Button>
+        <Button variant="plain" aria-label="Login with Facebook" icon={<FacebookSquareIcon />} />
       </LoginMainFooterLinksItem>
       <LoginMainFooterLinksItem>
-        <Button variant="plain" aria-label="Login with Gitlab">
-          <GitlabIcon />
-        </Button>
+        <Button variant="plain" aria-label="Login with Gitlab" icon={<GitlabIcon />} />
       </LoginMainFooterLinksItem>
     </React.Fragment>
   );