From f3515c0736c404bf4d01fbb3509bfd5076db494b Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 20 Apr 2022 16:44:18 -0400
Subject: [PATCH 1/8] 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 e69e965cdf1da46d8e94dd432bfb1ce8d9a1f0ea Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 2 May 2022 10:31:09 -0400
Subject: [PATCH 2/8] 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 b9cdb96fae13ac885b2407d0ae2272b9362eea1a Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 5 May 2022 14:51:11 -0400
Subject: [PATCH 3/8] fullscreen for empty state

---
 packages/react-table/src/demos/Table.md | 35 ++++++++++++++++---------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md
index a485aad52e1..c64da7df2fa 100644
--- a/packages/react-table/src/demos/Table.md
+++ b/packages/react-table/src/demos/Table.md
@@ -3020,20 +3020,20 @@ class EmptyStateDemo extends React.Component {
 
 ### Loading
 
-```js
+```js isFullscreen
 import React from 'react';
-import { Bullseye, Spinner } from '@patternfly/react-core';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import { Bullseye, EmptyState, EmptyStateIcon, Spinner, Title } from '@patternfly/react-core';
+import { PageSection, Table, TableHeader, TableBody } from '@patternfly/react-table';
+import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 class LoadingStateDemo extends React.Component {
   render() {
     const columns = [
-      { title: 'Servers' },
-      { title: 'Threads' },
-      { title: 'Applications' },
+      { title: 'Repositories' },
+      { title: 'Branches' },
+      { title: 'Pull requests' },
       { title: 'Workspaces' },
-      { title: 'Status' },
-      { title: 'Location' }
+      { title: 'Last commit' }
     ];
     const rows = [
       {
@@ -3043,7 +3043,12 @@ class LoadingStateDemo extends React.Component {
             props: { colSpan: 8 },
             title: (
               <Bullseye>
-                <Spinner size="xl" aria-labelledby="loading-table-demo"/>
+                <EmptyState>
+                  <EmptyStateIcon variant="container" component={Spinner} />
+                  <Title size="lg" headingLevel="h4">
+                    Loading
+                  </Title>
+                </EmptyState>{' '}
               </Bullseye>
             )
           }
@@ -3052,10 +3057,14 @@ class LoadingStateDemo extends React.Component {
     ];
 
     return (
-      <Table cells={columns} rows={rows} id="loading-table-demo" aria-label="Loading Table Demo">
-        <TableHeader />
-        <TableBody />
-      </Table>
+      <DashboardWrapper hasPageTemplateTitle>
+        <PageSection isFilled>
+          <Table cells={columns} rows={rows} id="loading-table-demo" aria-label="Loading Table Demo">
+            <TableHeader />
+            <TableBody />
+          </Table>
+        </PageSection>
+      </DashboardWrapper>
     );
   }
 }

From 730711ab9dc4de24b30c4de24d11fb790bb85ecf Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Thu, 5 May 2022 14:53:43 -0400
Subject: [PATCH 4/8] remove empty string

---
 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 c64da7df2fa..c46a33d97f1 100644
--- a/packages/react-table/src/demos/Table.md
+++ b/packages/react-table/src/demos/Table.md
@@ -3048,7 +3048,7 @@ class LoadingStateDemo extends React.Component {
                   <Title size="lg" headingLevel="h4">
                     Loading
                   </Title>
-                </EmptyState>{' '}
+                </EmptyState>
               </Bullseye>
             )
           }

From bc64c9e4a425622a1ab30c0092e8d8d7efa6ffbb Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 16 May 2022 10:39:34 -0400
Subject: [PATCH 5/8] wrap with card

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

diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md
index c46a33d97f1..131c0ef3a4d 100644
--- a/packages/react-table/src/demos/Table.md
+++ b/packages/react-table/src/demos/Table.md
@@ -3022,7 +3022,7 @@ class EmptyStateDemo extends React.Component {
 
 ```js isFullscreen
 import React from 'react';
-import { Bullseye, EmptyState, EmptyStateIcon, Spinner, Title } from '@patternfly/react-core';
+import { Bullseye, Card, EmptyState, EmptyStateIcon, Spinner, Title } from '@patternfly/react-core';
 import { PageSection, Table, TableHeader, TableBody } from '@patternfly/react-table';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
@@ -3059,10 +3059,12 @@ class LoadingStateDemo extends React.Component {
     return (
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection isFilled>
-          <Table cells={columns} rows={rows} id="loading-table-demo" aria-label="Loading Table Demo">
-            <TableHeader />
-            <TableBody />
-          </Table>
+          <Card>
+            <Table cells={columns} rows={rows} id="loading-table-demo" aria-label="Loading Table Demo">
+              <TableHeader />
+              <TableBody />
+            </Table>
+          </Card>
         </PageSection>
       </DashboardWrapper>
     );

From 8b0a7b124efe957ffe046aeef0d60898817633bd Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 18 May 2022 15:49:08 -0400
Subject: [PATCH 6/8] padding and card is div

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

diff --git a/packages/react-table/src/demos/Table.md b/packages/react-table/src/demos/Table.md
index 131c0ef3a4d..9a1fd1f0a0a 100644
--- a/packages/react-table/src/demos/Table.md
+++ b/packages/react-table/src/demos/Table.md
@@ -3058,8 +3058,8 @@ class LoadingStateDemo extends React.Component {
 
     return (
       <DashboardWrapper hasPageTemplateTitle>
-        <PageSection isFilled>
-          <Card>
+        <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
+          <Card component="div">
             <Table cells={columns} rows={rows} id="loading-table-demo" aria-label="Loading Table Demo">
               <TableHeader />
               <TableBody />

From 753e5d2f429b00fbf6aacd2dff9df99eddc240da Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Tue, 24 May 2022 13:47:39 -0400
Subject: [PATCH 7/8] use h2

---
 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 9a1fd1f0a0a..3d9ff39ecfa 100644
--- a/packages/react-table/src/demos/Table.md
+++ b/packages/react-table/src/demos/Table.md
@@ -3045,7 +3045,7 @@ class LoadingStateDemo extends React.Component {
               <Bullseye>
                 <EmptyState>
                   <EmptyStateIcon variant="container" component={Spinner} />
-                  <Title size="lg" headingLevel="h4">
+                  <Title size="lg" headingLevel="h2">
                     Loading
                   </Title>
                 </EmptyState>

From 1db6934ba7cacacc71262a1e4d4aef03542e2822 Mon Sep 17 00:00:00 2001
From: Jenny <32821331+jenny-s51@users.noreply.github.com>
Date: Tue, 24 May 2022 13:48:26 -0400
Subject: [PATCH 8/8] Update packages/react-table/src/demos/Table.md

Co-authored-by: Michael Coker <35148959+mcoker@users.noreply.github.com>
---
 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 3d9ff39ecfa..a50674fe723 100644
--- a/packages/react-table/src/demos/Table.md
+++ b/packages/react-table/src/demos/Table.md
@@ -3060,7 +3060,7 @@ class LoadingStateDemo extends React.Component {
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
           <Card component="div">
-            <Table cells={columns} rows={rows} id="loading-table-demo" aria-label="Loading Table Demo">
+            <Table cells={columns} rows={rows} aria-label="Loading table demo">
               <TableHeader />
               <TableBody />
             </Table>