Skip to content

feat(Form): enabled opt-in animations for expandable fieldgroup #11843

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
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(Form): enabled opt-in animations for expandable fieldgroup #11843

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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: 1 addition & 1 deletion packages/react-core/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"tslib": "^2.8.1"
},
"devDependencies": {
"@patternfly/patternfly": "6.3.0-prerelease.20",
"@patternfly/patternfly": "6.3.0-prerelease.24",
"case-anything": "^3.1.2",
"css": "^3.0.0",
"fs-extra": "^11.3.0"
Expand Down
7 changes: 7 additions & 0 deletions packages/react-core/src/components/Form/FormFieldGroupExpandable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,11 @@ export interface FormFieldGroupExpandableProps extends Omit<React.HTMLProps<HTML
isExpanded?: boolean;
/** Aria-label to use on the form field group toggle button */
toggleAriaLabel?: string;
/** Flag indicating whether an expandable form field group has animations. This will always render
* nested field group content rather than dynamically rendering them. This prop will be removed in
* the next breaking change release in favor of defaulting to always-rendered items.
*/
hasAnimations?: boolean;
}

export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExpandableProps> = ({
Expand All @@ -20,6 +25,7 @@ export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExp
header,
isExpanded = false,
toggleAriaLabel,
hasAnimations,
...props
}: FormFieldGroupExpandableProps) => {
const [localIsExpanded, setIsExpanded] = useState(isExpanded);
Expand All @@ -32,6 +38,7 @@ export const FormFieldGroupExpandable: React.FunctionComponent<FormFieldGroupExp
isExpanded={localIsExpanded}
toggleAriaLabel={toggleAriaLabel}
onToggle={() => setIsExpanded(!localIsExpanded)}
hasAnimations={hasAnimations}
{...props}
>
{children}
Expand Down
22 changes: 19 additions & 3 deletions packages/react-core/src/components/Form/InternalFormFieldGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDi
onToggle?: () => void;
/** Aria-label to use on the form field group toggle button */
toggleAriaLabel?: string;
/** Flag indicating whether an expandable form field group has animations. This will always render
* nested field group content rather than dynamically rendering them. This prop will be removed in
* the next breaking change release in favor of defaulting to always-rendered items.
*/
hasAnimations?: boolean;
}

