Feat: button 增加iconSize 属性，提取视觉元素变量。 (#654)

src/packages/button/button.scss

@@ -26,6 +26,7 @@
     &--warning {
       color: $dark6;
     }
+
     &--plain {
       background: $dark6;
 
@@ -56,6 +57,7 @@
     }
   }
 }
+
 .nut-button {
   position: relative;
   display: inline-block;
@@ -74,7 +76,7 @@
   touch-action: manipulation;
 
   .text {
-    margin-left: 5px;
+    margin-left: $button-text-icon-width;
   }
 
   &::before {
@@ -91,6 +93,7 @@
     opacity: 0;
     content: ' ';
   }
+
   &::after {
     border: none;
   }
@@ -183,6 +186,10 @@
     width: 100%;
     height: $button-large-height;
     line-height: $button-large-line-height;
+
+    .text {
+      margin-left: $button-text-icon-large-width;
+    }
   }
 
   &--normal {
@@ -195,6 +202,21 @@
     line-height: $button-small-line-height;
     padding: $button-small-padding;
     font-size: $button-small-font-size;
+
+    .text {
+      margin-left: $button-text-icon-small-width;
+    }
+  }
+
+  &--mini {
+    height: $button-mini-height;
+    line-height: $button-mini-line-height;
+    padding: $button-mini-padding;
+    font-size: $button-mini-font-size;
+
+    .text {
+      margin-left: $button-text-icon-mini-width;
+    }
   }
 
   &--block {

src/packages/button/button.taro.tsx

@@ -27,6 +27,7 @@ export interface ButtonProps
   size: ButtonSize
   block: boolean
   icon: string
+  iconSize: string | number
   children: any
   onClick: (e: MouseEvent) => void
 }
