@patternfly/react-core 6.5.0-prerelease.65 → 6.5.0-prerelease.66

package/src/components/Label/examples/LabelFilled.tsx

@@ -1,5 +1,5 @@
 import { Fragment } from 'react';
-import { Label } from '@patternfly/react-core';
+import { Label, LabelColor, LabelStatus } from '@patternfly/react-core';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const LabelFilled: React.FunctionComponent = () => {
@@ -37,36 +37,36 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="blue">Blue</Label>
-      <Label color="blue" icon={<CubeIcon />}>
+      <Label color={LabelColor.blue}>Blue</Label>
+      <Label color={LabelColor.blue} icon={<CubeIcon />}>
         Blue icon
       </Label>
-      <Label color="blue" onClose={() => Function.prototype}>
+      <Label color={LabelColor.blue} onClose={() => Function.prototype}>
         Blue removable
       </Label>
-      <Label color="blue" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.blue} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Blue icon removable
       </Label>
-      <Label color="blue" href="#filled">
+      <Label color={LabelColor.blue} href="#filled">
         Blue link
       </Label>
-      <Label color="blue" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.blue} href="#filled" onClose={() => Function.prototype}>
         Blue link removable
       </Label>{' '}
-      <Label color="blue" onClick={() => logColor('blue')}>
+      <Label color={LabelColor.blue} onClick={() => logColor('blue')}>
         Blue clickable
       </Label>
-      <Label color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.blue} onClick={() => logColor('blue')} onClose={() => Function.prototype}>
         Blue clickable removable
       </Label>{' '}
-      <Label color="blue" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.blue} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Blue label with icon that overflows
       </Label>{' '}
-      <Label color="blue" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.blue} isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
         Blue link removable (disabled)
       </Label>{' '}
       <Label
-        color="blue"
+        color={LabelColor.blue}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('blue')}
@@ -76,36 +76,36 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="green">Green</Label>
-      <Label color="green" icon={<CubeIcon />}>
+      <Label color={LabelColor.green}>Green</Label>
+      <Label color={LabelColor.green} icon={<CubeIcon />}>
         Green icon
       </Label>
-      <Label color="green" onClose={() => Function.prototype}>
+      <Label color={LabelColor.green} onClose={() => Function.prototype}>
         Green removable
       </Label>
-      <Label color="green" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.green} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Green icon removable
       </Label>
-      <Label color="green" href="#filled">
+      <Label color={LabelColor.green} href="#filled">
         Green link
       </Label>
-      <Label color="green" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.green} href="#filled" onClose={() => Function.prototype}>
         Green link removable
       </Label>{' '}
-      <Label color="green" onClick={() => logColor('green')}>
+      <Label color={LabelColor.green} onClick={() => logColor('green')}>
         Green clickable
       </Label>
-      <Label color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.green} onClick={() => logColor('green')} onClose={() => Function.prototype}>
         Green clickable removable
       </Label>{' '}
-      <Label color="green" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.green} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Green label with icon that overflows
       </Label>{' '}
-      <Label color="green" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.green} isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
         Green link removable (disabled)
       </Label>{' '}
       <Label
-        color="green"
+        color={LabelColor.green}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('green')}
@@ -115,36 +115,36 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="orange">Orange</Label>
-      <Label color="orange" icon={<CubeIcon />}>
+      <Label color={LabelColor.orange}>Orange</Label>
+      <Label color={LabelColor.orange} icon={<CubeIcon />}>
         Orange icon
       </Label>
-      <Label color="orange" onClose={() => Function.prototype}>
+      <Label color={LabelColor.orange} onClose={() => Function.prototype}>
         Orange removable
       </Label>
-      <Label color="orange" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.orange} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Orange icon removable
       </Label>
-      <Label color="orange" href="#filled">
+      <Label color={LabelColor.orange} href="#filled">
         Orange link
       </Label>
-      <Label color="orange" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.orange} href="#filled" onClose={() => Function.prototype}>
         Orange link removable
       </Label>{' '}
-      <Label color="orange" onClick={() => logColor('orange')}>
+      <Label color={LabelColor.orange} onClick={() => logColor('orange')}>
         Orange clickable
       </Label>
-      <Label color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.orange} onClick={() => logColor('orange')} onClose={() => Function.prototype}>
         Orange clickable removable
       </Label>{' '}
-      <Label color="orange" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.orange} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Orange label with icon that overflows
       </Label>{' '}
