From ffbd89f0d8386415e8ff479b52e41a5c7af84de9 Mon Sep 17 00:00:00 2001
From: adamviktora <viktora.adam@gmail.com>
Date: Tue, 26 Mar 2024 13:41:43 +0100
Subject: [PATCH] docs(Label): add examples of clickable disabled

---
 .../Label/examples/LabelCompact.tsx           |  20 +-
 .../components/Label/examples/LabelFilled.tsx | 122 ++++++++++--
 .../Label/examples/LabelOutline.tsx           | 184 ++++++++++++++++--
 3 files changed, 293 insertions(+), 33 deletions(-)

diff --git a/packages/react-core/src/components/Label/examples/LabelCompact.tsx b/packages/react-core/src/components/Label/examples/LabelCompact.tsx
index 66658762a26..109ac2c4063 100644
--- a/packages/react-core/src/components/Label/examples/LabelCompact.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelCompact.tsx
@@ -19,9 +19,27 @@ export const LabelCompact: React.FunctionComponent = () => (
     </Label>{' '}
     <Label isCompact href="#compact" onClose={() => Function.prototype}>
       Compact link removable
-    </Label>
+    </Label>{' '}
+    <Label isCompact onClick={() => Function.prototype}>
+      Compact clickable
+    </Label>{' '}
+    <Label isCompact onClick={() => Function.prototype} onClose={() => Function.prototype}>
+      Compact clickable removable
+    </Label>{' '}
     <Label isCompact icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
       Compact label with icon that overflows
+    </Label>{' '}
+    <Label isDisabled isCompact href="#compact" onClose={() => Function.prototype} icon={<InfoCircleIcon />}>
+      Compact link removable (disabled)
+    </Label>{' '}
+    <Label
+      isDisabled
+      isCompact
+      onClick={() => Function.prototype}
+      onClose={() => Function.prototype}
+      icon={<InfoCircleIcon />}
+    >
+      Compact clickable removable (disabled)
     </Label>
   </React.Fragment>
 );
diff --git a/packages/react-core/src/components/Label/examples/LabelFilled.tsx b/packages/react-core/src/components/Label/examples/LabelFilled.tsx
index ac8ad75ec91..9ef9e240037 100644
--- a/packages/react-core/src/components/Label/examples/LabelFilled.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelFilled.tsx
@@ -17,13 +17,19 @@ export const LabelFilled: React.FunctionComponent = () => {
       <Label href="#filled">Grey link</Label>{' '}
       <Label href="#filled" onClose={() => Function.prototype}>
         Grey link removable
-      </Label>
+      </Label>{' '}
       <Label onClick={() => logColor('grey')}>Grey clickable</Label>{' '}
       <Label onClick={() => logColor('grey')} onClose={() => Function.prototype}>
         Grey clickable removable
-      </Label>
+      </Label>{' '}
       <Label icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Grey label with icon that overflows
+      </Label>{' '}
+      <Label isDisabled icon={<InfoCircleIcon />} href="#filled" onClose={() => Function.prototype}>
+        Grey link removable (disabled)
+      </Label>{' '}
+      <Label isDisabled icon={<InfoCircleIcon />} onClick={() => logColor('grey')} onClose={() => Function.prototype}>
+        Grey clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -42,15 +48,27 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>{' '}
       <Label color="blue" href="#filled" onClose={() => Function.prototype}>
         Blue link removable
-      </Label>
+      </Label>{' '}
       <Label color="blue" onClick={() => logColor('blue')}>
         Blue clickable
       </Label>{' '}
       <Label color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
         Blue clickable removable
-      </Label>
+      </Label>{' '}
       <Label color="blue" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Blue label with icon that overflows
+      </Label>{' '}
+      <Label color="blue" isDisabled icon={<InfoCircleIcon />} href="#filled" onClose={() => Function.prototype}>
+        Blue link removable (disabled)
+      </Label>{' '}
+      <Label
+        color="blue"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('blue')}
+        onClose={() => Function.prototype}
+      >
+        Blue clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -69,15 +87,27 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>{' '}
       <Label color="green" href="#filled" onClose={() => Function.prototype}>
         Green link removable
-      </Label>
+      </Label>{' '}
       <Label color="green" onClick={() => logColor('green')}>
         Green clickable
       </Label>{' '}
       <Label color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
         Green clickable removable
-      </Label>
+      </Label>{' '}
       <Label color="green" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Green label with icon that overflows
+      </Label>{' '}
+      <Label color="green" isDisabled icon={<InfoCircleIcon />} href="#filled" onClose={() => Function.prototype}>
+        Green link removable (disabled)
+      </Label>{' '}
+      <Label
+        color="green"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('green')}
+        onClose={() => Function.prototype}
+      >
+        Green clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -96,15 +126,27 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>{' '}
       <Label color="orange" href="#filled" onClose={() => Function.prototype}>
         Orange link removable
