Skip to content

fix(Table): removed divider for expanded rows #11815

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 2 commits into from
May 20, 2025
Merged

fix(Table): removed divider for expanded rows #11815

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a7a36ea
fix(Table): removed divider for expanded rows
May 8, 2025
fa039e6
Updated snapshots
May 8, 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.6",
"@patternfly/patternfly": "6.3.0-prerelease.15",
"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.6",
"@patternfly/patternfly": "6.3.0-prerelease.15",
"@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.6",
"@patternfly/patternfly": "6.3.0-prerelease.15",
"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.6",
"@patternfly/patternfly": "6.3.0-prerelease.15",
"change-case": "^5.4.4",
"fs-extra": "^11.3.0"
},
Expand Down
9 changes: 6 additions & 3 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,10 +14,12 @@ 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: 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 */
Expand Down Expand Up @@ -46,6 +48,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
children,
className,
isExpanded,
isExpandable,
isEditable,
isHidden = false,
isClickable = false,
Expand Down Expand Up @@ -75,7 +78,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
};
}

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

const { registerSelectableRow } = useContext(TableContext);

Expand All @@ -96,7 +99,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
className={css(
styles.tableTr,
className,
isExpanded !== undefined && styles.tableExpandableRow,
isExpandable !== undefined && styles.tableExpandableRow,
Comment thread
kmcfaul marked this conversation as resolved.
isExpanded && styles.modifiers.expanded,
isEditable && inlineStyles.modifiers.inlineEditable,
isClickable && styles.modifiers.clickable,
Expand Down
6 changes: 3 additions & 3 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 @@ -116,7 +116,7 @@ export const TableExpandable: React.FunctionComponent = () => {
id="toggle-compact"
name="toggle-compact"
/>
<Table aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined}>
<Table isExpandable aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined}>
<Thead>
<Tr>
<Th screenReaderText="Row expansion" />
Expand Down Expand Up @@ -152,7 +152,7 @@ export const TableExpandable: React.FunctionComponent = () => {
}
return (
<Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
<Tr>
<Tr isExpanded={isRepoExpanded(repo)}>
<Td
expand={
repo.details
Expand All @@ -172,7 +172,7 @@ export const TableExpandable: React.FunctionComponent = () => {
<Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
</Tr>
{repo.details ? (
<Tr isExpanded={isRepoExpanded(repo)}>
<Tr isExpandable isExpanded={isRepoExpanded(repo)}>
{!childIsFullWidth ? <Td /> : null}
{repo.details.detail1 ? (
<Td dataLabel="Repo detail 1" noPadding={childHasNoPadding} colSpan={detail1Colspan}>
Expand Down
6 changes: 3 additions & 3 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 @@ -128,7 +128,7 @@ export const TableExpandable: React.FunctionComponent = () => {
];

return (
<Table aria-label="Simple table">
<Table isExpandable aria-label="Simple table">
<Thead>
<Tr>
<Th screenReaderText="Row expansion" />
Expand All @@ -141,7 +141,7 @@ export const TableExpandable: React.FunctionComponent = () => {
</Thead>
{repositories.map((repo, rowIndex) => (
<Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
<Tr>
<Tr isExpanded={isRepoExpanded(repo)}>
<Td
expand={
repo.nestedComponent
Expand All @@ -163,7 +163,7 @@ export const TableExpandable: React.FunctionComponent = () => {
</Td>
</Tr>
{repo.nestedComponent ? (
<Tr isExpanded={isRepoExpanded(repo)}>
<Tr isExpandable isExpanded={isRepoExpanded(repo)}>
<Td
noPadding={repo.noPadding}
dataLabel={`${columnNames.name} expended`}
Expand Down
6 changes: 3 additions & 3 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 @@ -156,7 +156,7 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {
aria-label="Collapsible table data"
>
<Card component="div">
<Table aria-label="Collapsible table">
<Table isExpandable aria-label="Collapsible table">
<Thead>
<Tr>
<Th
Expand All @@ -175,7 +175,7 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {

{serverData.map((server, serverIndex) => (
<Tbody key={server.name} isExpanded={isServerExpanded(server)}>
<Tr>
<Tr isExpanded={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 isExpanded={isServerExpanded(server)}>
<Tr isExpandable isExpanded={isServerExpanded(server)}>
<Td></Td>
<Td colSpan={expandableColumns.length}>
<ExpandableRowContent>{server?.details}</ExpandableRowContent>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-tokens/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Copy link
Copy Markdown
Contributor Author

@thatblindgeye thatblindgeye May 8, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Context: the original css package was last updated in 2020 and we were getting build errors due to the @starting-style property from Core. This new package is a fork of the original but more up to date.

"@patternfly/patternfly": "6.3.0-prerelease.15",
"fs-extra": "^11.3.0"
}
}
2 changes: 1 addition & 1 deletion packages/react-tokens/scripts/generateTokens.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand Down
27 changes: 17 additions & 10 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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:^"
Expand All @@ -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:^"
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down
Loading