fix(*): deprecate klabel help prop

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,15 +180,14 @@ 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
 
 * `overlayLabel` prop has been removed
 * `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
 

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>

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,

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,

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>

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

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 {