Merge pull request #372 from sg00dwin/7332-page-restructure

fix(quickstarts): restructure components to correct spacing and remove divider below toolbar

Author: nicolethoen

packages/dev/src/AppCustomDrawer.tsx

@@ -1,6 +1,7 @@
 import './App.css';
 import {
   Page,
+  PageSection,
   Button,
   Drawer,
   DrawerContent,
@@ -11,6 +12,8 @@ import {
   DrawerPanelDescription,
   DrawerPanelBody,
   DrawerContentBody,
+  Stack,
+  StackItem,
 } from '@patternfly/react-core';
 import {
   LoadingBox,
@@ -140,24 +143,34 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
           >
             <DrawerContentBody>
               <Page masthead={AppHeader} sidebar={AppSidebar} isManagedSidebar>
-                <Button
-                  variant="secondary"
-                  onClick={() => {
-                    toggleQuickStart('getting-started-with-quick-starts');
-                    setDrawerContent('quickstart');
-                  }}
-                >
-                  Getting started with quick starts
-                </Button>
-                <Button
-                  variant="secondary"
-                  onClick={() => {
-                    setActiveQuickStartID('');
-                    setDrawerContent('custom');
-                  }}
-                >
-                  Open a different drawer
-                </Button>
+                <PageSection>
+                  <Stack hasGutter>
+                    <StackItem>
+                      <Button
+                        variant="secondary"
+                        isBlock
+                        onClick={() => {
+                          toggleQuickStart('getting-started-with-quick-starts');
+                          setDrawerContent('quickstart');
+                        }}
+                      >
+                        Getting started with quick starts
+                      </Button>
+                    </StackItem>
+                    <StackItem>
+                      <Button
+                        variant="secondary"
+                        isBlock
+                        onClick={() => {
+                          setActiveQuickStartID('');
+                          setDrawerContent('custom');
+                        }}
+                      >
+                        Open a different drawer
+                      </Button>
+                    </StackItem>
+                  </Stack>
+                </PageSection>
                 {children}
               </Page>
             </DrawerContentBody>

packages/dev/src/AppProps.tsx

@@ -1,5 +1,5 @@
 import './App.css';
-import { Page, Button } from '@patternfly/react-core';
+import { Page, Button, PageSection } from '@patternfly/react-core';
 import {
   LoadingBox,
   QuickStartContainer,
@@ -80,12 +80,15 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
     <React.Suspense fallback={<LoadingBox />}>
       <QuickStartContainer {...drawerProps}>
         <Page masthead={AppHeader} sidebar={AppSidebar} isManagedSidebar>
-          <Button
-            variant="secondary"
-            onClick={() => toggleQuickStart('getting-started-with-quick-starts')}
-          >
-            Getting started with quick starts
-          </Button>
+          <PageSection>
+            <Button
+              variant="secondary"
+              isBlock
+              onClick={() => toggleQuickStart('getting-started-with-quick-starts')}
+            >
+              Getting started with quick starts
+            </Button>
+          </PageSection>
           {children}
         </Page>
       </QuickStartContainer>

packages/dev/src/CustomCatalog.tsx

@@ -238,17 +238,20 @@ export const CustomCatalog: React.FC = () => {
 
   return (
     <>
-      <PageSection hasBodyWrapper={false}>
+      <PageSection>
         <QuickStartCatalogHeader title="Resources" />
+      </PageSection>
+      <PageSection>
         <Divider component="div" />
+      </PageSection>
+      <PageSection>
         <QuickStartCatalogToolbar>
           <ToolbarContent>
             <QuickStartCatalogFilterSearchWrapper onSearchInputChange={onSearchInputChange} />
             <QuickStartCatalogFilterStatusWrapper onStatusChange={onStatusChange} />
             <QuickStartCatalogFilterCountWrapper quickStartsCount={filteredQuickStarts.length} />
           </ToolbarContent>
         </QuickStartCatalogToolbar>
-        <Divider component="div" />
       </PageSection>
       <PageSection hasBodyWrapper={false}>{quickStartCatalog()}</PageSection>
     </>

packages/module/src/QuickStartCatalogPage.tsx

@@ -181,7 +181,6 @@ export const QuickStartCatalogPage: React.FC<QuickStartCatalogPageProps> = ({
                 onSearchInputChange={onSearchInputChange}
                 onStatusChange={onStatusChange}
               />
-              <Divider component="div" />
             </>
           )}
         </PageSection>