fix: cv-overflow-menu-item & several other components - resolve attri…

…bute coercion warning
carbon-design-system · Mar 10, 2024 · ed0e34d · ed0e34d
1 parent fb54660
commit ed0e34d
Show file tree

Hide file tree

Showing 10 changed files with 26 additions and 17 deletions.
diff --git a/src/components/CvAccordion/CvAccordion.stories.mdx b/src/components/CvAccordion/CvAccordion.stories.mdx
@@ -13,6 +13,11 @@ const open = ref({
   accItem3: false,
   accItem4: false,
 });
+const disabledItems = ref(new Set())
+function onToggleEpisode3(){
+  if (disabledItems.value.has(3)) disabledItems.value.delete(3)
+  else disabledItems.value.add(3)
+}
 
 <Meta title={`${sbCompPrefix}/CvAccordion`} component={CvAccordion} />
 
@@ -24,19 +29,23 @@ export const Template = args => ({
       align: alignConsts[alignConsts.$labels[args.align]],
       size: sizeConsts[sizeConsts.$labels[args.size]],
       onChange: action('change'),
+      disabledItems,
+      onToggleEpisode3,
       open,
     };
   },
   template: args.template,
 });
 const template = `<cv-accordion @change="onChange" :align="align" :size="size">
-  <cv-accordion-item v-for="n in 4" :key="\`acc-item-\${n}\`" :id="n % 2 ? \`acc-item-\${n}\` : ''">
+  <cv-accordion-item v-for="n in 4" :key="\`acc-item-\${n}\`" :id="n % 2 ? \`acc-item-\${n}\` : ''" :disabled="disabledItems.has(n)">
     <template v-slot:title>Episode {{n}} </template>
     <template v-slot:content>
       <p>Did you hear that? They've shut down the main reactor. We'll be destroyed for sure. This is madness! We're doomed! There'll be no escape for the Princess this time. What's that? R2! R2-D2, where are you? At last! Where have you been? They're heading in this direction.</p>
     </template>
   </cv-accordion-item>
-</cv-accordion>`;
+</cv-accordion>
+<div><button @click="onToggleEpisode3">Disable Episode 3</button></div>
+`;
 const Default = Template.bind({});
 Default.args = {};
 Default.parameters = storyParametersObject(

diff --git a/src/components/CvAccordion/CvAccordionItem.vue b/src/components/CvAccordion/CvAccordionItem.vue
@@ -15,7 +15,7 @@
   >
     <button
       ref="button"
-      :disabled="disabled"
+      :disabled="disabled || null"
       type="button"
       :class="`${carbonPrefix}--accordion__heading`"
       :aria-expanded="isOpen ? 'true' : 'false'"

diff --git a/src/components/CvButton/CvIconButton.vue b/src/components/CvButton/CvIconButton.vue
@@ -7,7 +7,7 @@
       `${carbonPrefix}--tooltip--${tipPosition || 'bottom'}`,
       `${carbonPrefix}--tooltip--align-${tipAlignment || 'center'}`,
     ]"
-    :disabled="disabled"
+    :disabled="disabled || null"
     @click="$emit('click', $event)"
   >
     <span :class="`${carbonPrefix}--assistive-text`">{{ label }}</span>

diff --git a/src/components/CvComboBox/CvComboBox.vue b/src/components/CvComboBox/CvComboBox.vue
@@ -62,7 +62,7 @@
           :aria-disabled="disabled || null"
           :aria-expanded="open ? 'true' : 'false'"
           autocomplete="off"
-          :disabled="disabled"
+          :disabled="disabled || null"
           :placeholder="label"
           @input="onInput"
           @focus="inputFocus"

diff --git a/src/components/CvDropdown/CvDropdown.vue b/src/components/CvDropdown/CvDropdown.vue
@@ -77,7 +77,7 @@
           :aria-expanded="open ? 'true' : 'false'"
           :aria-labelledby="ariaLabeledBy"
           :class="`${carbonPrefix}--list-box__field`"
-          :disabled="disabled"
+          :disabled="disabled || null"
           aria-haspopup="true"
           type="button"
         >
@@ -293,9 +293,9 @@ watch(open, () => {
 });
 const ariaLabeledBy = computed(() => {
   if (props.label) {
-    return `${uid}-label ${uid}-value`;
+    return `${uid.value}-label ${uid.value}-value`;
   } else {
-    return `${uid}-value`;
+    return `${uid.value}-value`;
   }
 });
 const internalCaption = computed(() => {

diff --git a/src/components/CvFileUploader/CvFileUploader.vue b/src/components/CvFileUploader/CvFileUploader.vue
@@ -34,7 +34,7 @@
         ref="fileInput"
         :class="`${carbonPrefix}--file-input`"
         :accept="accept"
-        :disabled="disabled"
+        :disabled="disabled || null"
         type="file"
         v-bind="$attrs"
         data-file-uploader
@@ -70,7 +70,7 @@
           ref="fileInput"
           :class="`${carbonPrefix}--file-input`"
           :accept="accept"
-          :disabled="disabled"
+          :disabled="disabled || null"
           type="file"
           v-bind="$attrs"
           tabindex="-1"

diff --git a/src/components/CvNumberInput/CvNumberInput.vue b/src/components/CvNumberInput/CvNumberInput.vue
@@ -38,7 +38,7 @@
           :data-invalid="isInvalid || null"
           type="number"
           v-bind="$attrs"
-          :disabled="disabled"
+          :disabled="disabled || null"
           :step="step"
           :min="min"
           :max="max"
@@ -53,7 +53,7 @@
             :class="`${carbonPrefix}--number__control-btn down-icon`"
             type="button"
             :aria-label="ariaLabelForDownButton"
-            :disabled="disabled"
+            :disabled="disabled || null"
             aria-live="polite"
             aria-atomic="true"
             @click="doDown"
@@ -67,7 +67,7 @@
             :class="`${carbonPrefix}--number__control-btn up-icon`"
             type="button"
             :aria-label="ariaLabelForUpButton"
-            :disabled="disabled"
+            :disabled="disabled || null"
             aria-live="polite"
             aria-atomic="true"
             @click="doUp"

diff --git a/src/components/CvOverflowMenu/CvOverflowMenuItem.vue b/src/components/CvOverflowMenu/CvOverflowMenuItem.vue
@@ -13,8 +13,8 @@
     <button
       type="button"
       :class="`${carbonPrefix}--overflow-menu-options__btn`"
-      :data-floating-menu-primary-focus="primaryFocus"
-      :disabled="disabled"
+      :data-floating-menu-primary-focus="primaryFocus || null"
+      :disabled="disabled || null"
       @click="onClick"
     >
       <span :class="`${carbonPrefix}--overflow-menu-options__option-content`">

diff --git a/src/components/CvSlider/CvSlider.vue b/src/components/CvSlider/CvSlider.vue
@@ -76,7 +76,7 @@
           { [`${carbonPrefix}--text-input--light`]: isLight },
         ]"
         :placeholder="min"
-        :disabled="disabled"
+        :disabled="disabled || null"
         @change="onChange"
         @keydown.up.prevent="onUp"
         @keydown.down.prevent="onDown"

diff --git a/src/components/CvTag/CvTag.vue b/src/components/CvTag/CvTag.vue
@@ -8,7 +8,7 @@
       v-if="filter"
       :class="`${carbonPrefix}--tag__close-icon`"
       :aria-label="clearAriaLabel"
-      :disabled="disabled"
+      :disabled="disabled || null"
       @click.stop.prevent="onRemove"
     >
       <Close16 />