npm - @carbon/vue - Versions diffs - 1.0.2 → 1.1.3 - Mend

@carbon/vue 1.0.2 → 1.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (89) hide show

package/CHANGELOG.md +192 -0
package/README.md +156 -211
package/dist/carbon-vue.common.js +10567 -12509
package/dist/carbon-vue.common.js.map +1 -1
package/dist/carbon-vue.umd.js +10567 -12509
package/dist/carbon-vue.umd.js.map +1 -1
package/dist/carbon-vue.umd.min.js +31 -7
package/dist/carbon-vue.umd.min.js.map +1 -1
package/dist/demo.html +2 -2
package/package.json +17 -157
package/src/components/cv-accordion/_cv-accordion-item-skeleton.vue +3 -13
package/src/components/cv-accordion/cv-accordion-item.vue +2 -9
package/src/components/cv-breadcrumb/cv-breadcrumb-item.vue +3 -1
package/src/components/cv-button/cv-button-skeleton.vue +1 -6
package/src/components/cv-button/cv-button.vue +15 -37
package/src/components/cv-checkbox/cv-checkbox.vue +42 -26
package/src/components/cv-code-snippet/_cv-code-snippet-multiline.vue +13 -23
package/src/components/cv-code-snippet/_cv-code-snippet-oneline.vue +11 -5
package/src/components/cv-code-snippet/_cv-feedback-button.vue +1 -3
package/src/components/cv-code-snippet/cv-code-snippet.vue +2 -7
package/src/components/cv-content-switcher/cv-content-switcher-button.vue +20 -4
package/src/components/cv-content-switcher/cv-content-switcher.vue +3 -10
package/src/components/cv-data-table/cv-data-table-row.vue +15 -11
package/src/components/cv-data-table/cv-data-table.vue +30 -28
package/src/components/cv-date-picker/cv-date-picker.vue +53 -47
package/src/components/cv-dropdown/_cv-dropdown-inner-c10.vue +226 -0
package/src/components/cv-dropdown/_cv-dropdown-inner.vue +201 -0
package/src/components/cv-dropdown/cv-dropdown-item.vue +6 -8
package/src/components/cv-dropdown/cv-dropdown-skeleton.vue +1 -5
package/src/components/cv-dropdown/cv-dropdown.vue +22 -169
package/src/components/cv-file-uploader/cv-file-uploader.vue +44 -22
package/src/components/cv-inline-loading/cv-inline-loading.vue +37 -0
package/src/components/cv-inline-notification/cv-inline-notification.vue +22 -19
package/src/components/cv-link/cv-link.vue +1 -6
package/src/components/cv-loading/cv-loading.vue +13 -4
package/src/components/cv-modal/cv-modal.vue +17 -15
package/src/components/cv-number-input/cv-number-input.vue +20 -32
package/src/components/cv-overflow-menu/cv-overflow-menu.vue +13 -19
package/src/components/cv-pagination/cv-pagination.vue +61 -42
package/src/components/cv-progress/_cv-progress-step-complete.vue +3 -12
package/src/components/cv-progress/cv-progress-step.vue +97 -0
package/src/components/cv-progress/cv-progress.vue +68 -13
package/src/components/cv-radio-button/cv-radio-button.vue +1 -0
package/src/components/cv-search/cv-search.vue +144 -15
package/src/components/cv-select/cv-select-option.vue +3 -1
package/src/components/cv-select/cv-select.vue +147 -15
package/src/components/cv-slider/cv-slider.vue +14 -43
package/src/components/cv-structured-list/_cv-structured-list-item-selectable.vue +18 -6
package/src/components/cv-structured-list/cv-structured-list-item.vue +1 -3
package/src/components/cv-structured-list/cv-structured-list.vue +10 -2
package/src/components/cv-tabs/cv-tabs.vue +31 -15
package/src/components/cv-tag/cv-tag.vue +23 -13
package/src/components/cv-text-area/cv-text-area.vue +23 -10
package/src/components/cv-text-input/cv-text-input.vue +80 -10
package/src/components/cv-tile/_cv-tile-clickable.vue +1 -5
package/src/components/cv-tile/_cv-tile-expandable.vue +11 -15
package/src/components/cv-tile/_cv-tile-selectable.vue +14 -3
package/src/components/cv-tile/cv-tile.vue +1 -4
package/src/components/cv-time-picker/cv-time-picker.vue +27 -29
package/src/components/cv-toast-notification/cv-toast-notification.vue +32 -6
package/src/components/cv-toggle/cv-toggle.vue +3 -7
package/src/components/cv-toolbar/cv-toolbar-option.vue +1 -4
package/src/components/cv-toolbar/cv-toolbar-search.vue +5 -0
package/src/components/cv-tooltip/cv-definition-tooltip.vue +1 -3
package/src/components/cv-tooltip/cv-interactive-tooltip.vue +13 -28
package/src/components/cv-tooltip/cv-tooltip.vue +11 -15
package/src/components/cv-wrapper/_cv-wrapper.js +33 -0
package/src/index-components-vue.js +1 -3
package/src/index.js +1 -5
package/src/{_internal/_feature-flags.js → internal/feature-flags.js} +30 -2
package/dist/carbon-data-viz-vue.common.js +0 -23907
package/dist/carbon-data-viz-vue.common.js.map +0 -1
package/dist/carbon-data-viz-vue.css +0 -1
package/dist/carbon-data-viz-vue.umd.js +0 -23917
package/dist/carbon-data-viz-vue.umd.js.map +0 -1
package/dist/carbon-data-viz-vue.umd.min.js +0 -2
package/dist/carbon-data-viz-vue.umd.min.js.map +0 -1
package/src/assets/styles/_carbon-helpers.scss +0 -8
package/src/components/cv-checkbox/_cv-checkbox-inner-form-item.vue +0 -19
package/src/components/cv-checkbox/_cv-checkbox-inner.vue +0 -59
package/src/components/cv-progress/_cv-progress-step.vue +0 -51
package/src/components/cv-search/_cv-search-inner-form-item.vue +0 -22
package/src/components/cv-search/_cv-search-inner.vue +0 -162
package/src/components/cv-select/_cv-select-inner-form-item.vue +0 -22
package/src/components/cv-select/_cv-select-inner.vue +0 -78
package/src/data-viz/cv-bar-graph/cv-bar-graph.vue +0 -495
package/src/data-viz/cv-gauge/cv-gauge.vue +0 -196
package/src/data-viz/cv-pie-chart/cv-pie-chart.vue +0 -194
package/src/index-data-viz.js +0 -29

