From a7a36ea2db68480a3ba2ae5b0b0eedfdb6794341 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 8 May 2025 13:23:33 -0400 Subject: [PATCH 1/2] fix(Table): removed divider for expanded rows --- packages/react-core/package.json | 2 +- packages/react-docs/package.json | 2 +- packages/react-icons/package.json | 2 +- packages/react-styles/package.json | 2 +- .../react-table/src/components/Table/Tr.tsx | 9 ++++--- .../Table/examples/TableExpandable.tsx | 6 ++--- .../examples/TableNestedTableExpandable.tsx | 6 ++--- .../demos/examples/TableExpandCollapseAll.tsx | 6 ++--- packages/react-tokens/package.json | 4 +-- .../react-tokens/scripts/generateTokens.mjs | 2 +- yarn.lock | 27 ++++++++++++------- 11 files changed, 39 insertions(+), 29 deletions(-) diff --git a/packages/react-core/package.json b/packages/react-core/package.json index 7c206b8a772..d2c11dcc55e 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.6", + "@patternfly/patternfly": "6.3.0-prerelease.15", "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 53e6bd812f2..7aadd4fe274 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.6", + "@patternfly/patternfly": "6.3.0-prerelease.15", "@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 fb4297330e8..f4344f66aca 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.6", + "@patternfly/patternfly": "6.3.0-prerelease.15", "fs-extra": "^11.3.0", "tslib": "^2.8.1" }, diff --git a/packages/react-styles/package.json b/packages/react-styles/package.json index 55334492b0e..54221b76d2a 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.6", + "@patternfly/patternfly": "6.3.0-prerelease.15", "change-case": "^5.4.4", "fs-extra": "^11.3.0" }, diff --git a/packages/react-table/src/components/Table/Tr.tsx b/packages/react-table/src/components/Table/Tr.tsx index 75bb1eb08f1..6e34c5e07b6 100644 --- a/packages/react-table/src/components/Table/Tr.tsx +++ b/packages/react-table/src/components/Table/Tr.tsx @@ -14,10 +14,12 @@ export interface TrProps extends Omit, 'onR innerRef?: React.Ref; /** Flag indicating the Tr is hidden */ isHidden?: boolean; - /** Only applicable to Tr within the Tbody: Makes the row expandable and determines if it's expanded or not. + /** Only applicable to Tr within the Tbody and determines if the expandable row content is expanded or not. * 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; /** Only applicable to Tr within the Tbody: Whether the row is editable */ isEditable?: boolean; /** Flag which adds hover styles for the clickable table row */ @@ -46,6 +48,7 @@ const TrBase: React.FunctionComponent = ({ children, className, isExpanded, + isExpandable, isEditable, isHidden = false, isClickable = false, @@ -75,7 +78,7 @@ const TrBase: React.FunctionComponent = ({ }; } - const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded); + const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded && isExpandable); const { registerSelectableRow } = useContext(TableContext); @@ -96,7 +99,7 @@ const TrBase: React.FunctionComponent = ({ className={css( styles.tableTr, className, - isExpanded !== undefined && styles.tableExpandableRow, + isExpandable !== undefined && styles.tableExpandableRow, isExpanded && styles.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isClickable && styles.modifiers.clickable, diff --git a/packages/react-table/src/components/Table/examples/TableExpandable.tsx b/packages/react-table/src/components/Table/examples/TableExpandable.tsx index 50f483ac8b3..14682dbcba7 100644 --- a/packages/react-table/src/components/Table/examples/TableExpandable.tsx +++ b/packages/react-table/src/components/Table/examples/TableExpandable.tsx @@ -116,7 +116,7 @@ export const TableExpandable: React.FunctionComponent = () => { id="toggle-compact" name="toggle-compact" /> - +
- + {repo.details ? ( - + {!childIsFullWidth ?
@@ -152,7 +152,7 @@ export const TableExpandable: React.FunctionComponent = () => { } return (
{ {repo.lastCommit}
: null} {repo.details.detail1 ? ( diff --git a/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx b/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx index b52495fe642..bd254d9d9ae 100644 --- a/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx +++ b/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx @@ -128,7 +128,7 @@ export const TableExpandable: React.FunctionComponent = () => { ]; return ( - +
{repositories.map((repo, rowIndex) => ( - + {repo.nestedComponent ? ( - +
@@ -141,7 +141,7 @@ export const TableExpandable: React.FunctionComponent = () => {
{
{ aria-label="Collapsible table data" > - +
- + - +
{ {serverData.map((server, serverIndex) => (
{ {server?.workspaces} {server?.status?.title}
{server?.details} diff --git a/packages/react-tokens/package.json b/packages/react-tokens/package.json index 34170d88740..15806653e27 100644 --- a/packages/react-tokens/package.json +++ b/packages/react-tokens/package.json @@ -29,8 +29,8 @@ "clean": "rimraf dist" }, "devDependencies": { - "@patternfly/patternfly": "6.3.0-prerelease.6", - "css": "^3.0.0", + "@adobe/css-tools": "^4.4.2", + "@patternfly/patternfly": "6.3.0-prerelease.15", "fs-extra": "^11.3.0" } } diff --git a/packages/react-tokens/scripts/generateTokens.mjs b/packages/react-tokens/scripts/generateTokens.mjs index 0e05c4ca10a..8da03dcdfd7 100644 --- a/packages/react-tokens/scripts/generateTokens.mjs +++ b/packages/react-tokens/scripts/generateTokens.mjs @@ -1,7 +1,7 @@ import { glob } from 'glob'; import { createRequire } from 'node:module'; import { dirname, basename, sep } from 'node:path'; -import { parse, stringify } from 'css'; +import { parse, stringify } from '@adobe/css-tools'; import { readFileSync } from 'node:fs'; const require = createRequire(import.meta.url); diff --git a/yarn.lock b/yarn.lock index 2ea0c0aa7eb..0341471bffe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12,6 +12,13 @@ __metadata: languageName: node linkType: hard +"@adobe/css-tools@npm:^4.4.2": + version: 4.4.2 + resolution: "@adobe/css-tools@npm:4.4.2" + checksum: 10c0/19433666ad18536b0ed05d4b53fbb3dd6ede266996796462023ec77a90b484890ad28a3e528cdf3ab8a65cb2fcdff5d8feb04db6bc6eed6ca307c40974239c94 + languageName: node + linkType: hard + "@ampproject/remapping@npm:^2.2.0": version: 2.3.0 resolution: "@ampproject/remapping@npm:2.3.0" @@ -3632,10 +3639,10 @@ __metadata: languageName: node linkType: hard -"@patternfly/patternfly@npm:6.3.0-prerelease.6": - version: 6.3.0-prerelease.6 - resolution: "@patternfly/patternfly@npm:6.3.0-prerelease.6" - checksum: 10c0/ceace4e78eaa5b5ea6da6cecf121a5d9c281d423be4a806332af8f90489f1ef80723762a3b3071e78653545ab89e7f9e773cffe215b6251c4eec34dee06dbcab +"@patternfly/patternfly@npm:6.3.0-prerelease.15": + version: 6.3.0-prerelease.15 + resolution: "@patternfly/patternfly@npm:6.3.0-prerelease.15" + checksum: 10c0/833780ce555cd5b8bbf1043fcedd578c4786904bda2766980875cf3cbbe80ed389fc6f76183fd20fc383620f4572c496c4d5eec7dc791a40dc4e03e82e6fe243 languageName: node linkType: hard @@ -3733,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.6" + "@patternfly/patternfly": "npm:6.3.0-prerelease.15" "@patternfly/react-icons": "workspace:^" "@patternfly/react-styles": "workspace:^" "@patternfly/react-tokens": "workspace:^" @@ -3754,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.6" + "@patternfly/patternfly": "npm:6.3.0-prerelease.15" "@patternfly/patternfly-a11y": "npm:5.1.0" "@patternfly/react-charts": "workspace:^" "@patternfly/react-code-editor": "workspace:^" @@ -3794,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.6" + "@patternfly/patternfly": "npm:6.3.0-prerelease.15" fs-extra: "npm:^11.3.0" tslib: "npm:^2.8.1" peerDependencies: @@ -3878,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.6" + "@patternfly/patternfly": "npm:6.3.0-prerelease.15" change-case: "npm:^5.4.4" fs-extra: "npm:^11.3.0" languageName: unknown @@ -3919,8 +3926,8 @@ __metadata: version: 0.0.0-use.local resolution: "@patternfly/react-tokens@workspace:packages/react-tokens" dependencies: - "@patternfly/patternfly": "npm:6.3.0-prerelease.6" - css: "npm:^3.0.0" + "@adobe/css-tools": "npm:^4.4.2" + "@patternfly/patternfly": "npm:6.3.0-prerelease.15" fs-extra: "npm:^11.3.0" languageName: unknown linkType: soft From fa039e671d7ad170c491d5f3f8c734ed7cb9b296 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 8 May 2025 13:43:39 -0400 Subject: [PATCH 2/2] Updated snapshots --- .../__snapshots__/RowWrapper.test.tsx.snap | 2 +- .../__snapshots__/Table.test.tsx.snap | 55 +++++++------------ 2 files changed, 20 insertions(+), 37 deletions(-) diff --git a/packages/react-table/src/components/Table/__tests__/__snapshots__/RowWrapper.test.tsx.snap b/packages/react-table/src/components/Table/__tests__/__snapshots__/RowWrapper.test.tsx.snap index ffa0f1be9f7..91dbf4b9afa 100644 --- a/packages/react-table/src/components/Table/__tests__/__snapshots__/RowWrapper.test.tsx.snap +++ b/packages/react-table/src/components/Table/__tests__/__snapshots__/RowWrapper.test.tsx.snap @@ -20,7 +20,7 @@ exports[`RowWrapper renders expanded correctly 1`] = `