@patternfly/react-table 6.0.0-alpha.8 → 6.0.0-alpha.81

package/src/demos/examples/TableCompoundExpansion.tsx

@@ -20,7 +20,7 @@ import {
 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 { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+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';
 
@@ -51,7 +51,7 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
             <Th>{columnNames.description}</Th>
             <Th>{columnNames.date}</Th>
             <Th>{columnNames.status}</Th>
-            <Th />
+            <Th screenReaderText="Actions" />
           </Tr>
         </Thead>
         <Tbody>
@@ -205,7 +205,8 @@ export const TableCompoundExpansion: React.FunctionComponent = () => {
                 <Th>{columnNames.prs}</Th>
                 <Th>{columnNames.workspaces}</Th>
                 <Th>{columnNames.lastCommit}</Th>
-                <Th />
+                <Th screenReaderText="URL" />
+                <Th screenReaderText="Actions" />
               </Tr>
             </Thead>
             {repositories.map((repo, rowIndex) => {

package/src/demos/examples/TableEmptyStateDefault.tsx

@@ -6,15 +6,13 @@ import {
   Card,
   EmptyState,
   EmptyStateVariant,
-  EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateActions,
   PageSection
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateDefault: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
@@ -34,12 +32,12 @@ export const TableEmptyStateDefault: React.FunctionComponent = () => (
             <Tr>
               <Td colSpan={8}>
                 <Bullseye>
-                  <EmptyState variant={EmptyStateVariant.sm}>
-                    <EmptyStateHeader
-                      icon={<EmptyStateIcon icon={SearchIcon} />}
-                      titleText="No results found"
-                      headingLevel="h2"
-                    />
+                  <EmptyState
+                    titleText="No results found"
+                    icon={SearchIcon}
+                    headingLevel="h2"
+                    variant={EmptyStateVariant.sm}
+                  >
                     <EmptyStateBody>
                       No results match this filter criteria. Clear all filters and try again.
                     </EmptyStateBody>

package/src/demos/examples/TableEmptyStateError.tsx

@@ -1,18 +1,8 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import {
-  Bullseye,
-  Card,
-  EmptyState,
-  EmptyStateVariant,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateHeader,
-  PageSection
-} from '@patternfly/react-core';
+import { Bullseye, Card, EmptyState, EmptyStateVariant, EmptyStateBody, PageSection } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import globalDangerColor200 from '@patternfly/react-tokens/dist/esm/global_danger_color_200';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateError: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
@@ -32,12 +22,12 @@ export const TableEmptyStateError: React.FunctionComponent = () => (
             <Tr>
               <Td colSpan={8}>
                 <Bullseye>
-                  <EmptyState variant={EmptyStateVariant.sm}>
-                    <EmptyStateHeader
-                      titleText="Unable to connect"
-                      icon={<EmptyStateIcon icon={ExclamationCircleIcon} color={globalDangerColor200.value} />}
-                      headingLevel="h2"
-                    />
+                  <EmptyState
+                    icon={ExclamationCircleIcon}
+                    titleText="Unable to connect"
+                    headingLevel="h2"
+                    variant={EmptyStateVariant.sm}
+                  >
                     <EmptyStateBody>
                       There was an error retrieving data. Check your connection and reload the page.
                     </EmptyStateBody>

package/src/demos/examples/TableEmptyStateLoading.tsx

@@ -1,15 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
-import {
-  Bullseye,
-  Card,
-  EmptyState,
-  EmptyStateIcon,
-  EmptyStateHeader,
-  PageSection,
-  Spinner
-} from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { Bullseye, Card, EmptyState, PageSection, Spinner } from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 export const TableEmptyStateLoading: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
@@ -29,9 +21,7 @@ export const TableEmptyStateLoading: React.FunctionComponent = () => (
             <Tr>
               <Td colSpan={8}>
                 <Bullseye>
-                  <EmptyState>
-                    <EmptyStateHeader titleText="Loading" headingLevel="h2" icon={<EmptyStateIcon icon={Spinner} />} />
-                  </EmptyState>
+                  <EmptyState titleText="Loading" icon={Spinner} headingLevel="h2" />
                 </Bullseye>
               </Td>
             </Tr>

package/src/demos/examples/TableExpandCollapseAll.tsx

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import { Card, Label, PageSection, TextVariants, Text, TextContent } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 const expandableColumns = ['Servers', 'Threads', 'Applications', 'Workspaces', 'Status'];
 
@@ -164,7 +164,8 @@ export const TableExpandCollapseAll: React.FunctionComponent = () => {
                       collapseAllAriaLabel,
                       onToggle: onCollapseAll
                     }}
-                  ></Th>
+                    aria-label="Row expansion"
+                  />
                   {expandableColumns.map((column) => (
                     <Th key={column}>{column}</Th>
                   ))}

package/src/demos/examples/TableFilterable.tsx

@@ -6,8 +6,6 @@ import {
   EmptyState,
   EmptyStateActions,
   EmptyStateBody,
-  EmptyStateIcon,
-  EmptyStateHeader,
   EmptyStateFooter,
   Label,
   MenuToggle,
@@ -21,7 +19,7 @@ import {
   Select,
   SelectOption,
   SearchInput,
-  ToolbarChipGroup
+  ToolbarLabelGroup
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
@@ -37,7 +35,7 @@ export const TableFilterable: React.FunctionComponent = () => {
 
   const rowData = rows.slice(0, 10);
 
-  const onDelete = (type: string | ToolbarChipGroup, id: string) => {
+  const onDelete = (type: string | ToolbarLabelGroup, id: string) => {
     if (type === 'Location') {
       setFilters({
         ...filters,
@@ -188,8 +186,8 @@ export const TableFilterable: React.FunctionComponent = () => {
     return (
       <React.Fragment>
         <ToolbarFilter
-          chips={filters.location}
-          deleteChip={(category, chip) => onDelete(category, chip as string)}
+          labels={filters.location}
+          deleteLabel={(category, label) => onDelete(category, label as string)}
           categoryName="Location"
           showToolbarItem={currentCategory === 'Location'}
         >
@@ -219,8 +217,8 @@ export const TableFilterable: React.FunctionComponent = () => {
           </Select>
         </ToolbarFilter>
         <ToolbarFilter
-          chips={filters.name}
-          deleteChip={(category, chip) => onDelete(category, chip as string)}
+          labels={filters.name}
+          deleteLabel={(category, label) => onDelete(category, label as string)}
           categoryName="Name"
           showToolbarItem={currentCategory === 'Name'}
         >
@@ -236,8 +234,8 @@ export const TableFilterable: React.FunctionComponent = () => {
           />
         </ToolbarFilter>
         <ToolbarFilter
-          chips={filters.status}
-          deleteChip={(category, chip) => onDelete(category, chip as string)}
+          labels={filters.status}
+          deleteLabel={(category, label) => onDelete(category, label as string)}
           categoryName="Status"
           showToolbarItem={currentCategory === 'Status'}
         >
@@ -273,7 +271,7 @@ export const TableFilterable: React.FunctionComponent = () => {
 
   const renderToolbar = () => (
     <Toolbar
-      id="toolbar-with-chip-groups"
+      id="toolbar-with-label-groups"
       clearAllFilters={() => setFilters({ location: [], name: [], status: [] })}
       collapseListedFiltersBreakpoint="xl"
     >
@@ -308,12 +306,7 @@ export const TableFilterable: React.FunctionComponent = () => {
       : rowData;
 
   const emptyState = (
-    <EmptyState>
-      <EmptyStateHeader
-        titleText="Clear all filters and try again."
-        headingLevel="h5"
-        icon={<EmptyStateIcon icon={SearchIcon} />}
-      />
+    <EmptyState icon={SearchIcon} titleText="Clear all filters and try again." headingLevel="h5">
       <EmptyStateBody>No results match the filter criteria. Clear all filters and try again.</EmptyStateBody>
       <EmptyStateFooter>
         <EmptyStateActions>

package/src/demos/examples/TableSortableResponsive.tsx

@@ -39,7 +39,7 @@ import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { rows, columns, SampleDataRow } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
@@ -88,7 +88,7 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
   const kebabDropdownItems = [<OverflowMenuDropdownItem key="kebab-1">Some action</OverflowMenuDropdownItem>];
 
   React.useEffect(() => {
-    setSortedRows(sortedData.slice((page - 1) * perPage, page * perPage - 1));
+    setSortedRows(sortedData.slice((page - 1) * perPage, page * perPage));
   }, [sortedData, page, perPage]);
 
   const handleSetPage = (_evt: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number) => {
@@ -154,9 +154,8 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
                 onClick={() => setIsSortDropdownOpen(!isSortDropdownOpen)}
                 isExpanded={isSortDropdownOpen}
                 variant="plain"
-              >
-                <SortAmountDownIcon />
-              </MenuToggle>
+                icon={<SortAmountDownIcon />}
+              />
             )}
           >
             <SelectGroup label="Sort column">
@@ -203,9 +202,8 @@ export const TableSortableResponsive: React.FunctionComponent = () => {
                     variant="plain"
                     onClick={() => setIsKebabDropdownOpen(!isKebabDropdownOpen)}
                     isExpanded={false}
-                  >
-                    <EllipsisVIcon />
-                  </MenuToggle>
+                    icon={<EllipsisVIcon />}
+                  />
                 )}
                 isOpen={isKebabDropdownOpen}
               >

package/src/demos/examples/TableStaticBottomPagination.tsx

@@ -18,7 +18,7 @@ import {
 } from '@patternfly/react-core';
 import { Table, TableText, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
 export const TableStaticBottomPagination: React.FunctionComponent = () => {
@@ -101,8 +101,13 @@ export const TableStaticBottomPagination: React.FunctionComponent = () => {
             id="select-example"
             aria-label="Select Input"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
-              <MenuToggle ref={toggleRef} onClick={() => setIsSelectOpen(!isSelectOpen)} isExpanded={isSelectOpen}>
-                <FilterIcon /> Status
+              <MenuToggle
+                icon={<FilterIcon />}
+                ref={toggleRef}
+                onClick={() => setIsSelectOpen(!isSelectOpen)}
+                isExpanded={isSelectOpen}
+              >
+                Status
               </MenuToggle>
             )}
             isOpen={isSelectOpen}

package/src/demos/examples/TableStickyFirstColumn.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
 import { Card, PageSection } from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 
 type Direction = 'asc' | 'desc' | undefined;
 

package/src/demos/examples/TableStickyHeader.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Card, Label, PageSection } from '@patternfly/react-core';
 import { Table, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table';
-import { DashboardWrapper } from '@patternfly/react-core/dist/esm/demos/DashboardWrapper';
+import { DashboardWrapper } from '@patternfly/react-table/dist/esm/demos/DashboardWrapper';
 import { rows, columns } from '@patternfly/react-table/dist/esm/demos/sampleData';
 
 export const TableStickyHeader: React.FunctionComponent = () => {

package/src/demos/index.ts

@@ -1 +1,3 @@
 export * from './sampleData';
+export * from './DashboardWrapper';
+export * from './DashboardHeader';

package/src/deprecated/components/Table/Table.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { OUIAProps, getDefaultOUIAId } from '@patternfly/react-core';
-import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import { css } from '@patternfly/react-styles';
 import { Provider } from '../../../components/Table/base/provider';
@@ -143,8 +142,8 @@ class Table extends React.Component<TableProps, {}> {
     rowLabeledBy: 'simple-node',
     expandId: 'expandable-toggle',
     contentId: 'expanded-content',
-    dropdownPosition: DropdownPosition.right,
-    dropdownDirection: DropdownDirection.down,
+    dropdownPosition: 'right',
+    dropdownDirection: 'down',
     actionsMenuAppendTo: 'inline',
     header: undefined as React.ReactNode,
     caption: undefined as React.ReactNode,