Merge pull request #2618 from DouyinFE/feat_iconButton_addToken

feat: icon button add height width token for different size

packages/semi-foundation/button/iconButton.scss

@@ -35,6 +35,8 @@ $module: #{$prefix}-button;
         padding-right: $spacing-button_iconOnly_default-paddingRight;
         padding-top: $spacing-button_iconOnly_default-paddingTop;
         padding-bottom: $spacing-button_iconOnly_default-paddingRight;
+        height: $height-button_iconOnly_default;
+        width: $width-button_iconOnly_default;
         justify-content: center;
         align-items: center;
 
@@ -45,6 +47,8 @@ $module: #{$prefix}-button;
                 padding-right: $spacing-button_iconOnly_small-paddingRight;
                 padding-top: $spacing-button_iconOnly_small-paddingTop;
                 padding-bottom: $spacing-button_iconOnly_small-paddingBottom;
+                height: $height-button_iconOnly_small;
+                width: $width-button_iconOnly_small;
             }
 
             &-large {
@@ -52,6 +56,8 @@ $module: #{$prefix}-button;
                 padding-right: $spacing-button_iconOnly_large-paddingRight;
                 padding-top: $spacing-button_iconOnly_large-paddingTop;
                 padding-bottom: $spacing-button_iconOnly_large-paddingBottom;
+                height: $height-button_iconOnly_large;
+                width: $width-button_iconOnly_large;
             }
         }
     }

packages/semi-foundation/button/variables.scss

@@ -154,6 +154,12 @@ $spacing-button_iconOnly_small-paddingLeft: $spacing-extra-tight; // 图标按
 $spacing-button_iconOnly_small-paddingRight: $spacing-extra-tight; // 图标按钮右侧内边距 - 小尺寸
 $spacing-button_iconOnly_small-paddingTop: $spacing-extra-tight; // 图标按钮顶部内边距 - 小尺寸
 $spacing-button_iconOnly_small-paddingBottom: $spacing-extra-tight; // 图标按钮底部内边距 - 小尺寸
+$height-button_iconOnly_small: $height-control-small; // 图标按钮 height - 小尺寸
+$width-button_iconOnly_small: $height-control-small; // 图标按钮 width - 小尺寸
+$height-button_iconOnly_default:$height-control-default;  // 图标按钮 height - 默认
+$width-button_iconOnly_default: $height-control-default; // 图标按钮 width - 默认
+$height-button_iconOnly_large: $height-control-large; // 图标按钮 height - 大尺寸
+$width-button_iconOnly_large: $height-control-large; // 图标按钮 width - 大尺寸
 
 // margin
 $spacing-button_iconOnly_content-marginLeft: $spacing-tight; // 按钮左侧图标距离文字间距

yarn.lock

@@ -1585,25 +1585,11 @@
     "@douyinfe/semi-animation-styled" "2.65.0"
     classnames "^2.2.6"
 
-"@douyinfe/[email protected]":
-  version "2.70.2"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-react/-/semi-animation-react-2.70.2.tgz#24b0f4bfbdbfee31f31d75dd399b97dd96cc99cc"
-  integrity sha512-N9iJ5I7d4qFIaeHZ2DTCCenVKWBq9CTo6onMhEl0RHs1QGlPiiTo12VCOPUPXx18erN79PtWdx5wBmVCzVkDLg==
-  dependencies:
-    "@douyinfe/semi-animation" "2.70.2"
-    "@douyinfe/semi-animation-styled" "2.70.2"
-    classnames "^2.2.6"
-
 "@douyinfe/[email protected]":
   version "2.65.0"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.65.0.tgz#8c56047a5704a45b05cc9809a2a126cc24526ea1"
   integrity sha512-YFF8Ptcz/jwS0phm28XZV7ROqMQ233sjVR0Uy33FImCITr6EAPe5wcCeEmzVZoYS7x3tUFR30SF+0hSO01rQUg==
 
