10 23 1 update (#1058)

* fix: move helper text multi select * chore: update carbon to 10.22.1 * feat: update accordion to 10.23.1 * feat: update button to 10.23.1 * feat: update button set story * feat: update code snippet to 10.23.1 * feat: deprecate theme property * feat: content-switcher 2.23.1 * feat: 2.23.1 loading update * fix: data table autowidth * feat: modal 2.23.1 update * chore: update snapshots * chore: update packages Co-authored-by: Lee Chase <[email protected]>
carbon-design-system · Nov 18, 2020 · 0a22300 · 0a22300
1 parent 1323ff8
commit 0a22300
Show file tree

Hide file tree

Showing 77 changed files with 504 additions and 247 deletions.
diff --git a/.yarn-offline-mirror/@carbon-colors-10.15.0.tgz b/.yarn-offline-mirror/@carbon-colors-10.15.0.tgz
diff --git a/.yarn-offline-mirror/@carbon-icon-helpers-10.9.0.tgz b/.yarn-offline-mirror/@carbon-icon-helpers-10.9.0.tgz
diff --git a/.yarn-offline-mirror/@carbon-icons-vue-10.20.0.tgz b/.yarn-offline-mirror/@carbon-icons-vue-10.20.0.tgz
diff --git a/.yarn-offline-mirror/@carbon-layout-10.14.0.tgz b/.yarn-offline-mirror/@carbon-layout-10.14.0.tgz
diff --git a/.yarn-offline-mirror/@carbon-themes-10.22.1.tgz b/.yarn-offline-mirror/@carbon-themes-10.22.1.tgz
diff --git a/.yarn-offline-mirror/@carbon-type-10.17.0.tgz b/.yarn-offline-mirror/@carbon-type-10.17.0.tgz
diff --git a/.yarn-offline-mirror/carbon-components-10.23.1.tgz b/.yarn-offline-mirror/carbon-components-10.23.1.tgz
diff --git a/.yarn-offline-mirror/pkg-dir-2.0.0.tgz b/.yarn-offline-mirror/pkg-dir-2.0.0.tgz
diff --git a/package.json b/package.json
@@ -9,9 +9,9 @@
     "build:storybook": "yarn info @carbon/vue --json > package-info.jsonl; vue-cli-service storybook:build -c storybook/.storybook -o storybook/storybook-static",
     "ci-check": "yarn format:diff && yarn test --maxWorkers=5 && yarn build:packages && yarn build:storybook --quiet",
     "clean": "lerna run clean; rimraf storybook/storybook-static package-info.jsonl node_modules/.cache",
-    "format": "prettier --write '**/*.{scss,css,js,md,vue}' '!**/{build,es,lib,storybook,ts,umd}/**'",
-    "format:diff": "prettier --list-different '**/*.{scss,css,js,md,vue}' '!**/{dist,storybook-static}/**'",
-    "format:staged": "prettier --write '**/*.{scss,css,js,md,vue}' '!**/{dist,storybook-static}/**'",
+    "format": "prettier --write '**/*.{scss,css,js,md,vue}' '!**/{build,es,lib,storybook,ts,umd,.coverage}/**'",
+    "format:diff": "prettier --list-different '**/*.{scss,css,js,md,vue}' '!**/{dist,storybook-static,.coverage}/**'",
+    "format:staged": "prettier --write '**/*.{scss,css,js,md,vue}' '!**/{dist,storybook-static,.coverage}/**'",
     "lint:css": "stylelint '{packages,storybook}/**/*.{vue,scss}'",
     "lint:es": "eslint {packages,storybook}/**/*.{js,vue}",
     "lint:style": "vue-cli-service lint:style",
@@ -26,9 +26,9 @@
   },
   "devDependencies": {
     "@ascendancyy/vue-cli-plugin-stylelint": "^1.1.2",
-    "@carbon/icons-vue": "10.10.2",
-    "@carbon/themes": "^10.17.0",
-    "@carbon/type": "^10.13.0",
+    "@carbon/icons-vue": "10.20.0",
+    "@carbon/themes": "^10.22.1",
+    "@carbon/type": "^10.17.0",
     "@commitlint/cli": "^7.6.1",
     "@commitlint/config-conventional": "^7.6.0",
     "@storybook/addon-actions": "^5.2.1",
@@ -45,7 +45,7 @@
     "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/test-utils": "^1.0.0-beta.31",
     "babel-eslint": "^10.1.0",
-    "carbon-components": "10.16.0",
+    "carbon-components": "10.23.1",
     "eslint": "^6.7.2",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-vue": "^6.2.2",

diff --git a/packages/core/__tests__/__snapshots__/cv-accordion.test.js.snap b/packages/core/__tests__/__snapshots__/cv-accordion.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CvAccordion matches render 1`] = `
-<ul data-accordion="" class="cv-accordion bx--accordion">
+<ul data-accordion="" class="cv-accordion bx--accordion bx--accordion--start">
   <div class="cv-accordion-item-stub">StubbyMcStubFace</div>
 </ul>
 `;
@@ -25,7 +25,7 @@ exports[`CvAccordionItem matches render open 1`] = `
 `;
 
 exports[`CvAccordionSkeleton matches render 1`] = `
-<ul class="bx--accordion bx--skeleton">
+<ul class="bx--accordion bx--skeleton bx--accordion--start">
   <cv-accordion-item-skeleton-stub open="true">
     <cv-skeleton-text-stub width="90%" linecount="3"></cv-skeleton-text-stub>
     <cv-skeleton-text-stub width="80%" linecount="3"></cv-skeleton-text-stub>

diff --git a/packages/core/__tests__/__snapshots__/cv-button.test.js.snap b/packages/core/__tests__/__snapshots__/cv-button.test.js.snap
@@ -29,7 +29,22 @@ exports[`CvIconButton Renders as expected field secondary with icon disabled 1`]
 </button>
 `;
 
+exports[`CvIconButton Renders as expected lg primary 1`] = `
+<button type="button" class="cv-button bx--btn bx--btn--icon-only bx--btn--primary bx--btn--lg bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center"><span class="bx--assistive-text"></span>
+  <!----></button>
+`;
+
+exports[`CvIconButton Renders as expected lg primary 2`] = `
+<button type="button" class="cv-button bx--btn bx--btn--icon-only bx--btn--primary bx--btn--xl bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center"><span class="bx--assistive-text"></span>
+  <!----></button>
+`;
+
 exports[`CvIconButton Renders as expected small primary 1`] = `
 <button type="button" class="cv-button bx--btn bx--btn--icon-only bx--btn--primary bx--btn--sm bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center"><span class="bx--assistive-text"></span>
   <!----></button>
 `;
+
+exports[`CvIconButton Renders size (sm) as expected small primary 1`] = `
+<button type="button" class="cv-button bx--btn bx--btn--icon-only bx--btn--primary bx--btn--sm bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center"><span class="bx--assistive-text"></span>
+  <!----></button>
+`;
diff --git a/packages/core/__tests__/__snapshots__/cv-code-snippet.test.js.snap b/packages/core/__tests__/__snapshots__/cv-code-snippet.test.js.snap
@@ -1,14 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CvCodeSnippet should render correctly when it is \`inline\` 1`] = `<cvcodesnippetinline-stub theme="" copyfeedback="Copied!" feedbackarialabel="Copy code" id="test-1" class="cv-code-snippet"><code></code> <textarea aria-hidden="true" class="cv-code-snippet__clippy" style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden;"></textarea></cvcodesnippetinline-stub>`;
+exports[`CvCodeSnippet should render correctly when it is \`inline\` 1`] = `<cvcodesnippetinline-stub copyfeedback="Copied!" feedbackarialabel="Copy code" id="test-1" class="cv-code-snippet"><code></code> <textarea aria-hidden="true" class="cv-code-snippet__clippy" style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden;"></textarea></cvcodesnippetinline-stub>`;
 
