From d235f0ab35125ec4eb852cc10125bc38c86c9f10 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 20 Apr 2022 16:44:18 -0400
Subject: [PATCH 01/13] add support for switching orientation at various
 breakpoints

---
 .../src/components/Divider/Divider.tsx          | 10 ++++++++++
 .../src/components/Divider/examples/Divider.md  |  6 ++++++
 .../DividerOrientationVariousBreakpoints.tsx    | 17 +++++++++++++++++
 ...viderVerticalFlexInsetVariousBreakpoints.tsx |  2 +-
 4 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx

diff --git a/packages/react-core/src/components/Divider/Divider.tsx b/packages/react-core/src/components/Divider/Divider.tsx
index 321f5190835..431e6ad1a3d 100644
--- a/packages/react-core/src/components/Divider/Divider.tsx
+++ b/packages/react-core/src/components/Divider/Divider.tsx
@@ -25,6 +25,14 @@ export interface DividerProps extends React.HTMLProps<HTMLElement> {
     xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
     '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
   };
+  /** Indicates how the divider will display at various breakpoints. */
+  orientation?: {
+    sm?: 'vertical' | 'horizontal';
+    md?: 'vertical' | 'horizontal';
+    lg?: 'vertical' | 'horizontal';
+    xl?: 'vertical' | 'horizontal';
+    '2xl'?: 'vertical' | 'horizontal';
+  };
 }
 
 export const Divider: React.FunctionComponent<DividerProps> = ({
@@ -32,6 +40,7 @@ export const Divider: React.FunctionComponent<DividerProps> = ({
   component = DividerVariant.hr,
   isVertical = false,
   inset,
+  orientation,
   ...props
 }: DividerProps) => {
   const Component: any = component;
@@ -42,6 +51,7 @@ export const Divider: React.FunctionComponent<DividerProps> = ({
         styles.divider,
         isVertical && styles.modifiers.vertical,
         formatBreakpointMods(inset, styles),
+        formatBreakpointMods(orientation, styles),
         className
       )}
       {...(component !== 'hr' && { role: 'separator' })}
diff --git a/packages/react-core/src/components/Divider/examples/Divider.md b/packages/react-core/src/components/Divider/examples/Divider.md
index 93cf361ae2a..6d9b86d78e4 100644
--- a/packages/react-core/src/components/Divider/examples/Divider.md
+++ b/packages/react-core/src/components/Divider/examples/Divider.md
@@ -46,3 +46,9 @@ propComponents: ['Divider']
 
 ```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx'
 ```
+
+### Switch orientation at various breakpoints
+
+```ts file='./DividerOrientationVariousBreakpoints.tsx'
+```
+
diff --git a/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx
new file mode 100644
index 00000000000..f6ff86b9cbc
--- /dev/null
+++ b/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Divider, Flex, FlexItem } from '@patternfly/react-core';
+
+export const DividerOrientationVariousBreakpoints: React.FunctionComponent = () => (
+  <Flex>
+    <FlexItem>first item</FlexItem>
+    <Divider
+      orientation={{
+        sm: 'vertical',
+        md: 'horizontal',
+        lg: 'vertical',
+        xl: 'horizontal'
+      }}
+    />
+    <FlexItem>second item</FlexItem>
+  </Flex>
+);
diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx
index e82d433546d..4a8ba25c7d3 100644
--- a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx
+++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx
@@ -13,6 +13,6 @@ export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent
         xl: 'insetXs'
       }}
     />
-    <FlexItem>first item</FlexItem>
+    <FlexItem>second item</FlexItem>
   </Flex>
 );

From f3ddf80c986c50eafc619bf4b69ddbce7615feba Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 2 May 2022 10:18:53 -0400
Subject: [PATCH 02/13] fix isReversed checked state

---
 .../react-core/src/components/Switch/Switch.tsx    | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/react-core/src/components/Switch/Switch.tsx b/packages/react-core/src/components/Switch/Switch.tsx
