@carbon/vue 3.0.8-alpha.0 → 3.0.9

package/src/components/CvTag/CvTag.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="skeleton" :class="tagClasses" />
+  <div v-if="skeleton" :class="tagClasses"></div>
   <div v-else :class="tagClasses" role="listitem" :title="title">
     <span :class="`${carbonPrefix}--tag__label`">
       {{ label }}
@@ -56,6 +56,10 @@ export default {
      * skeleton used when loading
      */
     skeleton: Boolean,
+    /**
+     * tag size small
+     */
+    small: Boolean,
   },
   emits: [
     /**
@@ -69,14 +73,15 @@ export default {
     });
 
     const tagClasses = computed(() => {
-      const classes = [
-        `${carbonPrefix}--tag`,
-        `${carbonPrefix}--tag--${props.kind}`,
-      ];
+      const classes = [`${carbonPrefix}--tag`];
+
+      if (props.small) classes.push(`${carbonPrefix}--tag--sm`);
 
       if (props.skeleton) {
         classes.push(`${carbonPrefix}--skeleton`);
       } else {
+        classes.push(`${carbonPrefix}--tag--${props.kind}`);
+
         if (props.filter) {
           classes.push(`${carbonPrefix}--tag--filter`);
         }

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

@@ -0,0 +1,39 @@
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import CvTagSkeleton from './CvTagSkeleton.vue';
+
+export default {
+  title: `${sbCompPrefix}/CvTagSkeleton`,
+  component: CvTagSkeleton,
+};
+
+const template = `<cv-tag-skeleton v-bind="args"></cv-tag-skeleton>`;
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { CvTagSkeleton },
+    template,
+    setup() {
+      return { args };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+export const Small = Template.bind({});
+Small.args = {
+  small: true,
+};
+Small.parameters = storyParametersObject(
+  Small.parameters,
+  template,
+  Small.args
+);

package/src/components/CvTag/CvTagSkeleton.vue

@@ -0,0 +1,20 @@
+<template>
+  <CvTag skeleton :small="small" :label="''" />
+</template>
+
+<script>
+import CvTag from './CvTag.vue';
+
+export default {
+  name: 'CvTagSkeleton',
+  components: { CvTag },
+  props: {
+    /**
+     * tag size small
+     */
+    small: {
+      type: Boolean,
+    },
+  },
+};
+</script>

package/src/components/CvTag/index.js

@@ -1,5 +1,6 @@
 import CvTag from './CvTag.vue';
 import CvTagConsts from './consts';
+import CvTagSkeleton from './CvTagSkeleton.vue';
 
-export { CvTag, CvTagConsts };
+export { CvTag, CvTagConsts, CvTagSkeleton };
 export default CvTag;

package/src/use/useRadio.js

@@ -13,7 +13,6 @@ export const useRadio = (props, emit) => {
 
   const onChange = () => {
     onRadioItemChange(props.value); // emit to parent
-
     emit('update:modelValue', props.value); // emit for v-model
     emit('change', props.value);
   };