fix incorrect padding for text-field prefix and suffix #327

zdhxiong · Jul 15, 2024 · 5ab270e · 5ab270e
1 parent ae4cce7
commit 5ab270e
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/mdui/src/components/text-field/index.ts b/packages/mdui/src/components/text-field/index.ts
@@ -750,6 +750,8 @@ export class TextField
     const hasEndIcon =
       !!this.endIcon || this.hasSlotController.test('end-icon');
     const hasErrorIcon = this.invalid || this.invalidStyle;
+    const hasPrefix = !!this.prefix || this.hasSlotController.test('prefix');
+    const hasSuffix = !!this.suffix || this.hasSlotController.test('suffix');
     const hasHelper = !!this.helper || this.hasSlotController.test('helper');
     const hasError =
       hasErrorIcon && !!(this.error || this.inputRef.value!.validationMessage);
@@ -768,6 +770,8 @@ export class TextField
       'has-icon': hasIcon,
       'has-end-icon': hasEndIcon,
       'has-error-icon': hasErrorIcon,
+      'has-prefix': hasPrefix,
+      'has-suffix': hasSuffix,
       'is-firefox': navigator.userAgent.includes('Firefox'),
       ...invalidClassNameObj,
     });

diff --git a/packages/mdui/src/components/text-field/style.less b/packages/mdui/src/components/text-field/style.less
@@ -177,11 +177,11 @@
   }
 }
 
-.prefix {
+.has-prefix .prefix {
   .padding-right(2);
 }
 
-.suffix {
+.has-suffix .suffix {
   .padding-left(2);
 }