@carbon/vue 2.27.0-canary.0 → 2.28.0

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

@@ -22,9 +22,9 @@
       :class="{ 'bx--dropdown__wrapper--inline': inline, 'cv-dropdown': !formItem }"
       :style="wrapperStyleOverride"
     >
-      <span v-if="label" :id="`${uid}-label`" class="bx--label" :class="{ 'bx--label--disabled': disabled }">
-        {{ label }}
-      </span>
+      <span v-if="label" :id="`${uid}-label`" class="bx--label" :class="{ 'bx--label--disabled': disabled }">{{
+        label
+      }}</span>
 
       <div
         v-if="!inline && isHelper"
@@ -58,11 +58,14 @@
       >
         <button
           class="bx--dropdown-text"
+          :aria-disabled="disabled"
           aria-haspopup="true"
-          :aria-expanded="open"
+          :aria-expanded="open ? 'true' : 'false'"
           :aria-controls="`${uid}-menu`"
-          :aria-labelledby="`${uid}-label ${uid}-value`"
+          :aria-labelledby="ariaLabeledBy"
+          :disabled="disabled"
           type="button"
+          ref="button"
         >
           <WarningFilled16 v-if="isInvalid && inline" class="bx--dropdown__invalid-icon" />
           <span
@@ -81,7 +84,7 @@
           class="bx--dropdown-list"
           :id="`${uid}-menu`"
           role="menu"
-          :aria-hidden="!open"
+          :aria-hidden="!open ? 'true' : 'false'"
           wh-menu-anchor="left"
           :aria-labelledby="`${uid}-label`"
           ref="droplist"
