@patternfly/react-core 5.0.0-alpha.5 → 5.0.0-alpha.50

package/src/components/Modal/Modal.tsx

@@ -54,8 +54,8 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Modal handles pressing of the escape key and closes the modal. If you want to handle
    * this yourself you can use this callback function. */
   onEscapePress?: (event: KeyboardEvent) => void;
-  /** Alternate position of the modal. */
-  position?: 'top';
+  /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */
+  position?: 'default' | 'top';
   /** Offset from alternate position. Can be any valid CSS length/percentage. */
   positionOffset?: string;
   /** Flag to show the close button in the header area of the modal. */
@@ -113,7 +113,8 @@ export class Modal extends React.Component<ModalProps, ModalState> {
     variant: 'default',
     hasNoBodyWrapper: false,
     appendTo: () => document.body,
-    ouiaSafe: true
+    ouiaSafe: true,
+    position: 'default'
   };
 
   constructor(props: ModalProps) {
@@ -230,6 +231,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
       titleLabel,
       ouiaId,
       ouiaSafe,
+      position,
       ...props
     } = this.props;
     const { container } = this.state;
@@ -254,6 +256,7 @@ export class Modal extends React.Component<ModalProps, ModalState> {
         bodyAriaRole={bodyAriaRole}
         ouiaId={ouiaId !== undefined ? ouiaId : this.state.ouiaStateId}
         ouiaSafe={ouiaSafe}
+        position={position}
       />,
       container
     ) as React.ReactElement;

package/src/components/Modal/ModalBox.tsx

