Skip to content

Commit 12d4059

Browse files
author
Eric Olkowski
committed
Updated labelIcon prop name
1 parent 9f36447 commit 12d4059

File tree

11 files changed

+56
-121
lines changed

11 files changed

+56
-121
lines changed

‎packages/react-core/src/components/Form/FormFieldGroupHeader.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,13 @@ import * as React from 'react';
22
import styles from '@patternfly/react-styles/css/components/Form/form';
33
import { css } from '@patternfly/react-styles';
44

5-
// typo - rename to FormFieldGroupHeaderTitleTextObject during breaking change release
6-
export interface FormFiledGroupHeaderTitleTextObject {
5+
export interface FormFieldGroupHeaderTitleTextObject {
76
/** Title text. */
87
text: React.ReactNode;
98
/** The applied to the title div for accessibility */
109
id: string;
1110
}
1211

13-
export interface FormFieldGroupHeaderTitleTextObject extends FormFiledGroupHeaderTitleTextObject {}
14-
1512
export interface FormFieldGroupHeaderProps extends React.HTMLProps<HTMLDivElement> {
1613
/** Additional classes added to the section */
1714
className?: string;

‎packages/react-core/src/components/Form/FormGroup.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,8 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
1313
label?: React.ReactNode;
1414
/** Additional label information displayed after the label. */
1515
labelInfo?: React.ReactNode;
16-
/** Sets an icon for the label. We recommend using FormGroupLabelHelp element as a help icon button. For providing additional context, host element for Popover */
17-
labelIcon?: React.ReactElement;
16+
/** 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. */
17+
labelHelp?: React.ReactElement;
1818
/** Sets the FormGroup required. */
1919
isRequired?: boolean;
2020
/** Sets the FormGroup isInline. */
@@ -38,7 +38,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
3838
className = '',
3939
label,
4040
labelInfo,
41-
labelIcon,
41+
labelHelp,
4242
isRequired = false,
4343
isInline = false,
4444
hasNoPaddingTop = false,
@@ -62,7 +62,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
6262
)}
6363
</LabelComponent>
6464
<>&nbsp;&nbsp;</>
65-
{React.isValidElement(labelIcon) && <span className={styles.formGroupLabelHelp}>{labelIcon}</span>}
65+
{React.isValidElement(labelHelp) && <span className={styles.formGroupLabelHelp}>{labelHelp}</span>}
6666
</>
6767
);
6868

‎packages/react-core/src/components/Form/FormGroupLabelHelp.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,22 @@ import React from 'react';
22
import { Button, ButtonProps } from '../Button';
33
import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
44

5-
export const FormGroupLabelHelp: React.FunctionComponent<ButtonProps> = (props: ButtonProps) => (
6-
<Button isInline variant="plain" hasNoPadding {...props}>
5+
/** A help button to be passed to the FormGroup's labelHelp property. This should be wrapped or linked
6+
* to our Popover component.
7+
*/
8+
export interface FormGroupLabelHelpProps extends ButtonProps {
9+
/** Adds an accessible name for the help button. */
10+
'aria-label': string;
11+
/** Additional classes added to the help button. */
12+
className?: string;
13+
}
14+
15+
export const FormGroupLabelHelp: React.FunctionComponent<FormGroupLabelHelpProps> = ({
16+
'aria-label': ariaLabel,
17+
className,
18+
...props
19+
}) => (
20+
<Button aria-label={ariaLabel} className={className} variant="plain" hasNoPadding {...props}>
721
<QuestionCircleIcon />
822
</Button>
923
);

‎packages/react-core/src/components/Form/examples/Form.md‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ propComponents:
88
'ActionGroup',
99
'Form',
1010
'FormGroup',
11+
'FormGroupLabelHelp',
1112
'FormSection',
1213
'FormHelperText',
1314
'FormFieldGroup',
@@ -21,23 +22,6 @@ propComponents:
2122
]
2223
---
2324

24-
import {
25-
Button,
26-
Form,
27-
FormGroup,
28-
FormGroupLabelHelp,
29-
Popover,
30-
TextInput,
31-
TextArea,
32-
FormSelect,
33-
FormHelperText,
34-
FormFieldGroup,
35-
FormFieldGroupHeader,
36-
FormFieldGroupExpandable,
37-
Checkbox,
38-
ActionGroup,
39-
Radio
40-
} from '@patternfly/react-core';
4125
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
4226
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
4327
import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';