@@ -53,6 +54,7 @@ const defaultProps = {
   size: 'normal',
   block: false,
   icon: '',
+  iconSize: '16',
   style: {},
   children: undefined,
   onClick: (e: MouseEvent) => {},
@@ -68,6 +70,7 @@ export const Button: FunctionComponent<Partial<ButtonProps>> = (props) => {
     size,
     block,
     icon,
+    iconSize,
     children,
     onClick,
     className,
@@ -127,6 +130,7 @@ export const Button: FunctionComponent<Partial<ButtonProps>> = (props) => {
     size,
     block,
     icon,
+    iconSize,
     children,
     onClick,
     classes,
@@ -162,6 +166,7 @@ export const Button: FunctionComponent<Partial<ButtonProps>> = (props) => {
             classPrefix={iconClassPrefix}
             fontClassName={iconFontClassName}
             name={icon}
+            size={iconSize}
           />
         ) : (
           ''

src/packages/button/button.tsx

@@ -21,6 +21,7 @@ export interface ButtonProps extends BasicComponent {
   size: ButtonSize
   block: boolean
   icon: string
+  iconSize: string | number
   children: any
   onClick: (e: MouseEvent) => void
 }
@@ -47,6 +48,7 @@ const defaultProps = {
   size: 'normal',
   block: false,
   icon: '',
+  iconSize: '16',
   style: {},
   children: undefined,
   onClick: (e: MouseEvent) => {},
@@ -62,6 +64,7 @@ export const Button: FunctionComponent<Partial<ButtonProps>> = (props) => {
     size,
     block,
     icon,
+    iconSize,
     children,
     onClick,
     className,
@@ -121,6 +124,7 @@ export const Button: FunctionComponent<Partial<ButtonProps>> = (props) => {
     size,
     block,
     icon,
+    iconSize,
     children,
     onClick,
     classes,
@@ -154,6 +158,7 @@ export const Button: FunctionComponent<Partial<ButtonProps>> = (props) => {
             classPrefix={iconClassPrefix}
             fontClassName={iconFontClassName}
             name={icon}
+            size={iconSize}
           />
         ) : (
           ''

src/packages/button/demo.taro.tsx

 import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
 import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
-import Taro from '@tarojs/taro'
 import { Button, Cell } from '@/packages/nutui.react.taro'
 import '@/packages/button/demo.scss'
 
@@ -17,6 +17,7 @@ interface T {
   '7db1a8b2': string
   a52bef0c: string
   d04fcbda: string
+  '0aaad622': string
   '0aaad620': string
   '60a53514': string
   b8a453e3: string
@@ -42,6 +43,7 @@ const ButtonDemo = () => {
       '7db1a8b2': '禁用状态',
       a52bef0c: '加载状态',
       d04fcbda: '加载中',
+      '0aaad622': '图标按钮',
       '0aaad620': '按钮尺寸',
       '60a53514': '收藏',
       b8a453e3: '大号按钮',
@@ -64,6 +66,7 @@ const ButtonDemo = () => {
       '7db1a8b2': '禁用狀態',
       a52bef0c: '載入狀態',
       d04fcbda: '載入中',
+      '0aaad622': '图标按钮',
       '0aaad620': '按鈕尺寸',
       '60a53514': '收藏',
       b8a453e3: '大號按鈕',
@@ -86,6 +89,7 @@ const ButtonDemo = () => {
       '7db1a8b2': 'Disabled State',
       a52bef0c: 'Load State',
       d04fcbda: 'Loading',
+      '0aaad622': 'Icon Button',
       '0aaad620': 'Button size',
       '60a53514': 'Favorite',
       b8a453e3: 'Large button',
@@ -173,7 +177,7 @@ const ButtonDemo = () => {
           </Button>
         </Cell>
 
-        <h2>{translated['0aaad620']}</h2>
+        <h2>{translated['0aaad622']}</h2>
 
         <Cell className="button-cell">
           <Button
@@ -191,6 +195,16 @@ const ButtonDemo = () => {
           >
             {translated['60a53514']}
           </Button>
+          <Button
+            shape="round"
+            type="primary"
+            size="large"
+            icon="star"
+            iconSize={20}
+            style={{ margin: 8 }}
+          >
+            {translated['60a53514']}
+          </Button>
         </Cell>
         <h2>{translated['0aaad620']}</h2>
         <Cell className="button-cell">

src/packages/button/demo.tsx

@@ -16,6 +16,7 @@ interface T {
   '7db1a8b2': string
   a52bef0c: string
   d04fcbda: string
+  '0aaad622': string
   '0aaad620': string
   '60a53514': string
   b8a453e3: string
@@ -41,6 +42,7 @@ const ButtonDemo = () => {
       '7db1a8b2': '禁用状态',
       a52bef0c: '加载状态',
       d04fcbda: '加载中',
+      '0aaad622': '图标按钮',
       '0aaad620': '按钮尺寸',
       '60a53514': '收藏',
       b8a453e3: '大号按钮',
@@ -63,6 +65,7 @@ const ButtonDemo = () => {
       '7db1a8b2': '禁用狀態',
       a52bef0c: '載入狀態',
       d04fcbda: '載入中',
+      '0aaad622': '图标按钮',
       '0aaad620': '按鈕尺寸',
       '60a53514': '收藏',
       b8a453e3: '大號按鈕',
@@ -85,6 +88,7 @@ const ButtonDemo = () => {
       '7db1a8b2': 'Disabled State',
       a52bef0c: 'Load State',
       d04fcbda: 'Loading',
+      '0aaad622': 'Icon Button',
       '0aaad620': 'Button size',
       '60a53514': 'Favorite',
       b8a453e3: 'Large button',
@@ -171,7 +175,7 @@ const ButtonDemo = () => {
           </Button>
         </Cell>
 
-        <h2>{translated['0aaad620']}</h2>
+        <h2>{translated['0aaad622']}</h2>
 
         <Cell className="button-cell">
           <Button
@@ -189,6 +193,16 @@ const ButtonDemo = () => {
           >
             {translated['60a53514']}
           </Button>
+          <Button
+            shape="round"
+            type="primary"
+            size="large"
+            icon="star"
+            iconSize={20}
+            style={{ margin: 8 }}
+          >
+            {translated['60a53514']}
+          </Button>
         </Cell>
         <h2>{translated['0aaad620']}</h2>
         <Cell className="button-cell">

src/packages/button/doc.en-US.md

@@ -121,7 +121,7 @@ const App = () => {
       onClick={() => {
         setTimeout(() => {
           setLoading(false)
-        }, 1500),
+        }, 1500);
           setLoading(!loading)
       }}
       style={{ margin: 8 }}
@@ -146,7 +146,16 @@ const App = () => {
     <>
   <Button shape="square" plain type="primary" icon="star-fill" />
   <Button shape="square" type="primary" icon="star">collection</Button>
-    </>
+  <Button
+      shape="round"
+      type="primary"
+      size="large"
+      icon="star"
+      iconSize={20}
+    >
+      collection
+    </Button>
+  </>
   );
 };
 export default App;
@@ -271,6 +280,10 @@ The component provides the following CSS variables, which can be used to customi
 | --nutui-button-small-font-size | `  $font-size-1` |
 | --nutui-button-mini-font-size | `  $font-size-1` |
 | --nutui-button-mini-line-height | ` 1.2` |
+| --nutui-button-text-icon-width | ` 5px` |
+| --nutui-button-text-icon--large-width | ` 10px` |
+| --nutui-button-text-icon-small-width | ` 2px` |
+| --nutui-button-text-icon-mini-width | ` 1px` |
 | --nutui-button-disabled-opacity | ` 0.68` |
 | --nutui-button-primary-color | ` $white` |
 | --nutui-button-primary-border-color | `  $primary-color` |

src/packages/button/doc.md

@@ -121,7 +121,7 @@ const App = () => {
             onClick={() => {
               setTimeout(() => {
                 setLoading(false)
-              }, 1500),
+              }, 1500);
                 setLoading(!loading)
             }}
             style={{ margin: 8 }}
@@ -146,6 +146,15 @@ const App = () => {
     <>
       <Button shape="square" plain type="primary" icon="star-fill" />
       <Button shape="square" type="primary" icon="star">收藏</Button>
+      <Button
+        shape="round"
+        type="primary"
+        size="large"
+        icon="star"
+        iconSize={20}
+      >
+        收藏
+      </Button>
     </>
   );
 };
@@ -271,6 +280,10 @@ export default App;
 | --nutui-button-small-font-size | `  $font-size-1` |
 | --nutui-button-mini-font-size | `  $font-size-1` |
 | --nutui-button-mini-line-height | ` 1.2` |
+| --nutui-button-text-icon-width | ` 5px` |
+| --nutui-button-text-icon--large-width | ` 10px` |
+| --nutui-button-text-icon-small-width | ` 2px` |
+| --nutui-button-text-icon-mini-width | ` 1px` |
 | --nutui-button-disabled-opacity | ` 0.68` |
 | --nutui-button-primary-color | ` $white` |
 | --nutui-button-primary-border-color | `  $primary-color` |

src/packages/button/doc.taro.md

@@ -119,7 +119,7 @@ const App = () => {
             onClick={() => {
               setTimeout(() => {
                 setLoading(false)
-              }, 1500),
+              }, 1500);
                 setLoading(!loading)
             }}
             style={{ margin: 8 }}
@@ -144,6 +144,15 @@ const App = () => {
     <>
       <Button shape="square" plain type="primary" icon="star-fill" />
       <Button shape="square" type="primary" icon="star">收藏</Button>
+      <Button
+        shape="round"
+        type="primary"
+        size="large"
+        icon="star"
+        iconSize={20}
+      >
+        收藏
+      </Button>
     </>
   );
 };
@@ -269,6 +278,10 @@ export default App;
 | --nutui-button-small-font-size | `  $font-size-1` |
 | --nutui-button-mini-font-size | `  $font-size-1` |
 | --nutui-button-mini-line-height | ` 1.2` |
+| --nutui-button-text-icon-width | ` 5px` |
+| --nutui-button-text-icon--large-width | ` 10px` |
+| --nutui-button-text-icon-small-width | ` 2px` |
+| --nutui-button-text-icon-mini-width | ` 1px` |
 | --nutui-button-disabled-opacity | ` 0.68` |
 | --nutui-button-primary-color | ` $white` |
 | --nutui-button-primary-border-color | `  $primary-color` |

src/packages/button/doc.zh-TW.md

@@ -146,6 +146,15 @@ const App = () => {
     <>
   <Button shape="square" plain type="primary" icon="star-fill" />
   <Button shape="square" type="primary" icon="star">收藏</Button>
+  <Button
+        shape="round"
+        type="primary"
+        size="large"
+        icon="star"
+        iconSize={20}
+      >
+        收藏
+      </Button>
     </>
   );
 };
@@ -271,6 +280,10 @@ export default App;
 | --nutui-button-small-font-size | `  $font-size-1` |
 | --nutui-button-mini-font-size | `  $font-size-1` |
 | --nutui-button-mini-line-height | ` 1.2` |
+| --nutui-button-text-icon-width | ` 5px` |
+| --nutui-button-text-icon--large-width | ` 10px` |
+| --nutui-button-text-icon-small-width | ` 2px` |
+| --nutui-button-text-icon-mini-width | ` 1px` |
 | --nutui-button-disabled-opacity | ` 0.68` |
 | --nutui-button-primary-color | ` $white` |
 | --nutui-button-primary-border-color | `  $primary-color` |

src/styles/variables.scss

@@ -148,6 +148,21 @@ $button-mini-font-size: var(
   $font-size-1
 ) !default;
 $button-mini-line-height: var(--nutui-button-mini-line-height, 1.2) !default;
+
+$button-text-icon-width: var(--nutui-button-text-icon-width, 5px) !default;
+$button-text-icon-large-width: var(
+  --nutui-button-text-icon--large-width,
+  10px
+) !default;
+$button-text-icon-small-width: var(
+  --nutui-button-text-icon-small-width,
+  2px
+) !default;
+$button-text-icon-mini-width: var(
+  --nutui-button-text-icon-mini-width,
+  1px
+) !default;
+
 $button-disabled-opacity: var(--nutui-button-disabled-opacity, 0.68) !default;
 $button-primary-color: var(--nutui-button-primary-color, $white) !default;
 $button-primary-border-color: var(