-      <Label color="orange" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.orange} isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
         Orange link removable (disabled)
       </Label>{' '}
       <Label
-        color="orange"
+        color={LabelColor.orange}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('orange')}
@@ -154,36 +154,36 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="red">Red</Label>
-      <Label color="red" icon={<CubeIcon />}>
+      <Label color={LabelColor.red}>Red</Label>
+      <Label color={LabelColor.red} icon={<CubeIcon />}>
         Red icon
       </Label>
-      <Label color="red" onClose={() => Function.prototype}>
+      <Label color={LabelColor.red} onClose={() => Function.prototype}>
         Red removable
       </Label>
-      <Label color="red" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.red} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Red icon removable
       </Label>
-      <Label color="red" href="#filled">
+      <Label color={LabelColor.red} href="#filled">
         Red link
       </Label>
-      <Label color="red" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.red} href="#filled" onClose={() => Function.prototype}>
         Red link removable
       </Label>{' '}
-      <Label color="red" onClick={() => logColor('red')}>
+      <Label color={LabelColor.red} onClick={() => logColor('red')}>
         Red clickable
       </Label>
-      <Label color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.red} onClick={() => logColor('red')} onClose={() => Function.prototype}>
         Red clickable removable
       </Label>{' '}
-      <Label color="red" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.red} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Red label with icon that overflows
       </Label>{' '}
-      <Label color="red" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.red} isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
         Red link removable (disabled)
       </Label>{' '}
       <Label
-        color="red"
+        color={LabelColor.red}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('red')}
@@ -193,63 +193,63 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="orangered">Orange red</Label>
-      <Label color="orangered" icon={<CubeIcon />}>
+      <Label color={LabelColor.orangered}>Orange red</Label>
+      <Label color={LabelColor.orangered} icon={<CubeIcon />}>
         Orange red icon
       </Label>
-      <Label color="orangered" onClose={() => Function.prototype}>
+      <Label color={LabelColor.orangered} onClose={() => Function.prototype}>
         Orange red removable
       </Label>
-      <Label color="orangered" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.orangered} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Orange red icon removable
       </Label>
-      <Label color="orangered" href="#filled">
+      <Label color={LabelColor.orangered} href="#filled">
         Orange red link
       </Label>
-      <Label color="orangered" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.orangered} href="#filled" onClose={() => Function.prototype}>
         Orange red link removable
       </Label>
-      <Label color="orangered" onClick={() => logColor('orangered')}>
+      <Label color={LabelColor.orangered} onClick={() => logColor('orangered')}>
         Orange red clickable
       </Label>
-      <Label color="orangered" onClick={() => logColor('orangered')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.orangered} onClick={() => logColor('orangered')} onClose={() => Function.prototype}>
         Orange red clickable removable
       </Label>
-      <Label color="orangered" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.orangered} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Orange red label with icon that overflows
       </Label>
       <br />
       <br />
-      <Label color="purple">Purple</Label>
-      <Label color="purple" icon={<CubeIcon />}>
+      <Label color={LabelColor.purple}>Purple</Label>
+      <Label color={LabelColor.purple} icon={<CubeIcon />}>
         Purple icon
       </Label>
-      <Label color="purple" onClose={() => Function.prototype}>
+      <Label color={LabelColor.purple} onClose={() => Function.prototype}>
         Purple removable
       </Label>
-      <Label color="purple" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.purple} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Purple icon removable
       </Label>
-      <Label color="purple" href="#filled">
+      <Label color={LabelColor.purple} href="#filled">
         Purple link
       </Label>
-      <Label color="purple" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.purple} href="#filled" onClose={() => Function.prototype}>
         Purple link removable
       </Label>{' '}
-      <Label color="purple" onClick={() => logColor('purple')}>
+      <Label color={LabelColor.purple} onClick={() => logColor('purple')}>
         Purple clickable
       </Label>
-      <Label color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.purple} onClick={() => logColor('purple')} onClose={() => Function.prototype}>
         Purple clickable removable
       </Label>{' '}
-      <Label color="purple" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.purple} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Purple label with icon that overflows
       </Label>{' '}
-      <Label color="purple" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.purple} isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
         Purple link removable (disabled)
       </Label>{' '}
       <Label
-        color="purple"
+        color={LabelColor.purple}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('purple')}
@@ -259,36 +259,36 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="teal">Teal</Label>
-      <Label color="teal" icon={<CubeIcon />}>
+      <Label color={LabelColor.teal}>Teal</Label>
+      <Label color={LabelColor.teal} icon={<CubeIcon />}>
         Teal icon
       </Label>
