@carbon/vue 2.42.0 → 2.43.0

package/src/components/cv-tag/cv-tag.vue

@@ -7,7 +7,9 @@
       `cv-tag ${carbonPrefix}--tag`,
       `${carbonPrefix}--tag--${tagKind}`,
       {
+        [`${carbonPrefix}--tag--disabled`]: disabled,
         [`${carbonPrefix}--tag--filter`]: isFilter,
+        [`${carbonPrefix}--tag--interactive`]: hasClickListener,
         [`${carbonPrefix}--tag--${size}`]: size,
       },
     ]"
@@ -19,7 +21,7 @@
     <div v-if="icon && !filter" :class="`${carbonPrefix}--tag__custom-icon`">
       <CvSvg :svg="icon" />
     </div>
-    <span :class="`${carbonPrefix}--tag__label`">{{ label }}</span>
+    <span :class="`${carbonPrefix}--tag__label`" :title="hasClickListener ? label : ''">{{ label }}</span>
     <button
       v-if="isFilter"
       :class="`${carbonPrefix}--tag__close-icon`"
@@ -37,7 +39,7 @@ import Close16 from '@carbon/icons-vue/es/close/16';
 import { carbonPrefixMixin, uidMixin } from '../../mixins';
 import CvSvg from '../cv-svg/_cv-svg';
 
-const tagKinds = [
+export const tagKinds = [
   'red',
   'magenta',
   'purple',
@@ -71,8 +73,7 @@ export default {
     label: { type: String, required: true },
     kind: {
       type: String,
-      default: tagKinds[0],
-      validator(val) {
+      validator: val => {
         if (val === 'filter' && process.env.NODE_ENV === 'development') {
           console.warn('DEPRECARTED: Prefer props.filter (bool)');
           return true;
@@ -86,9 +87,7 @@ export default {
     },
     size: {
       type: String,
-      validator(val) {
-        return !val || val == 'sm';
-      },
+      validator: val => ['sm'].includes(val),
     },
   },
   data() {

package/src/components/cv-tag/index.js

@@ -1,3 +1,4 @@
-import CvTag from './cv-tag';
+import CvTag, { tagKinds } from './cv-tag';
 import CvTagSkeleton from './cv-tag-skeleton';
-export { CvTag, CvTagSkeleton };
+
+export { CvTag, CvTagSkeleton, tagKinds };

package/src/components/cv-tile/_cv-tile-selectable.vue

@@ -1,6 +1,5 @@
 <template>
   <label
-    :data-wibble="`${isChecked}`"
     :for="uid"
     :aria-label="ariaLabel"
     :class="[

package/src/components/cv-tooltip/consts.js

@@ -0,0 +1,2 @@
+export const alignments = ['start', 'center', 'end'];
+export const directions = ['top', 'bottom', 'right', 'left'];

package/src/components/cv-tooltip/cv-definition-tooltip.vue

@@ -19,21 +19,21 @@
 
 <script>
 import { uidMixin, carbonPrefixMixin } from '../../mixins';
+import { alignments, directions } from './consts';
 
 export default {
   name: 'CvDefinitionTooltip',
   mixins: [uidMixin, carbonPrefixMixin],
   props: {
-    alignment: { type: String, default: 'center', validator: val => ['start', 'center', 'end'].includes(val) },
+    alignment: { type: String, default: 'center', validator: val => alignments.includes(val) },
     definition: { type: String, required: true },
     direction: {
       type: String,
       default: 'top',
-      validator(val) {
-        const validValues = ['top', 'left', 'right', 'bottom'];
-        const valid = validValues.includes(val);
+      validator: val => {
+        const valid = directions.includes(val);
         if (!valid) {
-          console.warn(`CVDefinitionTooltip.direction must be one of the following: ${validValues}`);
+          console.warn(`CVDefinitionTooltip.direction must be one of the following: ${directions}`);
         }
         return valid;
       },

package/src/components/cv-tooltip/cv-interactive-tooltip.vue

@@ -46,7 +46,7 @@
         class="cv-interactive-tooltip__before-content"
         ref="beforeContent"
         tabindex="0"
-        style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+        style="position: absolute; left: -9999px; width: 1px; height: 1px"
         @focus="focusBeforeContent"
       />
       <span :class="`${carbonPrefix}--tooltip__caret`"></span>
@@ -57,7 +57,7 @@
         class="cv-interactive-tooltip__after-content"
         ref="afterContent"
         tabindex="0"
-        style="position: absolute; left: -9999px; width: 1px; height: 1px;"
+        style="position: absolute; left: -9999px; width: 1px; height: 1px"
         @focus="focusAfterContent"
       />
     </div>
@@ -67,21 +67,21 @@
 <script>
 import { uidMixin, carbonPrefixMixin } from '../../mixins';
 import Information16 from '@carbon/icons-vue/es/information/16';
+import { alignments, directions } from './consts';
 
 export default {
   name: 'CvInteractiveTooltip',
   mixins: [uidMixin, carbonPrefixMixin],
   components: { Information16 },
   props: {
-    alignment: { type: String, default: 'center', validator: val => ['start', 'center', 'end'].includes(val) },
+    alignment: { type: String, default: 'center', validator: val => alignments.includes(val) },
     direction: {
       type: String,
       default: 'top',
-      validator(val) {
-        const validValues = ['top', 'bottom', 'right', 'left'];
-        const valid = validValues.includes(val);
+      validator: val => {
+        const valid = directions.includes(val);
         if (!valid) {
-          console.warn(`CVInteractiveTooltip.direction must be one of the following: ${validValues}`);
+          console.warn(`CVInteractiveTooltip.direction must be one of the following: ${directions}`);
         }
         return valid;
       },

package/src/components/cv-tooltip/cv-tooltip.vue

@@ -19,21 +19,21 @@
 <script>
 import Information16 from '@carbon/icons-vue/es/information/16';
 import { carbonPrefixMixin } from '../../mixins';
+import { alignments, directions } from './consts';
 
 export default {
   name: 'CvTooltip',
   mixins: [carbonPrefixMixin],
   components: { Information16 },
   props: {
-    alignment: { type: String, default: 'center', validator: val => ['start', 'center', 'end'].includes(val) },
+    alignment: { type: String, default: 'center', validator: val => alignments.includes(val) },
     direction: {
       type: String,
       default: 'top',
-      validator(val) {
-        const validValues = ['top', 'left', 'right', 'bottom'];
-        const valid = validValues.includes(val);
+      validator: val => {
+        const valid = directions.includes(val);
         if (!valid) {
-          console.warn(`CVTooltip.direction must be one of the following: ${validValues}`);
+          console.warn(`CVTooltip.direction must be one of the following: ${directions}`);
         }
         return valid;
       },

package/src/components/cv-tooltip/index.js

@@ -2,4 +2,5 @@ import CvTooltip from './cv-tooltip';
 import CvInteractiveTooltip from './cv-interactive-tooltip';
 import CvDefinitionTooltip from './cv-definition-tooltip';
 
+export { alignments, directions } from './consts';
 export { CvTooltip, CvInteractiveTooltip, CvDefinitionTooltip };

package/src/components/cv-ui-shell/cv-header-global-action.vue

@@ -38,7 +38,7 @@ export default {
     tipPosition: {
       type: String,
       default: 'bottom',
-      validator: val => ['top', 'left', 'bottom', 'right'.includes(val)],
+      validator: val => ['top', 'left', 'bottom', 'right'].includes(val),
     },
     tipAlignment: { type: String, default: 'center', validator: val => ['start', 'center', 'end'].includes(val) },
   },