chore(Label): Added enums for LabelColor and LabelStatus

Author: tlabaj

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

@@ -13,17 +13,39 @@ 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?: LabelColor | 'blue' | 'teal' | 'green' | 'orange' | 'purple' | 'red' | 'orangered' | 'grey' | 'yellow';
   /** 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. */
-  status?: 'success' | 'warning' | 'danger' | 'info' | 'custom';
+  status?: LabelStatus | 'success' | 'warning' | 'danger' | 'info' | 'custom';
   /** Flag indicating the label is compact. */
   isCompact?: boolean;
   /** Flag indicating the label is disabled. Works only on clickable labels, so either href or onClick props must be passed in. */
@@ -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/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"