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

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="!hideIcon"
         :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="labelVisible && 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

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

@@ -17,15 +17,6 @@ export const argTypesData = {
       },
     },
   },
-  // Slots
-  headingSlot: {
-    control: 'text',
-    table: {
-      type: {
-        summary: 'VNode',
-      },
-    },
-  },
 };
 
 // Story Collection

packages/dialtone-vue/components/list_item_group/list_item_group.vue

@@ -13,8 +13,8 @@
       data-qa="dt-dropdown-list-heading"
       :class="['dt-dropdown-list--header', headingClass]"
     >
-      <!-- @slot Slot for heading, will override heading prop. -->
-      <slot name="headingSlot">
+      <!-- @slot Slot for heading, will override heading prop -->
+      <slot name="heading">
         {{ heading }}
       </slot>
     </li>
@@ -42,6 +42,7 @@ export default {
 
     /**
      * List's heading.
+     * Can also be overridden with a slot of the same name.
      */
     heading: {
       type: String,

packages/dialtone-vue/components/list_item_group/list_item_group_default.story.vue

@@ -29,12 +29,6 @@
       >
         item3
       </dt-list-item>
-      <template
-        v-if="$attrs.headingSlot"
-        #headingSlot
-      >
-        <span v-html="$attrs.headingSlot" />
-      </template>
     </dt-list-item-group>
   </div>
 </template>

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

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

packages/dialtone-vue/components/notice/notice.vue

@@ -6,7 +6,7 @@
     <dt-notice-icon
       v-if="!hideIcon"
       :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" />
@@ -17,10 +17,9 @@
       :title="title"
       :role="role"
     >
-      <template #titleOverride>
-        <!-- @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 notice -->
       <slot />

packages/dialtone-vue/components/notice/notice_content.test.js

@@ -54,14 +54,14 @@ describe('DtNoticeContent tests', () => {
       });
     });
 
-    describe('When title override is true', () => {
+    describe('When title slot is provided', () => {
       beforeEach(() => {
-        slotsData.titleOverride = 'this is an override title';
+        slotsData.title = 'this is a slot title';
         _setWrappers();
       });
 
       it('displays the correct text', () => {
-        expect(title.text()).toBe(slotsData.titleOverride);
+        expect(title.text()).toBe(slotsData.title);
       });
     });
   });

packages/dialtone-vue/components/notice/notice_content.vue

@@ -4,7 +4,7 @@
     data-qa="notice-content"
   >
     <dt-text
-      v-if="title || hasSlotContent($slots.titleOverride)"
+      v-if="title || hasSlotContent($slots.title)"
       :id="titleId"
       kind="headline"
       :size="300"
@@ -13,8 +13,8 @@
       class="d-notice__title"
       data-qa="notice-content-title"
     >
-      <!-- @slot Slot for the title  -->
-      <slot name="titleOverride">
+      <!-- @slot Slot for the title -->
+      <slot name="title">
         {{ title }}
       </slot>
     </dt-text>
@@ -46,6 +46,7 @@ export default {
   props: {
     /**
      * Title header of the notice. This can be left blank to remove the title from the notice entirely.
+     * Can also be overridden with a slot of the same name.
      */
     title: {
       type: String,

packages/dialtone-vue/components/notice/notice_default.story.vue

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

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

@@ -27,28 +27,6 @@ export const argsData = {
 
 export const argTypesData = {
   // Slots
-  labelSlot: {
-    name: 'label',
-    description: 'Slot for label, defaults to label prop',
-    control: 'text',
-    table: {
-      category: 'slots',
-      type: {
-        summary: 'VNode',
-      },
-    },
-  },
-  descriptionSlot: {
-    name: 'description',
-    description: 'Slot for description, defaults to description prop',
-    control: 'text',
-    table: {
-      category: 'slots',
-      type: {
-        summary: 'VNode',
-      },
-    },
-  },
   default: {
     control: 'text',
     table: {

packages/dialtone-vue/components/select_menu/select_menu.vue

@@ -120,7 +120,8 @@ export default {
 
   props: {
     /**
-     * Label for the select
+     * Label for the select.
+     * Can also be overridden with a slot of the same name.
      */
     label: {
       type: String,
@@ -137,7 +138,8 @@ export default {
     },
 
     /**
-     * Description for the select
+     * Description for the select.
+     * Can also be overridden with a slot of the same name.
      */
     description: {
       type: String,

packages/dialtone-vue/components/select_menu/select_menu_default.story.vue

@@ -22,18 +22,6 @@
     @input="$attrs.onInput"
     @change="$attrs.onChange"
   >
-    <template
-      v-if="$attrs.labelSlot"
-      #label
-    >
-      <span v-html="$attrs.labelSlot" />
-    </template>
-    <template
-      v-if="$attrs.descriptionSlot"
-      #description
-    >
-      <span v-html="$attrs.descriptionSlot" />
-    </template>
     <html-fragment
       v-if="defaultSlot"
       :html="defaultSlot"

packages/dialtone-vue/components/toast/layouts/toast_layout_alternate.vue

@@ -26,8 +26,8 @@
           :role="role"
           v-bind="toastListeners"
         >
-          <template #titleOverride>
-            <slot name="titleOverride" />
+          <template #title>
+            <slot name="title" />
           </template>
         </dt-notice-content>
 

packages/dialtone-vue/components/toast/layouts/toast_layout_default.vue

@@ -14,7 +14,7 @@
       <dt-notice-icon
         v-if="!hideIcon"
         :kind="kind"
-        :class="{ 'd-notice__icon--has-title': title || $slots.titleOverride }"
+        :class="{ 'd-notice__icon--has-title': title || $slots.title }"
         v-bind="toastListeners"
       >
         <!-- @slot Slot for custom icon -->
@@ -27,10 +27,9 @@
         :role="role"
         v-bind="toastListeners"
       >
-        <template #titleOverride>
-          <!-- @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 toast -->
         <slot>