Skip to content

Commit b82d4cd

Browse files
rebeccaalpertrebeccaalpert
committed
Add form group wrapper from Core
1 parent 3b03b28 commit b82d4cd

14 files changed

Lines changed: 286 additions & 217 deletions

File tree

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +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. */
4+
/** @deprecated Use ActionList, ActionListGroup, and ActionListItem in a FormGroup instead. */
55
export interface ActionGroupProps extends React.HTMLProps<HTMLDivElement> {
66
/** Anything that can be rendered as ActionGroup content. */
77
children?: React.ReactNode;
88
/** Additional classes added to the ActionGroup. */
99
className?: string;
1010
}
1111

12-
/** @deprecated Use ActionList, ActionListGroup, and ActionListItem instead. */
12+
/** @deprecated Use ActionList, ActionListGroup, and ActionListItem in a FormGroup instead. */
1313
export const ActionGroup: React.FunctionComponent<ActionGroupProps> = ({
1414
children = null,
1515
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+
isAction?: 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+
isAction = 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, isAction && 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 isAction 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/FormBasic.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -125,16 +125,18 @@ export const FormBasic: React.FunctionComponent = () => {
125125
<FormGroup fieldId="checkbox01">
126126
<Checkbox label="I'd like updates via email." id="checkbox01" name="checkbox01" aria-label="Update via email" />
127127
</FormGroup>
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>
128+
<FormGroup isAction>
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>
138140
</Form>
139141
);
140142
};

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -114,16 +114,18 @@ export const FormHorizontal: React.FunctionComponent = () => {
114114
<Radio name="horizontal-inline-radio" label="Central" id="horizontal-inline-radio-02" />
115115
<Radio name="horizontal-inline-radio" label="Pacific" id="horizontal-inline-radio-03" />
116116
</FormGroup>
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>
117+
<FormGroup isAction>
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>
127129
</Form>
128130
);
129131
};

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -125,16 +125,18 @@ export const FormLimitWidth: React.FunctionComponent = () => {
125125
<FormGroup fieldId="checkbox02">
126126
<Checkbox label="I'd like updates via email." id="checkbox02" name="checkbox02" aria-label="Update via email" />
127127
</FormGroup>
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>
128+
<FormGroup isAction>
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>
138140
</Form>
139141
);
140142
};

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

Lines changed: 29 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -91,34 +91,36 @@ export const FormState = () => {
9191
</SelectList>
9292
</Select>
9393

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

102-
if (!values['input-id']) {
103-
setError('input-id', 'Input value is required.');
104-
} else {
105-
alert(`Form submitted with: \n ${JSON.stringify(values)}`);
106-
}
107-
}}
108-
>
109-
Submit
110-
</Button>
111-
</ActionListItem>
112-
<ActionListItem>
113-
<Button
114-
variant={ButtonVariant.link}
115-
onClick={() => setFormStateExpanded((prevExpanded) => !prevExpanded)}
116-
>
117-
{`${formStateExpanded ? 'Hide' : 'Show'} form state`}
118-
</Button>
119-
</ActionListItem>
120-
</ActionListGroup>
121-
</ActionList>
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>
122124
{formStateExpanded && (
123125
<>
124126
<Divider />

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

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -148,21 +148,23 @@ export const LoginForm: React.FunctionComponent<LoginFormProps> = ({
148148
/>
149149
</FormGroup>
150150
)}
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>
151+
<FormGroup isAction>
152+
<ActionList>
153+
<ActionListGroup>
154+
<ActionListItem>
155+
<Button
156+
variant="primary"
157+
type="submit"
158+
onClick={onLoginButtonClick}
159+
isBlock
160+
isDisabled={isLoginButtonDisabled}
161+
>
162+
{loginButtonLabel}
163+
</Button>
164+
</ActionListItem>
165+
</ActionListGroup>
166+
</ActionList>
167+
</FormGroup>
166168
</Form>
167169
);
168170
};

0 commit comments

Comments
 (0)