fix(Table): removed divider for expanded rows

Author: Eric Olkowski

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"

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:^",

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"
   },

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"
   },

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

@@ -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 */
@@ -46,6 +48,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
   children,
   className,
   isExpanded,
+  isExpandable,
   isEditable,
   isHidden = false,
   isClickable = false,
@@ -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);
 
@@ -96,7 +99,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
         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,

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

@@ -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" />
@@ -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
@@ -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}>

packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx

@@ -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" />
@@ -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
@@ -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`}

packages/react-table/src/demos/examples/TableExpandCollapseAll.tsx

@@ -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
@@ -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
@@ -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>

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"
   }
 }

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);