feat: update v2 radio button to 1030 (#1171)

* feat: update v2 radio button to 1030 * chore: fix snapshot Co-authored-by: Lee Chase <lee.chase@uk.ibm.com>
carbon-design-system · Apr 15, 2021 · a9eb378 · a9eb378
1 parent f924de1
commit a9eb378
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 20 deletions.
diff --git a/packages/core/__tests__/__snapshots__/cv-radio-button.test.js.snap b/packages/core/__tests__/__snapshots__/cv-radio-button.test.js.snap
@@ -1,33 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CvRadioButton matches render when checked 1`] = `
-<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" type="radio" class="bx--radio-button" value=""> <label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span>
-    test label
-  </label></div>
+<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" type="radio" class="bx--radio-button" value=""> <label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span> <span class="">
+      test label
+    </span></label></div>
 `;
 
 exports[`CvRadioButton matches render when modelValue is equal to value 1`] = `
-<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" type="radio" class="bx--radio-button" value="test value"> <label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span>
-    test label
-  </label></div>
+<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" type="radio" class="bx--radio-button" value="test value"> <label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span> <span class="">
+      test label
+    </span></label></div>
 `;
 
 exports[`CvRadioButton matches render when modelValue is not equal to value 1`] = `
-<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" type="radio" class="bx--radio-button" value="test value"> <label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span>
-    test label
-  </label></div>
+<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" type="radio" class="bx--radio-button" value="test value"> <label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span> <span class="">
+      test label
+    </span></label></div>
 `;
 
 exports[`CvRadioButton matches render with left label 1`] = `
-<div class="cv-radio-button bx--radio-button-wrapper bx--radio-button-wrapper--label-left"><input id="1" type="radio" class="bx--radio-button" value=""> <label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span>
-    left label
-  </label></div>
+<div class="cv-radio-button bx--radio-button-wrapper bx--radio-button-wrapper--label-left"><input id="1" type="radio" class="bx--radio-button" value=""> <label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span> <span class="">
+      left label
+    </span></label></div>
 `;
 
 exports[`CvRadioButton matches render with right label 1`] = `
-<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" type="radio" class="bx--radio-button" value=""> <label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span>
-    right label
-  </label></div>
+<div class="cv-radio-button bx--radio-button-wrapper"><input id="1" type="radio" class="bx--radio-button" value=""> <label for="1" class="bx--radio-button__label"><span class="bx--radio-button__appearance"></span> <span class="">
+      right label
+    </span></label></div>
 `;
 
 exports[`CvRadioGroup matches render when horizontal 1`] = `

diff --git a/packages/core/src/components/cv-radio-button/cv-radio-button-notes.md b/packages/core/src/components/cv-radio-button/cv-radio-button-notes.md
@@ -41,7 +41,9 @@ NOTE 2: radioVal is the value of the radio button to be checked.
 ## Attributes
 
 - checked: true | false
+- hideLabel: true | false do not show the label
 - label: radio-button label
+- labelLeft: true | false position label on left
 - value:
 
 ## Events

diff --git a/packages/core/src/components/cv-radio-button/cv-radio-button.vue b/packages/core/src/components/cv-radio-button/cv-radio-button.vue
@@ -18,7 +18,9 @@
     <!-- symbol causes problem in codepen? -->
     <label :for="uid" :class="`${carbonPrefix}--radio-button__label`">
       <span :class="`${carbonPrefix}--radio-button__appearance`"></span>
-      {{ label }}
+      <span v-if="label" :class="{ [`${carbonPrefix}--visually-hidden`]: hideLabel }">
+        {{ label }}
+      </span>
     </label>
   </div>
 </template>
@@ -31,6 +33,7 @@ export default {
   inheritAttrs: false,
   mixins: [uidMixin, radioMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
   props: {
+    hideLabel: Boolean,
     labelLeft: Boolean,
   },
 };

diff --git a/storybook/stories/cv-radio-button-story.js b/storybook/stories/cv-radio-button-story.js
@@ -26,18 +26,24 @@ const preKnobs = {
     config: ['radio-2:disabled', true], // consts.CONFIG],
     prop: 'disabled',
   },
-  vertical: {
-    group: 'attr',
+  hideLabel: {
+    group: 'each',
     type: boolean,
-    config: ['vertical', false], // consts.CONFIG],
-    prop: 'vertical',
+    config: ['hideLabel', false], // consts.CONFIG],
+    prop: 'hide-label',
   },
   labelLeft: {
     group: 'each',
     type: boolean,
     config: ['label left', false], // consts.CONFIG],
     prop: 'label-left',
   },
+  vertical: {
+    group: 'attr',
+    type: boolean,
+    config: ['vertical', false], // consts.CONFIG],
+    prop: 'vertical',
+  },
   vModel: {
     group: 'each',
     value: `v-model="radioVal"`,