package/dist/demo.html CHANGED Viewed

@@ -11,13 +11,13 @@
     />
     <link rel="stylesheet" href="./carbon-vue.css" />
     <style>
-      body {
+      .body {
         padding: 40px;
         background-color: #fff;
       }
     </style>
   </head>
-  <body>
+  <body class="body">
     <div id="app">Test</div>
     <script>

package/package.json CHANGED Viewed

@@ -1,11 +1,8 @@
 {
   "name": "@carbon/vue",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
-  "version": "1.0.2",
+  "version": "1.1.3",
   "license": "Apache-2.0",
-  "engines": {
-    "node": "10.x"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/carbon-design-system/carbon-components-vue.git"
@@ -13,16 +10,17 @@
   "bugs": {
     "url": "https://github.com/carbon-design-system/carbon-components-vue/issues/new"
   },
-  "homepage": "https://github.com/carbon-design-system/carbon-components-vue#readme",
+  "homepage": "https://github.com/carbon-design-system/carbon-components-vue/tree/master/packages/core#readme",
   "main": "dist/carbon-vue.umd.min.js",
-  "directories": {
-    "doc": "docs"
-  },
   "keywords": [
     "carbon",
     "vue",
     "components"
   ],
+  "directories": {
+    "src": "src",
+    "test": "__tests__"
+  },
   "publishConfig": {
     "access": "public"
   },
@@ -56,161 +54,23 @@
     "/dist",
     "/src"
   ],
-  "sideEffects": true,
   "scripts": {
-    "ci-check": "yarn format:diff",
-    "format": "prettier --write \"**/*.{scss,css,js,md,vue}\"",
-    "format:staged": "prettier --write",
-    "format:diff": "prettier --list-different \"**/*.{scss,css,js,md,vue}\"",
-    "format:staged": "prettier --write",
-    "lint:es": "eslint --ext .js,.vue src",
-    "lint:css": "stylelint 'src/**/*.vue'",
-    "storybook": "start-storybook -p 9001 -c .storybook",
-    "storybook-build": "build-storybook",
-    "build": "npm run build:core && npm run build:data-viz",
-    "build:core": "vue-cli-service build --target lib --name carbon-vue ./src/index.js --no-clean",
-    "build:data-viz": "vue-cli-service build --target lib --name carbon-data-viz-vue ./src/index-data-viz.js --no-clean",
-    "lint": "vue-cli-service lint ./src/index.js",
-    "test:unit": "vue-cli-service test:unit"
+    "build": "vue-cli-service build --target lib --name carbon-vue ./src/index.js --no-clean"
+  },
+  "engines": {
+    "node": ">=10.x"
   },
-  "peerDependencies": {},
+  "sideEffects": true,
   "dependencies": {
     "@carbon/icon-helpers": "0.0.1-beta.0",
     "@carbon/icons-vue": "0.0.1-beta.0",
-    "carbon-components": "^9.48.1",
-    "d3": "^5.7.0",
-    "flatpickr": "4.5.1",
-    "vue": "^2.5.21"
+    "carbon-components": "^9.91.0",
+    "flatpickr": "4.5.7",
+    "vue": "^2.6.10"
   },
   "devDependencies": {
-    "@babel/core": "^7.2.2",
-    "@commitlint/cli": "^7.2.1",
-    "@commitlint/config-conventional": "^7.1.2",
-    "@storybook/addon-actions": "^4.1.11",
-    "@storybook/addon-knobs": "^4.1.11",
-    "@storybook/addon-notes": "^4.1.11",
-    "@storybook/addon-options": "^4.1.11",
-    "@storybook/addon-storysource": "^4.1.11",
-    "@storybook/vue": "^4.1.11",
-    "@vue/cli-plugin-babel": "^3.4.0",
-    "@vue/cli-plugin-eslint": "^3.4.0",
-    "@vue/cli-plugin-unit-jest": "^3.4.0",
-    "@vue/cli-service": "^3.4.0",
-    "@vue/eslint-config-prettier": "^4.0.1",
-    "@vue/test-utils": "^1.0.0-beta.20",
-    "babel-eslint": "^10.0.1",
-    "babel-jest": "^24.1.0",
-    "babel-loader": "^7.0.0",
-    "babel-plugin-transform-object-rest-spread": "7.0.0-beta.3",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-vue": "^2.0.2",
-    "eslint": "^5.10.0",
-    "eslint-plugin-vue": "^5.0.0-0",
-    "husky": "^1.3.0",
-    "jest": "^24.1.0",
-    "jest-config": "^24.1.0",
-    "jest-runtime": "^24.1.0",
-    "jest-serializer-vue": "^2.0.2",
-    "jest-transform-stub": "^2.0.0",
-    "lint-staged": "^8.1.0",
-    "node-sass": "^4.11.0",
-    "prettier": "^1.15.3",
-    "sass-loader": "^7.1.0",
-    "stylelint": "^9.9.0",
-    "stylelint-config-property-sort-order-smacss": "^4.0.1",
-    "stylelint-config-sass-guidelines": "^5.3.0",
-    "vue-highlightjs": "^1.3.3",
-    "vue-jest": "^3.0.2",
-    "vue-loader": "^15.4.2",
-    "vue-template-compiler": "^2.5.21"
-  },
-  "husky": {
-    "hooks": {
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "pre-commit": "lint-staged"
-    }
-  },
-  "commitlint": {
-    "extends": [
-      "@commitlint/config-conventional"
-    ]
-  },
-  "lint-staged": {
-    "*.{scss,css,js,md,vue}": [
-      "yarn format:staged",
-      "git add"
-    ]
+    "@vue/cli-service": "^3.5.1",
+    "vue-template-compiler": "^2.6.10"
   },
-  "prettier": {
-    "printWidth": 80,
-    "singleQuote": true,
-    "trailingComma": "es5"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "@vue/prettier"
-    ],
-    "rules": {
-      "no-console": [
-        "error",
-        {
-          "allow": [
-            "warn",
-            "error"
-          ]
-        }
-      ],
-      "no-debugger": "warn",
-      "no-unused-vars": "warn",
-      "no-plusplus": "off",
-      "no-undef": "off",
-      "no-var": "error",
-      "semi": [
-        "error",
-        "always"
-      ],
-      "no-param-reassign": [
-        "error",
-        {
-          "props": false
-        }
-      ]
-    },
-    "parserOptions": {
-      "parser": "babel-eslint"
-    }
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not ie <= 8"
-  ],
-  "jest": {
-    "moduleFileExtensions": [
-      "js",
-      "jsx",
-      "json",
-      "vue"
-    ],
-    "transform": {
-      "^.+\\.vue$": "vue-jest",
-      ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
-      "^.+\\.jsx?$": "babel-jest"
-    },
-    "moduleNameMapper": {
-      "^@/(.*)$": "<rootDir>/src/$1"
-    },
-    "snapshotSerializers": [
-      "jest-serializer-vue"
-    ],
-    "testMatch": [
-      "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
-    ],
-    "testURL": "http://localhost/"
-  }
+  "gitHead": "babd1e211306c29252dbecb9f86b7d07c4e2d4fe"
 }

