From 46f69b99c67ea14f134693df51b495be4e1b12a4 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 18 Apr 2022 16:11:52 -0400
Subject: [PATCH 1/2] full screen demo for bulk-select example

---
 packages/react-table/src/demos/Table.md | 67 ++++++++++++++-----------
 1 file changed, 38 insertions(+), 29 deletions(-)

diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md
index 341692f5dd5..d5b39e49997 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 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,10 +21,11 @@ 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
 
-```js
+```js isFullscreen
 import React from 'react';
 import {
   Dropdown,
@@ -32,13 +33,16 @@ import {
   DropdownPosition,
   DropdownToggle,
   DropdownToggleCheckbox,
+  PageSection,
   Pagination,
   Title,
   Toolbar,
+  ToolbarContent,
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
 import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 class BulkSelectTableDemo extends React.Component {
   constructor(props) {
@@ -218,10 +222,12 @@ class BulkSelectTableDemo extends React.Component {
     return (
       <React.Fragment>
         <Toolbar>
-          <ToolbarGroup>
-            <ToolbarItem variant="bulk-select">{this.buildSelectDropdown()}</ToolbarItem>
+          <ToolbarContent>
+            <ToolbarGroup>
+              <ToolbarItem variant="bulk-select">{this.buildSelectDropdown()}</ToolbarItem>
+            </ToolbarGroup>
             <ToolbarItem variant="pagination">{this.renderPagination('top')}</ToolbarItem>
-          </ToolbarGroup>
+          </ToolbarContent>
         </Toolbar>
       </React.Fragment>
     );
@@ -235,29 +241,32 @@ class BulkSelectTableDemo extends React.Component {
     }));
 
     return (
-      <React.Fragment>
-        {this.renderToolbar()}
-        {!loading && (
-          <Table
-            aria-label="Bulk Select Table Demo"
-            cells={['Title', 'Body']}
-            rows={rows}
-            onSelect={this.onSelect}
-            canSelectAll={false}
-          >
-            <TableHeader />
-            <TableBody />
-          </Table>
-        )}
-        {loading && (
-          <div className="pf-l-bullseye">
-            <Title headingLevel="h2" size="3xl">
-              Please wait while loading data
-            </Title>
-          </div>
-        )}
-        {this.renderPagination('bottom')}
-      </React.Fragment>
+      <DashboardWrapper hasPageTemplateTitle>
+        <PageSection isWidthLimited>
+          {this.renderToolbar()}
+          {!loading && (
+            <Table
+              aria-label="Bulk Select Table Demo"
+              cells={['Title', 'Body']}
+              rows={rows}
+              onSelect={this.onSelect}
+              canSelectAll={false}
+            >
+              <TableHeader />
+              <TableBody />
+            </Table>
+          )}
+
+          {loading && (
+            <div className="pf-l-bullseye">
+              <Title headingLevel="h2" size="3xl">
+                Please wait while loading data
+              </Title>
+            </div>
+          )}
+          {this.renderPagination('bottom')}
+        </PageSection>
+      </DashboardWrapper>
     );
   }
 }
@@ -3034,7 +3043,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 958df9c40e1e34f84196214e5d5864b24a49bfca Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 19 Apr 2022 11:09:09 -0400
Subject: [PATCH 2/2] 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 d5b39e49997..a485aad52e1 100644
--- a/packages/react-table/src/demos/Table.md
+++ b/packages/react-table/src/demos/Table.md
@@ -3043,7 +3043,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>
             )
           }