Skip to content

Commit cca6678

Browse files
thatblindgeyethatblindgeye
authored
fix(Tables): updated animations to beta (#11927)
* fix(Tables): updated animations to beta * Updated per table discussion w coker and katie * Updated snapshots * Updated docs verbiage * Bumped core versions * Bumped core for latest fix --------- Co-authored-by: Eric Olkowski <git.eric@thatblindgeye.dev>
1 parent f6f95a9 commit cca6678

17 files changed

Lines changed: 67 additions & 48 deletions

File tree

‎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.38",
57+
"@patternfly/patternfly": "6.3.0-prerelease.40",
5858
"case-anything": "^3.1.2",
5959
"css": "^3.0.0",
6060
"fs-extra": "^11.3.0"

‎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.38",
26+
"@patternfly/patternfly": "6.3.0-prerelease.40",
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.38",
36+
"@patternfly/patternfly": "6.3.0-prerelease.40",
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.38",
22+
"@patternfly/patternfly": "6.3.0-prerelease.40",
2323
"change-case": "^5.4.4",
2424
"fs-extra": "^11.3.0"
2525
},

‎packages/react-table/src/components/Table/Table.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps
5959
isStriped?: boolean;
6060
/** Flag indicating this table contains expandable rows. */
6161
isExpandable?: boolean;
62-
/** Flag indicating whether expandable rows within the table have animations. Expandable rows cannot be dynamically rendered. This prop
62+
/** @beta Flag indicating whether expandable rows within the table have animations. Expandable rows cannot be dynamically rendered. This prop
6363
* will be removed in the next breaking change, with the default behavior becoming animations always being enabled.
6464
*/
6565
hasAnimations?: boolean;

‎packages/react-table/src/components/Table/Tr.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,14 @@ export interface TrProps extends Omit<React.HTMLProps<HTMLTableRowElement>, 'onR
1414
innerRef?: React.Ref<any>;
1515
/** Flag indicating the Tr is hidden */
1616
isHidden?: boolean;
17-
/** Only applicable to Tr within the Tbody and determines if the expandable row content is expanded or not.
17+
/** Flag indicating whether an "expandable" Tr is expanded or not. Only applicable to a Tr within a Tbody.
1818
* 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
1919
*/
2020
isExpanded?: boolean;
21-
/** Flag to indicate that a row is expandable. Only applicable to a tr that is intended to collapse or expand. */
22-
isExpandable?: boolean;
21+
/** Flag indicating that the "control row" Tr has an expandable sibling Tr that is expanded or not. Only applicable to
22+
* a Tr within a Tbody, and should have the same value as an expandable Tr's isExpanded prop.
23+
*/
24+
isContentExpanded?: boolean;
2325
/** Only applicable to Tr within the Tbody: Whether the row is editable */
2426
isEditable?: boolean;
2527
/** Flag which adds hover styles for the clickable table row */
@@ -48,7 +50,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
4850
children,
4951
className,
5052
isExpanded,
51-
isExpandable,
53+
isContentExpanded,
5254
isEditable,
5355
isHidden = false,
5456
isClickable = false,
@@ -78,7 +80,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
7880
};
7981
}
8082

81-
const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded && isExpandable);
83+
const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded);
8284

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

