Detect error slot for inputs instead of hasErrors prop (#462)

brave · Oct 30, 2023 · 244721a · 244721a
1 parent cf1055f
commit 244721a
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 17 deletions.
diff --git a/src/components/dropdown/dropdown.stories.svelte b/src/components/dropdown/dropdown.stories.svelte
@@ -121,9 +121,9 @@
     </Slot>
     <Slot
       name="error"
-      explanation="A slot where any errors related to the component will be shown. Errors are only shown if showErrors and hasErrors are set on the Dropdown (this one has them forced on)"
+      explanation="A slot where any errors related to the component will be shown. Errors are only shown if showErrors is set and an error slot exists on the Dropdown (this one has them forced on)"
     >
-      <Dropdown {...args} hasErrors showErrors>
+      <Dropdown {...args} showErrors>
         <leo-option value="Error 1">Error 1</leo-option>
         <leo-option value="Error 2">Error 2</leo-option>
         <leo-option value="Error 3">Error 3</leo-option>

diff --git a/src/components/dropdown/dropdown.svelte b/src/components/dropdown/dropdown.svelte
@@ -29,7 +29,6 @@
   export let required = false
   export let mode: Mode = 'outline'
 
-  export let hasErrors = false
   export let showErrors = false
 
   let dispatch = createEventDispatcher()
@@ -55,7 +54,7 @@
       bind:size
       {mode}
       showFocusOutline={isOpen}
-      error={hasErrors && showErrors}
+      error={showErrors && $$slots.errors}
     >
       <slot name="label" slot="label" />
       <slot name="left-icon" slot="left-icon" />
@@ -103,7 +102,7 @@
     <slot />
   </Menu>
 </div>
-{#if showErrors && hasErrors}
+{#if showErrors}
   <slot name="errors" />
 {/if}
 

diff --git a/src/components/input/input.stories.svelte b/src/components/input/input.stories.svelte
@@ -95,9 +95,9 @@
     </Slot>
     <Slot
       name="errors"
-      explanation="A slot where any errors related to the component will be shown. Errors are only show if showErrors and hasErrors are set on the Input (this one has them forced on)"
+      explanation="A slot where any errors related to the component will be shown. Errors are only show if showErrors is set and an error slot exists on the Input (this one has them forced on)"
     >
-      <Input {...args} hasErrors showErrors>
+      <Input {...args} showErrors>
         <div slot="errors">
           Your password must contain a proof of Pythagoras' theorem!
         </div>

diff --git a/src/components/input/input.svelte b/src/components/input/input.svelte
@@ -27,7 +27,6 @@
     type?: LeoInputTypeAttribute
     value?: string | number | boolean
     size?: Size
-    hasErrors?: boolean
     showErrors?: boolean
     mode?: Mode | undefined
   }
@@ -61,13 +60,6 @@
    */
   export let size: Size = 'normal'
 
-  /**
-   * Whether the component has any errors. If true, and showErrors is set then
-   * the errors slot will be rendered and the component will show in its error
-   * state.
-   */
-  export let hasErrors = false
-
   /**
    * Whether any errors the component has should be shown.
    */
@@ -129,7 +121,7 @@
   bind:disabled
   {size}
   {mode}
-  error={(hasErrors || hasErrorsInternal) && showErrors}
+  error={($$slots.errors || hasErrorsInternal) && showErrors}
 >
   <slot name="left-icon" slot="left-icon" />
   <div class="input-container">
@@ -164,7 +156,7 @@
   </slot>
   <slot slot="label" />
 </FormItem>
-{#if showErrors && hasErrors}
+{#if showErrors}
   <slot name="errors" />
 {/if}