feat(text-input): handle 'disabled' state

Setup label and helper text classes when disabled attribute is defined
carbon-design-system · Apr 15, 2023 · f9f811d · f9f811d
1 parent 4c86386
commit f9f811d
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/src/components/CvTextInput/CvTextInput.vue b/src/components/CvTextInput/CvTextInput.vue
@@ -6,7 +6,15 @@
       `${carbonPrefix}--text-input-wrapper`,
     ]"
   >
-    <label :for="cvId" :class="[`${carbonPrefix}--label`]">
+    <label
+      :for="cvId"
+      :class="[
+        `${carbonPrefix}--label`,
+        {
+          [`${carbonPrefix}--label--disabled`]: $attrs.disabled,
+        },
+      ]"
+    >
       {{ label }}
     </label>
     <div
@@ -45,7 +53,13 @@
     <div v-if="isWarn" :class="`${carbonPrefix}--form__requirement`">
       <slot name="warn-text">{{ warnText }}</slot>
     </div>
-    <div v-if="isHelper" :class="[`${carbonPrefix}--form__helper-text`]">
+    <div
+      v-if="isHelper"
+      :class="[
+        `${carbonPrefix}--form__helper-text`,
+        { [`${carbonPrefix}--form__helper-text--disabled`]: $attrs.disabled },
+      ]"
+    >
       <slot name="helper-text">{{ helperText }}</slot>
     </div>
   </div>

diff --git a/src/components/CvTextInput/__tests__/CvTextInput.spec.js b/src/components/CvTextInput/__tests__/CvTextInput.spec.js
@@ -47,6 +47,15 @@ describe('CvTextInput', () => {
     expect(input).toBeDefined();
   });
 
+  it("'disable' label when attribute disabled is set", () => {
+    const { container } = render(CvTextInput, {
+      attrs: { disabled: true },
+    });
+
+    const label = container.querySelector('label.bx--label--disabled');
+    expect(label).toBeTruthy();
+  });
+
   describe('Attribute & event binding', () => {
     it('binds attributes to native input', async () => {
       const dummyName = 'dummy-name';
@@ -300,5 +309,17 @@ describe('CvTextInput', () => {
       expect(wrapper.textContent).toBe(dummySlottedWarnMessage);
       expect(queryByText(dummySlottedHelperMessage)).toBeNull();
     });
+
+    it("'disable' helper text when attribute disabled is set", () => {
+      const { container } = render(CvTextInput, {
+        attrs: { disabled: true },
+        slots: { 'helper-text': 'dummy helper text' },
+      });
+
+      const helperTextContainer = container.querySelector(
+        '.bx--form__helper-text--disabled'
+      );
+      expect(helperTextContainer).toBeTruthy();
+    });
   });
 });