@@ -99,10 +101,8 @@ const TrBase: React.FunctionComponent<TrProps> = ({
99101
className={css(
100102
styles.tableTr,
101103
className,
102-
// TODO: Revert this back to just isExpandable !== undefined and refine docs around expandable table structure --
103-
// We should note where isExpanded and isExpandable props must be passed in
104-
(isExpandable !== undefined || isExpanded !== undefined) && styles.tableExpandableRow,
105-
isExpanded && styles.modifiers.expanded,
104+
isExpanded !== undefined && styles.tableExpandableRow,
105+
(isExpanded || isContentExpanded) && styles.modifiers.expanded,
106106
isEditable && inlineStyles.modifiers.inlineEditable,
107107
isClickable && styles.modifiers.clickable,
108108
isRowSelected && styles.modifiers.selected,

‎packages/react-table/src/components/Table/examples/Table.md‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -200,9 +200,10 @@ Using an `OverflowMenu` in the actions column, allowing the actions to condense
200200

201201
To make a parent/child row pair expandable:
202202

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

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

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

227228
To make a parent/child row pair compound expandable:
228229

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

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

‎packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
7474
const isRowExpanded = !!expandedCellKey;
7575
return (
7676
<Tbody key={repo.name} isExpanded={isRowExpanded}>
77-
<Tr isExpanded={isRowExpanded} isControlRow>
77+
<Tr isContentExpanded={isRowExpanded} isControlRow>
7878
<Td width={25} dataLabel={columnNames.name} component="th">
7979
<a href="#">{repo.name}</a>
8080
</Td>
@@ -106,21 +106,21 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
106106
<a href="#">Open in GitHub</a>
107107
</Td>
108108
</Tr>
109-
<Tr isExpanded={columnNames[expandedCellKey] === columnNames.branches} isExpandable>
109+
<Tr isExpanded={columnNames[expandedCellKey] === columnNames.branches}>
110110
<Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
111111
<ExpandableRowContent>
112112
<div>Expanded content for {repo.name}: branches goes here!</div>
113113
</ExpandableRowContent>
114114
</Td>
115115
</Tr>
116-
<Tr isExpanded={columnNames[expandedCellKey] === columnNames.prs} isExpandable>
116+
<Tr isExpanded={columnNames[expandedCellKey] === columnNames.prs}>
117117
<Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
118118
<ExpandableRowContent>
119119
<div>Expanded content for {repo.name}: prs goes here!</div>
120120
</ExpandableRowContent>
121121
</Td>
122122
</Tr>
123-
<Tr isExpanded={columnNames[expandedCellKey] === columnNames.workspaces} isExpandable>
123+
<Tr isExpanded={columnNames[expandedCellKey] === columnNames.workspaces}>
124124
<Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
125125
<ExpandableRowContent>
126126
<div>Expanded content for {repo.name}: workspaces goes here!</div>

‎packages/react-table/src/components/Table/examples/TableExpandable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -157,7 +157,7 @@ export const TableExpandable: React.FunctionComponent = () => {
157157
}
158158
return (
159159
<Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
160-
<Tr isExpanded={isRepoExpanded(repo)}>
160+
<Tr isContentExpanded={isRepoExpanded(repo)}>
161161
<Td
162162
expand={
163163
repo.details
@@ -177,7 +177,7 @@ export const TableExpandable: React.FunctionComponent = () => {
177177
<Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
178178
</Tr>
179179
{repo.details ? (
180-
<Tr isExpandable isExpanded={isRepoExpanded(repo)}>
180+
<Tr isExpanded={isRepoExpanded(repo)}>
181181
{!childIsFullWidth ? <Td /> : null}
182182
{repo.details.detail1 ? (
183183
<Td dataLabel="Repo detail 1" noPadding={childHasNoPadding} colSpan={detail1Colspan}>

‎packages/react-table/src/components/Table/examples/TableNestedExpandable.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
8585
</Thead>
8686
{teams.map((team, rowIndex) => (
8787
<Tbody key={team.name} isExpanded={isTeamExpanded(team)}>
88-
<Tr isExpanded={isTeamExpanded(team)}>
88+
<Tr isContentExpanded={isTeamExpanded(team)}>
8989
<Td
9090
expand={{
9191
rowIndex,
@@ -104,7 +104,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
104104
</Button>
105105
</Td>
106106
</Tr>
107-
<Tr isExpanded={isTeamExpanded(team)} isExpandable>
107+
<Tr isExpanded={isTeamExpanded(team)}>
108108
<Td dataLabel={`Team ${team.name} description`} colSpan={6}>
109109
<ExpandableRowContent>{team.description}</ExpandableRowContent>
110110
</Td>

0 commit comments

Comments
 (0)