fix(Popover): Refactor popover header

packages/react-core/src/components/Popover/PopoverCloseButton.tsx

@@ -1,14 +1,18 @@
 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';
 
 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';

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(styles.popoverHeader, className)} {...props}>
+    <div className={css(styles.popoverTitle)} id={id}>
+      {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';

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';

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>
 `;

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"
-    id="string"
+  <header
+    class="pf-c-popover__header"
   >
-    <div>
-      ReactNode
+    <div
+      class="pf-c-popover__title"
+      id="string"
+    >
+      <h6
+        class="pf-c-popover__title-text"
+      >
+        <div>
+          ReactNode
+        </div>
+      </h6>
     </div>
-  </h6>
+  </header>
 </DocumentFragment>
 `;

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');