From 3bedba98d24a74eb8297b579e8a5c423b8a8471d Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Thu, 2 Mar 2023 18:28:45 -0500
Subject: [PATCH 1/8] fix(Popover): Refactor popover header

---
 .../components/Popover/PopoverCloseButton.tsx | 11 +++--
 .../src/components/Popover/PopoverHeader.tsx  | 27 ++++-------
 .../components/Popover/PopoverHeaderText.tsx  | 14 ++++--
 .../PopoverCloseButton.test.tsx.snap          | 48 ++++++++++---------
 .../__snapshots__/PopoverHeader.test.tsx.snap | 21 ++++----
 5 files changed, 67 insertions(+), 54 deletions(-)

diff --git a/packages/react-core/src/components/Popover/PopoverCloseButton.tsx b/packages/react-core/src/components/Popover/PopoverCloseButton.tsx
index 616c9b5c1fe..d7cc0a238eb 100644
--- a/packages/react-core/src/components/Popover/PopoverCloseButton.tsx
+++ b/packages/react-core/src/components/Popover/PopoverCloseButton.tsx
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/Popover/popover';
 import { Button } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 
@@ -6,9 +8,12 @@ export const PopoverCloseButton: React.FunctionComponent<PopoverCloseButtonProps
   onClose = () => undefined as void,
   ...props
 }: PopoverCloseButtonProps) => (
-  <Button onClick={onClose} variant="plain" aria-label {...props} style={{ pointerEvents: 'auto' }}>
-    <TimesIcon />
-  </Button>
+
+  <div className={css(styles.popoverClose)}>
+    <Button onClick={onClose} variant="plain" aria-label {...props} style={{ pointerEvents: 'auto' }}>
+      <TimesIcon />
+    </Button>
+  </div>
 );
 
 PopoverCloseButton.displayName = 'PopoverCloseButton';
diff --git a/packages/react-core/src/components/Popover/PopoverHeader.tsx b/packages/react-core/src/components/Popover/PopoverHeader.tsx
index cddfd5e3743..1be219268e0 100644
--- a/packages/react-core/src/components/Popover/PopoverHeader.tsx
+++ b/packages/react-core/src/components/Popover/PopoverHeader.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Popover/popover';
-import { Title, TitleSizes } from '../Title';
 import { PopoverHeaderIcon } from './PopoverHeaderIcon';
 import { PopoverHeaderText } from './PopoverHeaderText';
 
@@ -31,23 +30,17 @@ export const PopoverHeader: React.FunctionComponent<PopoverHeaderProps> = ({
   id,
   alertSeverityScreenReaderText,
   ...props
-}: PopoverHeaderProps) => {
-  const HeadingLevel = titleHeadingLevel;
-
-  return icon || alertSeverityVariant ? (
-    <header className={css('pf-c-popover__header', className)} id={id} {...props}>
-      <HeadingLevel className={css(styles.popoverTitle)}>
-        {icon && <PopoverHeaderIcon>{icon}</PopoverHeaderIcon>}
+}: PopoverHeaderProps) => (
+  <header className={css('pf-c-popover__header', className)} id={id} {...props}>
+    <div className={css(styles.popoverTitle, icon && 'pf-m-icon')}>
+      {icon && <PopoverHeaderIcon>{icon}</PopoverHeaderIcon>}
+      <PopoverHeaderText headingLevel={titleHeadingLevel}>
         {alertSeverityVariant && alertSeverityScreenReaderText && (
           <span className="pf-u-screen-reader">{alertSeverityScreenReaderText}</span>
         )}
-        <PopoverHeaderText>{children}</PopoverHeaderText>
-      </HeadingLevel>
-    </header>
-  ) : (
-    <Title headingLevel={titleHeadingLevel} size={TitleSizes.md} id={id} className={className} {...props}>
-      {children}
-    </Title>
-  );
-};
+        {children}
+      </PopoverHeaderText>
+    </div>
+  </header>
+);
 PopoverHeader.displayName = 'PopoverHeader';
