fix: readonly should override error behavior in TextInput, `Num…

…berInput` (#1666) * fix(text-input): avoid overlapping readonly/invalid icons * fix(number-input): avoid overlapping readonly/invalid icons * fix: readonly inputs cannot be invalid Addresses #1666 (review)
carbon-design-system · Feb 27, 2023 · 6386c33 · 6386c33
1 parent 65a8bbf
commit 6386c33
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 25 deletions.
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
@@ -128,7 +128,7 @@
   $: incrementLabel = translateWithId("increment");
   $: decrementLabel = translateWithId("decrement");
   $: error =
-    invalid ||
+    (invalid && !readonly) ||
     (!allowEmpty && value == null) ||
     value > max ||
     (typeof value === "number" && value < min);
@@ -191,8 +191,8 @@
         type="number"
         pattern="[0-9]*"
         aria-describedby="{errorId}"
-        data-invalid="{invalid || undefined}"
-        aria-invalid="{invalid || undefined}"
+        data-invalid="{(error) || undefined}"
+        aria-invalid="{(error) || undefined}"
         aria-label="{label ? undefined : ariaLabel}"
         disabled="{disabled}"
         id="{id}"
@@ -211,16 +211,17 @@
         on:blur
         on:paste
       />
-      {#if invalid}
-        <WarningFilled class="bx--number__invalid" />
-      {/if}
-      {#if !invalid && warn}
-        <WarningAltFilled
-          class="bx--number__invalid bx--number__invalid--warning"
-        />
-      {/if}
       {#if readonly}
         <EditOff class="bx--text-input__readonly-icon" />
+      {:else}
+        {#if invalid}
+          <WarningFilled class="bx--number__invalid" />
+        {/if}
+        {#if !invalid && warn}
+          <WarningAltFilled
+            class="bx--number__invalid bx--number__invalid--warning"
+          />
+        {/if}
       {/if}
       {#if !hideSteppers}
         <div class:bx--number__controls="{true}">

diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
@@ -95,6 +95,7 @@
   };
 
   $: isFluid = !!ctx && ctx.isFluid;
+  $: error = invalid && !readonly;
   $: helperId = `helper-${id}`;
   $: errorId = `error-${id}`;
   $: warnId = `warn-${id}`;
@@ -161,29 +162,30 @@
     class:bx--text-input__field-outer-wrapper--inline="{inline}"
   >
     <div
-      data-invalid="{invalid || undefined}"
+      data-invalid="{error || undefined}"
       data-warn="{warn || undefined}"
       class:bx--text-input__field-wrapper="{true}"
       class:bx--text-input__field-wrapper--warning="{!invalid && warn}"
     >
-      {#if invalid}
-        <WarningFilled class="bx--text-input__invalid-icon" />
-      {/if}
-      {#if !invalid && warn}
-        <WarningAltFilled
-          class="bx--text-input__invalid-icon
-            bx--text-input__invalid-icon--warning"
-        />
-      {/if}
       {#if readonly}
         <EditOff class="bx--text-input__readonly-icon" />
+      {:else}
+        {#if invalid}
+          <WarningFilled class="bx--text-input__invalid-icon" />
+        {/if}
+        {#if !invalid && warn}
+          <WarningAltFilled
+            class="bx--text-input__invalid-icon
+            bx--text-input__invalid-icon--warning"
+          />
+        {/if}
       {/if}
       <input
         bind:this="{ref}"
-        data-invalid="{invalid || undefined}"
-        aria-invalid="{invalid || undefined}"
+        data-invalid="{error || undefined}"
+        aria-invalid="{error || undefined}"
         data-warn="{warn || undefined}"
-        aria-describedby="{invalid
+        aria-describedby="{error
           ? errorId
           : warn
           ? warnId
@@ -199,7 +201,7 @@
         readonly="{readonly}"
         class:bx--text-input="{true}"
         class:bx--text-input--light="{light}"
-        class:bx--text-input--invalid="{invalid}"
+        class:bx--text-input--invalid="{error}"
         class:bx--text-input--warn="{warn}"
         class:bx--text-input--sm="{size === 'sm'}"
         class:bx--text-input--xl="{size === 'xl'}"