@carbon/vue 3.0.11 → 3.0.13

package/src/components/CvNotification/CvInlineNotification.vue

@@ -15,10 +15,14 @@
       />
       <div :class="`${carbonPrefix}--inline-notification__text-wrapper`">
         <p :class="`${carbonPrefix}--inline-notification__title`">
-          {{ title }}
+          <slot name="title">
+            {{ title }}
+          </slot>
         </p>
         <div :class="`${carbonPrefix}--inline-notification__subtitle`">
-          {{ subTitle }}
+          <slot name="subtitle">
+            {{ subTitle }}
+          </slot>
         </div>
       </div>
     </div>
@@ -35,6 +39,7 @@
       {{ actionLabel }}
     </button>
     <button
+      v-if="!hideCloseButton"
       type="button"
       :aria-label="closeAriaLabel"
       :class="`${carbonPrefix}--inline-notification__close-button`"
@@ -66,7 +71,7 @@ export default {
       type: String,
       default: '',
     },
-    /** Notification sub title (supports HTML) */
+    /** Notification subtitle */
     subTitle: {
       type: String,
       default: '',
@@ -86,6 +91,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    /** Set to true to hide the code button */
+    hideCloseButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: [
     /** Emitted on clicking the action button */

package/src/components/CvNotification/CvInlineNotificationTemplate.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title,  Primary, Stories } from '@storybook/addon-docs';
+
+<Meta isTemplate />
+
+<Title />
+
+Migration notes:
+
+- **Breaking**. The `subTitle` property no longer renders html. Please use the `subtitle` slot instead.
+- The `title` content can now be provided in the `title` slot.
+
+<Primary />
+
+<Controls />
+
+<Stories />

package/src/components/CvRadioButton/CvRadioButton.stories.js

@@ -38,11 +38,28 @@ export default {
       type: 'boolean',
       table: {
         type: { summary: 'boolean' },
-        category: 'props',
+        category: 'CvRadioGroup - props',
       },
       description:
         'Property of CvRadioGroup component - stacks inside radio components vertically',
     },
+    legendText: {
+      control: 'text',
+      table: {
+        type: { summary: 'text' },
+        category: 'CvRadioGroup - props',
+      },
+      description: 'Property of CvRadioGroup component',
+    },
+    hideLegend: {
+      type: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        category: 'CvRadioGroup - props',
+      },
+      description:
+        'Property of CvRadioGroup component - makes the legend visually hidden',
+    },
   },
 };
 
