@patternfly/react-core 6.0.0-alpha.37 → 6.0.0-alpha.39

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Label } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 
 export const LabelFilled: React.FunctionComponent = () => {
   const logColor = (color: string) => {
@@ -9,10 +9,13 @@ export const LabelFilled: React.FunctionComponent = () => {
   };
   return (
     <React.Fragment>
+      <strong>Non-status:</strong>
+      <br />
+      <br />
       <Label>Grey</Label>
-      <Label icon={<InfoCircleIcon />}>Grey icon</Label>
+      <Label icon={<CubeIcon />}>Grey icon</Label>
       <Label onClose={() => Function.prototype}>Grey removable</Label>
-      <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      <Label icon={<CubeIcon />} onClose={() => Function.prototype}>
         Grey icon removable
       </Label>
       <Label href="#filled">Grey link</Label>
@@ -23,19 +26,19 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label onClick={() => logColor('grey')} onClose={() => Function.prototype}>
         Grey clickable removable
       </Label>
-      <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Grey label with icon that overflows
       </Label>
       <br />
       <br />
       <Label color="blue">Blue</Label>
-      <Label color="blue" icon={<InfoCircleIcon />}>
+      <Label color="blue" icon={<CubeIcon />}>
         Blue icon
       </Label>
       <Label color="blue" onClose={() => Function.prototype}>
         Blue removable
       </Label>
-      <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      <Label color="blue" icon={<CubeIcon />} onClose={() => Function.prototype}>
         Blue icon removable
       </Label>
       <Label color="blue" href="#filled">
@@ -50,19 +53,19 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
         Blue clickable removable
       </Label>
-      <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color="blue" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Blue label with icon that overflows
       </Label>
       <br />
       <br />
       <Label color="green">Green</Label>
-      <Label color="green" icon={<InfoCircleIcon />}>
+      <Label color="green" icon={<CubeIcon />}>
         Green icon
       </Label>
       <Label color="green" onClose={() => Function.prototype}>
         Green removable
       </Label>
-      <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      <Label color="green" icon={<CubeIcon />} onClose={() => Function.prototype}>
         Green icon removable
       </Label>
       <Label color="green" href="#filled">
@@ -77,19 +80,19 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
         Green clickable removable
       </Label>
-      <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color="green" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Green label with icon that overflows
       </Label>
       <br />
       <br />
       <Label color="orange">Orange</Label>
-      <Label color="orange" icon={<InfoCircleIcon />}>
+      <Label color="orange" icon={<CubeIcon />}>
         Orange icon
       </Label>
       <Label color="orange" onClose={() => Function.prototype}>
         Orange removable
       </Label>
-      <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      <Label color="orange" icon={<CubeIcon />} onClose={() => Function.prototype}>
         Orange icon removable
       </Label>
       <Label color="orange" href="#filled">
@@ -104,19 +107,19 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
         Orange clickable removable
       </Label>
-      <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color="orange" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Orange label with icon that overflows
       </Label>
       <br />
       <br />
       <Label color="red">Red</Label>
-      <Label color="red" icon={<InfoCircleIcon />}>
+      <Label color="red" icon={<CubeIcon />}>
         Red icon
       </Label>
       <Label color="red" onClose={() => Function.prototype}>
         Red removable
       </Label>
-      <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      <Label color="red" icon={<CubeIcon />} onClose={() => Function.prototype}>
         Red icon removable
       </Label>
       <Label color="red" href="#filled">
@@ -131,19 +134,19 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
         Red clickable removable
       </Label>
-      <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color="red" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Red label with icon that overflows
       </Label>
       <br />
       <br />
       <Label color="orangered">Orange red</Label>
-      <Label color="orangered" icon={<InfoCircleIcon />}>
+      <Label color="orangered" icon={<CubeIcon />}>
         Orange red icon
       </Label>
       <Label color="orangered" onClose={() => Function.prototype}>
         Orange red removable
       </Label>
-      <Label color="orangered" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      <Label color="orangered" icon={<CubeIcon />} onClose={() => Function.prototype}>
         Orange red icon removable
       </Label>
       <Label color="orangered" href="#filled">
@@ -158,19 +161,19 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label color="orangered" onClick={() => logColor('orangered')} onClose={() => Function.prototype}>
         Orange red clickable removable
       </Label>
-      <Label color="orangered" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color="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={<InfoCircleIcon />}>
+      <Label color="purple" icon={<CubeIcon />}>
         Purple icon
       </Label>
       <Label color="purple" onClose={() => Function.prototype}>
         Purple removable
       </Label>
-      <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      <Label color="purple" icon={<CubeIcon />} onClose={() => Function.prototype}>
         Purple icon removable
       </Label>
       <Label color="purple" href="#filled">
@@ -185,19 +188,19 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
         Purple clickable removable
       </Label>
-      <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color="purple" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Purple label with icon that overflows
       </Label>
       <br />
       <br />
       <Label color="cyan">Cyan</Label>
-      <Label color="cyan" icon={<InfoCircleIcon />}>
+      <Label color="cyan" icon={<CubeIcon />}>
         Cyan icon
       </Label>
       <Label color="cyan" onClose={() => Function.prototype}>
         Cyan removable
       </Label>
-      <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      <Label color="cyan" icon={<CubeIcon />} onClose={() => Function.prototype}>
         Cyan icon removable
       </Label>
       <Label color="cyan" href="#filled">
@@ -212,19 +215,19 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
         Cyan clickable removable
       </Label>
-      <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color="cyan" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Cyan label with icon that overflows
       </Label>
       <br />
       <br />
       <Label color="gold">Gold</Label>
-      <Label color="gold" icon={<InfoCircleIcon />}>
+      <Label color="gold" icon={<CubeIcon />}>
         Gold icon
       </Label>
       <Label color="gold" onClose={() => Function.prototype}>
         Gold removable
       </Label>
-      <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype}>
+      <Label color="gold" icon={<CubeIcon />} onClose={() => Function.prototype}>
         Gold icon removable
       </Label>
       <Label color="gold" href="#filled">
@@ -239,7 +242,7 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
         Gold clickable removable
       </Label>
-      <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
+      <Label color="gold" icon={<CubeIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Gold label with icon that overflows
       </Label>
       <br />
@@ -247,6 +250,113 @@ export const LabelFilled: React.FunctionComponent = () => {
       <div style={{ width: '250px' }}>
         <Label>Label that overflows its parent, but has no textMaxWidth on its own</Label>
       </div>
+      <br />
+      <strong>Status:</strong>
+      <br />
+      <br />
+      <Label status="success">Success</Label>
+      <Label status="success" onClose={() => Function.prototype}>
+        Success removable
+      </Label>
+      <Label status="success" href="#filled">
+        Success link
+      </Label>
+      <Label status="success" href="#filled" onClose={() => Function.prototype}>
+        Success link removable
+      </Label>
+      <Label status="success" onClick={() => logColor('success')}>
+        Success clickable
+      </Label>
+      <Label status="success" onClick={() => logColor('success')} onClose={() => Function.prototype}>
+        Success clickable removable
+      </Label>
+      <Label status="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}>
+        Warning removable
+      </Label>
+      <Label status="warning" href="#filled">
+        Warning link
+      </Label>
+      <Label status="warning" href="#filled" onClose={() => Function.prototype}>
+        Warning link removable
+      </Label>
+      <Label status="warning" onClick={() => logColor('warning')}>
+        Warning clickable
+      </Label>
+      <Label status="warning" onClick={() => logColor('warning')} onClose={() => Function.prototype}>
+        Warning clickable removable
+      </Label>
+      <Label status="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}>
+        Danger removable
+      </Label>
+      <Label status="danger" href="#filled">
+        Danger link
+      </Label>
+      <Label status="danger" href="#filled" onClose={() => Function.prototype}>
+        Danger link removable
+      </Label>
+      <Label status="danger" onClick={() => logColor('danger')}>
+        Danger clickable
+      </Label>
+      <Label status="danger" onClick={() => logColor('danger')} onClose={() => Function.prototype}>
+        Danger clickable removable
+      </Label>
+      <Label status="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}>
+        Info removable
+      </Label>
+      <Label status="info" href="#filled">
+        Info link
+      </Label>
+      <Label status="info" href="#filled" onClose={() => Function.prototype}>
+        Info link removable
+      </Label>
+      <Label status="info" onClick={() => logColor('info')}>
+        Info clickable
+      </Label>
+      <Label status="info" onClick={() => logColor('info')} onClose={() => Function.prototype}>
+        Info clickable removable
+      </Label>
+      <Label status="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}>
+        Custom removable
+      </Label>
+      <Label status="custom" href="#filled">
+        Custom link
+      </Label>
+      <Label status="custom" href="#filled" onClose={() => Function.prototype}>
+        Custom link removable
+      </Label>
+      <Label status="custom" onClick={() => logColor('custom')}>
+        Custom clickable
+      </Label>
+      <Label status="custom" onClick={() => logColor('custom')} onClose={() => Function.prototype}>
+        Custom clickable removable
+      </Label>
+      <Label status="custom" onClose={() => Function.prototype} textMaxWidth="16ch">
+        Custom label with text that overflows
+      </Label>
     </React.Fragment>
   );
 };