chore(Label): Added enums for LabelColor and LabelStatus (#12338)

* chore(Label): Added enums for LabelColor and LabelStatus

* fix type

* update more uses of ststus color

* update snapshots

* update imports

Author: tlabaj

packages/react-core/src/components/Label/Label.tsx

@@ -13,13 +13,35 @@ import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-erro
 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. */
   children?: React.ReactNode;
   /** 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: <RhUiCheckCircleFillIcon />,
-  warning: <RhUiWarningFillIcon />,
-  danger: <RhUiErrorFillIcon />,
-  info: <RhUiInformationFillIcon />,
-  custom: <RhUiNotificationFillIcon />
+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,

packages/react-core/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>
       );

packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap

@@ -452,6 +452,42 @@ exports[`Label label with red color with outline variant 1`] = `
 </DocumentFragment>
 `;
 
+exports[`Label label with orangered color 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-orangered pf-m-filled"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
+exports[`Label label with orangered color with outline variant 1`] = `
+<DocumentFragment>
+  <span
+    class="pf-v6-c-label pf-m-orangered pf-m-outline"
+  >
+    <span
+      class="pf-v6-c-label__content"
+    >
+      <span
+        class="pf-v6-c-label__text"
+      >
+        Something
+      </span>
+    </span>
+  </span>
+</DocumentFragment>
+`;
+
 exports[`Label label with teal color 1`] = `
 <DocumentFragment>
   <span

packages/react-core/src/components/Label/examples/LabelCompact.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { Label } from '@patternfly/react-core';
+import { Label, LabelColor } from '@patternfly/react-core';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
@@ -42,24 +42,24 @@ export const LabelCompact: React.FunctionComponent = () => (
     >
       Compact clickable removable (disabled)
     </Label>
-    <Label variant="outline" color="blue" isCompact icon={<CubeIcon />}>
+    <Label variant="outline" color={LabelColor.blue} isCompact icon={<CubeIcon />}>
       Compact icon
     </Label>
-    <Label variant="outline" color="blue" isCompact onClose={() => Function.prototype}>
+    <Label variant="outline" color={LabelColor.blue} isCompact onClose={() => Function.prototype}>
       Compact removable
     </Label>
-    <Label variant="outline" color="blue" isCompact icon={<CubeIcon />} onClose={() => Function.prototype}>
+    <Label variant="outline" color={LabelColor.blue} isCompact icon={<CubeIcon />} onClose={() => Function.prototype}>
       Compact icon removable
     </Label>
-    <Label variant="outline" color="blue" isCompact href="#compact">
+    <Label variant="outline" color={LabelColor.blue} isCompact href="#compact">
       Compact link
     </Label>
-    <Label variant="outline" color="blue" isCompact href="#compact" onClose={() => Function.prototype}>
+    <Label variant="outline" color={LabelColor.blue} isCompact href="#compact" onClose={() => Function.prototype}>
       Compact link removable
     </Label>
     <Label
       variant="outline"
-      color="blue"
+      color={LabelColor.blue}
       isCompact
       icon={<CubeIcon />}
       onClose={() => Function.prototype}

packages/react-core/src/components/Label/examples/LabelCustomRender.tsx

@@ -1,9 +1,9 @@
-import { Label } from '@patternfly/react-core';
+import { Label, LabelColor } from '@patternfly/react-core';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelCustomRender: React.FunctionComponent = () => (
   <Label
-    color="blue"
+    color={LabelColor.blue}
     icon={<RhUiInformationFillIcon />}
     onClose={() => Function.prototype}
     render={({ className, content, componentRef }) => (

packages/react-core/src/components/Label/examples/LabelEditable.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useState } from 'react';
-import { Label } from '@patternfly/react-core';
+import { Label, LabelColor } from '@patternfly/react-core';
 
 export const LabelEditable: React.FunctionComponent = () => {
   const [labelText, setLabelText] = useState('Editable label');
@@ -24,7 +24,7 @@ export const LabelEditable: React.FunctionComponent = () => {
   return (
     <Fragment>
       <Label
-        color="blue"
+        color={LabelColor.blue}
         onClose={() => {}}
         closeBtnAriaLabel="Custom close button for editable label"
         onEditCancel={onEditCancel}
@@ -38,7 +38,7 @@ export const LabelEditable: React.FunctionComponent = () => {
         {labelText}
       </Label>
       <Label
-        color="grey"
+        color={LabelColor.grey}
         isCompact
         onClose={() => {}}
         closeBtnAriaLabel="Custom close button for compact editable label"