@patternfly/react-core 5.0.0-alpha.24 → 5.0.0-alpha.26

package/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,11 @@ 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';

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

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

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

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

package/src/components/Timestamp/__tests__/Timestamp.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, getDefaultNormalizer } from '@testing-library/react';
 import { Timestamp, TimestampFormat, TimestampTooltipVariant } from '../Timestamp';
 
 jest.mock('../../Tooltip', () => ({
@@ -33,7 +33,9 @@ test('Renders component', () => {
 test('Renders with current date by default with default formatting', () => {
   render(<Timestamp />);
 
-  expect(screen.getByText(new Date().toLocaleString())).toBeInTheDocument();
+  expect(
+    screen.getByText(new Date().toLocaleString(), { normalizer: getDefaultNormalizer({ collapseWhitespace: false }) })
+  ).toBeInTheDocument();
 });
 
 test('Renders with correct datetime attribute with current date by default', () => {
@@ -42,7 +44,7 @@ test('Renders with correct datetime attribute with current date by default', ()
   // we want an ISO value without the ms to expect as the datetime value.
   const isoDateWithoutMS = new Date().toISOString().split('.')[0];
 
-  expect(screen.getByText(new Date().toLocaleString())).toHaveAttribute(
+  expect(screen.getByText(new Date().toLocaleString(), { normalizer: getDefaultNormalizer({ collapseWhitespace: false }) })).toHaveAttribute(
     'datetime',
     expect.stringMatching(isoDateWithoutMS)
   );

package/src/components/Timestamp/__tests__/__snapshots__/Timestamp.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Matches snapshot 1`] = `
       class="pf-c-timestamp__text"
       datetime="2022-01-01T00:00:00.000Z"
     >
-      1/1/2022, 12:00:00 AM
+      1/1/2022, 12:00:00 AM
     </time>
   </span>
 </DocumentFragment>