Skip to content

Commit 26f78aa

Browse files
thatblindgeyethatblindgeye
committed
feat(Form): enabled opt-in animations for expandable fieldgroup
1 parent e62933d commit 26f78aa

File tree

10 files changed

+102
-18
lines changed

10 files changed

+102
-18
lines changed

‎packages/react-core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"tslib": "^2.8.1"
5555
},
5656
"devDependencies": {
57-
"@patternfly/patternfly": "6.3.0-prerelease.20",
57+
"@patternfly/patternfly": "6.3.0-prerelease.24",
5858
"case-anything": "^3.1.2",
5959
"css": "^3.0.0",
6060
"fs-extra": "^11.3.0"

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,11 @@ export interface FormFieldGroupExpandableProps extends Omit<React.HTMLProps<HTML
1212
isExpanded?: boolean;
1313
/** Aria-label to use on the form field group toggle button */
1414
toggleAriaLabel?: string;
15+
/** Flag indicating whether an expandable form field group has animations. This will always render
16+
* nested field group content rather than dynamically rendering them. This prop will be removed in
17+
* the next breaking change release in favor of defaulting to always-rendered items.
18+
*/
19+
hasAnimations?: boolean;
1520
}
1621

1722
export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExpandableProps> = ({
@@ -20,6 +25,7 @@ export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExp
2025
header,
2126
isExpanded = false,
2227
toggleAriaLabel,
28+
hasAnimations,
2329
...props
2430
}: FormFieldGroupExpandableProps) => {
2531
const [localIsExpanded, setIsExpanded] = useState(isExpanded);
@@ -32,6 +38,7 @@ export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExp
3238
isExpanded={localIsExpanded}
3339
toggleAriaLabel={toggleAriaLabel}
3440
onToggle={() => setIsExpanded(!localIsExpanded)}
41+
hasAnimations={hasAnimations}
3542
{...props}
3643
>
3744
{children}

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

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,11 @@ export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDi
1818
onToggle?: () => void;
1919
/** Aria-label to use on the form field group toggle button */
2020
toggleAriaLabel?: string;
21+
/** Flag indicating whether an expandable form field group has animations. This will always render
22+
* nested field group content rather than dynamically rendering them. This prop will be removed in
23+
* the next breaking change release in favor of defaulting to always-rendered items.
24+
*/
25+
hasAnimations?: boolean;
2126
}
2227

