@patternfly/react-core 5.0.0-alpha.79 → 5.0.0-alpha.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.79",
+  "version": "5.0.0-alpha.80",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,7 +46,7 @@
     "subpaths": "node scripts/createSubpaths.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^5.0.0-alpha.11",
+    "@patternfly/react-icons": "^5.0.0-alpha.12",
     "@patternfly/react-styles": "^5.0.0-alpha.8",
     "@patternfly/react-tokens": "^5.0.0-alpha.7",
     "focus-trap": "7.4.0",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "1f5efc1298bca2b8525c27ef52f0bebdc8a4cced"
+  "gitHead": "b550566ea35ea90c25974d5d3d2f987badb5b397"
 }

package/src/components/Alert/Alert.tsx

@@ -15,7 +15,7 @@ export enum AlertVariant {
   danger = 'danger',
   warning = 'warning',
   info = 'info',
-  default = 'default'
+  custom = 'custom'
 }
 
 /** The main alert component. */
@@ -78,7 +78,7 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
   /** Truncate title to number of lines. */
   truncateTitle?: number;
   /** Adds alert variant styles.  */
-  variant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
+  variant?: 'success' | 'danger' | 'warning' | 'info' | 'custom';
   /** Variant label text for screen readers. */
   variantLabel?: string;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