-      </Label>
+      </Label>{' '}
       <Label color="orange" onClick={() => logColor('orange')}>
         Orange clickable
       </Label>{' '}
       <Label color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
         Orange clickable removable
-      </Label>
+      </Label>{' '}
       <Label color="orange" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Orange label with icon that overflows
+      </Label>{' '}
+      <Label color="orange" isDisabled icon={<InfoCircleIcon />} href="#filled" onClose={() => Function.prototype}>
+        Orange link removable (disabled)
+      </Label>{' '}
+      <Label
+        color="orange"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('orange')}
+        onClose={() => Function.prototype}
+      >
+        Orange clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -123,15 +165,27 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>{' '}
       <Label color="red" href="#filled" onClose={() => Function.prototype}>
         Red link removable
-      </Label>
+      </Label>{' '}
       <Label color="red" onClick={() => logColor('red')}>
         Red clickable
       </Label>{' '}
       <Label color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
         Red clickable removable
-      </Label>
+      </Label>{' '}
       <Label color="red" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Red label with icon that overflows
+      </Label>{' '}
+      <Label color="red" isDisabled icon={<InfoCircleIcon />} href="#filled" onClose={() => Function.prototype}>
+        Red link removable (disabled)
+      </Label>{' '}
+      <Label
+        color="red"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('red')}
+        onClose={() => Function.prototype}
+      >
+        Red clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -150,15 +204,27 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>{' '}
       <Label color="purple" href="#filled" onClose={() => Function.prototype}>
         Purple link removable
-      </Label>
+      </Label>{' '}
       <Label color="purple" onClick={() => logColor('purple')}>
         Purple clickable
       </Label>{' '}
       <Label color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
         Purple clickable removable
-      </Label>
+      </Label>{' '}
       <Label color="purple" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Purple label with icon that overflows
+      </Label>{' '}
+      <Label color="purple" isDisabled icon={<InfoCircleIcon />} href="#filled" onClose={() => Function.prototype}>
+        Purple link removable (disabled)
+      </Label>{' '}
+      <Label
+        color="purple"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('purple')}
+        onClose={() => Function.prototype}
+      >
+        Purple clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -177,15 +243,27 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>{' '}
       <Label color="cyan" href="#filled" onClose={() => Function.prototype}>
         Cyan link removable
-      </Label>
+      </Label>{' '}
       <Label color="cyan" onClick={() => logColor('cyan')}>
         Cyan clickable
       </Label>{' '}
       <Label color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
         Cyan clickable removable
-      </Label>
+      </Label>{' '}
       <Label color="cyan" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Cyan label with icon that overflows
+      </Label>{' '}
+      <Label color="cyan" isDisabled icon={<InfoCircleIcon />} href="#filled" onClose={() => Function.prototype}>
+        Cyan link removable (disabled)
+      </Label>{' '}
+      <Label
+        color="cyan"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('cyan')}
+        onClose={() => Function.prototype}
+      >
+        Cyan clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -204,15 +282,27 @@ export const LabelFilled: React.FunctionComponent = () => {
       </Label>{' '}
       <Label color="gold" href="#filled" onClose={() => Function.prototype}>
         Gold link removable
-      </Label>
+      </Label>{' '}
       <Label color="gold" onClick={() => logColor('gold')}>
         Gold clickable
       </Label>{' '}
       <Label color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
         Gold clickable removable
-      </Label>
+      </Label>{' '}
       <Label color="gold" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Gold label with icon that overflows
+      </Label>{' '}
+      <Label color="gold" isDisabled icon={<InfoCircleIcon />} href="#filled" onClose={() => Function.prototype}>
+        Gold link removable (disabled)
+      </Label>{' '}
+      <Label
+        color="gold"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('gold')}
+        onClose={() => Function.prototype}
+      >
+        Gold clickable removable (disabled)
       </Label>
       <br />
       <br />
diff --git a/packages/react-core/src/components/Label/examples/LabelOutline.tsx b/packages/react-core/src/components/Label/examples/LabelOutline.tsx
index cfcb960d551..4c094980960 100644
--- a/packages/react-core/src/components/Label/examples/LabelOutline.tsx
+++ b/packages/react-core/src/components/Label/examples/LabelOutline.tsx
@@ -24,15 +24,27 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" href="#outline" onClose={() => Function.prototype}>
         Grey link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" onClick={() => logColor('grey')}>
         Grey clickable
       </Label>{' '}
       <Label variant="outline" onClick={() => logColor('grey')} onClose={() => Function.prototype}>
         Grey clickable removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" icon={<InfoCircleIcon />} onClose={() => Function.prototype} textMaxWidth="16ch">
         Grey label with icon that overflows
