@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.51

package/src/components/Banner/examples/BannerStatus.tsx

@@ -1,16 +1,16 @@
 import { Banner, Flex, FlexItem } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const BannerStatus: React.FunctionComponent = () => (
   <>
     <Banner screenReaderText="Success banner" status="success">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <CheckCircleIcon />
+          <RhUiCheckCircleFillIcon />
         </FlexItem>
         <FlexItem>Success banner</FlexItem>
       </Flex>
@@ -19,7 +19,7 @@ export const BannerStatus: React.FunctionComponent = () => (
     <Banner screenReaderText="Warning banner" status="warning">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <ExclamationTriangleIcon />
+          <RhUiWarningFillIcon />
         </FlexItem>
         <FlexItem>Warning banner</FlexItem>
       </Flex>
@@ -28,7 +28,7 @@ export const BannerStatus: React.FunctionComponent = () => (
     <Banner screenReaderText="Danger banner" status="danger">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <ExclamationCircleIcon />
+          <RhUiErrorFillIcon />
         </FlexItem>
         <FlexItem>Danger banner</FlexItem>
       </Flex>
@@ -37,7 +37,7 @@ export const BannerStatus: React.FunctionComponent = () => (
     <Banner screenReaderText="Info banner" status="info">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <InfoCircleIcon />
+          <RhUiInformationFillIcon />
         </FlexItem>
         <FlexItem>Info banner</FlexItem>
       </Flex>
@@ -46,7 +46,7 @@ export const BannerStatus: React.FunctionComponent = () => (
     <Banner screenReaderText="Custom banner" status="custom">
       <Flex spaceItems={{ default: 'spaceItemsSm' }}>
         <FlexItem>
-          <BellIcon />
+          <RhUiNotificationFillIcon />
         </FlexItem>
         <FlexItem>Custom banner</FlexItem>
       </Flex>

package/src/components/Brand/Brand.tsx

@@ -4,8 +4,10 @@ import { setBreakpointCssVars } from '../../helpers';
 import cssBrandHeight from '@patternfly/react-tokens/dist/esm/c_brand_Height';
 import cssBrandWidth from '@patternfly/react-tokens/dist/esm/c_brand_Width';
 
-export interface BrandProps
-  extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+export interface BrandProps extends React.DetailedHTMLProps<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+> {
   /** Transforms the Brand into a <picture> element from an <img> element. Container for <source> child elements. */
   children?: React.ReactNode;
   /** Additional classes added to the either type of Brand. */

package/src/components/Breadcrumb/BreadcrumbHeading.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { css } from '@patternfly/react-styles';
 
@@ -32,7 +32,7 @@ export const BreadcrumbHeading: React.FunctionComponent<BreadcrumbHeadingProps>
     <li {...props} className={css(styles.breadcrumbItem, className)}>
       {showDivider && (
         <span className={styles.breadcrumbItemDivider}>
-          <AngleRightIcon />
+          <RhMicronsCaretRightIcon />
         </span>
       )}
       <h1 className={styles.breadcrumbHeading}>

package/src/components/Breadcrumb/BreadcrumbItem.tsx

@@ -1,4 +1,4 @@
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
 import { css } from '@patternfly/react-styles';
 
@@ -47,7 +47,7 @@ export const BreadcrumbItem: React.FunctionComponent<BreadcrumbItemProps> = ({
     <li {...props} className={css(styles.breadcrumbItem, classNameProp)}>
       {showDivider && (
         <span className={styles.breadcrumbItemDivider}>
-          <AngleRightIcon />
+          <RhMicronsCaretRightIcon />
         </span>
       )}
       {component === 'button' && (

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

@@ -5,7 +5,7 @@ exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = `
   <nav
     aria-label="custom label"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r2:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -22,7 +22,7 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r3:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -53,11 +53,11 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            viewBox="0 0 256 512"
+            viewBox="0 0 20 20"
             width="1em"
           >
             <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+              d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
             />
           </svg>
         </span>
@@ -78,7 +78,7 @@ exports[`Breadcrumb component should render breadcrumb with className 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb className"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r1:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -95,7 +95,7 @@ exports[`Breadcrumb component should render default breadcrumb 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r0:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >

package/src/components/Breadcrumb/examples/Breadcrumb.md

@@ -7,7 +7,7 @@ ouia: true
 ---
 
 import { useRef, useState } from 'react';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 
 ## Examples

package/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsx

@@ -11,13 +11,13 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 
 const dropdownItems = [
   <DropdownItem
     icon={
       <Icon shouldMirrorRTL>
-        <AngleLeftIcon />
+        <RhMicronsCaretLeftIcon />
       </Icon>
     }
     key="edit"
@@ -27,7 +27,7 @@ const dropdownItems = [
   <DropdownItem
     icon={
       <Icon shouldMirrorRTL>
-        <AngleLeftIcon />
+        <RhMicronsCaretLeftIcon />
       </Icon>
     }
     key="action"
@@ -37,7 +37,7 @@ const dropdownItems = [
   <DropdownItem
     icon={
       <Icon shouldMirrorRTL>
-        <AngleLeftIcon />
+        <RhMicronsCaretLeftIcon />
       </Icon>
     }
     key="apps"

package/src/components/Button/Button.tsx

@@ -6,7 +6,7 @@ import { useOUIAProps, OUIAProps } from '../../helpers/OUIA/ouia';
 import { Badge } from '../Badge';
 import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
 import OutlinedStarIcon from '@patternfly/react-icons/dist/esm/icons/outlined-star-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import { hamburgerIcon } from './hamburgerIcon';
 
 export enum ButtonVariant {
@@ -215,7 +215,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
     }
 
     if (isSettings) {
-      iconContent = <CogIcon />;
+      iconContent = <RhUiSettingsFillIcon />;
     }
     if (isHamburger) {
       iconContent = hamburgerIcon;

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

@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-67"
+    data-ouia-component-id="OUIA-Generated-Button-primary-:r30:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/Button/examples/Button.md

@@ -7,13 +7,13 @@ ouia: true
 ---
 
 import { Fragment, useState } from 'react';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 
 ## Examples

package/src/components/Button/examples/ButtonCircle.tsx

@@ -1,8 +1,8 @@
 import { Button, Flex } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface LoadingPropsType {
@@ -34,20 +34,25 @@ export const ButtonCircle: React.FunctionComponent = () => {
       <Button variant="warning" isCircle icon={<PlusCircleIcon />} aria-label="Add warning circle variant example" />
       <Button variant="link" isCircle icon={<PlusCircleIcon />} aria-label="Add link circle variant example" />
       <Button variant="control" isCircle icon={<CopyIcon />} aria-label="Copy control circle variant example" />
-      <Button variant="plain" isCircle icon={<TimesIcon />} aria-label="Remove plain circle variant example" />
-      <Button variant="stateful" isCircle icon={<BellIcon />} aria-label="Stateful unread circle variant example" />
+      <Button variant="plain" isCircle icon={<RhMicronsCloseIcon />} aria-label="Remove plain circle variant example" />
+      <Button
+        variant="stateful"
+        isCircle
+        icon={<RhUiNotificationFillIcon />}
+        aria-label="Stateful unread circle variant example"
+      />
       <Button
         variant="stateful"
         state="read"
         isCircle
-        icon={<BellIcon />}
+        icon={<RhUiNotificationFillIcon />}
         aria-label="Stateful read circle variant example"
       />
       <Button
         variant="stateful"
         state="attention"
         isCircle
-        icon={<BellIcon />}
+        icon={<RhUiNotificationFillIcon />}
         aria-label="Stateful attention circle variant example"
       />
       <Button

package/src/components/Button/examples/ButtonDisabled.tsx

@@ -1,5 +1,5 @@
 import { Button, Flex } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 
@@ -34,7 +34,7 @@ export const ButtonDisabled: React.FunctionComponent = () => (
       <Button variant="link" isDanger isDisabled>
         Danger link
       </Button>
-      <Button isDisabled variant="plain" aria-label="Action" icon={<TimesIcon />} />
+      <Button isDisabled variant="plain" aria-label="Action" icon={<RhMicronsCloseIcon />} />
     </Flex>
     <br />
     <Flex columnGap={{ default: 'columnGapSm' }}>

package/src/components/Button/examples/ButtonStateful.tsx

@@ -1,5 +1,5 @@
 import { Button, Flex } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const ButtonStateful: React.FunctionComponent = () => (
   <Flex>
@@ -7,7 +7,7 @@ export const ButtonStateful: React.FunctionComponent = () => (
       <div>
         <strong>Read</strong>
       </div>
-      <Button variant="stateful" state="read" icon={<BellIcon />}>
+      <Button variant="stateful" state="read" icon={<RhUiNotificationFillIcon />}>
         10 <span className="pf-v6-screen-reader">items</span>
       </Button>
     </div>
@@ -15,7 +15,7 @@ export const ButtonStateful: React.FunctionComponent = () => (
       <div>
         <strong>Unread</strong>
       </div>
-      <Button variant="stateful" state="unread" icon={<BellIcon />}>
+      <Button variant="stateful" state="unread" icon={<RhUiNotificationFillIcon />}>
         10 <span className="pf-v6-screen-reader">unread items</span>
       </Button>
     </div>
@@ -23,7 +23,7 @@ export const ButtonStateful: React.FunctionComponent = () => (
       <div>
         <strong>Attention</strong>
       </div>
-      <Button variant="stateful" state="attention" icon={<BellIcon />}>
+      <Button variant="stateful" state="attention" icon={<RhUiNotificationFillIcon />}>
         10 <span className="pf-v6-screen-reader">unread items, needs attention</span>
       </Button>
     </div>

package/src/components/Button/examples/ButtonVariations.tsx

@@ -1,9 +1,9 @@
 import { Button, Flex } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const ButtonVariations: React.FunctionComponent = () => (
   <>
@@ -41,7 +41,7 @@ export const ButtonVariations: React.FunctionComponent = () => (
       <Button variant="link" isDanger>
         Danger link
       </Button>
-      <Button variant="plain" aria-label="Action" icon={<TimesIcon />} />
+      <Button variant="plain" aria-label="Action" icon={<RhMicronsCloseIcon />} />
     </Flex>
     <br />
     <Flex columnGap={{ default: 'columnGapSm' }}>
@@ -50,13 +50,13 @@ export const ButtonVariations: React.FunctionComponent = () => (
     </Flex>
     <br />
     <Flex columnGap={{ default: 'columnGapSm' }}>
-      <Button variant="stateful" icon={<BellIcon />} state="read">
+      <Button variant="stateful" icon={<RhUiNotificationFillIcon />} state="read">
         Stateful read
       </Button>
-      <Button variant="stateful" icon={<BellIcon />} state="unread">
+      <Button variant="stateful" icon={<RhUiNotificationFillIcon />} state="unread">
         Stateful unread
       </Button>
-      <Button variant="stateful" icon={<BellIcon />} state="attention">
+      <Button variant="stateful" icon={<RhUiNotificationFillIcon />} state="attention">
         Stateful attention
       </Button>
     </Flex>

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -4,11 +4,11 @@ import { Button } from '../Button';
 import { Select, SelectList, SelectOption } from '../Select';
 import { MenuToggle, MenuToggleElement } from '../MenuToggle';
 import { InputGroup, InputGroupItem } from '../InputGroup';
-import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
-import { getUniqueId } from '../../helpers/util';
+import { useSSRSafeId } from '../../helpers';
 import { isValidDate } from '../../helpers/datetimeUtils';
 
 export enum Weekday {
@@ -170,7 +170,7 @@ export const CalendarMonth = ({
 
   const [hoveredDate, setHoveredDate] = useState<Date>(undefined);
   const focusRef = useRef<HTMLButtonElement>(undefined);
-  const [hiddenMonthId] = useState(getUniqueId('hidden-month-span'));
+  const hiddenMonthId = useSSRSafeId('hidden-month-span');
   const [shouldFocus, setShouldFocus] = useState(false);
 
   const isValidated = (date: Date) => validators.every((validator) => validator(date));
@@ -292,7 +292,7 @@ export const CalendarMonth = ({
             variant="plain"
             aria-label={prevMonthAriaLabel}
             onClick={(ev: React.MouseEvent) => onMonthClick(ev, prevMonth)}
-            icon={<AngleLeftIcon />}
+            icon={<RhMicronsCaretLeftIcon />}
           />
         </div>
         <InputGroup>
@@ -355,7 +355,7 @@ export const CalendarMonth = ({
             variant="plain"
             aria-label={nextMonthAriaLabel}
             onClick={(ev: React.MouseEvent) => onMonthClick(ev, nextMonth)}
-            icon={<AngleRightIcon />}
+            icon={<RhMicronsCaretRightIcon />}
           />
         </div>
       </div>

package/src/components/Card/Card.tsx

@@ -34,6 +34,8 @@ export interface CardProps extends React.HTMLProps<HTMLElement>, OUIAProps {
   isFullHeight?: boolean;
   /** Modifies the card to include plain styling; this removes border and background */
   isPlain?: boolean;
+  /** Modifies the card to include glass styling when glass theme is enabled */
+  isGlass?: boolean;
   /** Flag indicating if a card is expanded. Modifies the card to be expandable. */
   isExpanded?: boolean;
   /** Card background color variant */
@@ -81,6 +83,7 @@ const CardBase: React.FunctionComponent<CardProps> = ({
   isLarge = false,
   isFullHeight = false,
   isPlain = false,
+  isGlass = false,
   variant = 'default',
   ouiaId,
   ouiaSafe = true,
@@ -138,6 +141,7 @@ const CardBase: React.FunctionComponent<CardProps> = ({
           isLarge && styles.modifiers.displayLg,
           isFullHeight && styles.modifiers.fullHeight,
           isPlain && styles.modifiers.plain,
+          isGlass && styles.modifiers.glass,
           variant === 'secondary' && styles.modifiers.secondary,
           getSelectableModifiers(),
           isDisabled && styles.modifiers.disabled,