‎packages/react-core/src/components/Form/examples/FormBasic.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const FormBasic: React.FunctionComponent = () => {
3535
<Form>
3636
<FormGroup
3737
label="Full name"
38-
labelIcon={
38+
labelHelp={
3939
<Popover
4040
headerContent={
4141
<div>
@@ -63,7 +63,7 @@ export const FormBasic: React.FunctionComponent = () => {
6363
</div>
6464
}
6565
>
66-
<FormGroupLabelHelp aria-label="More info for name field" aria-describedby="simple-form-name-01" />
66+
<FormGroupLabelHelp aria-label="More info for name field" />
6767
</Popover>
6868
}
6969
isRequired

‎packages/react-core/src/components/Form/examples/FormGroupLabelInfo.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ export const FormGroupLabelInfo: React.FunctionComponent = () => {
5050
</div>
5151
}
5252
>
53-
<FormGroupLabelHelp aria-label="More info for name field" aria-describedby="form-group-label-info" />
53+
<FormGroupLabelHelp aria-label="More info for name field" />
5454
</Popover>
5555
}
5656
isRequired

‎packages/react-core/src/components/Form/examples/FormLimitWidth.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
3535
<Form isWidthLimited>
3636
<FormGroup
3737
label="Full name"
38-
labelIcon={
38+
labelHelp={
3939
<Popover
4040
headerContent={
4141
<div>
@@ -63,7 +63,7 @@ export const FormLimitWidth: React.FunctionComponent = () => {
6363
</div>
6464
}
6565
>
66-
<FormGroupLabelHelp aria-label="More info for name field" aria-describedby="simple-form-name-02" />
66+
<FormGroupLabelHelp aria-label="More info for name field" />
6767
</Popover>
6868
}
6969
isRequired

‎packages/react-core/src/components/Modal/examples/ModalWithForm.tsx‎

Lines changed: 16 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,14 @@
11
import React from 'react';
2-
import { Modal, ModalVariant, Button, Form, FormGroup, Popover, TextInput } from '@patternfly/react-core';
3-
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
4-
import formStyles from '@patternfly/react-styles/css/components/Form/form';
2+
import {
3+
Modal,
4+
ModalVariant,
5+
Button,
6+
Form,
7+
FormGroup,
8+
FormGroupLabelHelp,
9+
Popover,
10+
TextInput
11+
} from '@patternfly/react-core';
512

613
export const ModalWithForm: React.FunctionComponent = () => {
714
const [isModalOpen, setModalOpen] = React.useState(false);
@@ -47,7 +54,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
4754
<Form id="modal-with-form-form">
4855
<FormGroup
4956
label="Name"
50-
labelIcon={
57+
labelHelp={
5158
<Popover
5259
headerContent={
5360
<div>
@@ -75,15 +82,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
7582
</div>
7683
}
7784
>
78-
<button
79-
type="button"
80-
aria-label="More info for name field"
81-
onClick={(e) => e.preventDefault()}
82-
aria-describedby="modal-with-form-form-name"
83-
className={formStyles.formGroupLabelHelp}
84-
>
85-
<HelpIcon />
86-
</button>
85+
<FormGroupLabelHelp aria-label="More info for name field" />
8786
</Popover>
8887
}
8988
isRequired
@@ -100,7 +99,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
10099
</FormGroup>
101100
<FormGroup
102101
label="E-mail"
103-
labelIcon={
102+
labelHelp={
104103
<Popover
105104
headerContent={
106105
<div>
@@ -124,15 +123,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
124123
</div>
125124
}
126125
>
127-
<button
128-
type="button"
129-
aria-label="More info for e-mail field"
130-
onClick={(e) => e.preventDefault()}
131-
aria-describedby="modal-with-form-form-email"
132-
className={formStyles.formGroupLabelHelp}
133-
>
134-
<HelpIcon />
135-
</button>
126+
<FormGroupLabelHelp aria-label="More info for e-mail field" />
136127
</Popover>
137128
}
138129
isRequired
@@ -149,7 +140,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
149140
</FormGroup>
150141
<FormGroup
151142
label="Address"
152-
labelIcon={
143+
labelHelp={
153144
<Popover
154145
headerContent={
155146
<div>
@@ -172,15 +163,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
172163
</div>
173164
}
174165
>
175-
<button
176-
type="button"
177-
aria-label="More info for address field"
178-
onClick={(e) => e.preventDefault()}
179-
aria-describedby="modal-with-form-form-address"
180-
className={formStyles.formGroupLabelHelp}
181-
>
182-
<HelpIcon />
183-
</button>
166+
<FormGroupLabelHelp aria-label="More info for address field" />
184167
</Popover>
185168
}
186169
isRequired

‎packages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import React from 'react';
22
import {
33
Form,
44
FormGroup,
5+
FormGroupLabelHelp,
56
FormHelperText,
67
HelperText,
78
Popover,
89
HelperTextItem,
910
TextInput
1011
} from '@patternfly/react-core';
11-
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
1212
import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
1313
import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
1414
import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
@@ -91,15 +91,7 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
9191

9292
const iconPopover = (
9393
<Popover headerContent={<div>Password Requirements</div>} bodyContent={<div>Password rules</div>}>
94-
<button
95-
type="button"
96-
aria-label="More info for name field"
97-
onClick={(e) => e.preventDefault()}
98-
aria-describedby="password-field"
99-
className="pf-v5-c-form__group-label-help"
100-
>
101-
<HelpIcon />
102-
</button>
94+
<FormGroupLabelHelp aria-label="More info for name field" />
10395
</Popover>
10496
);
10597

@@ -115,7 +107,7 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
115107
<Form>
116108
<FormGroup
117109
label="Password"
118-
labelIcon={iconPopover}
110+
labelHelp={iconPopover}
119111
isRequired
120112
fieldId="password-field"
121113
{...(ruleLength === 'success' &&

‎packages/react-core/src/next/components/Modal/examples/ModalWithForm.tsx‎

Lines changed: 7 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
import React from 'react';
2-
import { Button, Form, FormGroup, Popover, TextInput } from '@patternfly/react-core';
2+
import { Button, Form, FormGroup, FormGroupLabelHelp, Popover, TextInput } from '@patternfly/react-core';
33
import { Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core/next';
4-
import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
5-
import formStyles from '@patternfly/react-styles/css/components/Form/form';
64

75
export const ModalWithForm: React.FunctionComponent = () => {
86
const [isModalOpen, setModalOpen] = React.useState(false);
@@ -47,7 +45,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
4745
<Form id="modal-with-form-form">
4846
<FormGroup
4947
label="Name"
50-
labelIcon={
48+
labelHelp={
5149
<Popover
5250
headerContent={
5351
<div>
@@ -75,15 +73,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
7573
</div>
7674
}
7775
>
78-
<button
79-
type="button"
80-
aria-label="More info for name field"
81-
onClick={(e) => e.preventDefault()}
82-
aria-describedby="modal-with-form-form-name"
83-
className={formStyles.formGroupLabelHelp}
84-
>
85-
<HelpIcon />
86-
</button>
76+
<FormGroupLabelHelp aria-label="More info for name field" />
8777
</Popover>
8878
}
8979
isRequired
@@ -100,7 +90,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
10090
</FormGroup>
10191
<FormGroup
10292
label="E-mail"
103-
labelIcon={
93+
labelHelp={
10494
<Popover
10595
headerContent={
10696
<div>
@@ -124,15 +114,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
124114
</div>
125115
}
126116
>
127-
<button
128-
type="button"
129-
aria-label="More info for e-mail field"
130-
onClick={(e) => e.preventDefault()}
131-
aria-describedby="modal-with-form-form-email"
132-
className={formStyles.formGroupLabelHelp}
133-
>
134-
<HelpIcon />
135-
</button>
117+
<FormGroupLabelHelp aria-label="More info for e-mail field" />
136118
</Popover>
137119
}
138120
isRequired
@@ -149,7 +131,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
149131
</FormGroup>
150132
<FormGroup
151133
label="Address"
152-
labelIcon={
134+
labelHelp={
153135
<Popover
154136
headerContent={
155137
<div>
@@ -172,15 +154,7 @@ export const ModalWithForm: React.FunctionComponent = () => {
172154
</div>
173155
}
174156
>
175-
<button
176-
type="button"
177-
aria-label="More info for address field"
178-
onClick={(e) => e.preventDefault()}
179-
aria-describedby="modal-with-form-form-address"
180-
className={formStyles.formGroupLabelHelp}
181-
>
182-
<HelpIcon />
183-
</button>
157+
<FormGroupLabelHelp aria-label="More info for address field" />
184158
</Popover>
185159
}
186160
isRequired

0 commit comments

Comments
 (0)