-exports[`CvCodeSnippet should render correctly when it is \`multiline\` 1`] = `<cvcodesnippetmultiline-stub theme="" lesstext="Show less" moretext="Show more" feedbackarialabel="Copy code" copyfeedback="Copied!" id="test-1" class="cv-code-snippet"><code></code> <textarea aria-hidden="true" class="cv-code-snippet__clippy" style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden;"></textarea></cvcodesnippetmultiline-stub>`;
+exports[`CvCodeSnippet should render correctly when it is \`multiline\` 1`] = `<cvcodesnippetmultiline-stub copyfeedback="Copied!" feedbackarialabel="Copy code" lesstext="Show less" moretext="Show more" id="test-1" class="cv-code-snippet"><code></code> <textarea aria-hidden="true" class="cv-code-snippet__clippy" style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden;"></textarea></cvcodesnippetmultiline-stub>`;
 
-exports[`CvCodeSnippet should render correctly with slot specified 1`] = `<cvcodesnippetoneline-stub theme="" copyfeedback="Copied!" feedbackarialabel="Copy code" id="test-1" class="cv-code-snippet"><code><div>Cv code snippet slot</div></code> <textarea aria-hidden="true" class="cv-code-snippet__clippy" style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden;"></textarea></cvcodesnippetoneline-stub>`;
+exports[`CvCodeSnippet should render correctly with slot specified 1`] = `<cvcodesnippetoneline-stub copyfeedback="Copied!" feedbackarialabel="Copy code" id="test-1" class="cv-code-snippet"><code><div>Cv code snippet slot</div></code> <textarea aria-hidden="true" class="cv-code-snippet__clippy" style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden;"></textarea></cvcodesnippetoneline-stub>`;
 