@@ -88,7 +88,7 @@ export interface AlertProps extends Omit<React.HTMLProps<HTMLDivElement>, 'actio
 }
 
 export const Alert: React.FunctionComponent<AlertProps> = ({
-  variant = AlertVariant.default,
+  variant = AlertVariant.custom,
   isInline = false,
   isPlain = false,
   isLiveRegion = false,
@@ -214,7 +214,7 @@ export const Alert: React.FunctionComponent<AlertProps> = ({
         isPlain && styles.modifiers.plain,
         isExpandable && styles.modifiers.expandable,
         isExpanded && styles.modifiers.expanded,
-        styles.modifiers[variant as 'success' | 'danger' | 'warning' | 'info'],
+        styles.modifiers[variant],
         className
       )}
       {...ouiaProps}

package/src/components/Alert/AlertIcon.tsx

@@ -12,7 +12,7 @@ export const variantIcons = {
   danger: ExclamationCircleIcon,
   warning: ExclamationTriangleIcon,
   info: InfoCircleIcon,
-  default: BellIcon
+  custom: BellIcon
 };
 
 export interface AlertIconProps extends React.HTMLProps<HTMLDivElement> {
@@ -21,7 +21,7 @@ export interface AlertIconProps extends React.HTMLProps<HTMLDivElement> {
   /** A custom icon. If not set the icon is set according to the variant. */
   customIcon?: React.ReactNode;
   /** Variant of the alert icon. */
-  variant: 'success' | 'danger' | 'warning' | 'info' | 'default';
+  variant: 'success' | 'danger' | 'warning' | 'info' | 'custom';
 }
 
 export const AlertIcon = ({ variant, customIcon, className = '', ...props }: AlertIconProps) => {

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

@@ -45,15 +45,15 @@ test('Renders with class pf-c-alert on the containing div', () => {
 
 test('Renders with class pf-c-alert__title on the div containing the title', () => {
   render(<Alert title="Some title">Some alert</Alert>);
-  expect(screen.getByRole('heading', { name: 'Default alert: Some title' })).toHaveClass('pf-c-alert__title');
+  expect(screen.getByRole('heading', { name: 'Custom alert: Some title' })).toHaveClass('pf-c-alert__title');
 });
 
-test('Renders with default hidden text of "Default alert:"', () => {
+test('Renders with Custom hidden text of "Custom alert:"', () => {
   render(<Alert title="Some title">Some alert</Alert>);
-  expect(screen.getByText('Default alert:')).toBeInTheDocument();
+  expect(screen.getByText('Custom alert:')).toBeInTheDocument();
 });
 
-['success', 'danger', 'warning', 'info'].forEach(variant => {
+['success', 'danger', 'warning', 'info'].forEach((variant) => {
   test(`Does not render with class pf-m-${variant} by default`, () => {
     render(
       <Alert title="Some title" data-testid="Alert-test-id">
@@ -176,7 +176,7 @@ test('Renders the title', () => {
 test('Renders the title as an h4 by default', () => {
   render(<Alert title="Some title">Some alert</Alert>);
 
-  expect(screen.getByRole('heading', { level: 4, name: 'Default alert: Some title' })).toBeVisible();
+  expect(screen.getByRole('heading', { level: 4, name: 'Custom alert: Some title' })).toBeVisible();
 });
 
 test('Renders the title as other heading levels when one is passed using component', () => {
@@ -186,7 +186,7 @@ test('Renders the title as other heading levels when one is passed using compone
     </Alert>
   );
 
-  expect(screen.getByRole('heading', { level: 1, name: 'Default alert: Some title' })).toBeVisible();
+  expect(screen.getByRole('heading', { level: 1, name: 'Custom alert: Some title' })).toBeVisible();
 });
 
 test('Renders the element passed via the actionClose prop', () => {
@@ -378,7 +378,7 @@ test('Removes the alert after a custom time when timeout is passed with a number
 
 test('Does not remove the alert on timeout if the user is focused on the alert', async () => {
   const user = userEvent.setup({
-    advanceTimers: delay => jest.advanceTimersByTime(delay)
+    advanceTimers: (delay) => jest.advanceTimersByTime(delay)
   });
   jest.useFakeTimers();
 
@@ -402,7 +402,7 @@ test('Does not remove the alert on timeout if the user is focused on the alert',
 
 test('Does not remove the alert on timeout if the user is hovered over the alert', async () => {
   const user = userEvent.setup({
-    advanceTimers: delay => jest.advanceTimersByTime(delay)
+    advanceTimers: (delay) => jest.advanceTimersByTime(delay)
   });
   jest.useFakeTimers();
 
@@ -426,7 +426,7 @@ test('Does not remove the alert on timeout if the user is hovered over the alert
 
 test('Removes the alert after the user removes focus from the alert and 3000ms have passed', async () => {
   const user = userEvent.setup({
-    advanceTimers: delay => jest.advanceTimersByTime(delay)
+    advanceTimers: (delay) => jest.advanceTimersByTime(delay)
   });
   jest.useFakeTimers();
 
@@ -459,7 +459,7 @@ test('Removes the alert after the user removes focus from the alert and 3000ms h
 
 test('Removes the alert after the user removes hover from the alert and 3000ms have passed', async () => {
   const user = userEvent.setup({
-    advanceTimers: delay => jest.advanceTimersByTime(delay)
+    advanceTimers: (delay) => jest.advanceTimersByTime(delay)
   });
   jest.useFakeTimers();
 
@@ -492,7 +492,7 @@ test('Removes the alert after the user removes hover from the alert and 3000ms h
 
 test('Removes the alert after the user removes hover from the alert and timeoutAnimation time has passed', async () => {
   const user = userEvent.setup({
-    advanceTimers: delay => jest.advanceTimersByTime(delay)
+    advanceTimers: (delay) => jest.advanceTimersByTime(delay)
   });
   jest.useFakeTimers();
 

package/src/components/Alert/__tests__/AlertIcon.test.tsx

@@ -5,8 +5,9 @@ import { AlertIcon } from '../AlertIcon';
 
 jest.mock('@patternfly/react-icons/dist/esm/icons/check-circle-icon', () => () => 'Check circle icon mock');
 jest.mock('@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon', () => () => 'Exclamation circle icon mock');
-jest.mock('@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon', () => () =>
-  'Exclamation triangle icon mock'
+jest.mock(
+  '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon',
+  () => () => 'Exclamation triangle icon mock'
 );
 jest.mock('@patternfly/react-icons/dist/esm/icons/info-circle-icon', () => () => 'Info circle icon mock');
 jest.mock('@patternfly/react-icons/dist/esm/icons/bell-icon', () => () => 'Bell icon mock');
@@ -14,15 +15,15 @@ jest.mock('@patternfly/react-icons/dist/esm/icons/bell-icon', () => () => 'Bell
 test('Renders without children', () => {
   render(
     <div data-testid="container">
-      <AlertIcon variant="default" />
+      <AlertIcon variant="custom" />
     </div>
   );
 
   expect(screen.getByTestId('container').firstChild).toBeVisible();
 });
 
-test('Renders with the bell icon when variant = default', () => {
-  render(<AlertIcon variant="default" />);
+test('Renders with the bell icon when variant = custom', () => {
+  render(<AlertIcon variant="custom" />);
 
   expect(screen.getByText('Bell icon mock')).toBeVisible();
 });
@@ -52,32 +53,32 @@ test('Renders with the info circle icon when variant = info', () => {
 });
 
 test('Renders with custom class names provided via prop', () => {
-  render(<AlertIcon variant="default" className="test-class" />);
+  render(<AlertIcon variant="custom" className="test-class" />);
 
   expect(screen.getByText('Bell icon mock')).toHaveClass('test-class');
 });
 
 test('Renders with the passed custom icon when one is passed rather than the icon determined by the passed variant', () => {
-  render(<AlertIcon variant="default" customIcon="Custom icon" />);
+  render(<AlertIcon variant="custom" customIcon="Custom icon" />);
 
   expect(screen.queryByText('Bell icon mock')).not.toBeInTheDocument();
   expect(screen.getByText('Custom icon')).toBeVisible();
 });
 
 test('Renders the icon inside class pf-c-alert__icon', () => {
-  render(<AlertIcon variant="default" />);
+  render(<AlertIcon variant="custom" />);
 
   expect(screen.getByText('Bell icon mock')).toHaveClass('pf-c-alert__icon');
 });
 
 test('Renders with inherited element props spread to the component', () => {
-  render(<AlertIcon variant="default" aria-label="Test label" />);
+  render(<AlertIcon variant="custom" aria-label="Test label" />);
 
   expect(screen.getByText('Bell icon mock')).toHaveAccessibleName('Test label');
 });
 
 test('Matches snapshot', () => {
-  const { asFragment } = render(<AlertIcon variant="default" />);
+  const { asFragment } = render(<AlertIcon variant="custom" />);
 
   expect(asFragment()).toMatchSnapshot();
 });

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

@@ -6,7 +6,7 @@ exports[`Matches snapshot 1`] = `
     aria-atomic="false"
     aria-label="Toast alert label"
     aria-live="polite"
-    class="pf-c-alert"
+    class="pf-c-alert pf-m-custom"
     data-ouia-component-id="ouia-id"
     data-ouia-component-type="PF4/Alert"
     data-ouia-safe="true"
@@ -16,7 +16,7 @@ exports[`Matches snapshot 1`] = `
         custom icon: 
       </p>
       <p>
-        variant: default
+        variant: custom
       </p>
     </div>
     <h4
@@ -25,7 +25,7 @@ exports[`Matches snapshot 1`] = `
       <span
         class="pf-u-screen-reader"
       >
-        Default alert:
+        Custom alert:
       </span>
       Some title
     </h4>

package/src/components/Alert/examples/Alert.md

@@ -17,11 +17,11 @@ import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 
 ### Alert variants
 
-PatternFly supports several alert variants for different scenarios. Each variant has an associated status icon, background, and alert title coded to communicate the severity of an alert. Use the `variant` property to apply the following styling options. If no `variant` is specified, then the variant will be set to "default".
+PatternFly supports several alert variants for different scenarios. Each variant has an associated status icon, background, and alert title coded to communicate the severity of an alert. Use the `variant` property to apply the following styling options. If no `variant` is specified, then the variant will be set to "custom".
 
 | Variant | Description |
 |---|---|
-| Default | Use for generic messages with no associated severity |
+| Custom | Use for generic messages that should have a custom color set by the associated CSS variable. Should be used when the message has no associated severity. |
 | Info | Use for general informational messages |
 | Success | Use to indicate that a task or process has been completed successfully |
 | Warning | Use to indicate that a non-critical error has occurred|
@@ -32,7 +32,7 @@ import React from 'react';
 import { Alert } from '@patternfly/react-core';
 
 <React.Fragment>
-  <Alert title="Default alert title" ouiaId="DefaultAlert" />
+  <Alert title="Custom alert title" ouiaId="CustomAlert" />
   <Alert variant="info" title="Info alert title" ouiaId="InfoAlert" />
   <Alert variant="success" title="Success alert title" ouiaId="SuccessAlert" />
   <Alert variant="warning" title="Warning alert title" ouiaId="WarningAlert" />
@@ -229,7 +229,7 @@ Use inline alerts to display an alert inline with content. All alert variants ma
 import React from 'react';
 import { Alert } from '@patternfly/react-core';
 <React.Fragment>
-  <Alert variant="default" isInline title="Default inline alert title" />
+  <Alert variant="custom" isInline title="Custom inline alert title" />
   <Alert variant="info" isInline title="Info inline alert title" />
   <Alert variant="success" isInline title="Success inline alert title" />
   <Alert variant="warning" isInline title="Warning inline alert title" />
@@ -294,7 +294,7 @@ Use the `isPlain` property to make any inline alert plain. Plain styling removes
 import React from 'react';
 import { Alert } from '@patternfly/react-core';
 <React.Fragment>
-  <Alert variant="default" isInline isPlain title="Default inline alert title" />
+  <Alert variant="custom" isInline isPlain title="Custom inline alert title" />
   <Alert variant="info" isInline isPlain title="Info inline alert title" />
   <Alert variant="success" isInline isPlain title="Success inline alert title" />
   <Alert variant="warning" isInline isPlain title="Warning inline alert title" />

package/src/components/EmptyState/__tests__/Generated/__snapshots__/EmptyStateIcon.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`EmptyStateIcon should match snapshot (auto-generated) 1`] = `
     <svg
       aria-hidden="true"
       aria-labelledby="icon-title-0"
-      class="''"
+      class="pf-svg ''"
       fill="currentColor"
       role="img"
       viewBox="0 0 448 512"

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

@@ -36,6 +36,7 @@ exports[`EmptyState Header with icon 1`] = `
     >
       <svg
         aria-hidden="true"
+        class="pf-svg"
         fill="currentColor"
         role="img"
         viewBox="0 0 448 512"

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

@@ -40,7 +40,7 @@ test('sets additional custom class successfully', () => {
   expect(iconContainer).toHaveClass('test');
 });
 
-Object.values(['sm', 'md', 'lg', 'xl']).forEach(size => {
+Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
   test(`sets icon size modifier successfully - ${size}`, () => {
     render(
       <Icon iconSize={size as 'sm' | 'md' | 'lg' | 'xl'} title={`content-${size}-icon`}>
@@ -60,10 +60,10 @@ test('check icon without iconSize', () => {
     </Icon>
   );
   const iconContainer = screen.getByTitle('no-icon-size').querySelector('.pf-c-icon__content');
-  expect(Array.from(iconContainer?.classList || []).some(c => /pf-m-*/.test(c))); // Check no modifier classes have been added
+  expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
-Object.values(['sm', 'md', 'lg', 'xl']).forEach(size => {
+Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
   test(`sets progress icon size modifier successfully - ${size}`, () => {
     render(
       <Icon isInProgress progressIconSize={size as 'sm' | 'md' | 'lg' | 'xl'} title={`progress-content-${size}-icon`}>
@@ -83,10 +83,10 @@ test('check icon without progress icon size', () => {
     </Icon>
   );
   const iconContainer = screen.getByTitle('no-progress-icon-size').querySelector('.pf-c-icon__progress');
-  expect(Array.from(iconContainer?.classList || []).some(c => /pf-m-*/.test(c))); // Check no modifier classes have been added
+  expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
-Object.values(['sm', 'md', 'lg', 'xl']).forEach(size => {
+Object.values(['sm', 'md', 'lg', 'xl']).forEach((size) => {
   test(`sets size modifier successfully - ${size}`, () => {
     render(
       <Icon size={size as 'sm' | 'md' | 'lg' | 'xl'} title={`${size}-icon`}>
@@ -106,10 +106,10 @@ test('check icon without size', () => {
     </Icon>
   );
   const iconContainer = screen.getByTitle('no-size');
-  expect(Array.from(iconContainer?.classList || []).some(c => /pf-m-*/.test(c))); // Check no modifier classes have been added
+  expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
-Object.values(['custom', 'info', 'success', 'warning', 'danger']).forEach(status => {
+Object.values(['custom', 'info', 'success', 'warning', 'danger']).forEach((status) => {
   test(`sets status modifier successfully - ${status}`, () => {
     render(
       <Icon status={status as 'custom' | 'info' | 'success' | 'warning' | 'danger'} title={`${status}-icon`}>
@@ -129,7 +129,7 @@ test('check icon without status', () => {
     </Icon>
   );
   const iconContent = screen.getByTitle('no-status').querySelector('.pf-c-icon__content');
-  expect(Array.from(iconContent?.classList || []).some(c => /pf-m-*/.test(c))); // Check no modifier classes have been added
+  expect(Array.from(iconContent?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
 test('sets isInline successfully', () => {
@@ -150,7 +150,7 @@ test('check icon without isInline', () => {
     </Icon>
   );
   const iconContainer = screen.getByTitle('no-inline');
-  expect(Array.from(iconContainer?.classList || []).some(c => /pf-m-*/.test(c))); // Check no modifier classes have been added
+  expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
 test('sets isInProgress successfully', () => {
@@ -173,7 +173,7 @@ test('check icon without isInProgress', () => {
     </Icon>
   );
   const iconContainer = screen.getByTitle('no-in-progress');
-  expect(Array.from(iconContainer?.classList || []).some(c => /pf-m-*/.test(c))); // Check no modifier classes have been added
+  expect(Array.from(iconContainer?.classList || []).some((c) => /pf-m-*/.test(c))); // Check no modifier classes have been added
 });
 
 test('sets default progres aria-label successfully', () => {

package/src/components/Modal/Modal.tsx

@@ -65,7 +65,7 @@ export interface ModalProps extends React.HTMLProps<HTMLDivElement>, OUIAProps {
   /** Optional alert icon (or other) to show before the title of the modal header. When the
    * predefined alert types are used the default styling will be automatically applied.
    */
-  titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'default' | React.ComponentType<any>;
+  titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>;
   /** Optional title label text for screen readers. */
   titleLabel?: string;
   /** Variant of the modal. */

package/src/components/Modal/ModalBoxTitle.tsx

@@ -12,7 +12,7 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import { useIsomorphicLayoutEffect } from '../../helpers';
 
 export const isVariantIcon = (icon: any): icon is string =>
-  ['success', 'danger', 'warning', 'info', 'default'].includes(icon as string);
+  ['success', 'danger', 'warning', 'info', 'custom'].includes(icon as string);
 
 export interface ModalBoxTitleProps {
   /** Additional classes added to the modal box title. */
@@ -23,7 +23,7 @@ export interface ModalBoxTitleProps {
   title: React.ReactNode;
   /** Optional alert icon (or other) to show before the title. When the predefined alert types
    * are used the default styling will be automatically applied. */
-  titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'default' | React.ComponentType<any>;
+  titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>;
   /** Optional title label text for screen readers. */
   titleLabel?: string;
 }
@@ -44,7 +44,7 @@ export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
     danger: <ExclamationCircleIcon />,
     warning: <ExclamationTriangleIcon />,
     info: <InfoCircleIcon />,
-    default: <BellIcon />
+    custom: <BellIcon />
   };
   const CustomIcon = !isVariantIcon(titleIconVariant) && titleIconVariant;
 

package/src/components/Modal/ModalContent.tsx

@@ -72,7 +72,7 @@ export interface ModalContentProps extends OUIAProps {
   /** Optional alert icon (or other) to show before the title of the modal header. When the
    * predefined alert types are used the default styling will be automatically applied.
    */
-  titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'default' | React.ComponentType<any>;
+  titleIconVariant?: 'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>;
   /** Optional title label text for screen readers. */
   titleLabel?: string;
   /** Variant of the modal. */
@@ -174,11 +174,7 @@ export const ModalContent: React.FunctionComponent<ModalContentProps> = ({
     <ModalBox
       id={boxId}
       style={boxStyle}
-      className={css(
-        className,
-        isVariantIcon(titleIconVariant) &&
-          modalStyles.modifiers[titleIconVariant as 'success' | 'warning' | 'info' | 'danger' | 'custom']
-      )}
+      className={css(className, isVariantIcon(titleIconVariant) && modalStyles.modifiers[titleIconVariant])}
       variant={variant}
       position={position}
       positionOffset={positionOffset}

package/src/components/Modal/__tests__/ModalBoxTitle.test.tsx

@@ -31,9 +31,9 @@ test('ModalBoxTitle danger variant', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('ModalBoxTitle default variant', () => {
+test('ModalBoxTitle custom variant', () => {
   const { asFragment } = render(
-    <ModalBoxTitle title="Test Modal Box warning" id="boxId" titleIconVariant="default">
+    <ModalBoxTitle title="Test Modal Box warning" id="boxId" titleIconVariant="custom">
       content
     </ModalBoxTitle>
   );

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

@@ -65,7 +65,7 @@ exports[`ModalBoxTitle custom icon variant 1`] = `
 </DocumentFragment>
 `;
 
-exports[`ModalBoxTitle danger variant 1`] = `
+exports[`ModalBoxTitle custom variant 1`] = `
 <DocumentFragment>
   <h1
     class="pf-c-modal-box__title pf-m-icon"
@@ -79,28 +79,28 @@ exports[`ModalBoxTitle danger variant 1`] = `
         class="pf-svg"
         fill="currentColor"
         role="img"
-        viewBox="0 0 512 512"
+        viewBox="0 0 896 1024"
       >
         <path
-          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+          d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
         />
       </svg>
     </span>
     <span
       class="pf-u-screen-reader"
     >
-      Danger alert:
+      Custom alert:
     </span>
     <span
       class="pf-c-modal-box__title-text"
     >
-      Test Modal Box danger
+      Test Modal Box warning
     </span>
   </h1>
 </DocumentFragment>
 `;
 
-exports[`ModalBoxTitle default variant 1`] = `
+exports[`ModalBoxTitle danger variant 1`] = `
 <DocumentFragment>
   <h1
     class="pf-c-modal-box__title pf-m-icon"
@@ -114,22 +114,22 @@ exports[`ModalBoxTitle default variant 1`] = `
         class="pf-svg"
         fill="currentColor"
         role="img"
-        viewBox="0 0 896 1024"
+        viewBox="0 0 512 512"
       >
         <path
-          d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
+          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
         />
       </svg>
     </span>
     <span
       class="pf-u-screen-reader"
     >
-      Default alert:
+      Danger alert:
     </span>
     <span
       class="pf-c-modal-box__title-text"
     >
-      Test Modal Box warning
+      Test Modal Box danger
     </span>
   </h1>
 </DocumentFragment>

package/src/components/Modal/examples/Modal.md

@@ -102,7 +102,7 @@ To exclusively present information in a modal, remove the `header` and/or `foote
 
 ### Title icon
 
-To add an icon before a modal’s title, use the `titleIconVariant`, which can be set to one of the predefined variants -- "success", "danger", "warning", "info", and "default" -- or to an imported custom icon. The following example uses a "warning" variant.
+To add an icon before a modal’s title, use the `titleIconVariant`, which can be set to one of the predefined variants -- "success", "danger", "warning", "info", and "custom" -- or to an imported custom icon. The following example uses a "warning" variant.
 
 ```ts file="./ModalTitleIcon.tsx"
 

package/src/components/NotificationDrawer/NotificationDrawerListItem.tsx

@@ -47,7 +47,7 @@ export const NotificationDrawerListItem: React.FunctionComponent<NotificationDra
         className
       )}
       tabIndex={tabIndex}
-      onClick={e => onClick(e)}
+      onClick={(e) => onClick(e)}
       onKeyDown={onKeyDown}
     >
       {children}

package/src/components/NotificationDrawer/NotificationDrawerListItemHeader.tsx

@@ -18,7 +18,7 @@ export const variantIcons = {
   danger: ExclamationCircleIcon,
   warning: ExclamationTriangleIcon,
   info: InfoCircleIcon,
-  default: BellIcon
+  custom: BellIcon
 };
 
 export interface NotificationDrawerListItemHeaderProps extends React.HTMLProps<HTMLDivElement> {
@@ -33,7 +33,7 @@ export interface NotificationDrawerListItemHeaderProps extends React.HTMLProps<H
   /**  Notification drawer list item title */
   title: string;
   /**  Variant indicates the severity level */
-  variant?: 'success' | 'danger' | 'warning' | 'info' | 'default';
+  variant?: 'success' | 'danger' | 'warning' | 'info' | 'custom';
   /** Truncate title to number of lines */
   truncateTitle?: number;
   /** Position of the tooltip which is displayed if text is truncated */
@@ -62,7 +62,7 @@ export const NotificationDrawerListItemHeader: React.FunctionComponent<Notificat
   icon = null,
   srTitle,
   title,
-  variant = 'default',
+  variant = 'custom',
   truncateTitle = 0,
   tooltipPosition,
   headingLevel: HeadingLevel = 'h2',

package/src/components/Popover/Popover.tsx

@@ -45,7 +45,7 @@ export interface PopoverProps {
   /** Severity variants for an alert popover. This modifies the color of the header to
    * match the severity.
    */
-  alertSeverityVariant?: 'default' | 'info' | 'warning' | 'success' | 'danger';
+  alertSeverityVariant?: 'custom' | 'info' | 'warning' | 'success' | 'danger';
   /** The duration of the CSS fade transition animation. */
   animationDuration?: number;
   /** The element to append the popover to. Defaults to "inline". */
@@ -210,7 +210,7 @@ export interface PopoverProps {
 }
 
 const alertStyle = {
-  default: styles.modifiers.custom,
+  custom: styles.modifiers.custom,
   info: styles.modifiers.info,
   success: styles.modifiers.success,
   warning: styles.modifiers.warning,

package/src/components/Popover/PopoverHeader.tsx

@@ -14,7 +14,7 @@ export interface PopoverHeaderProps extends Omit<React.HTMLProps<HTMLHeadingElem
   /** Heading level of the header title */
   titleHeadingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
   /** Severity variants for an alert popover. This modifies the color of the header to match the severity. */
-  alertSeverityVariant?: 'default' | 'info' | 'warning' | 'success' | 'danger';
+  alertSeverityVariant?: 'custom' | 'info' | 'warning' | 'success' | 'danger';
   /** Id of the header */
   id?: string;
   /** Text announced by screen reader when alert severity variant is set to indicate severity level */