Consume core Penta updates: Form controls, checkbox, radio (#10016)

* feat(FormGroup): add FormGroupLabelHelp and update examples to use it * docs(FormGroup): recommend using FormGroupLabelHelp * test(FormGroup): update spaces in snapshots * Updated labelIcon prop name * Update prop in example * feat(Checkbox/Radio): replace isLabelBeforeButton flag with labelPosition "start" / "end" * test(Radio): update snapshot to v6 * docs(FormFieldGroupHeader): prop description --------- Co-authored-by: Eric Olkowski <[email protected]>
patternfly · Mar 26, 2024 · 59d2df2 · 59d2df2
1 parent 3214a34
commit 59d2df2
Show file tree

Hide file tree

Showing 21 changed files with 133 additions and 212 deletions.
diff --git a/packages/react-core/src/components/Checkbox/Checkbox.tsx b/packages/react-core/src/components/Checkbox/Checkbox.tsx
@@ -16,8 +16,6 @@ export interface CheckboxProps
   inputClassName?: string;
   /** Flag to indicate whether the checkbox wrapper element is a <label> element for the checkbox input. Will not apply if a component prop (with a value other than a "label") is specified. */
   isLabelWrapped?: boolean;
-  /** Flag to show if the checkbox label is shown before the checkbox input. */
-  isLabelBeforeButton?: boolean;
   /** Flag to show if the checkbox selection is valid or invalid. */
   isValid?: boolean;
   /** Flag to show if the checkbox is disabled. */
@@ -31,6 +29,8 @@ export interface CheckboxProps
   onChange?: (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void;
   /** Label text of the checkbox. */
   label?: React.ReactNode;
+  /** Sets the position of the label. Defaults to 'end' (after the checkbox input). */
+  labelPosition?: 'start' | 'end';
   /** Id of the checkbox. */
   id: string;
   /** Aria-label of the checkbox. */
@@ -85,7 +85,7 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
       inputClassName,
       onChange,
       isLabelWrapped,
-      isLabelBeforeButton,
+      labelPosition = 'end',
       isValid,
       isDisabled,
       isRequired,
@@ -156,7 +156,7 @@ class Checkbox extends React.Component<CheckboxProps, CheckboxState> {
         className={css(styles.check, !label && styles.modifiers.standalone, className)}
         htmlFor={wrapWithLabel ? props.id : undefined}
       >
-        {isLabelBeforeButton ? (
+        {labelPosition === 'start' ? (
           <>
             {labelRendered}
             {inputRendered}

diff --git a/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx b/packages/react-core/src/components/Checkbox/__tests__/Checkbox.test.tsx
@@ -263,8 +263,8 @@ test('Renders with span element around the inner label text if component is set
   expect(screen.getByText(labelText).tagName).toBe('SPAN');
 });
 
-test('Renders label before checkbox input if isLabelBeforeButton is provided', () => {
-  render(<Checkbox id="test-id" isLabelBeforeButton label={'test checkbox label'} />);
+test('Renders label before checkbox input if labelPosition is "start"', () => {
+  render(<Checkbox id="test-id" labelPosition="start" label={'test checkbox label'} />);
 
   const wrapper = screen.getByRole('checkbox').parentElement!;
 

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 */
+  /** The id 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. 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,
@@ -51,7 +51,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label';
 
   const labelContent = (
-    <React.Fragment>
+    <>
       <LabelComponent className={css(styles.formLabel)} {...(!isGroupOrRadioGroup && { htmlFor: fieldId })}>
         <span className={css(styles.formLabelText)}>{label}</span>
         {isRequired && (
@@ -60,9 +60,10 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
             {ASTERISK}
           </span>
         )}
-      </LabelComponent>{' '}
-      {React.isValidElement(labelIcon) && labelIcon}
-    </React.Fragment>
+      </LabelComponent>
+      <>&nbsp;&nbsp;</>
+      {React.isValidElement(labelHelp) && <span className={styles.formGroupLabelHelp}>{labelHelp}</span>}
+    </>
   );
 
   return (

diff --git a/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx b/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Button, ButtonProps } from '../Button';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+
+/** 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>
+);
+FormGroupLabelHelp.displayName = 'FormGroupLabelHelp';
diff --git a/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap b/packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`FormGroup should render correctly when label is not a string with Child
           </div>
         </span>
       </label>
-       
+        
     </div>
     <div
       class="pf-v6-c-form__group-control"
@@ -55,7 +55,7 @@ exports[`FormGroup should render default form group variant 1`] = `
           label
         </span>
       </label>
-       
+        
     </div>
     <div
       class="pf-v6-c-form__group-control"
@@ -88,7 +88,7 @@ exports[`FormGroup should render form group variant with node label 1`] = `
           </h1>
         </span>
       </label>
-       
+        
     </div>
     <div
       class="pf-v6-c-form__group-control"
@@ -125,7 +125,7 @@ exports[`FormGroup should render form group variant with required label 1`] = `
            *
         </span>
       </label>
-       
+        
     </div>
     <div
       class="pf-v6-c-form__group-control"
@@ -177,7 +177,7 @@ exports[`FormGroup should render form group with additonal label info 1`] = `
             </h1>
           </span>
         </label>
-         
+          
       </div>
       <div
         class="pf-v6-c-form__group-label-info"
@@ -218,7 +218,7 @@ exports[`FormGroup should render horizontal form group variant 1`] = `
             label
           </span>
         </label>
-         
+          
       </div>
       <div
         class="pf-v6-c-form__group-control"
@@ -254,7 +254,7 @@ exports[`FormGroup should render stacked horizontal form group variant 1`] = `
             label
           </span>
         </label>
-         
+          
       </div>
       <div
         class="pf-v6-c-form__group-control pf-m-stack"

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,22 +22,6 @@ propComponents:
   ]
 ---
 
-import {
-Button,
-Form,
-FormGroup,
-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
@@ -10,10 +10,9 @@ import {
   Radio,
   HelperText,
   HelperTextItem,
-  FormHelperText
+  FormHelperText,
+  FormGroupLabelHelp
 } from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import styles from '@patternfly/react-styles/css/components/Form/form';
 
 export const FormBasic: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
@@ -36,7 +35,7 @@ export const FormBasic: React.FunctionComponent = () => {
     <Form>
       <FormGroup
         label="Full name"
-        labelIcon={
+        labelHelp={
           <Popover
             headerContent={
               <div>
@@ -64,15 +63,7 @@ export const FormBasic: React.FunctionComponent = () => {
               </div>
             }
           >
-            <button
-              type="button"
-              aria-label="More info for name field"
-              onClick={(e) => e.preventDefault()}
-              aria-describedby="simple-form-name-01"
-              className={styles.formGroupLabelHelp}
-            >
-              <HelpIcon />
-            </button>
+            <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
@@ -6,10 +6,9 @@ import {
   Popover,
   HelperText,
   HelperTextItem,
-  FormHelperText
+  FormHelperText,
+  FormGroupLabelHelp
 } from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import styles from '@patternfly/react-styles/css/components/Form/form';
 
 export const FormGroupLabelInfo: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
@@ -23,7 +22,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
       <FormGroup
         label="Full name"
         labelInfo="Additional label info"
-        labelIcon={
+        labelHelp={
           <Popover
             headerContent={
               <div>
@@ -51,15 +50,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
               </div>
             }
           >
-            <button
-              type="button"
-              aria-label="More info for name field"
-              onClick={(e) => e.preventDefault()}
-              aria-describedby="form-group-label-info"
-              className={styles.formGroupLabelHelp}
-            >
-              <HelpIcon />
-            </button>
+            <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
@@ -10,10 +10,9 @@ import {
   Radio,
   HelperText,
   HelperTextItem,
-  FormHelperText
+  FormHelperText,
+  FormGroupLabelHelp
 } from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import styles from '@patternfly/react-styles/css/components/Form/form';
 
 export const FormLimitWidth: React.FunctionComponent = () => {
   const [name, setName] = React.useState('');
@@ -36,7 +35,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
     <Form isWidthLimited>
       <FormGroup
         label="Full name"
-        labelIcon={
+        labelHelp={
           <Popover
             headerContent={
               <div>
@@ -64,15 +63,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
               </div>
             }
           >
-            <button
-              type="button"
-              aria-label="More info for name field"
-              onClick={(e) => e.preventDefault()}
-              aria-describedby="simple-form-name-02"
-              className={styles.formGroupLabelHelp}
-            >
-              <HelpIcon />
-            </button>
+            <FormGroupLabelHelp aria-label="More info for name field" />
           </Popover>
         }
         isRequired

diff --git a/packages/react-core/src/components/Form/index.ts b/packages/react-core/src/components/Form/index.ts
@@ -5,6 +5,7 @@ export * from './FormFieldGroup';
 export * from './FormFieldGroupExpandable';
 export * from './FormFieldGroupHeader';
 export * from './FormGroup';
+export * from './FormGroupLabelHelp';
 export * from './FormHelperText';
 export * from './FormSection';
 export * from './FormContext';