From d8ab22f5f5c2c0fc9001f8535eff549d5eaf95ff Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Mon, 29 Aug 2022 10:28:02 -0400
Subject: [PATCH 1/2] docs(Table): update pagination demo to match core

---
 packages/react-table/src/docs/demos/Table.md  | 169 +-----------------
 .../table-demos/StaticBottomPagination.jsx    | 139 ++++++++++++++
 2 files changed, 141 insertions(+), 167 deletions(-)
 create mode 100644 packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index e5dbdba7ce1..43735b5a24a 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -2612,174 +2612,9 @@ class ComplexPaginationTableDemo extends React.Component {
 }
 ```
 
-### Pagination
+### Static bottom pagination
 
-```js
-import React from 'react';
-import {
-  Checkbox,
-  Pagination,
-  Title,
-  Toolbar,
-  ToolbarContent,
-  ToolbarItem,
-  EmptyState,
-  EmptyStateIcon,
-  EmptyStateBody,
-  EmptyStateVariant,
-  Bullseye
-} 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 { Table, TableHeader, TableBody } from '@patternfly/react-table';
-import { Spinner } from '@patternfly/react-core';
-
-class ComplexPaginationTableDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      res: [],
-      perPage: 0,
-      total: 0,
-      page: 0,
-      error: null,
-      loading: true,
-      forceLoadingState: false
-    };
-
-    this.handleCheckboxChange = checked => {
-      console.log(checked);
-      this.setState({ forceLoadingState: checked });
-    };
-  }
-
-  fetch(page, perPage) {
-    this.setState({ loading: true });
-    fetch(`https://jsonplaceholder.typicode.com/posts?_page=${page}&_limit=${perPage}`)
-      .then(resp => resp.json())
-      .then(resp => this.setState({ res: resp, perPage, page, loading: false, total: 100 }))
-      .catch(err => this.setState({ error: err, loading: false, perPage: 0, page: 0, total: 0 }));
-  }
-
-  componentDidMount() {
-    this.fetch(this.state.page || 1, this.state.perPage || 20);
-  }
-
-  renderPagination(variant = 'top') {
-    const { page, perPage, total } = this.state;
-    return (
-      <Pagination
-        isCompact
-        itemCount={total}
-        page={page}
-        perPage={perPage}
-        onSetPage={(_evt, value) => this.fetch(value, perPage)}
-        onPerPageSelect={(_evt, value) => this.fetch(1, value)}
-        variant={variant}
-        titles={{
-          paginationTitle: `Pagination demo ${variant} pagination`
-        }}
-      />
-    );
-  }
-
-  render() {
-    const { loading, res, error, forceLoadingState } = this.state;
-
-    const toolbarItems = (
-      <React.Fragment>
-        <ToolbarContent>
-          <ToolbarItem>
-            <Checkbox
-              label="View loading state"
-              isChecked={this.state.forceLoadingState}
-              onChange={this.handleCheckboxChange}
-              aria-label="view loading state checkbox"
-              id="check"
-              name="check"
-            />
-          </ToolbarItem>
-          <ToolbarItem variant="pagination">{this.renderPagination()}</ToolbarItem>
-        </ToolbarContent>
-      </React.Fragment>
-    );
-
-    if (error) {
-      const noResultsRows = [
-        {
-          heightAuto: true,
-          cells: [
-            {
-              props: { colSpan: 8 },
-              title: (
-                <Bullseye>
-                  <EmptyState variant={EmptyStateVariant.small}>
-                    <EmptyStateIcon icon={ExclamationCircleIcon} color={globalDangerColor200.value} />
-                    <Title headingLevel="h2" size="lg">
-                      Check your connection and reload the page.
-                    </Title>
-                    <EmptyStateBody>
-                      There was an error retrieving data. Check your connection and try again.
-                    </EmptyStateBody>
-                  </EmptyState>
-                </Bullseye>
-              )
-            }
-          ]
-        }
-      ];
-
-      return (
-        <React.Fragment>
-          <Table cells={['Title', 'Body']} rows={noResultsRows} aria-label="Pagination Table Demo">
-            <TableHeader />
-            <TableBody />
-          </Table>
-        </React.Fragment>
-      );
-    }
-
-    const loadingRows = [
-      {
-        heightAuto: true,
-        cells: [
-          {
-            props: { colSpan: 8 },
-            title: (
-              <Bullseye>
-                <center>
-                  <Spinner size="xl" />
-                </center>
-              </Bullseye>
-            )
-          }
-        ]
-      }
-    ];
-
-    return (
-      <React.Fragment>
-        <Toolbar>{toolbarItems}</Toolbar>
-        {!(loading || forceLoadingState) && (
-          <Table
-            cells={['Title', 'Body']}
-            rows={res.map(post => [post.title, post.body])}
-            aria-label="Pagination Table Demo"
-          >
-            <TableHeader />
-            <TableBody />
-          </Table>
-        )}
-        {(loading || forceLoadingState) && (
-          <Table cells={['Title', 'Body']} rows={loadingRows} aria-label="Pagination Table Demo">
-            <TableHeader />
-            <TableBody />
-          </Table>
-        )}
-      </React.Fragment>
-    );
-  }
-}
+```js isFullscreen file="table-demos/StaticBottomPagination.jsx"
 ```
 
 ### Sticky header
