Skip to content

Commit 42534ef

Browse files
rebeccaalpertcursoragent
rebeccaalpert
and
cursoragent
committed
chore(docs): Replace ActionGroup with ActionList
Fixes patternfly/patternfly#8486 Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 8c89c01 commit 42534ef

12 files changed

Lines changed: 179 additions & 97 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+
/** @deprecated Use ActionList, ActionListGroup, and ActionListItem 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+
/** @deprecated Use ActionList, ActionListGroup, and ActionListItem instead. */
1113
export const ActionGroup: React.FunctionComponent<ActionGroupProps> = ({
1214
children = null,
1315
className = '',

‎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: 13 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,16 @@ 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+
<ActionList>
129+
<ActionListGroup>
130+
<ActionListItem>
131+
<Button variant="primary">Submit</Button>
132+
</ActionListItem>
133+
<ActionListItem>
134+
<Button variant="link">Cancel</Button>
135+
</ActionListItem>
136+
</ActionListGroup>
137+
</ActionList>
130138
</Form>
131139
);
132140
};

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

Lines changed: 13 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,16 @@ 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+
<ActionList>
118+
<ActionListGroup>
119+
<ActionListItem>
120+
<Button variant="primary">Submit</Button>
121+
</ActionListItem>
122+
<ActionListItem>
123+
<Button variant="link">Cancel</Button>
124+
</ActionListItem>
125+
</ActionListGroup>
126+
</ActionList>
119127
</Form>
120128
);
121129
};

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

Lines changed: 13 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,16 @@ 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+
<ActionList>
129+
<ActionListGroup>
130+
<ActionListItem>
131+
<Button variant="primary">Submit</Button>
132+
</ActionListItem>
133+
<ActionListItem>
134+
<Button variant="link">Cancel</Button>
135+
</ActionListItem>
136+
</ActionListGroup>
137+
</ActionList>
130138
</Form>
131139
);
132140
};

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

Lines changed: 30 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,
@@ -88,25 +90,34 @@ export const FormState = () => {
8890
</SelectList>
8991
</Select>
9092

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

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

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

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { useState } from 'react';
2-
import { Form, FormGroup, ActionGroup, FormHelperText } from '../Form';
2+
import { Form, FormGroup, FormHelperText } from '../Form';
3+
import { ActionList, ActionListGroup, ActionListItem } from '../ActionList';
34
import { TextInput } from '../TextInput';
45
import { Button } from '../Button';
56
import { Checkbox } from '../Checkbox';
@@ -147,11 +148,21 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
147148
/>
148149
</FormGroup>
149150
)}
150-
<ActionGroup>
151-
<Button variant="primary" type="submit" onClick={onLoginButtonClick} isBlock isDisabled={isLoginButtonDisabled}>
152-
{loginButtonLabel}
153-
</Button>
154-
</ActionGroup>
151+
<ActionList>
152+
<ActionListGroup>
153+
<ActionListItem>
154+
<Button
155+
variant="primary"
156+
type="submit"
157+
onClick={onLoginButtonClick}
158+
isBlock
159+
isDisabled={isLoginButtonDisabled}
160+
>
161+
{loginButtonLabel}
162+
</Button>
163+
</ActionListItem>
164+
</ActionListGroup>
165+
</ActionList>
155166
</Form>
156167
);
157168
};

