Merge pull request #948 from LentoYe/css-vars-lento

style(CSSVars): SearchBar的css变量及类型修改
ZhongAnTech · Sep 28, 2022 · 3f5c695 · 3f5c695
2 parents ff1b80d + 5cc5cdd
commit 3f5c695
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 52 deletions.
diff --git a/packages/zarm/src/search-bar/SearchBar.tsx b/packages/zarm/src/search-bar/SearchBar.tsx
@@ -6,8 +6,30 @@ import { ConfigContext } from '../n-config-provider';
 import { useEventCallback } from '../utils/hooks';
 import Input, { InputTextProps } from '../input';
 import { getValue } from '../input/utils';
-
-export type SearchBarProps = BaseSearchBarProps & React.InputHTMLAttributes<HTMLInputElement>;
+import type { HTMLProps } from '../utils/utilityTypes';
+
+export interface SearchBarCssVars {
+  '--background'?: React.CSSProperties['background'];
+  '--height'?: React.CSSProperties['height'];
+  '--padding-horizontal'?: React.CSSProperties['paddingRight'];
+  '--input-padding-horizontal'?: React.CSSProperties['paddingRight'];
+  '--input-height'?: React.CSSProperties['height'];
+  '--input-background'?: React.CSSProperties['background'];
+  '--input-font-size'?: React.CSSProperties['fontSize'];
+  '--input-placeholder-color'?: React.CSSProperties['color'];
+  '--input-clear-icon-color'?: React.CSSProperties['color'];
+  '--input-border-radius'?: React.CSSProperties['borderRadius'];
+  '--cancel-font-size'?: React.CSSProperties['fontSize'];
+  '--cancel-color'?: React.CSSProperties['color'];
+  '--cancel-margin-left'?: React.CSSProperties['marginLeft'];
+  '--cancel-transition'?: React.CSSProperties['transition'];
+  '--icon-margin-right'?: React.CSSProperties['marginRight'];
+  '--icon-color'?: React.CSSProperties['color'];
+}
+
+export type SearchBarProps = BaseSearchBarProps &
+  React.InputHTMLAttributes<HTMLInputElement> &
+  HTMLProps<SearchBarCssVars>;
 
 const SearchBar = React.forwardRef<unknown, SearchBarProps>((props, ref) => {
   const {

diff --git a/packages/zarm/src/search-bar/demo.md b/packages/zarm/src/search-bar/demo.md
@@ -124,3 +124,24 @@ ReactDOM.render(<Demo />, mountNode);
 | onSubmit     | (value: string) => void                                | -        | 输入框回车时触发的回调函数             |
 | onFocus      | (event: React.FocusEvent\<HTMLInputElement\>) => void  | -        | 获取焦点时触发的回调函数               |
 | onBlur       | (event: React.FocusEvent\<HTMLInputElement\>) => void  | -        | 失去焦点时触发的回调函数               |
+
+## CSS 变量
+
+| 属性                       | 默认值                      | 说明               |
+| :------------------------- | :-------------------------- | :----------------- |
+| --background               | 'transparent'               | 背景色             |
+| --height                   | '52px'                      | 高度               |
+| --padding-horizontal       | '16px'                      | 左右留白内边距     |
+| --input-padding-horizontal | '8px'                       | 输入框内边距       |
+| --input-height             | '36px'                      | 输入框高度         |
+| --input-background         | 'rgba(118, 118, 128, 0.12)' | 输入框背景色       |
+| --input-font-size          | 'var(--za-font-size-md)'    | 输入框字体大小     |
+| --input-placeholder-color  | '#808084'                   | 输入框占位符颜色   |
+| --input-clear-icon-color   | '#8e8e92'                   | 输入框清除图标颜色 |
+| --input-border-radius      | '10px'                      | 输入框圆角大小     |
+| --cancel-font-size         | 'var(--za-font-size-md)'    | 取消按钮字体大小   |
+| --cancel-color             | 'var(--theme-primary)'      | 取消按钮字体颜色   |
+| --cancel-margin-left       | '13px'                      | 取消按钮左边距     |
+| --cancel-transition        | 'all 0.2s'                  | 取消按钮动画       |
+| --icon-margin-right        | '6px'                       | 输入框图标右边距   |
+| --icon-color               | '#808084'                   | 输入框图标颜色     |
diff --git a/packages/zarm/src/search-bar/style/component.scss b/packages/zarm/src/search-bar/style/component.scss
@@ -1,9 +1,26 @@
 @include b(search-bar) {
-  background: var(--za-search-bar-background);
+  @include define(background, transparent);
+  @include define(height, 52px);
+  @include define(padding-horizontal, 16px);
+  @include define(input-padding-horizontal, 8px);
+  @include define(input-height, 36px);
+  @include define(input-background, rgba(118, 118, 128, 0.12));
+  @include define(input-font-size, var(--za-font-size-md));
+  @include define(input-placeholder-color, #808084);
+  @include define(input-clear-icon-color, #8e8e92);
+  @include define(input-border-radius, 10px);
+  @include define(cancel-font-size, var(--za-font-size-md));
+  @include define(cancel-color, var(--theme-primary));
+  @include define(cancel-margin-left, 13px);
+  @include define(cancel-transition, all .2s);
+  @include define(icon-margin-right, 6px);
+  @include define(icon-color, #808084);
+
+  background: var(--background);
 
   @include e(form) {
-    height: var(--za-search-bar-height);
-    margin: 0 var(--za-search-bar-padding-horizontal);
+    height: var(--height);
+    margin: 0 var(--padding-horizontal);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -15,20 +32,20 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 0 var(--za-search-bar-input-padding-horizontal);
-    height: var(--za-search-bar-input-height);
-    background: var(--za-search-bar-input-background);
+    padding: 0 var(--input-padding-horizontal);
+    height: var(--input-height);
+    background: var(--input-background);
     overflow: hidden;
 
     @include e(icon) {
-      margin-right: var(--za-search-bar-icon-margin-right);
-      color: var(--za-search-bar-icon-color);
+      margin-right: var(--icon-margin-right);
+      color: var(--icon-color);
     }
   }
 
   @include b(input) {
     flex: 1;
-    font-size: var(--za-search-bar-input-font-size);
+    font-size: var(--input-font-size);
     background-color: transparent;
 
     input {
@@ -37,15 +54,15 @@
       }
     }
 
-    --za-input-placeholder-color: var(--za-search-bar-input-placeholder-color);
-    --za-input-clear-icon-color: var(--za-search-bar-input-clear-icon-color);
+    --za-input-placeholder-color: var(--input-placeholder-color);
+    --za-input-clear-icon-color: var(--input-clear-icon-color);
   }
 
   @include e(cancel) {
-    font-size: var(--za-search-bar-cancel-font-size);
-    color: var(--za-search-bar-cancel-color);
-    margin-left: var(--za-search-bar-cancel-margin-left);
-    transition: var(--za-search-bar-cancel-transition);
+    font-size: var(--cancel-font-size);
+    color: var(--cancel-color);
+    margin-left: var(--cancel-margin-left);
+    transition: var(--cancel-transition);
   }
 
   @include m(focus) {
@@ -56,7 +73,7 @@
 
   @include m(radius) {
     @include e(content) {
-      border-radius: var(--za-search-bar-input-border-radius);
+      border-radius: var(--input-border-radius);
     }
   }
 

diff --git a/packages/zarm/src/style/themes/default.scss b/packages/zarm/src/style/themes/default.scss
@@ -240,40 +240,6 @@
   --za-progress-font-size-circle-md: 24px;
   --za-progress-font-size-circle-sm: 18px;
 
-  // SearchBar
-  // 高度
-  --za-search-bar-height: 52px;
-  // 背景色
-  --za-search-bar-background: transparent;
-  // 左右留白内边距
-  --za-search-bar-padding-horizontal: 16px;
-  // 输入框高度
-  --za-search-bar-input-height: 36px;
-  // 输入框字体大小
-  --za-search-bar-input-font-size: 17px;
-  // 输入框背景色
-  --za-search-bar-input-background: rgba(118, 118, 128, 0.12);
-  // 输入框圆角大小
-  --za-search-bar-input-border-radius: 10px;
-  // 输入框内边距
-  --za-search-bar-input-padding-horizontal: 8px;
-  // 输入框占位符颜色
-  --za-search-bar-input-placeholder-color: #808084;
-  // 输入框清除图标颜色
-  --za-search-bar-input-clear-icon-color: #8e8e92;
-  // 输入框图标颜色
-  --za-search-bar-icon-color: #808084;
-  // 输入框图标右边距
-  --za-search-bar-icon-margin-right: 6px;
-  // 取消按钮字体大小
-  --za-search-bar-cancel-font-size: 17px;
-  // 取消按钮字体颜色
-  --za-search-bar-cancel-color: var(--theme-primary);
-  // 取消按钮左边距
-  --za-search-bar-cancel-margin-left: 13px;
-  // 取消按钮动画
-  --za-search-bar-cancel-transition: all .2s;
-
   // Stepper
   --za-stepper-input-background: #fff;
   --za-stepper-height-md: 28px;