-exports[`CvCodeSnippet should render with default props correctly 1`] = `<cvcodesnippetoneline-stub theme="" copyfeedback="Copied!" feedbackarialabel="Copy code" id="test-1" class="cv-code-snippet"><code></code> <textarea aria-hidden="true" class="cv-code-snippet__clippy" style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden;"></textarea></cvcodesnippetoneline-stub>`;
+exports[`CvCodeSnippet should render with default props correctly 1`] = `<cvcodesnippetoneline-stub copyfeedback="Copied!" feedbackarialabel="Copy code" id="test-1" class="cv-code-snippet"><code></code> <textarea aria-hidden="true" class="cv-code-snippet__clippy" style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden;"></textarea></cvcodesnippetoneline-stub>`;
 
-exports[`CvCodeSnippet should render with set \`feedbackAriaLabel\` and \`copyFeedback\` props correctly 1`] = `<cvcodesnippetoneline-stub theme="" copyfeedback="copy feedback test" feedbackarialabel="feedback aria label test" id="test-1" class="cv-code-snippet"><code></code> <textarea aria-hidden="true" class="cv-code-snippet__clippy" style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden;"></textarea></cvcodesnippetoneline-stub>`;
+exports[`CvCodeSnippet should render with set \`feedbackAriaLabel\` and \`copyFeedback\` props correctly 1`] = `<cvcodesnippetoneline-stub copyfeedback="copy feedback test" feedbackarialabel="feedback aria label test" id="test-1" class="cv-code-snippet"><code></code> <textarea aria-hidden="true" class="cv-code-snippet__clippy" style="position: absolute; left: -9999px; max-width: 0; opacity: 0; overflow: hidden;"></textarea></cvcodesnippetoneline-stub>`;
 
 exports[`CvCodeSnippetSkeleton should render correctly when it is \`multiline\` 1`] = `
 <div class="bx--snippet bx--skeleton bx--snippet--multi" id="test-1">

diff --git a/packages/core/__tests__/__snapshots__/cv-loading.test.js.snap b/packages/core/__tests__/__snapshots__/cv-loading.test.js.snap
@@ -2,7 +2,9 @@
 
 exports[`CvLoading should render correctly when active, small and not overlayed 1`] = `
 <cv-wrapper-stub tagtype="" class="cv-loading">
-  <div data-loading="" class="cv-loading bx--loading bx--loading--small"><svg viewBox="-75 -75 150 150" class="bx--loading__svg">
+  <div data-loading="" class="cv-loading bx--loading bx--loading--small"><label class="bx--visually-hidden">
+      Loading
+    </label> <svg viewBox="-75 -75 150 150" class="bx--loading__svg">
       <title>Loading</title>
       <circle cx="0" cy="0" r="26.8125" class="bx--loading__background"></circle>
       <circle cx="0" cy="0" r="26.8125" class="bx--loading__stroke"></circle>
