feat: add hide label to checkbox (#843)

carbon-design-system · Feb 27, 2020 · ee6ed25 · ee6ed25
1 parent 1b954ab
commit ee6ed25
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 20 deletions.
diff --git a/packages/core/__tests__/__snapshots__/cv-checkbox.test.js.snap b/packages/core/__tests__/__snapshots__/cv-checkbox.test.js.snap
@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CvCheckbox should render 1`] = `
-<div class="cv-checkbox bx--checkbox-wrapper bx--form-item"><label class="bx--checkbox-label"><input type="checkbox" aria-checked="false" class="bx--checkbox" value="check-1">
+<div class="cv-checkbox bx--checkbox-wrapper bx--form-item"><input type="checkbox" aria-checked="false" id="uid-e972eca3-3ea6-4d18-9d85-7188493d95a6" class="bx--checkbox" value="check-1"> <label for="uid-e972eca3-3ea6-4d18-9d85-7188493d95a6" class="bx--checkbox-label"><span class="bx--checkbox-label-text">
 
-  </label></div>
+    </span></label></div>
 `;
 
 exports[`CvCheckbox should render when disabled 1`] = `
-<div class="cv-checkbox bx--checkbox-wrapper bx--form-item"><label data-contained-checkbox-disabled="true" class="bx--checkbox-label bx--label--disabled"><input type="checkbox" aria-checked="false" disabled="disabled" class="bx--checkbox" value="check-1">
+<div class="cv-checkbox bx--checkbox-wrapper bx--form-item"><input type="checkbox" aria-checked="false" id="uid-9f8d69e6-f461-42c1-ab0f-0377b7f03505" disabled="disabled" class="bx--checkbox" value="check-1"> <label data-contained-checkbox-disabled="true" for="uid-9f8d69e6-f461-42c1-ab0f-0377b7f03505" class="bx--checkbox-label bx--label--disabled"><span class="bx--checkbox-label-text">
 
-  </label></div>
+    </span></label></div>
 `;
 
 exports[`CvCheckboxSkeleton Renders as expected 1`] = `<div class="cv-checkbox bx--form-item bx--checkbox-wrapper"><label class="bx--checkbox-label bx--skeleton"></label></div>`;
diff --git a/packages/core/src/components/cv-checkbox/cv-checkbox-notes.md b/packages/core/src/components/cv-checkbox/cv-checkbox-notes.md
@@ -56,5 +56,6 @@ html
 
 - checked: true | false
 - disabled: standard HTML checkbox property
+- hideLabel: makes the label visually hidden but still labels the checkbox
 - label: checkbox label
 - mixed: if true aria-checkbox set to mixed if checked is false
diff --git a/packages/core/src/components/cv-checkbox/cv-checkbox.vue b/packages/core/src/components/cv-checkbox/cv-checkbox.vue
@@ -1,5 +1,18 @@
 <template>
   <div class="cv-checkbox bx--checkbox-wrapper" :class="{ 'bx--form-item': formItem }">
+    <input
+      ref="input"
+      v-bind="$attrs"
+      v-on="inputListeners"
+      class="bx--checkbox"
+      type="checkbox"
+      :checked="isChecked === true"
+      :aria-checked="`${isChecked}`"
+      @focus="onFocus"
+      @blur="onBlur"
+      :value="value"
+      :id="uid"
+    />
     <label
       :class="[
         'bx--checkbox-label',
@@ -10,32 +23,25 @@
       ]"
       :data-contained-checkbox-state="isChecked"
       :data-contained-checkbox-disabled="$attrs.disabled"
+      :for="uid"
     >
-      <input
-        ref="input"
-        v-bind="$attrs"
-        v-on="inputListeners"
-        class="bx--checkbox"
-        type="checkbox"
-        :checked="isChecked === true"
-        :aria-checked="`${isChecked}`"
-        @focus="onFocus"
-        @blur="onBlur"
-        :value="value"
-      />
-      {{ label }}
+      <span class="bx--checkbox-label-text" :class="{ 'bx--visually-hidden': hideLabel }">
+        {{ label }}
+      </span>
     </label>
   </div>
 </template>
 
 <script>
 import checkMixin from '../../mixins/check-mixin';
+import uidMixin from '../../mixins/uid-mixin';
 
 export default {
   name: 'CvCheckbox',
-  mixins: [checkMixin],
+  mixins: [checkMixin, uidMixin],
   inheritAttrs: false,
   props: {
+    hideLabel: Boolean,
     label: String,
     mixed: Boolean,
     formItem: { type: Boolean, default: true },

diff --git a/storybook/stories/cv-checkbox-story.js b/storybook/stories/cv-checkbox-story.js
@@ -51,13 +51,19 @@ let preKnobs = {
     group: 'attr',
     value: `@change="actionChange"`,
   },
+  hideLabel: {
+    group: 'attr',
+    type: boolean,
+    config: ['hide-label', false], // consts.CONFIG], // fails when used with number in storybook 4.1.4
+    prop: 'hide-label',
+  },
 };
 
 let variants = [
   { name: 'default', excludes: ['vModel', 'events'] },
   { name: 'minimal', includes: ['label', 'value'] },
-  { name: 'events', includes: ['label', 'value', 'events'] },
-  { name: 'vModel', includes: ['label', 'value', 'vModel'] },
+  { name: 'events', includes: ['label', 'hideLabel', 'value', 'events'] },
+  { name: 'vModel', includes: ['label', 'hideLabel', 'value', 'vModel'] },
 ];
 
 let storySet = knobsHelper.getStorySet(variants, preKnobs);