@carbon/vue 2.40.0 → 2.43.1

package/src/components/cv-number-input/cv-number-input.vue

@@ -1,7 +1,6 @@
 <template>
   <cv-wrapper :tag-type="formItem ? 'div' : ''" class="cv-number-input" :class="`${carbonPrefix}--form-item`">
     <div
-      data-numberinput
       :class="[
         `${carbonPrefix}--number`,
         {
@@ -14,20 +13,12 @@
       :data-invalid="isInvalid"
     >
       <label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
-      <div :class="`${carbonPrefix}--form__helper-text`" v-if="isHelper && mobile">
-        <slot name="helper-text">{{ helperText }}</slot>
-      </div>
-      <div :class="`${carbonPrefix}--number__input-wrapper`">
-        <button
-          v-if="mobile"
-          :class="`${carbonPrefix}--number__control-btn down-icon`"
-          @click="doDown"
-          type="button"
-          :aria-label="ariaLabelForDownButton"
-          :disabled="disabled"
-        >
-          <Subtract16 />
-        </button>
+      <div
+        :class="[
+          `${carbonPrefix}--number__input-wrapper`,
+          { [`${carbonPrefix}--number__input-wrapper--warning`]: isWarn },
+        ]"
+      >
         <input
           :data-invalid="isInvalid"
           :id="uid"
@@ -41,8 +32,9 @@
           :max="max"
           ref="input"
         />
-        <WarningFilled16 v-if="isInvalid && !mobile" :class="`${carbonPrefix}--number__invalid`" />
-        <div :class="`${carbonPrefix}--number__controls`" v-if="!mobile">
+        <WarningFilled16 v-if="isInvalid" :class="iconClasses" />
+        <WarningAltFilled16 v-if="isWarn && !isInvalid" :class="iconClasses" />
+        <div :class="`${carbonPrefix}--number__controls`">
           <button
             :class="`${carbonPrefix}--number__control-btn down-icon`"
             @click="doDown"
@@ -68,21 +60,14 @@
           </button>
           <div :class="`${carbonPrefix}--number__rule-divider`" />
         </div>
-        <button
-          v-else
-          :class="`${carbonPrefix}--number__control-btn up-icon`"
-          @click="doUp"
-          type="button"
-          :aria-label="ariaLabelForUpButton"
-          :disabled="disabled"
-        >
-          <Add16 />
-        </button>
       </div>
       <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid">
         <slot name="invalid-message">{{ invalidMessage }}</slot>
       </div>
-      <div :class="`${carbonPrefix}--form__helper-text`" v-if="!isInvalid && isHelper && !mobile">
+      <div :class="`${carbonPrefix}--form-requirement`" v-if="isWarn && !isInvalid">
+        <slot name="warn-text">{{ warnText }}</slot>
+      </div>
+      <div :class="`${carbonPrefix}--form__helper-text`" v-if="!(isInvalid || isWarn) && isHelper">
         <slot name="helper-text">{{ helperText }}</slot>
       </div>
     </div>
@@ -94,12 +79,13 @@ import { uidMixin, themeMixin, carbonPrefixMixin, methodsMixin } from '../../mix
 import Add16 from '@carbon/icons-vue/es/add/16';
 import Subtract16 from '@carbon/icons-vue/es/subtract/16';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