+      </Label>{' '}
+      <Label variant="outline" isDisabled icon={<InfoCircleIcon />} href="#filled" onClose={() => Function.prototype}>
+        Grey link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('grey')}
+        onClose={() => Function.prototype}
+      >
+        Grey clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -53,13 +65,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" color="blue" href="#outline" onClose={() => Function.prototype}>
         Blue link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="blue" onClick={() => logColor('blue')}>
         Blue clickable
       </Label>{' '}
       <Label variant="outline" color="blue" onClick={() => logColor('blue')} onClose={() => Function.prototype}>
         Blue clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="blue"
@@ -68,6 +80,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Blue label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="blue"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Blue link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="blue"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('blue')}
+        onClose={() => Function.prototype}
+      >
+        Blue clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -88,13 +120,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" color="green" href="#outline" onClose={() => Function.prototype}>
         Green link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="green" onClick={() => logColor('green')}>
         Green clickable
       </Label>{' '}
       <Label variant="outline" color="green" onClick={() => logColor('green')} onClose={() => Function.prototype}>
         Green clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="green"
@@ -103,6 +135,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Green label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="green"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Green link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="green"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('green')}
+        onClose={() => Function.prototype}
+      >
+        Green clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -123,13 +175,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" color="orange" href="#outline" onClose={() => Function.prototype}>
         Orange link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="orange" onClick={() => logColor('orange')}>
         Orange clickable
       </Label>{' '}
       <Label variant="outline" color="orange" onClick={() => logColor('orange')} onClose={() => Function.prototype}>
         Orange clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="orange"
@@ -138,6 +190,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Orange label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="orange"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Orange link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="orange"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('orange')}
+        onClose={() => Function.prototype}
+      >
+        Orange clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -158,13 +230,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" color="red" href="#outline" onClose={() => Function.prototype}>
         Red link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="red" onClick={() => logColor('red')}>
         Red clickable
       </Label>{' '}
       <Label variant="outline" color="red" onClick={() => logColor('red')} onClose={() => Function.prototype}>
         Red clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="red"
@@ -173,6 +245,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Red label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="red"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Red link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="red"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('red')}
+        onClose={() => Function.prototype}
+      >
+        Red clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -193,13 +285,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" color="purple" href="#outline" onClose={() => Function.prototype}>
         Purple link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="purple" onClick={() => logColor('purple')}>
         Purple clickable
       </Label>{' '}
       <Label variant="outline" color="purple" onClick={() => logColor('purple')} onClose={() => Function.prototype}>
         Purple clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="purple"
@@ -208,6 +300,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Purple label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="purple"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Purple link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="purple"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('purple')}
+        onClose={() => Function.prototype}
+      >
+        Purple clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -228,13 +340,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" color="cyan" href="#outline" onClose={() => Function.prototype}>
         Cyan link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="cyan" onClick={() => logColor('cyan')}>
         Cyan clickable
       </Label>{' '}
       <Label variant="outline" color="cyan" onClick={() => logColor('cyan')} onClose={() => Function.prototype}>
         Cyan clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="cyan"
@@ -243,6 +355,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Cyan label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="cyan"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Cyan link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="cyan"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('cyan')}
+        onClose={() => Function.prototype}
+      >
+        Cyan clickable removable (disabled)
       </Label>
       <br />
       <br />
@@ -263,13 +395,13 @@ export const LabelOutline: React.FunctionComponent = () => {
       </Label>{' '}
       <Label variant="outline" color="gold" href="#outline" onClose={() => Function.prototype}>
         Gold link removable
-      </Label>
+      </Label>{' '}
       <Label variant="outline" color="gold" onClick={() => logColor('gold')}>
         Gold clickable
       </Label>{' '}
       <Label variant="outline" color="gold" onClick={() => logColor('gold')} onClose={() => Function.prototype}>
         Gold clickable removable
-      </Label>
+      </Label>{' '}
       <Label
         variant="outline"
         color="gold"
@@ -278,6 +410,26 @@ export const LabelOutline: React.FunctionComponent = () => {
         textMaxWidth="16ch"
       >
         Gold label with icon that overflows
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="gold"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        href="#filled"
+        onClose={() => Function.prototype}
+      >
+        Gold link removable (disabled)
+      </Label>{' '}
+      <Label
+        variant="outline"
+        color="gold"
+        isDisabled
+        icon={<InfoCircleIcon />}
+        onClick={() => logColor('gold')}
+        onClose={() => Function.prototype}
+      >
+        Gold clickable removable (disabled)
       </Label>
     </React.Fragment>
   );