-      <Label color="teal" onClose={() => Function.prototype}>
+      <Label color={LabelColor.teal} onClose={() => Function.prototype}>
         Teal removable
       </Label>
-      <Label color="teal" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.teal} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Teal icon removable
       </Label>
-      <Label color="teal" href="#filled">
+      <Label color={LabelColor.teal} href="#filled">
         Teal link
       </Label>
-      <Label color="teal" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.teal} href="#filled" onClose={() => Function.prototype}>
         Teal link removable
       </Label>{' '}
-      <Label color="teal" onClick={() => logColor('teal')}>
+      <Label color={LabelColor.teal} onClick={() => logColor('teal')}>
         Teal clickable
       </Label>
-      <Label color="teal" onClick={() => logColor('teal')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.teal} onClick={() => logColor('teal')} onClose={() => Function.prototype}>
         Teal clickable removable
       </Label>{' '}
-      <Label color="teal" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.teal} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Teal label with icon that overflows
       </Label>{' '}
-      <Label color="teal" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.teal} isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
         Teal link removable (disabled)
       </Label>{' '}
       <Label
-        color="teal"
+        color={LabelColor.teal}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('teal')}
@@ -298,36 +298,36 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>
       <br />
       <br />
-      <Label color="yellow">Yellow</Label>
-      <Label color="yellow" icon={<CubeIcon />}>
+      <Label color={LabelColor.yellow}>Yellow</Label>
+      <Label color={LabelColor.yellow} icon={<CubeIcon />}>
         Yellow icon
       </Label>
-      <Label color="yellow" onClose={() => Function.prototype}>
+      <Label color={LabelColor.yellow} onClose={() => Function.prototype}>
         Yellow removable
       </Label>
-      <Label color="yellow" icon={<CubeIcon />} onClose={() => Function.prototype}>
+      <Label color={LabelColor.yellow} icon={<CubeIcon />} onClose={() => Function.prototype}>
         Yellow icon removable
       </Label>
-      <Label color="yellow" href="#filled">
+      <Label color={LabelColor.yellow} href="#filled">
         Yellow link
       </Label>
-      <Label color="yellow" href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.yellow} href="#filled" onClose={() => Function.prototype}>
         Yellow link removable
       </Label>{' '}
-      <Label color="yellow" onClick={() => logColor('yellow')}>
+      <Label color={LabelColor.yellow} onClick={() => logColor('yellow')}>
         Yellow clickable
       </Label>
-      <Label color="yellow" onClick={() => logColor('yellow')} onClose={() => Function.prototype}>
+      <Label color={LabelColor.yellow} onClick={() => logColor('yellow')} onClose={() => Function.prototype}>
         Yellow clickable removable
       </Label>{' '}
-      <Label color="yellow" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color={LabelColor.yellow} icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Yellow label with icon that overflows
       </Label>{' '}
-      <Label color="yellow" isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
+      <Label color={LabelColor.yellow} isDisabled icon={<CubeIcon />} href="#filled" onClose={() => Function.prototype}>
         Yellow link removable (disabled)
       </Label>{' '}
       <Label
-        color="yellow"
+        color={LabelColor.yellow}
         isDisabled
         icon={<CubeIcon />}
         onClick={() => logColor('yellow')}
@@ -344,107 +344,107 @@ export const LabelFilled: React.FunctionComponent = () => {
       <strong>Status:</strong>
       <br />
       <br />
-      <Label status="success">Success</Label>
-      <Label status="success" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.success}>Success</Label>
+      <Label status={LabelStatus.success} onClose={() => Function.prototype}>
         Success removable
       </Label>
-      <Label status="success" href="#filled">
+      <Label status={LabelStatus.success} href="#filled">
         Success link
       </Label>
-      <Label status="success" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.success} href="#filled" onClose={() => Function.prototype}>
         Success link removable
       </Label>
-      <Label status="success" onClick={() => logColor('success')}>
+      <Label status={LabelStatus.success} onClick={() => logColor('success')}>
         Success clickable
       </Label>
-      <Label status="success" onClick={() => logColor('success')} onClose={() => Function.prototype}>
+      <Label status={LabelStatus.success} onClick={() => logColor('success')} onClose={() => Function.prototype}>
         Success clickable removable
       </Label>
