diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 076b799a0bb..279896fb005 100644 --- a/packages/react-core/package.json +++ b/packages/react-core/package.json @@ -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" diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json index 0995f9823ee..06ce7b1cb59 100644 --- a/packages/react-docs/package.json +++ b/packages/react-docs/package.json @@ -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:^", diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json index 072f151b6f3..ad01692df7f 100644 --- a/packages/react-icons/package.json +++ b/packages/react-icons/package.json @@ -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" }, diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index bc3cb5a57d4..2c296882274 100644 --- a/packages/react-styles/package.json +++ b/packages/react-styles/package.json @@ -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" }, diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx index 74ed9fb7c92..d0335c465f1 100644 --- a/packages/react-table/src/components/Table/Table.tsx +++ b/packages/react-table/src/components/Table/Table.tsx @@ -59,7 +59,7 @@ export interface TableProps extends React.HTMLProps, 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; diff --git a/packages/react-table/src/components/Table/Tr.tsx b/packages/react-table/src/components/Table/Tr.tsx index 4a3a753e8c5..588855236e9 100644 --- a/packages/react-table/src/components/Table/Tr.tsx +++ b/packages/react-table/src/components/Table/Tr.tsx @@ -14,12 +14,14 @@ export interface TrProps extends Omit, 'onR innerRef?: React.Ref; /** 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 */ @@ -48,7 +50,7 @@ const TrBase: React.FunctionComponent = ({ children, className, isExpanded, - isExpandable, + isContentExpanded, isEditable, isHidden = false, isClickable = false, @@ -78,7 +80,7 @@ const TrBase: React.FunctionComponent = ({ }; } - const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded && isExpandable); + const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded); const { registerSelectableRow, hasAnimations } = useContext(TableContext); @@ -99,10 +101,8 @@ const TrBase: React.FunctionComponent = ({ 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, diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md index d73a86cb541..fbd7b40ae0a 100644 --- a/packages/react-table/src/components/Table/examples/Table.md +++ b/packages/react-table/src/components/Table/examples/Table.md @@ -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: @@ -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 diff --git a/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx b/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx index 10310322acb..9ea8ef000a1 100644 --- a/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx +++ b/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx @@ -74,7 +74,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => { const isRowExpanded = !!expandedCellKey; return ( - + {repo.name} @@ -106,21 +106,21 @@ export const TableCompoundExpandable: React.FunctionComponent = () => { Open in GitHub - +
Expanded content for {repo.name}: branches goes here!
- +
Expanded content for {repo.name}: prs goes here!
- +
Expanded content for {repo.name}: workspaces goes here!
diff --git a/packages/react-table/src/components/Table/examples/TableExpandable.tsx b/packages/react-table/src/components/Table/examples/TableExpandable.tsx index a4b1404b01e..fc03923a258 100644 --- a/packages/react-table/src/components/Table/examples/TableExpandable.tsx +++ b/packages/react-table/src/components/Table/examples/TableExpandable.tsx @@ -157,7 +157,7 @@ export const TableExpandable: React.FunctionComponent = () => { } return ( - + { {repo.lastCommit} {repo.details ? ( - + {!childIsFullWidth ? : null} {repo.details.detail1 ? ( diff --git a/packages/react-table/src/components/Table/examples/TableNestedExpandable.tsx b/packages/react-table/src/components/Table/examples/TableNestedExpandable.tsx index 9a99ae82f8b..50fcf264bd3 100644 --- a/packages/react-table/src/components/Table/examples/TableNestedExpandable.tsx +++ b/packages/react-table/src/components/Table/examples/TableNestedExpandable.tsx @@ -85,7 +85,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => { {teams.map((team, rowIndex) => ( - + { - + {team.description} diff --git a/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx b/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx index f6b452e525a..90a37c04a77 100644 --- a/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx +++ b/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx @@ -141,7 +141,7 @@ export const TableExpandable: React.FunctionComponent = () => { {repositories.map((repo, rowIndex) => ( - + { {repo.nestedComponent ? ( - + { } return ( - + { {repo.lastCommit} {repo.details ? ( - + {!childIsFullWidth ? : null} {repo.details.detail1 ? ( diff --git a/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx b/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx index ca611252189..912580b07df 100644 --- a/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx +++ b/packages/react-table/src/demos/examples/TableCompoundExpansion.tsx @@ -216,7 +216,7 @@ export const TableCompoundExpansion: React.FunctionComponent = () => { const isRowExpanded = !!expandedCellKey; return ( - + {repo.name} @@ -259,21 +259,21 @@ export const TableCompoundExpansion: React.FunctionComponent = () => { - + - +
Expanded content for {repo.name}: prs goes here!
- +
Expanded content for {repo.name}: workspaces goes here!
diff --git a/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx b/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx index 16c7ea137d0..d3c23b5a326 100644 --- a/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx +++ b/packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx @@ -175,7 +175,7 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => { {serverData.map((server, serverIndex) => ( - + { {server?.workspaces} {server?.status?.title} - + {server?.details} diff --git a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap index 776843206ce..96420adbaac 100644 --- a/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap +++ b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap @@ -1606,6 +1606,7 @@ exports[`Table Collapsible nested table 1`] = ` data-ouia-component-id="OUIA-Generated-TableRow-182" data-ouia-component-type="PF6/TableRow" data-ouia-safe="true" + hidden="" >