From 901b0f611efdf20342538bda0399bd861ef46fd0 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/4] 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 a888763f4c32f6604e4874a796798e9e86b19876 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Wed, 27 Apr 2022 16:07:24 -0400
Subject: [PATCH 2/4] deprecate isVertical, update demos and prop descriptions

---
 packages/react-core/src/components/Divider/Divider.tsx     | 5 +++--
 .../examples/DividerOrientationVariousBreakpoints.tsx      | 1 +
 .../components/Divider/examples/DividerVerticalFlex.tsx    | 6 +++++-
 .../Divider/examples/DividerVerticalFlexInsetMedium.tsx    | 7 ++++++-
 .../DividerVerticalFlexInsetVariousBreakpoints.tsx         | 4 +++-
 5 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/react-core/src/components/Divider/Divider.tsx b/packages/react-core/src/components/Divider/Divider.tsx
index 431e6ad1a3d..e71bd83edd3 100644
--- a/packages/react-core/src/components/Divider/Divider.tsx
+++ b/packages/react-core/src/components/Divider/Divider.tsx
@@ -14,7 +14,7 @@ export interface DividerProps extends React.HTMLProps<HTMLElement> {
   className?: string;
   /** The component type to use */
   component?: 'hr' | 'li' | 'div';
-  /** Flag to indicate the divider is vertical (must be in a flex layout) */
+  /** @deprecated Use `orientation` instead. Flag to indicate the divider is vertical (must be in a flex layout) */
   isVertical?: boolean;
   /** Insets at various breakpoints. */
   inset?: {
@@ -25,8 +25,9 @@ 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. */
+  /** Indicates how the divider will display at various breakpoints. Vertical divider must be in a flex layout. */
   orientation?: {
+    default?: 'vertical' | 'horizontal';
     sm?: 'vertical' | 'horizontal';
     md?: 'vertical' | 'horizontal';
     lg?: 'vertical' | 'horizontal';
diff --git a/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx
index f6ff86b9cbc..9e5af472e9d 100644
--- a/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx
+++ b/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx
@@ -6,6 +6,7 @@ export const DividerOrientationVariousBreakpoints: React.FunctionComponent = ()
     <FlexItem>first item</FlexItem>
     <Divider
       orientation={{
+        default: 'vertical',
         sm: 'vertical',
         md: 'horizontal',
         lg: 'vertical',
diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlex.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlex.tsx
index 6742f01b894..57054866cde 100644
--- a/packages/react-core/src/components/Divider/examples/DividerVerticalFlex.tsx
+++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlex.tsx
@@ -4,7 +4,11 @@ import { Divider, Flex, FlexItem } from '@patternfly/react-core';
 export const DividerVerticalFlex: React.FunctionComponent = () => (
   <Flex>
     <FlexItem>first item</FlexItem>
-    <Divider isVertical />
+    <Divider
+      orientation={{
+        default: 'vertical'
+      }}
+    />
     <FlexItem>second item</FlexItem>
   </Flex>
 );
diff --git a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx
index f9738446b41..18e9f27e54a 100644
--- a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx
+++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetMedium.tsx
@@ -4,7 +4,12 @@ import { Divider, Flex, FlexItem } from '@patternfly/react-core';
 export const DividerVerticalFlexInsetMedium: React.FunctionComponent = () => (
   <Flex>
     <FlexItem>first item</FlexItem>
-    <Divider isVertical inset={{ default: 'insetMd' }} />
+    <Divider
+      orientation={{
+        default: 'vertical'
+      }}
+      inset={{ default: 'insetMd' }}
+    />
     <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..c47a605b781 100644
--- a/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx
+++ b/packages/react-core/src/components/Divider/examples/DividerVerticalFlexInsetVariousBreakpoints.tsx
@@ -5,7 +5,9 @@ export const DividerVerticalFlexInsetVariousBreakpoints: React.FunctionComponent
   <Flex>
     <FlexItem>first item</FlexItem>
     <Divider
-      isVertical
+      orientation={{
+        default: 'vertical'
+      }}
       inset={{
         default: 'insetMd',
         md: 'insetNone',

From b1e57d4aac5b846b0cb075abb044b35fae917c41 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Fri, 29 Apr 2022 10:43:55 -0400
Subject: [PATCH 3/4] PR feedback from mcoker

---
 .../Divider/__tests__/Divider.test.tsx        |   8 +-
 packages/react-core/src/demos/CardDemos.md    | 129 +++++++++++++++---
 2 files changed, 114 insertions(+), 23 deletions(-)

diff --git a/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx b/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx
index 1c5b26bae27..376df15f842 100644
--- a/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx
+++ b/packages/react-core/src/components/Divider/__tests__/Divider.test.tsx
@@ -1,5 +1,5 @@
 import { Divider } from '../Divider';
-import { Flex, FlexItem} from '../../../layouts/Flex';
+import { Flex, FlexItem } from '../../../layouts/Flex';
 import * as React from 'react';
 import { render } from '@testing-library/react';
 
@@ -22,7 +22,11 @@ test('vertical divider', () => {
   const view = render(
     <Flex>
       <FlexItem>first item</FlexItem>
-      <Divider isVertical/>
+      <Divider
+        orientation={{
+          default: 'vertical'
+        }}
+      />
       <FlexItem>second item</FlexItem>
     </Flex>
   );
diff --git a/packages/react-core/src/demos/CardDemos.md b/packages/react-core/src/demos/CardDemos.md
index 4b933f9ee0c..f0a785af4d6 100644
--- a/packages/react-core/src/demos/CardDemos.md
+++ b/packages/react-core/src/demos/CardDemos.md
@@ -561,7 +561,14 @@ const AggregateStatusCards: React.FunctionComponent = () => {
                   <a href="#">{count}</a>
                 </FlexItem>
               </Flex>
-              {content.length > 1 && index === 0 && <Divider key={`${index}_d`} isVertical />}
+              {content.length > 1 && index === 0 && (
+                <Divider
+                  key={`${index}_d`}
+                  orientation={{
+                    default: 'vertical'
+                  }}
+                />
+              )}
             </React.Fragment>
           ))}
         </Flex>
@@ -1255,8 +1262,10 @@ const UtilizationCard3: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
-      <br /><br />
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
       <Gallery hasGutter minWidths={{ default: '360px' }}>
         <GalleryItem>
           <Card id="utilization-card-1" component="div">
@@ -1507,7 +1516,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -1571,7 +1586,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -1656,7 +1677,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -1720,7 +1747,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -1805,7 +1838,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -1869,7 +1908,13 @@ CardNestedDemo = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -1994,7 +2039,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -2058,7 +2109,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -2140,7 +2197,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -2204,7 +2267,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -2286,7 +2355,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Temperature</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>64C</span>
                       </FlexItem>
@@ -2350,7 +2425,13 @@ const AccordionCard: React.FunctionComponent = () => {
                       <FlexItem>
                         <b>Speed</b>
                       </FlexItem>
-                      <Divider className="pf-u-hidden-on-md" isVertical inset={{ default: 'insetSm' }} />
+                      <Divider
+                        className="pf-u-hidden-on-md"
+                        orientation={{
+                          default: 'vertical'
+                        }}
+                        inset={{ default: 'insetSm' }}
+                      />
                       <FlexItem>
                         <span>2.3Ghz</span>
                       </FlexItem>
@@ -2444,8 +2525,10 @@ const TrendCard1: React.FunctionComponent = () => {
   ];
   return (
     <React.Fragment>
-      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
-      <br /><br />
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
       <Gallery hasGutter minWidths={{ default: '360px' }}>
         <GalleryItem>
           <Card id="trend-card-1" component="div">
@@ -2626,8 +2709,10 @@ CardLogViewDemo = () => {
 
   return (
     <React.Fragment>
-      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
-      <br /><br />
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
       <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
         <Card id="card-log-view-example">
           <CardHeader className="pf-u-align-items-flex-start">
@@ -2743,8 +2828,10 @@ CardEventViewDemo = () => {
 
   return (
     <React.Fragment>
-      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to <code>baseline</code> alignment.
-      <br /><br />
+      <b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to{' '}
+      <code>baseline</code> alignment.
+      <br />
+      <br />
       <Gallery hasGutter style={{ '--pf-l-gallery--GridTemplateColumns--min': '360px' }}>
         <Card id="card-events-view-example">
           <CardHeader className="pf-u-align-items-flex-start">

From 76b24c6469f09d237ca507bb373186775edb3022 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel@redhat.com>
Date: Mon, 2 May 2022 13:39:02 -0400
Subject: [PATCH 4/4] PR feedback from mcoker

---
 .../examples/DividerOrientationVariousBreakpoints.tsx    | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx b/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx
index 9e5af472e9d..b182293baaf 100644
--- a/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx
+++ b/packages/react-core/src/components/Divider/examples/DividerOrientationVariousBreakpoints.tsx
@@ -7,10 +7,11 @@ export const DividerOrientationVariousBreakpoints: React.FunctionComponent = ()
     <Divider
       orientation={{
         default: 'vertical',
-        sm: 'vertical',
-        md: 'horizontal',
-        lg: 'vertical',
-        xl: 'horizontal'
+        sm: 'horizontal',
+        md: 'vertical',
+        lg: 'horizontal',
+        xl: 'vertical',
+        '2xl': 'horizontal'
       }}
     />
     <FlexItem>second item</FlexItem>