diff --git a/packages/react-core/src/components/Checkbox/Checkbox.tsx b/packages/react-core/src/components/Checkbox/Checkbox.tsx
index dab227caceb..79f31b80fb0 100644
--- 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 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, 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 {
inputClassName,
onChange,
isLabelWrapped,
- isLabelBeforeButton,
+ labelPosition = 'end',
isValid,
isDisabled,
isRequired,
@@ -156,7 +156,7 @@ class Checkbox extends React.Component {
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
index 667c2e03562..f2136c936e3 100644
--- 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( );
+test('Renders label before checkbox input if labelPosition is "start"', () => {
+ render( );
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
index 84b0f180cf5..637e485ab46 100644
--- 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 {
/** 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
index ddd9a3e5723..150fe849454 100644
--- 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, '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 = ({
className = '',
label,
labelInfo,
- labelIcon,
+ labelHelp,
isRequired = false,
isInline = false,
hasNoPaddingTop = false,
@@ -51,7 +51,7 @@ export const FormGroup: React.FunctionComponent = ({
const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label';
const labelContent = (
-
+ <>
{label}
{isRequired && (
@@ -60,9 +60,10 @@ export const FormGroup: React.FunctionComponent = ({
{ASTERISK}
)}
- {' '}
- {React.isValidElement(labelIcon) && labelIcon}
-
+
+ <> >
+ {React.isValidElement(labelHelp) && {labelHelp} }
+ >
);
return (
diff --git a/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx b/packages/react-core/src/components/Form/FormGroupLabelHelp.tsx
new file mode 100644
index 00000000000..05fb26c62b2
--- /dev/null
+++ 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 = ({
+ 'aria-label': ariaLabel,
+ className,
+ ...props
+}) => (
+
+
+
+);
+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
index 441f82d52af..d928dd27011 100644
--- 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
-
+
-
+
-
+
-
+
-
+
-
+
-
+
{
const [name, setName] = React.useState('');
@@ -36,7 +35,7 @@ export const FormBasic: React.FunctionComponent = () => {
}
>
- e.preventDefault()}
- aria-describedby="simple-form-name-01"
- className={styles.formGroupLabelHelp}
- >
-
-
+
}
isRequired
diff --git a/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx b/packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx
index be5df5fce6d..3d728b8508c 100644
--- 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 = () => {
@@ -51,15 +50,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
}
>
- e.preventDefault()}
- aria-describedby="form-group-label-info"
- className={styles.formGroupLabelHelp}
- >
-
-
+
}
isRequired
diff --git a/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx b/packages/react-core/src/components/Form/examples/FormLimitWidth.tsx
index 8be09a9d2d7..b5dc906b3f5 100644
--- 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 = () => {