-      <Label status="success" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.success} onClose={() => Function.prototype} textMaxWidth="16ch">
         Success label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="warning">Warning</Label>
-      <Label status="warning" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.warning}>Warning</Label>
+      <Label status={LabelStatus.warning} onClose={() => Function.prototype}>
         Warning removable
       </Label>
-      <Label status="warning" href="#filled">
+      <Label status={LabelStatus.warning} href="#filled">
         Warning link
       </Label>
-      <Label status="warning" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.warning} href="#filled" onClose={() => Function.prototype}>
         Warning link removable
       </Label>
-      <Label status="warning" onClick={() => logColor('warning')}>
+      <Label status={LabelStatus.warning} onClick={() => logColor('warning')}>
         Warning clickable
       </Label>
-      <Label status="warning" onClick={() => logColor('warning')} onClose={() => Function.prototype}>
+      <Label status={LabelStatus.warning} onClick={() => logColor('warning')} onClose={() => Function.prototype}>
         Warning clickable removable
       </Label>
-      <Label status="warning" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.warning} onClose={() => Function.prototype} textMaxWidth="16ch">
         Warning label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="danger">Danger</Label>
-      <Label status="danger" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.danger}>Danger</Label>
+      <Label status={LabelStatus.danger} onClose={() => Function.prototype}>
         Danger removable
       </Label>
-      <Label status="danger" href="#filled">
+      <Label status={LabelStatus.danger} href="#filled">
         Danger link
       </Label>
-      <Label status="danger" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.danger} href="#filled" onClose={() => Function.prototype}>
         Danger link removable
       </Label>
-      <Label status="danger" onClick={() => logColor('danger')}>
+      <Label status={LabelStatus.danger} onClick={() => logColor('danger')}>
         Danger clickable
       </Label>
-      <Label status="danger" onClick={() => logColor('danger')} onClose={() => Function.prototype}>
+      <Label status={LabelStatus.danger} onClick={() => logColor('danger')} onClose={() => Function.prototype}>
         Danger clickable removable
       </Label>
-      <Label status="danger" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.danger} onClose={() => Function.prototype} textMaxWidth="16ch">
         Danger label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="info">Info</Label>
-      <Label status="info" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.info}>Info</Label>
+      <Label status={LabelStatus.info} onClose={() => Function.prototype}>
         Info removable
       </Label>
-      <Label status="info" href="#filled">
+      <Label status={LabelStatus.info} href="#filled">
         Info link
       </Label>
-      <Label status="info" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.info} href="#filled" onClose={() => Function.prototype}>
         Info link removable
       </Label>
-      <Label status="info" onClick={() => logColor('info')}>
+      <Label status={LabelStatus.info} onClick={() => logColor('info')}>
         Info clickable
       </Label>
-      <Label status="info" onClick={() => logColor('info')} onClose={() => Function.prototype}>
+      <Label status={LabelStatus.info} onClick={() => logColor('info')} onClose={() => Function.prototype}>
         Info clickable removable
       </Label>
-      <Label status="info" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.info} onClose={() => Function.prototype} textMaxWidth="16ch">
         Info label with text that overflows
       </Label>
       <br />
       <br />
-      <Label status="custom">Custom</Label>
-      <Label status="custom" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.custom}>Custom</Label>
+      <Label status={LabelStatus.custom} onClose={() => Function.prototype}>
         Custom removable
       </Label>
-      <Label status="custom" href="#filled">
+      <Label status={LabelStatus.custom} href="#filled">
         Custom link
       </Label>
-      <Label status="custom" href="#filled" onClose={() => Function.prototype}>
+      <Label status={LabelStatus.custom} href="#filled" onClose={() => Function.prototype}>
         Custom link removable
       </Label>
-      <Label status="custom" onClick={() => logColor('custom')}>
+      <Label status={LabelStatus.custom} onClick={() => logColor('custom')}>
         Custom clickable
       </Label>
-      <Label status="custom" onClick={() => logColor('custom')} onClose={() => Function.prototype}>
+      <Label status={LabelStatus.custom} onClick={() => logColor('custom')} onClose={() => Function.prototype}>
         Custom clickable removable
       </Label>
-      <Label status="custom" onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label status={LabelStatus.custom} onClose={() => Function.prototype} textMaxWidth="16ch">
         Custom label with text that overflows
       </Label>
     </Fragment>

package/src/components/Label/examples/LabelGroupBasic.tsx

