fix(file-uploader): setup 'disabled' as props

carbon-design-system · Sep 19, 2023 · 6298294 · 6298294
1 parent b986494
commit 6298294
Show file tree

Hide file tree

Showing 3 changed files with 151 additions and 4 deletions.
diff --git a/src/components/CvFileUploader/CvFileUploader.stories.mdx b/src/components/CvFileUploader/CvFileUploader.stories.mdx
@@ -107,6 +107,14 @@ export const argTypes = {
     },
     description: 'Reset file list when files are added',
   },
+  disabled: {
+    type: 'boolean',
+    table: {
+      type: { summary: 'boolean' },
+      category: 'props',
+    },
+    description: 'Disables input',
+  },
   dropTargetLabel: {
     type: 'string',
     table: {

diff --git a/src/components/CvFileUploader/CvFileUploader.vue b/src/components/CvFileUploader/CvFileUploader.vue
@@ -1,11 +1,28 @@
 <template>
   <cv-form-item class="cv-file-uploader">
-    <p :class="`${carbonPrefix}--file--label`">{{ label }}</p>
-    <p :class="`${carbonPrefix}--label-description`">{{ helperText }}</p>
+    <p
+      :class="[
+        `${carbonPrefix}--file--label`,
+        { [`${carbonPrefix}--file--label--disabled`]: disabled },
+      ]"
+    >
+      {{ label }}
+    </p>
+    <p
+      :class="[
+        `${carbonPrefix}--label-description`,
+        { [`${carbonPrefix}--label-description--disabled`]: disabled },
+      ]"
+    >
+      {{ helperText }}
+    </p>
     <div v-if="kind === 'button'" :class="`${carbonPrefix}--file`" data-file>
       <label
         :for="cvId"
-        :class="buttonClasses"
+        :class="[
+          buttonClasses,
+          { [`${carbonPrefix}--btn--disabled`]: disabled },
+        ]"
         tabindex="0"
         @keydown.enter.prevent="onKeyHit"
         @keydown.space.prevent="onKeyHit"
@@ -17,6 +34,7 @@
         ref="fileInput"
         :class="`${carbonPrefix}--file-input`"
         :accept="accept"
+        :disabled="disabled"
         type="file"
         v-bind="$attrs"
         data-file-uploader
@@ -34,8 +52,10 @@
             `${carbonPrefix}--file-browse-btn`,
             `${carbonPrefix}--file__drop-container`,
             {
-              [`${carbonPrefix}--file__drop-container--drag-over`]: allowDrop,
+              [`${carbonPrefix}--file__drop-container--drag-over`]:
+                allowDrop && !disabled,
             },
+            { [`${carbonPrefix}--file-browse-btn--disabled`]: disabled },
           ]"
           @dragover="onDragEvent"
           @dragleave="onDragEvent"
@@ -50,6 +70,7 @@
           ref="fileInput"
           :class="`${carbonPrefix}--file-input`"
           :accept="accept"
+          :disabled="disabled"
           type="file"
           v-bind="$attrs"
           tabindex="-1"
