From e93617534a7824379bd6d54b4a316ea35127ce1d Mon Sep 17 00:00:00 2001
From: portikM <maksym.portianoi@konghq.com>
Date: Fri, 27 Oct 2023 13:22:26 -0400
Subject: [PATCH] fix(*): deprecate klabel help prop

---
 docs/guide/migrating-to-version-9.md   |  7 ++--
 sandbox/pages/SandboxLabel.vue         | 50 +++++++++++++++++++++++++-
 src/components/KCheckbox/KCheckbox.vue |  7 ++++
 src/components/KInput/KInput.vue       |  7 ++++
 src/components/KLabel/KLabel.vue       | 18 ++++++++--
 src/components/KRadio/KRadio.vue       |  7 ++++
 src/types/input.ts                     |  1 +
 7 files changed, 91 insertions(+), 6 deletions(-)

diff --git a/docs/guide/migrating-to-version-9.md b/docs/guide/migrating-to-version-9.md
index 95e66ad236..396686f0ec 100644
--- a/docs/guide/migrating-to-version-9.md
+++ b/docs/guide/migrating-to-version-9.md
@@ -88,6 +88,7 @@ Kongponents styles are no longer designed to be utilized standalone, separately
 #### Props
 
 * `testMode` prop has been removed
+* `help` property of `labelAttributes` prop has been deprecated in favor of `info`
 
 #### Slots
 
@@ -179,7 +180,6 @@ Component has been renamed to `KDropdown`
 
 * `SizeArray` and `IconPositionArray` constants have been removed
 * `Size` and `IconPosition` types have been removed
-* `help` property was removed from `LabelAttributes` interface (TODO: after KLabel is reskinned)
 
 #### Props
 
@@ -187,7 +187,7 @@ Component has been renamed to `KDropdown`
 * `size` prop has been removed (KInput only comes in 1 size now)
 * `iconPosition` prop has been removed
 * `testMode` prop has been removed
-* `help` property was removed from `labelAttributes` prop (TODO: after KLabel is reskinned)
+* `help` property of `labelAttributes` prop has been deprecated in favor of `info`
 * `hasError` prop has been deprecated in favor of `error`
 
 #### Slots
@@ -211,7 +211,7 @@ Component has been renamed to `KDropdown`
 
 #### Props
 
-* `help` prop has been removed
+* `help` prop has been deprecated in favor of `info`
 * `testMode` prop has been removed
 
 ### KMenu
@@ -285,6 +285,7 @@ Removed as of `v9`. Use `KTooltip` instead.
 
 * `testMode` prop has been removed
 * `type` prop has been deprecated in favor of `card` prop
+* `help` property of `labelAttributes` prop has been deprecated in favor of `info`
 
 #### Slots
 
diff --git a/sandbox/pages/SandboxLabel.vue b/sandbox/pages/SandboxLabel.vue
index 5527badea3..c71df31fab 100644
--- a/sandbox/pages/SandboxLabel.vue
+++ b/sandbox/pages/SandboxLabel.vue
@@ -54,11 +54,59 @@
         required
       />
     </SandboxSectionComponent>
+
+    <!-- Legacy -->
+    <SandboxTitleComponent
+      is-subtitle
+      title="Legacy"
+    />
+    <SandboxSectionComponent
+      description="Handles backwards compatibility for deprecated prop usage when passed directly to KLabel or propagated through other components through labelAttributes prop."
+      title="Props: help (deprecated)"
+    >
+      <div class="vertical-spacing">
+        <KLabel
+          help="This is help text"
+        >
+          Label with help tooltip
+        </KLabel>
+        <KInput
+          label="Label"
+          :label-attributes="{
+            help: 'KLabel help.',
+          }"
+        />
+        <KRadio
+          v-model="radioCheck"
+          label="Label"
+          :label-attributes="{ help: 'KLabel help.' }"
+          :selected-value="true"
+        />
+        <KCheckbox
+          v-model="radioCheck"
+          label="Label"
+          :label-attributes="{ help: 'KLabel help.' }"
+        />
+      </div>
+    </SandboxSectionComponent>
   </div>
 </template>
 
 <script setup lang="ts">
+import { ref } from 'vue'
 import SandboxTitleComponent from '../components/SandboxTitleComponent.vue'
 import SandboxSectionComponent from '../components/SandboxSectionComponent.vue'
-import { KExternalLink, KLabel, KInput } from '@/components'
+import { KExternalLink, KLabel, KInput, KRadio, KCheckbox } from '@/components'
+
+const radioCheck = ref<boolean>(false)
 </script>
