Skip to content

chore(docs): Replace ActionGroup with ActionList #12589

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rebeccaalpert wants to merge 2 commits into
base: main
Choose a base branch
from
Open

chore(docs): Replace ActionGroup with ActionList #12589

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3b03b28
chore(docs): Replace ActionGroup with ActionList
rebeccaalpert Jul 21, 2026
b82d4cd
Add form group wrapper from Core
rebeccaalpert Jul 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/react-core/src/components/Form/ActionGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
import styles from '@patternfly/react-styles/css/components/Form/form';
import { css } from '@patternfly/react-styles';

/** @deprecated Use ActionList, ActionListGroup, and ActionListItem in a FormGroup instead. */

@kmcfaul kmcfaul Jul 28, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This gets transferred directly to text on the docs, so we should reword this to not use @deprecated (like "ActionGroup has been deprecated, please use...").

export interface ActionGroupProps extends React.HTMLProps<HTMLDivElement> {
/** Anything that can be rendered as ActionGroup content. */
children?: React.ReactNode;
/** Additional classes added to the ActionGroup. */
className?: string;
}

/** @deprecated Use ActionList, ActionListGroup, and ActionListItem in a FormGroup instead. */
export const ActionGroup: React.FunctionComponent<ActionGroupProps> = ({
children = null,
className = '',
Expand Down
5 changes: 4 additions & 1 deletion packages/react-core/src/components/Form/FormGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'l
isInline?: boolean;
/** Sets the FormGroupControl to be stacked */
isStack?: boolean;
/** Sets the FormGroup action modifier. Used to contain form action buttons. */
isAction?: boolean;

@kmcfaul kmcfaul Jul 28, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know isAction better matches the modifier name, but would isActionGroup make more semantic sense? I'm fine leaving as is, but curious of others' thoughts.

/** Removes top spacer from label. */
hasNoPaddingTop?: boolean;
/** ID of an individual field or a group of multiple fields. Required when a role of "group" or "radiogroup" is passed in.
Expand All @@ -47,6 +49,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
isInline = false,
hasNoPaddingTop = false,
isStack = false,
isAction = false,
fieldId,
role,
ouiaId,
Expand Down Expand Up @@ -75,7 +78,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({

return (
<div
className={css(styles.formGroup, className)}
className={css(styles.formGroup, isAction && styles.modifiers.action, className)}
{...(role && { role })}
{...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })}
{...props}
Expand Down
9 changes: 9 additions & 0 deletions packages/react-core/src/components/Form/__tests__/FormGroup.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,15 @@ describe('FormGroup', () => {
expect(screen.getByTestId('form-group-test-id').firstElementChild).toHaveClass('pf-m-no-padding-top');
});

test('should render action form group variant', () => {
render(
<FormGroup isAction data-testid="form-group-test-id">
<button type="submit">Submit</button>
</FormGroup>
);
expect(screen.getByTestId('form-group-test-id')).toHaveClass('pf-m-action');
});

test('should render form group variant with required label', () => {
const { asFragment } = render(
<FormGroup label="label" isRequired fieldId="label-id">
Expand Down
18 changes: 9 additions & 9 deletions packages/react-core/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`FormGroup should render correctly when label is not a string with Child
<DocumentFragment>
<div
class="pf-v6-c-form__group"
data-ouia-component-id="OUIA-Generated-FormGroup-:rm:"
data-ouia-component-id="OUIA-Generated-FormGroup-:ro:"
data-ouia-component-type="PF6/FormGroup"
data-ouia-safe="true"
>
Expand Down Expand Up @@ -78,7 +78,7 @@ exports[`FormGroup should render form group variant with node label 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-form__group"
data-ouia-component-id="OUIA-Generated-FormGroup-:r8:"
data-ouia-component-id="OUIA-Generated-FormGroup-:ra:"
data-ouia-component-type="PF6/FormGroup"
data-ouia-safe="true"
>
Expand Down Expand Up @@ -114,7 +114,7 @@ exports[`FormGroup should render form group variant with required label 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-form__group"
data-ouia-component-id="OUIA-Generated-FormGroup-:r6:"
data-ouia-component-id="OUIA-Generated-FormGroup-:r8:"
data-ouia-component-type="PF6/FormGroup"
data-ouia-safe="true"
>
Expand Down Expand Up @@ -154,7 +154,7 @@ exports[`FormGroup should render form group variant without label 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-form__group"
data-ouia-component-id="OUIA-Generated-FormGroup-:rk:"
data-ouia-component-id="OUIA-Generated-FormGroup-:rm:"
data-ouia-component-type="PF6/FormGroup"
data-ouia-safe="true"
>
Expand All @@ -173,7 +173,7 @@ exports[`FormGroup should render form group with additional label info 1`] = `
<DocumentFragment>
<div
class="pf-v6-c-form__group"
data-ouia-component-id="OUIA-Generated-FormGroup-:ra:"
data-ouia-component-id="OUIA-Generated-FormGroup-:rc:"
data-ouia-component-type="PF6/FormGroup"
data-ouia-safe="true"
>
Expand Down Expand Up @@ -218,14 +218,14 @@ exports[`FormGroup should render horizontal form group variant 1`] = `
<DocumentFragment>
<form
class="pf-v6-c-form pf-m-horizontal"
data-ouia-component-id="OUIA-Generated-Form-:re:"
data-ouia-component-id="OUIA-Generated-Form-:rg:"
data-ouia-component-type="PF6/Form"
data-ouia-safe="true"
novalidate=""
>
<div
class="pf-v6-c-form__group"
data-ouia-component-id="OUIA-Generated-FormGroup-:rf:"
data-ouia-component-id="OUIA-Generated-FormGroup-:rh:"
data-ouia-component-type="PF6/FormGroup"
data-ouia-safe="true"
>
Expand Down Expand Up @@ -260,14 +260,14 @@ exports[`FormGroup should render stacked horizontal form group variant 1`] = `
<DocumentFragment>
<form
class="pf-v6-c-form pf-m-horizontal"
data-ouia-component-id="OUIA-Generated-Form-:rh:"
data-ouia-component-id="OUIA-Generated-Form-:rj:"
data-ouia-component-type="PF6/Form"
data-ouia-safe="true"
novalidate=""
>
<div
class="pf-v6-c-form__group"
data-ouia-component-id="OUIA-Generated-FormGroup-:ri:"
data-ouia-component-id="OUIA-Generated-FormGroup-:rk:"
data-ouia-component-type="PF6/FormGroup"
data-ouia-safe="true"
>
Expand Down
3 changes: 3 additions & 0 deletions packages/react-core/src/components/Form/examples/Form.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,9 @@ cssPrefix: pf-v6-c-form
propComponents:
[
'ActionGroup',
'ActionList',
'ActionListGroup',
'ActionListItem',
'Form',
'FormGroup',
'FormGroupLabelHelp',
Expand Down
20 changes: 15 additions & 5 deletions packages/react-core/src/components/Form/examples/FormBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import {
TextInput,
Checkbox,
Popover,
ActionGroup,
ActionList,
ActionListGroup,
ActionListItem,
Button,
Radio,
HelperText,
Expand Down Expand Up @@ -123,10 +125,18 @@ export const FormBasic: React.FunctionComponent = () => {
<FormGroup fieldId="checkbox01">
<Checkbox label="I'd like updates via email." id="checkbox01" name="checkbox01" aria-label="Update via email" />
</FormGroup>
<ActionGroup>
<Button variant="primary">Submit</Button>
<Button variant="link">Cancel</Button>
</ActionGroup>
<FormGroup isAction>
<ActionList>
<ActionListGroup>
<ActionListItem>
<Button variant="primary">Submit</Button>
</ActionListItem>
<ActionListItem>
<Button variant="link">Cancel</Button>
</ActionListItem>
</ActionListGroup>
</ActionList>
</FormGroup>
</Form>
);
};
20 changes: 15 additions & 5 deletions packages/react-core/src/components/Form/examples/FormHorizontal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,9 @@ import {
FormSelect,
FormSelectOption,
Checkbox,
ActionGroup,
ActionList,
ActionListGroup,
ActionListItem,
Button,
Radio,
HelperText,
Expand Down Expand Up @@ -112,10 +114,18 @@ export const FormHorizontal: React.FunctionComponent = () => {
<Radio name="horizontal-inline-radio" label="Central" id="horizontal-inline-radio-02" />
<Radio name="horizontal-inline-radio" label="Pacific" id="horizontal-inline-radio-03" />
</FormGroup>
<ActionGroup>
<Button variant="primary">Submit</Button>
<Button variant="link">Cancel</Button>
</ActionGroup>
<FormGroup isAction>
<ActionList>
<ActionListGroup>
<ActionListItem>
<Button variant="primary">Submit</Button>
</ActionListItem>
<ActionListItem>
<Button variant="link">Cancel</Button>
</ActionListItem>
</ActionListGroup>
</ActionList>
</FormGroup>
</Form>
);
};
20 changes: 15 additions & 5 deletions packages/react-core/src/components/Form/examples/FormLimitWidth.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,9 @@ import {
TextInput,
Checkbox,
Popover,
ActionGroup,
ActionList,
ActionListGroup,
ActionListItem,
Button,
Radio,
HelperText,
Expand Down Expand Up @@ -123,10 +125,18 @@ export const FormLimitWidth: React.FunctionComponent = () => {
<FormGroup fieldId="checkbox02">
<Checkbox label="I'd like updates via email." id="checkbox02" name="checkbox02" aria-label="Update via email" />
</FormGroup>
<ActionGroup>
<Button variant="primary">Submit</Button>
<Button variant="link">Cancel</Button>
</ActionGroup>
<FormGroup isAction>
<ActionList>
<ActionListGroup>
<ActionListItem>
<Button variant="primary">Submit</Button>
</ActionListItem>
<ActionListItem>
<Button variant="link">Cancel</Button>
</ActionListItem>
</ActionListGroup>
</ActionList>
</FormGroup>
</Form>
);
};
51 changes: 32 additions & 19 deletions packages/react-core/src/components/Form/examples/FormState.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { useState } from 'react';
import {
ActionGroup,
ActionList,
ActionListGroup,
ActionListItem,
Button,
ButtonType,
ButtonVariant,
Expand Down Expand Up @@ -89,25 +91,36 @@ export const FormState = () => {
</SelectList>
</Select>

<ActionGroup>
<Button
type={ButtonType.submit}
onClick={(e) => {
e.preventDefault();
<FormGroup isAction>
<ActionList>
<ActionListGroup>
<ActionListItem>
<Button
type={ButtonType.submit}
onClick={(e) => {
e.preventDefault();

if (!values['input-id']) {
setError('input-id', 'Input value is required.');
} else {
alert(`Form submitted with: \n ${JSON.stringify(values)}`);
}
}}
>
Submit
</Button>
<Button variant={ButtonVariant.link} onClick={() => setFormStateExpanded((prevExpanded) => !prevExpanded)}>
{`${formStateExpanded ? 'Hide' : 'Show'} form state`}
</Button>
</ActionGroup>
if (!values['input-id']) {
setError('input-id', 'Input value is required.');
} else {
alert(`Form submitted with: \n ${JSON.stringify(values)}`);
}
}}
>
Submit
</Button>
</ActionListItem>
<ActionListItem>
<Button
variant={ButtonVariant.link}
onClick={() => setFormStateExpanded((prevExpanded) => !prevExpanded)}
>
{`${formStateExpanded ? 'Hide' : 'Show'} form state`}
</Button>
</ActionListItem>
</ActionListGroup>
</ActionList>
</FormGroup>
{formStateExpanded && (
<>
<Divider />
Expand Down
25 changes: 19 additions & 6 deletions packages/react-core/src/components/LoginPage/LoginForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useState } from 'react';
import { Form, FormGroup, ActionGroup, FormHelperText } from '../Form';
import { Form, FormGroup, FormHelperText } from '../Form';
import { ActionList, ActionListGroup, ActionListItem } from '../ActionList';
import { TextInput } from '../TextInput';
import { Button } from '../Button';
import { Checkbox } from '../Checkbox';
Expand Down Expand Up @@ -147,11 +148,23 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
/>
</FormGroup>
)}
<ActionGroup>
<Button variant="primary" type="submit" onClick={onLoginButtonClick} isBlock isDisabled={isLoginButtonDisabled}>
{loginButtonLabel}
</Button>
</ActionGroup>
<FormGroup isAction>
<ActionList>
<ActionListGroup>
<ActionListItem>
<Button
variant="primary"
type="submit"
onClick={onLoginButtonClick}
isBlock
isDisabled={isLoginButtonDisabled}
>
{loginButtonLabel}
</Button>
</ActionListItem>
</ActionListGroup>
</ActionList>
Comment on lines +152 to +166

@mcoker mcoker Jul 29, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could do it this way, and it would match the core login demo. There is one small different, but core could update to match the react markup. It works both ways.

Suggested change
<ActionList>
<ActionListGroup>
<ActionListItem>
<Button
variant="primary"
type="submit"
onClick={onLoginButtonClick}
isBlock
isDisabled={isLoginButtonDisabled}
>
{loginButtonLabel}
</Button>
</ActionListItem>
</ActionListGroup>
</ActionList>
<Button
variant="primary"
type="submit"
onClick={onLoginButtonClick}
isBlock
isDisabled={isLoginButtonDisabled}
>
{loginButtonLabel}
</Button>

Or we could leave the login component alone in this PR, since this would change the markup for the existing component that users may be styling or targeting using classes we would remove. And we could update the component whenever we are able to remove the deprecated ActionGroup component.

</FormGroup>
</Form>
);
};
Expand Down
Loading
Loading