@@ -161,6 +164,13 @@ export default {
     },
   },
   computed: {
+    ariaLabeledBy() {
+      if (this.label) {
+        return `${this.uid}-label ${this.uid}-value`;
+      } else {
+        return `${this.uid}-value`;
+      }
+    },
     internalCaption() {
       if (this.selectedChild) {
         return this.selectedChild.internalContent;
@@ -276,7 +286,7 @@ export default {
     },
     onEsc() {
       this.open = false;
-      this.$el.focus();
+      this.focus();
     },
     onClick(ev) {
       if (this.disabled) {
@@ -284,7 +294,7 @@ export default {
       } else {
         this.open = !this.open;
         if (!this.open) {
-          this.$el.focus();
+          this.focus();
         }
 
         let target = ev.target;
@@ -300,6 +310,11 @@ export default {
         }
       }
     },
+    focus() {
+      this.$nextTick(() => {
+        this.$refs.button.focus();
+      });
+    },
   },
 };
 </script>

package/src/components/{cv-code-snippet → cv-feedback-button}/_cv-feedback-button.vue

@@ -1,5 +1,6 @@
 <template>
   <button
+    aria-label="ariaLabel"
     type="button"
     class="cv-feedback-button"
     v-bind="$attrs"
@@ -27,6 +28,7 @@ export default {
   name: 'cvFeedbackButton',
   inheritAttrs: false,
   props: {
+    ariaLabel: { type: String, default: 'Feedback button' },
     feedback: { type: String, required: true },
     inline: Boolean,
     timeout: { type: Number, default: 2000 },

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

@@ -1,5 +1,5 @@
 <template>
-  <form class="cv-form bx--form">
+  <form class="cv-form bx--form" v-on="$listeners">
     <slot></slot>
   </form>
 </template>

package/src/components/cv-inline-loading/cv-inline-loading.vue

@@ -1,19 +1,22 @@
 <template>
-  <div data-inline-loading class="bx--inline-loading" role="alert" aria-live="assertive">
-    <div class="bx--inline-loading__animation" :class="{ 'bx--loading--stop': internalState === STATES.ENDING }">
+  <div data-inline-loading :class="`${carbonPrefix}--inline-loading`" role="alert" aria-live="assertive">
+    <div :class="animationClasses">
       <div
         v-show="internalState === STATES.LOADING || internalState === STATES.ENDING"
-        class="bx--loading bx--loading--small"
+        :class="`${carbonPrefix}--loading ${carbonPrefix}--loading--small`"
       >
-        <svg class="bx--loading__svg" viewBox="-75 -75 150 150">
-          <circle class="bx--loading__background" cx="0" cy="0" r="26.8125" />
-          <circle class="bx--loading__stroke" cx="0" cy="0" r="26.8125" />
+        <svg :class="`${carbonPrefix}--loading__svg`" viewBox="-75 -75 150 150">
+          <circle :class="`${carbonPrefix}--loading__background`" cx="0" cy="0" r="26.8125" />
+          <circle :class="`${carbonPrefix}--loading__stroke`" cx="0" cy="0" r="26.8125" />
         </svg>
       </div>
-      <CheckmarkFilled16 :hidden="internalState !== STATES.LOADED" class="bx--inline-loading__checkmark-container" />
-      <ErrorFilled16 :hidden="internalState !== STATES.ERROR" class="bx--inline-loading--error" />
+      <CheckmarkFilled16
+        :hidden="internalState !== STATES.LOADED"
+        :class="`${carbonPrefix}--inline-loading__checkmark-container`"
+      />
+      <ErrorFilled16 :hidden="internalState !== STATES.ERROR" :class="`${carbonPrefix}--inline-loading--error`" />
     </div>
-    <p class="bx--inline-loading__text">{{ stateText }}</p>
+    <p :class="`${carbonPrefix}--inline-loading__text`">{{ stateText }}</p>
   </div>
 </template>
 
@@ -21,10 +24,12 @@
 import { STATES } from './consts';
 import ErrorFilled16 from '@carbon/icons-vue/lib/error--filled/16';
 import CheckmarkFilled16 from '@carbon/icons-vue/lib/checkmark--filled/16';
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvInlineLoading',
   components: { ErrorFilled16, CheckmarkFilled16 },
+  mixins: [carbonPrefixMixin],
   created() {
     this.STATES = STATES;
   },
@@ -76,12 +81,13 @@ export default {
           return this.loadingText;
       }
     },
-    CONSTS() {
-      return { STATES };
+    animationClasses() {
+      const classes = [`${this.carbonPrefix}--inline-loading__animation`];
+      if (this.internalState === STATES.ENDING) {
+        classes.push(`${this.carbonPrefix}--loading--stop`);
+      }
+      return classes;
     },
   },
-  CONSTS() {
-    return { STATES };
-  },
 };
 </script>

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

@@ -1,23 +1,27 @@
 <template>
-  <component
-    :is="tagType"
-    v-on="$listeners"
-    v-bind="linkProps"
-    class="cv-link bx--link"
-    :class="{ 'bx--link--inline': inline }"
-  >
+  <component :is="tagType" v-on="$listeners" v-bind="linkProps" class="cv-link" :class="linkClasses">
     <slot></slot>
   </component>
 </template>
 
 <script>
 import LinkMixin from '../../mixins/link-mixin';
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvLink',
-  mixins: [LinkMixin],
+  mixins: [LinkMixin, carbonPrefixMixin],
   props: {
     inline: Boolean,
   },
+  computed: {
+    linkClasses() {
+      const classes = [`${this.carbonPrefix}--link`];
+      if (this.inline) {
+        classes.push(`${this.carbonPrefix}--link--inline`);
+      }
+      return classes;
+    },
+  },
 };
 </script>

package/src/components/cv-multi-select/cv-multi-select.vue

@@ -43,7 +43,7 @@
       <div
         role="button"
         aria-haspopup="true"
-        :aria-expanded="open"
+        :aria-expanded="open ? 'true' : 'false'"
         :aria-owns="uid"
         :aria-controls="uid"
         class="bx--list-box__field"
@@ -71,7 +71,7 @@
             :aria-controls="uid"
             aria-autocomplete="list"
             role="combobox"
-            :aria-expanded="open"
+            :aria-expanded="open ? 'true' : 'false'"
             autocomplete="off"
             :placeholder="label"
             v-model="filter"

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

@@ -1,12 +1,14 @@
 <template>
-  <div class="cv-number-input bx--form-item">
-    <label class="bx--label bx--skeleton" />
-    <div class="bx--number bx--skeleton" />
+  <div class="cv-number-input" :class="`${carbonPrefix}--form-item`">
+    <label :class="`${carbonPrefix}--label ${carbonPrefix}--skeleton`" />
+    <div :class="`${carbonPrefix}--number ${carbonPrefix}--skeleton`" />
   </div>
 </template>
 
 <script>
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 export default {
   name: 'CvNumberInputSkeleton',
+  mixins: [carbonPrefixMixin],
 };
 </script>

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

@@ -1,24 +1,14 @@
 <template>
-  <cv-wrapper :tag-type="formItem ? 'div' : ''" class="cv-number-input bx--form-item">
-    <div
-      data-numberinput
-      class="bx--number"
-      :class="{
-        'bx--number--light': theme === 'light',
-        'bx--number--helpertext': isHelper,
-        'cv-number-input': !formItem,
-        'bx--number--mobile': mobile,
-      }"
-      :data-invalid="isInvalid"
-    >
-      <label :for="uid" class="bx--label">{{ label }}</label>
-      <div class="bx--form__helper-text" v-if="isHelper">
+  <cv-wrapper :tag-type="formItem ? 'div' : ''" class="cv-number-input" :class="`${carbonPrefix}--form-item`">
+    <div data-numberinput :class="numberInputClasses" :data-invalid="isInvalid">
+      <label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
+      <div :class="`${carbonPrefix}--form__helper-text`" v-if="isHelper">
         <slot name="helper-text">{{ helperText }}</slot>
       </div>
