@patternfly/react-table 6.3.0-prerelease.9 → 6.3.1-prerelease.0

package/src/components/Table/examples/TableCompoundExpandable.tsx

@@ -4,7 +4,6 @@ import { Table, Thead, Tr, Th, Tbody, Td, TdProps, ExpandableRowContent } from '
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 interface Repository {
   name: string;
@@ -59,7 +58,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
   });
 
   return (
-    <Table aria-label="Compound expandable table">
+    <Table aria-label="Compound expandable table" isExpandable hasAnimations>
       <Thead>
         <Tr>
           <Th>{columnNames.name}</Th>
@@ -75,7 +74,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
         const isRowExpanded = !!expandedCellKey;
         return (
           <Tbody key={repo.name} isExpanded={isRowExpanded}>
-            <Tr isControlRow>
+            <Tr isContentExpanded={isRowExpanded} isControlRow>
               <Td width={25} dataLabel={columnNames.name} component="th">
                 <a href="#">{repo.name}</a>
               </Td>
@@ -107,24 +106,27 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
                 <a href="#">Open in GitHub</a>
               </Td>
             </Tr>
-            {isRowExpanded ? (
-              <Tr isExpanded={isRowExpanded}>
-                <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
-                  <ExpandableRowContent>
-                    <div className={spacing.mMd}>
-                      Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem
-                      ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum
-                      sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit
-                      dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor.
-                      Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem
-                      ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum
-                      sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit
-                      dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor. Lorem ipsum sit dolor.
-                    </div>
-                  </ExpandableRowContent>
-                </Td>
-              </Tr>
-            ) : null}
+            <Tr isExpanded={columnNames[expandedCellKey] === columnNames.branches}>
+              <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
+                <ExpandableRowContent>
+                  <div>Expanded content for {repo.name}: branches goes here!</div>
+                </ExpandableRowContent>
+              </Td>
+            </Tr>
+            <Tr isExpanded={columnNames[expandedCellKey] === columnNames.prs}>
+              <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
+                <ExpandableRowContent>
+                  <div>Expanded content for {repo.name}: prs goes here!</div>
+                </ExpandableRowContent>
+              </Td>
+            </Tr>
+            <Tr isExpanded={columnNames[expandedCellKey] === columnNames.workspaces}>
+              <Td dataLabel={columnNames[expandedCellKey]} colSpan={6}>
+                <ExpandableRowContent>
+                  <div>Expanded content for {repo.name}: workspaces goes here!</div>
+                </ExpandableRowContent>
+              </Td>
+            </Tr>
           </Tbody>
         );
       })}

package/src/components/Table/examples/TableExpandable.tsx

@@ -116,7 +116,12 @@ export const TableExpandable: React.FunctionComponent = () => {
         id="toggle-compact"
         name="toggle-compact"
       />
-      <Table aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined}>
+      <Table
+        isExpandable
+        hasAnimations
+        aria-label="Expandable table"
+        variant={isExampleCompact ? 'compact' : undefined}
+      >
         <Thead>
           <Tr>
             <Th screenReaderText="Row expansion" />