+
+<style scoped lang="scss">
+.klabel-sandbox {
+  .vertical-spacing {
+    display: flex;
+    flex-direction: column;
+    gap: $kui-space-50;
+  }
+}
+</style>
diff --git a/src/components/KCheckbox/KCheckbox.vue b/src/components/KCheckbox/KCheckbox.vue
index 9fde845475..44f0e173d6 100644
--- a/src/components/KCheckbox/KCheckbox.vue
+++ b/src/components/KCheckbox/KCheckbox.vue
@@ -77,6 +77,13 @@ const props = defineProps({
   labelAttributes: {
     type: Object as PropType<LabelAttributes>,
     default: () => ({}),
+    validator: (value: LabelAttributes): boolean => {
+      if (value.help) {
+        console.warn('KCheckbox: `help` property of `labelAttributes` prop is deprecated. Please use `info` prop instead. See the migration guide for more details: https://alpha--kongponents.netlify.app/guide/migrating-to-version-9.html#klabel')
+      }
+
+      return true
+    },
   },
   description: {
     type: String,
diff --git a/src/components/KInput/KInput.vue b/src/components/KInput/KInput.vue
index 744d699481..cc07b1f26d 100644
--- a/src/components/KInput/KInput.vue
+++ b/src/components/KInput/KInput.vue
@@ -86,6 +86,13 @@ const props = defineProps({
   labelAttributes: {
     type: Object as PropType<LabelAttributes>,
     default: () => ({}),
+    validator: (value: LabelAttributes): boolean => {
+      if (value.help) {
+        console.warn('KInput: `help` property of `labelAttributes` prop is deprecated. Please use `info` prop instead. See the migration guide for more details: https://alpha--kongponents.netlify.app/guide/migrating-to-version-9.html#klabel')
+      }
+
+      return true
+    },
   },
   help: {
     type: String,
diff --git a/src/components/KLabel/KLabel.vue b/src/components/KLabel/KLabel.vue
index 2ae4202fbc..3b21debbed 100644
--- a/src/components/KLabel/KLabel.vue
+++ b/src/components/KLabel/KLabel.vue
@@ -16,7 +16,7 @@
         tabindex="0"
       />
       <template #content>
-        <slot name="tooltip">{{ info }}</slot>
+        <slot name="tooltip">{{ help || info }}</slot>
       </template>
     </KTooltip>
   </label>
@@ -43,11 +43,25 @@ const props = defineProps({
     type: Object as PropType<TooltipAttributes>,
     default: () => ({}),
   },
+  /**
+   * @deprecated in favor of `info` prop
+   */
+  help: {
+    type: String,
+    default: '',
+    validator: (value: string): boolean => {
+      if (value) {
+        console.warn('KLabel: `help` prop is deprecated. Please use `info` prop instead. See the migration guide for more details: https://alpha--kongponents.netlify.app/guide/migrating-to-version-9.html#klabel')
+      }
+
+      return true
+    },
+  },
 })
 
 const slots = useSlots()
 
-const hasTooltip = computed((): boolean => !!(props.info || slots.tooltip))
+const hasTooltip = computed((): boolean => !!(props.help || props.info || slots.tooltip))
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/KRadio/KRadio.vue b/src/components/KRadio/KRadio.vue
index 838ccf38c5..b13e10e33f 100644
--- a/src/components/KRadio/KRadio.vue
+++ b/src/components/KRadio/KRadio.vue
@@ -111,6 +111,13 @@ const props = defineProps({
   labelAttributes: {
     type: Object as PropType<LabelAttributes>,
     default: () => ({}),
+    validator: (value: LabelAttributes): boolean => {
+      if (value.help) {
+        console.warn('KRadio: `help` property of `labelAttributes` prop is deprecated. Please use `info` prop instead. See the migration guide for more details: https://alpha--kongponents.netlify.app/guide/migrating-to-version-9.html#klabel')
+      }
+
+      return true
+    },
   },
   /**
    * Overrides default description text
diff --git a/src/types/input.ts b/src/types/input.ts
index ca3cf13373..348f6f6937 100644
--- a/src/types/input.ts
+++ b/src/types/input.ts
@@ -4,6 +4,7 @@ export interface LabelAttributes {
   info?: string
   required?: boolean
   tooltipAttributes?: TooltipAttributes
+  help?: string // @deprecated in favor of `info`
 }
 
 export interface LimitExceededData {