‎packages/react-core/src/components/LoginPage/__tests__/__snapshots__/LoginForm.test.tsx.snap‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -134,13 +134,13 @@ exports[`LoginForm LoginForm with rememberMeLabel 1`] = `
134134
</div>
135135
</div>
136136
<div
137-
class="pf-v6-c-form__group pf-m-action"
137+
class="pf-v6-c-action-list"
138138
>
139139
<div
140-
class="pf-v6-c-form__group-control"
140+
class="pf-v6-c-action-list__group"
141141
>
142142
<div
143-
class="pf-v6-c-form__actions"
143+
class="pf-v6-c-action-list__item"
144144
>
145145
<button
146146
class="pf-v6-c-button pf-m-primary pf-m-block"
@@ -304,13 +304,13 @@ exports[`LoginForm LoginForm with show password 1`] = `
304304
</div>
305305
</div>
306306
<div
307-
class="pf-v6-c-form__group pf-m-action"
307+
class="pf-v6-c-action-list"
308308
>
309309
<div
310-
class="pf-v6-c-form__group-control"
310+
class="pf-v6-c-action-list__group"
311311
>
312312
<div
313-
class="pf-v6-c-form__actions"
313+
class="pf-v6-c-action-list__item"
314314
>
315315
<button
316316
class="pf-v6-c-button pf-m-primary pf-m-block"
@@ -436,13 +436,13 @@ exports[`LoginForm should render Login form 1`] = `
436436
</div>
437437
</div>
438438
<div
439-
class="pf-v6-c-form__group pf-m-action"
439+
class="pf-v6-c-action-list"
440440
>
441441
<div
442-
class="pf-v6-c-form__group-control"
442+
class="pf-v6-c-action-list__group"
443443
>
444444
<div
445-
class="pf-v6-c-form__actions"
445+
class="pf-v6-c-action-list__item"
446446
>
447447
<button
448448
class="pf-v6-c-button pf-m-primary pf-m-block"

‎packages/react-core/src/components/SearchInput/AdvancedSearchMenu.tsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { useEffect, useRef, useState } from 'react';
22
import { Button } from '../Button';
3-
import { ActionGroup, Form, FormGroup } from '../Form';
3+
import { ActionList, ActionListGroup, ActionListItem } from '../ActionList';
4+
import { Form, FormGroup } from '../Form';
45
import { TextInput } from '../TextInput';
56
import { useSSRSafeId } from '../../helpers';
67
import { SearchInputSearchAttribute } from './SearchInput';
@@ -202,16 +203,22 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
202203
<Form>
203204
{buildFormGroups()}
204205
{formAdditionalItems ? formAdditionalItems : null}
205-
<ActionGroup>
206-
<Button variant="primary" type="submit" onClick={onSearchHandler} isDisabled={!value}>
207-
{submitSearchButtonLabel}
208-
</Button>
209-
{!!onClear && (
210-
<Button variant="link" type="reset" onClick={onClear}>
211-
{resetButtonLabel}
212-
</Button>
213-
)}
214-
</ActionGroup>
206+
<ActionList>
207+
<ActionListGroup>
208+
<ActionListItem>
209+
<Button variant="primary" type="submit" onClick={onSearchHandler} isDisabled={!value}>
210+
{submitSearchButtonLabel}
211+
</Button>
212+
</ActionListItem>
213+
{!!onClear && (
214+
<ActionListItem>
215+
<Button variant="link" type="reset" onClick={onClear}>
216+
{resetButtonLabel}
217+
</Button>
218+
</ActionListItem>
219+
)}
220+
</ActionListGroup>
221+
</ActionList>
215222
</Form>
216223
</PanelMainBody>
217224
</PanelMain>

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -436,13 +436,13 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
436436
</div>
437437
</div>
438438
<div
439-
class="pf-v6-c-form__group pf-m-action"
439+
class="pf-v6-c-action-list"
440440
>
441441
<div
442-
class="pf-v6-c-form__group-control"
442+
class="pf-v6-c-action-list__group"
443443
>
444444
<div
445-
class="pf-v6-c-form__actions"
445+
class="pf-v6-c-action-list__item"
446446
>
447447
<button
448448
class="pf-v6-c-button pf-m-primary"
@@ -454,6 +454,10 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
454454
Search
455455
</span>
456456
</button>
457+
</div>
458+
<div
459+
class="pf-v6-c-action-list__item"
460+
>
457461
<button
458462
class="pf-v6-c-button pf-m-link"
459463
type="reset"

0 commit comments

Comments
 (0)