-"@douyinfe/[email protected]":
-  version "2.70.2"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.70.2.tgz#b798e4b321461543a97390e0c44773b28ca68859"
-  integrity sha512-ZLRGyzl7jRHKipuCt0jXqbkdPCDgPnAoRGG7ffX2anqHK1H1/vh7lY75+/4q2jDD3PIe+kniIw8ppl7/wFcfkA==
-
 "@douyinfe/[email protected]":
   version "2.65.0"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation/-/semi-animation-2.65.0.tgz#f544a6b420c3e948c09836019e6b63f1382cd12c"
@@ -1611,13 +1597,6 @@
   dependencies:
     bezier-easing "^2.1.0"
 
-"@douyinfe/[email protected]":
-  version "2.70.2"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation/-/semi-animation-2.70.2.tgz#d7f9af194eb00ecc2a98eb88daa7173396960383"
-  integrity sha512-35CjBUefVmaVntHNoo/sGxWHEDenQRvnllCEQ+aoOQ0ivQLHa1+96CrK4+iZFCh6ROtjB1+MGeGeNuCNdgz4WA==
-  dependencies:
-    bezier-easing "^2.1.0"
-
 "@douyinfe/[email protected]":
   version "2.65.0"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-foundation/-/semi-foundation-2.65.0.tgz#20466a9b4baacdde2249930fb709ba035c5a7bea"
@@ -1637,25 +1616,6 @@
     remark-gfm "^4.0.0"
     scroll-into-view-if-needed "^2.2.24"
 
-"@douyinfe/[email protected]":
-  version "2.70.2"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-foundation/-/semi-foundation-2.70.2.tgz#896793ed18cba738df47c989fc634f221c9608f8"
-  integrity sha512-XKb1xpEPE/qg47IroHmTXgetLWNBpn1sBJjN1F+Z1ulzq19SQcClHoalpJahUhzNR0JhIetaJKsDqODM2j69oQ==
-  dependencies:
-    "@douyinfe/semi-animation" "2.70.2"
-    "@mdx-js/mdx" "^3.0.1"
-    async-validator "^3.5.0"
-    classnames "^2.2.6"
-    date-fns "^2.29.3"
-    date-fns-tz "^1.3.8"
-    fast-copy "^3.0.1 "
-    lodash "^4.17.21"
-    lottie-web "^5.12.2"
-    memoize-one "^5.2.1"
-    prismjs "^1.29.0"
-    remark-gfm "^4.0.0"
-    scroll-into-view-if-needed "^2.2.24"
-
 "@douyinfe/[email protected]", "@douyinfe/semi-icons@latest":
   version "2.65.0"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.65.0.tgz#af39cbd5431ebccedcf7d9ce689646e54bebc432"
@@ -1663,23 +1623,11 @@
   dependencies:
     classnames "^2.2.6"
 
-"@douyinfe/[email protected]", "@douyinfe/semi-icons@^2.0.0":
-  version "2.70.2"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.70.2.tgz#71f90336bf2e741380f742ca9fbc097846a51879"
-  integrity sha512-Coa4XgPFtHeLzpgB5dRNW5jQ9Anynou8VLNdHM4pgSf3/gOT5ZHmMWN0VxhuJGp85e6wLgQGTh/4jw2betlW5A==
-  dependencies:
-    classnames "^2.2.6"
-
 "@douyinfe/[email protected]":
   version "2.65.0"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.65.0.tgz#9916c540c91222a1d9f48cd34a941d28b8a05d2f"
   integrity sha512-1IhOztyBYiSu8WrcvN+oWWtcJTC9+x6zbnYtufx4ToISs5UO1te1PQofABpkDzIJYFtW9yYLxg4uoL4wGjqYMA==
 
-"@douyinfe/[email protected]":
-  version "2.70.2"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-illustrations/-/semi-illustrations-2.70.2.tgz#7ae61e0edc9719ea144277e6d97363c6b2efa077"
-  integrity sha512-cichAylg2EGN5TL+k3Bf5N9XPGD7mxpXSnK4LWQg3TKBKCIyC9CIGgox+W0jGIIFODlLptzGE5UDjNGLKhsUdA==
-
 "@douyinfe/[email protected]":
   version "2.23.2"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-scss-compile/-/semi-scss-compile-2.23.2.tgz#30884bb194ee9ae1e81877985e5663c3297c1ced"