@@ -152,7 +157,7 @@ export const TableExpandable: React.FunctionComponent = () => {
           }
           return (
             <Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
-              <Tr>
+              <Tr isContentExpanded={isRepoExpanded(repo)}>
                 <Td
                   expand={
                     repo.details

package/src/components/Table/examples/TableMisc.tsx

@@ -1,5 +1,4 @@
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-/* eslint-disable camelcase */
 import t_global_background_color_secondary_default from '@patternfly/react-tokens/dist/esm/t_global_background_color_secondary_default';
 
 interface Repository {

package/src/components/Table/examples/TableNestedExpandable.tsx

@@ -61,7 +61,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
 
   return (
     <InnerScrollContainer>
-      <Table aria-label="Nested column headers with expandable rows table" gridBreakPoint="">
+      <Table isExpandable hasAnimations aria-label="Nested column headers with expandable rows table" gridBreakPoint="">
         <Thead hasNestedHeader>
           <Tr>
             <Th screenReaderText="Row expansion" rowSpan={2} />
@@ -85,7 +85,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
         </Thead>
         {teams.map((team, rowIndex) => (
           <Tbody key={team.name} isExpanded={isTeamExpanded(team)}>
-            <Tr>
+            <Tr isContentExpanded={isTeamExpanded(team)}>
               <Td
                 expand={{
                   rowIndex,

package/src/components/Table/examples/TableNestedTableExpandable.tsx

@@ -128,7 +128,7 @@ export const TableExpandable: React.FunctionComponent = () => {
   ];
 
   return (
-    <Table aria-label="Simple table">
+    <Table isExpandable hasAnimations 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 isContentExpanded={isRepoExpanded(repo)}>
             <Td
               expand={
                 repo.nestedComponent

package/src/components/Table/examples/TableStripedExpandable.tsx

@@ -112,7 +112,13 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
         id="toggle-compact-striped"
         name="toggle-compact-striped"
       />
-      <Table aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined} isStriped isExpandable>
+      <Table
+        aria-label="Expandable table"
+        variant={isExampleCompact ? 'compact' : undefined}
+        isStriped
+        isExpandable
+        hasAnimations
+      >
         <Thead>
           <Tr>
             <Th screenReaderText="Row expansion" />
@@ -148,7 +154,7 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
           }
           return (
             <Tbody key={repo.name} isExpanded={isRepoExpanded(repo)}>
-              <Tr>
+              <Tr isContentExpanded={isRepoExpanded(repo)}>
                 <Td
                   expand={
                     repo.details

package/src/demos/DashboardHeader.tsx

@@ -23,7 +23,6 @@ import {
   ToolbarItem,
   PageToggleButton
 } from '@patternfly/react-core';
-import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -132,9 +131,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
     <Masthead>
       <MastheadMain>
         <MastheadToggle>
-          <PageToggleButton variant="plain" aria-label="Global navigation">
-            <BarsIcon />
-          </PageToggleButton>
+          <PageToggleButton isHamburgerButton aria-label="Global navigation" />
         </MastheadToggle>
         <MastheadBrand>
           <MastheadLogo>{patternflyLogo}</MastheadLogo>
@@ -159,7 +156,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
               )}
               <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
                 <ToolbarItem>
-                  <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+                  <Button aria-label="Settings" isSettings variant="plain" />
                 </ToolbarItem>
                 <ToolbarItem>
                   <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />

package/src/demos/examples/TableCompoundExpansion.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 import { ActionsColumn, Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent } from '@patternfly/react-table';
 import {
   Button,
-  Card,
   Flex,
   FlexItem,
   MenuToggle,
@@ -22,7 +21,6 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
 export const TableCompoundExpansion: React.FunctionComponent = () => {
   // In real usage, this data would come from some external source like an API via props.
@@ -200,88 +198,93 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
   return (
     <DashboardWrapper hasPageTemplateTitle>
       <PageSection padding={{ default: 'noPadding', xl: 'padding' }} aria-label="Compound expandable table data ">
-        <Card>
-          {tableToolbar}
-          <Table aria-label="Compound expandable table">
-            <Thead>
-              <Tr>
-                <Th>{columnNames.name}</Th>
-                <Th>{columnNames.branches}</Th>
-                <Th>{columnNames.prs}</Th>
-                <Th>{columnNames.workspaces}</Th>
-                <Th>{columnNames.lastCommit}</Th>
-                <Th screenReaderText="URL" />
-                <Th screenReaderText="Actions" />
-              </Tr>
-            </Thead>
-            {repositories.map((repo, rowIndex) => {
-              const expandedCellKey = expandedCells[repo.name];
-              const isRowExpanded = !!expandedCellKey;
-              return (
-                <Tbody key={repo.name} isExpanded={isRowExpanded}>
-                  <Tr>
-                    <Td dataLabel={columnNames.name} component="th">
-                      <a href="#">{repo.name}</a>
-                    </Td>
-                    <Td
-                      dataLabel={columnNames.branches}
-                      compoundExpand={compoundExpandParams(repo, 'branches', rowIndex, 1)}
-                    >
-                      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                        <FlexItem>
-                          <CodeBranchIcon key="icon" />
-                        </FlexItem>
-                        <FlexItem>{repo.branches}</FlexItem>
-                      </Flex>
-                    </Td>
-                    <Td dataLabel={columnNames.prs} compoundExpand={compoundExpandParams(repo, 'prs', rowIndex, 2)}>
-                      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                        <FlexItem>
-                          <CodeIcon key="icon" />
-                        </FlexItem>
-                        <FlexItem>{repo.prs}</FlexItem>
-                      </Flex>{' '}
-                    </Td>
-                    <Td
-                      dataLabel={columnNames.workspaces}
-                      compoundExpand={compoundExpandParams(repo, 'workspaces', rowIndex, 3)}
-                    >
-                      <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-                        <FlexItem>
-                          <CubeIcon key="icon" />
-                        </FlexItem>
-                        <FlexItem>{repo.workspaces}</FlexItem>
-                      </Flex>
-                    </Td>
-                    <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
-                    <Td>
-                      <a href="#">Open in GitHub</a>
-                    </Td>
-                    <Td isActionCell>
-                      <ActionsColumn items={defaultActions()} />
-                    </Td>
-                  </Tr>
-                  {isRowExpanded ? (
-                    <Tr isExpanded={isRowExpanded}>
-                      <Td dataLabel={columnNames[expandedCellKey]} noPadding colSpan={7}>
-                        {expandedCellKey === 'branches' && repo.name === 'siemur/test-space' ? (
-                          <NestedItemsTable />
-                        ) : (
-                          <ExpandableRowContent>
-                            <div className={spacing.mMd}>
-                              Expanded content for {repo.name}: {expandedCellKey} goes here!
-                            </div>
-                          </ExpandableRowContent>
-                        )}
-                      </Td>
-                    </Tr>
-                  ) : null}
-                </Tbody>
-              );
-            })}
-          </Table>
-          {renderPagination('bottom', false)}
-        </Card>
+        {tableToolbar}
+        <Table isExpandable hasAnimations aria-label="Compound expandable table">
+          <Thead>
+            <Tr>
+              <Th>{columnNames.name}</Th>
+              <Th>{columnNames.branches}</Th>
+              <Th>{columnNames.prs}</Th>
+              <Th>{columnNames.workspaces}</Th>
+              <Th>{columnNames.lastCommit}</Th>
+              <Th screenReaderText="URL" />
+              <Th screenReaderText="Actions" />
+            </Tr>
+          </Thead>
+          {repositories.map((repo, rowIndex) => {
+            const expandedCellKey = expandedCells[repo.name];
+            const isRowExpanded = !!expandedCellKey;
+            return (
+              <Tbody key={repo.name} isExpanded={isRowExpanded}>
+                <Tr isContentExpanded={isRowExpanded} isControlRow>
+                  <Td dataLabel={columnNames.name} component="th">
+                    <a href="#">{repo.name}</a>
+                  </Td>
+                  <Td
+                    dataLabel={columnNames.branches}
+                    compoundExpand={compoundExpandParams(repo, 'branches', rowIndex, 1)}
+                  >
+                    <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                      <FlexItem>
+                        <CodeBranchIcon key="icon" />
+                      </FlexItem>
+                      <FlexItem>{repo.branches}</FlexItem>
+                    </Flex>
+                  </Td>
+                  <Td dataLabel={columnNames.prs} compoundExpand={compoundExpandParams(repo, 'prs', rowIndex, 2)}>
+                    <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                      <FlexItem>
+                        <CodeIcon key="icon" />
+                      </FlexItem>
+                      <FlexItem>{repo.prs}</FlexItem>
+                    </Flex>{' '}
+                  </Td>
+                  <Td
+                    dataLabel={columnNames.workspaces}
+                    compoundExpand={compoundExpandParams(repo, 'workspaces', rowIndex, 3)}
+                  >
+                    <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                      <FlexItem>
+                        <CubeIcon key="icon" />
+                      </FlexItem>
+                      <FlexItem>{repo.workspaces}</FlexItem>
+                    </Flex>
+                  </Td>
+                  <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
+                  <Td>
+                    <a href="#">Open in GitHub</a>
+                  </Td>
+                  <Td isActionCell>
+                    <ActionsColumn items={defaultActions()} />
+                  </Td>
+                </Tr>
+
+                <Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.branches}>
+                  <Td dataLabel={columnNames[expandedCellKey]} noPadding colSpan={7}>
+                    <ExpandableRowContent hasNoBackground>
+                      <NestedItemsTable />
+                    </ExpandableRowContent>
+                  </Td>
+                </Tr>
+                <Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.prs}>
+                  <Td dataLabel={columnNames[expandedCellKey]} colSpan={7}>
+                    <ExpandableRowContent>
+                      <div>Expanded content for {repo.name}: prs goes here!</div>
+                    </ExpandableRowContent>
+                  </Td>
+                </Tr>
+                <Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.workspaces}>
+                  <Td dataLabel={columnNames[expandedCellKey]} colSpan={7}>
+                    <ExpandableRowContent>
+                      <div>Expanded content for {repo.name}: workspaces goes here!</div>
+                    </ExpandableRowContent>
+                  </Td>
+                </Tr>
+              </Tbody>
+            );
+          })}
+        </Table>
+        {renderPagination('bottom', false)}
       </PageSection>
     </DashboardWrapper>
   );

package/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 hasAnimations 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 isContentExpanded={isServerExpanded(server)}>
                     <Td
                       expand={
                         server.details

package/src/demos/examples/TableSortableResponsive.tsx

@@ -49,14 +49,14 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
   const sortRows = (rows: SampleDataRow[], sortIndex: number, sortDirection: Direction) =>
     [...rows].sort((a, b) => {
       let returnValue = 0;
-      if (sortIndex === 0 || sortIndex === 7) {
-        returnValue = 1;
-      } else if (typeof Object.values(a)[sortIndex] === 'number') {
+      if (typeof Object.values(a)[sortIndex] === 'number') {
         // numeric sort
         returnValue = Object.values(a)[sortIndex] - Object.values(b)[sortIndex];
       } else {
-        // string sort
-        returnValue = Object.values(a)[sortIndex].localeCompare(Object.values(b)[sortIndex]);
+        // string sort using natural sort
+        returnValue = Object.values(a)[sortIndex].localeCompare(Object.values(b)[sortIndex], undefined, {
+          numeric: true
+        });
       }
       if (sortDirection === 'desc') {
         return returnValue * -1;