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]
Kong · Jun 15, 2024 · 10e6533 · 10e6533
1 parent 35d0669
commit 10e6533
Show file tree

Hide file tree

Showing 10 changed files with 60 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {