Skip to content

fix(Tables): updated animations to beta #11927

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

Merged
kmcfaul merged 6 commits into from
Jul 17, 2025
Merged

fix(Tables): updated animations to beta #11927

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d953b32
fix(Tables): updated animations to beta
thatblindgeye Jul 16, 2025
c60fae7
Updated per table discussion w coker and katie
thatblindgeye Jul 16, 2025
e387a3f
Updated snapshots
thatblindgeye Jul 16, 2025
8ade899
Updated docs verbiage
thatblindgeye Jul 17, 2025
f79f44f
Bumped core versions
thatblindgeye Jul 17, 2025
06974a9
Bumped core for latest fix
thatblindgeye Jul 17, 2025
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.38",
"@patternfly/patternfly": "6.3.0-prerelease.40",
"case-anything": "^3.1.2",
"css": "^3.0.0",
"fs-extra": "^11.3.0"
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.38",
"@patternfly/patternfly": "6.3.0-prerelease.40",
"@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.38",
"@patternfly/patternfly": "6.3.0-prerelease.40",
"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.38",
"@patternfly/patternfly": "6.3.0-prerelease.40",
"change-case": "^5.4.4",
"fs-extra": "^11.3.0"
},
Expand Down
2 changes: 1 addition & 1 deletion packages/react-table/src/components/Table/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps
isStriped?: boolean;
/** Flag indicating this table contains expandable rows. */
isExpandable?: boolean;
/** Flag indicating whether expandable rows within the table have animations. Expandable rows cannot be dynamically rendered. This prop
/** @beta Flag indicating whether expandable rows within the table have animations. Expandable rows cannot be dynamically rendered. This prop
* will be removed in the next breaking change, with the default behavior becoming animations always being enabled.
*/
hasAnimations?: boolean;
Expand Down
18 changes: 9 additions & 9 deletions packages/react-table/src/components/Table/Tr.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,14 @@ export interface TrProps extends Omit<React.HTMLProps<HTMLTableRowElement>, 'onR
innerRef?: React.Ref<any>;
/** Flag indicating the Tr is hidden */
isHidden?: boolean;
/** Only applicable to Tr within the Tbody and determines if the expandable row content is expanded or not.
/** Flag indicating whether an "expandable" Tr is expanded or not. Only applicable to a Tr within a Tbody.
* To prevent column widths from responding automatically when expandable rows are toggled, the width prop must also be passed into either the th or td component
*/
isExpanded?: boolean;
/** Flag to indicate that a row is expandable. Only applicable to a tr that is intended to collapse or expand. */
isExpandable?: boolean;
/** Flag indicating that the "control row" Tr has an expandable sibling Tr that is expanded or not. Only applicable to
* a Tr within a Tbody, and should have the same value as an expandable Tr's isExpanded prop.
*/
isContentExpanded?: boolean;
/** Only applicable to Tr within the Tbody: Whether the row is editable */
isEditable?: boolean;
/** Flag which adds hover styles for the clickable table row */
Expand Down Expand Up @@ -48,7 +50,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
children,
className,
isExpanded,
isExpandable,
isContentExpanded,
isEditable,
isHidden = false,
isClickable = false,
Expand Down Expand Up @@ -78,7 +80,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
};
}

const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded && isExpandable);
const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded);

const { registerSelectableRow, hasAnimations } = useContext(TableContext);

