fix(radio, checkbox): apply fieldset class (#1259)

* fix(radio, checkbox): apply fieldset class * fix wrapper display * correct structure * fix input decorator
dialpad · Oct 16, 2023 · 61a6899 · 61a6899
1 parent 208dfb5
commit 61a6899
Show file tree

Hide file tree

Showing 6 changed files with 135 additions and 126 deletions.
diff --git a/components/checkbox/checkbox.vue b/components/checkbox/checkbox.vue
@@ -1,52 +1,54 @@
 <template>
-  <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"
-      >
-        <div
-          v-if="hasLabel"
-          :class="labelClass"
-          v-bind="labelChildProps"
-          data-qa="checkbox-label"
-        >
-          <!-- @slot slot for Checkbox Label -->
-          <slot>{{ label }}</slot>
+  <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="hasDescription"
-          :class="['d-description', descriptionClass]"
-          v-bind="descriptionChildProps"
-          data-qa="checkbox-description"
+          v-if="hasLabelOrDescription"
+          class="d-checkbox__copy d-checkbox__label"
+          data-qa="checkbox-label-description-container"
         >
-          <!-- @slot slot for Checkbox Description -->
-          <slot name="description">{{ description }}</slot>
+          <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>
-        <dt-validation-messages
-          :validation-messages="formattedMessages"
-          :show-messages="showMessages"
-          :class="messagesClass"
-          v-bind="messagesChildProps"
-          data-qa="dt-checkbox-validation-messages"
-        />
       </div>
-    </div>
-  </label>
+    </label>
+  </div>
 </template>
 
 <script>

diff --git a/components/input_group/decorators/input.vue b/components/input_group/decorators/input.vue
@@ -2,30 +2,32 @@
   Decorator used for storybook documentation and unit tests.
 -->
 <template>
-  <label>
-    <div class="d-radio-group">
-      <input
-        type="radio"
-        class="d-radio"
-        :checked="internalChecked"
-        :name="internalName"
-        :value="value"
-        :disabled="internalDisabled"
-        :class="[inputValidationClass, inputClass]"
-        v-bind="$attrs"
-        v-on="inputListeners"
-      >
-      <span
-        class="d-radio__copy d-radio__label"
-        :class="labelClass"
-        v-bind="labelChildProps"
-        data-qa="input-decorator-label"
-      >
-        <!-- @slot slot for Input Decorator Label -->
-        <slot>{{ label }}</slot>
-      </span>
-    </div>
-  </label>
+  <div>
+    <label>
+      <div class="d-radio-group">
+        <input
+          type="radio"
+          class="d-radio"
+          :checked="internalChecked"
+          :name="internalName"
+          :value="value"
+          :disabled="internalDisabled"
+          :class="[inputValidationClass, inputClass]"
+          v-bind="$attrs"
+          v-on="inputListeners"
+        >
+        <span
+          class="d-radio__copy d-radio__label"
+          :class="labelClass"
+          v-bind="labelChildProps"
+          data-qa="input-decorator-label"
+        >
+          <!-- @slot slot for Input Decorator Label -->
+          <slot>{{ label }}</slot>
+        </span>
+      </div>
+    </label>
+  </div>
 </template>
 
 <script>

diff --git a/components/input_group/input_group.vue b/components/input_group/input_group.vue
@@ -1,5 +1,8 @@
 <template>
-  <fieldset :data-qa="dataQaGroup">
+  <fieldset
+    class="d-input-group__fieldset"
+    :data-qa="dataQaGroup"
+  >
     <legend
       v-if="$slots.legend || legend"
       :class="['d-label', legendClass]"

diff --git a/components/radio/radio.vue b/components/radio/radio.vue
@@ -1,49 +1,51 @@
 <template>
-  <label>
-    <div :class="['d-radio-group', { 'd-radio-group--disabled': internalDisabled }]">
-      <div class="d-radio__input">
-        <input
-          :checked="internalChecked"
-          :name="internalName"
-          :value="value"
-          :disabled="internalDisabled"
-          type="radio"
-          :class="['d-radio', inputValidationClass, inputClass]"
-          v-bind="$attrs"
-          v-on="inputListeners"
-        >
-      </div>
-      <div
-        class="d-radio__copy d-radio__label"
-        data-qa="radio-label-description-container"
-      >
-        <div
-          :class="labelClass"
-          v-bind="labelChildProps"
-          data-qa="radio-label"
-        >
-          <!-- @slot slot for Radio Label -->
-          <slot>{{ label }}</slot>
+  <div>
+    <label>
+      <div :class="['d-radio-group', { 'd-radio-group--disabled': internalDisabled }]">
+        <div class="d-radio__input">
+          <input
+            :checked="internalChecked"
+            :name="internalName"
+            :value="value"
+            :disabled="internalDisabled"
+            type="radio"
+            :class="['d-radio', inputValidationClass, inputClass]"
+            v-bind="$attrs"
+            v-on="inputListeners"
+          >
         </div>
         <div
-          v-if="$slots.description || description"
-          :class="['d-description', descriptionClass]"
-          v-bind="descriptionChildProps"
-          data-qa="radio-description"
+          class="d-radio__copy d-radio__label"
+          data-qa="radio-label-description-container"
         >
-          <!-- @slot slot for Radio Description -->
-          <slot name="description">{{ description }}</slot>
+          <div
+            :class="labelClass"
+            v-bind="labelChildProps"
+            data-qa="radio-label"
+          >
+            <!-- @slot slot for Radio Label -->
+            <slot>{{ label }}</slot>
+          </div>
+          <div
+            v-if="$slots.description || description"
+            :class="['d-description', descriptionClass]"
+            v-bind="descriptionChildProps"
+            data-qa="radio-description"
+          >
+            <!-- @slot slot for Radio Description -->
+            <slot name="description">{{ description }}</slot>
+          </div>
+          <dt-validation-messages
+            :validation-messages="formattedMessages"
+            :show-messages="showMessages"
+            :class="messagesClass"
+            v-bind="messagesChildProps"
+            data-qa="dt-radio-validation-messages"
+          />
         </div>
-        <dt-validation-messages
-          :validation-messages="formattedMessages"
-          :show-messages="showMessages"
-          :class="messagesClass"
-          v-bind="messagesChildProps"
-          data-qa="dt-radio-validation-messages"
-        />
       </div>
-    </div>
-  </label>
+    </label>
+  </div>
 </template>
 
 <script>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -51,7 +51,7 @@
     "@commitlint/cli": "^17.6.6",
     "@commitlint/config-conventional": "^17.6.6",
     "@dialpad/conventional-changelog-angular": "^1.1.1",
-    "@dialpad/dialtone": "^8.17.0",
+    "@dialpad/dialtone": "^8.19.1",
     "@dialpad/semantic-release-changelog-json": "^1.0.0",
     "@percy/cli": "^1.26.2",
     "@percy/storybook": "^4.3.6",
@@ -110,7 +110,7 @@
     "yorkie": "^2.0.0"
   },
   "peerDependencies": {
-    "@dialpad/dialtone": "^7.30.0 || ^8.12.1",
+    "@dialpad/dialtone": "^7.30.0 || ^8.19.1",
     "vue": ">=2.6"
   },
   "bugs": {