fix(addon-commerce): InputCardGroup fix autofill styles (#8794)

taiga-family · Sep 4, 2024 · de3a923 · de3a923
1 parent 1a330a8
commit de3a923
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.style.less b/projects/addon-commerce/components/input-card-group/input-card-group.style.less
@@ -18,6 +18,11 @@
     :host-context(tui-root._mobile) {
         inline-size: @width-mobile;
     }
+
+    // Increasing specificity to override dark mode appearance
+    &[tuiAppearance][data-appearance]:has(:-webkit-autofill) {
+        background: var(--tui-service-autofill-background) !important;
+    }
 }
 
 .t-outline {
@@ -117,15 +122,13 @@
     &:-webkit-autofill {
         -webkit-text-fill-color: var(--tui-text-primary) !important;
         caret-color: var(--tui-text-primary) !important;
-        border-color: var(--tui-service-autofill-background) !important;
-        box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important;
+        transition: background-color 600000s 0s;
     }
 
     &&&_card {
         // @note: (&&&_) it's increasing css cascade priority
-        &:not(.t-input_hidden),
-        &:not(.t-input_hidden)::placeholder,
-        &:not(.t-input_hidden):-webkit-autofill {
+        &:not(:-webkit-autofill):not(:focus:placeholder-shown),
+        &.t-input_filled {
             caret-color: var(--tui-text-primary);
             color: transparent !important;
             -webkit-text-fill-color: transparent !important;
@@ -181,11 +184,13 @@
     .transition(all);
     .text-overflow();
 
+    position: relative;
     margin: 1.125rem 1rem;
     font: var(--tui-font-text-m);
     line-height: 1.25rem;
     color: var(--tui-text-secondary);
 
+    input:-webkit-autofill ~ &,
     &_raised {
         font-size: 0.8156rem;
         transform: translateY(-0.7em);

diff --git a/projects/addon-commerce/components/input-card-group/input-card-group.template.html b/projects/addon-commerce/components/input-card-group/input-card-group.template.html
@@ -13,7 +13,7 @@
             [attr.aria-invalid]="!cardPrefilled && !(this.card | tuiMapper: cardValidator)"
             [attr.id]="id + '_card'"
             [autocomplete]="autocomplete ? 'cc-number' : 'off'"
-            [class.t-input_hidden]="!card.length && focus()"
+            [class.t-input_filled]="card.length"
             [class.t-input_inert]="cardPrefilled"
             [disabled]="disabled()"
             [maskito]="maskCard"

diff --git a/projects/core/styles/theme/appearance/textfield.less b/projects/core/styles/theme/appearance/textfield.less
@@ -42,6 +42,7 @@
         caret-color: var(--tui-text-primary) !important;
         border-color: var(--tui-service-autofill-background) !important;
         box-shadow: 0 0 0 100rem var(--tui-service-autofill-background) inset !important;
+        transition: background-color 600000s 0s;
     }
 }