test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

Review fix (#8125)

Browse Source 
* Fix style

* Fix style

* fix lint

* Fix more styles

* Fix more styles

* update snap
This commit is contained in:
偏右 2017-11-06 21:28:51 +08:00 committed by GitHub
parent 2f0197599f
commit bdceb5f083
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
54 changed files with 498 additions and 702 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/anchor/style/index.less
View File

@ -1,9 +1,12 @@
@import "../../style/themes/default"; @import "../../style/themes/default";
@import "../../style/mixins/index"; @import "../../style/mixins/index";
@anchor-border-width: 2px;
.@{ant-prefix}-anchor { .@{ant-prefix}-anchor {
.reset-component; .reset-component;
position: relative; position: relative;
padding-left: @anchor-border-width;
&-wrapper { &-wrapper {
background-color: @component-background; background-color: @component-background;
} }
@ -16,7 +19,7 @@
&:before { &:before {
content: ' '; content: ' ';
position: relative; position: relative;
width: 2px; width: @anchor-border-width;
height: 100%; height: 100%;
display: block; display: block;
background-color: @border-color-split; background-color: @border-color-split;
@ -44,7 +47,7 @@
} }
&-link { &-link {
padding: 8px 0 8px 18px; padding: 8px 0 8px 16px;
line-height: 1; line-height: 1;
&-title { &-title {

2
components/button/button.tsx
View File

@ -155,7 +155,7 @@ export default class Button extends React.Component<ButtonProps, any> {
const iconType = loading ? 'loading' : icon; const iconType = loading ? 'loading' : icon;
const iconNode = iconType ? <Icon type={iconType} /> : null; const iconNode = iconType ? <Icon type={iconType} /> : null;
const needInserted = React.Children.count(children) === 1 && (!iconType || iconType === 'loading'); const needInserted = React.Children.count(children) === 1 && (!iconType || iconType === 'loading');
const kids = React.Children.map(children, child => insertSpace(child, needInserted)); const kids = children ? React.Children.map(children, child => insertSpace(child, needInserted)) : null;
return ( return (
<button <button

4
components/button/style/index.less
View File

@ -115,8 +115,8 @@
} }
&:not(&-circle):not(&-circle-outline)&-icon-only { &:not(&-circle):not(&-circle-outline)&-icon-only {
padding-left: 8px; padding-left: 6px;
padding-right: 8px; padding-right: 6px;
} }
// http://stackoverflow.com/a/21281554/3040605 // http://stackoverflow.com/a/21281554/3040605

5
components/cascader/style/index.less
View File

@ -90,10 +90,9 @@
height: 12px; height: 12px;
margin-top: -6px; margin-top: -6px;
line-height: 12px; line-height: 12px;
color: @text-color-secondary; color: @disabled-color;
.iconfont-size-under-12px(9px);
&:before { &:before {
transition: transform 0.2s ease; transition: transform .2s;
} }
&&-expand { &&-expand {
&:before { &:before {

9
components/form/__tests__/__snapshots__/demo.test.js.snap
View File

@ -880,7 +880,7 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
> >
<i <i
class="anticon anticon-user" class="anticon anticon-user"
style="font-size:13px" style="color:rgba(0,0,0,.25)"
/> />
</span> </span>
<input <input
@ -913,7 +913,7 @@ exports[`renders ./components/form/demo/horizontal-login.md correctly 1`] = `
> >
<i <i
class="anticon anticon-lock" class="anticon anticon-lock"
style="font-size:13px" style="color:rgba(0,0,0,.25)"
/> />
</span> </span>
<input <input
@ -1137,7 +1137,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
> >
<i <i
class="anticon anticon-user" class="anticon anticon-user"
style="font-size:13px" style="color:rgba(0,0,0,.25)"
/> />
</span> </span>
<input <input
@ -1170,7 +1170,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
> >
<i <i
class="anticon anticon-lock" class="anticon anticon-lock"
style="font-size:13px" style="color:rgba(0,0,0,.25)"
/> />
</span> </span>
<input <input
@ -1636,7 +1636,6 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
</div> </div>
<div <div
class="ant-row ant-form-item" class="ant-row ant-form-item"
style="margin-bottom:8px"
> >
<div <div
class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8" class="ant-form-item-control-wrapper ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8"

4
components/form/demo/horizontal-login.md
View File

@ -49,7 +49,7 @@ class HorizontalLoginForm extends React.Component {
{getFieldDecorator('userName', { {getFieldDecorator('userName', {
rules: [{ required: true, message: 'Please input your username!' }], rules: [{ required: true, message: 'Please input your username!' }],
})( })(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" /> <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
)} )}
</FormItem> </FormItem>
<FormItem <FormItem
@ -59,7 +59,7 @@ class HorizontalLoginForm extends React.Component {
{getFieldDecorator('password', { {getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }], rules: [{ required: true, message: 'Please input your Password!' }],
})( })(
<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" /> <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
)} )}
</FormItem> </FormItem>
<FormItem> <FormItem>

4
components/form/demo/normal-login.md
View File

@ -34,14 +34,14 @@ class NormalLoginForm extends React.Component {
{getFieldDecorator('userName', { {getFieldDecorator('userName', {
rules: [{ required: true, message: 'Please input your username!' }], rules: [{ required: true, message: 'Please input your username!' }],
})( })(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" /> <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
)} )}
</FormItem> </FormItem>
<FormItem> <FormItem>
{getFieldDecorator('password', { {getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }], rules: [{ required: true, message: 'Please input your Password!' }],
})( })(
<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" /> <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
)} )}
</FormItem> </FormItem>
<FormItem> <FormItem>

2
components/form/demo/register.md
View File

@ -245,7 +245,7 @@ class RegistrationForm extends React.Component {
</Col> </Col>
</Row> </Row>
</FormItem> </FormItem>
<FormItem {...tailFormItemLayout} style={{ marginBottom: 8 }}> <FormItem {...tailFormItemLayout}>
{getFieldDecorator('agreement', { {getFieldDecorator('agreement', {
valuePropName: 'checked', valuePropName: 'checked',
})( })(

7
components/form/style/index.less
View File

@ -553,12 +553,7 @@ form {
.@{ant-prefix}-advanced-search-form { .@{ant-prefix}-advanced-search-form {
.@{form-prefix-cls}-item { .@{form-prefix-cls}-item {
margin-bottom: 16px; margin-bottom: 24px;
}
.@{ant-prefix}-input,
.@{ant-prefix}-input-group .@{ant-prefix}-input,
.@{ant-prefix}-input-group .@{ant-prefix}-input-group-addon {
height: @input-height-base;
} }
} }

5
components/input/__tests__/__snapshots__/demo.test.js.snap
View File

@ -43,7 +43,7 @@ exports[`renders ./components/input/demo/addon.md correctly 1`] = `
> >
<div <div
class="ant-select ant-select-enabled" class="ant-select ant-select-enabled"
style="width:80px" style="width:90px"
> >
<div <div
aria-autocomplete="list" aria-autocomplete="list"
@ -85,7 +85,7 @@ exports[`renders ./components/input/demo/addon.md correctly 1`] = `
> >
<div <div
class="ant-select ant-select-enabled" class="ant-select ant-select-enabled"
style="width:70px" style="width:80px"
> >
<div <div
aria-autocomplete="list" aria-autocomplete="list"
@ -655,6 +655,7 @@ exports[`renders ./components/input/demo/presuffix.md correctly 1`] = `
> >
<i <i
class="anticon anticon-user" class="anticon anticon-user"
style="color:rgba(0,0,0,.25)"
/> />
</span> </span>
<input <input

4
components/input/demo/addon.md
View File

@ -18,13 +18,13 @@ import { Input, Select, Icon } from 'antd';
const Option = Select.Option; const Option = Select.Option;
const selectBefore = ( const selectBefore = (
<Select defaultValue="Http://" style={{ width: 80 }}> <Select defaultValue="Http://" style={{ width: 90 }}>
<Option value="Http://">Http://</Option> <Option value="Http://">Http://</Option>
<Option value="Https://">Https://</Option> <Option value="Https://">Https://</Option>
</Select> </Select>
); );
const selectAfter = ( const selectAfter = (
<Select defaultValue=".com" style={{ width: 70 }}> <Select defaultValue=".com" style={{ width: 80 }}>
<Option value=".com">.com</Option> <Option value=".com">.com</Option>
<Option value=".jp">.jp</Option> <Option value=".jp">.jp</Option>
<Option value=".cn">.cn</Option> <Option value=".cn">.cn</Option>

2
components/input/demo/presuffix.md
View File

@ -36,7 +36,7 @@ class App extends React.Component {
return ( return (
<Input <Input
placeholder="Enter your username" placeholder="Enter your username"
prefix={<Icon type="user" />} prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
suffix={suffix} suffix={suffix}
value={userName} value={userName}
onChange={this.onChangeUserName} onChange={this.onChangeUserName}

3
components/input/style/mixin.less
View File

@ -1,7 +1,7 @@
@import "../../style/themes/default"; @import "../../style/themes/default";
@import "../../style/mixins/index"; @import "../../style/mixins/index";
@input-affix-width: 17px; @input-affix-width: 19px;
// size mixins for input // size mixins for input
.input-lg() { .input-lg() {
@ -72,6 +72,7 @@
height: auto; height: auto;
vertical-align: bottom; vertical-align: bottom;
transition: all .3s, height 0s; transition: all .3s, height 0s;
min-height: @input-height-base;
} }
// Size // Size

3
components/input/style/search-input.less
View File

@ -18,6 +18,9 @@
> .@{ant-prefix}-input-suffix > .@{search-prefix}-button { > .@{ant-prefix}-input-suffix > .@{search-prefix}-button {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
> .@{iconfont-css-prefix}-search {
font-size: @font-size-lg;
}
} }
&.@{search-prefix}-enter-button > .@{ant-prefix}-input { &.@{search-prefix}-enter-button > .@{ant-prefix}-input {

2
components/list/demo/infinite-load.md
View File

@ -105,7 +105,7 @@ ReactDOM.render(<InfiniteListExample />, mountNode);
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
border-radius: 4px; border-radius: 4px;
overflow: auto; overflow: auto;
padding: 8px 16px; padding: 8px 24px;
height: 300px; height: 300px;
} }
.demo-loading { .demo-loading {

20
components/locale-provider/__tests__/__snapshots__/demo.test.js.snap
View File

@ -379,26 +379,22 @@ exports[`renders ./components/locale-provider/demo/all.md correctly 1`] = `
class="ant-transfer-operation" class="ant-transfer-operation"
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-sm" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
disabled="" disabled=""
type="button" type="button"
> >
<span> <i
<i class="anticon anticon-left"
class="anticon anticon-left" />
/>
</span>
</button> </button>
<button <button
class="ant-btn ant-btn-primary ant-btn-sm" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
disabled="" disabled=""
type="button" type="button"
> >
<span> <i
<i class="anticon anticon-right"
class="anticon anticon-right" />
/>
</span>
</button> </button>
</div> </div>
<div <div

640
components/locale-provider/__tests__/__snapshots__/index.test.js.snap
View File

File diff suppressed because it is too large Load Diff

14
components/mention/demo/avatar.md
View File

@ -13,10 +13,10 @@ title:
## en-US ## en-US
Customize suggestions Customize suggestions.
````jsx ````jsx
import { Mention } from 'antd'; import { Mention, Avatar } from 'antd';
const Nav = Mention.Nav; const Nav = Mention.Nav;
const webFrameworks = [ const webFrameworks = [
@ -41,10 +41,12 @@ class CustomNavMention extends React.Component {
data={suggestion} data={suggestion}
disabled={suggestion.disabled} disabled={suggestion.disabled}
> >
<span> <Avatar
<img alt={suggestion.name} style={{ height: 16, width: 16, marginRight: 5, float: 'left' }} src={suggestion.icon} /> src={suggestion.icon}
{suggestion.name} - {suggestion.type} size="small"
</span> style={{ width: 14, height: 14, marginRight: 8, top: 2, position: 'relative' }}
/>
{suggestion.name} - {suggestion.type}
</Nav> </Nav>
)); ));
this.setState({ suggestions }); this.setState({ suggestions });

12
components/menu/__tests__/__snapshots__/demo.test.js.snap
View File

@ -69,7 +69,7 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
aria-activedescendant="" aria-activedescendant=""
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root" class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
role="menu" role="menu"
style="width:240px" style="width:256px"
tabindex="0" tabindex="0"
> >
<li <li
@ -213,7 +213,7 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = ` exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
<div <div
style="width:240px" style="width:256px"
> >
<button <button
class="ant-btn ant-btn-primary" class="ant-btn ant-btn-primary"
@ -363,7 +363,7 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
aria-activedescendant="" aria-activedescendant=""
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root" class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
role="menu" role="menu"
style="width:240px" style="width:256px"
tabindex="0" tabindex="0"
> >
<li <li
@ -507,7 +507,7 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
aria-activedescendant="" aria-activedescendant=""
class="ant-menu ant-menu-inline ant-menu-light ant-menu-root" class="ant-menu ant-menu-inline ant-menu-light ant-menu-root"
role="menu" role="menu"
style="width:240px" style="width:256px"
tabindex="0" tabindex="0"
> >
<li <li
@ -641,7 +641,7 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
aria-activedescendant="" aria-activedescendant=""
class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root" class="ant-menu ant-menu-inline ant-menu-dark ant-menu-root"
role="menu" role="menu"
style="width:240px" style="width:256px"
tabindex="0" tabindex="0"
> >
<li <li
@ -761,7 +761,7 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
aria-activedescendant="" aria-activedescendant=""
class="ant-menu ant-menu-vertical ant-menu-light ant-menu-root" class="ant-menu ant-menu-vertical ant-menu-light ant-menu-root"
role="menu" role="menu"
style="width:240px" style="width:256px"
tabindex="0" tabindex="0"
> >
<li <li

2
components/menu/demo/inline-collapsed.md
View File

@ -32,7 +32,7 @@ class App extends React.Component {
} }
render() { render() {
return ( return (
<div style={{ width: 240 }}> <div style={{ width: 256 }}>
<Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}> <Button type="primary" onClick={this.toggleCollapsed} style={{ marginBottom: 16 }}>
<Icon type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} /> <Icon type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} />
</Button> </Button>

2
components/menu/demo/inline.md
View File

@ -26,7 +26,7 @@ class Sider extends React.Component {
return ( return (
<Menu <Menu
onClick={this.handleClick} onClick={this.handleClick}
style={{ width: 240 }} style={{ width: 256 }}
defaultSelectedKeys={['1']} defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']} defaultOpenKeys={['sub1']}
mode="inline" mode="inline"

2
components/menu/demo/sider-current.md
View File

@ -39,7 +39,7 @@ class Sider extends React.Component {
mode="inline" mode="inline"
openKeys={this.state.openKeys} openKeys={this.state.openKeys}
onOpenChange={this.onOpenChange} onOpenChange={this.onOpenChange}
style={{ width: 240 }} style={{ width: 256 }}
> >
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}> <SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
<Menu.Item key="1">Option 1</Menu.Item> <Menu.Item key="1">Option 1</Menu.Item>

2
components/menu/demo/switch-mode.md
View File

@ -41,7 +41,7 @@ class Sider extends React.Component {
<br /> <br />
<br /> <br />
<Menu <Menu
style={{ width: 240 }} style={{ width: 256 }}
defaultSelectedKeys={['1']} defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']} defaultOpenKeys={['sub1']}
mode={this.state.mode} mode={this.state.mode}

2
components/menu/demo/theme.md
View File

@ -47,7 +47,7 @@ class Sider extends React.Component {
<Menu <Menu
theme={this.state.theme} theme={this.state.theme}
onClick={this.handleClick} onClick={this.handleClick}
style={{ width: 240 }} style={{ width: 256 }}
defaultOpenKeys={['sub1']} defaultOpenKeys={['sub1']}
selectedKeys={[this.state.current]} selectedKeys={[this.state.current]}
mode="inline" mode="inline"

2
components/menu/demo/vertical.md
View File

@ -23,7 +23,7 @@ function handleClick(e) {
} }
ReactDOM.render( ReactDOM.render(
<Menu onClick={handleClick} style={{ width: 240 }} mode="vertical"> <Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
<SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}> <SubMenu key="sub1" title={<span><Icon type="mail" /><span>Navigation One</span></span>}>
<MenuItemGroup title="Item 1"> <MenuItemGroup title="Item 1">
<Menu.Item key="1">Option 1</Menu.Item> <Menu.Item key="1">Option 1</Menu.Item>

2
components/menu/style/index.less
View File

@ -198,7 +198,7 @@
white-space: nowrap; white-space: nowrap;
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
min-width: 14px; min-width: 14px;
margin-right: 8px; margin-right: 10px;
transition: font-size .15s @ease-out, margin .3s @ease-in-out; transition: font-size .15s @ease-out, margin .3s @ease-in-out;
+ span { + span {
transition: opacity .3s @ease-in-out, width .3s @ease-in-out; transition: opacity .3s @ease-in-out, width .3s @ease-in-out;

8
components/modal/style/confirm.less
View File

@ -12,7 +12,7 @@
} }
.@{ant-prefix}-modal-body { .@{ant-prefix}-modal-body {
padding: 24px; padding: 32px 32px 24px;
} }
&-body-wrapper { &-body-wrapper {
@ -27,16 +27,16 @@
} }
.@{confirm-prefix-cls}-content { .@{confirm-prefix-cls}-content {
margin-left: 42px; margin-left: 38px;
font-size: @font-size-base; font-size: @font-size-base;
color: @text-color; color: @text-color;
margin-top: 8px; margin-top: 8px;
} }
> .@{iconfont-css-prefix} { > .@{iconfont-css-prefix} {
font-size: 24px; font-size: 22px;
margin-right: 16px; margin-right: 16px;
padding: 0 1px; margin-top: 1px;
float: left; float: left;
} }
} }

8
components/modal/style/modal.less
View File

@ -60,9 +60,9 @@
text-align: center; text-align: center;
text-transform: none; text-transform: none;
text-rendering: auto; text-rendering: auto;
width: 48px; width: 56px;
height: 48px; height: 56px;
line-height: 48px; line-height: 56px;
font-size: @font-size-lg; font-size: @font-size-lg;
&:before { &:before {
@ -80,7 +80,7 @@
} }
&-header { &-header {
padding: 13px 24px; padding: 16px 24px;
border-radius: @border-radius-base @border-radius-base 0 0; border-radius: @border-radius-base @border-radius-base 0 0;
background: @component-background; background: @component-background;
color: @text-color; color: @text-color;

6
components/notification/style/index.less
View File

@ -109,7 +109,11 @@
top: 16px; top: 16px;
color: @text-color-secondary; color: @text-color-secondary;
outline: none; outline: none;
text-decoration: none;
a&:focus {
text-decoration: none;
}
&:hover { &:hover {
color: #404040; color: #404040;
} }

2
components/pagination/style/index.less
View File

@ -318,7 +318,7 @@
} }
&.mini &-options { &.mini &-options {
margin-left: 8px; margin-left: 2px;
&-quick-jumper { &-quick-jumper {
height: @pagination-item-size-sm; height: @pagination-item-size-sm;
line-height: @pagination-item-size-sm; line-height: @pagination-item-size-sm;

4
components/popover/style/index.less
View File

@ -73,7 +73,7 @@
} }
&-message { &-message {
padding: 8px 0 @padding-md; padding: 4px 0 12px;
font-size: @font-size-base; font-size: @font-size-base;
color: @popover-color; color: @popover-color;
> .@{iconfont-css-prefix} { > .@{iconfont-css-prefix} {
@ -88,7 +88,7 @@
&-buttons { &-buttons {
text-align: right; text-align: right;
margin-bottom: 8px; margin-bottom: 4px;
button { button {
margin-left: 8px; margin-left: 8px;
} }

20
components/progress/__tests__/__snapshots__/demo.test.js.snap
View File

@ -32,7 +32,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
stroke="#108ee9" stroke="#108ee9"
stroke-linecap="round" stroke-linecap="round"
stroke-width="6" stroke-width="6"
style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;" style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/> />
</svg> </svg>
<span <span
@ -72,7 +72,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
stroke="#ff5500" stroke="#ff5500"
stroke-linecap="round" stroke-linecap="round"
stroke-width="6" stroke-width="6"
style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;" style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/> />
</svg> </svg>
<span <span
@ -114,7 +114,7 @@ exports[`renders ./components/progress/demo/circle.md correctly 1`] = `
stroke="#87d068" stroke="#87d068"
stroke-linecap="round" stroke-linecap="round"
stroke-width="6" stroke-width="6"
style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/> />
</svg> </svg>
<span <span
@ -161,7 +161,7 @@ exports[`renders ./components/progress/demo/circle-dynamic.md correctly 1`] = `
stroke="#108ee9" stroke="#108ee9"
stroke-linecap="round" stroke-linecap="round"
stroke-width="0" stroke-width="0"
style="stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;" style="stroke-dasharray:0px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/> />
</svg> </svg>
<span <span
@ -226,7 +226,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
stroke="#108ee9" stroke="#108ee9"
stroke-linecap="round" stroke-linecap="round"
stroke-width="6" stroke-width="6"
style="stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;" style="stroke-dasharray:88.59291283123217px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/> />
</svg> </svg>
<span <span
@ -266,7 +266,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
stroke="#ff5500" stroke="#ff5500"
stroke-linecap="round" stroke-linecap="round"
stroke-width="6" stroke-width="6"
style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;" style="stroke-dasharray:206.7167966062084px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/> />
</svg> </svg>
<span <span
@ -308,7 +308,7 @@ exports[`renders ./components/progress/demo/circle-mini.md correctly 1`] = `
stroke="#87d068" stroke="#87d068"
stroke-linecap="round" stroke-linecap="round"
stroke-width="6" stroke-width="6"
style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/> />
</svg> </svg>
<span <span
@ -354,7 +354,7 @@ exports[`renders ./components/progress/demo/dashboard.md correctly 1`] = `
stroke="#108ee9" stroke="#108ee9"
stroke-linecap="round" stroke-linecap="round"
stroke-width="6" stroke-width="6"
style="stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;" style="stroke-dasharray:165.23228207808043px 295.3097094374406px;stroke-dashoffset:-37.5px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/> />
</svg> </svg>
<span <span
@ -446,7 +446,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
stroke="#108ee9" stroke="#108ee9"
stroke-linecap="round" stroke-linecap="round"
stroke-width="6" stroke-width="6"
style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;" style="stroke-dasharray:221.48228207808043px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/> />
</svg> </svg>
<span <span
@ -486,7 +486,7 @@ exports[`renders ./components/progress/demo/format.md correctly 1`] = `
stroke="#87d068" stroke="#87d068"
stroke-linecap="round" stroke-linecap="round"
stroke-width="6" stroke-width="6"
style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s;" style="stroke-dasharray:295.3097094374406px 295.3097094374406px;stroke-dashoffset:-0px;transition:stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s"
/> />
</svg> </svg>
<span <span

20
components/progress/style/index.less
View File

@ -24,8 +24,8 @@
margin-right: 0; margin-right: 0;
padding-right: 0; padding-right: 0;
.@{progress-prefix-cls}-show-info & { .@{progress-prefix-cls}-show-info & {
padding-right: 2.75em; padding-right: ~"calc(2em + 8px)";
margin-right: -2.75em; margin-right: ~"calc(-2em - 8px)";
} }
} }
@ -57,10 +57,11 @@
width: 2em; width: 2em;
text-align: left; text-align: left;
font-size: 1em; font-size: 1em;
margin-left: 0.75em; margin-left: 8px;
vertical-align: middle; vertical-align: middle;
display: inline-block; display: inline-block;
color: @text-color-secondary; color: @text-color-secondary;
line-height: 1;
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
font-size: @font-size-base; font-size: @font-size-base;
} }
@ -128,27 +129,18 @@
} }
} }
&-circle &-status-exception { &-circle&-status-exception {
.@{progress-prefix-cls}-text { .@{progress-prefix-cls}-text {
color: @error-color; color: @error-color;
} }
} }
&-circle &-status-success { &-circle&-status-success {
.@{progress-prefix-cls}-text { .@{progress-prefix-cls}-text {
color: @success-color; color: @success-color;
} }
} }
} }
@keyframes ~"@{ant-prefix}-progress-appear" {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes ~"@{ant-prefix}-progress-active" { @keyframes ~"@{ant-prefix}-progress-active" {
0% { 0% {
opacity: 0.1; opacity: 0.1;

2
components/select/style/index.less
View File

@ -109,7 +109,7 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
max-width: 100%; max-width: 100%;
padding-right: 14px; padding-right: 20px;
} }
} }

4
components/slider/__tests__/__snapshots__/demo.test.js.snap
View File

@ -152,7 +152,8 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
class="icon-wrapper" class="icon-wrapper"
> >
<i <i
class="anticon anticon-frown-o anticon-highlight" class="anticon anticon-frown-o"
style="color:rgba(0, 0, 0, .45)"
/> />
<div <div
class="ant-slider" class="ant-slider"
@ -183,6 +184,7 @@ exports[`renders ./components/slider/demo/icon-slider.md correctly 1`] = `
</div> </div>
<i <i
class="anticon anticon-smile-o" class="anticon anticon-smile-o"
style="color:"
/> />
</div> </div>
`; `;

41
components/slider/demo/icon-slider.md
View File

@ -17,36 +17,29 @@ You can add an icon beside the slider to make it meaningful.
import { Slider, Icon } from 'antd'; import { Slider, Icon } from 'antd';
class IconSlider extends React.Component { class IconSlider extends React.Component {
constructor(props) { state = {
super(props); value: 0,
const { max, min } = props;
const mid = ((max - min) / 2).toFixed(5);
this.state = {
preIconClass: this.props.value >= mid ? '' : 'anticon-highlight',
nextIconClass: this.props.value >= mid ? 'anticon-highlight' : '',
mid,
sliderValue: this.props.value,
};
} }
handleChange = (v) => { handleChange = (value) => {
this.setState({ this.setState({ value });
preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
sliderValue: v,
});
} }
render() { render() {
const { max, min } = this.props;
const { value } = this.state;
const mid = ((max - min) / 2).toFixed(5);
const preColor = value >= mid ? '' : 'rgba(0, 0, 0, .45)';
const nextColor = value >= mid ? 'rgba(0, 0, 0, .45)' : '';
return ( return (
<div className="icon-wrapper"> <div className="icon-wrapper">
<Icon className={this.state.preIconClass} type={this.props.icon[0]} /> <Icon style={{ color: preColor }} type="frown-o" />
<Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} /> <Slider {...this.props} onChange={this.handleChange} value={value} />
<Icon className={this.state.nextIconClass} type={this.props.icon[1]} /> <Icon style={{ color: nextColor }} type="smile-o" />
</div> </div>
); );
} }
} }
ReactDOM.render(<IconSlider min={0} max={20} value={0} icon={['frown-o', 'smile-o']} />, mountNode); ReactDOM.render(<IconSlider min={0} max={20} />, mountNode);
```` ````
````css ````css
@ -57,12 +50,12 @@ ReactDOM.render(<IconSlider min={0} max={20} value={0} icon={['frown-o', 'smile-
.icon-wrapper .anticon { .icon-wrapper .anticon {
position: absolute; position: absolute;
top: -3px; top: -2px;
width: 16px; width: 16px;
height: 16px; height: 16px;
line-height: 1; line-height: 1;
font-size: 16px; font-size: 16px;
color: @disabled-color; color: rgba(0, 0, 0, .25);
} }
.icon-wrapper .anticon:first-child { .icon-wrapper .anticon:first-child {
@ -72,8 +65,4 @@ ReactDOM.render(<IconSlider min={0} max={20} value={0} icon={['frown-o', 'smile-
.icon-wrapper .anticon:last-child { .icon-wrapper .anticon:last-child {
right: 0; right: 0;
} }
.anticon.anticon-highlight {
color: #666;
}
```` ````

42
components/spin/__tests__/__snapshots__/demo.test.js.snap
View File

@ -16,22 +16,13 @@ exports[`renders ./components/spin/demo/basic.md correctly 1`] = `
`; `;
exports[`renders ./components/spin/demo/custom-indicator.md correctly 1`] = ` exports[`renders ./components/spin/demo/custom-indicator.md correctly 1`] = `
<div> <div
<div class="ant-spin ant-spin-spinning"
class="ant-spin ant-spin-spinning" >
> <i
<i class="anticon anticon-spin anticon-loading"
class="anticon anticon-spin anticon-loading-3-quarters" style="font-size:24px"
style="font-size:24px" />
/>
</div>
<div
class="ant-spin ant-spin-spinning"
>
<div
class="square-loader"
/>
</div>
</div> </div>
`; `;
@ -46,7 +37,6 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
<div <div
class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon" class="ant-alert ant-alert-info ant-alert-with-description ant-alert-no-icon"
data-show="true" data-show="true"
style="margin-bottom:16px"
> >
<span <span
class="ant-alert-message" class="ant-alert-message"
@ -61,15 +51,19 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
</div> </div>
</div> </div>
</div> </div>
Loading state： <div
<span style="margin-top:16px"
class="ant-switch"
tabindex="0"
> >
Loading state：
<span <span
class="ant-switch-inner" class="ant-switch"
/> tabindex="0"
</span> >
<span
class="ant-switch-inner"
/>
</span>
</div>
</div> </div>
`; `;

40
components/spin/demo/custom-indicator.md
View File

@ -1,5 +1,5 @@
--- ---
order: 0 order: 6
title: title:
zh-CN: 自定义指示符 zh-CN: 自定义指示符
en-US: Custom spinning indicator en-US: Custom spinning indicator
@ -16,41 +16,7 @@ Use custom loading indicator.
````jsx ````jsx
import { Spin, Icon } from 'antd'; import { Spin, Icon } from 'antd';
const antIcon = <Icon type="loading-3-quarters" style={{ fontSize: 24 }} spin />; const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;
const squareLoader = <div className="square-loader" />;
ReactDOM.render( ReactDOM.render(<Spin indicator={antIcon} />, mountNode);
<div>
<Spin indicator={antIcon} />
<Spin indicator={squareLoader} />
</div>, mountNode);
```` ````
```css
.square-loader {
width: 24px;
height: 24px;
background-color: #108ee9;
-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
animation: sk-rotateplane 1.2s infinite ease-in-out;
}
@-webkit-keyframes sk-rotateplane {
0% { -webkit-transform: perspective(120px) }
50% { -webkit-transform: perspective(120px) rotateY(180deg) }
100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
@keyframes sk-rotateplane {
0% {
transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
} 50% {
transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
} 100% {
transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
}
}
```

5
components/spin/demo/delayAndDebounce.md
View File

@ -27,13 +27,14 @@ class Card extends React.Component {
message="Alert message title" message="Alert message title"
description="Further details about the context of this alert." description="Further details about the context of this alert."
type="info" type="info"
style={{ marginBottom: 16 }}
/> />
); );
return ( return (
<div> <div>
<Spin spinning={this.state.loading} delay={500} >{container}</Spin> <Spin spinning={this.state.loading} delay={500} >{container}</Spin>
Loading state：<Switch checked={this.state.loading} onChange={this.toggle} /> <div style={{ marginTop: 16 }}>
Loading state：<Switch checked={this.state.loading} onChange={this.toggle} />
</div>
</div> </div>
); );
} }

1
components/spin/style/index.less
View File

@ -42,6 +42,7 @@
top: 50%; top: 50%;
width: 100%; width: 100%;
padding-top: (@spin-dot-size - @font-size-base) / 2 + 2px; padding-top: (@spin-dot-size - @font-size-base) / 2 + 2px;
text-shadow: 0 1px 2px #fff;
} }
&.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot { &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
margin-top: -@spin-dot-size / 2 - 10px; margin-top: -@spin-dot-size / 2 - 10px;

4
components/steps/style/vertical.less
View File

@ -26,7 +26,7 @@
top: 0; top: 0;
height: 100%; height: 100%;
width: 1px; width: 1px;
padding: 36px 0 4px; padding: @steps-icon-size + 6px 0 6px;
&:after { &:after {
height: 100%; height: 100%;
width: 1px; width: 1px;
@ -48,7 +48,7 @@
position: absolute; position: absolute;
left: 12px; left: 12px;
top: 0; top: 0;
padding: 28px 0 4px; padding: @steps-small-icon-size + 6px 0 6px;
} }
.@{steps-prefix-cls}-item-title { .@{steps-prefix-cls}-item-title {
line-height: @steps-small-icon-size; line-height: @steps-small-icon-size;

2
components/style/mixins/iconfont.less
View File

@ -32,6 +32,6 @@
font-size: ~"@{size} \9"; // lesshint duplicateProperty: false font-size: ~"@{size} \9"; // lesshint duplicateProperty: false
transform: scale(@font-scale) rotate(@rotate); transform: scale(@font-scale) rotate(@rotate);
:root & { :root & {
font-size: @font-size-base; // reset IE9 and above font-size: @font-size-sm; // reset IE9 and above
} }
} }

5
components/tag/__tests__/__snapshots__/demo.test.js.snap
View File

@ -294,7 +294,10 @@ exports[`renders ./components/tag/demo/control.md correctly 1`] = `
<span <span
class="ant-tag-text" class="ant-tag-text"
> >
+ New Tag <i
class="anticon anticon-plus"
/>
New Tag
</span> </span>
</div> </div>
</div> </div>

4
components/tag/demo/control.md
View File

@ -15,7 +15,7 @@ Generating a set of Tags by array, you can add and remove dynamically.
It's based on `afterClose` event, which will be triggered while the close animation end. It's based on `afterClose` event, which will be triggered while the close animation end.
````jsx ````jsx
import { Tag, Input, Tooltip } from 'antd'; import { Tag, Input, Tooltip, Icon } from 'antd';
class EditableTagGroup extends React.Component { class EditableTagGroup extends React.Component {
state = { state = {
@ -85,7 +85,7 @@ class EditableTagGroup extends React.Component {
onClick={this.showInput} onClick={this.showInput}
style={{ background: '#fff', borderStyle: 'dashed' }} style={{ background: '#fff', borderStyle: 'dashed' }}
> >
+ New Tag <Icon type="plus" /> New Tag
</Tag> </Tag>
)} )}
</div> </div>

6
components/tag/style/index.less
View File

@ -39,11 +39,11 @@
.@{iconfont-css-prefix}-cross { .@{iconfont-css-prefix}-cross {
.iconfont-size-under-12px(10px); .iconfont-size-under-12px(10px);
position: relative;
top: 1px;
cursor: pointer; cursor: pointer;
margin-left: 3px; margin-left: 3px;
transition: all 0.3s @ease-out; transition: all .3s;
color: @text-color-secondary;
font-weight: bold;
&:hover { &:hover {
color: @heading-color; color: @heading-color;

5
components/timeline/style/index.less
View File

@ -61,12 +61,13 @@
border-radius: 0; border-radius: 0;
padding: 3px 0; padding: 3px 0;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
left: 6px; top: 5px;
left: 5px;
width: auto; width: auto;
} }
&-content { &-content {
padding: 0 0 0 24px; padding: 0 0 0 18px;
position: relative; position: relative;
top: -(@font-size-base * @line-height-base - @font-size-base) + 1px; top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
} }

92
components/transfer/__tests__/__snapshots__/demo.test.js.snap
View File

@ -90,10 +90,10 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
disabled="" disabled=""
type="button" type="button"
> >
<i
class="anticon anticon-left"
/>
<span> <span>
<i
class="anticon anticon-left"
/>
to left to left
</span> </span>
</button> </button>
@ -102,11 +102,11 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
disabled="" disabled=""
type="button" type="button"
> >
<i
class="anticon anticon-right"
/>
<span> <span>
to right to right
<i
class="anticon anticon-right"
/>
</span> </span>
</button> </button>
</div> </div>
@ -303,26 +303,22 @@ exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
class="ant-transfer-operation" class="ant-transfer-operation"
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-sm" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
disabled="" disabled=""
type="button" type="button"
> >
<span> <i
<i class="anticon anticon-left"
class="anticon anticon-left" />
/>
</span>
</button> </button>
<button <button
class="ant-btn ant-btn-primary ant-btn-sm" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
disabled="" disabled=""
type="button" type="button"
> >
<span> <i
<i class="anticon anticon-right"
class="anticon anticon-right" />
/>
</span>
</button> </button>
</div> </div>
<div <div
@ -454,26 +450,22 @@ exports[`renders ./components/transfer/demo/custom-item.md correctly 1`] = `
class="ant-transfer-operation" class="ant-transfer-operation"
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-sm" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
disabled="" disabled=""
type="button" type="button"
> >
<span> <i
<i class="anticon anticon-left"
class="anticon anticon-left" />
/>
</span>
</button> </button>
<button <button
class="ant-btn ant-btn-primary ant-btn-sm" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
disabled="" disabled=""
type="button" type="button"
> >
<span> <i
<i class="anticon anticon-right"
class="anticon anticon-right" />
/>
</span>
</button> </button>
</div> </div>
<div <div
@ -578,26 +570,22 @@ exports[`renders ./components/transfer/demo/large-data.md correctly 1`] = `
class="ant-transfer-operation" class="ant-transfer-operation"
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-sm" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
disabled="" disabled=""
type="button" type="button"
> >
<span> <i
<i class="anticon anticon-left"
class="anticon anticon-left" />
/>
</span>
</button> </button>
<button <button
class="ant-btn ant-btn-primary ant-btn-sm" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
disabled="" disabled=""
type="button" type="button"
> >
<span> <i
<i class="anticon anticon-right"
class="anticon anticon-right" />
/>
</span>
</button> </button>
</div> </div>
<div <div
@ -720,26 +708,22 @@ exports[`renders ./components/transfer/demo/search.md correctly 1`] = `
class="ant-transfer-operation" class="ant-transfer-operation"
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-sm" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
disabled="" disabled=""
type="button" type="button"
> >
<span> <i
<i class="anticon anticon-left"
class="anticon anticon-left" />
/>
</span>
</button> </button>
<button <button
class="ant-btn ant-btn-primary ant-btn-sm" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
disabled="" disabled=""
type="button" type="button"
> >
<span> <i
<i class="anticon anticon-right"
class="anticon anticon-right" />
/>
</span>
</button> </button>
</div> </div>
<div <div

40
components/transfer/__tests__/__snapshots__/index.test.js.snap
View File

@ -97,25 +97,21 @@ exports[`Transfer should render correctly 1`] = `
class="ant-transfer-operation" class="ant-transfer-operation"
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-sm" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
disabled="" disabled=""
type="button" type="button"
> >
<span> <i
<i class="anticon anticon-left"
class="anticon anticon-left" />
/>
</span>
</button> </button>
<button <button
class="ant-btn ant-btn-primary ant-btn-sm" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
type="button" type="button"
> >
<span> <i
<i class="anticon anticon-right"
class="anticon anticon-right" />
/>
</span>
</button> </button>
</div> </div>
<div <div
@ -264,26 +260,22 @@ exports[`Transfer should show sorted targetkey 1`] = `
class="ant-transfer-operation" class="ant-transfer-operation"
> >
<button <button
class="ant-btn ant-btn-primary ant-btn-sm" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
disabled="" disabled=""
type="button" type="button"
> >
<span> <i
<i class="anticon anticon-left"
class="anticon anticon-left" />
/>
</span>
</button> </button>
<button <button
class="ant-btn ant-btn-primary ant-btn-sm" class="ant-btn ant-btn-primary ant-btn-sm ant-btn-icon-only"
disabled="" disabled=""
type="button" type="button"
> >
<span> <i
<i class="anticon anticon-right"
class="anticon anticon-right" />
/>
</span>
</button> </button>
</div> </div>
<div <div

66
components/transfer/operation.tsx
View File

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import Button from '../button'; import Button from '../button';
import Icon from '../icon';
function noop() { function noop() {
} }
@ -15,40 +14,37 @@ export interface TransferOperationProps {
rightActive?: boolean; rightActive?: boolean;
} }
export default class TransferOperation extends React.Component<TransferOperationProps, any> { export default (props: TransferOperationProps) => {
static defaultProps = { const {
leftArrowText: '', moveToLeft = noop,
rightArrowText: '', moveToRight = noop,
moveToLeft: noop, leftArrowText = '',
moveToRight: noop, rightArrowText = '',
}; leftActive,
rightActive,
className,
} = props;
render() { return (
const { <div className={className}>
moveToLeft, <Button
moveToRight, type="primary"
leftArrowText, size="small"
rightArrowText, disabled={!leftActive}
leftActive, onClick={moveToLeft}
rightActive, icon="left"
className, >
} = this.props; {leftArrowText}
const moveToLeftButton = (
<Button type="primary" size="small" disabled={!leftActive} onClick={moveToLeft}>
{<span><Icon type="left" />{leftArrowText}</span>}
</Button> </Button>
); <Button
const moveToRightButton = ( type="primary"
<Button type="primary" size="small" disabled={!rightActive} onClick={moveToRight}> size="small"
{<span>{rightArrowText}<Icon type="right" /></span>} disabled={!rightActive}
onClick={moveToRight}
icon="right"
>
{rightArrowText}
</Button> </Button>
); </div>
return ( );
<div className={className}> };
{moveToLeftButton}
{moveToRightButton}
</div>
);
}
}

2
components/transfer/style/index.less
View File

@ -154,7 +154,7 @@
} }
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
.iconfont-size-under-12px(10px); font-size: 12px;
} }
} }
} }

2
components/tree/__tests__/__snapshots__/demo.test.js.snap
View File

@ -158,7 +158,7 @@ exports[`renders ./components/tree/demo/basic.md correctly 1`] = `
class="ant-tree-title" class="ant-tree-title"
> >
<span <span
style="color:#08c" style="color:#1890ff"
> >
sss sss
</span> </span>

2
components/tree/demo/basic.md
View File

@ -40,7 +40,7 @@ class Demo extends React.Component {
<TreeNode title="leaf" key="0-0-0-1" /> <TreeNode title="leaf" key="0-0-0-1" />
</TreeNode> </TreeNode>
<TreeNode title="parent 1-1" key="0-0-1"> <TreeNode title="parent 1-1" key="0-0-1">
<TreeNode title={<span style={{ color: '#08c' }}>sss</span>} key="0-0-1-0" /> <TreeNode title={<span style={{ color: '#1890ff' }}>sss</span>} key="0-0-1-0" />
</TreeNode> </TreeNode>
</TreeNode> </TreeNode>
</Tree> </Tree>

2
components/tree/style/index.less
View File

@ -108,7 +108,7 @@
transition: all .3s; transition: all .3s;
&:after { &:after {
display: inline-block; display: inline-block;
.iconfont-font("\e6ae"); .iconfont-font("\E64D");
animation: loadingCircle 1s infinite linear; animation: loadingCircle 1s infinite linear;
color: @primary-color; color: @primary-color;
} }

2
site/theme/static/demo.less
View File

@ -67,7 +67,7 @@
&-demo { &-demo {
border-bottom: 1px solid @border-color-split; border-bottom: 1px solid @border-color-split;
padding: 42px 20px 50px; padding: 42px 24px 50px;
} }
iframe { iframe {