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,19 +1,26 @@
 <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
-    labelText="User name"
-    placeholder="Enter user name..."
-    required />
+  <TextInput labelText="User name" placeholder="Enter user name..." required />
   <PasswordInput
     required
     type="password"
     labelText="Password"
     placeholder="Enter password..."
   />
-</FluidForm>
+</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,39 +192,47 @@
         on:blur
         on:paste
       />
-      <button
-        type="button"
-        disabled="{disabled}"
-        class:bx--text-input--password__visibility__toggle="{true}"
-        class:bx--btn="{true}"
-        class:bx--btn--icon-only="{true}"
-        class:bx--btn--disabled="{disabled}"
-        class:bx--tooltip__trigger="{true}"
-        class:bx--tooltip--a11y="{true}"
-        class:bx--tooltip--top="{tooltipPosition === 'top'}"
-        class:bx--tooltip--right="{tooltipPosition === 'right'}"
-        class:bx--tooltip--bottom="{tooltipPosition === 'bottom'}"
-        class:bx--tooltip--left="{tooltipPosition === 'left'}"
-        class:bx--tooltip--align-start="{tooltipAlignment === 'start'}"
-        class:bx--tooltip--align-center="{tooltipAlignment === 'center'}"
-        class:bx--tooltip--align-end="{tooltipAlignment === 'end'}"
-        on:click="{() => {
-          type = type === 'password' ? 'text' : 'password';
-        }}"
-      >
-        {#if !disabled}
-          <span class:bx--assistive-text="{true}">
-            {#if type === "text"}
-              {hidePasswordLabel}
-            {:else}{showPasswordLabel}{/if}
-          </span>
-        {/if}
-        {#if type === "text"}
-          <ViewOff class="bx--icon-visibility-off" />
-        {:else}
-          <View class="bx--icon-visibility-on" />
-        {/if}
-      </button>
+      {#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}"
+          class:bx--text-input--password__visibility__toggle="{true}"
+          class:bx--btn="{true}"
+          class:bx--btn--icon-only="{true}"
+          class:bx--btn--disabled="{disabled}"
+          class:bx--tooltip__trigger="{true}"
+          class:bx--tooltip--a11y="{true}"
+          class:bx--tooltip--top="{tooltipPosition === 'top'}"
+          class:bx--tooltip--right="{tooltipPosition === 'right'}"
+          class:bx--tooltip--bottom="{tooltipPosition === 'bottom'}"
+          class:bx--tooltip--left="{tooltipPosition === 'left'}"
+          class:bx--tooltip--align-start="{tooltipAlignment === 'start'}"
+          class:bx--tooltip--align-center="{tooltipAlignment === 'center'}"
+          class:bx--tooltip--align-end="{tooltipAlignment === 'end'}"
+          on:click="{() => {
+            type = type === 'password' ? 'text' : 'password';
+          }}"
+        >
+          {#if !disabled}
+            <span class:bx--assistive-text="{true}">
+              {#if type === "text"}
+                {hidePasswordLabel}
+              {:else}{showPasswordLabel}{/if}
+            </span>
+          {/if}
+          {#if type === "text"}
+            <ViewOff class="bx--icon-visibility-off" />
+          {:else}
+            <View class="bx--icon-visibility-on" />
+          {/if}
+        </button>
+      {/if}
     </div>
     {#if !isFluid && invalid}
       <div class:bx--form-requirement="{true}" id="{errorId}">