refactor(components): dlt-3283 refactor prop/slots to be consistent (#1196)

Co-authored-by: iropolo <ignacio.ropolo@dialpad.com>

Author: iropolo

packages/combinator/src/components/controls/control_number.vue

@@ -6,7 +6,7 @@
     :size="100"
     @input="e => emit(VALUE_UPDATE_EVENT, e === '' ? undefined : parseInt(e))"
   >
-    <template #labelSlot>
+    <template #label>
       <dt-text
         kind="label"
         :size="100"

packages/combinator/src/components/controls/control_slot.vue

@@ -8,7 +8,7 @@
     :size="100"
     @input="updateValue"
   >
-    <template #labelSlot>
+    <template #label>
       <dt-text
         kind="label"
         :size="100"

packages/combinator/src/components/controls/control_string.vue

@@ -6,7 +6,7 @@
     :size="100"
     @input="e => emit(VALUE_UPDATE_EVENT, e)"
   >
-    <template #labelSlot>
+    <template #label>
       <dt-text
         kind="label"
         :size="100"

packages/dialtone-vue/components/banner/banner.stories.js

@@ -16,14 +16,6 @@ export const argsData = {
 
 export const argTypesData = {
   // Slots
-  titleOverride: {
-    table: {
-      type: { summary: 'VNode' },
-    },
-    control: {
-      type: 'text',
-    },
-  },
   icon: {
     options: iconsList,
     table: {

packages/dialtone-vue/components/banner/banner.vue

@@ -15,7 +15,7 @@
       <dt-notice-icon
         v-if="showIcon"
         :kind="kind"
-        :class="{ 'd-notice__icon--has-title': title || $slots.titleOverride }"
+        :class="{ 'd-notice__icon--has-title': title || $slots.title }"
       >
         <!-- @slot Slot for custom icon -->
         <slot name="icon" />
@@ -25,10 +25,9 @@
         :content-id="contentId"
         :title="title"
       >
-        <template #titleOverride>
-          <!-- eslint-disable-next-line max-len -->
-          <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the "title" prop. -->
-          <slot name="titleOverride" />
+        <template #title>
+          <!-- @slot Slot for the title -->
+          <slot name="title" />
         </template>
         <!-- @slot the main textual content of the banner -->
         <slot />

packages/dialtone-vue/components/banner/banner_default.story.vue

@@ -56,12 +56,6 @@
       >
         <dt-icon :name="$attrs.icon" />
       </template>
-      <template
-        v-if="$attrs.titleOverride"
-        #titleOverride
-      >
-        <span v-html="$attrs.titleOverride" />
-      </template>
     </dt-banner>
   </div>
 </template>

packages/dialtone-vue/components/input/input.stories.js

@@ -69,15 +69,6 @@ export const argTypesData = {
       disable: true,
     },
   },
-  labelSlot: {
-    table: {
-      type: { summary: 'VNode' },
-    },
-    control: {
-      type: 'text',
-    },
-  },
-
   // Props
   modelValue: {
     control: 'text',

packages/dialtone-vue/components/input/input.vue

@@ -11,7 +11,7 @@
       data-qa="dt-input-label-wrapper"
     >
       <!-- @slot Slot for label, defaults to label prop -->
-      <slot name="labelSlot">
+      <slot name="label">
         <dt-text
           v-if="showLabel && label"
           ref="label"
@@ -213,7 +213,8 @@ export default {
     },
 
     /**
-     * Label for the input
+     * Label for the input.
+     * Can also be overridden with a slot of the same name.
      */
     label: {
       type: String,

packages/dialtone-vue/components/input/input_default.story.vue

@@ -30,12 +30,6 @@
     @update:length="updateLength"
     @update:invalid="$attrs.onUpdateIsInvalid"
   >
-    <template
-      v-if="$attrs.labelSlot"
-      #labelSlot
-    >
-      <span v-html="$attrs.labelSlot" />
-    </template>
     <template
       v-if="$attrs.description"
       #description

packages/dialtone-vue/components/input/input_search_variant.story.vue

@@ -27,12 +27,6 @@
     @update:length="updateLength"
     @update:invalid="$attrs.onUpdateIsInvalid"
   >
-    <template
-      v-if="$attrs.labelSlot"
-      #labelSlot
-    >
-      <span v-html="$attrs.labelSlot" />
-    </template>
     <template
       v-if="$attrs.description"
       #description