-      <div class="bx--number__input-wrapper">
+      <div :class="`${carbonPrefix}--number__input-wrapper`">
         <button
           v-if="mobile"
-          class="bx--number__control-btn down-icon"
+          :class="`${carbonPrefix}--number__control-btn down-icon`"
           @click="doDown"
           type="button"
           :aria-label="ariaLabelForDownButton"
@@ -38,10 +28,10 @@
           :max="max"
           ref="input"
         />
-        <WarningFilled16 v-if="isInvalid && !mobile" class="bx--number__invalid" />
-        <div class="bx--number__controls" v-if="!mobile">
+        <WarningFilled16 v-if="isInvalid && !mobile" :class="`${carbonPrefix}--number__invalid`" />
+        <div :class="`${carbonPrefix}--number__controls`" v-if="!mobile">
           <button
-            class="bx--number__control-btn up-icon"
+            :class="`${carbonPrefix}--number__control-btn up-icon`"
             @click="doUp"
             type="button"
             :aria-label="ariaLabelForUpButton"
@@ -50,7 +40,7 @@
             <CaretUpGlyph />
           </button>
           <button
-            class="bx--number__control-btn down-icon"
+            :class="`${carbonPrefix}--number__control-btn down-icon`"
             @click="doDown"
             type="button"
             :aria-label="ariaLabelForDownButton"
@@ -61,7 +51,7 @@
         </div>
         <button
           v-else
-          class="bx--number__control-btn up-icon"
+          :class="`${carbonPrefix}--number__control-btn up-icon`"
           @click="doUp"
           type="button"
           :aria-label="ariaLabelForUpButton"
@@ -70,7 +60,7 @@
           <CaretUpGlyph />
         </button>
       </div>
-      <div class="bx--form-requirement" v-if="isInvalid">
+      <div :class="`${carbonPrefix}--form-requirement`" v-if="isInvalid">
         <slot name="invalid-message">{{ invalidMessage }}</slot>
       </div>
     </div>
@@ -84,10 +74,11 @@ import CaretDownGlyph from '@carbon/icons-vue/es/caret--down/index';
 import CaretUpGlyph from '@carbon/icons-vue/es/caret--up/index';
 import WarningFilled16 from '@carbon/icons-vue/es/warning--filled/16';
 import CvWrapper from '../cv-wrapper/_cv-wrapper';