@@ -1,13 +1,13 @@
-import { Label, LabelGroup } from '@patternfly/react-core';
+import { Label, LabelColor, LabelGroup } from '@patternfly/react-core';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelGroupBasic: React.FunctionComponent = () => (
   <LabelGroup>
     <Label icon={<RhUiInformationFillIcon />}>Label 1</Label>
-    <Label icon={<RhUiInformationFillIcon />} color="blue">
+    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.blue}>
       Label 2
     </Label>
-    <Label icon={<RhUiInformationFillIcon />} color="green">
+    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.green}>
       Label 3
     </Label>
   </LabelGroup>

package/src/components/Label/examples/LabelGroupCategory.tsx

@@ -1,13 +1,13 @@
-import { Label, LabelGroup } from '@patternfly/react-core';
+import { Label, LabelColor, LabelGroup } from '@patternfly/react-core';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelGroupCategory: React.FunctionComponent = () => (
   <LabelGroup categoryName="Group label">
     <Label icon={<RhUiInformationFillIcon />}>Label 1</Label>
-    <Label icon={<RhUiInformationFillIcon />} color="blue">
+    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.blue}>
       Label 2
     </Label>
-    <Label icon={<RhUiInformationFillIcon />} color="green">
+    <Label icon={<RhUiInformationFillIcon />} color={LabelColor.green}>
       Label 3
     </Label>
   </LabelGroup>

package/src/components/Label/examples/LabelGroupCategoryRemovable.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { Label, LabelGroup, LabelProps } from '@patternfly/react-core';
+import { Label, LabelColor, LabelGroup } from '@patternfly/react-core';
 import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 
 export const LabelGroupCategoryRemovable: React.FunctionComponent = () => {
@@ -15,7 +15,7 @@ export const LabelGroupCategoryRemovable: React.FunctionComponent = () => {
   return (
     <LabelGroup categoryName="Group label" isClosable onClick={deleteCategory}>
       {labels.map(([labelText, labelColor]) => (
-        <Label icon={<RhUiInformationFillIcon />} color={labelColor as LabelProps['color']} key={labelText}>
+        <Label icon={<RhUiInformationFillIcon />} color={labelColor as LabelColor} key={labelText}>
           {labelText}
         </Label>
       ))}

package/src/components/Label/examples/LabelGroupEditableAdd.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { LabelGroup, Label } from '@patternfly/react-core';
+import { LabelGroup, Label, LabelColor } from '@patternfly/react-core';
 
 export const LabelGroupEditableAdd: React.FunctionComponent = () => {
   const [idIndex, setIdIndex] = useState<number>(3);
@@ -65,7 +65,7 @@ export const LabelGroupEditableAdd: React.FunctionComponent = () => {
         <Label
           key={label.id}
           id={label.id}
-          color="blue"
+          color={LabelColor.blue}
           onClose={() => onClose(label.id)}
           onEditCancel={(_event, prevText) => onEdit(prevText, index)}
           onEditComplete={(_event, newText) => onEdit(newText, index)}

package/src/components/Label/examples/LabelGroupEditableAddDropdown.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from 'react';
-import { LabelGroup, Label, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
+import { LabelGroup, Label, LabelColor, Menu, MenuContent, MenuList, MenuItem, Popper } from '@patternfly/react-core';
 
 export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
   const toggleRef = useRef<HTMLDivElement>(undefined);
@@ -122,7 +122,7 @@ export const LabelGroupEditableAddDropdown: React.FunctionComponent = () => {
           <Label
             key={label.id}
             id={label.id}
-            color="blue"
+            color={LabelColor.blue}
             onClose={() => onClose(label.id)}
             onEditCancel={(_event, prevText) => onEdit(prevText, index)}
             onEditComplete={(_event, newText) => onEdit(newText, index)}

package/src/components/Label/examples/LabelGroupEditableAddModal.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from 'react';
 import {
   LabelGroup,
   Label,
+  LabelColor,
   Button,
   Form,
   FormGroup,
@@ -244,7 +245,7 @@ export const LabelGroupEditableAddModal: React.FunctionComponent = () => {
           <Label
             key={label.id}
             id={label.id}
-            color="blue"
+            color={LabelColor.blue}
             onClose={() => onClose(label.id)}
             onEditCancel={(_event, prevText) => onEdit(prevText, index)}
             onEditComplete={(_event, newText) => onEdit(newText, index)}