@carbon/vue 3.0.19 → 3.0.20

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "@carbon/vue",
-  "version": "3.0.18",
+  "version": "3.0.19",
   "contributions": {
     "html": {
       "description-markup": "markdown",
@@ -4728,6 +4728,7 @@
           "attributes": [
             {
               "name": "clearAriaLabel",
+              "description": "aria label to use for the x icon for the filter tag",
               "value": {
                 "kind": "expression",
                 "type": "string"
@@ -4762,7 +4763,7 @@
             },
             {
               "name": "filter",
-              "description": "If filter is true, the CvTag will include a remove button on the right side, which on a click, will emit the 'remove' event.",
+              "description": "If filter is true, the CvTag will include a remove button on the right side, which on a click, will emit the\n'remove' event.",
               "value": {
                 "kind": "expression",
                 "type": "boolean"
@@ -4784,6 +4785,15 @@
                 "kind": "expression",
                 "type": "boolean"
               }
+            },
+            {
+              "name": "renderIcon",
+              "description": "Optional prop to render a custom icon. \\@carbon/icons-vue icon, href, svg or symbol",
+              "value": {
+                "kind": "expression",
+                "type": "string|object"
+              },
+              "default": "undefined"
             }
           ],
           "events": [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "license": "Apache-2.0",
-  "version": "3.0.19",
+  "version": "3.0.20",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
   "packageManager": "yarn@3.2.0",
   "main": "dist/carbon-vue-3.umd.min.js",
@@ -177,6 +177,5 @@
     "type": "git",
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
   },
-  "sideEffects": true,
-  "gitHead": "c0f3985156cde83b216fd96f56c000c56b561ac4"
+  "sideEffects": true
 }

package/src/components/CvDropdown/CvDropdown.vue

@@ -121,12 +121,22 @@
           </slot>
         </ul>
       </div>
-      <div v-if="data.isInvalid" :class="`${carbonPrefix}--form-requirement`">
+      <p
+        v-if="data.isInvalid"
+        :class="`${carbonPrefix}--form-requirement`"
+        role="alert"
+        aria-atomic="true"
+      >
         <slot name="invalid-message">{{ invalidMessage }}</slot>
-      </div>
-      <div v-else-if="isWarning" :class="`${carbonPrefix}--form-requirement`">
+      </p>
+      <p
+        v-else-if="isWarning"
+        :class="`${carbonPrefix}--form-requirement`"
+        role="alert"
+        aria-atomic="true"
+      >
         <slot name="warning-message">{{ warningMessage }}</slot>
-      </div>
+      </p>
       <div
         v-else-if="data.isHelper"
         :aria-disabled="disabled || null"

package/src/components/CvTag/CvTag.stories.js

@@ -5,17 +5,39 @@ import {
   sbCompPrefix,
   storyParametersObject,
 } from '../../global/storybook-utils';
+import {
+  DataDefinition20,
+  Bee20,
+  Carbon20,
+  Watson20,
+  IbmCloud20,
+  EdtLoop20,
+  IbmSecurity20,
+} from '@carbon/icons-vue';
+
+const icons = {
+  DataDefinition20,
+  Bee20,
+  Carbon20,
+  Watson20,
+  IbmCloud20,
+  EdtLoop20,
+  IbmSecurity20,
+  undefined,
+};
 
 export default {
   title: `${sbCompPrefix}/CvTag`,
   component: CvTag,
   argTypes: {
     kind: { control: 'select', options: tagKinds },
+    renderIcon: { control: { type: 'select', options: Object.keys(icons) } },
   },
 };
 
 const template = `<cv-tag @remove="onRemove" v-bind="args" />`;
-const Template = (args, { argTypes }) => {
+const Template = (argsIn, { argTypes }) => {
+  let args = { ...argsIn, renderIcon: icons[argsIn.renderIcon] };
   return {
     props: Object.keys(argTypes),
     components: { CvTag },
@@ -31,9 +53,14 @@ const Template = (args, { argTypes }) => {
 
 export const Default = Template.bind({});
 Default.args = {
-  label: 'This is a tag',
+  label: 'Hugo Award winner',
   filter: false,
 };
+Default.parameters = {
+  controls: {
+    exclude: ['remove'],
+  },
+};
 Default.parameters = storyParametersObject(
   Default.parameters,
   template,
@@ -42,8 +69,14 @@ Default.parameters = storyParametersObject(
 
 export const Filter = Template.bind({});
 Filter.args = {
-  label: 'This is a tag',
+  label: 'Filter House',
   filter: true,
+  kind: 'high-contrast',
+};
+Filter.parameters = {
+  controls: {
+    exclude: ['remove'],
+  },
 };
 Filter.parameters = storyParametersObject(
   Filter.parameters,
@@ -56,8 +89,29 @@ Skeleton.args = {
   skeleton: true,
   label: '',
 };
+Skeleton.parameters = {
+  controls: {
+    include: ['small'],
+  },
+};
 Skeleton.parameters = storyParametersObject(
   Skeleton.parameters,
   template,
   Skeleton.args
 );
+
+export const TagIcon = Template.bind({});
+TagIcon.args = {
+  renderIcon: 'DataDefinition20',
+  label: 'Steampunk',
+};
+TagIcon.parameters = {
+  controls: {
+    include: ['renderIcon'],
+  },
+};
+TagIcon.parameters = storyParametersObject(
+  TagIcon.parameters,
+  template,
+  TagIcon.args
+);

package/src/components/CvTag/CvTag.vue

@@ -1,6 +1,11 @@
 <template>
   <div v-if="skeleton" :class="tagClasses"></div>
   <div v-else :class="tagClasses" role="listitem" :title="title">
+    <cv-svg
+      v-if="!skeleton && renderIcon"
+      :svg="renderIcon"
+      :class="`${carbonPrefix}--tag__custom-icon`"
+    />
     <span :class="`${carbonPrefix}--tag__label`">
       {{ label }}
     </span>
@@ -21,23 +26,19 @@ import { computed } from 'vue';
 import { carbonPrefix } from '../../global/settings';
 import { tagKinds } from './consts';
 import Close16 from '@carbon/icons-vue/es/close/16';
+import CvSvg from '../CvSvg/_CvSvg.vue';
 
 export default {
   name: 'CvTag',
-  components: { Close16 },
+  components: { CvSvg, Close16 },
   props: {
+    /** aria label to use for the x icon for the filter tag */
     clearAriaLabel: { type: String, default: 'Clear filter' },
-    /**
-     * disabled by property or if skeleton
-     */
+    /** disabled by property or if skeleton */
     disabled: Boolean,
-    /**
-     * label to be used in the CvTag component
-     */
+    /** label to be used in the CvTag component */
     label: { type: String, required: true },
-    /**
-     * kind of the CvTag
-     */
+    /** kind of the CvTag */
     kind: {
       type: String,
       default: undefined,
@@ -46,20 +47,22 @@ export default {
       },
     },
     /**
-     * If filter is true, the CvTag will include a remove button on the right side, which on a click, will emit the 'remove' event.
+     * If filter is true, the CvTag will include a remove button on the right side, which on a click, will emit the
+     * 'remove' event.
      */
     filter: {
       type: Boolean,
       default: false,
     },
-    /**
-     * skeleton used when loading
-     */
+    /** skeleton used when loading */
     skeleton: Boolean,
-    /**
-     * tag size small
-     */
+    /** tag size small */
     small: Boolean,
+    /** Optional prop to render a custom icon. \@carbon/icons-vue icon, href, svg or symbol */
+    renderIcon: {
+      type: [String, Object],
+      default: undefined,
+    },
   },
   emits: [
     /**

package/src/index.js

@@ -43,6 +43,8 @@ export default {
     }
   },
 };
+
+// AUTO-GENERATED EXPORTS - DO NOT EDIT BELOW
 export { default as CvAccordion } from './components/CvAccordion/CvAccordion.vue';
 export { default as CvAccordionItem } from './components/CvAccordion/CvAccordionItem.vue';
 export { default as CvAccordionSkeleton } from './components/CvAccordion/CvAccordionSkeleton.vue';