+import WarningAltFilled16 from '@carbon/icons-vue/es/warning--alt--filled/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
 
 export default {
   name: 'CvNumberInput',
   mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
-  components: { Add16, Subtract16, WarningFilled16, CvWrapper },
+  components: { Add16, Subtract16, WarningFilled16, WarningAltFilled16, CvWrapper },
   inheritAttrs: false,
   props: {
     disabled: Boolean,
@@ -111,6 +97,7 @@ export default {
     invalid: /* deprecate */ {
       type: Boolean,
       default: undefined,
+      deprecated: true,
       validator(val) {
         if (val !== undefined && process.env.NODE_ENV === 'development') {
           console.warn('CvNumberInput: invalid prop deprecated in favour of invalidMessage');
@@ -123,13 +110,25 @@ export default {
     min: { type: [String, Number], default: undefined },
     max: { type: [String, Number], default: undefined },
     step: { type: [String, Number], default: undefined },
-    mobile: Boolean,
+    mobile: /* deprecate */ {
+      type: Boolean,
+      default: undefined,
+      deprecated: true,
+      validator(val) {
+        if (val !== undefined) {
+          console.warn('CvNumberInput: mobile prop deprecated as no longer different to standard number input.');
+        }
+        return true;
+      },
+    },
+    warnText: { type: String, default: undefined },
   },
   data() {
     return {
       internalValue: 0,
       isHelper: false,
       isInvalid: false,
+      isWarn: false,
     };
   },
   mounted() {
@@ -159,6 +158,14 @@ export default {
         input: ev => this.onInput(ev.target.value),
       });
     },
+    iconClasses() {
+      const classes = [];
+      (this.isInvalid || this.isWarn) && classes.push(`${this.carbonPrefix}--number__invalid`);
+      this.isWarn && !this.isInvalid && classes.push(`${this.carbonPrefix}--number__invalid--warning`);
+      this.readOnly && classes.push(`${this.carbonPrefix}--number__readonly-icon`);
+
+      return classes.join(' ');
+    },
   },
   methods: {
     onInput(val) {
@@ -168,6 +175,7 @@ export default {
     checkSlots() {
       // NOTE: this.$slots is not reactive so needs to be managed on updated
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
+      this.isWarn = !!(this.$slots['warn-text'] || (this.warnText && this.warnText.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
     doUp() {

package/src/components/cv-overflow-menu/cv-overflow-menu.vue

@@ -48,7 +48,7 @@
         class="cv-overflow-menu__before-content"
         ref="beforeContent"
         tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px;"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px"
         @focus="focusBeforeContent"
       />
       <ul :class="`${carbonPrefix}--overflow-menu-options__content`">
@@ -58,7 +58,7 @@
         class="cv-overflow-menu__after-content"
         ref="afterContent"
         tabindex="0"
-        style="position: absolute; height: 1px; width: 1px; left: -9999px;"
+        style="position: absolute; height: 1px; width: 1px; left: -9999px"
         @focus="focusAfterContent"
       />
     </div>
@@ -87,7 +87,7 @@ export default {
     tipPosition: {
       type: String,
       default: 'right',
-      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/components/cv-search/cv-search.vue

@@ -1,6 +1,7 @@
 <template>
   <cv-wrapper :tag-type="formItem ? 'div' : ''" :class="`cv-search ${carbonPrefix}--form-item`">
     <div
+      :aria-labelledby="uid"
       :class="[
         `${carbonPrefix}--search`,
         {
@@ -14,6 +15,21 @@
       role="search"
       ref="search"
     >
+      <button
+        type="button"
+        v-if="isToolbarKind"
+        :class="`${carbonPrefix}--toolbar-search__btn`"
+        :aria-label="toolbarAriaLabel"
+        @click="toggleActive(true)"
+        @blur="checkFocus"
+      >
+        <component :is="icon" :class="`${carbonPrefix}--search-magnifier`" />
+      </button>
+
+      <div v-if="!isToolbarKind" :class="`${carbonPrefix}--search-magnifier`">
+        <Search20 :class="`${carbonPrefix}--search-magnifier-icon`" />
+      </div>
+
       <label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
 
       <input
@@ -23,24 +39,12 @@
         v-model="internalValue"
         v-on="inputListeners"
         type="text"
-        role="search"
         ref="input"
         :placeholder="placeholder"
         :aria-labelledby="uid"
         @blur="checkFocus"
       />
 
-      <button
-        type="button"
-        v-if="isToolbarKind"
-        :class="`${carbonPrefix}--toolbar-search__btn`"
-        :aria-label="toolbarAriaLabel"
-        @click="toggleActive(true)"
-        @blur="checkFocus"
-      >
-        <component :is="icon" :class="`${carbonPrefix}--search-magnifier`" />
-      </button>
-      <component v-if="!isToolbarKind" :is="icon" :class="`${carbonPrefix}--search-magnifier`" />
       <button
         type="button"
         :class="[`${carbonPrefix}--search-close`, { [`${carbonPrefix}--search-close--hidden`]: !clearVisible }]"
@@ -64,7 +68,7 @@ import CvWrapper from '../cv-wrapper/_cv-wrapper';
 export default {
   name: 'CvSearch',
   mixins: [uidMixin, themeMixin, carbonPrefixMixin, methodsMixin({ input: ['blur', 'focus'] })],
-  components: { Close16, CvWrapper },
+  components: { Close16, CvWrapper, Search20 },
   inheritAttrs: false,
   props: {
     clearAriaLabel: { type: String, default: 'Clear search input' },

package/src/components/cv-tabs/cv-tabs-skeleton.vue

@@ -1,23 +1,8 @@
 <template>
-  <div :class="`cv-tabs ${carbonPrefix}--tabs ${carbonPrefix}--skeleton`">
-    <div :class="`${carbonPrefix}--tabs-trigger`">
-      <div :class="`${carbonPrefix}--tabs-trigger-text`">&nbsp;</div>
-      <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z" />
-      </svg>
-    </div>
-    <ul :class="`${carbonPrefix}--tabs__nav ${carbonPrefix}--tabs__nav--hidden`">
-      <li :class="`cv-tab ${carbonPrefix}--tabs__nav-item ${carbonPrefix}--tabs__nav-item--selected`">
-        <div :class="`${carbonPrefix}--tabs__nav-link`">&nbsp;</div>
-      </li>
-      <li :class="`cv-tab ${carbonPrefix}--tabs__nav-item`">
-        <div :class="`${carbonPrefix}--tabs__nav-link`">&nbsp;</div>
-      </li>
-      <li :class="`cv-tab ${carbonPrefix}--tabs__nav-item`">
-        <div :class="`${carbonPrefix}--tabs__nav-link`">&nbsp;</div>
-      </li>
-      <li :class="`cv-tab ${carbonPrefix}--tabs__nav-item`">
-        <div :class="`${carbonPrefix}--tabs__nav-link`">&nbsp;</div>
+  <div :class="`cv-tabs ${carbonPrefix}--tabs ${carbonPrefix}--skeleton ${carbonPrefix}--tabs--scrollable`">
+    <ul :class="`${carbonPrefix}--tabs--scrollable__nav`">
+      <li v-for="index in tabCount" :key="index" :class="`${carbonPrefix}--tabs--scrollable__nav-item`">
+        <div :class="`${carbonPrefix}--tabs__nav-link`"><span></span></div>
       </li>
     </ul>
   </div>
@@ -28,5 +13,8 @@ import { carbonPrefixMixin } from '../../mixins';
 export default {
   name: 'CvTabsSkeleton',
   mixins: [carbonPrefixMixin],
+  props: {
+    tabCount: { type: Number, default: 5 },
+  },
 };
 </script>

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

@@ -196,7 +196,7 @@ export default {
     },
     doScrollIntoView(index) {
       const tab = this.$refs.link[index];
-      const scrollContainer = tab.parentNode ? tab.parentNode.parentNode : null;
+      const scrollContainer = tab && tab.parentNode ? tab.parentNode.parentNode : null;
       let newScrollLeft;
 
       if (tab && scrollContainer) {

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

@@ -12,9 +12,7 @@ export default {
   props: {
     size: {
       type: String,
-      validator(val) {
-        return !val || val == 'sm';
-      },
+      validator: val => ['sm', ''].includes(val),
     },
   },
 };

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-toast-notification/cv-toast-notification.vue

@@ -2,7 +2,7 @@
   <div
     data-notification
     :class="[
-      `cv-notifiation ${carbonPrefix}--toast-notification`,
+      `cv-notification ${carbonPrefix}--toast-notification`,
       `${carbonPrefix}--toast-notification--${kind.toLowerCase()}`,
       { [`${carbonPrefix}--toast-notification--low-contrast`]: lowContrast },
     ]"

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