diff --git a/packages/react-core/src/components/Popover/PopoverHeaderText.tsx b/packages/react-core/src/components/Popover/PopoverHeaderText.tsx
index ef44d4b80c7..4a67816f5ee 100644
--- a/packages/react-core/src/components/Popover/PopoverHeaderText.tsx
+++ b/packages/react-core/src/components/Popover/PopoverHeaderText.tsx
@@ -7,15 +7,21 @@ export interface PopoverHeaderTextProps extends React.HTMLProps<HTMLDivElement>
   children: React.ReactNode;
   /** Class to be applied to the header text */
   className?: string;
+  /** Heading level of the header title */
+  headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 export const PopoverHeaderText: React.FunctionComponent<PopoverHeaderTextProps> = ({
   children,
   className,
+  headingLevel,
   ...props
-}: PopoverHeaderTextProps) => (
-  <span className={css(styles.popoverTitleText, className)} {...props}>
+}: PopoverHeaderTextProps) => {
+  const HeadingLevel = headingLevel;
+
+  return (
+  <HeadingLevel className={css(styles.popoverTitleText, className)} {...props}>
     {children}
-  </span>
-);
+  </HeadingLevel>);
+};
 PopoverHeaderText.displayName = 'PopoverHeaderText';
diff --git a/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap b/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap
index ee75b28f5f8..74aa91dfe32 100644
--- a/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap
+++ b/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap
@@ -2,29 +2,33 @@
 
 exports[`PopoverCloseButton should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <button
-    aria-disabled="false"
-    aria-label="string"
-    class="pf-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-1"
-    data-ouia-component-type="PF4/Button"
-    data-ouia-safe="true"
-    style="pointer-events: auto;"
-    type="button"
+  <div
+    class="pf-c-popover__close"
   >
-    <svg
-      aria-hidden="true"
-      fill="currentColor"
-      height="1em"
-      role="img"
-      style="vertical-align: -0.125em;"
-      viewBox="0 0 352 512"
-      width="1em"
+    <button
+      aria-disabled="false"
+      aria-label="string"
+      class="pf-c-button pf-m-plain"
+      data-ouia-component-id="OUIA-Generated-Button-plain-1"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      style="pointer-events: auto;"
+      type="button"
     >
-      <path
-        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-      />
-    </svg>
-  </button>
+      <svg
+        aria-hidden="true"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        style="vertical-align: -0.125em;"
+        viewBox="0 0 352 512"
+        width="1em"
+      >
+        <path
+          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+        />
+      </svg>
+    </button>
+  </div>
 </DocumentFragment>
 `;
diff --git a/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverHeader.test.tsx.snap b/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverHeader.test.tsx.snap
index 05df99e9f79..3c1e512f743 100644
--- a/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverHeader.test.tsx.snap
+++ b/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverHeader.test.tsx.snap
@@ -2,16 +2,21 @@
 
 exports[`PopoverHeader should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
-  <h6
-    class="pf-c-title pf-m-md"
-    data-ouia-component-id="OUIA-Generated-Title-1"
-    data-ouia-component-type="PF4/Title"
-    data-ouia-safe="true"
+  <header
+    class="pf-c-popover__header"
     id="string"
   >
-    <div>
-      ReactNode
+    <div
+      class="pf-c-popover__title"
+    >
+      <h6
+        class="pf-c-popover__title-text"
+      >
+        <div>
+          ReactNode
+        </div>
+      </h6>
     </div>
-  </h6>
+  </header>
 </DocumentFragment>
 `;

From 2425242d93ed3d9c6d721222db93c07eb076ce2f Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Thu, 2 Mar 2023 18:33:50 -0500
Subject: [PATCH 2/8] remove blank line

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

diff --git a/packages/react-core/src/components/Popover/PopoverCloseButton.tsx b/packages/react-core/src/components/Popover/PopoverCloseButton.tsx
index d7cc0a238eb..6a1b9c5cbcc 100644
--- a/packages/react-core/src/components/Popover/PopoverCloseButton.tsx
+++ b/packages/react-core/src/components/Popover/PopoverCloseButton.tsx
@@ -8,7 +8,6 @@ export const PopoverCloseButton: React.FunctionComponent<PopoverCloseButtonProps
   onClose = () => undefined as void,
   ...props
 }: PopoverCloseButtonProps) => (
-
   <div className={css(styles.popoverClose)}>
     <Button onClick={onClose} variant="plain" aria-label {...props} style={{ pointerEvents: 'auto' }}>
       <TimesIcon />

From a42f3d4d6b33d640895f0f912460b1544891bcc0 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Fri, 3 Mar 2023 10:42:33 -0500
Subject: [PATCH 3/8] Updates from review comments

---
 packages/react-core/src/components/Popover/PopoverHeader.tsx | 4 ++--
 .../react-core/src/components/Popover/PopoverHeaderText.tsx  | 5 ++++-
 .../Generated/__snapshots__/PopoverHeader.test.tsx.snap      | 2 +-
 .../react-integration/cypress/integration/popover.spec.ts    | 1 -
 4 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/react-core/src/components/Popover/PopoverHeader.tsx b/packages/react-core/src/components/Popover/PopoverHeader.tsx
index 1be219268e0..15380441d73 100644
--- a/packages/react-core/src/components/Popover/PopoverHeader.tsx
+++ b/packages/react-core/src/components/Popover/PopoverHeader.tsx
@@ -31,10 +31,10 @@ export const PopoverHeader: React.FunctionComponent<PopoverHeaderProps> = ({
   alertSeverityScreenReaderText,
   ...props
 }: PopoverHeaderProps) => (
-  <header className={css('pf-c-popover__header', className)} id={id} {...props}>
+  <header className={css(styles.popoverHeader, className)} {...props}>
     <div className={css(styles.popoverTitle, icon && 'pf-m-icon')}>
       {icon && <PopoverHeaderIcon>{icon}</PopoverHeaderIcon>}
-      <PopoverHeaderText headingLevel={titleHeadingLevel}>
+      <PopoverHeaderText headingLevel={titleHeadingLevel} id={id}>
         {alertSeverityVariant && alertSeverityScreenReaderText && (
           <span className="pf-u-screen-reader">{alertSeverityScreenReaderText}</span>
         )}
diff --git a/packages/react-core/src/components/Popover/PopoverHeaderText.tsx b/packages/react-core/src/components/Popover/PopoverHeaderText.tsx
index 4a67816f5ee..33ee3cc6729 100644
--- a/packages/react-core/src/components/Popover/PopoverHeaderText.tsx
+++ b/packages/react-core/src/components/Popover/PopoverHeaderText.tsx
@@ -9,18 +9,21 @@ export interface PopoverHeaderTextProps extends React.HTMLProps<HTMLDivElement>
   className?: string;
   /** Heading level of the header title */
   headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /** Id of the header */
+  id?: string;
 }
 
 export const PopoverHeaderText: React.FunctionComponent<PopoverHeaderTextProps> = ({
   children,
   className,
   headingLevel,
+  id,
   ...props
 }: PopoverHeaderTextProps) => {
   const HeadingLevel = headingLevel;
 
   return (
-  <HeadingLevel className={css(styles.popoverTitleText, className)} {...props}>
+  <HeadingLevel className={css(styles.popoverTitleText, className)} id={id} {...props}>
     {children}
   </HeadingLevel>);
 };
diff --git a/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverHeader.test.tsx.snap b/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverHeader.test.tsx.snap
index 3c1e512f743..dbda63aa77b 100644
--- a/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverHeader.test.tsx.snap
+++ b/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverHeader.test.tsx.snap
@@ -4,13 +4,13 @@ exports[`PopoverHeader should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <header
     class="pf-c-popover__header"
-    id="string"
   >
     <div
       class="pf-c-popover__title"
     >
       <h6
         class="pf-c-popover__title-text"
+        id="string"
       >
         <div>
           ReactNode
diff --git a/packages/react-integration/cypress/integration/popover.spec.ts b/packages/react-integration/cypress/integration/popover.spec.ts
index eca138e5068..551d02462ed 100644
--- a/packages/react-integration/cypress/integration/popover.spec.ts
+++ b/packages/react-integration/cypress/integration/popover.spec.ts
@@ -24,7 +24,6 @@ describe('Popover Demo Test', () => {
     cy.get('button[id="popoverTarget"]').then((popoverLink: JQuery<HTMLDivElement>) => {
       cy.wrap(popoverLink).click();
       cy.get('.pf-c-popover').should('exist');
-      cy.get('h6').should('have.class', 'pf-m-md');
       cy.get('button[aria-label="Close"]').then(closeBtn => {
         cy.wrap(closeBtn).click();
         cy.get('.pf-c-popover').should('not.exist');

From 0cd69981f5b962b038dd08ea0308965e4023c531 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Fri, 3 Mar 2023 10:48:47 -0500
Subject: [PATCH 4/8] Remove pf-m-icon

---
 packages/react-core/src/components/Popover/PopoverHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Popover/PopoverHeader.tsx b/packages/react-core/src/components/Popover/PopoverHeader.tsx
index 15380441d73..73b9f86d517 100644
--- a/packages/react-core/src/components/Popover/PopoverHeader.tsx
+++ b/packages/react-core/src/components/Popover/PopoverHeader.tsx
@@ -32,7 +32,7 @@ export const PopoverHeader: React.FunctionComponent<PopoverHeaderProps> = ({
   ...props
 }: PopoverHeaderProps) => (
   <header className={css(styles.popoverHeader, className)} {...props}>
-    <div className={css(styles.popoverTitle, icon && 'pf-m-icon')}>
+    <div className={css(styles.popoverTitle)}>
       {icon && <PopoverHeaderIcon>{icon}</PopoverHeaderIcon>}
       <PopoverHeaderText headingLevel={titleHeadingLevel} id={id}>
         {alertSeverityVariant && alertSeverityScreenReaderText && (

From cc69d018021df0cfa54b3ac133769ab6f5e70990 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Fri, 3 Mar 2023 15:28:35 -0500
Subject: [PATCH 5/8] move id

---
 .../react-core/src/components/Popover/PopoverHeader.tsx     | 6 +++---
 .../react-core/src/components/Popover/PopoverHeaderText.tsx | 5 +----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/packages/react-core/src/components/Popover/PopoverHeader.tsx b/packages/react-core/src/components/Popover/PopoverHeader.tsx
index 73b9f86d517..258178994a9 100644
--- a/packages/react-core/src/components/Popover/PopoverHeader.tsx
+++ b/packages/react-core/src/components/Popover/PopoverHeader.tsx
@@ -31,10 +31,10 @@ export const PopoverHeader: React.FunctionComponent<PopoverHeaderProps> = ({
   alertSeverityScreenReaderText,
   ...props
 }: PopoverHeaderProps) => (
-  <header className={css(styles.popoverHeader, className)} {...props}>
-    <div className={css(styles.popoverTitle)}>
+  <header className={css(styles.popverHeader, className)} {...props}>
+    <div className={css(styles.popoverTitle)} id={id} >
       {icon && <PopoverHeaderIcon>{icon}</PopoverHeaderIcon>}
-      <PopoverHeaderText headingLevel={titleHeadingLevel} id={id}>
+      <PopoverHeaderText headingLevel={titleHeadingLevel}>
         {alertSeverityVariant && alertSeverityScreenReaderText && (
           <span className="pf-u-screen-reader">{alertSeverityScreenReaderText}</span>
         )}
diff --git a/packages/react-core/src/components/Popover/PopoverHeaderText.tsx b/packages/react-core/src/components/Popover/PopoverHeaderText.tsx
index 33ee3cc6729..4a67816f5ee 100644
--- a/packages/react-core/src/components/Popover/PopoverHeaderText.tsx
+++ b/packages/react-core/src/components/Popover/PopoverHeaderText.tsx
@@ -9,21 +9,18 @@ export interface PopoverHeaderTextProps extends React.HTMLProps<HTMLDivElement>
   className?: string;
   /** Heading level of the header title */
   headingLevel: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  /** Id of the header */
-  id?: string;
 }
 
 export const PopoverHeaderText: React.FunctionComponent<PopoverHeaderTextProps> = ({
   children,
   className,
   headingLevel,
-  id,
   ...props
 }: PopoverHeaderTextProps) => {
   const HeadingLevel = headingLevel;
 
   return (
-  <HeadingLevel className={css(styles.popoverTitleText, className)} id={id} {...props}>
+  <HeadingLevel className={css(styles.popoverTitleText, className)} {...props}>
     {children}
   </HeadingLevel>);
 };

From c60f2ee7c19d98cbf699260e92a558946620fa69 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Fri, 3 Mar 2023 15:33:39 -0500
Subject: [PATCH 6/8] fix typo

---
 packages/react-core/src/components/Popover/PopoverHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Popover/PopoverHeader.tsx b/packages/react-core/src/components/Popover/PopoverHeader.tsx
index 258178994a9..fe5b94d217c 100644
--- a/packages/react-core/src/components/Popover/PopoverHeader.tsx
+++ b/packages/react-core/src/components/Popover/PopoverHeader.tsx
@@ -31,7 +31,7 @@ export const PopoverHeader: React.FunctionComponent<PopoverHeaderProps> = ({
   alertSeverityScreenReaderText,
   ...props
 }: PopoverHeaderProps) => (
-  <header className={css(styles.popverHeader, className)} {...props}>
+  <header className={css(styles.popoverHeader, className)} {...props}>
     <div className={css(styles.popoverTitle)} id={id} >
       {icon && <PopoverHeaderIcon>{icon}</PopoverHeaderIcon>}
       <PopoverHeaderText headingLevel={titleHeadingLevel}>

From c8185127411334adbbaa98cdeff7e991d122e2a2 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Fri, 3 Mar 2023 15:45:24 -0500
Subject: [PATCH 7/8] uodate jest

---
 .../Generated/__snapshots__/PopoverHeader.test.tsx.snap         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverHeader.test.tsx.snap b/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverHeader.test.tsx.snap
index dbda63aa77b..ad670fcb894 100644
--- a/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverHeader.test.tsx.snap
+++ b/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverHeader.test.tsx.snap
@@ -7,10 +7,10 @@ exports[`PopoverHeader should match snapshot (auto-generated) 1`] = `
   >
     <div
       class="pf-c-popover__title"
+      id="string"
     >
       <h6
         class="pf-c-popover__title-text"
-        id="string"
       >
         <div>
           ReactNode

From 897e179e14fc5282a393a3966ff1a2d3be531e0a Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redaht.com>
Date: Fri, 3 Mar 2023 17:42:49 -0500
Subject: [PATCH 8/8] remove extra space

---
 packages/react-core/src/components/Popover/PopoverHeader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-core/src/components/Popover/PopoverHeader.tsx b/packages/react-core/src/components/Popover/PopoverHeader.tsx
index fe5b94d217c..2063be5d3ef 100644
--- a/packages/react-core/src/components/Popover/PopoverHeader.tsx
+++ b/packages/react-core/src/components/Popover/PopoverHeader.tsx
@@ -32,7 +32,7 @@ export const PopoverHeader: React.FunctionComponent<PopoverHeaderProps> = ({
   ...props
 }: PopoverHeaderProps) => (
   <header className={css(styles.popoverHeader, className)} {...props}>
-    <div className={css(styles.popoverTitle)} id={id} >
+    <div className={css(styles.popoverTitle)} id={id}>
       {icon && <PopoverHeaderIcon>{icon}</PopoverHeaderIcon>}
       <PopoverHeaderText headingLevel={titleHeadingLevel}>
         {alertSeverityVariant && alertSeverityScreenReaderText && (