Skip to content

Commit 61a75d8

Browse files
rebeccaalpertcursoragent
rebeccaalpert
and
cursoragent
authored
chore(docs): Replace ActionGroup with ActionList (#12589)
Fixes patternfly/patternfly#8486 Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent ae72908 commit 61a75d8

16 files changed

Lines changed: 250 additions & 183 deletions

File tree

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11
import styles from '@patternfly/react-styles/css/components/Form/form';
22
import { css } from '@patternfly/react-styles';
33

4+
/** ActionGroup has been deprecated, please use ActionList, ActionListGroup, and ActionListItem in a FormGroup instead. */
45
export interface ActionGroupProps extends React.HTMLProps<HTMLDivElement> {
56
/** Anything that can be rendered as ActionGroup content. */
67
children?: React.ReactNode;
78
/** Additional classes added to the ActionGroup. */
89
className?: string;
910
}
1011

12+
/** ActionGroup has been deprecated, please use ActionList, ActionListGroup, and ActionListItem in a FormGroup instead. */
1113
export const ActionGroup: React.FunctionComponent<ActionGroupProps> = ({
1214
children = null,
1315
className = '',

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
2121
isInline?: boolean;
2222
/** Sets the FormGroupControl to be stacked */
2323
isStack?: boolean;
24+
/** Sets the FormGroup action modifier. Used to contain form action buttons. */
25+
isActionGroup?: boolean;
2426
/** Removes top spacer from label. */
2527
hasNoPaddingTop?: boolean;
2628
/** ID of an individual field or a group of multiple fields. Required when a role of "group" or "radiogroup" is passed in.
@@ -47,6 +49,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
4749
isInline = false,
4850
hasNoPaddingTop = false,
4951
isStack = false,
52+
isActionGroup = false,
5053
fieldId,
5154
role,
5255
ouiaId,
@@ -75,7 +78,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
7578

7679
return (
7780
<div
78-
className={css(styles.formGroup, className)}
81+
className={css(styles.formGroup, isActionGroup && styles.modifiers.action, className)}
7982
{...(role && { role })}
8083
{...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })}
8184
{...props}

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

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,15 @@ describe('FormGroup', () => {
3434
expect(screen.getByTestId('form-group-test-id').firstElementChild).toHaveClass('pf-m-no-padding-top');
3535
});
3636

37+
test('should render action form group variant', () => {
38+
render(
39+
<FormGroup isActionGroup data-testid="form-group-test-id">
40+
<button type="submit">Submit</button>
41+
</FormGroup>
42+
);
43+
expect(screen.getByTestId('form-group-test-id')).toHaveClass('pf-m-action');
44+
});
45+
3746
test('should render form group variant with required label', () => {
3847
const { asFragment } = render(
3948
<FormGroup label="label" isRequired fieldId="label-id">

‎packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`FormGroup should render correctly when label is not a string with Child
44
<DocumentFragment>
55
<div
66
class="pf-v6-c-form__group"
7-
data-ouia-component-id="OUIA-Generated-FormGroup-:rm:"
7+
data-ouia-component-id="OUIA-Generated-FormGroup-:ro:"
88
data-ouia-component-type="PF6/FormGroup"
99
data-ouia-safe="true"
1010
>
@@ -78,7 +78,7 @@ exports[`FormGroup should render form group variant with node label 1`] = `
7878
<DocumentFragment>
7979
<div
8080
class="pf-v6-c-form__group"
81-
data-ouia-component-id="OUIA-Generated-FormGroup-:r8:"
81+
data-ouia-component-id="OUIA-Generated-FormGroup-:ra:"
8282
data-ouia-component-type="PF6/FormGroup"
8383
data-ouia-safe="true"
8484
>
@@ -114,7 +114,7 @@ exports[`FormGroup should render form group variant with required label 1`] = `
114114
<DocumentFragment>
115115
<div
116116
class="pf-v6-c-form__group"
117-
data-ouia-component-id="OUIA-Generated-FormGroup-:r6:"
117+
data-ouia-component-id="OUIA-Generated-FormGroup-:r8:"
118118
data-ouia-component-type="PF6/FormGroup"
119119
data-ouia-safe="true"
120120
>
@@ -154,7 +154,7 @@ exports[`FormGroup should render form group variant without label 1`] = `
154154
<DocumentFragment>
155155
<div
156156
class="pf-v6-c-form__group"
157-
data-ouia-component-id="OUIA-Generated-FormGroup-:rk:"
157+
data-ouia-component-id="OUIA-Generated-FormGroup-:rm:"
158158
data-ouia-component-type="PF6/FormGroup"
159159
data-ouia-safe="true"
160160
>
@@ -173,7 +173,7 @@ exports[`FormGroup should render form group with additional label info 1`] = `
173173
<DocumentFragment>
174174
<div
175175
class="pf-v6-c-form__group"
176-
data-ouia-component-id="OUIA-Generated-FormGroup-:ra:"
176+
data-ouia-component-id="OUIA-Generated-FormGroup-:rc:"
177177
data-ouia-component-type="PF6/FormGroup"
178178
data-ouia-safe="true"
179179
>
@@ -218,14 +218,14 @@ exports[`FormGroup should render horizontal form group variant 1`] = `
218218
<DocumentFragment>
219219
<form
220220
class="pf-v6-c-form pf-m-horizontal"
221-
data-ouia-component-id="OUIA-Generated-Form-:re:"
221+
data-ouia-component-id="OUIA-Generated-Form-:rg:"
222222
data-ouia-component-type="PF6/Form"
223223
data-ouia-safe="true"
224224
novalidate=""
225225
>
226226
<div
227227
class="pf-v6-c-form__group"
228-
data-ouia-component-id="OUIA-Generated-FormGroup-:rf:"
228+
data-ouia-component-id="OUIA-Generated-FormGroup-:rh:"
229229
data-ouia-component-type="PF6/FormGroup"
230230
data-ouia-safe="true"
231231
>
@@ -260,14 +260,14 @@ exports[`FormGroup should render stacked horizontal form group variant 1`] = `
260260
<DocumentFragment>
261261
<form
262262
class="pf-v6-c-form pf-m-horizontal"
263-
data-ouia-component-id="OUIA-Generated-Form-:rh:"
263+
data-ouia-component-id="OUIA-Generated-Form-:rj:"
264264
data-ouia-component-type="PF6/Form"
265265
data-ouia-safe="true"
266266
novalidate=""
267267
>
268268
<div
269269
class="pf-v6-c-form__group"
270-
data-ouia-component-id="OUIA-Generated-FormGroup-:ri:"
270+
data-ouia-component-id="OUIA-Generated-FormGroup-:rk:"
271271
data-ouia-component-type="PF6/FormGroup"
272272
data-ouia-safe="true"
273273
>

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ cssPrefix: pf-v6-c-form
66
propComponents:
77
[
88
'ActionGroup',
9+
'ActionList',
10+
'ActionListGroup',
11+
'ActionListItem',
912
'Form',
1013
'FormGroup',
1114
'FormGroupLabelHelp',

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

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ import {
55
TextInput,
66
Checkbox,
77
Popover,
8-
ActionGroup,
8+
ActionList,
9+
ActionListGroup,
10+
ActionListItem,
911
Button,
1012
Radio,
1113
HelperText,
@@ -123,10 +125,18 @@ export const FormBasic: React.FunctionComponent = () => {
123125
<FormGroup fieldId="checkbox01">
124126
<Checkbox label="I'd like updates via email." id="checkbox01" name="checkbox01" aria-label="Update via email" />
125127
</FormGroup>
126-
<ActionGroup>
127-
<Button variant="primary">Submit</Button>
128-
<Button variant="link">Cancel</Button>
129-
</ActionGroup>
128+
<FormGroup isActionGroup>
129+
<ActionList>
130+
<ActionListGroup>
131+
<ActionListItem>
132+
<Button variant="primary">Submit</Button>
133+
</ActionListItem>
134+
<ActionListItem>
135+
<Button variant="link">Cancel</Button>
136+
</ActionListItem>
137+
</ActionListGroup>
138+
</ActionList>
139+
</FormGroup>
130140
</Form>
131141
);
132142
};

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

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,9 @@ import {
77
FormSelect,
88
FormSelectOption,
99
Checkbox,
10-
ActionGroup,
10+
ActionList,
11+
ActionListGroup,
12+
ActionListItem,
1113
Button,
1214
Radio,
1315
HelperText,
@@ -112,10 +114,18 @@ export const FormHorizontal: React.FunctionComponent = () => {
112114
<Radio name="horizontal-inline-radio" label="Central" id="horizontal-inline-radio-02" />
113115
<Radio name="horizontal-inline-radio" label="Pacific" id="horizontal-inline-radio-03" />
114116
</FormGroup>
115-
<ActionGroup>
116-
<Button variant="primary">Submit</Button>
117-
<Button variant="link">Cancel</Button>
118-
</ActionGroup>
117+
<FormGroup isActionGroup>
118+
<ActionList>
119+
<ActionListGroup>
120+
<ActionListItem>
121+
<Button variant="primary">Submit</Button>
122+
</ActionListItem>
123+
<ActionListItem>
124+
<Button variant="link">Cancel</Button>
125+
</ActionListItem>
126+
</ActionListGroup>
127+
</ActionList>
128+
</FormGroup>
119129
</Form>
120130
);
121131
};

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

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,9 @@ import {
55
TextInput,
66
Checkbox,
77
Popover,
8-
ActionGroup,
8+
ActionList,
9+
ActionListGroup,
10+
ActionListItem,
911
Button,
1012
Radio,
1113
HelperText,
@@ -123,10 +125,18 @@ export const FormLimitWidth: React.FunctionComponent = () => {
123125
<FormGroup fieldId="checkbox02">
124126
<Checkbox label="I'd like updates via email." id="checkbox02" name="checkbox02" aria-label="Update via email" />
125127
</FormGroup>
126-
<ActionGroup>
127-
<Button variant="primary">Submit</Button>
128-
<Button variant="link">Cancel</Button>
129-
</ActionGroup>
128+
<FormGroup isActionGroup>
129+
<ActionList>
130+
<ActionListGroup>
131+
<ActionListItem>
132+
<Button variant="primary">Submit</Button>
133+
</ActionListItem>
134+
<ActionListItem>
135+
<Button variant="link">Cancel</Button>
136+
</ActionListItem>
137+
</ActionListGroup>
138+
</ActionList>
139+
</FormGroup>
130140
</Form>
131141
);
132142
};

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

Lines changed: 32 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { useState } from 'react';
22
import {
3-
ActionGroup,
3+
ActionList,
4+
ActionListGroup,
5+
ActionListItem,
46
Button,
57
ButtonType,
68
ButtonVariant,
@@ -89,25 +91,36 @@ export const FormState = () => {
8991
</SelectList>
9092
</Select>
9193

92-
<ActionGroup>
93-
<Button
94-
type={ButtonType.submit}
95-
onClick={(e) => {
96-
e.preventDefault();
94+
<FormGroup isActionGroup>
95+
<ActionList>
96+
<ActionListGroup>
97+
<ActionListItem>
98+
<Button
99+
type={ButtonType.submit}
100+
onClick={(e) => {
101+
e.preventDefault();
97102

98-
if (!values['input-id']) {
99-
setError('input-id', 'Input value is required.');
100-
} else {
101-
alert(`Form submitted with: \n ${JSON.stringify(values)}`);
102-
}
103-
}}
104-
>
105-
Submit
106-
</Button>
107-
<Button variant={ButtonVariant.link} onClick={() => setFormStateExpanded((prevExpanded) => !prevExpanded)}>
108-
{`${formStateExpanded ? 'Hide' : 'Show'} form state`}
109-
</Button>
110-
</ActionGroup>
103+
if (!values['input-id']) {
104+
setError('input-id', 'Input value is required.');
105+
} else {
106+
alert(`Form submitted with: \n ${JSON.stringify(values)}`);
107+
}
108+
}}
109+
>
110+
Submit
111+
</Button>
112+
</ActionListItem>
113+
<ActionListItem>
114+
<Button
115+
variant={ButtonVariant.link}
116+
onClick={() => setFormStateExpanded((prevExpanded) => !prevExpanded)}
117+
>
118+
{`${formStateExpanded ? 'Hide' : 'Show'} form state`}
119+
</Button>
120+
</ActionListItem>
121+
</ActionListGroup>
122+
</ActionList>
123+
</FormGroup>
111124
{formStateExpanded && (
112125
<>
113126
<Divider />

‎packages/react-core/src/components/LoginPage/LoginForm.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useState } from 'react';
2-
import { Form, FormGroup, ActionGroup, FormHelperText } from '../Form';
2+
import { Form, FormGroup, FormHelperText } from '../Form';
33
import { TextInput } from '../TextInput';
44
import { Button } from '../Button';
55
import { Checkbox } from '../Checkbox';
@@ -147,11 +147,9 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
147147
/>
148148
</FormGroup>
149149
)}
150-
<ActionGroup>
151-
<Button variant="primary" type="submit" onClick={onLoginButtonClick} isBlock isDisabled={isLoginButtonDisabled}>
152-
{loginButtonLabel}
153-
</Button>
154-
</ActionGroup>
150+
<Button variant="primary" type="submit" onClick={onLoginButtonClick} isBlock isDisabled={isLoginButtonDisabled}>
151+
{loginButtonLabel}
152+
</Button>
155153
</Form>
156154
);
157155
};

0 commit comments

Comments
 (0)