package/src/components/cv-accordion/_cv-accordion-item-skeleton.vue CHANGED Viewed

@@ -1,18 +1,8 @@
 <template>
-  <li
-    class="bx--accordion__item"
-    :class="{ 'bx--accordion__item--active': open }"
-  >
+  <li class="bx--accordion__item" :class="{ 'bx--accordion__item--active': open }">
     <button disabled type="button" class="bx--accordion__heading">
       <ChevronRight16 v-if="componentsX" class="bx--accordion__arrow" />
-      <svg
-        v-else
-        class="bx--accordion__arrow"
-        width="8"
-        height="12"
-        viewBox="0 0 8 12"
-        fill-rule="evenodd"
-      >
+      <svg v-else class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
         <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
       </svg>
       <cv-skeleton-text class="bx--accordion__title"></cv-skeleton-text>
@@ -25,7 +15,7 @@
 <script>
 import CvSkeletonText from '../cv-skeleton-text/cv-skeleton-text';
-import { componentsX } from '../../_internal/_feature-flags';
+import { componentsX } from '../../internal/feature-flags';
 import ChevronRight16 from '@carbon/icons-vue/lib/chevron--right/16';
 export default {

package/src/components/cv-accordion/cv-accordion-item.vue CHANGED Viewed

@@ -19,14 +19,7 @@
       @click="toggle"
     >
       <ChevronRight16 v-if="componentsX" class="bx--accordion__arrow" />
-      <svg
-        v-else
-        class="bx--accordion__arrow"
-        width="8"
-        height="12"
-        viewBox="0 0 8 12"
-        fill-rule="evenodd"
-      >
+      <svg v-else class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
         <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
       </svg>
       <p class="bx--accordion__title">
@@ -40,7 +33,7 @@
 </template>
 <script>
-import { componentsX } from '../../_internal/_feature-flags';
+import { componentsX } from '../../internal/feature-flags';
 import ChevronRight16 from '@carbon/icons-vue/lib/chevron--right/16';
 import uidMixin from '../../mixins/uid-mixin';

package/src/components/cv-breadcrumb/cv-breadcrumb-item.vue CHANGED Viewed

@@ -1,5 +1,7 @@
 <template>
-  <div class="cv-breadcrumb-item bx--breadcrumb-item"><slot></slot></div>
+  <div class="cv-breadcrumb-item bx--breadcrumb-item">
+    <slot></slot>
+  </div>
 </template>
 <script>

package/src/components/cv-button/cv-button-skeleton.vue CHANGED Viewed

@@ -1,10 +1,5 @@
 <template>
-  <button
-    disabled
-    class="bx--btn bx--skeleton"
-    :class="{ 'bx--btn--sm': small }"
-    type="button"
-  ></button>
+  <button disabled class="bx--btn bx--skeleton" :class="{ 'bx--btn--sm': small }" type="button"></button>
 </template>
 <script>

package/src/components/cv-button/cv-button.vue CHANGED Viewed

@@ -1,54 +1,40 @@
 <template>
   <button
     class="cv-button"
-    :class="[
-      'bx--btn',
-      'bx--btn--' + kind.toLowerCase(),
-      { 'bx--btn--sm': small },
-    ]"
+    :class="['bx--btn', 'bx--btn--' + kind.toLowerCase(), { 'bx--btn--sm': small }]"
     v-on="$listeners"
     role="button"
   >
     <slot></slot>
