@patternfly/react-table 6.3.0-prerelease.3 → 6.3.0-prerelease.30

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 isExpanded={isRepoExpanded(repo)}>
                 <Td
                   expand={
                     repo.details
@@ -167,7 +173,7 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
                 <Td dataLabel={columnNames.lastCommit}>{repo.lastCommit}</Td>
               </Tr>
               {repo.details ? (
-                <Tr isExpanded={isRepoExpanded(repo)}>
+                <Tr isExpanded={isRepoExpanded(repo)} isExpandable>
                   {!childIsFullWidth ? <Td /> : null}
                   {repo.details.detail1 ? (
                     <Td dataLabel="Repo detail 1" noPadding={childHasNoPadding} colSpan={detail1Colspan}>

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 isExpanded={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} isExpandable>
+                  <Td dataLabel={columnNames[expandedCellKey]} noPadding colSpan={7}>
+                    <ExpandableRowContent hasNoBackground>
+                      <NestedItemsTable />
+                    </ExpandableRowContent>
+                  </Td>
+                </Tr>
+                <Tr isExpanded={isRowExpanded && columnNames[expandedCellKey] === columnNames.prs} isExpandable>
+                  <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} isExpandable>
+                  <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 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>