@@ -14,8 +14,8 @@ export interface ModalBoxProps extends React.HTMLProps<HTMLDivElement> {
   children: React.ReactNode;
   /** Additional classes added to the modal box. */
   className?: string;
-  /** Alternate position of the modal. */
-  position?: 'top';
+  /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */
+  position?: 'default' | 'top';
   /** Offset from alternate position. Can be any valid CSS length/percentage. */
   positionOffset?: string;
   /** Variant of the modal. */

package/src/components/Modal/ModalBoxCloseButton.tsx

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 import { Button } from '../Button';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { OUIAProps } from '../../helpers';
@@ -13,20 +15,21 @@ export interface ModalBoxCloseButtonProps extends OUIAProps {
 }
 
 export const ModalBoxCloseButton: React.FunctionComponent<ModalBoxCloseButtonProps> = ({
-  className = '',
+  className,
   onClose = () => undefined as any,
   ouiaId,
   ...props
 }: ModalBoxCloseButtonProps) => (
-  <Button
-    className={className}
-    variant="plain"
-    onClick={onClose}
-    aria-label="Close"
-    {...(ouiaId && { ouiaId: `${ouiaId}-${ModalBoxCloseButton.displayName}` })}
-    {...props}
-  >
-    <TimesIcon />
-  </Button>
+  <div className={css(styles.modalBoxClose, className)}>
+    <Button
+      variant="plain"
+      onClick={onClose}
+      aria-label="Close"
+      {...(ouiaId && { ouiaId: `${ouiaId}-${ModalBoxCloseButton.displayName}` })}
+      {...props}
+    >
+      <TimesIcon />
+    </Button>
+  </div>
 );
 ModalBoxCloseButton.displayName = 'ModalBoxCloseButton';

package/src/components/Modal/ModalContent.tsx

@@ -61,8 +61,8 @@ export interface ModalContentProps extends OUIAProps {
   labelId: string;
   /** A callback for when the close button is clicked. */
   onClose?: () => void;
-  /** Alternate position of the modal. */
-  position?: 'top';
+  /** Position of the modal. By default a modal will be positioned vertically and horizontally centered. */
+  position?: 'default' | 'top';
   /** Offset from alternate position. Can be any valid CSS length/percentage. */
   positionOffset?: string;
   /** Flag to show the close button in the header area of the modal. */

package/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -18,29 +18,33 @@ exports[`Modal Content Test description 1`] = `
         id="boxId"
         role="dialog"
       >
-        <button
-          aria-disabled="false"
-          aria-label="Close"
-          class="pf-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-3"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
+        <div
+          class="pf-c-modal-box__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="Close"
+            class="pf-c-button pf-m-plain"
+            data-ouia-component-id="OUIA-Generated-Button-plain-3"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            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>
         <header
           class="pf-c-modal-box__header"
         >
@@ -90,29 +94,33 @@ exports[`Modal Content Test isOpen 1`] = `
         id="boxId"
         role="dialog"
       >
-        <button
-          aria-disabled="false"
-          aria-label="Close"
-          class="pf-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-2"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
+        <div
+          class="pf-c-modal-box__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="Close"
+            class="pf-c-button pf-m-plain"
+            data-ouia-component-id="OUIA-Generated-Button-plain-2"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            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>
         <header
           class="pf-c-modal-box__header"
         >
@@ -157,29 +165,33 @@ exports[`Modal Content Test only body 1`] = `
         id="boxId"
         role="dialog"
       >
-        <button
-          aria-disabled="false"
-          aria-label="Close"
-          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"
-          type="button"
+        <div
+          class="pf-c-modal-box__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="Close"
+            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"
+            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>
         <header
           class="pf-c-modal-box__header"
         >
@@ -224,29 +236,33 @@ exports[`Modal Content Test with footer 1`] = `
         id="boxId"
         role="dialog"
       >
-        <button
-          aria-disabled="false"
-          aria-label="Close"
-          class="pf-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-4"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
+        <div
+          class="pf-c-modal-box__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="Close"
+            class="pf-c-button pf-m-plain"
+            data-ouia-component-id="OUIA-Generated-Button-plain-4"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            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>
         <header
           class="pf-c-modal-box__header"
         >
@@ -296,29 +312,33 @@ exports[`Modal Content Test with onclose 1`] = `
         id="boxId"
         role="dialog"
       >
-        <button
-          aria-disabled="false"
-          aria-label="Close"
-          class="pf-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-6"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
+        <div
+          class="pf-c-modal-box__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="Close"
+            class="pf-c-button pf-m-plain"
+            data-ouia-component-id="OUIA-Generated-Button-plain-6"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            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>
         <header
           class="pf-c-modal-box__header"
         >
@@ -368,29 +388,33 @@ exports[`Modal Content test without footer 1`] = `
         id="boxId"
         role="dialog"
       >
-        <button
-          aria-disabled="false"
-          aria-label="Close"
-          class="pf-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-5"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
+        <div
+          class="pf-c-modal-box__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="Close"
+            class="pf-c-button pf-m-plain"
+            data-ouia-component-id="OUIA-Generated-Button-plain-5"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            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>
         <header
           class="pf-c-modal-box__header"
         >
@@ -435,29 +459,33 @@ exports[`Modal Test with custom footer 1`] = `
         id="boxId"
         role="dialog"
       >
-        <button
-          aria-disabled="false"
-          aria-label="Close"
-          class="pf-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-8"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
+        <div
+          class="pf-c-modal-box__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="Close"
+            class="pf-c-button pf-m-plain"
+            data-ouia-component-id="OUIA-Generated-Button-plain-8"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            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>
         <header
           class="pf-c-modal-box__header"
         >
@@ -511,29 +539,33 @@ exports[`Modal Test with custom header 1`] = `
         id="boxId"
         role="dialog"
       >
-        <button
-          aria-disabled="false"
-          aria-label="Close"
-          class="pf-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-7"
-          data-ouia-component-type="PF4/Button"
-          data-ouia-safe="true"
-          type="button"
+        <div
+          class="pf-c-modal-box__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="Close"
+            class="pf-c-button pf-m-plain"
+            data-ouia-component-id="OUIA-Generated-Button-plain-7"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            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>
         <header
           class="pf-c-modal-box__header"
         >