-    <component
-      v-if="icon !== undefined && typeof icon === 'object'"
-      :is="icon"
-      class="bx--btn__icon"
-    />
-    <svg v-if="icon || iconHref" class="bx--btn__icon">
+    <component v-if="typeof icon === 'object'" :is="icon" class="bx--btn__icon" />
+    <svg v-if="typeof icon === 'string' || iconHref" class="bx--btn__icon">
       <use :href="icon || iconHref"></use>
     </svg>
   </button>
 </template>
 <script>
-import { componentsX } from '../../_internal/_feature-flags';
 export default {
   name: 'CvButton',
   props: {
-    icon: componentsX
-      ? {
-          type: [String, Object],
-          default: null,
-          validator(val) {
-            if (!val || typeof val === 'string') {
-              return true;
-            }
-            return val.render !== null;
-          },
+    icon: {
+      type: [String, Object],
+      default: null,
+      validator(val) {
+        if (!val || typeof val === 'string') {
+          return true;
         }
-      : null,
+        return val.render !== null;
+      },
+    },
     iconHref: {
       type: String,
       default: null,
       validator(val) {
         if (process.env.NODE_ENV === 'development') {
-          if (componentsX && val !== null) {
-            console.warn(
-              'CvButton: iconHref deprecated in favour of icon to be removed in future versions.'
-            );
+          if (val !== null) {
+            console.warn('CvButton: iconHref deprecated in favour of icon to be removed in future versions.');
           }
         }
         return true;
@@ -57,15 +43,7 @@ export default {
     kind: {
       type: String,
       default: 'primary',
-      validator: val =>
-        [
-          'primary',
-          'secondary',
-          'tertiary',
-          'ghost',
-          'danger',
-          'danger--primary',
-        ].includes(val),
+      validator: val => ['primary', 'secondary', 'tertiary', 'ghost', 'danger', 'danger--primary'].includes(val),
     },
     small: { type: Boolean, default: false },
   },

package/src/components/cv-checkbox/cv-checkbox.vue CHANGED Viewed

@@ -1,42 +1,58 @@
 <template>
-  <component
-    :is="tagType"
-    v-bind="$attrs"
-    v-on="$listeners"
-    class="cv-checkbox"
-  >
-    <slot></slot>
-  </component>
+  <div class="cv-checkbox bx--form-item bx--checkbox-wrapper">
+    <label
+      :class="[
+        'bx--checkbox-label',
+        {
+          'bx--label--disabled': $attrs.disabled !== undefined && $attrs.disabled,
+          'bx--checkbox-label__focus': hasFocus,
+        },
+      ]"
+      :data-contained-checkbox-state="isChecked"
+      :data-contained-checkbox-disabled="$attrs.disabled"
+    >
+      <input
+        ref="input"
+        v-bind="$attrs"
+        v-on="inputListeners"
+        class="bx--checkbox"
+        type="checkbox"
+        :checked="isChecked === true"
+        :aria-checked="`${isChecked}`"
+        @focus="onFocus"
+        @blur="onBlur"
+        :value="value"
+      />
+      {{ label }}
+    </label>
+  </div>
 </template>
 <script>
-import CvCheckboxInnerFormItem from './_cv-checkbox-inner-form-item';
-import CvCheckboxInner from './_cv-checkbox-inner';
+import checkMixin from '../../mixins/check-mixin';
 export default {
   name: 'CvCheckbox',
-  components: { CvCheckboxInnerFormItem, CvCheckboxInner },
+  mixins: [checkMixin],
   inheritAttrs: false,
   props: {
-    formItem: { type: Boolean, default: true },
+    label: String,
+    mixed: Boolean,
   },
-  computed: {
-    tagType() {
-      return this.formItem
-        ? 'cv-checkbox-inner-form-item'
-        : 'cv-checkbox-inner';
-    },
-    value() {
-      return this.$attrs.value;
+  data() {
+    return {
+      dataMixed: this.mixed,
+      hasFocus: false,
+    };
+  },
+  methods: {
+    onFocus() {
+      this.hasFocus = true;
     },
-    isChecked() {
-      return this.$children[0].isChecked;
+    onBlur() {
+      this.hasFocus = false;
     },
   },
-  model: {
-    prop: 'modelValue',
-    event: 'modelEvent',
-  },
 };
 </script>

package/src/components/cv-code-snippet/_cv-code-snippet-multiline.vue CHANGED Viewed

@@ -9,12 +9,10 @@
         <slot></slot>
       </pre>
     </div>
-    <cv-feedback-button
-      feedback="Copied!"
-      aria-label="Copy code"
-      @click="$emit('copy-code')"
-    >
+    <cv-feedback-button feedback="Copied!" aria-label="Copy code" @click="$emit('copy-code')">
+      <Copy16 v-if="componentsX" class="bx--snippet__icon" />
       <svg
+        v-else
         class="bx--snippet__icon"
         xmlns="http://www.w3.org/2000/svg"
         width="16"
@@ -28,26 +26,12 @@
       </svg>
     </cv-feedback-button>
-    <cv-button
-      type="button"
-      kind="ghost"
-      small
-      class="bx--snippet-btn--expand"
-      @click="toggleExpand"
-    >
+    <cv-button type="button" kind="ghost" small class="bx--snippet-btn--expand" @click="toggleExpand">
       <span class="bx--snippet-btn--text">{{ expandButtonText }}</span>
-      <svg
-        class="bx--icon-chevron--down"
-        width="12"
-        height="7"
-        viewBox="0 0 12 7"
-        aria-label="Show more icon"
-      >
+      <ChevronDown16 v-if="componentsX" class="bx--icon-chevron--down" />
+      <svg v-else class="bx--icon-chevron--down" width="12" height="7" viewBox="0 0 12 7" aria-label="Show more icon">
         <title>Show more icon</title>
-        <path
-          fill-rule="nonzero"
-          d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"
-        ></path>
+        <path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z"></path>
       </svg>
     </cv-button>
   </div>
@@ -55,11 +39,16 @@
 <script>
 import CvFeedbackButton from './_cv-feedback-button';
+import { componentsX } from '../../internal/feature-flags';
+import Copy16 from '@carbon/icons-vue/lib/copy/16';
+import ChevronDown16 from '@carbon/icons-vue/lib/chevron--down/16';
 export default {
   name: 'CvCodeSnippetMultiline',
   components: {
     CvFeedbackButton,
+    Copy16,
+    ChevronDown16,
   },
   props: {
     lessText: { type: String, default: 'Show less' },
@@ -67,6 +56,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       expanded: false,
     };
   },

package/src/components/cv-code-snippet/_cv-code-snippet-oneline.vue CHANGED Viewed

@@ -5,12 +5,10 @@
         <slot></slot>
       </pre>
     </div>
-    <cv-feedback-button
-      feedback="Copied!"
-      aria-label="Copy code"
-      @click="$emit('copy-code')"
-    >
+    <cv-feedback-button feedback="Copied!" aria-label="Copy code" @click="$emit('copy-code')">
+      <Copy16 v-if="componentsX" class="bx--snippet__icon" />
       <svg
+        v-else
         class="bx--snippet__icon"
         xmlns="http://www.w3.org/2000/svg"
         width="16"
@@ -28,11 +26,19 @@
 <script>
 import CvFeedbackButton from './_cv-feedback-button';
+import { componentsX } from '../../internal/feature-flags';
+import Copy16 from '@carbon/icons-vue/lib/copy/16';
 export default {
   name: 'CvCodeSnippetOneline',
   components: {
     CvFeedbackButton,
+    Copy16,
+  },
+  data() {
+    return {
+      componentsX,
+    };
   },
 };
 </script>

package/src/components/cv-code-snippet/_cv-feedback-button.vue CHANGED Viewed

@@ -27,9 +27,7 @@ export default {
   },
   computed: {
     buttonClasses() {
-      return this.inline
-        ? 'bx--snippet bx--snippet--inline bx--btn--copy'
-        : 'bx--snippet-button';
+      return this.inline ? 'bx--snippet bx--snippet--inline bx--btn--copy' : 'bx--snippet-button';
     },
   },
   data() {

package/src/components/cv-code-snippet/cv-code-snippet.vue CHANGED Viewed

@@ -1,15 +1,10 @@
 <template>
-  <component
-    class="cv-code-snippet"
-    :is="theComponent"
-    v-bind="$attrs"
-    @copy-code="onCopyCode"
-  >
+  <component class="cv-code-snippet" :is="theComponent" v-bind="$attrs" @copy-code="onCopyCode">
     <code ref="code"> <slot></slot> </code>
     <!-- textarea cannot be fully hidden for clipboard to work -->
     <textarea
       class="cv-code-snippet__clippy"
-      style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden"
+      style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden;"
       aria-hidden="true"
       ref="clippy"
     ></textarea>

package/src/components/cv-content-switcher/cv-content-switcher-button.vue CHANGED Viewed

@@ -24,18 +24,35 @@
     :aria-selected="`${dataSelected}`"
     @click="open"
   >
-    <slot></slot>
+    <component v-if="typeof icon === 'object'" :is="icon" class="bx--content-switcher__icon" />
+    <svg v-if="typeof icon === 'string'" class="bx--content-switcher__icon" height="16" width="16">
+      <use :href="icon"></use>
+    </svg>
+    <span>
+      <slot></slot>
+    </span>
   </button>
 </template>
 <script>
 import uidMixin from '../../mixins/uid-mixin';
+import { componentsX } from '../../internal/feature-flags';
 export default {
   name: 'CvContentSwitcherButton',
   mixins: [uidMixin],
   props: {
     contentSelector: { type: String, default: undefined },
+    icon: {
+      type: [String, Object],
+      default: null,
+      validator(val) {
+        if (!val || typeof val === 'string') {
+          return true;
+        }
+        return val.render !== null;
+      },
+    },
     ownerId: { type: String, default: undefined },
     selected: Boolean,
   },
@@ -50,6 +67,7 @@ export default {
   },
   data() {
     return {
+      componentsX,
       dataSelected: false,
     };
   },
@@ -57,9 +75,7 @@ export default {
     this.$_CvContentSwitcherButton = true; // for use by parent with $children
     if (this.contentSelector === '' && this.ownerId === '') {
-      console.error(
-        'CvContentSwitcherButton: ownerId or content-selector properties must not be empty strings.'
-      );
+      console.error('CvContentSwitcherButton: ownerId or content-selector properties must not be empty strings.');
     }
     this.dataSelected = this.selected;