@@ -12,7 +14,9 @@ exports[`CvLoading should render correctly when active, small and not overlayed
 
 exports[`CvLoading should render correctly when active, small and overlayed 1`] = `
 <cv-wrapper-stub tagtype="div" class="cv-loading  0">
-  <div data-loading="" class="bx--loading bx--loading--small"><svg viewBox="-75 -75 150 150" class="bx--loading__svg">
+  <div data-loading="" class="bx--loading bx--loading--small"><label class="bx--visually-hidden">
+      Loading
+    </label> <svg viewBox="-75 -75 150 150" class="bx--loading__svg">
       <title>Loading</title>
       <circle cx="0" cy="0" r="26.8125" class="bx--loading__background"></circle>
       <circle cx="0" cy="0" r="26.8125" class="bx--loading__stroke"></circle>
@@ -22,7 +26,9 @@ exports[`CvLoading should render correctly when active, small and overlayed 1`]
 
 exports[`CvLoading should render correctly when active, with normal size and not overlayed 1`] = `
 <cv-wrapper-stub tagtype="" class="cv-loading">
-  <div data-loading="" class="cv-loading bx--loading"><svg viewBox="-75 -75 150 150" class="bx--loading__svg">
+  <div data-loading="" class="cv-loading bx--loading"><label class="bx--visually-hidden">
+      Loading
+    </label> <svg viewBox="-75 -75 150 150" class="bx--loading__svg">
       <title>Loading</title>
       <!---->
       <circle cx="0" cy="0" r="37.5" class="bx--loading__stroke"></circle>
@@ -32,7 +38,9 @@ exports[`CvLoading should render correctly when active, with normal size and not
 
 exports[`CvLoading should render correctly when active, with normal size and overlayed 1`] = `
 <cv-wrapper-stub tagtype="div" class="cv-loading  0">
-  <div data-loading="" class="bx--loading"><svg viewBox="-75 -75 150 150" class="bx--loading__svg">
+  <div data-loading="" class="bx--loading"><label class="bx--visually-hidden">
+      Loading
+    </label> <svg viewBox="-75 -75 150 150" class="bx--loading__svg">
       <title>Loading</title>
       <!---->
       <circle cx="0" cy="0" r="37.5" class="bx--loading__stroke"></circle>
@@ -42,7 +50,9 @@ exports[`CvLoading should render correctly when active, with normal size and ove
 
 exports[`CvLoading should render correctly when not active, small and not overlayed 1`] = `
 <cv-wrapper-stub tagtype="" class="cv-loading">
-  <div data-loading="" class="cv-loading bx--loading--small"><svg viewBox="-75 -75 150 150" class="bx--loading__svg">
+  <div data-loading="" class="cv-loading bx--loading--small"><label class="bx--visually-hidden">
+      Loading
+    </label> <svg viewBox="-75 -75 150 150" class="bx--loading__svg">
       <title>Loading</title>
       <circle cx="0" cy="0" r="26.8125" class="bx--loading__background"></circle>
       <circle cx="0" cy="0" r="26.8125" class="bx--loading__stroke"></circle>
@@ -52,7 +62,9 @@ exports[`CvLoading should render correctly when not active, small and not overla
 
 exports[`CvLoading should render correctly when not active, small and overlayed 1`] = `
 <cv-wrapper-stub tagtype="div" class="cv-loading  0">
-  <div data-loading="" class="bx--loading--small"><svg viewBox="-75 -75 150 150" class="bx--loading__svg">
+  <div data-loading="" class="bx--loading--small"><label class="bx--visually-hidden">
+      Loading
+    </label> <svg viewBox="-75 -75 150 150" class="bx--loading__svg">
       <title>Loading</title>
       <circle cx="0" cy="0" r="26.8125" class="bx--loading__background"></circle>
       <circle cx="0" cy="0" r="26.8125" class="bx--loading__stroke"></circle>
@@ -62,7 +74,9 @@ exports[`CvLoading should render correctly when not active, small and overlayed
 
 exports[`CvLoading should render correctly when not active, with normal size and not overlayed 1`] = `
 <cv-wrapper-stub tagtype="" class="cv-loading">
-  <div data-loading="" class="cv-loading"><svg viewBox="-75 -75 150 150" class="bx--loading__svg">
+  <div data-loading="" class="cv-loading"><label class="bx--visually-hidden">
+      Loading
+    </label> <svg viewBox="-75 -75 150 150" class="bx--loading__svg">
       <title>Loading</title>
       <!---->
       <circle cx="0" cy="0" r="37.5" class="bx--loading__stroke"></circle>
@@ -72,7 +86,9 @@ exports[`CvLoading should render correctly when not active, with normal size and
 
 exports[`CvLoading should render correctly when not active, with normal size and overlayed 1`] = `
 <cv-wrapper-stub tagtype="div" class="cv-loading  0">
-  <div data-loading="" class=""><svg viewBox="-75 -75 150 150" class="bx--loading__svg">
+  <div data-loading="" class=""><label class="bx--visually-hidden">
+      Loading
+    </label> <svg viewBox="-75 -75 150 150" class="bx--loading__svg">
       <title>Loading</title>
       <!---->
       <circle cx="0" cy="0" r="37.5" class="bx--loading__stroke"></circle>

diff --git a/packages/core/__tests__/__snapshots__/cv-toolbar.test.js.snap b/packages/core/__tests__/__snapshots__/cv-toolbar.test.js.snap
@@ -18,6 +18,6 @@ exports[`CvToolbarOption should render with slot correctly 1`] = `
 
 exports[`CvToolbarOption should render without slot correctly 1`] = `<li class="cv-toolbar-option bx--toolbar-menu__option" id="test-1"></li>`;
 
-exports[`CvToolbarSearch should render correctly 1`] = `<cv-search-stub id="test-1" theme="" cleararialabel="Clear search input" kind="toolbar" small="true" value="check-1" placeholder="Search" toolbararialabel="Toolbar search" class="cv-toolbar-search"></cv-search-stub>`;
+exports[`CvToolbarSearch should render correctly 1`] = `<cv-search-stub id="test-1" cleararialabel="Clear search input" kind="toolbar" small="true" value="check-1" placeholder="Search" toolbararialabel="Toolbar search" class="cv-toolbar-search"></cv-search-stub>`;
 
 exports[`CvToolbarTitle should render correctly 1`] = `<li class="cv-toolbar-title bx--toolbar-menu__title" id="test-1">Toolbar test title</li>`;
diff --git a/packages/core/__tests__/cv-button.test.js b/packages/core/__tests__/cv-button.test.js
@@ -87,6 +87,27 @@ describe('CvIconButton', () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
 
+  it('Renders size (sm) as expected small primary', async () => {
+    const propsData = { kind: 'primary', size: 'sm' };
+    const wrapper = await shallow(CvIconButton, { propsData, slots: { default: 'default slot content' } });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('Renders as expected lg primary', async () => {
+    const propsData = { kind: 'primary', size: 'lg' };
+    const wrapper = await shallow(CvIconButton, { propsData, slots: { default: 'default slot content' } });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it('Renders as expected lg primary', async () => {
+    const propsData = { kind: 'primary', size: 'xl' };
+    const wrapper = await shallow(CvIconButton, { propsData, slots: { default: 'default slot content' } });
+
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
   it('Renders as expected default', async () => {
     const propsData = {};
     const wrapper = await shallow(CvIconButton, { propsData, slots: { default: 'default slot content' } });

diff --git a/packages/core/__tests__/cv-text-area.test.js b/packages/core/__tests__/cv-text-area.test.js
@@ -7,9 +7,8 @@ describe('CvTextArea', () => {
   // ***************
   // PROP CHECKS
   // ***************
-  testComponent.propsAreType(CvTextArea, ['helperText', 'invalidMessage', 'label', 'value', 'id', 'theme'], String);
-  testComponent.propsHaveDefaultOfUndefined(CvTextArea, ['helperText', 'invalidMessage']);
-  testComponent.propsHaveDefault(CvTextArea, ['theme']);
+  testComponent.propsAreType(CvTextArea, ['helperText', 'invalidMessage', 'label', 'value', 'id'], String);
+  testComponent.propsHaveDefaultOfUndefined(CvTextArea, ['helperText', 'invalidMessage', 'light']);
 
   // ***************
   // SNAPSHOT TESTS

diff --git a/packages/core/__tests__/cv-text-input.test.js b/packages/core/__tests__/cv-text-input.test.js
@@ -11,11 +11,11 @@ describe('CvTextInput', () => {
   // ***************
   testComponent.propsAreType(
     CvTextInput,
-    ['helperText', 'invalidMessage', 'label', 'passwordHideLabel', 'passwordShowLabel', 'theme', 'type', 'value', 'id'],
+    ['helperText', 'invalidMessage', 'label', 'passwordHideLabel', 'passwordShowLabel', 'type', 'value', 'id'],
     String
   );
   testComponent.propsAreType(CvTextInput, ['passwordVisible'], Boolean);
-  testComponent.propsHaveDefaultOfUndefined(CvTextInput, ['helperText', 'invalidMessage']);
+  testComponent.propsHaveDefaultOfUndefined(CvTextInput, ['helperText', 'invalidMessage', 'light']);
   testComponent.propsHaveDefault(CvTextInput, ['passwordHideLabel', 'passwordShowLabel']);
 
   // ***************

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -63,8 +63,8 @@
   },
   "sideEffects": true,
   "dependencies": {
-    "@carbon/icons-vue": "10.10.2",
-    "carbon-components": "10.16.0",
+    "@carbon/icons-vue": "10.20.0",
+    "carbon-components": "10.23.1",
     "flatpickr": "4.6.3",
     "vue": "^2.6.12"
   },

diff --git a/packages/core/src/components/cv-accordion/cv-accordion-item.vue b/packages/core/src/components/cv-accordion/cv-accordion-item.vue
@@ -11,14 +11,17 @@
     class="cv-accordion-item"
     :class="[
       `${carbonPrefix}--accordion__item`,
+
       {
+        [`${carbonPrefix}--accordion__item--disabled`]: disabled,
         [`${carbonPrefix}--accordion__item--active`]: dataOpen,
         [`${carbonPrefix}--accordion__item--${this.animation}`]: animation,
       },
     ]"
     @animationend="onAnimationEnd"
   >
     <button
+      :disabled="disabled"
       ref="button"
       type="button"
       :class="`${carbonPrefix}--accordion__heading`"
@@ -45,6 +48,7 @@ export default {
   mixins: [uidMixin, carbonPrefixMixin, methodsMixin({ button: ['blur', 'focus'] })],
   components: { ChevronRight16 },
   props: {
+    disabled: Boolean,
     open: { type: Boolean, default: false },
   },
   watch: {

diff --git a/packages/core/src/components/cv-accordion/cv-accordion-notes.md b/packages/core/src/components/cv-accordion/cv-accordion-notes.md
@@ -61,7 +61,12 @@ CvAccordion
 
 ## Attributes
 
+CvAccordion
+align: Accordion heading alignment (start, end)
+size: default, 'sm' or 'xl'
+
 CvAccordionItem
+disabled: accordion item disabled
 open: accordion item is open
 
 ### Additional

diff --git a/packages/core/src/components/cv-accordion/cv-accordion-skeleton.vue b/packages/core/src/components/cv-accordion/cv-accordion-skeleton.vue
@@ -1,5 +1,13 @@
 <template>
-  <ul :class="`${carbonPrefix}--accordion ${carbonPrefix}--skeleton`">
+  <ul
+    :class="[
+      `${carbonPrefix}--accordion ${carbonPrefix}--skeleton`,
+      {
+        [`${carbonPrefix}--accordion--${align}`]: align,
+        [`${carbonPrefix}--accordion--${size}`]: size,
+      },
+    ]"
+  >
     <cv-accordion-item-skeleton :open="true">
       <cv-skeleton-text width="90%"></cv-skeleton-text>
       <cv-skeleton-text width="80%"></cv-skeleton-text>
@@ -18,6 +26,14 @@ import { carbonPrefixMixin } from '../../mixins';
 
 export default {
   name: 'CvAccordionSkeleton',
+  props: {
+    align: { type: String, default: 'start', validator: val => ['start', 'end', ''].includes(val) },
+    size: {
+      type: String,
+      default: '',
+      validator: val => ['sm', 'xl', ''].includes(val),
+    },
+  },
   mixins: [carbonPrefixMixin],
   components: {
     CvSkeletonText,