@@ -107,6 +128,7 @@ const props = defineProps({
   },
   buttonSize: commonCvButtonProps.size,
   clearOnReselect: Boolean,
+  disabled: Boolean,
   dropTargetLabel: String,
   helperText: String,
   initialStateUploading: Boolean,
@@ -217,6 +239,11 @@ function onChange(ev) {
 }
 
 function onDragEvent(evt) {
+  if (props.disabled) {
+    evt.preventDefault();
+    return;
+  }
+
   if (Array.prototype.indexOf.call(evt.dataTransfer.types, 'Files') === -1) {
     return;
   }

diff --git a/src/components/CvFileUploader/__tests__/CvFileUploader.spec.js b/src/components/CvFileUploader/__tests__/CvFileUploader.spec.js
@@ -1,4 +1,5 @@
 import { render, fireEvent } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
 import { KINDS, STATES } from '../const';
 import { carbonPrefix } from '../../../global/settings';
 import { buttonKinds, buttonSizes } from '../../CvButton/consts';
@@ -408,6 +409,117 @@ describe('CvFileUploader', () => {
     );
   });
 
+  describe('Disabled state', () => {
+    it('renders label in disabled state', async () => {
+      const dummyLabel = 'Dummy File Input';
+      const { findByText } = render(CvFileUploader, {
+        props: {
+          label: dummyLabel,
+          disabled: true,
+        },
+      });
+
+      const label = await findByText(dummyLabel);
+      expect(
+        label.classList.contains(`${carbonPrefix}--file--label--disabled`)
+      ).toBeTruthy();
+    });
+
+    it('renders helper text in disable state', async () => {
+      const dummyHelperText = 'Dummy Helper Text';
+      const { findByText } = render(CvFileUploader, {
+        props: {
+          helperText: dummyHelperText,
+          disabled: true,
+        },
+      });
+
+      const element = await findByText(dummyHelperText);
+      expect(
+        element.classList.contains(
+          `${carbonPrefix}--label-description--disabled`
+        )
+      ).toBeTruthy();
+    });
+
+    it('renders "button" in disabled state', async () => {
+      const dummyId = 'dummy-id';
+      const { container } = render(CvFileUploader, {
+        props: {
+          kind: KINDS.BUTTON,
+          id: dummyId,
+          disabled: true,
+        },
+      });
+
+      const fileInput = container.querySelector(`#${dummyId}`);
+      const label = container.querySelector('label');
+
+      expect(fileInput.getAttribute('disabled')).not.toBeNull();
+      expect(
+        label.classList.contains(`${carbonPrefix}--btn--disabled`)
+      ).toBeTruthy();
+    });
+
+    it('does not emit changes on click when button is disabled', async () => {
+      const dummyFile = new File(['file content'], 'dummy-file.txt', {
+        type: 'text/plain',
+      });
+      const dummyId = 'dummy-id';
+      const { container, emitted } = render(CvFileUploader, {
+        props: {
+          kind: KINDS.BUTTON,
+          id: dummyId,
+          disabled: true,
+        },
+      });
+
+      const fileInput = container.querySelector(`#${dummyId}`);
+      await userEvent.upload(fileInput, dummyFile);
+
+      expect(emitted('update:modelValue')).toBeUndefined();
+    });
+
+    it('renders "drag & drop" in disabled state', async () => {
+      const dummyId = 'dummy-id';
+      const { container } = render(CvFileUploader, {
+        props: {
+          kind: KINDS.DRAG_TARGET,
+          id: dummyId,
+          disabled: true,
+        },
+      });
+
+      const fileInput = container.querySelector(`#${dummyId}`);
+      const wrapper = container.querySelector(
+        `div.${carbonPrefix}--file-browse-btn`
+      );
+
+      expect(fileInput.getAttribute('disabled')).not.toBeNull();
+      expect(
+        wrapper.classList.contains(`${carbonPrefix}--file-browse-btn--disabled`)
+      ).toBeTruthy();
+    });
+
+    it("does not emit changes when drag & drop's input is disabled", async () => {
+      const dummyFile = new File(['file content'], 'dummy-file.txt', {
+        type: 'text/plain',
+      });
+      const dummyId = 'dummy-id';
+      const { container, emitted } = render(CvFileUploader, {
+        props: {
+          id: dummyId,
+          disabled: true,
+        },
+      });
+
+      const fileInput = container.querySelector(`#${dummyId}`);
+      await userEvent.upload(fileInput, dummyFile);
+
+      expect(emitted('update:modelValue')).toBeUndefined();
+    });
+  });
+
   describe('Drop target label', () => {
     it.each(inputKinds)(
       'renders drop target label when dropTargetLabel is passed (kind: %s)',