Updated labelIcon prop name

patternfly · Feb 8, 2024 · 12d4059 · 12d4059
1 parent 9f36447
commit 12d4059
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 121 deletions.
diff --git a/packages/react-core/src/components/Form/FormFieldGroupHeader.tsx b/packages/react-core/src/components/Form/FormFieldGroupHeader.tsx
@@ -2,16 +2,13 @@ import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
 
-// typo - rename to FormFieldGroupHeaderTitleTextObject during breaking change release
-export interface FormFiledGroupHeaderTitleTextObject {
+export interface FormFieldGroupHeaderTitleTextObject {
   /** Title text. */
   text: React.ReactNode;
   /** The applied to the title div for accessibility */
   id: string;
 }
 
-export interface FormFieldGroupHeaderTitleTextObject extends FormFiledGroupHeaderTitleTextObject {}
-
 export interface FormFieldGroupHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Additional classes added to the section */
   className?: string;

diff --git a/packages/react-core/src/components/Form/FormGroup.tsx b/packages/react-core/src/components/Form/FormGroup.tsx
@@ -13,8 +13,8 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
   label?: React.ReactNode;
   /** Additional label information displayed after the label. */
   labelInfo?: React.ReactNode;
-  /** Sets an icon for the label. We recommend using FormGroupLabelHelp element as a help icon button. For providing additional context, host element for Popover  */
-  labelIcon?: React.ReactElement;
+  /** A help button for the label. We recommend using FormGroupLabelHelp element as a help icon button. The help button should be wrapped or linked to our popover component. */
+  labelHelp?: React.ReactElement;
   /** Sets the FormGroup required. */
   isRequired?: boolean;
   /** Sets the FormGroup isInline. */
@@ -38,7 +38,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   className = '',
   label,
   labelInfo,
-  labelIcon,
+  labelHelp,
   isRequired = false,
   isInline = false,
   hasNoPaddingTop = false,
@@ -62,7 +62,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
         )}
       </LabelComponent>
       <>&nbsp;&nbsp;</>
-      {React.isValidElement(labelIcon) && <span className={styles.formGroupLabelHelp}>{labelIcon}</span>}
+      {React.isValidElement(labelHelp) && <span className={styles.formGroupLabelHelp}>{labelHelp}</span>}
     </>
   );
 

diff --git a/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx b/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx
@@ -2,8 +2,22 @@ import React from 'react';
 import { Button, ButtonProps } from '../Button';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 
-export const FormGroupLabelHelp: React.FunctionComponent<ButtonProps> = (props: ButtonProps) => (
-  <Button isInline variant="plain" hasNoPadding {...props}>
+/** A help button to be passed to the FormGroup's labelHelp property. This should be wrapped or linked
+ * to our Popover component.
+ */
+export interface FormGroupLabelHelpProps extends ButtonProps {
+  /** Adds an accessible name for the help button. */
+  'aria-label': string;
+  /** Additional classes added to the help button. */
+  className?: string;
+}
+
+export const FormGroupLabelHelp: React.FunctionComponent<FormGroupLabelHelpProps> = ({
+  'aria-label': ariaLabel,
+  className,
+  ...props
+}) => (
+  <Button aria-label={ariaLabel} className={className} variant="plain" hasNoPadding {...props}>
     <QuestionCircleIcon />
   </Button>
 );

diff --git a/packages/react-core/src/components/Form/examples/Form.md b/packages/react-core/src/components/Form/examples/Form.md
@@ -8,6 +8,7 @@ propComponents:
     'ActionGroup',
     'Form',
     'FormGroup',
+    'FormGroupLabelHelp',
     'FormSection',
     'FormHelperText',
     'FormFieldGroup',
@@ -21,23 +22,6 @@ propComponents:
   ]
 ---
 
-import {
-Button,
-Form,
-FormGroup,
-FormGroupLabelHelp,
-Popover,
-TextInput,
-TextArea,
-FormSelect,
-FormHelperText,
-FormFieldGroup,
-FormFieldGroupHeader,
-FormFieldGroupExpandable,
-Checkbox,
-ActionGroup,
-Radio
-} from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';

diff --git a/packages/react-core/src/components/Form/examples/FormBasic.tsx b/packages/react-core/src/components/Form/examples/FormBasic.tsx
@@ -35,7 +35,7 @@ export const FormBasic: React.FunctionComponent = () => {
     <Form>
       <FormGroup
         label="Full name"
-        labelIcon={
+        labelHelp={
           <Popover
             headerContent={
               <div>
@@ -63,7 +63,7 @@ export const FormBasic: React.FunctionComponent = () => {
               </div>
             }
           >
-            <FormGroupLabelHelp aria-label="More info for name field" aria-describedby="simple-form-name-01" />
+            <FormGroupLabelHelp aria-label="More info for name field" />
           </Popover>
         }
         isRequired

diff --git a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx
@@ -50,7 +50,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
               </div>
             }
           >
-            <FormGroupLabelHelp aria-label="More info for name field" aria-describedby="form-group-label-info" />
+            <FormGroupLabelHelp aria-label="More info for name field" />
           </Popover>
         }
         isRequired

diff --git a/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx
@@ -35,7 +35,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
     <Form isWidthLimited>
       <FormGroup
         label="Full name"
-        labelIcon={
+        labelHelp={
           <Popover
             headerContent={
               <div>
@@ -63,7 +63,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
               </div>
             }
           >
-            <FormGroupLabelHelp aria-label="More info for name field" aria-describedby="simple-form-name-02" />
+            <FormGroupLabelHelp aria-label="More info for name field" />
           </Popover>
         }
         isRequired

diff --git a/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx b/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx
@@ -1,7 +1,14 @@
 import React from 'react';
-import { Modal, ModalVariant, Button, Form, FormGroup, Popover, TextInput } from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import formStyles from '@patternfly/react-styles/css/components/Form/form';
+import {
+  Modal,
+  ModalVariant,
+  Button,
+  Form,
+  FormGroup,
+  FormGroupLabelHelp,
+  Popover,
+  TextInput
+} from '@patternfly/react-core';
 
 export const ModalWithForm: React.FunctionComponent = () => {
   const [isModalOpen, setModalOpen] = React.useState(false);
@@ -47,7 +54,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
         <Form id="modal-with-form-form">
           <FormGroup
             label="Name"
-            labelIcon={
+            labelHelp={
               <Popover
                 headerContent={
                   <div>
@@ -75,15 +82,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 +99,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
           </FormGroup>
           <FormGroup
             label="E-mail"
-            labelIcon={
+            labelHelp={
               <Popover
                 headerContent={
                   <div>
@@ -124,15 +123,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 +140,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
           </FormGroup>
           <FormGroup
             label="Address"
-            labelIcon={
+            labelHelp={
               <Popover
                 headerContent={
                   <div>
@@ -172,15 +163,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

diff --git a/packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx b/packages/react-core/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-v5-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' &&

diff --git a/packages/react-core/src/next/components/Modal/examples/ModalWithForm.tsx b/packages/react-core/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