index 88afbc66ef6..8651f03eada 100644
--- a/packages/react-core/src/components/Switch/Switch.tsx
+++ b/packages/react-core/src/components/Switch/Switch.tsx
@@ -91,7 +91,13 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
         />
         {label !== undefined ? (
           <React.Fragment>
-            <span className={css(styles.switchToggle)} />
+            <span className={css(styles.switchToggle)}>
+              {hasCheckIcon && (
+                <div className={css(styles.switchToggleIcon)} aria-hidden="true">
+                  <CheckIcon noVerticalAlign />
+                </div>
+              )}
+            </span>
             <span
               className={css(styles.switchLabel, styles.modifiers.on)}
               id={isAriaLabelledBy ? `${this.id}-on` : null}
@@ -99,11 +105,7 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
             >
               {label}
             </span>
-            {hasCheckIcon && (
-              <div className={css(styles.switchToggleIcon)} aria-hidden="true">
-                <CheckIcon noVerticalAlign />
-              </div>
-            )}
+
             <span
               className={css(styles.switchLabel, styles.modifiers.off)}
               id={isAriaLabelledBy ? `${this.id}-off` : null}

From 020110a2790272e058e1d2192167bc16dc0a5075 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 2 May 2022 10:35:40 -0400
Subject: [PATCH 03/13] update paths

---
 .../src/components/Divider/Divider.tsx          | 10 ----------
 .../src/components/Divider/examples/Divider.md  |  6 ------
 .../DividerOrientationVariousBreakpoints.tsx    | 17 -----------------
 ...viderVerticalFlexInsetVariousBreakpoints.tsx |  2 +-
 4 files changed, 1 insertion(+), 34 deletions(-)
 delete mode 100644 packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx

diff --git a/packages/react-core/src/components/Divider/Divider.tsx b/packages/react-core/src/components/Divider/Divider.tsx
index 431e6ad1a3d..321f5190835 100644
--- a/packages/react-core/src/components/Divider/Divider.tsx
+++ b/packages/react-core/src/components/Divider/Divider.tsx
@@ -25,14 +25,6 @@ export interface DividerProps extends React.HTMLProps<HTMLElement> {
     xl?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
     '2xl'?: 'insetNone' | 'insetXs' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl' | 'inset3xl';
   };
-  /** Indicates how the divider will display at various breakpoints. */
-  orientation?: {
-    sm?: 'vertical' | 'horizontal';
-    md?: 'vertical' | 'horizontal';
-    lg?: 'vertical' | 'horizontal';
-    xl?: 'vertical' | 'horizontal';
-    '2xl'?: 'vertical' | 'horizontal';
-  };
 }
 
 export const Divider: React.FunctionComponent<DividerProps> = ({
@@ -40,7 +32,6 @@ export const Divider: React.FunctionComponent<DividerProps> = ({
   component = DividerVariant.hr,
   isVertical = false,
   inset,
-  orientation,
   ...props
 }: DividerProps) => {
   const Component: any = component;
@@ -51,7 +42,6 @@ export const Divider: React.FunctionComponent<DividerProps> = ({
         styles.divider,
         isVertical && styles.modifiers.vertical,
         formatBreakpointMods(inset, styles),
-        formatBreakpointMods(orientation, styles),
         className
       )}
       {...(component !== 'hr' && { role: 'separator' })}
diff --git a/packages/react-core/src/components/Divider/examples/Divider.md b/packages/react-core/src/components/Divider/examples/Divider.md
index 6d9b86d78e4..93cf361ae2a 100644
--- a/packages/react-core/src/components/Divider/examples/Divider.md
+++ b/packages/react-core/src/components/Divider/examples/Divider.md
@@ -46,9 +46,3 @@ propComponents: ['Divider']
 
 ```ts file='./DividerVerticalFlexInsetVariousBreakpoints.tsx'
 ```
-
-### Switch orientation at various breakpoints
-
-```ts file='./DividerOrientationVariousBreakpoints.tsx'
-```
-
diff --git a/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx
deleted file mode 100644
index f6ff86b9cbc..00000000000
--- a/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import { Divider, Flex, FlexItem } from '@patternfly/react-core';
-
-export const DividerOrientationVariousBreakpoints: React.FunctionComponent = () => (
-  <Flex>
-    <FlexItem>first item</FlexItem>
-    <Divider
-      orientation={{
-        sm: 'vertical',
-        md: 'horizontal',
-        lg: 'vertical',
-        xl: 'horizontal'
-      }}
-    />
-    <FlexItem>second item</FlexItem>
-  </Flex>
-);
diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx
index 4a8ba25c7d3..e82d433546d 100644
--- a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx
+++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx
@@ -13,6 +13,6 @@ export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent
         xl: 'insetXs'
       }}
     />
-    <FlexItem>second item</FlexItem>
+    <FlexItem>first item</FlexItem>
   </Flex>
 );

From 55b190af3f40bcb29131eeb12c21947aae4e0a61 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 2 May 2022 10:40:55 -0400
Subject: [PATCH 04/13] remove whitespace

---
 packages/react-core/src/components/Switch/Switch.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-core/src/components/Switch/Switch.tsx b/packages/react-core/src/components/Switch/Switch.tsx
index 8651f03eada..90c8ed474c2 100644
--- a/packages/react-core/src/components/Switch/Switch.tsx
+++ b/packages/react-core/src/components/Switch/Switch.tsx
@@ -105,7 +105,6 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
             >
               {label}
             </span>
-
             <span
               className={css(styles.switchLabel, styles.modifiers.off)}
               id={isAriaLabelledBy ? `${this.id}-off` : null}

From 282231888aac2b690c90e071b764f52a5344cfcd Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 2 May 2022 15:04:57 -0400
Subject: [PATCH 05/13] add fullscreen compact example

---
 packages/react-table/src/demos/Table.md       |   7 +
 .../src/demos/table-demos/Compact.jsx         | 136 ++++++++++++++++++
 2 files changed, 143 insertions(+)
 create mode 100644 packages/react-table/src/demos/table-demos/Compact.jsx

diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md
index 341692f5dd5..b07154c5a19 100644
--- a/packages/react-table/src/demos/Table.md
+++ b/packages/react-table/src/demos/Table.md
@@ -4,6 +4,7 @@ section: components
 ---
 
 import { Checkbox, ToolbarExpandIconWrapper, ToolbarContent } from '@patternfly/react-core';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
@@ -21,6 +22,7 @@ import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-ico
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import AttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/attention-bell-icon';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 ### Bulk select
 
@@ -268,6 +270,11 @@ class BulkSelectTableDemo extends React.Component {
 ```js file="table-demos/ExpandCollapseAll.jsx"
 ```
 
+### Compact
+
+```js isFullscreen file="table-demos/Compact.jsx"
+```
+
 ### Column management
 
 ```js
diff --git a/packages/react-table/src/demos/table-demos/Compact.jsx b/packages/react-table/src/demos/table-demos/Compact.jsx
new file mode 100644
index 00000000000..2af42377763
--- /dev/null
+++ b/packages/react-table/src/demos/table-demos/Compact.jsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import {
+  Button,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem,
+  Pagination,
+  PaginationVariant,
+  Select,
+  SelectVariant,
+  SelectOption,
+  Page,
+  SkipToContent,
+  PageSection
+} from '@patternfly/react-core';
+import { TableComposable, Thead, Tr, Th, Tbody, Td, ActionsColumn } from '@patternfly/react-table';
+
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
+
+export const ComposableTable = () => {
+  const [isSelectOpen, setIsSelectOpen] = React.useState(false);
+
+  const columns = ['Contributor', 'Position', 'Location', 'Last seen', 'Numbers', 'Icons'];
+  const rows = [
+    ['Sam Jones', 'CSS guru', 'Not too sure', 'May 9, 2018', '0556'],
+    ['Amy Miller', 'Visual design', 'Raleigh', 'May 9, 2018', '9492'],
+    ['Steve Wilson', 'Visual design lead', 'Westford', 'May 9, 2018', '9929'],
+    ['Emma Jackson', 'Interaction design', 'Westford', 'May 9, 2018', '2217']
+  ];
+
+  const defaultActions = () => [
+    {
+      title: 'Settings',
+      // eslint-disable-next-line no-console
+      onClick: () => console.log(`clicked on Settings`)
+    },
+    {
+      title: 'Help',
+      // eslint-disable-next-line no-console
+      onClick: () => console.log(`clicked on Help`)
+    }
+  ];
+
+  const tableToolbar = (
+    <Toolbar id="sortable-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">
+          <Pagination
+            itemCount={37}
+            widgetId="pagination-options-menu-bottom"
+            page={1}
+            variant={PaginationVariant.top}
+            isCompact
+          />
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  return (
+    <React.Fragment>
+      <Page
+        isManagedSidebar
+        skipToContent={<SkipToContent href={'#main-content-page-layout-default-nav'}>Skip to content</SkipToContent>}
+        mainContainerId={'main-content-page-layout-default-nav'}
+      >
+        <DashboardWrapper hasPageTemplateTitle>
+          <PageSection isFilled>
+            {tableToolbar}
+            <TableComposable variant="compact" aria-label="Sortable Table">
+              <Thead>
+                <Tr>
+                  {columns.map((column, columnIndex) => (
+                    <Th key={columnIndex}>{column}</Th>
+                  ))}
+                </Tr>
+              </Thead>
+              <Tbody>
+                {rows.map((row, rowIndex) => (
+                  <Tr key={rowIndex}>
+                    <>
+                      <Td dataLabel={columns[0]}>{row[0]}</Td>
+                      <Td dataLabel={columns[1]}>{row[1]}</Td>
+                      <Td dataLabel={columns[2]}>{row[2]}</Td>
+                      <Td dataLabel={columns[3]}>{row[3]}</Td>
+                      <Td dataLabel={columns[4]}>{row[4]}</Td>
+                      <Td dataLabel={columns[5]}>
+                        <CheckIcon key="icon" />
+                      </Td>
+                      <Td dataLabel={'Action'}>
+                        <a href="#">Action link</a>
+                      </Td>
+                      <Td isActionCell>
+                        <ActionsColumn items={defaultActions()} />
+                      </Td>
+                    </>
+                  </Tr>
+                ))}
+              </Tbody>
+            </TableComposable>
+          </PageSection>
+        </DashboardWrapper>
+      </Page>
+    </React.Fragment>
+  );
+};

From 11492ed22258eef2f376b64dcb3101e70e515a81 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 2 May 2022 15:17:32 -0400
Subject: [PATCH 06/13] update paths

---
 .../react-core/src/components/Switch/Switch.tsx     | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/react-core/src/components/Switch/Switch.tsx b/packages/react-core/src/components/Switch/Switch.tsx
index 90c8ed474c2..88afbc66ef6 100644
--- a/packages/react-core/src/components/Switch/Switch.tsx
+++ b/packages/react-core/src/components/Switch/Switch.tsx
@@ -91,13 +91,7 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
         />
         {label !== undefined ? (
           <React.Fragment>
-            <span className={css(styles.switchToggle)}>
-              {hasCheckIcon && (
-                <div className={css(styles.switchToggleIcon)} aria-hidden="true">
-                  <CheckIcon noVerticalAlign />
-                </div>
-              )}
-            </span>
+            <span className={css(styles.switchToggle)} />
             <span
               className={css(styles.switchLabel, styles.modifiers.on)}
               id={isAriaLabelledBy ? `${this.id}-on` : null}
@@ -105,6 +99,11 @@ export class Switch extends React.Component<SwitchProps & OUIAProps, { ouiaState
             >
               {label}
             </span>
+            {hasCheckIcon && (
+              <div className={css(styles.switchToggleIcon)} aria-hidden="true">
+                <CheckIcon noVerticalAlign />
+              </div>
+            )}
             <span
               className={css(styles.switchLabel, styles.modifiers.off)}
               id={isAriaLabelledBy ? `${this.id}-off` : null}

From 017f0f55656cc7de963b3e2d7a0bbb0b52b05db5 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 3 May 2022 16:11:55 -0400
Subject: [PATCH 07/13] fix id

---
 packages/react-table/src/demos/table-demos/Compact.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-table/src/demos/table-demos/Compact.jsx b/packages/react-table/src/demos/table-demos/Compact.jsx
index 2af42377763..0cdf02b881a 100644
--- a/packages/react-table/src/demos/table-demos/Compact.jsx
+++ b/packages/react-table/src/demos/table-demos/Compact.jsx
@@ -45,7 +45,7 @@ export const ComposableTable = () => {
   ];
 
   const tableToolbar = (
-    <Toolbar id="sortable-toolbar">
+    <Toolbar id="compact-toolbar">
       <ToolbarContent>
         <ToolbarItem>
           <Select

From 5c3f3dfe9e3f95eed20104e003f6d4ef880e3049 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 3 May 2022 16:26:46 -0400
Subject: [PATCH 08/13] remove duplicate page component

---
 .../src/demos/table-demos/Compact.jsx         | 78 +++++++++----------
 1 file changed, 35 insertions(+), 43 deletions(-)

diff --git a/packages/react-table/src/demos/table-demos/Compact.jsx b/packages/react-table/src/demos/table-demos/Compact.jsx
index 0cdf02b881a..4b00aa61503 100644
--- a/packages/react-table/src/demos/table-demos/Compact.jsx
+++ b/packages/react-table/src/demos/table-demos/Compact.jsx
@@ -10,8 +10,6 @@ import {
   Select,
   SelectVariant,
   SelectOption,
-  Page,
-  SkipToContent,
   PageSection
 } from '@patternfly/react-core';
 import { TableComposable, Thead, Tr, Th, Tbody, Td, ActionsColumn } from '@patternfly/react-table';
@@ -89,48 +87,42 @@ export const ComposableTable = () => {
 
   return (
     <React.Fragment>
-      <Page
-        isManagedSidebar
-        skipToContent={<SkipToContent href={'#main-content-page-layout-default-nav'}>Skip to content</SkipToContent>}
-        mainContainerId={'main-content-page-layout-default-nav'}
-      >
-        <DashboardWrapper hasPageTemplateTitle>
-          <PageSection isFilled>
-            {tableToolbar}
-            <TableComposable variant="compact" aria-label="Sortable Table">
-              <Thead>
-                <Tr>
-                  {columns.map((column, columnIndex) => (
-                    <Th key={columnIndex}>{column}</Th>
-                  ))}
-                </Tr>
-              </Thead>
-              <Tbody>
-                {rows.map((row, rowIndex) => (
-                  <Tr key={rowIndex}>
-                    <>
-                      <Td dataLabel={columns[0]}>{row[0]}</Td>
-                      <Td dataLabel={columns[1]}>{row[1]}</Td>
-                      <Td dataLabel={columns[2]}>{row[2]}</Td>
-                      <Td dataLabel={columns[3]}>{row[3]}</Td>
-                      <Td dataLabel={columns[4]}>{row[4]}</Td>
-                      <Td dataLabel={columns[5]}>
-                        <CheckIcon key="icon" />
-                      </Td>
-                      <Td dataLabel={'Action'}>
-                        <a href="#">Action link</a>
-                      </Td>
-                      <Td isActionCell>
-                        <ActionsColumn items={defaultActions()} />
-                      </Td>
-                    </>
-                  </Tr>
+      <DashboardWrapper hasPageTemplateTitle>
+        <PageSection isFilled>
+          {tableToolbar}
+          <TableComposable variant="compact" aria-label="Sortable Table">
+            <Thead>
+              <Tr>
+                {columns.map((column, columnIndex) => (
+                  <Th key={columnIndex}>{column}</Th>
                 ))}
-              </Tbody>
-            </TableComposable>
-          </PageSection>
-        </DashboardWrapper>
-      </Page>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {rows.map((row, rowIndex) => (
+                <Tr key={rowIndex}>
+                  <>
+                    <Td dataLabel={columns[0]}>{row[0]}</Td>
+                    <Td dataLabel={columns[1]}>{row[1]}</Td>
+                    <Td dataLabel={columns[2]}>{row[2]}</Td>
+                    <Td dataLabel={columns[3]}>{row[3]}</Td>
+                    <Td dataLabel={columns[4]}>{row[4]}</Td>
+                    <Td dataLabel={columns[5]}>
+                      <CheckIcon key="icon" />
+                    </Td>
+                    <Td dataLabel={'Action'}>
+                      <a href="#">Action link</a>
+                    </Td>
+                    <Td isActionCell>
+                      <ActionsColumn items={defaultActions()} />
+                    </Td>
+                  </>
+                </Tr>
+              ))}
+            </Tbody>
+          </TableComposable>
+        </PageSection>
+      </DashboardWrapper>
     </React.Fragment>
   );
 };

From b905e989cf12691eefd6da13107c8cad000eb73f Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 5 May 2022 11:14:45 -0400
Subject: [PATCH 09/13] add bottom pagination to match core demo

---
 .../src/demos/table-demos/Compact.jsx         | 31 +++++++++++++------
 1 file changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/react-table/src/demos/table-demos/Compact.jsx b/packages/react-table/src/demos/table-demos/Compact.jsx
index 4b00aa61503..088bd03d528 100644
--- a/packages/react-table/src/demos/table-demos/Compact.jsx
+++ b/packages/react-table/src/demos/table-demos/Compact.jsx
@@ -6,7 +6,6 @@ import {
   ToolbarGroup,
   ToolbarItem,
   Pagination,
-  PaginationVariant,
   Select,
   SelectVariant,
   SelectOption,
@@ -42,6 +41,25 @@ export const ComposableTable = () => {
     }
   ];
 
+  const renderPagination = (variant, isCompact) => (
+    <Pagination
+      isCompact={isCompact}
+      itemCount={36}
+      page={1}
+      perPage={10}
+      onSetPage={(_evt, value) => {
+        this.fetch(value, 10);
+      }}
+      onPerPageSelect={(_evt, value) => {
+        this.fetch(1, value);
+      }}
+      variant={variant}
+      titles={{
+        paginationTitle: `${variant} pagination`
+      }}
+    />
+  );
+
   const tableToolbar = (
     <Toolbar id="compact-toolbar">
       <ToolbarContent>
@@ -72,15 +90,7 @@ export const ComposableTable = () => {
             <Button variant="primary">Action</Button>
           </ToolbarItem>
         </ToolbarGroup>
-        <ToolbarItem variant="pagination">
-          <Pagination
-            itemCount={37}
-            widgetId="pagination-options-menu-bottom"
-            page={1}
-            variant={PaginationVariant.top}
-            isCompact
-          />
-        </ToolbarItem>
+        <ToolbarItem variant="pagination">{renderPagination('top', true)}</ToolbarItem>
       </ToolbarContent>
     </Toolbar>
   );
@@ -121,6 +131,7 @@ export const ComposableTable = () => {
               ))}
             </Tbody>
           </TableComposable>
+          {renderPagination('bottom', false)}
         </PageSection>
       </DashboardWrapper>
     </React.Fragment>

From 6073a374d1002b03f1b4e5005bd2628e4beb2f76 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 5 May 2022 11:18:26 -0400
Subject: [PATCH 10/13] Table.md

---
 packages/react-table/src/demos/Table.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md
index b07154c5a19..4f689758b7f 100644
--- a/packages/react-table/src/demos/Table.md
+++ b/packages/react-table/src/demos/Table.md
@@ -3,7 +3,7 @@ id: Table
 section: components
 ---
 
-import { Checkbox, ToolbarExpandIconWrapper, ToolbarContent } from '@patternfly/react-core';
+import { Checkbox, PageSection, ToolbarExpandIconWrapper, ToolbarContent } from '@patternfly/react-core';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';

From 89b52c2d79bd426e067d7a0e9ec8ccea64691380 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 5 May 2022 13:51:53 -0400
Subject: [PATCH 11/13] format

---
 packages/react-table/src/demos/Table.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md
index 5ecfa0f0074..562cd7cd35f 100644
--- a/packages/react-table/src/demos/Table.md
+++ b/packages/react-table/src/demos/Table.md
@@ -3049,7 +3049,7 @@ class LoadingStateDemo extends React.Component {
             props: { colSpan: 8 },
             title: (
               <Bullseye>
-                <Spinner size="xl" aria-labelledby="loading-table-demo"/>
+                <Spinner size="xl" aria-labelledby="loading-table-demo" />
               </Bullseye>
             )
           }

From a10d48ac84aedc2212a0bed0c9c91ab6df687057 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Fri, 6 May 2022 11:14:50 -0400
Subject: [PATCH 12/13] remove setPage and perPageSelect

---
 packages/react-table/src/demos/table-demos/Compact.jsx | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/react-table/src/demos/table-demos/Compact.jsx b/packages/react-table/src/demos/table-demos/Compact.jsx
index 088bd03d528..d3af42e63e2 100644
--- a/packages/react-table/src/demos/table-demos/Compact.jsx
+++ b/packages/react-table/src/demos/table-demos/Compact.jsx
@@ -40,19 +40,12 @@ export const ComposableTable = () => {
       onClick: () => console.log(`clicked on Help`)
     }
   ];
-
   const renderPagination = (variant, isCompact) => (
     <Pagination
       isCompact={isCompact}
       itemCount={36}
       page={1}
       perPage={10}
-      onSetPage={(_evt, value) => {
-        this.fetch(value, 10);
-      }}
-      onPerPageSelect={(_evt, value) => {
-        this.fetch(1, value);
-      }}
       variant={variant}
       titles={{
         paginationTitle: `${variant} pagination`

From 2d1e1d47b793c654f1834a3b0f6435410ec3ea66 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Fri, 13 May 2022 14:16:53 -0400
Subject: [PATCH 13/13] usePageInsets and wrap with Card

---
 .../src/demos/table-demos/Compact.jsx         | 69 ++++++++++---------
 1 file changed, 36 insertions(+), 33 deletions(-)

diff --git a/packages/react-table/src/demos/table-demos/Compact.jsx b/packages/react-table/src/demos/table-demos/Compact.jsx
index d3af42e63e2..49adefa1e64 100644
--- a/packages/react-table/src/demos/table-demos/Compact.jsx
+++ b/packages/react-table/src/demos/table-demos/Compact.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import {
   Button,
+  Card,
   Toolbar,
   ToolbarContent,
   ToolbarGroup,
@@ -54,7 +55,7 @@ export const ComposableTable = () => {
   );
 
   const tableToolbar = (
-    <Toolbar id="compact-toolbar">
+    <Toolbar usePageInsets id="compact-toolbar">
       <ToolbarContent>
         <ToolbarItem>
           <Select
@@ -92,39 +93,41 @@ export const ComposableTable = () => {
     <React.Fragment>
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection isFilled>
-          {tableToolbar}
-          <TableComposable variant="compact" aria-label="Sortable Table">
-            <Thead>
-              <Tr>
-                {columns.map((column, columnIndex) => (
-                  <Th key={columnIndex}>{column}</Th>
-                ))}
-              </Tr>
-            </Thead>
-            <Tbody>
-              {rows.map((row, rowIndex) => (
-                <Tr key={rowIndex}>
-                  <>
-                    <Td dataLabel={columns[0]}>{row[0]}</Td>
-                    <Td dataLabel={columns[1]}>{row[1]}</Td>
-                    <Td dataLabel={columns[2]}>{row[2]}</Td>
-                    <Td dataLabel={columns[3]}>{row[3]}</Td>
-                    <Td dataLabel={columns[4]}>{row[4]}</Td>
-                    <Td dataLabel={columns[5]}>
-                      <CheckIcon key="icon" />
-                    </Td>
-                    <Td dataLabel={'Action'}>
-                      <a href="#">Action link</a>
-                    </Td>
-                    <Td isActionCell>
-                      <ActionsColumn items={defaultActions()} />
-                    </Td>
-                  </>
+          <Card>
+            {tableToolbar}
+            <TableComposable variant="compact" aria-label="Sortable Table">
+              <Thead>
+                <Tr>
+                  {columns.map((column, columnIndex) => (
+                    <Th key={columnIndex}>{column}</Th>
+                  ))}
                 </Tr>
-              ))}
-            </Tbody>
-          </TableComposable>
-          {renderPagination('bottom', false)}
+              </Thead>
+              <Tbody>
+                {rows.map((row, rowIndex) => (
+                  <Tr key={rowIndex}>
+                    <>
+                      <Td dataLabel={columns[0]}>{row[0]}</Td>
+                      <Td dataLabel={columns[1]}>{row[1]}</Td>
+                      <Td dataLabel={columns[2]}>{row[2]}</Td>
+                      <Td dataLabel={columns[3]}>{row[3]}</Td>
+                      <Td dataLabel={columns[4]}>{row[4]}</Td>
+                      <Td dataLabel={columns[5]}>
+                        <CheckIcon key="icon" />
+                      </Td>
+                      <Td dataLabel={'Action'}>
+                        <a href="#">Action link</a>
+                      </Td>
+                      <Td isActionCell>
+                        <ActionsColumn items={defaultActions()} />
+                      </Td>
+                    </>
+                  </Tr>
+                ))}
+              </Tbody>
+            </TableComposable>
+            {renderPagination('bottom', false)}
+          </Card>
         </PageSection>
       </DashboardWrapper>
     </React.Fragment>