From 04443c58336fbeba394f4a899759659cfdfd9265 Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Tue, 29 Sep 2020 14:55:39 -0500
Subject: [PATCH] feat(TextInput): add `isFluid` from Form context

---
 src/TextInput/PasswordInput.svelte |  6 +++++-
 src/TextInput/TextInput.svelte     | 23 +++++++++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index f0f517f3..c92f933f 100644
--- a/src/TextInput/PasswordInput.svelte
+++ b/src/TextInput/PasswordInput.svelte
@@ -107,17 +107,21 @@
    */
   export let ref = null;
 
+  import { getContext } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
   import View16 from "carbon-icons-svelte/lib/View16";
   import ViewOff16 from "carbon-icons-svelte/lib/ViewOff16";
 
+  const ctx = getContext("Form");
+
+  $: isFluid = !!ctx && ctx.isFluid;
   $: errorId = `error-${id}`;
 </script>
 
 <div
   class:bx--form-item="{true}"
   class:bx--text-input-wrapper="{true}"
-  class:bx--password-input-wrapper="{true}"
+  class:bx--password-input-wrapper="{!isFluid}"
   {...$$restProps}
   on:click
   on:mouseover
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index ae0625f1..89f11724 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -107,9 +107,13 @@
    */
   export let inline = false;
 
+  import { getContext } from "svelte";
   import WarningFilled16 from "carbon-icons-svelte/lib/WarningFilled16";
   import WarningAltFilled16 from "carbon-icons-svelte/lib/WarningAltFilled16";
 
+  const ctx = getContext("Form");
+
+  $: isFluid = !!ctx && ctx.isFluid;
   $: errorId = `error-${id}`;
   $: warnId = `warn-${id}`;
 </script>
@@ -138,7 +142,7 @@
           {labelText}
         </label>
       {/if}
-      {#if helperText}
+      {#if !isFluid && helperText}
         <div
           class:bx--form__helper-text="{true}"
           class:bx--form__helper-text--disabled="{disabled}"
@@ -206,8 +210,19 @@
         on:focus
         on:blur
       />
+      {#if isFluid}
+        <hr className="bx--text-input__divider" />
+      {/if}
+      {#if isFluid && !inline && invalid}
+        <div class:bx--form-requirement="{true}" id="{errorId}">
+          {invalidText}
+        </div>
+      {/if}
+      {#if isFluid && !inline && warn}
+        <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
+      {/if}
     </div>
-    {#if !invalid && !warn && !inline && helperText}
+    {#if !invalid && !warn && !isFluid && !inline && helperText}
       <div
         class:bx--form__helper-text="{true}"
         class:bx--form__helper-text--disabled="{disabled}"
@@ -216,12 +231,12 @@
         {helperText}
       </div>
     {/if}
-    {#if invalid}
+    {#if !isFluid && invalid}
       <div class:bx--form-requirement="{true}" id="{errorId}">
         {invalidText}
       </div>
     {/if}
-    {#if !invalid && warn}
+    {#if !isFluid && !invalid && warn}
       <div class:bx--form-requirement="{true}" id="{warnId}">{warnText}</div>
     {/if}
   </div>