+import carbonPrefixMixin from '../../mixins/carbon-prefix-mixin';
 
 export default {
   name: 'CvNumberInput',
-  mixins: [uidMixin, themeMixin],
+  mixins: [uidMixin, themeMixin, carbonPrefixMixin],
   components: { CaretDownGlyph, CaretUpGlyph, WarningFilled16, CvWrapper },
   inheritAttrs: false,
   props: {
@@ -140,6 +131,24 @@ export default {
     },
   },
   computed: {
+    numberInputClasses() {
+      const classes = [`${this.carbonPrefix}--number`];
+
+      if (this.theme === 'light') {
+        classes.push(`${this.carbonPrefix}--number--light`);
+      }
+      if (this.isHelper) {
+        classes.push(`${this.carbonPrefix}--number--helpertext`);
+      }
+      if (!this.formItem) {
+        classes.push(`cv-number-input`);
+      }
+      if (this.mobile) {
+        classes.push(`${this.carbonPrefix}--number--mobile`);
+      }
+
+      return classes;
+    },
     // Bind listeners at the component level to the embedded input element and
     // add our own input listener to service the v-model. See:
     // https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

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

@@ -5,7 +5,7 @@
       :class="[tipClasses, { 'bx--overflow-menu--open': open }]"
       aria-haspopup
       type="button"
-      :aria-expanded="open"
+      :aria-expanded="open ? 'true' : 'false'"
       :aria-controls="`${uid}-menu`"
       :id="`${uid}-trigger`"
       ref="trigger"

package/src/components/cv-svg/_cv-svg.vue

@@ -0,0 +1,41 @@
+<script>
+import CvWrapper from '../cv-wrapper/_cv-wrapper';
+
+export default {
+  name: 'CvSvg',
+  components: { CvWrapper },
+  props: {
+    svg: {
+      type: [String, Object],
+      default: undefined,
+      validator(val) {
+        if (!val || typeof val === 'string') {
+          return true;
+        }
+        return val.render !== null;
+      },
+    },
+  },
+  computed: {
+    isSvg() {
+      return this.svg !== undefined && this.svg.indexOf('<svg') >= 0;
+    },
+    isSymbol() {
+      return this.svg !== undefined && !this.isSvg && this.svg.indexOf('#') >= 0;
+    },
+  },
+  render(createElement) {
+    if (typeof this.svg === 'object') {
+      return createElement('component', { is: this.svg });
+    } else if (this.isSvg) {
+      return createElement('svg', { domProps: { innerHTML: this.svg } });
+    } else {
+      if (this.isSymbol) {
+        return createElement('svg', {}, [createElement('use', { attrs: { href: this.svg } })]);
+      } else {
+        return createElement('img', { attrs: { src: this.svg } });
+      }
+    }
+  },
+};
+</script>

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

@@ -4,7 +4,7 @@
     :id="uid"
     role="tabpanel"
     :aria-labelledby="`${uid}-link`"
-    :aria-hidden="!dataSelected"
+    :aria-hidden="!dataSelected ? 'true' : 'false'"
     :hidden="!dataSelected"
   >
     <slot>

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

@@ -34,7 +34,7 @@
             'bx--tabs__nav-item--disabled': disabledTabs.indexOf(tab.uid) !== -1,
           }"
           role="tab"
-          :aria-selected="selectedId == tab.uid"
+          :aria-selected="selectedId == tab.uid ? 'true' : 'false'"
           :aria-disabled="disabledTabs.indexOf(tab.uid) !== -1"
         >
           <a

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

@@ -16,7 +16,13 @@
     @keyup.space.prevent="$emit('remove')"
   >
     <span class="bx--tag__label">{{ label }}</span>
-    <button v-if="isFilter" class="bx--tag__close-icon" :aria-label="clearAriaLabel" @click.stop.prevent="onRemove">
+    <button
+      v-if="isFilter"
+      class="bx--tag__close-icon"
+      :aria-label="clearAriaLabel"
+      @click.stop.prevent="onRemove"
+      :disabled="disabled"
+    >
       <Close16 />
     </button>
   </span>

package/src/components/cv-text-area/cv-text-area.vue

@@ -22,6 +22,7 @@
         v-bind="$attrs"
         :value="value"
         v-on="inputListeners"
+        ref="textarea"
       ></textarea>
     </div>
     <div class="bx--form-requirement" v-if="isInvalid">
@@ -75,6 +76,11 @@ export default {
       this.isInvalid = !!(this.$slots['invalid-message'] || (this.invalidMessage && this.invalidMessage.length));
       this.isHelper = !!(this.$slots['helper-text'] || (this.helperText && this.helperText.length));
     },
+    focus() {
+      this.$nextTick(() => {
+        this.$refs.textarea.focus();
+      });
+    },
   },
 };
 </script>

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

@@ -125,6 +125,11 @@ export default {
         this.$refs.input.value = currentValue;
       });
     },
+    focus() {
+      this.$nextTick(() => {
+        this.$refs.input.focus();
+      });
+    },
   },
 };
 </script>

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

@@ -4,7 +4,7 @@
       <slot name="label"></slot>
 
       <button
-        :aria-expanded="dataVisible"
+        :aria-expanded="dataVisible ? 'true' : 'false'"
         :aria-labelledby="`${uid}-label`"
         class="bx--tooltip__trigger"
         :aria-controls="`${uid}`"

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

@@ -6,7 +6,7 @@
     type="button"
     aria-haspopup="true"
     :aria-controls="ariaControls"
-    :aria-expanded="active"
+    :aria-expanded="active ? 'true' : 'false'"
     @click="gaToggle"
     @focusout="gaFocusout"
   >

package/src/components/cv-ui-shell/cv-header-menu-button.vue

@@ -6,7 +6,7 @@
     type="button"
     aria-haspopup="true"
     :aria-controls="ariaControls"
-    :aria-expanded="active"
+    :aria-expanded="active ? 'true' : 'false'"
     @click="gaToggle"
     @focusout="gaFocusout"
   >

package/src/components/cv-ui-shell/cv-header-panel.vue

@@ -2,7 +2,7 @@
   <div
     class="cv-header-panel bx--header-panel"
     :class="{ 'bx--header-panel--expanded': panelExpanded }"
-    :aria-hidden="!panelExpanded"
+    :aria-hidden="!panelExpanded ? 'true' : 'false'"
     :id="id"
     @focusout="onFocusout"
     @mousedown="onMouseDown"

package/src/components/cv-ui-shell/cv-side-nav.vue

@@ -7,7 +7,7 @@
       'bx--side-nav--collapsed': !panelExpanded && fixed,
       'bx--side-nav--ux': isChildOfHeader,
     }"
-    :aria-hidden="!panelExpanded && !fixed"
+    :aria-hidden="!panelExpanded && !fixed ? 'true' : 'false'"
     :id="id"
     @focusout="onFocusout"
     @mousedown="onMouseDown"