@patternfly/react-core 6.0.0-alpha.44 → 6.0.0-alpha.45

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

@@ -306,7 +306,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                       Username
                     </span>
                   </label>
-                   
+                    
                 </div>
                 <div
                   class="pf-v6-c-form__group-control"
@@ -339,7 +339,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                       First name
                     </span>
                   </label>
-                   
+                    
                 </div>
                 <div
                   class="pf-v6-c-form__group-control"
@@ -372,7 +372,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                       Has words
                     </span>
                   </label>
-                   
+                    
                 </div>
                 <div
                   class="pf-v6-c-form__group-control"

package/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import {
   Form,
   FormGroup,
+  FormGroupLabelHelp,
   FormHelperText,
   HelperText,
   Popover,
   HelperTextItem,
   TextInput
 } from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
@@ -91,15 +91,7 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
 
   const iconPopover = (
     <Popover headerContent={<div>Password Requirements</div>} bodyContent={<div>Password rules</div>}>
-      <button
-        type="button"
-        aria-label="More info for name field"
-        onClick={(e) => e.preventDefault()}
-        aria-describedby="password-field"
-        className="pf-v6-c-form__group-label-help"
-      >
-        <HelpIcon />
-      </button>
+      <FormGroupLabelHelp aria-label="More info for name field" />
     </Popover>
   );
 
@@ -115,7 +107,7 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
     <Form>
       <FormGroup
         label="Password"
-        labelIcon={iconPopover}
+        labelHelp={iconPopover}
         isRequired
         fieldId="password-field"
         {...(ruleLength === 'success' &&

package/src/next/components/Modal/examples/ModalWithForm.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import { Button, Form, FormGroup, Popover, TextInput } from '@patternfly/react-core';
+import { Button, Form, FormGroup, FormGroupLabelHelp, Popover, TextInput } from '@patternfly/react-core';
 import { Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core/next';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 export const ModalWithForm: React.FunctionComponent = () => {
   const [isModalOpen, setModalOpen] = React.useState(false);
@@ -47,7 +45,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
           <Form id="modal-with-form-form">
             <FormGroup
               label="Name"
-              labelIcon={
+              labelHelp={
                 <Popover
                   headerContent={
                     <div>
@@ -75,15 +73,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                     </div>
                   }
                 >
-                  <button
-                    type="button"
-                    aria-label="More info for name field"
-                    onClick={(e) => e.preventDefault()}
-                    aria-describedby="modal-with-form-form-name"
-                    className={formStyles.formGroupLabelHelp}
-                  >
-                    <HelpIcon />
-                  </button>
+                  <FormGroupLabelHelp aria-label="More info for name field" />
                 </Popover>
               }
               isRequired
@@ -100,7 +90,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
             </FormGroup>
             <FormGroup
               label="E-mail"
-              labelIcon={
+              labelHelp={
                 <Popover
                   headerContent={
                     <div>
@@ -124,15 +114,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                     </div>
                   }
                 >
-                  <button
-                    type="button"
-                    aria-label="More info for e-mail field"
-                    onClick={(e) => e.preventDefault()}
-                    aria-describedby="modal-with-form-form-email"
-                    className={formStyles.formGroupLabelHelp}
-                  >
-                    <HelpIcon />
-                  </button>
+                  <FormGroupLabelHelp aria-label="More info for e-mail field" />
                 </Popover>
               }
               isRequired
@@ -149,7 +131,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
             </FormGroup>
             <FormGroup
               label="Address"
-              labelIcon={
+              labelHelp={
                 <Popover
                   headerContent={
                     <div>
@@ -172,15 +154,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
                     </div>
                   }
                 >
-                  <button
-                    type="button"
-                    aria-label="More info for address field"
-                    onClick={(e) => e.preventDefault()}
-                    aria-describedby="modal-with-form-form-address"
-                    className={formStyles.formGroupLabelHelp}
-                  >
-                    <HelpIcon />
-                  </button>
+                  <FormGroupLabelHelp aria-label="More info for address field" />
                 </Popover>
               }
               isRequired