fix: fix checkbox disabled attriubute to solve CvMultiSelect story issue

carbon-design-system · Jul 25, 2023 · bd455a7 · bd455a7
1 parent 3915267
commit bd455a7
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 10 deletions.
diff --git a/src/components/CvCheckbox/CvCheckbox.stories.js b/src/components/CvCheckbox/CvCheckbox.stories.js
@@ -14,21 +14,18 @@ export default {
   component: CvCheckbox,
   argTypes: {
     ...storybookControlsFromProps(propsCvCheck),
-    label: { description: 'checkbox label' },
     value: {
       type: 'string',
+      description:
+        'The value associated with the input (this is also the value that is sent on submit)',
       table: {
         type: { summary: 'string' },
         category: 'props',
       },
     },
-    hideLabel: {
-      description:
-        'makes the label visually hidden but still labels the checkbox',
-    },
     mixed: {
       type: 'boolean',
-      description: 'if true aria-checkbox set to mixed if checked is false',
+      description: 'Specify whether the Checkbox is in an indeterminate state',
       table: {
         type: { summary: 'boolean' },
         category: 'props',
@@ -47,12 +44,14 @@ export default {
     },
     checked: {
       type: 'boolean',
+      description: 'Specify whether the underlying input should be checked',
       table: {
         type: { summary: 'boolean' },
         category: 'props',
       },
     },
   },
+  parameters: { controls: { exclude: ['change', 'update:modelValue'] } },
 };
 
 const template = `

diff --git a/src/components/CvCheckbox/CvCheckbox.vue b/src/components/CvCheckbox/CvCheckbox.vue
@@ -23,8 +23,7 @@
       :class="[
         `${carbonPrefix}--checkbox-label`,
         {
-          [`${carbonPrefix}--label--disabled`]:
-            $attrs.disabled !== undefined && this.$attrs.disabled,
+          [`${carbonPrefix}--label--disabled`]: disabled,
           [`${carbonPrefix}--checkbox-label__focus`]: hasFocus,
         },
       ]"
@@ -41,16 +40,33 @@
 </template>
 
 <script setup>
-import { ref, toRefs } from 'vue';
+// noinspection ES6PreferShortImport
 import { carbonPrefix } from '../../global/settings';
+import { ref, toRefs } from 'vue';
 import { useCheck, props as propsCvCheck } from '../../use/cvCheck';
 import { useCvId, props as propsCvId } from '../../use/cvId';
 
 const props = defineProps({
+  /**
+   * Specify whether the label should be hidden, or not
+   */
   hideLabel: { type: Boolean, default: null },
+  /**
+   * Provide a label to provide a description of the Checkbox input that you are exposing to the user
+   */
   label: { type: String, default: null },
+  /**
+   * Specify whether the "bx--form-item" style should be applied
+   */
   formItem: { type: Boolean, default: true },
+  /**
+   * Specify whether the "bx--checkbox--inline" style should be applied
+   */
   inline: { type: Boolean, default: false },
+  /**
+   * Specify whether the Checkbox should be disabled
+   */
+  disabled: { type: Boolean, default: false },
   ...propsCvCheck,
   ...propsCvId,
 });

diff --git a/src/components/CvMultiSelect/CvMultiSelect.stories.mdx b/src/components/CvMultiSelect/CvMultiSelect.stories.mdx
@@ -176,6 +176,7 @@ Migration notes:
       label: 'Choose replicants',
       helperText: 'Do Androids Dream of Electric Sheep?',
       title: 'Characters',
+      disabled: false,
     }}
     argTypes={{
       filterTagKind: {
@@ -231,7 +232,6 @@ Migration notes:
           'autoHighlight',
           'change',
           'direction',
-          'disabled',
           'filter',
           'filterTagKind',
           'filterable',

diff --git a/src/use/cvCheck.js b/src/use/cvCheck.js
@@ -5,6 +5,9 @@ import { unref, ref, computed, watch, onMounted } from 'vue';
 
 export const props = {
   modelValue: { type: [Array, Boolean], default: undefined },
+  /**
+   * Specify whether the Checkbox is in an indeterminate state
+   */
   mixed: { type: Boolean, default: null },
   checked: { type: Boolean, default: undefined },
   name: String,