@patternfly/react-core 6.5.0-prerelease.9 → 6.5.1-prerelease.0

package/src/components/Icon/examples/IconStatus.tsx

@@ -1,27 +1,27 @@
 import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
-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 CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-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 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 RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-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 IconStatus: React.FunctionComponent = () => (
   <Fragment>
     <Icon status="danger">
-      <ExclamationCircleIcon />
+      <RhUiErrorFillIcon />
     </Icon>{' '}
     <Icon status="warning">
-      <ExclamationTriangleIcon />
+      <RhUiWarningFillIcon />
     </Icon>{' '}
     <Icon status="success">
-      <CheckCircleIcon />
+      <RhUiCheckCircleFillIcon />
     </Icon>{' '}
     <Icon status="info">
-      <InfoCircleIcon />
+      <RhUiInformationFillIcon />
     </Icon>{' '}
     <Icon status="custom">
-      <BellIcon />
+      <RhUiNotificationFillIcon />
     </Icon>
   </Fragment>
 );

package/src/components/Icon/examples/StandaloneIconSizes.tsx

@@ -1,26 +1,26 @@
 import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 
 export const StandaloneIconSizes: React.FunctionComponent = () => (
   <Fragment>
     <Icon size="sm">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="md">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="lg">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="2xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="3xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>
   </Fragment>
 );

package/src/components/InputGroup/examples/InputGroup.md

@@ -9,7 +9,7 @@ import { Fragment, useRef, useState } from 'react';
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
 import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 
 ## Examples
 

