Merge pull request #18516 from ant-design/fix-circle-button

fix: circle button is not circle

.eslintrc.js

@@ -16,7 +16,7 @@ const eslintrc = {
   },
   settings: {
     react: {
-      version: '16.8',
+      version: '16.9',
     },
   },
   parser: '@typescript-eslint/parser',

components/button/__tests__/__snapshots__/demo.test.js.snap

@@ -518,6 +518,14 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
       </svg>
     </i>
   </button>
+  <button
+    class="ant-btn ant-btn-primary ant-btn-circle"
+    type="button"
+  >
+    <span>
+      A
+    </span>
+  </button>
   <button
     class="ant-btn ant-btn-primary"
     type="button"

components/button/demo/icon.md

@@ -23,6 +23,9 @@ import { Button } from 'antd';
 ReactDOM.render(
   <div>
     <Button type="primary" shape="circle" icon="search" />
+    <Button type="primary" shape="circle">
+      A
+    </Button>
     <Button type="primary" icon="search">
       Search
     </Button>

components/button/style/mixin.less

@@ -252,9 +252,17 @@
 }
 // circle button: the content only contains icon
 .btn-circle(@btnClassName: btn) {
+  min-width: @btn-height-base;
+  padding-right: 0;
+  padding-left: 0;
+  text-align: center;
   border-radius: 50%;
-  &.@{btnClassName}-lg,
+  &.@{btnClassName}-lg {
+    min-width: @btn-height-lg;
+    border-radius: 50%;
+  }
   &.@{btnClassName}-sm {
+    min-width: @btn-height-sm;
     border-radius: 50%;
   }
 }

site/theme/template/IconDisplay/IconPicSearcher.tsx

@@ -72,7 +72,7 @@ class PicSearcher extends Component<PicSearcherProps, PicSearcherState> {
       const img = new Image();
       img.setAttribute('crossOrigin', 'anonymous');
       img.src = url;
-      img.onload = function() {
+      img.onload = function onload() {
         const scale = Math.min(1, 300 / Math.max(img.width, img.height));
         const canvas = document.createElement('canvas');
         canvas.width = img.width * scale;