@carbon/vue 2.42.0 → 2.44.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-toggle/cv-toggle.vue

@@ -7,7 +7,6 @@
       type="checkbox"
       :id="uid"
       :checked="isChecked === true"
-      :aria-checked="`${isChecked}`"
       :value="value"
       ref="input"
     />

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) },
   },

package/src/thumbnails/inline-notification.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>inline-notification</title>
+    <defs>
+        <circle id="path-1" cx="5" cy="5" r="4.375"></circle>
+        <polygon id="path-3" points="4.375 6.71875 2.8125 5.15625 3.309375 4.6875 4.375 5.734375 6.690625 3.4375 7.1875 3.93125"></polygon>
+    </defs>
+    <g id="inline-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="77" width="200" height="26"></rect>
+        <g id="icon/status/checkmark-filled/16" transform="translate(69.000000, 85.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="icon-color" fill="#24A148" xlink:href="#path-1"></use>
+            <mask id="mask-4" fill="white">
+                <use xlink:href="#path-3"></use>
+            </mask>
+            <use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
+        </g>
+        <rect id="Path-Copy-2" fill="#24A148" x="60" y="77" width="2" height="26"></rect>
+        <rect id="Rectangle-Copy-14" fill="#F4F4F4" x="85" y="88" width="100.088235" height="4"></rect>
+    </g>
+</svg>

package/src/thumbnails/skeleton-text.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>skeleton-text</title>
+    <defs>
+        <linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#C6C6C6" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="skeleton-text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#E0E0E0" x="56" y="82" width="208" height="16"></rect>
+        <rect id="Rectangle" fill="#C6C6C6" x="56" y="82" width="156" height="16"></rect>
+        <rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(215.500000, 90.000000) scale(-1, 1) translate(-215.500000, -90.000000) " x="212" y="82" width="7" height="16"></rect>
+    </g>
+</svg>

package/src/thumbnails/toast-notification.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>toast-notification</title>
+    <defs>
+        <circle id="path-1" cx="6.125" cy="6.125" r="6.125"></circle>
+        <polygon id="path-3" points="3.00668244 -0.342156092 3.99105744 -0.342156092 3.99105744 7.33596891 3.00668244 7.33596891"></polygon>
+    </defs>
+    <g id="toast-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="56" width="200" height="68"></rect>
+        <rect id="Path-Copy-2" fill="#DA1E28" x="60" y="56" width="3" height="68"></rect>
+        <g id="Group" transform="translate(73.000000, 68.000000)">
+            <g id="Group" transform="translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000) ">
+                <g id="error--filled" transform="translate(0.875000, 0.875000)">
+                    <g id="icon-2">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <use id="icon-color" fill="#DA1E28" xlink:href="#path-1"></use>
+                    </g>
+                    <g id="icon-1" transform="translate(2.625000, 2.625000)">
+                        <mask id="mask-4" fill="white">
+                            <use xlink:href="#path-3"></use>
+                        </mask>
+                        <use id="icon-color" fill="#000000" transform="translate(3.498870, 3.496906) rotate(-45.000000) translate(-3.498870, -3.496906) " xlink:href="#path-3"></use>
+                    </g>
+                </g>
+                <rect id="transparent-rectangle" x="0" y="0" width="14" height="14"></rect>
+            </g>
+        </g>
+        <rect id="Rectangle-Copy-14" fill="#F4F4F4" x="95" y="72" width="71.1191279" height="5"></rect>
+        <rect id="Rectangle-Copy-23" fill="#E0E0E0" x="95" y="105" width="93.8444444" height="5"></rect>
+        <rect id="Rectangle-Copy-24" fill="#E0E0E0" x="95" y="82" width="123" height="5"></rect>
+    </g>
+</svg>