chore(core): Textfield remove border (#9129)

taiga-family · Sep 23, 2024 · cee35ee · cee35ee
1 parent d5628e7
commit cee35ee
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 26 deletions.
diff --git a/projects/core/styles/components/textfield.less b/projects/core/styles/components/textfield.less
@@ -4,6 +4,7 @@ tui-textfield {
     .transition(color);
 
     --t-height: var(--tui-height-l);
+    --t-padding: var(--tui-padding-l);
 
     position: relative;
     display: flex;
@@ -12,7 +13,7 @@ tui-textfield {
     cursor: pointer;
     block-size: var(--t-height);
     color: var(--tui-text-tertiary);
-    padding: 0 var(--tui-padding-l);
+    padding: 0 var(--t-padding);
     border-radius: var(--tui-radius-l);
     font: var(--tui-font-text-m);
     box-sizing: border-box;
@@ -36,8 +37,8 @@ tui-textfield {
 
     &[data-size='s'] {
         --t-height: var(--tui-height-s);
+        --t-padding: var(--tui-padding-s);
 
-        padding: 0 var(--tui-padding-s);
         border-radius: var(--tui-radius-m);
         font: var(--tui-font-text-s);
 
@@ -72,8 +73,8 @@ tui-textfield {
 
     &[data-size='m'] {
         --t-height: var(--tui-height-m);
+        --t-padding: var(--tui-padding-m);
 
-        padding: 0 var(--tui-padding-m);
         border-radius: var(--tui-radius-m);
         font: var(--tui-font-text-s);
 
@@ -175,11 +176,11 @@ tui-textfield {
 
         appearance: none;
         box-sizing: border-box;
-        border: none;
-        border-inline-start: var(--t-left, 0) solid transparent !important;
-        border-inline-end: calc(var(--t-right, var(--t-0, 0rem)) + var(--t-side)) solid transparent !important;
         border-radius: inherit;
         padding: inherit;
+        border: none;
+        text-indent: var(--t-left, 0);
+        padding-inline-end: calc(var(--t-right, var(--t-0, 0rem)) + var(--t-side) + var(--t-padding));
     }
 
     .t-template {

diff --git a/projects/core/styles/theme/appearance/textfield.less b/projects/core/styles/theme/appearance/textfield.less
@@ -40,7 +40,6 @@
     &:-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;
 

diff --git a/projects/kit/components/input-phone-international/input-phone-international.style.less b/projects/kit/components/input-phone-international/input-phone-international.style.less
@@ -1,6 +1,6 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
-.t-country-select {
+.t-select {
     inline-size: 5.625rem;
     flex: none;
 
@@ -16,22 +16,14 @@
 .t-flag {
     inline-size: 1.75rem;
     block-size: 1.75rem;
-    border-radius: 50%;
-
-    &_select {
-        .fullsize(absolute, inset);
-
-        left: 0.5rem;
-        margin: auto;
-    }
+    border-radius: 100%;
 }
 
-.t-country-item-name {
-    margin-inline-start: 0.75rem;
-    margin-inline-end: auto;
+.t-name {
+    margin: 0 auto 0 0.75rem;
 }
 
-.t-country-item-code {
+.t-code {
     color: var(--tui-text-secondary);
     margin-inline-end: 0.25rem;
 }
diff --git a/projects/kit/components/input-phone-international/input-phone-international.template.html b/projects/kit/components/input-phone-international/input-phone-international.template.html
@@ -1,5 +1,5 @@
 <tui-textfield
-    class="t-country-select"
+    class="t-select"
     [content]="flag"
     [tuiChevron]="open()"
 >
@@ -14,7 +14,7 @@
 
     <ng-template #flag>
         <img
-            class="t-flag t-flag_select"
+            class="t-flag"
             [alt]="names()?.[countryIsoCode()]"
             [src]="countryIsoCode() | tuiFlag"
         />
@@ -65,8 +65,8 @@
             class="t-flag"
             [src]="item | tuiFlag"
         />
-        <span class="t-country-item-name">{{ names()?.[item] }}</span>
-        <span class="t-country-item-code">
+        <span class="t-name">{{ names()?.[item] }}</span>
+        <span class="t-code">
             {{ item | tuiGetCountryCallingCode: metadata() }}
         </span>
     </button>

diff --git a/...kit/components/input-phone-international/test/input-phone-international.component.spec.ts b/...kit/components/input-phone-international/test/input-phone-international.component.spec.ts
@@ -216,14 +216,14 @@ describe('InputPhoneInternational', () => {
 
     function getDropdownCountryNames(): string[] {
         const countryNameContainers =
-            fixture.debugElement.queryAll(By.css('.t-country-item-name')) || [];
+            fixture.debugElement.queryAll(By.css('.t-name')) || [];
 
         return countryNameContainers.map((container) =>
             container.nativeElement.textContent?.trim(),
         );
     }
 
     function getCountrySelector(): DebugElement {
-        return fixture.debugElement.query(By.css('.t-country-select select'));
+        return fixture.debugElement.query(By.css('.t-select select'));
     }
 });