From d813862d55de0593981599bcf9560fb8fe92fbc4 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Fri, 28 Apr 2023 10:45:38 -0400
Subject: [PATCH 1/4] update table empty state demos with composable table

---
 packages/react-table/src/docs/demos/Table.md | 291 +++++++++----------
 1 file changed, 135 insertions(+), 156 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 82dad1b9572..638539281fe 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -1736,188 +1736,167 @@ These examples demonstrate the use of an [Empty State component](/components/emp
 
 ```js isFullscreen
 import React from 'react';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import {
-  Button,
+  Bullseye,
   Card,
+  PageSection,
+  DashboardWrapper,
   EmptyState,
+  EmptyStateVariant,
   EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateActions,
-  PageSection,
-  Title
+  Button,
+  EmptyStateHeader,
+  EmptyStateFooter,
+  EmptyStateActions
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-class EmptyStateDemo extends React.Component {
-  render() {
-    const columns = [
-      { title: 'Repositories' },
-      { title: 'Branches' },
-      { title: 'Pull requests' },
-      { title: 'Workspaces' },
-      { title: 'Last commit' }
-    ];
-
-    const rows = [
-      {
-        heightAuto: true,
-        cells: [
-          {
-            props: { colSpan: 8 },
-            title: (
-              <EmptyState>
-                <EmptyStateHeader
-                  titleText="No results found"
-                  headingLevel="h2"
-                  icon={<EmptyStateIcon icon={SearchIcon} />}
-                />
-                <EmptyStateBody>No results match this filter criteria. Clear all filters and try again.</EmptyStateBody>
-                <EmptyStateFooter>
-                  <EmptyStateActions>
-                    <Button variant="link" onClick={() => {}}>
-                      Clear all filters
-                    </Button>
-                  </EmptyStateActions>
-                </EmptyStateFooter>
-              </EmptyState>
-            )
-          }
-        ]
-      }
-    ];
 
-    return (
-      <DashboardWrapper hasPageTemplateTitle>
-        <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
-          <Card component="div">
-            <TableDeprecated cells={columns} rows={rows} aria-label="Empty state demo">
-              <TableHeader />
-              <TableBody />
-            </TableDeprecated>
-          </Card>
-        </PageSection>
-      </DashboardWrapper>
-    );
-  }
-}
+export const TableEmptyState: React.FunctionComponent = () => (
+  <DashboardWrapper hasPageTemplateTitle>
+    <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+      <Card component="div">
+        <Table aria-label="Empty state table">
+          <Thead>
+            <Tr>
+              <Th>Repositories</Th>
+              <Th>Branches</Th>
+              <Th>Pull requests</Th>
+              <Th>Workspaces</Th>
+              <Th>Last commit</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            <Tr>
+              <Td colSpan={8}>
+                <Bullseye>
+                  <EmptyState variant={EmptyStateVariant.sm}>
+                    <EmptyStateHeader
+                      icon={<EmptyStateIcon icon={SearchIcon} />}
+                      titleText="No results found"
+                      headingLevel="h2"
+                    />
+                    <EmptyStateBody>No results match this filter criteria. Clear all filters and try again.</EmptyStateBody>
+                    <EmptyStateFooter>
+                      <EmptyStateActions>
+                        <Button variant="link">Clear all filters</Button>
+                      </EmptyStateActions>
+                    </EmptyStateFooter>
+                  </EmptyState>
+                </Bullseye>
+              </Td>
+            </Tr>
+          </Tbody>
+        </Table>
+      </Card>
+    </PageSection>
+  </DashboardWrapper>
+);
 ```
 
 ### Loading
 
 ```js isFullscreen
 import React from 'react';
-import { Bullseye, Card, EmptyState, EmptyStateIcon, Spinner, Title } from '@patternfly/react-core';
-import { PageSection } from '@patternfly/react-table';
-import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-
-class LoadingStateDemo extends React.Component {
-  render() {
-    const columns = [
-      { title: 'Repositories' },
-      { title: 'Branches' },
-      { title: 'Pull requests' },
-      { title: 'Workspaces' },
-      { title: 'Last commit' }
-    ];
-    const rows = [
-      {
-        heightAuto: true,
-        cells: [
-          {
-            props: { colSpan: 8 },
-            title: (
-              <Bullseye>
-                <EmptyState>
-                  <EmptyStateHeader titleText="Loading" headingLevel="h2" icon={<EmptyStateIcon icon={Spinner} />} />
-                </EmptyState>
-              </Bullseye>
-            )
-          }
-        ]
-      }
-    ];
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import {
+  Bullseye,
+  Card,
+  PageSection,
+  DashboardWrapper,
+  EmptyState,
+  EmptyStateIcon,
+  EmptyStateBody,
+  EmptyStateHeader
+} from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
-    return (
-      <DashboardWrapper hasPageTemplateTitle>
-        <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
-          <Card component="div">
-            <TableDeprecated cells={columns} rows={rows} aria-label="Loading table demo">
-              <TableHeader />
-              <TableBody />
-            </TableDeprecated>
-          </Card>
-        </PageSection>
-      </DashboardWrapper>
-    );
-  }
-}
+export const LoadingStateDemo: React.FunctionComponent = () => (
+  <DashboardWrapper hasPageTemplateTitle>
+    <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+      <Card component="div">
+        <Table aria-label="Loading table demo">
+          <Thead>
+            <Tr>
+              <Th>Repositories</Th>
+              <Th>Branches</Th>
+              <Th>Pull requests</Th>
+              <Th>Workspaces</Th>
+              <Th>Last commit</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            <Tr>
+              <Td colSpan={8}>
+                <Bullseye>
+                  <EmptyState>
+                    <EmptyStateHeader titleText="Loading" headingLevel="h2" icon={<EmptyStateIcon icon={Spinner} />} />
+                  </EmptyState>
+                </Bullseye>
+              </Td>
+            </Tr>
+          </Tbody>
+        </Table>
+      </Card>
+    </PageSection>
+  </DashboardWrapper>
+);
 ```
 
 ### Error
 
 ```js isFullscreen
 import React from 'react';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import {
+  Bullseye,
   Card,
+  PageSection,
+  DashboardWrapper,
   EmptyState,
+  EmptyStateVariant,
   EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateVariant,
-  EmptyStateHeader,
-  PageSection,
-  Title
+  EmptyStateHeader
 } from '@patternfly/react-core';
-import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
-import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-
-class ErrorStateDemo extends React.Component {
-  render() {
-    const columns = [
-      { title: 'Repositories' },
-      { title: 'Branches' },
-      { title: 'Pull requests' },
-      { title: 'Workspaces' },
-      { title: 'Last commit' }
-    ];
-    const rows = [
-      {
-        heightAuto: true,
-        cells: [
-          {
-            props: { colSpan: 8 },
-            title: (
-              <EmptyState variant={EmptyStateVariant.sm}>
-                <EmptyStateHeader
-                  titleText="Unable to connect"
-                  icon={<EmptyStateIcon icon={ExclamationCircleIcon} color={globalDangerColor200.value} />}
-                  headingLevel="h2"
-                />
-                <EmptyStateBody>
-                  There was an error retrieving data. Check your connection and reload the page.
-                </EmptyStateBody>
-              </EmptyState>
-            )
-          }
-        ]
-      }
-    ];
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
-    return (
-      <DashboardWrapper hasPageTemplateTitle>
-        <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
-          <Card component="div">
-            <TableDeprecated cells={columns} rows={rows} aria-label="Error table demo">
-              <TableHeader />
-              <TableBody />
-            </TableDeprecated>
-          </Card>
-        </PageSection>
-      </DashboardWrapper>
-    );
-  }
-}
+export const ErrorStateDemo: React.FunctionComponent = () => (
+  <DashboardWrapper hasPageTemplateTitle>
+    <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+      <Card component="div">
+        <Table aria-label="Loading table demo">
+          <Thead>
+            <Tr>
+              <Th>Repositories</Th>
+              <Th>Branches</Th>
+              <Th>Pull requests</Th>
+              <Th>Workspaces</Th>
+              <Th>Last commit</Th>
+            </Tr>
+          </Thead>
+          <Tbody>
+            <Tr>
+              <Td colSpan={8}>
+                <Bullseye>
+                  <EmptyState variant={EmptyStateVariant.sm}>
+                    <EmptyStateHeader
+                      titleText="Unable to connect"
+                      icon={<EmptyStateIcon icon={ExclamationCircleIcon} color={globalDangerColor200.value} />}
+                      headingLevel="h2"
+                    />
+                    <EmptyStateBody>
+                      There was an error retrieving data. Check your connection and reload the page.
+                    </EmptyStateBody>
+                  </EmptyState>
+                </Bullseye>
+              </Td>
+            </Tr>
+          </Tbody>
+        </Table>
+      </Card>
+    </PageSection>
+  </DashboardWrapper>
+);
 ```

From 0b814a46e17f4d7b1f908f8723e740bef27c8b86 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Fri, 28 Apr 2023 10:49:04 -0400
Subject: [PATCH 2/4] update icons and components

---
 packages/react-table/src/docs/demos/Table.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 638539281fe..ad98e81032a 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -1808,9 +1808,9 @@ import {
   EmptyState,
   EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateHeader
+  EmptyStateHeader,
+  Spinner
 } from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 export const LoadingStateDemo: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>
@@ -1860,7 +1860,7 @@ import {
   EmptyStateBody,
   EmptyStateHeader
 } from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 export const ErrorStateDemo: React.FunctionComponent = () => (
   <DashboardWrapper hasPageTemplateTitle>

From 1fbcd5bbbd22ce284037e099b7ec704e9fe215ba Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Fri, 28 Apr 2023 10:50:51 -0400
Subject: [PATCH 3/4] alphabetize imports

---
 packages/react-table/src/docs/demos/Table.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index ad98e81032a..42cd6cd85bb 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -1739,17 +1739,17 @@ import React from 'react';
 import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import {
   Bullseye,
+  Button,
   Card,
-  PageSection,
   DashboardWrapper,
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
   EmptyStateBody,
-  Button,
   EmptyStateHeader,
   EmptyStateFooter,
-  EmptyStateActions
+  EmptyStateActions,
+  PageSection,
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
@@ -1803,12 +1803,12 @@ import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import {
   Bullseye,
   Card,
-  PageSection,
   DashboardWrapper,
   EmptyState,
   EmptyStateIcon,
   EmptyStateBody,
   EmptyStateHeader,
+  PageSection,
   Spinner
 } from '@patternfly/react-core';
 
@@ -1852,13 +1852,13 @@ import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import {
   Bullseye,
   Card,
-  PageSection,
   DashboardWrapper,
   EmptyState,
   EmptyStateVariant,
   EmptyStateIcon,
   EmptyStateBody,
-  EmptyStateHeader
+  EmptyStateHeader,
+  PageSection,
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 

From 2277f6ddb0e7e2471c1ae8959673bbb6e1ddd085 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Fri, 28 Apr 2023 10:52:18 -0400
Subject: [PATCH 4/4] remove unused commas

---
 packages/react-table/src/docs/demos/Table.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 42cd6cd85bb..d66047eac0f 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -1749,7 +1749,7 @@ import {
   EmptyStateHeader,
   EmptyStateFooter,
   EmptyStateActions,
-  PageSection,
+  PageSection
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
@@ -1858,7 +1858,7 @@ import {
   EmptyStateIcon,
   EmptyStateBody,
   EmptyStateHeader,
-  PageSection,
+  PageSection
 } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';