2328
export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGroupProps> = ({
@@ -28,6 +33,7 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
2833
isExpanded,
2934
onToggle,
3035
toggleAriaLabel,
36+
hasAnimations,
3137
...props
3238
}: InternalFormFieldGroupProps) => {
3339
const headerTitleText = header ? header.props.titleText : null;
@@ -40,7 +46,12 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
4046
}
4147
return (
4248
<div
43-
className={css(styles.formFieldGroup, isExpanded && isExpandable && styles.modifiers.expanded, className)}
49+
className={css(
50+
styles.formFieldGroup,
51+
isExpanded && isExpandable && styles.modifiers.expanded,
52+
hasAnimations && isExpandable && styles.modifiers.expandable,
53+
className
54+
)}
4455
role="group"
4556
{...(headerTitleText && { 'aria-labelledby': `${header.props.titleText.id}` })}
4657
{...props}
@@ -59,8 +70,13 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
5970
</GenerateId>
6071
)}
6172
{header && header}
62-
{(!isExpandable || (isExpandable && isExpanded)) && (
63-
<div className={css(styles.formFieldGroupBody)}>{children}</div>
73+
{(!isExpandable || (isExpandable && isExpanded) || (hasAnimations && isExpandable)) && (
74+
<div
75+
className={css(styles.formFieldGroupBody)}
76+
{...(hasAnimations && isExpandable && !isExpanded && { inert: '' })}
77+
>
78+
{children}
79+
</div>
6480
)}
6581
</div>
6682
);

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

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { render, screen } from '@testing-library/react';
2+
import { FormFieldGroupExpandable } from '../FormFieldGroupExpandable';
3+
import styles from '@patternfly/react-styles/css/components/Form/form';
4+
5+
test('Does not render children by default', () => {
6+
render(<FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>);
7+
8+
expect(screen.queryByText('Child content')).not.toBeInTheDocument();
9+
});
10+
11+
test('Renders children when isExpanded is true', () => {
12+
render(
13+
<FormFieldGroupExpandable isExpanded toggleAriaLabel="Toggle label">
14+
Child content
15+
</FormFieldGroupExpandable>
16+
);
17+
18+
expect(screen.getByText('Child content')).toBeInTheDocument();
19+
});
20+
21+
test('Renders children with inert attribute by default when hasAnimations is true', () => {
22+
render(
23+
<FormFieldGroupExpandable hasAnimations toggleAriaLabel="Toggle label">
24+
Child content
25+
</FormFieldGroupExpandable>
26+
);
27+
28+
expect(screen.getByText('Child content')).toHaveAttribute('inert', '');
29+
});
30+
31+
test('Does not render children with inert attribute when hasAnimations and isExpanded are true', () => {
32+
render(
33+
<FormFieldGroupExpandable hasAnimations isExpanded toggleAriaLabel="Toggle label">
34+
Child content
35+
</FormFieldGroupExpandable>
36+
);
37+
38+
expect(screen.getByText('Child content')).not.toHaveAttribute('inert');
39+
});
40+
41+
test(`Does not render with class ${styles.modifiers.expandable} by default`, () => {
42+
render(<FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>);
43+
44+
expect(screen.getByRole('group')).not.toHaveClass(styles.modifiers.expandable);
45+
});
46+
47+
test(`Renders with class ${styles.modifiers.expandable} when hasAnimations is true`, () => {
48+
render(
49+
<FormFieldGroupExpandable hasAnimations toggleAriaLabel="Toggle label">
50+
Child content
51+
</FormFieldGroupExpandable>
52+
);
53+
54+
expect(screen.getByRole('group')).toHaveClass(styles.modifiers.expandable);
55+
});

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
5252
<TextInput isRequired id="0-label2" name="0-label2" value={inputValues['0-label2']} onChange={handleChange} />
5353
</FormGroup>
5454
<FormFieldGroupExpandable
55+
hasAnimations
5556
isExpanded
5657
toggleAriaLabel="Details"
5758
header={
@@ -67,6 +68,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
6768
}
6869
>
6970
<FormFieldGroupExpandable
71+
hasAnimations
7072
isExpanded
7173
toggleAriaLabel="Details"
7274
header={
@@ -97,6 +99,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
9799
</FormGroup>
98100
</FormFieldGroupExpandable>
99101
<FormFieldGroupExpandable
102+
hasAnimations
100103
toggleAriaLabel="Details"
101104
header={
102105
<FormFieldGroupHeader
@@ -125,6 +128,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
125128
</FormGroup>
126129
</FormFieldGroupExpandable>
127130
<FormFieldGroupExpandable
131+
hasAnimations
128132
toggleAriaLabel="Details"
129133
header={
130134
<FormFieldGroupHeader
@@ -173,6 +177,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
173177
</FormGroup>
174178
</FormFieldGroupExpandable>
175179
<FormFieldGroupExpandable
180+
hasAnimations
176181
toggleAriaLabel="Details"
177182
header={
178183
<FormFieldGroupHeader
@@ -194,6 +199,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
194199
</FormGroup>
195200
</FormFieldGroupExpandable>
196201
<FormFieldGroupExpandable
202+
hasAnimations
197203
isExpanded
198204
toggleAriaLabel="Details"
199205
header={
@@ -273,7 +279,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
273279
header={
274280
<FormFieldGroupHeader
275281
titleText={{ text: 'Field group 4 (non-expandable)', id: 'field-group4-non-expandable-titleText-id' }}
276-
titleDescription="Field group 4 description text."
282+
titleDescription="Field group 4 description text fdgsdg."
277283
actions={
278284
<>
279285
<Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>

‎packages/react-docs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"test:a11y": "patternfly-a11y --config patternfly-a11y.config"
2424
},
2525
"dependencies": {
26-
"@patternfly/patternfly": "6.3.0-prerelease.20",
26+
"@patternfly/patternfly": "6.3.0-prerelease.24",
2727
"@patternfly/react-charts": "workspace:^",
2828
"@patternfly/react-code-editor": "workspace:^",
2929
"@patternfly/react-core": "workspace:^",

‎packages/react-icons/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
"@fortawesome/free-brands-svg-icons": "^5.15.4",
3434
"@fortawesome/free-regular-svg-icons": "^5.15.4",
3535
"@fortawesome/free-solid-svg-icons": "^5.15.4",
36-
"@patternfly/patternfly": "6.3.0-prerelease.20",
36+
"@patternfly/patternfly": "6.3.0-prerelease.24",
3737
"fs-extra": "^11.3.0",
3838
"tslib": "^2.8.1"
3939
},

‎packages/react-styles/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
"clean": "rimraf dist css"
2020
},
2121
"devDependencies": {
22-
"@patternfly/patternfly": "6.3.0-prerelease.20",
22+
"@patternfly/patternfly": "6.3.0-prerelease.24",
2323
"change-case": "^5.4.4",
2424
"fs-extra": "^11.3.0"
2525
},

‎packages/react-tokens/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
},
3131
"devDependencies": {
3232
"@adobe/css-tools": "^4.4.2",
33-
"@patternfly/patternfly": "6.3.0-prerelease.20",
33+
"@patternfly/patternfly": "6.3.0-prerelease.24",
3434
"fs-extra": "^11.3.0"
3535
}
3636
}

‎yarn.lock

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3639,10 +3639,10 @@ __metadata:
36393639
languageName: node
36403640
linkType: hard
36413641

3642-
"@patternfly/patternfly@npm:6.3.0-prerelease.20":
3643-
version: 6.3.0-prerelease.20
3644-
resolution: "@patternfly/patternfly@npm:6.3.0-prerelease.20"
3645-
checksum: 10c0/ea6ea0bdc09fe505f07554406f03151c63eba6e66c8abd8b35a7f67bdacfa3bcf9963e20df1b4792e22ca3c8763c926dc9ab18a089288e04f922d76c3972b80f
3642+
"@patternfly/patternfly@npm:6.3.0-prerelease.24":
3643+
version: 6.3.0-prerelease.24
3644+
resolution: "@patternfly/patternfly@npm:6.3.0-prerelease.24"
3645+
checksum: 10c0/127bc928ebb67c35fb2ab42c91a63a950dfb5f68972acdf8b94aabc48ca13fee164b02f10a632712165d977eb04bc28de562e107db9f9053b68c47c61bdc83cf
36463646
languageName: node
36473647
linkType: hard
36483648

@@ -3740,7 +3740,7 @@ __metadata:
37403740
version: 0.0.0-use.local
37413741
resolution: "@patternfly/react-core@workspace:packages/react-core"
37423742
dependencies:
3743-
"@patternfly/patternfly": "npm:6.3.0-prerelease.20"
3743+
"@patternfly/patternfly": "npm:6.3.0-prerelease.24"
37443744
"@patternfly/react-icons": "workspace:^"
37453745
"@patternfly/react-styles": "workspace:^"
37463746
"@patternfly/react-tokens": "workspace:^"
@@ -3761,7 +3761,7 @@ __metadata:
37613761
resolution: "@patternfly/react-docs@workspace:packages/react-docs"
37623762
dependencies:
37633763
"@patternfly/documentation-framework": "npm:^6.5.20"
3764-
"@patternfly/patternfly": "npm:6.3.0-prerelease.20"
3764+
"@patternfly/patternfly": "npm:6.3.0-prerelease.24"
37653765
"@patternfly/patternfly-a11y": "npm:5.1.0"
37663766
"@patternfly/react-charts": "workspace:^"
37673767
"@patternfly/react-code-editor": "workspace:^"
@@ -3801,7 +3801,7 @@ __metadata:
38013801
"@fortawesome/free-brands-svg-icons": "npm:^5.15.4"
38023802
"@fortawesome/free-regular-svg-icons": "npm:^5.15.4"
38033803
"@fortawesome/free-solid-svg-icons": "npm:^5.15.4"
3804-
"@patternfly/patternfly": "npm:6.3.0-prerelease.20"
3804+
"@patternfly/patternfly": "npm:6.3.0-prerelease.24"
38053805
fs-extra: "npm:^11.3.0"
38063806
tslib: "npm:^2.8.1"
38073807
peerDependencies:
@@ -3885,7 +3885,7 @@ __metadata:
38853885
version: 0.0.0-use.local
38863886
resolution: "@patternfly/react-styles@workspace:packages/react-styles"
38873887
dependencies:
3888-
"@patternfly/patternfly": "npm:6.3.0-prerelease.20"
3888+
"@patternfly/patternfly": "npm:6.3.0-prerelease.24"
38893889
change-case: "npm:^5.4.4"
38903890
fs-extra: "npm:^11.3.0"
38913891
languageName: unknown
@@ -3927,7 +3927,7 @@ __metadata:
39273927
resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
39283928
dependencies:
39293929
"@adobe/css-tools": "npm:^4.4.2"
3930-
"@patternfly/patternfly": "npm:6.3.0-prerelease.20"
3930+
"@patternfly/patternfly": "npm:6.3.0-prerelease.24"
39313931
fs-extra: "npm:^11.3.0"
39323932
languageName: unknown
39333933
linkType: soft

0 commit comments

Comments
 (0)