fix(textarea/input): remove prefix/suffix part if hidden

Author: SisIvanova

src/components/input/input-base.ts

@@ -52,10 +52,16 @@ export abstract class IgcInputBaseComponent extends FormAssociatedRequiredMixin(
   @queryAssignedElements({ slot: 'helper-text' })
   protected _helperText!: Array<HTMLElement>;
 
-  @queryAssignedElements({ slot: 'prefix' })
+  @queryAssignedElements({
+    slot: 'prefix',
+    selector: '[slot="prefix"]:not([hidden])',
+  })
   protected prefixes!: Array<HTMLElement>;
 
-  @queryAssignedElements({ slot: 'suffix' })
+  @queryAssignedElements({
+    slot: 'suffix',
+    selector: '[slot="suffix"]:not([hidden])',
+  })
   protected suffixes!: Array<HTMLElement>;
 
   protected get _isMaterial() {

src/components/textarea/textarea.ts

@@ -103,10 +103,16 @@ export default class IgcTextareaComponent extends FormAssociatedRequiredMixin(
   @queryAssignedNodes({ flatten: true })
   private projected!: Array<Node>;
 
-  @queryAssignedElements({ slot: 'prefix' })
+  @queryAssignedElements({
+    slot: 'prefix',
+    selector: '[slot="prefix"]:not([hidden])',
+  })
   protected prefixes!: Array<HTMLElement>;
 
-  @queryAssignedElements({ slot: 'suffix' })
+  @queryAssignedElements({
+    slot: 'suffix',
+    selector: '[slot="suffix"]:not([hidden])',
+  })
   protected suffixes!: Array<HTMLElement>;
 
   @query('textarea', true)

src/components/textarea/themes/shared/textarea.indigo.scss

@@ -109,9 +109,7 @@ textarea {
 
 [part~='prefixed'] [part='prefix'],
 [part~='suffixed'] [part='suffix'] {
-    ::slotted(*) {
-        padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
-    }
+    padding-inline: pad-inline(rem(2px), rem(4px), rem(6px));
 }
 
 [part~='prefixed'] textarea {

src/components/textarea/themes/shared/textarea.material.scss

@@ -211,17 +211,13 @@ textarea {
 
 [part~='prefixed'] {
     [part~='prefix'] {
-        ::slotted(*) {
-            padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
-        }
+        padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
     }
 }
 
 [part~='suffixed'] {
     [part~='suffix'] {
-        ::slotted(*) {
-            padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
-        }
+        padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
     }
 }
 

src/components/textarea/themes/textarea.base.scss

@@ -92,21 +92,17 @@ textarea {
 
 [part~='prefixed'] {
     [part='prefix'] {
-        grid-area: 1 / 1 / auto / auto;
+        @extend %prefix;
 
-        ::slotted(*) {
-            @extend %prefix;
-        }
+        grid-area: 1 / 1 / auto / auto;
     }
 }
 
 [part~='suffixed'] {
     [part='suffix'] {
-        grid-area: 1 / 3 / auto / auto;
+        @extend %suffix;
 
-        ::slotted(*) {
-            @extend %suffix;
-        }
+        grid-area: 1 / 3 / auto / auto;
     }
 }