fix(input-group): transition label only when not filled (#14809)

* fix(input-group): transition label only when not filled * chore(input-group): remove commented out line
IgniteUI · Sep 24, 2024 · 3f14d17 · 3f14d17
1 parent c5b0528
commit 3f14d17
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-component.scss
@@ -158,6 +158,8 @@
         }
 
         @include mx(textarea-group, placeholder) {
+            @extend %form-group-placeholder !optional;
+
             @include e(notch) {
                 @extend %textarea-group-notch--focused !optional;
             }
@@ -178,6 +180,8 @@
         }
 
         @include mx(textarea-group, placeholder, border) {
+            @extend %form-group-placeholder !optional;
+
             @include e(notch) {
                 @extend %textarea-group-notch--focused !optional;
             }
@@ -212,6 +216,8 @@
         }
 
         @include m(placeholder) {
+            @extend %form-group-placeholder !optional;
+
             @include e(label) {
                 @extend %form-group-label--float !optional;
                 @extend %form-group-label--fixed !optional;
@@ -381,6 +387,8 @@
         }
 
         @include mx(box, textarea-group, placeholder) {
+            @extend %form-group-placeholder !optional;
+
             @include e(notch) {
                 @extend %form-group-notch--box-textarea !optional;
             }
@@ -460,6 +468,7 @@
 
         @include mx(border, placeholder) {
             @extend %form-group-label--placeholder-border !optional;
+            @extend %form-group-placeholder !optional;
 
             @include e(label) {
                 @extend %form-group-label--float-border !optional;
@@ -580,6 +589,8 @@
         }
 
         @include mx(fluent, placeholder) {
+            @extend %form-group-placeholder !optional;
+
             @include e(label) {
                 @extend %fluent-placeholder-label !optional;
             }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/input/_input-group-theme.scss
@@ -462,6 +462,18 @@
         }
     }
 
+    %form-group-placeholder {
+        %form-group-label {
+            transition: none !important;
+        }
+    }
+
+    %form-group-display:not(%form-group-display--filled) {
+        %form-group-label {
+            transition: all $transition-timing;
+        }
+    }
+
     %form-group-display--no-margin {
         margin-block-start: 0;
     }
@@ -883,7 +895,6 @@
         backface-visibility: hidden;
         will-change: transform;
         transform-origin: top left;
-        transition: all $transition-timing;
         margin-inline-start: pad-inline(0, rem(-2px), rem(-4px));
     }
 

diff --git a/src/app/input-group/input-group.sample.ts b/src/app/input-group/input-group.sample.ts
@@ -48,7 +48,7 @@ export class InputGroupSampleComponent implements OnInit, AfterViewInit {
     public alignment: ButtonGroupAlignment = ButtonGroupAlignment.vertical;
 
     public displayDensities: Selection[];
-    public inputType: IgxInputGroupType = null;
+    public inputType: IgxInputGroupType = 'box';
     public inputTypes: Selection[];
     public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango'];