Expand All @@ -99,10 +101,8 @@ const TrBase: React.FunctionComponent<TrProps> = ({
className={css(
styles.tableTr,
className,
// TODO: Revert this back to just isExpandable !== undefined and refine docs around expandable table structure --
// We should note where isExpanded and isExpandable props must be passed in
(isExpandable !== undefined || isExpanded !== undefined) && styles.tableExpandableRow,
isExpanded && styles.modifiers.expanded,
isExpanded !== undefined && styles.tableExpandableRow,
(isExpanded || isContentExpanded) && styles.modifiers.expanded,
isEditable && inlineStyles.modifiers.inlineEditable,
isClickable && styles.modifiers.clickable,
isRowSelected && styles.modifiers.selected,
Expand Down
14 changes: 8 additions & 6 deletions packages/react-table/src/components/Table/examples/Table.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,9 +200,10 @@ Using an `OverflowMenu` in the actions column, allowing the actions to condense

To make a parent/child row pair expandable:

1. Make the first cell in every row an expandable cell by passing `TdExpandType` object to the `expand` prop on the `Td`
2. Wrap the content of each child row cell in `ExpandableRowContent`.
3. Enclose each parent/child row pair in a `Tbody` component with an `isExpanded` prop.
1. Pass `isExpandable` to `Table`.
1. Make the first cell in every row an expandable cell by passing `TdExpandType` object to the `expand` prop on the `Td`.
1. Wrap the content of each child row cell in `ExpandableRowContent`.
1. Pass `isExpanded` to `Tbody` and the `Tr` containing expandable content, and pass `isContentExpanded` to the `Tr` that acts as the "control row".

The `TdExpandType` expects an `OnCollapse` event handler that has the following signature:

Expand All @@ -226,9 +227,10 @@ Note: Table column widths will respond automatically when toggling expanded rows

To make a parent/child row pair compound expandable:

1. Pass a `TdCompoundExpandType` object to the `compoundExpand` prop on any `Td` that has an expandable child row
2. Wrap the content of each child row cell in `ExpandableRowContent`.
3. Each child `Tr` has an `isExpanded` prop.
1. Pass `isExpandable` to `Table`.
1. Pass a `TdCompoundExpandType` object to the `compoundExpand` prop on any `Td` that has an expandable child row.
1. Wrap the content of each child row cell in `ExpandableRowContent`.
1. Pass `isExpanded` to `Tbody` and the `Tr` containing expandable content, and pass `isContentExpanded` to the `Tr` that acts as the "control row".

The `TdCompoundExpandType` expects an `OnExpand` event handler with the following signature

Expand Down
8 changes: 4 additions & 4 deletions packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
const isRowExpanded = !!expandedCellKey;
return (
<Tbody key={repo.name} isExpanded={isRowExpanded}>
<Tr isExpanded={isRowExpanded} isControlRow>
<Tr isContentExpanded={isRowExpanded} isControlRow>
<Td width={25} dataLabel={columnNames.name} component="th">
<a href="#">{repo.name}</a>
</Td>
Expand Down Expand Up @@ -106,21 +106,21 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
<a href="#">Open in GitHub</a>
</Td>
</Tr>
<Tr isExpanded={columnNames[expandedCellKey] === columnNames.branches} isExpandable>
<Tr isExpanded={columnNames[expandedCellKey] === columnNames.branches}>
<Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
<ExpandableRowContent>
<div>Expanded content for {repo.name}: branches goes here!</div>
</ExpandableRowContent>
</Td>
</Tr>
<Tr isExpanded={columnNames[expandedCellKey] === columnNames.prs} isExpandable>
<Tr isExpanded={columnNames[expandedCellKey] === columnNames.prs}>
<Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
<ExpandableRowContent>
<div>Expanded content for {repo.name}: prs goes here!</div>
</ExpandableRowContent>
</Td>
</Tr>
<Tr isExpanded={columnNames[expandedCellKey] === columnNames.workspaces} isExpandable>
<Tr isExpanded={columnNames[expandedCellKey] === columnNames.workspaces}>
<Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
<ExpandableRowContent>
<div>Expanded content for {repo.name}: workspaces goes here!</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-table/src/components/Table/examples/TableExpandable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ export const TableExpandable: React.FunctionComponent = () => {
}
return (
<Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
<Tr isExpanded={isRepoExpanded(repo)}>
<Tr isContentExpanded={isRepoExpanded(repo)}>
<Td
expand={
repo.details
Expand All @@ -177,7 +177,7 @@ export const TableExpandable: React.FunctionComponent = () => {
<Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
</Tr>
{repo.details ? (
<Tr isExpandable isExpanded={isRepoExpanded(repo)}>
<Tr isExpanded={isRepoExpanded(repo)}>
{!childIsFullWidth ? <Td /> : null}
{repo.details.detail1 ? (
<Td dataLabel="Repo detail 1" noPadding={childHasNoPadding} colSpan={detail1Colspan}>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-table/src/components/Table/examples/TableNestedExpandable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
</Thead>
{teams.map((team, rowIndex) => (
<Tbody key={team.name} isExpanded={isTeamExpanded(team)}>
<Tr isExpanded={isTeamExpanded(team)}>
<Tr isContentExpanded={isTeamExpanded(team)}>
<Td
expand={{
rowIndex,
Expand All @@ -104,7 +104,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
</Button>
</Td>
</Tr>
<Tr isExpanded={isTeamExpanded(team)} isExpandable>
<Tr isExpanded={isTeamExpanded(team)}>
<Td dataLabel={`Team ${team.name} description`} colSpan={6}>
<ExpandableRowContent>{team.description}</ExpandableRowContent>
</Td>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export const TableExpandable: React.FunctionComponent = () => {
</Thead>
{repositories.map((repo, rowIndex) => (
<Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
<Tr isExpanded={isRepoExpanded(repo)}>
<Tr isContentExpanded={isRepoExpanded(repo)}>
<Td
expand={
repo.nestedComponent
Expand All @@ -163,7 +163,7 @@ export const TableExpandable: React.FunctionComponent = () => {
</Td>
</Tr>
{repo.nestedComponent ? (
<Tr isExpandable isExpanded={isRepoExpanded(repo)}>
<Tr isExpanded={isRepoExpanded(repo)}>
<Td
noPadding={repo.noPadding}
dataLabel={`${columnNames.name} expended`}
Expand Down
4 changes: 2 additions & 2 deletions packages/react-table/src/components/Table/examples/TableStripedExpandable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
}
return (
<Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
<Tr isExpanded={isRepoExpanded(repo)}>
<Tr isContentExpanded={isRepoExpanded(repo)}>
<Td
expand={
repo.details
Expand All @@ -173,7 +173,7 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
<Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
</Tr>
{repo.details ? (
<Tr isExpanded={isRepoExpanded(repo)} isExpandable>
<Tr isExpanded={isRepoExpanded(repo)}>
{!childIsFullWidth ? <Td /> : null}
{repo.details.detail1 ? (
<Td dataLabel="Repo detail 1" noPadding={childHasNoPadding} colSpan={detail1Colspan}>
Expand Down
8 changes: 4 additions & 4 deletions packages/react-table/src/demos/examples/TableCompoundExpansion.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -216,7 +216,7 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
const isRowExpanded = !!expandedCellKey;
return (
<Tbody key={repo.name} isExpanded={isRowExpanded}>
<Tr isExpanded={isRowExpanded} isControlRow>
<Tr isContentExpanded={isRowExpanded} isControlRow>
<Td dataLabel={columnNames.name} component="th">
<a href="#">{repo.name}</a>
</Td>
Expand Down Expand Up @@ -259,21 +259,21 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
</Td>
</Tr>

<Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.branches} isExpandable>
<Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.branches}>
<Td dataLabel={columnNames[expandedCellKey]} noPadding colSpan={7}>
<ExpandableRowContent hasNoBackground>
<NestedItemsTable />
</ExpandableRowContent>
</Td>
</Tr>
<Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.prs} isExpandable>
<Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.prs}>
<Td dataLabel={columnNames[expandedCellKey]} colSpan={7}>
<ExpandableRowContent>
<div>Expanded content for {repo.name}: prs goes here!</div>
</ExpandableRowContent>
</Td>
</Tr>
<Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.workspaces} isExpandable>
<Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.workspaces}>
<Td dataLabel={columnNames[expandedCellKey]} colSpan={7}>
<ExpandableRowContent>
<div>Expanded content for {repo.name}: workspaces goes here!</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -175,7 +175,7 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {

{serverData.map((server, serverIndex) => (
<Tbody key={server.name} isExpanded={isServerExpanded(server)}>
<Tr isExpanded={isServerExpanded(server)}>
<Tr isContentExpanded={isServerExpanded(server)}>
<Td
expand={
server.details
Expand All @@ -195,7 +195,7 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {
<Td>{server?.workspaces}</Td>
<Td>{server?.status?.title}</Td>
</Tr>
<Tr isExpandable isExpanded={isServerExpanded(server)}>
<Tr isExpanded={isServerExpanded(server)}>
<Td></Td>
<Td colSpan={expandableColumns.length}>
<ExpandableRowContent>{server?.details}</ExpandableRowContent>
Expand Down
Loading
Loading