diff --git a/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx b/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx
new file mode 100644
index 00000000000..ce18d113bcc
--- /dev/null
+++ b/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx
@@ -0,0 +1,139 @@
+import React from 'react';
+import {
+  Button,
+  Card,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  Pagination,
+  Select,
+  SelectVariant,
+  SelectOption,
+  PageSection
+} from '@patternfly/react-core';
+import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { rows, columns } from '../../examples/Data.jsx';
+
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+
+export const StaticBottomPagination = () => {
+  const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+  const [page, setPage] = React.useState(1);
+  const [perPage, setPerPage] = React.useState(10);
+  const [paginatedRows, setPaginatedRows] = React.useState(rows.slice(0, 10));
+  const handleSetPage = (_evt, newPage, perPage, startIdx, endIdx) => {
+    setPaginatedRows(rows.slice(startIdx, endIdx));
+    setPage(newPage);
+  };
+  handlePerPageSelect = (_evt, newPerPage, newPage, startIdx, endIdx) => {
+    setPaginatedRows(rows.slice(startIdx, endIdx));
+    setPage(newPage);
+    setPerPage(newPerPage);
+  };
+
+
+  const renderPagination = (variant, isCompact) => (
+    <Pagination
+      isCompact={isCompact}
+      itemCount={rows.length}
+      page={page}
+      perPage={perPage}
+      onSetPage={handleSetPage}
+      onPerPageSelect={handlePerPageSelect}
+      variant={variant}
+      titles={{
+        paginationTitle: `${variant} pagination`
+      }}
+    />
+  );
+
+  const renderLabel = labelText => {
+    switch (labelText) {
+      case 'Running':
+        return <Label color="green">{labelText}</Label>;
+      case 'Stopped':
+        return <Label color="orange">{labelText}</Label>;
+      case 'Needs Maintenance':
+        return <Label color="blue">{labelText}</Label>;
+      case 'Down':
+        return <Label color="red">{labelText}</Label>;
+    }
+  };
+
+  const tableToolbar = (
+    <Toolbar usePageInsets id="compact-toolbar">
+      <ToolbarContent>
+        <ToolbarItem>
+          <Select
+            id="select-example"
+            variant={SelectVariant.single}
+            aria-label="Select Input"
+            placeholderText={
+              <>
+                <FilterIcon /> Status
+              </>
+            }
+            isOpen={isSelectOpen}
+            onToggle={() => setIsSelectOpen(!isSelectOpen)}
+            onSelect={() => setIsSelectOpen(!isSelectOpen)}
+          >
+            {[
+              <SelectOption key={0} value="Debug" />,
+              <SelectOption key={1} value="Info" />,
+              <SelectOption key={2} value="Warn" />,
+              <SelectOption key={3} value="Error" />
+            ]}
+          </Select>
+        </ToolbarItem>
+        <ToolbarGroup>
+          <ToolbarItem>
+            <Button variant="primary">Action</Button>
+          </ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarItem variant="pagination">{renderPagination('top', true)}</ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  return (
+    <React.Fragment>
+      <DashboardWrapper hasPageTemplateTitle>
+        <PageSection isFilled>
+          <Card>
+            {tableToolbar}
+            <TableComposable variant="compact" aria-label="Paginated Table">
+              <Thead>
+                <Tr>
+                  {columns.map((column, columnIndex) => (
+                    <Th key={columnIndex}>{column}</Th>
+                  ))}
+                </Tr>
+              </Thead>
+              <Tbody>
+                {paginatedRows.map((row, rowIndex) => (
+                  <Tr key={rowIndex}>
+                     <Td dataLabel={columns[0]}>{row.name}</Td>
+                      <Td dataLabel={columns[1]}>{row.threads}</Td>
+                      <Td dataLabel={columns[2]}>{row.applications}</Td>
+                      <Td dataLabel={columns[3]}>{row.workspaces}</Td>
+                      <Td dataLabel={columns[4]}>{renderLabel(row.status)}</Td>
+                      <Td dataLabel={columns[5]}>{row.location}</Td>
+                      <Td dataLabel={columns[6]}>{row.lastModified}</Td>
+                      <Td dataLabel={columns[7]} modifier="truncate">
+                        <TableText>
+                          <a href="#">{row.url}</a>
+                        </TableText>
+                      </Td>
+                  </Tr>
+                ))}
+              </Tbody>
+            </TableComposable>
+            {renderPagination('bottom', false)}
+          </Card>
+        </PageSection>
+      </DashboardWrapper>
+    </React.Fragment>
+  );
+};

From 05b83565d4de18a739858550923822a4c9f2059c Mon Sep 17 00:00:00 2001
From: Katie McFaul <kmcfaul@redhat.com>
Date: Tue, 6 Sep 2022 11:31:38 -0400
Subject: [PATCH 2/2] wrap labels, add static modifier, update name

---
 packages/react-table/src/docs/demos/Table.md       |  2 +-
 .../demos/table-demos/StaticBottomPagination.jsx   | 14 ++++++++------
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 43735b5a24a..fd0d3918b17 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -2612,7 +2612,7 @@ class ComplexPaginationTableDemo extends React.Component {
 }
 ```
 
-### Static bottom pagination
+### Static bottom pagination on mobile
 
 ```js isFullscreen file="table-demos/StaticBottomPagination.jsx"
 ```
diff --git a/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx b/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx
index ce18d113bcc..40e8c3e2864 100644
--- a/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx
@@ -10,7 +10,8 @@ import {
   Select,
   SelectVariant,
   SelectOption,
-  PageSection
+  PageSection,
+  Label
 } from '@patternfly/react-core';
 import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { rows, columns } from '../../examples/Data.jsx';
@@ -46,24 +47,25 @@ export const StaticBottomPagination = () => {
       titles={{
         paginationTitle: `${variant} pagination`
       }}
+      isStatic
     />
   );
 
   const renderLabel = labelText => {
     switch (labelText) {
       case 'Running':
-        return <Label color="green">{labelText}</Label>;
+        return <span><Label color="green">{labelText}</Label></span>;
       case 'Stopped':
-        return <Label color="orange">{labelText}</Label>;
+        return <span><Label color="orange">{labelText}</Label></span>;
       case 'Needs Maintenance':
-        return <Label color="blue">{labelText}</Label>;
+        return <span><Label color="blue">{labelText}</Label></span>;
       case 'Down':
-        return <Label color="red">{labelText}</Label>;
+        return <span><Label color="red">{labelText}</Label></span>;
     }
   };
 
   const tableToolbar = (
-    <Toolbar usePageInsets id="compact-toolbar">
+    <Toolbar usePageInsets id="pagination-toolbar">
       <ToolbarContent>
         <ToolbarItem>
           <Select