From 10e65337a46eda88c165c0bb977dce23f7143431 Mon Sep 17 00:00:00 2001
From: Maksym Portianoi <maksym.portianoi@konghq.com>
Date: Thu, 25 Apr 2024 16:22:46 -0400
Subject: [PATCH] fix(kradio, kcheckbox): required field indicator [KHCP-11503]
 (#2159)

* fix(kradio, kcheckbox): required field indicator [KHCP-11503]

* fix(kexternallink): outline offset [KHCP-11517]

* docs(radio, checkbox): add required examples [KHCP-11503]

* docs(*): minor fixes [KHCP-11503]

* fix(kradio, kcheckbox): minor fix [KHCP-11503]

* docs(kradio): remove example [KHCP-11503]
---
 docs/components/checkbox.md                   | 18 +++++++++---
 docs/components/file-upload.md                |  2 +-
 docs/components/input.md                      |  2 +-
 docs/components/radio.md                      |  4 +--
 docs/components/textarea.md                   |  2 +-
 sandbox/pages/SandboxCheckbox.vue             | 17 +++++++----
 sandbox/pages/SandboxRadio.vue                | 28 ++++++++++++-------
 src/components/KCheckbox/KCheckbox.vue        |  6 +++-
 .../KExternalLink/KExternalLink.vue           |  2 +-
 src/components/KRadio/KRadio.vue              |  6 +++-
 10 files changed, 60 insertions(+), 27 deletions(-)

diff --git a/docs/components/checkbox.md b/docs/components/checkbox.md
index 27225f3c3f..6092baf255 100644
--- a/docs/components/checkbox.md
+++ b/docs/components/checkbox.md
@@ -45,14 +45,23 @@ Will place label text to the right of the checkbox. Can also be [slotted](#slots
 
  KCheckbox has an instance of KLabel for supporting tooltip text. Use the `labelAttributes` prop to configure the KLabel's [props](/components/label). This example shows using the `labelAttributes` to set up a tooltip, see the [slot](#slots) section if you want to slot HTML into the tooltip rather than use plain text.
 
-<KCheckbox v-model="labelAttributesCheckbox" label="Tooltips?" :label-attributes="{ info: 'I use the KLabel `info` prop' }" />
+<div class="vertical-spacing">
+  <KCheckbox v-model="labelAttributesCheckbox1" label="Tooltip" :label-attributes="{ info: 'I use the KLabel `info` prop' }" />
+  <KCheckbox v-model="labelAttributesCheckbox2" label="Required" :label-attributes="{ required: true }" />
+</div>
 
 ```html
 <KCheckbox
-  v-model="checked"
-  label="Tooltips?"
+  v-model="checked1"
+  label="Tooltip"
   :label-attributes="{ info: 'I use the KLabel `info` prop' }"
 />
+
+<KCheckbox
+  v-model="checked2"
+  label="Required"
+  :label-attributes="{ required: true }"
+/>
 ```
 
 ### description
@@ -266,7 +275,8 @@ const vModelCheckbox = ref<boolean>(false)
 const descriptionPropCheckbox = ref<boolean>(false)
 const errorCheckbox = ref<boolean>(false)
 const labelCheckbox = ref<boolean>(false)
-const labelAttributesCheckbox = ref<boolean>(false)
+const labelAttributesCheckbox1 = ref<boolean>(false)
+const labelAttributesCheckbox2 = ref<boolean>(false)
 const disabledCheckbox = ref<boolean>(false)
 const disabledCheckedCheckbox = ref<boolean>(true)
 const themeChecked = ref<boolean>(true)
diff --git a/docs/components/file-upload.md b/docs/components/file-upload.md
index 13db91e972..2264ef9b28 100644
--- a/docs/components/file-upload.md
+++ b/docs/components/file-upload.md
@@ -150,7 +150,7 @@ Slot for an icon in front of the input field.
 </KFileUpload>
 ```
 
-### labelTooltip
+### label-tooltip
 
 Use this slot if you want to utilize HTML in the input label's tooltip.
 
diff --git a/docs/components/input.md b/docs/components/input.md
index 40531d3b33..642f6ae5b2 100644
--- a/docs/components/input.md
+++ b/docs/components/input.md
@@ -251,7 +251,7 @@ Should you decide to use your own custom icons, you can use design tokens export
 We also recommend setting the icon style `color` property to a value of `currentColor` to utilize default KInput styling for slotted content.
 :::
 
-### labelTooltip
+### label-tooltip
 
 If you want to utilize HTML in the input label's tooltip, use the slot.
 
diff --git a/docs/components/radio.md b/docs/components/radio.md
index d1b23d2cb3..8df3e3932f 100644
--- a/docs/components/radio.md
+++ b/docs/components/radio.md
@@ -55,12 +55,12 @@ Will place label text to the right of the radio. Can also be [slotted](#slots).
 
  KRadio has an instance of KLabel for supporting tooltip text. Use the `labelAttributes` prop to configure the KLabel's [props](/components/label). This example shows using the `labelAttributes` to set up a tooltip. Tooltip content can also be [slotted](#slots).
 
-<KRadio v-model="labelAttributesPropRadio" label="Tooltips?" :label-attributes="{ info: 'I use the KLabel `help` prop' }" :selected-value="true" />
+<KRadio v-model="labelAttributesPropRadio" label="Tooltip" :label-attributes="{ info: 'I use the KLabel `help` prop' }" :selected-value="true" />
 
 ```html
 <KRadio
   v-model="checked"
-  label="Tooltips?"
+  label="Tooltip"
   :label-attributes="{ info: 'I use the KLabel `help` prop' }"
   :selected-value="true"
 />
diff --git a/docs/components/textarea.md b/docs/components/textarea.md
index 109976c50c..d0c21f7d0d 100644
--- a/docs/components/textarea.md
+++ b/docs/components/textarea.md
@@ -136,7 +136,7 @@ KTextArea works with `v-model` for two-way data binding:
 
 ## Slots
 
-### labelTooltip
+### label-tooltip
 
 Slot for tooltip content if textarea has a label and label has tooltip (note: this slot overrides `info` content specified in `labelAttributes`)
 
diff --git a/sandbox/pages/SandboxCheckbox.vue b/sandbox/pages/SandboxCheckbox.vue
index 8952b3e03c..891cc4cbd6 100644
--- a/sandbox/pages/SandboxCheckbox.vue
+++ b/sandbox/pages/SandboxCheckbox.vue
@@ -155,11 +155,18 @@
         </div>
       </SandboxSectionComponent>
       <SandboxSectionComponent title="labelAttributes">
-        <KCheckbox
-          v-model="modelValue4"
-          label="Label"
-          :label-attributes="{ info: 'Tooltip it is' }"
-        />
+        <div class="vertical-spacing">
+          <KCheckbox
+            v-model="modelValue4"
+            label="Label"
+            :label-attributes="{ info: 'Tooltip it is' }"
+          />
+          <KCheckbox
+            v-model="modelValue4"
+            label="Label"
+            :label-attributes="{ required: true }"
+          />
+        </div>
       </SandboxSectionComponent>
 
       <!-- Slots -->
diff --git a/sandbox/pages/SandboxRadio.vue b/sandbox/pages/SandboxRadio.vue
index ae16d37c22..0352aee01b 100644
--- a/sandbox/pages/SandboxRadio.vue
+++ b/sandbox/pages/SandboxRadio.vue
@@ -197,12 +197,20 @@
         </div>
       </SandboxSectionComponent>
       <SandboxSectionComponent title="labelAttributes">
-        <KRadio
-          v-model="modelValue0"
-          label="Label"
-          :label-attributes="{ info: 'Tooltip it is' }"
-          selected-value="foobar5"
-        />
+        <div class="vertical-spacing">
+          <KRadio
+            v-model="modelValue0"
+            label="Label"
+            :label-attributes="{ info: 'Tooltip it is' }"
+            selected-value="foobar5"
+          />
+          <KRadio
+            v-model="modelValue0"
+            label="Label"
+            :label-attributes="{ required: true }"
+            selected-value="foobar6"
+          />
+        </div>
       </SandboxSectionComponent>
 
       <!-- Slots -->
@@ -213,7 +221,7 @@
       <SandboxSectionComponent title="default">
         <KRadio
           v-model="modelValue0"
-          selected-value="foobar6"
+          selected-value="foobar7"
         >
           Label
         </KRadio>
@@ -222,7 +230,7 @@
         <KRadio
           v-model="modelValue0"
           label="Label"
-          selected-value="foobar7"
+          selected-value="foobar8"
         >
           <template #description>
             Lorem ipsum dolor sit amet.
@@ -232,7 +240,7 @@
       <SandboxSectionComponent title="default & description">
         <KRadio
           v-model="modelValue0"
-          selected-value="foobar8"
+          selected-value="foobar9"
         >
           Label
           <template #description>
@@ -243,7 +251,7 @@
       <SandboxSectionComponent title="tooltip">
         <KRadio
           v-model="modelValue0"
-          selected-value="foobar9"
+          selected-value="foobar10"
         >
           Label
           <template #tooltip>
diff --git a/src/components/KCheckbox/KCheckbox.vue b/src/components/KCheckbox/KCheckbox.vue
index 81a6efc6af..9b94120543 100644
--- a/src/components/KCheckbox/KCheckbox.vue
+++ b/src/components/KCheckbox/KCheckbox.vue
@@ -192,7 +192,7 @@ export default {
     position: relative;
 
     &.has-label {
-      margin-top: 3px; // align with label
+      margin-top: 4px; // align with label
     }
   }
 
@@ -281,6 +281,10 @@ export default {
     .checkbox-label {
       cursor: pointer;
       margin: 0;
+
+      &.required {
+        margin-left: var(--kui-space-60, $kui-space-60);
+      }
     }
 
     .checkbox-description {
diff --git a/src/components/KExternalLink/KExternalLink.vue b/src/components/KExternalLink/KExternalLink.vue
index 0ddd1be394..425419d7da 100644
--- a/src/components/KExternalLink/KExternalLink.vue
+++ b/src/components/KExternalLink/KExternalLink.vue
@@ -45,7 +45,7 @@ const isHrefValid = computed((): boolean => !!isValidUrl(props.href))
   font-weight: var(--kui-font-weight-regular, $kui-font-weight-regular);
   gap: var(--kui-space-20, $kui-space-20);
   list-style: inherit;
-  outline: none;
+  outline-offset: 0px;
   text-decoration: none;
 
   &:hover {
diff --git a/src/components/KRadio/KRadio.vue b/src/components/KRadio/KRadio.vue
index 291a2eb8f4..90c89badcb 100644
--- a/src/components/KRadio/KRadio.vue
+++ b/src/components/KRadio/KRadio.vue
@@ -236,7 +236,7 @@ $kRadioDotSize: 6px;
 
     // Since the mixin is used in both KRadio and KCheckbox it doesn't have rules for some component-specific properties so we need to set them here
     border-radius: var(--kui-border-radius-circle, $kui-border-radius-circle);
-    margin-top: 3px; // align with label
+    margin-top: 4px; // align with label
     position: relative;
 
     &:hover {
@@ -315,6 +315,10 @@ $kRadioDotSize: 6px;
     .radio-label {
       cursor: pointer;
       margin: 0;
+
+      &.required {
+        margin-left: var(--kui-space-60, $kui-space-60);
+      }
     }
 
     .radio-description {