export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGroupProps> = ({
Expand All @@ -28,6 +33,7 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
isExpanded,
onToggle,
toggleAriaLabel,
hasAnimations,
...props
}: InternalFormFieldGroupProps) => {
const headerTitleText = header ? header.props.titleText : null;
Expand All @@ -40,7 +46,12 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
}
return (
<div
className={css(styles.formFieldGroup, isExpanded && isExpandable && styles.modifiers.expanded, className)}
className={css(
styles.formFieldGroup,
isExpanded && isExpandable && styles.modifiers.expanded,
hasAnimations && isExpandable && styles.modifiers.expandable,
className
)}
role="group"
{...(headerTitleText && { 'aria-labelledby': `${header.props.titleText.id}` })}
{...props}
Expand All @@ -59,8 +70,13 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
</GenerateId>
)}
{header && header}
{(!isExpandable || (isExpandable && isExpanded)) && (
<div className={css(styles.formFieldGroupBody)}>{children}</div>
{(!isExpandable || (isExpandable && isExpanded) || (hasAnimations && isExpandable)) && (
<div
className={css(styles.formFieldGroupBody)}
{...(hasAnimations && isExpandable && !isExpanded && { inert: '' })}
>
{children}
</div>
)}
</div>
);
Expand Down
55 changes: 55 additions & 0 deletions packages/react-core/src/components/Form/__tests__/FormFieldGroupExpandable.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import { render, screen } from '@testing-library/react';
import { FormFieldGroupExpandable } from '../FormFieldGroupExpandable';
import styles from '@patternfly/react-styles/css/components/Form/form';

test('Does not render children by default', () => {
render(<FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>);

expect(screen.queryByText('Child content')).not.toBeInTheDocument();
});

test('Renders children when isExpanded is true', () => {
render(
<FormFieldGroupExpandable isExpanded toggleAriaLabel="Toggle label">
Child content
</FormFieldGroupExpandable>
);

expect(screen.getByText('Child content')).toBeInTheDocument();
});

test('Renders children with inert attribute by default when hasAnimations is true', () => {
render(
<FormFieldGroupExpandable hasAnimations toggleAriaLabel="Toggle label">
Child content
</FormFieldGroupExpandable>
);

expect(screen.getByText('Child content')).toHaveAttribute('inert', '');
});

test('Does not render children with inert attribute when hasAnimations and isExpanded are true', () => {
render(
<FormFieldGroupExpandable hasAnimations isExpanded toggleAriaLabel="Toggle label">
Child content
</FormFieldGroupExpandable>
);

expect(screen.getByText('Child content')).not.toHaveAttribute('inert');
});

test(`Does not render with class ${styles.modifiers.expandable} by default`, () => {
render(<FormFieldGroupExpandable toggleAriaLabel="Toggle label">Child content</FormFieldGroupExpandable>);

expect(screen.getByRole('group')).not.toHaveClass(styles.modifiers.expandable);
});

test(`Renders with class ${styles.modifiers.expandable} when hasAnimations is true`, () => {
render(
<FormFieldGroupExpandable hasAnimations toggleAriaLabel="Toggle label">
Child content
</FormFieldGroupExpandable>
);

expect(screen.getByRole('group')).toHaveClass(styles.modifiers.expandable);
});
8 changes: 7 additions & 1 deletion packages/react-core/src/components/Form/examples/FormFieldGroups.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
<TextInput isRequired id="0-label2" name="0-label2" value={inputValues['0-label2']} onChange={handleChange} />
</FormGroup>
<FormFieldGroupExpandable
hasAnimations
isExpanded
toggleAriaLabel="Details"
header={
Expand All @@ -67,6 +68,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
}
>
<FormFieldGroupExpandable
hasAnimations
isExpanded
toggleAriaLabel="Details"
header={
Expand Down Expand Up @@ -97,6 +99,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
</FormGroup>
</FormFieldGroupExpandable>
<FormFieldGroupExpandable
hasAnimations
toggleAriaLabel="Details"
header={
<FormFieldGroupHeader
Expand Down Expand Up @@ -125,6 +128,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
</FormGroup>
</FormFieldGroupExpandable>
<FormFieldGroupExpandable
hasAnimations
toggleAriaLabel="Details"
header={
<FormFieldGroupHeader
Expand Down Expand Up @@ -173,6 +177,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
</FormGroup>
</FormFieldGroupExpandable>
<FormFieldGroupExpandable
hasAnimations
toggleAriaLabel="Details"
header={
<FormFieldGroupHeader
Expand All @@ -194,6 +199,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
</FormGroup>
</FormFieldGroupExpandable>
<FormFieldGroupExpandable
hasAnimations
isExpanded
toggleAriaLabel="Details"
header={
Expand Down Expand Up @@ -273,7 +279,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
header={
<FormFieldGroupHeader
titleText={{ text: 'Field group 4 (non-expandable)', id: 'field-group4-non-expandable-titleText-id' }}
titleDescription="Field group 4 description text."
titleDescription="Field group 4 description text fdgsdg."
actions={
<>
<Button variant="link">Delete all</Button> <Button variant="secondary">Add parameter</Button>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"test:a11y": "patternfly-a11y --config patternfly-a11y.config"
},
"dependencies": {
"@patternfly/patternfly": "6.3.0-prerelease.20",
"@patternfly/patternfly": "6.3.0-prerelease.24",
"@patternfly/react-charts": "workspace:^",
"@patternfly/react-code-editor": "workspace:^",
"@patternfly/react-core": "workspace:^",
Expand Down
2 changes: 1 addition & 1 deletion packages/react-icons/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
"@fortawesome/free-brands-svg-icons": "^5.15.4",
"@fortawesome/free-regular-svg-icons": "^5.15.4",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@patternfly/patternfly": "6.3.0-prerelease.20",
"@patternfly/patternfly": "6.3.0-prerelease.24",
"fs-extra": "^11.3.0",
"tslib": "^2.8.1"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react-styles/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"clean": "rimraf dist css"
},
"devDependencies": {
"@patternfly/patternfly": "6.3.0-prerelease.20",
"@patternfly/patternfly": "6.3.0-prerelease.24",
"change-case": "^5.4.4",
"fs-extra": "^11.3.0"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react-tokens/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
},
"devDependencies": {
"@adobe/css-tools": "^4.4.2",
"@patternfly/patternfly": "6.3.0-prerelease.20",
"@patternfly/patternfly": "6.3.0-prerelease.24",
"fs-extra": "^11.3.0"
}
}
18 changes: 9 additions & 9 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3639,10 +3639,10 @@ __metadata:
languageName: node
linkType: hard

"@patternfly/patternfly@npm:6.3.0-prerelease.20":
version: 6.3.0-prerelease.20
resolution: "@patternfly/patternfly@npm:6.3.0-prerelease.20"
checksum: 10c0/ea6ea0bdc09fe505f07554406f03151c63eba6e66c8abd8b35a7f67bdacfa3bcf9963e20df1b4792e22ca3c8763c926dc9ab18a089288e04f922d76c3972b80f
"@patternfly/patternfly@npm:6.3.0-prerelease.24":
version: 6.3.0-prerelease.24
resolution: "@patternfly/patternfly@npm:6.3.0-prerelease.24"
checksum: 10c0/127bc928ebb67c35fb2ab42c91a63a950dfb5f68972acdf8b94aabc48ca13fee164b02f10a632712165d977eb04bc28de562e107db9f9053b68c47c61bdc83cf
languageName: node
linkType: hard

Expand Down Expand Up @@ -3740,7 +3740,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "@patternfly/react-core@workspace:packages/react-core"
dependencies:
"@patternfly/patternfly": "npm:6.3.0-prerelease.20"
"@patternfly/patternfly": "npm:6.3.0-prerelease.24"
"@patternfly/react-icons": "workspace:^"
"@patternfly/react-styles": "workspace:^"
"@patternfly/react-tokens": "workspace:^"
Expand All @@ -3761,7 +3761,7 @@ __metadata:
resolution: "@patternfly/react-docs@workspace:packages/react-docs"
dependencies:
"@patternfly/documentation-framework": "npm:^6.5.20"
"@patternfly/patternfly": "npm:6.3.0-prerelease.20"
"@patternfly/patternfly": "npm:6.3.0-prerelease.24"
"@patternfly/patternfly-a11y": "npm:5.1.0"
"@patternfly/react-charts": "workspace:^"
"@patternfly/react-code-editor": "workspace:^"
Expand Down Expand Up @@ -3801,7 +3801,7 @@ __metadata:
"@fortawesome/free-brands-svg-icons": "npm:^5.15.4"
"@fortawesome/free-regular-svg-icons": "npm:^5.15.4"
"@fortawesome/free-solid-svg-icons": "npm:^5.15.4"
"@patternfly/patternfly": "npm:6.3.0-prerelease.20"
"@patternfly/patternfly": "npm:6.3.0-prerelease.24"
fs-extra: "npm:^11.3.0"
tslib: "npm:^2.8.1"
peerDependencies:
Expand Down Expand Up @@ -3885,7 +3885,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "@patternfly/react-styles@workspace:packages/react-styles"
dependencies:
"@patternfly/patternfly": "npm:6.3.0-prerelease.20"
"@patternfly/patternfly": "npm:6.3.0-prerelease.24"
change-case: "npm:^5.4.4"
fs-extra: "npm:^11.3.0"
languageName: unknown
Expand Down Expand Up @@ -3927,7 +3927,7 @@ __metadata:
resolution: "@patternfly/react-tokens@workspace:packages/react-tokens"
dependencies:
"@adobe/css-tools": "npm:^4.4.2"
"@patternfly/patternfly": "npm:6.3.0-prerelease.20"
"@patternfly/patternfly": "npm:6.3.0-prerelease.24"
fs-extra: "npm:^11.3.0"
languageName: unknown
linkType: soft
Expand Down
Loading