GitHub
/
ant-design
6
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: Legacy button group style (#23590)

pull/23602/head
二货机器人 5 years ago
committed by GitHub
parent
54f2abfe47
commit
22ffa61da0
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 193 additions and 5 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 173
      components/button/__tests__/__snapshots__/demo.test.ts.snap
  2. 17
      components/button/demo/legacy-group.md
  3. 8
      components/button/style/mixin.less

173
components/button/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -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>

17
components/button/demo/legacy-group.md
View File

@ -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;
}
```

8
components/button/style/mixin.less
View File

@ -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;

Write Preview
Loading…
Cancel
Save