package/src/components/InputGroup/examples/InputGroupWithPopover.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useRef } from 'react';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import { Button, InputGroup, InputGroupItem, TextInput, Popover, PopoverPosition } from '@patternfly/react-core';
 
 export const InputGroupWithPopover: React.FunctionComponent = () => {
@@ -23,7 +23,7 @@ export const InputGroupWithPopover: React.FunctionComponent = () => {
             bodyContent="This field is an example of an input group with a popover."
             appendTo={() => inputGroupRef1.current}
           >
-            <Button variant="control" aria-label="popover for input" icon={<QuestionCircleIcon />} />
+            <Button variant="control" aria-label="popover for input" icon={<RhUiQuestionMarkCircleFillIcon />} />
           </Popover>
         </InputGroupItem>
       </InputGroup>
@@ -44,7 +44,7 @@ export const InputGroupWithPopover: React.FunctionComponent = () => {
             bodyContent="This field is an example of an input group with a popover."
             appendTo={() => inputGroupRef2.current}
           >
-            <Button variant="plain" aria-label="Popover for input" icon={<QuestionCircleIcon />} />
+            <Button variant="plain" aria-label="Popover for input" icon={<RhUiQuestionMarkCircleFillIcon />} />
           </Popover>
         </InputGroupItem>
       </InputGroup>

package/src/components/JumpLinks/JumpLinks.tsx

@@ -2,12 +2,13 @@ import { Children, cloneElement, Fragment, useCallback, useEffect, useRef, useSt
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/JumpLinks/jump-links';
 import sidebarStyles from '@patternfly/react-styles/css/components/Sidebar/sidebar';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import cssToggleDisplayVar from '@patternfly/react-tokens/dist/esm/c_jump_links__toggle_Display';
 import { Button } from '../Button';
 import { JumpLinksItem, JumpLinksItemProps } from './JumpLinksItem';
 import { JumpLinksList } from './JumpLinksList';
-import { canUseDOM, formatBreakpointMods, getUniqueId } from '../../helpers/util';
+import { canUseDOM, formatBreakpointMods } from '../../helpers/util';
+import { useSSRSafeId } from '../../helpers';
 
 export interface JumpLinksProps extends Omit<React.HTMLProps<HTMLElement>, 'label'> {
   /** Whether to center children. */
@@ -99,6 +100,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
   labelId,
   ...props
 }: JumpLinksProps) => {
+  const generatedId = useSSRSafeId();
   const hasScrollSpy = Boolean(scrollableRef || scrollableSelector);
   const [scrollItems, setScrollItems] = useState(hasScrollSpy ? getScrollItems(children, []) : []);
   const [activeIndex, setActiveIndex] = useState(activeIndexProp);
@@ -244,7 +246,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
           return child;
         });
 
-  const id = labelId ?? getUniqueId();
+  const id = labelId ?? generatedId;
   const hasAriaLabelledBy = expandable || (label && alwaysShowLabel);
   const computedAriaLabel = hasAriaLabelledBy ? null : ariaLabel;
   const computedAriaLabelledBy = hasAriaLabelledBy ? id : null;
@@ -275,7 +277,7 @@ export const JumpLinks: React.FunctionComponent<JumpLinksProps> = ({
                 aria-expanded={isExpanded}
                 icon={
                   <span className={styles.jumpLinksToggleIcon}>
-                    <AngleRightIcon />
+                    <RhMicronsCaretDownIcon />
                   </span>
                 }
                 id={id}

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

@@ -2,9 +2,6 @@ import { render, screen } from '@testing-library/react';
 import { JumpLinks } from '../JumpLinks';
 import { JumpLinksItem } from '../JumpLinksItem';
 import { JumpLinksList } from '../JumpLinksList';
-import * as utils from '../../../helpers/util';
-
-jest.spyOn(utils, 'getUniqueId').mockReturnValue('unique_id_mock');
 
 test('simple jumplinks', () => {
   const { asFragment } = render(
@@ -140,7 +137,8 @@ test('uses aria-labelledby over aria-label when expandable is passed in', () =>
 test('random id is used with aria-labelledby by default in expandable case', () => {
   render(<JumpLinks expandable={{ default: 'expandable' }}>{expandableJumpLinksItems}</JumpLinks>);
   const navigation = screen.getByRole('navigation', { name: /Toggle jump links/i });
-  expect(navigation).toHaveAttribute('aria-labelledby', 'unique_id_mock');
+  expect(navigation).toHaveAttribute('aria-labelledby');
+  expect(navigation.getAttribute('aria-labelledby')).toBeTruthy();
 });
 
 test('random id is used with aria-labelledby by default in label case', () => {
@@ -150,7 +148,8 @@ test('random id is used with aria-labelledby by default in label case', () => {
     </JumpLinks>
   );
   const navigation = screen.getByRole('navigation', { name: /Jump to section/i });
-  expect(navigation).toHaveAttribute('aria-labelledby', 'unique_id_mock');
+  expect(navigation).toHaveAttribute('aria-labelledby');
+  expect(navigation.getAttribute('aria-labelledby')).toBeTruthy();
 });
 
 test('custom labelId is used with aria-labelledby when it is passed in in expandable case', () => {

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

@@ -3,7 +3,7 @@
 exports[`expandable vertical with subsection 1`] = `
 <DocumentFragment>
   <nav
-    aria-labelledby="unique_id_mock"
+    aria-labelledby="pf-:rg:"
     class="pf-v6-c-jump-links pf-m-vertical pf-m-expandable"
   >
     <div
@@ -18,10 +18,10 @@ exports[`expandable vertical with subsection 1`] = `
           <button
             aria-expanded="false"
             class="pf-v6-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-1"
+            data-ouia-component-id="OUIA-Generated-Button-plain-:rh:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
-            id="unique_id_mock"
+            id="pf-:rg:"
             type="button"
           >
             <span
@@ -36,11 +36,11 @@ exports[`expandable vertical with subsection 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="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
                   />
                 </svg>
               </span>
@@ -54,7 +54,7 @@ exports[`expandable vertical with subsection 1`] = `
         </div>
       </div>
       <ul
-        aria-labelledby="unique_id_mock"
+        aria-labelledby="pf-:rg:"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -66,7 +66,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-13"
+              data-ouia-component-id="OUIA-Generated-Button-link-:ri:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -91,7 +91,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-14"
+              data-ouia-component-id="OUIA-Generated-Button-link-:rj:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -120,7 +120,7 @@ exports[`expandable vertical with subsection 1`] = `
               >
                 <a
                   class="pf-v6-c-button pf-m-link"
-                  data-ouia-component-id="OUIA-Generated-Button-link-15"
+                  data-ouia-component-id="OUIA-Generated-Button-link-:rk:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   href="#"
@@ -145,7 +145,7 @@ exports[`expandable vertical with subsection 1`] = `
               >
                 <a
                   class="pf-v6-c-button pf-m-link"
-                  data-ouia-component-id="OUIA-Generated-Button-link-16"
+                  data-ouia-component-id="OUIA-Generated-Button-link-:rl:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   href="#"
@@ -170,7 +170,7 @@ exports[`expandable vertical with subsection 1`] = `
               >
                 <a
                   class="pf-v6-c-button pf-m-link"
-                  data-ouia-component-id="OUIA-Generated-Button-link-17"
+                  data-ouia-component-id="OUIA-Generated-Button-link-:rm:"
                   data-ouia-component-type="PF6/Button"
                   data-ouia-safe="true"
                   href="#"
@@ -197,7 +197,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-18"
+              data-ouia-component-id="OUIA-Generated-Button-link-:rn:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -222,7 +222,7 @@ exports[`expandable vertical with subsection 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-19"
+              data-ouia-component-id="OUIA-Generated-Button-link-:ro:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -268,7 +268,7 @@ exports[`jumplinks centered 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-4"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r5:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -294,7 +294,7 @@ exports[`jumplinks centered 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-5"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r6:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -319,7 +319,7 @@ exports[`jumplinks centered 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-6"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r7:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -345,7 +345,7 @@ exports[`jumplinks centered 1`] = `
 exports[`jumplinks with label 1`] = `
 <DocumentFragment>
   <nav
-    aria-labelledby="unique_id_mock"
+    aria-labelledby="pf-:r8:"
     class="pf-v6-c-jump-links pf-m-center"
   >
     <div
@@ -356,13 +356,13 @@ exports[`jumplinks with label 1`] = `
       >
         <div
           class="pf-v6-c-jump-links__label"
-          id="unique_id_mock"
+          id="pf-:r8:"
         >
           Jump to section
         </div>
       </div>
       <ul
-        aria-labelledby="unique_id_mock"
+        aria-labelledby="pf-:r8:"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -374,7 +374,7 @@ exports[`jumplinks with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-7"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r9:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -400,7 +400,7 @@ exports[`jumplinks with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-8"
+              data-ouia-component-id="OUIA-Generated-Button-link-:ra:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -425,7 +425,7 @@ exports[`jumplinks with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-9"
+              data-ouia-component-id="OUIA-Generated-Button-link-:rb:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -471,7 +471,7 @@ exports[`simple jumplinks 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-1"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r1:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -497,7 +497,7 @@ exports[`simple jumplinks 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-2"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r2:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -522,7 +522,7 @@ exports[`simple jumplinks 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-3"
+              data-ouia-component-id="OUIA-Generated-Button-link-:r3:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -548,7 +548,7 @@ exports[`simple jumplinks 1`] = `
 exports[`vertical with label 1`] = `
 <DocumentFragment>
   <nav
-    aria-labelledby="unique_id_mock"
+    aria-labelledby="pf-:rc:"
     class="pf-v6-c-jump-links pf-m-vertical"
   >
     <div
@@ -559,13 +559,13 @@ exports[`vertical with label 1`] = `
       >
         <div
           class="pf-v6-c-jump-links__label"
-          id="unique_id_mock"
+          id="pf-:rc:"
         >
           Jump to section
         </div>
       </div>
       <ul
-        aria-labelledby="unique_id_mock"
+        aria-labelledby="pf-:rc:"
         class="pf-v6-c-jump-links__list"
         role="list"
       >
@@ -577,7 +577,7 @@ exports[`vertical with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-10"
+              data-ouia-component-id="OUIA-Generated-Button-link-:rd:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -603,7 +603,7 @@ exports[`vertical with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-11"
+              data-ouia-component-id="OUIA-Generated-Button-link-:re:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"
@@ -628,7 +628,7 @@ exports[`vertical with label 1`] = `
           >
             <a
               class="pf-v6-c-button pf-m-link"
-              data-ouia-component-id="OUIA-Generated-Button-link-12"
+              data-ouia-component-id="OUIA-Generated-Button-link-:rf:"
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               href="#"

package/src/components/Label/Label.tsx

@@ -6,12 +6,34 @@ import { Tooltip, TooltipPosition } from '../Tooltip';
 import { css } from '@patternfly/react-styles';
 import { useIsomorphicLayoutEffect } from '../../helpers';
 import cssTextMaxWidth from '@patternfly/react-tokens/dist/esm/c_label__text_MaxWidth';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-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 RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-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';
+
+/** Semantic status for labels (default icon and status styling). */
+export enum LabelStatus {
+  success = 'success',
+  warning = 'warning',
+  danger = 'danger',
+  info = 'info',
+  custom = 'custom'
+}
+
+/** Label palette color when not using the `status` prop. */
+export enum LabelColor {
+  blue = 'blue',
+  teal = 'teal',
+  green = 'green',
+  orange = 'orange',
+  purple = 'purple',
+  red = 'red',
+  orangered = 'orangered',
+  grey = 'grey',
+  yellow = 'yellow'
+}
 
 export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** Content rendered inside the label. */
@@ -19,7 +41,7 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** Additional classes added to the label. */
   className?: string;
   /** Color of the label. */
-  color?: 'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow';
+  color?: 'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow' | LabelColor;
   /** Variant of the label. */
   variant?: 'outline' | 'filled' | 'overflow' | 'add';
   /** Status of the label with a respective icon and color. Overrides the color set by the color property. */
@@ -82,30 +104,30 @@ export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   }) => React.ReactNode;
 }
 
-const colorStyles = {
-  blue: styles.modifiers.blue,
-  teal: styles.modifiers.teal,
-  green: styles.modifiers.green,
-  orange: styles.modifiers.orange,
-  purple: styles.modifiers.purple,
-  red: styles.modifiers.red,
-  orangered: styles.modifiers.orangered,
-  yellow: styles.modifiers.yellow,
-  grey: ''
+const colorStyles: Record<LabelColor, string> = {
+  [LabelColor.blue]: styles.modifiers.blue,
+  [LabelColor.teal]: styles.modifiers.teal,
+  [LabelColor.green]: styles.modifiers.green,
+  [LabelColor.orange]: styles.modifiers.orange,
+  [LabelColor.purple]: styles.modifiers.purple,
+  [LabelColor.red]: styles.modifiers.red,
+  [LabelColor.orangered]: styles.modifiers.orangered,
+  [LabelColor.yellow]: styles.modifiers.yellow,
+  [LabelColor.grey]: ''
 };
 
-const statusIcons = {
-  success: <CheckCircleIcon />,
-  warning: <ExclamationTriangleIcon />,
-  danger: <ExclamationCircleIcon />,
-  info: <InfoCircleIcon />,
-  custom: <BellIcon />
+const statusIcons: Record<LabelStatus, React.ReactNode> = {
+  [LabelStatus.success]: <RhUiCheckCircleFillIcon />,
+  [LabelStatus.warning]: <RhUiWarningFillIcon />,
+  [LabelStatus.danger]: <RhUiErrorFillIcon />,
+  [LabelStatus.info]: <RhUiInformationFillIcon />,
+  [LabelStatus.custom]: <RhUiNotificationFillIcon />
 };
 
 export const Label: React.FunctionComponent<LabelProps> = ({
   children,
   className = '',
-  color = 'grey',
+  color = LabelColor.grey,
   variant = 'filled',
   status,
   isCompact = false,
@@ -240,7 +262,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
       aria-label={closeBtnAriaLabel || `Close ${children}`}
       {...(isClickableDisabled && { isDisabled: true })}
       {...closeBtnProps}
-      icon={<TimesIcon />}
+      icon={<RhMicronsCloseIcon />}
     />
   );
 
@@ -338,7 +360,7 @@ export const Label: React.FunctionComponent<LabelProps> = ({
     );
   }
 
-  const LabelComponent = (isOverflowLabel ? 'button' : 'span') as any;
+  const LabelComponent = (isOverflowLabel || isAddLabel ? 'button' : 'span') as any;
 
   return (
     <LabelComponent

package/src/components/Label/LabelGroup.tsx

@@ -5,7 +5,7 @@ import { css } from '@patternfly/react-styles';
 import { Button } from '../Button';
 import { Label } from './Label';
 import { Tooltip, TooltipPosition } from '../Tooltip';
-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 { fillTemplate } from '../../helpers';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
@@ -210,7 +210,7 @@ class LabelGroup extends Component<LabelGroupProps, LabelGroupState> {
             onClick={onClick}
             id={`remove_group_${id}`}
             aria-labelledby={`remove_group_${id} ${id}`}
-            icon={<TimesIcon />}
+            icon={<RhMicronsCloseIcon />}
           />
         </div>
       );

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

@@ -2,9 +2,9 @@ import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 
-import { Label } from '../Label';
+import { Label, LabelColor } from '../Label';
 
-const labelColors = ['blue', 'teal', 'green', 'orange', 'purple', 'red', 'grey', 'yellow'];
+const labelColors = Object.values(LabelColor);
 
 describe('Label', () => {
   test('renders', () => {
@@ -51,17 +51,17 @@ describe('Label', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  labelColors.forEach((color: string) =>
+  labelColors.forEach((color) =>
     test(`label with ${color} color`, () => {
-      const { asFragment } = render(<Label color={color as any}>Something</Label>);
+      const { asFragment } = render(<Label color={color}>Something</Label>);
       expect(asFragment()).toMatchSnapshot();
     })
   );
 
-  labelColors.forEach((color: string) =>
+  labelColors.forEach((color) =>
     test(`label with ${color} color with outline variant`, () => {
       const { asFragment } = render(
-        <Label color={color as any} variant="outline">
+        <Label color={color} variant="outline">
           Something
         </Label>
       );