@@ -105,6 +122,8 @@ const Template = (args, { argTypes }) => {
 export const Default = Template.bind({});
 Default.args = {
   vertical: false,
+  legendText: 'CvRadioGroup legend',
+  hideLegend: false,
 };
 Default.parameters = storyParametersObject(
   DefaultStoryParameters,

package/src/components/CvRadioButton/CvRadioButton.vue

@@ -18,10 +18,7 @@
     <!-- symbol causes problem in codepen? -->
     <label :for="cvId" :class="`${carbonPrefix}--radio-button__label`">
       <span :class="`${carbonPrefix}--radio-button__appearance`"></span>
-      <span
-        v-if="label"
-        :class="{ [`${carbonPrefix}--visually-hidden`]: hideLabel }"
-      >
+      <span :class="{ [`${carbonPrefix}--visually-hidden`]: hideLabel }">
         {{ label }}
       </span>
     </label>
@@ -35,7 +32,12 @@ import { useCvId, propsCvId, useMethods, useRadio } from '../../use';
 const props = defineProps({
   modelValue: { type: String, default: undefined },
   checked: Boolean,
-  label: { type: String, default: undefined },
+  label: {
+    type: String,
+    default: null,
+    required: true,
+    validator: label => !!label.length,
+  },
   value: { type: String, required: true },
   hideLabel: Boolean,
   labelLeft: Boolean,

package/src/components/CvRadioButton/CvRadioGroup.vue

@@ -1,13 +1,22 @@
 <template>
   <div :class="`cv-radio-group ${carbonPrefix}--form-item`">
-    <div
+    <fieldset
       :class="[
         `${carbonPrefix}--radio-button-group`,
         { [`${carbonPrefix}--radio-button-group--vertical`]: vertical },
       ]"
     >
+      <legend
+        :class="[
+          `${carbonPrefix}--label`,
+          { [`${carbonPrefix}--visually-hidden`]: hideLegend },
+        ]"
+        dir="auto"
+      >
+        {{ legendText }}
+      </legend>
       <slot></slot>
-    </div>
+    </fieldset>
   </div>
 </template>
 
@@ -17,6 +26,13 @@ import { carbonPrefix } from '../../global/settings';
 
 defineProps({
   vertical: Boolean,
+  legendText: {
+    type: String,
+    default: null,
+    required: true,
+    validator: legend => !!legend.length,
+  },
+  hideLegend: Boolean,
 });
 
 const emit = defineEmits(['change']);

package/src/components/CvRadioButton/__tests__/__snapshots__/CvRadioButton.spec.js.snap

@@ -12,16 +12,18 @@ exports[`CvRadioButton matches render with right label 1`] = `<div class="cv-rad
 
 exports[`CvRadioGroup matches render when horizontal 1`] = `
 <div class="cv-radio-group bx--form-item">
-  <div class="bx--radio-button-group">
+  <fieldset class="bx--radio-button-group">
+    <legend class="bx--label" dir="auto">test legend</legend>
     <div class="cv-radio-button-stub">RadioButtonStub</div>
-  </div>
+  </fieldset>
 </div>
 `;
 
 exports[`CvRadioGroup matches render when vertical 1`] = `
 <div class="cv-radio-group bx--form-item">
-  <div class="bx--radio-button-group bx--radio-button-group--vertical">
+  <fieldset class="bx--radio-button-group bx--radio-button-group--vertical">
+    <legend class="bx--label" dir="auto">test legend</legend>
     <div class="cv-radio-button-stub">RadioButtonStub</div>
-  </div>
+  </fieldset>
 </div>
 `;

package/src/components/CvSearch/CvSearch.vue

@@ -1,7 +1,7 @@
 <template>
   <component
     :is="formItem ? 'div' : CvEmpty"
-    :class="`cv-search ${carbonPrefix}--form-item`"
+    :class="[`cv-search`, `${carbonPrefix}--form-item`, $attrs.class]"
   >
     <div
       ref="elSearch"

package/src/components/CvTabs/CvTabs.vue

@@ -71,7 +71,7 @@
             role="tab"
             :aria-controls="tab.uid"
             :aria-disabled="disabledTabs.has(tab.uid) || null"
-            :aria-selected="selectedId === tab.uid"
+            :aria-selected="`${selectedId === tab.uid}`"
             :tabindex="selectedId === tab.uid ? 0 : -1"
             type="button"
             @click="onTabClick(tab.uid)"
@@ -187,7 +187,7 @@ function maybeSelectFirstTab() {
   if (index > -1) selectedId.value = tabs.value[index].uid;
 }
 onMounted(maybeSelectFirstTab);
-watch(tabs, maybeSelectFirstTab);
+watch(tabs, maybeSelectFirstTab, { deep: true });
 watch(selectedId, () => {
   nextTick(() => {
     doTabClick(selectedId.value);

package/src/components/CvAccordion/CvAccordion.stories.js

@@ -1,55 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { CvAccordion, CvAccordionItem } from '.';
-import { alignConsts, sizeConsts } from './consts';
-
-import {
-  sbCompPrefix,
-  storyParametersObject,
-} from '../../global/storybook-utils';
-
-export default {
-  title: `${sbCompPrefix}/CvAccordion`,
-  component: CvAccordion,
-  argTypes: {
-    align: {
-      control: { type: 'select', options: Object.keys(alignConsts.$labels) },
-    },
-    size: {
-      control: { type: 'select', options: Object.keys(sizeConsts.$labels) },
-    },
-  },
-};
-
-// <cv-button @click="onClick" v-bind="newArgs">{{defaultSlot}}</cv-button>
-const template = `<cv-accordion @change="onChange" v-bind="args">
-  <cv-accordion-item v-for="n in 4" :key="\`acc-item-\${n}\`" :id="n % 2 ? \`acc-item-\${n}\` : ''">
-    <template v-slot:title>Section {{n}} title </template>
-    <template v-slot:content>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-    </template>
-  </cv-accordion-item>
-</cv-accordion>`;
-const Template = (args, { argTypes }) => {
-  // eslint-disable-next-line no-param-reassign
-  args = {
-    ...args,
-    align: alignConsts[alignConsts.$labels[args.align]],
-    size: sizeConsts[sizeConsts.$labels[args.size]],
-  };
-  return {
-    props: Object.keys(argTypes),
-    components: { CvAccordion, CvAccordionItem },
-    setup() {
-      return { args, onChange: action('change') };
-    },
-    template,
-  };
-};
-
-export const Default = Template.bind({});
-Default.args = {};
-Default.parameters = storyParametersObject(
-  Default.parameters,
-  template,
-  Default.args
-);