perf(badge): increase size when used alone (#1118)

* fix: fix text-overflow bug * docs: support docs site for 1.x * chore: sort versions * fix: fix readOnly style of CustomInput * fix: clear event and remove useless element * perf(badge): increase size when used alone
ZhongAnTech · Jun 8, 2023 · 606c676 · 606c676 · vercel · Jun 8, 2023
1 parent 6762785
commit 606c676
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 13 deletions.
diff --git a/packages/zarm/src/badge/Badge.tsx b/packages/zarm/src/badge/Badge.tsx
@@ -10,6 +10,7 @@ export interface BadgeCssVars {
   '--text-color'?: React.CSSProperties['color'];
   '--border-color'?: React.CSSProperties['borderColor'];
   '--font-size'?: React.CSSProperties['fontSize'];
+  '--font-weight'?: React.CSSProperties['fontWeight'];
   '--height'?: React.CSSProperties['height'];
   '--padding-horizontal'?: React.CSSProperties['padding'];
   '--border-radius'?: React.CSSProperties['borderRadius'];

diff --git a/packages/zarm/src/badge/demo.md b/packages/zarm/src/badge/demo.md
@@ -73,7 +73,7 @@ ReactDOM.render(
       </Badge>
     </div>
     <div className="box">
-      <Badge bordered shape="rect" text="免费">
+      <Badge bordered shape="round" text="免费">
         <div className="box-item" />
       </Badge>
     </div>
@@ -131,6 +131,7 @@ ReactDOM.render(
 | --text-color         | '#fff'                   | 徽标文字颜色                           |
 | --border-color       | '#fff'                   | 徽标边框色                             |
 | --font-size          | '10px'                   | 徽标文字字体大小                       |
+| --font-weight        | 600                      | 徽标文字字体粗细                       |
 | --height             | '14px'                   | 徽标高度                               |
 | --padding-horizontal | '4px'                    | 徽标左右内边距                         |
 | --border-radius      | 'var(--za-radius-sm)'    | 徽标圆角大小                           |

diff --git a/packages/zarm/src/badge/style/component.scss b/packages/zarm/src/badge/style/component.scss
@@ -3,8 +3,9 @@
   @include define(color, var(--za-theme-danger));
   @include define(text-color, #fff);
   @include define(border-color, #fff);
-  @include define(font-size, 10px);
-  @include define(height, 14px);
+  @include define(font-size, 12px);
+  @include define(font-weight, 600);
+  @include define(height, 20px);
   @include define(padding-horizontal, 4px);
   @include define(border-radius, var(--za-radius-sm));
   @include define(top, 0);
@@ -26,6 +27,7 @@
     background-color: var(--color);
     color: var(--text-color);
     font-size: var(--font-size);
+    font-weight: var(--font-weight);
     height: var(--height);
     padding: 0 var(--padding-horizontal);
     white-space: nowrap;
@@ -35,9 +37,9 @@
 
   @include m(dot) {
     @include define(height, var(--dot-size));
+
     @include e(content) {
-      width: var(--dot-size);
-      height: var(--dot-size);
+      width: var(--height);
       border-radius: 50%;
       padding: 0;
     }
@@ -72,6 +74,13 @@
   }
 
   @include m(sup) {
+    @include define(font-size, 10px);
+    @include define(height, 16px);
+
+    @include m(dot) {
+      @include define(height, var(--dot-size));
+    }
+
     @include e(content) {
       position: absolute;
       top: var(--top);

diff --git a/packages/zarm/src/custom-input/CustomInput.tsx b/packages/zarm/src/custom-input/CustomInput.tsx
@@ -110,8 +110,6 @@ const CustomInput = React.forwardRef<CustomInputRef, CustomInputProps>((props, r
   const onInputClear = (e) => {
     e.stopPropagation();
     setValue('');
-
-    setValue?.('');
   };
 
   const scrollToStart = () => {

diff --git a/packages/zarm/src/input/Input.tsx b/packages/zarm/src/input/Input.tsx
@@ -151,14 +151,14 @@ const Input = React.forwardRef<unknown, InputProps>((props, ref) => {
 
   // 渲染输入框
   const inputRender = isTextarea ? (
-    <div className={bem('inner')}>
+    <>
       <textarea
         ref={inputRef as React.RefObject<HTMLTextAreaElement>}
         {...(commonProps as React.HTMLAttributes<HTMLTextAreaElement>)}
         rows={rows}
       />
       {textLengthRender}
-    </div>
+    </>
   ) : (
     <input
       ref={inputRef as React.RefObject<HTMLInputElement>}

diff --git a/packages/zarm/src/input/style/mixins.scss b/packages/zarm/src/input/style/mixins.scss
@@ -37,10 +37,6 @@
     overflow: visible;
   }
 
-  @include e(inner) {
-    flex: 1;
-  }
-
   @include e(label) {
     font-size: var(--label-font-size);
     line-height: var(--line-height);