fix(checkbox): DP-137343 fix label clickable area

Author: ninamarina

packages/dialtone-css/lib/build/less/components/radio-checkbox.less

@@ -159,6 +159,11 @@
     cursor: pointer;
 }
 
+.d-checkbox__messages {
+    margin-top: -0.25rem;
+    margin-left: var(--dt-space-550);
+}
+
 .d-checkbox__description {
     display: flex;
     box-sizing: border-box;

packages/dialtone-vue2/components/checkbox/checkbox.test.js

@@ -35,7 +35,7 @@ describe('DtCheckbox Tests', () => {
   let input;
   let label;
   let description;
-  let labelDescriptionContainer;
+  let descriptionMessagesContainer;
 
   const updateWrapper = () => {
     wrapper = mount(DtCheckbox, {
@@ -51,7 +51,7 @@ describe('DtCheckbox Tests', () => {
     input = wrapper.find('input');
     label = wrapper.find('[data-qa="checkbox-label"]');
     description = wrapper.find('[data-qa="checkbox-description"]');
-    labelDescriptionContainer = wrapper.find('[data-qa="checkbox-label-description-container"]');
+    descriptionMessagesContainer = wrapper.find('[data-qa="checkbox-description-messages"]');
   };
 
   beforeAll(() => {
@@ -139,8 +139,8 @@ describe('DtCheckbox Tests', () => {
         expect(label.exists()).toBe(false);
       });
 
-      it('should remove the checkbox label/description container if neither is provided', () => {
-        expect(labelDescriptionContainer.exists()).toBe(false);
+      it('should remove the checkbox description/messages container if neither is provided', () => {
+        expect(descriptionMessagesContainer.exists()).toBe(false);
       });
 
       it('should keep the input checkbox', () => {

packages/dialtone-vue2/components/checkbox/checkbox.vue

@@ -1,53 +1,53 @@
 <template>
   <div>
-    <label>
-      <div :class="['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]">
-        <div class="d-checkbox__input">
-          <input
-            type="checkbox"
-            :checked="internalChecked"
-            :name="internalName"
-            :value="value"
-            :disabled="internalDisabled"
-            :class="['d-checkbox', inputValidationClass, inputClass]"
-            v-bind="$attrs"
-            :indeterminate.prop="internalIndeterminate"
-            v-on="inputListeners"
-          >
-        </div>
-        <div
-          v-if="hasLabelOrDescription"
-          class="d-checkbox__copy d-checkbox__label"
-          data-qa="checkbox-label-description-container"
+    <label :class="['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]">
+      <div class="d-checkbox__input">
+        <input
+          type="checkbox"
+          :checked="internalChecked"
+          :name="internalName"
+          :value="value"
+          :disabled="internalDisabled"
+          :class="['d-checkbox', inputValidationClass, inputClass]"
+          v-bind="$attrs"
+          :indeterminate.prop="internalIndeterminate"
+          v-on="inputListeners"
         >
-          <div
-            v-if="hasLabel"
-            :class="labelClass"
-            v-bind="labelChildProps"
-            data-qa="checkbox-label"
-          >
-            <!-- @slot slot for Checkbox Label -->
-            <slot>{{ label }}</slot>
-          </div>
-          <div
-            v-if="hasDescription"
-            :class="['d-description', descriptionClass]"
-            v-bind="descriptionChildProps"
-            data-qa="checkbox-description"
-          >
-            <!-- @slot slot for Checkbox Description -->
-            <slot name="description">{{ description }}</slot>
-          </div>
-          <dt-validation-messages
-            :validation-messages="formattedMessages"
-            :show-messages="showMessages"
-            :class="messagesClass"
-            v-bind="messagesChildProps"
-            data-qa="dt-checkbox-validation-messages"
-          />
-        </div>
+      </div>
+      <div
+        v-if="hasLabel"
+        :class="[labelClass, 'd-checkbox__copy d-checkbox__label']"
+        v-bind="labelChildProps"
+        data-qa="checkbox-label"
+      >
+        <!-- @slot slot for Checkbox Label -->
+        <slot>{{ label }}</slot>
       </div>
     </label>
+    <div
+      v-if="hasDescriptionOrMessages"
+      class="d-checkbox__messages"
+      data-qa="checkbox-description-messages"
+    >
+      <div
+        v-if="hasDescription"
+        :class="['d-description', descriptionClass]"
+        v-bind="descriptionChildProps"
+        data-qa="checkbox-description"
+      >
+        <!-- @slot slot for Checkbox Description -->
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </div>
+      <dt-validation-messages
+        :validation-messages="formattedMessages"
+        :show-messages="showMessages"
+        :class="messagesClass"
+        v-bind="messagesChildProps"
+        data-qa="dt-checkbox-validation-messages"
+      />
+    </div>
   </div>
 </template>
 
@@ -119,8 +119,12 @@ export default {
       return !!(this.$slots.description || this.description);
     },
 
-    hasLabelOrDescription () {
-      return this.hasLabel || this.hasDescription;
+    hasDescriptionOrMessages () {
+      return this.hasDescription || this.hasMessages;
+    },
+
+    hasMessages () {
+      return this.formattedMessages.length && this.showMessages;
     },
 
     inputListeners () {