@@ -1751,38 +1699,6 @@
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-theme-default/-/semi-theme-default-2.61.0.tgz#a7e9bf9534721c12af1d0eeb5d5a2de615896a23"
   integrity sha512-obn/DOw4vZyKFAlWvZxHTpBLAK9FO9kygTSm2GROgvi+UDB2PPU6l20cuUCsdGUNWJRSqYlTTVZ1tNYIyFZ5Sg==
 
-"@douyinfe/[email protected]":
-  version "2.70.2"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-theme-default/-/semi-theme-default-2.70.2.tgz#e95e74188275ac9a8a638748884b7743dfe4ef32"
-  integrity sha512-sOy5BnimddqaThw2pIKL7p1piVwSs3FxwgVPbotjdMBLUU/bP1FGrBVItFUde91Qje5IAWrg0bub8FVbXuyW3A==
-
-"@douyinfe/semi-ui@^2.0.0":
-  version "2.70.2"
-  resolved "https://registry.yarnpkg.com/@douyinfe/semi-ui/-/semi-ui-2.70.2.tgz#37f271991606d8b44438b39a8531b75ae0f84d21"
-  integrity sha512-jrjDVtGSmD4X/hj37Qak5uqwdRur1i7c5jNJs09WEW538hyvuCfnoXGM/Xs6Bhoi5NzjN/GGdxKusYS/eL63cg==
-  dependencies:
-    "@dnd-kit/core" "^6.0.8"
-    "@dnd-kit/sortable" "^7.0.2"
-    "@dnd-kit/utilities" "^3.2.1"
-    "@douyinfe/semi-animation" "2.70.2"
-    "@douyinfe/semi-animation-react" "2.70.2"
-    "@douyinfe/semi-foundation" "2.70.2"
-    "@douyinfe/semi-icons" "2.70.2"
-    "@douyinfe/semi-illustrations" "2.70.2"
-    "@douyinfe/semi-theme-default" "2.70.2"
-    async-validator "^3.5.0"
-    classnames "^2.2.6"
-    copy-text-to-clipboard "^2.1.1"
-    date-fns "^2.29.3"
-    date-fns-tz "^1.3.8"
-    fast-copy "^3.0.1 "
-    lodash "^4.17.21"
-    prop-types "^15.7.2"
-    react-resizable "^3.0.5"
-    react-window "^1.8.2"
-    scroll-into-view-if-needed "^2.2.24"
-    utility-types "^3.10.0"
-
 "@douyinfe/semi-ui@latest":
   version "2.65.0"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-ui/-/semi-ui-2.65.0.tgz#295eb0dd8e9e961adb4ddd7c7bbce3468d1b7430"
@@ -12065,11 +11981,6 @@ eslint-plugin-react@^7.20.6, eslint-plugin-react@^7.24.0:
     string.prototype.matchall "^4.0.11"
     string.prototype.repeat "^1.0.0"
 
-eslint-plugin-semi-design@^2.33.0:
-  version "2.70.2"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-semi-design/-/eslint-plugin-semi-design-2.70.2.tgz#7e73540bdde2410a447b4ee3187997253f817263"
-  integrity sha512-AINmAC24kL0UzVDRkOAUYRiFhVge2VYJPg96SDjQQgnNeWm1ctVlBLFYE1nze2I95KMz9nU/2h4UTAIq+fPjvg==
-
 eslint-rule-composer@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/eslint-rule-composer/-/eslint-rule-composer-0.3.0.tgz#79320c927b0c5c0d3d3d2b76c8b4a488f25bbaf9"
@@ -25275,7 +25186,7 @@ string-similarity@^1.2.2:
     lodash.map "^4.6.0"
     lodash.maxby "^4.6.0"
 
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -25293,6 +25204,15 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^2.0.0, string-width@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
@@ -25436,7 +25356,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -25464,6 +25384,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -28053,7 +27980,7 @@ worker-loader@^3.0.8:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -28088,6 +28015,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"