fix(password-input): support invalid state when used in a FluidForm (#1371)

* fix(password-input): support invalid state when used in a `FluidForm`

* docs(fluid-form): add example "Invalid state"

docs/src/pages/components/FluidForm.svx

@@ -1,15 +1,18 @@
 <script>
-  import { FluidForm, FormGroup, TextInput, PasswordInput, Button,} from "carbon-components-svelte";
+  import {
+    FluidForm,
+    TextInput,
+    PasswordInput,
+  } from "carbon-components-svelte";
   import Preview from "../../components/Preview.svelte";
 </script>
 
 ### Fluid form
 
+Note that the `inline` input variants cannot be used within a `FluidForm`.
+
 <FluidForm>
-  <TextInput
+  <TextInput labelText="User name" placeholder="Enter user name..." required />
-    labelText="User name"
-    placeholder="Enter user name..."
-    required />
   <PasswordInput
     required
     type="password"
@@ -17,3 +20,7 @@
     placeholder="Enter password..."
   />
 </FluidForm>
+
+### Invalid state
+
+<FileSource src="/framed/FluidForm/FluidFormInvalid" />

docs/src/pages/framed/FluidForm/FluidFormInvalid.svelte

@@ -0,0 +1,25 @@
+<script>
+  import {
+    FluidForm,
+    TextInput,
+    PasswordInput,
+  } from "carbon-components-svelte";
+
+  let password = "";
+  let invalid = false;
+
+  $: invalid = !/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/.test(password);
+</script>
+
+<FluidForm>
+  <TextInput labelText="User name" placeholder="Enter user name..." required />
+  <PasswordInput
+    bind:value="{password}"
+    invalid="{invalid}"
+    invalidText="Your password must be at least 6 characters as well as contain at least one uppercase, one lowercase, and one number."
+    required
+    type="password"
+    labelText="Password"
+    placeholder="Enter password..."
+  />
+</FluidForm>

src/TextInput/PasswordInput.svelte

@@ -192,6 +192,13 @@
         on:blur
         on:paste
       />
+      {#if isFluid && invalid}
+        <hr class="bx--text-input__divider" />
+        <div class="bx--form-requirement" id="{errorId}">
+          {invalidText}
+        </div>
+      {/if}
+      {#if !(isFluid && invalid)}
         <button
           type="button"
           disabled="{disabled}"
@@ -225,6 +232,7 @@
             <View class="bx--icon-visibility-on" />
           {/if}
         </button>
+      {/if}
     </div>
     {#if !isFluid && invalid}
       <div class:bx--form-requirement="{true}" id="{errorId}">