fix: hint from attribute to slot on jp input

Jaspero · Dec 29, 2023 · 94414d5 · 94414d5
1 parent 80848af
commit 94414d5
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 9 deletions.
diff --git a/docs/docs/Form fields/input.md b/docs/docs/Form fields/input.md
@@ -12,7 +12,6 @@
 | placeholder | | `string` | temporary text that appears in an <br></br> input field before any input is entered |
 | name | ✓ | `string` |  name of the form control |
 | id | | `string`| unique identifier |
-| hint | | `string` | shows below the input |
 | disabled | | `boolean` | determines if an input is disabled |
 | list | | `string` | id of datalist (list of predefined values) |
 | min | | `number` | minimal value on numeric input |
@@ -32,7 +31,8 @@
 
 ### Slots
 
-This component does not have any slots.
+- `hint`
+  - renders below the input field
 
 ### Methods
 - `reportValidity` 

diff --git a/packages/lib/src/form-fields/input.wc.svelte b/packages/lib/src/form-fields/input.wc.svelte
@@ -1,7 +1,7 @@
 <svelte:options
   customElement={{
     tag: 'jp-input',
-    shadow: 'none',
+    shadow: 'open',
     extend: (customElementConstructor) => {
       return class extends customElementConstructor {
         static formAssociated = true;
@@ -21,7 +21,6 @@
   export let attachedInternals: ElementInternals;
   export let value: string = '';
   export let label: string = 'Label';
-  export let hint: string = '';
   export let required: boolean = false;
   export let disabled: boolean = false;
   export let readonly: boolean = false;
@@ -91,7 +90,7 @@
   }
 </script>
 
-<div class:has-hint={hint}>
+<div class:has-hint={$$slots.hint}>
   <label class="field" class:disabled={disabled || readonly} class:required>
     <span class="field-label" class:move={inputFocused || value}>{@html label}</span>
 
@@ -222,10 +221,10 @@
     {/if}
   </label>
 
-  {#if hint}
-    <span class="field-hint">
-      {@html hint}
-    </span>
+  {#if $$slots.hint}
+    <div class="field-hint">
+      <slot name="hint"/>
+    </div>
   {/if}
 </div>