fix: Legacy button group style (#23590)

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

@@ -531,8 +531,66 @@ exports[`renders ./components/button/demo/legacy-group.md correctly 1`] = `
           Button 2
         </span>
       </button>
+      <span
+        class="ant-tooltip-disabled-compatible-wrapper"
+        style="display:inline-block;cursor:not-allowed"
+      >
+        <button
+          class="ant-btn ant-btn-primary ant-btn-icon-only"
+          disabled=""
+          style="pointer-events:none"
+          type="button"
+        >
+          <span
+            aria-label="download"
+            class="anticon anticon-download"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="download"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+              />
+            </svg>
+          </span>
+        </button>
+      </span>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          aria-label="download"
+          class="anticon anticon-download"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="download"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
+  <br />
   <div>
     <div
       class="ant-btn-group"
@@ -553,8 +611,66 @@ exports[`renders ./components/button/demo/legacy-group.md correctly 1`] = `
           Button 2
         </span>
       </button>
+      <span
+        class="ant-tooltip-disabled-compatible-wrapper"
+        style="display:inline-block;cursor:not-allowed"
+      >
+        <button
+          class="ant-btn ant-btn-primary ant-btn-icon-only"
+          disabled=""
+          style="pointer-events:none"
+          type="button"
+        >
+          <span
+            aria-label="download"
+            class="anticon anticon-download"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="download"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+              />
+            </svg>
+          </span>
+        </button>
+      </span>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          aria-label="download"
+          class="anticon anticon-download"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="download"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
+  <br />
   <div>
     <div
       class="ant-btn-group ant-btn-group-lg"
@@ -575,6 +691,63 @@ exports[`renders ./components/button/demo/legacy-group.md correctly 1`] = `
           Button 2
         </span>
       </button>
+      <span
+        class="ant-tooltip-disabled-compatible-wrapper"
+        style="display:inline-block;cursor:not-allowed"
+      >
+        <button
+          class="ant-btn ant-btn-primary ant-btn-icon-only"
+          disabled=""
+          style="pointer-events:none"
+          type="button"
+        >
+          <span
+            aria-label="download"
+            class="anticon anticon-download"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="download"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+              />
+            </svg>
+          </span>
+        </button>
+      </span>
+      <button
+        class="ant-btn ant-btn-primary ant-btn-icon-only"
+        type="button"
+      >
+        <span
+          aria-label="download"
+          class="anticon anticon-download"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="download"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M505.7 661a8 8 0 0012.6 0l112-141.7c4.1-5.2.4-12.9-6.3-12.9h-74.1V168c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v338.3H400c-6.7 0-10.4 7.7-6.3 12.9l112 141.8zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
+      </button>
     </div>
   </div>
 </div>

components/button/demo/legacy-group.md

@@ -15,7 +15,8 @@ Debug usage
 Debug usage
 
 ```jsx
-import { Button } from 'antd';
+import { Button, Tooltip } from 'antd';
+import { DownloadOutlined } from '@ant-design/icons';
 
 function getGroup(props) {
   return (
@@ -23,6 +24,12 @@ function getGroup(props) {
       <Button.Group {...props}>
         <Button type="primary">Button 1</Button>
         <Button type="primary">Button 2</Button>
+        <Tooltip title="Tooltip">
+          <Button type="primary" icon={<DownloadOutlined />} disabled />
+        </Tooltip>
+        <Tooltip title="Tooltip">
+          <Button type="primary" icon={<DownloadOutlined />} />
+        </Tooltip>
       </Button.Group>
     </div>
   );
@@ -31,9 +38,17 @@ function getGroup(props) {
 ReactDOM.render(
   <div>
     {getGroup({ size: 'small' })}
+    <br />
     {getGroup()}
+    <br />
     {getGroup({ size: 'large' })}
   </div>,
   mountNode,
 );
 ```
+
+```css
+#components-button-demo-legacy-group .ant-btn {
+  margin: 0;
+}
+```

components/button/style/mixin.less

@@ -165,7 +165,7 @@
 }
 .button-group-base(@btnClassName) {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   > .@{btnClassName},
   > span > .@{btnClassName} {
     position: relative;
@@ -179,7 +179,7 @@
       z-index: 0;
     }
   }
-  > .@{btnClassName}-icon-only {
+  .@{btnClassName}-icon-only {
     font-size: @font-size-base;
   }
   // size
@@ -187,7 +187,7 @@
   &-lg > span > .@{btnClassName} {
     .button-size(@btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; 0);
   }
-  &-lg > .@{btnClassName}.@{btnClassName}-icon-only {
+  &-lg .@{btnClassName}.@{btnClassName}-icon-only {
     .square(@btn-height-lg);
     padding-right: 0;
     padding-left: 0;
@@ -199,7 +199,7 @@
       font-size: @font-size-base;
     }
   }
-  &-sm > .@{btnClassName}.@{btnClassName}-icon-only {
+  &-sm .@{btnClassName}.@{btnClassName}-icon-only {
     .square(@btn-height-sm);
     padding-right: 0;
     padding-left: 0;