Skip to content

Commit d931f37

Browse files
wangdicoderwangdicoder
committed
refactor(demos): use Flex component in button, dropdown, and form demos
1 parent 492cd06 commit d931f37

11 files changed

Lines changed: 82 additions & 82 deletions

File tree

‎components/button/demo/disabled.md‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -12,42 +12,42 @@ Add the `disabled` property to disable the Button.
1212

1313
return (
1414
<>
15-
<div>
15+
<Flex gap="sm">
1616
<Button style={style}>Default</Button>
1717
<Button disabled style={style}>Default (disabled)</Button>
18-
</div>
19-
<div>
18+
</Flex>
19+
<Flex gap="sm">
2020
<Button btnType="primary" style={style}>Primary</Button>
2121
<Button disabled btnType="primary" style={style}>Primary (disabled)</Button>
22-
</div>
23-
<div>
22+
</Flex>
23+
<Flex gap="sm">
2424
<Button btnType="outline" style={style}>Outline</Button>
2525
<Button disabled btnType="outline" style={style}>Outline (disabled)</Button>
26-
</div>
27-
<div>
26+
</Flex>
27+
<Flex gap="sm">
2828
<Button btnType="ghost" style={style}>Ghost</Button>
2929
<Button disabled btnType="ghost" style={style}>Ghost (disabled)</Button>
30-
</div>
31-
<div>
30+
</Flex>
31+
<Flex gap="sm">
3232
<Button btnType="success" style={style}>Success</Button>
3333
<Button disabled btnType="success" style={style}>Success (disabled)</Button>
34-
</div>
35-
<div>
34+
</Flex>
35+
<Flex gap="sm">
3636
<Button btnType="info" style={style}>Info</Button>
3737
<Button disabled btnType="info" style={style}>Info (disabled)</Button>
38-
</div>
39-
<div>
38+
</Flex>
39+
<Flex gap="sm">
4040
<Button btnType="warning" style={style}>Warning</Button>
4141
<Button disabled btnType="warning" style={style}>Warning (disabled)</Button>
42-
</div>
43-
<div>
42+
</Flex>
43+
<Flex gap="sm">
4444
<Button btnType="danger" style={style}>Danger</Button>
4545
<Button disabled btnType="danger" style={style}>Danger (disabled)</Button>
46-
</div>
47-
<div>
46+
</Flex>
47+
<Flex gap="sm">
4848
<Button btnType="link" style={style}>Link</Button>
4949
<Button disabled btnType="link" style={style}>Link (disabled)</Button>
50-
</div>
50+
</Flex>
5151
</>
5252
)
5353
}

‎components/button/demo/icon.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together.
66

77
```jsx live
8-
<>
8+
<Flex gap="sm">
99
<Button icon={<Icon name="wifi"/>} color="primary"/>
1010
<Button icon={<Icon name="gift"/>} color="primary"/>
1111
<Button icon={<Icon name="search"/>} color="primary">Search</Button>
1212
<Button btnType="primary">Upload <Icon name="cloud-upload"/></Button>
13-
</>
13+
</Flex>
1414
```
1515

1616
</demo>

‎components/button/demo/loading.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
Click the button to load data, then the button displays a loading state.
66

77
```jsx live
8-
<>
8+
<Flex gap="sm">
99
<Button loading>Default Button</Button>
1010
<Button loading btnType="primary">Primary Button</Button>
1111
<Button loading btnType="link">Link</Button>
12-
</>
12+
</Flex>
1313
```
1414

1515
</demo>

‎components/button/demo/more-types.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
Different colors represent different meanings.
66

77
```jsx live
8-
<>
8+
<Flex gap="sm">
99
<Button btnType="success">Success</Button>
1010
<Button btnType="info">Info</Button>
1111
<Button btnType="warning">Warning</Button>
1212
<Button btnType="danger">Danger</Button>
13-
</>
13+
</Flex>
1414
```
1515

1616
</demo>

‎components/button/demo/size.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@
55
There are three different sizes, `lg`, `md`, `sm`. The default size is `md`.
66

77
```jsx live
8-
<>
8+
<Flex gap="sm">
99
<Button btnType="primary" size="lg">Large Size</Button>
1010
<Button btnType="primary">Default Size</Button>
1111
<Button btnType="primary" size="sm">Small Size</Button>
12-
</>
12+
</Flex>
1313
```
1414

1515
</demo>

‎components/button/demo/type.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ There are `default`, `primary`, `outline`, `ghost` and `link` button.
88
99

1010
```jsx live
11-
<>
11+
<Flex gap="sm">
1212
<Button>Default</Button>
1313
<Button btnType="primary">Primary</Button>
1414
<Button btnType="outline">Outline</Button>
1515
<Button btnType="ghost">Ghost</Button>
1616
<Button btnType="link">Link</Button>
17-
</>
17+
</Flex>
1818
```
1919

2020
</demo>

‎components/button/style/_index.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,6 @@ $btn-prefix: #{$prefix}-btn;
2323
transition: $btn-transition;
2424
line-height: $btn-line-height;
2525

26-
& + .#{$btn-prefix} {
27-
margin-left: 10px;
28-
}
29-
3026
&__loader {
3127
@include loader();
3228
}

‎components/dropdown/demo/arrow.md‎

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -18,27 +18,30 @@ class ArrowExample extends React.PureComponent {
1818

1919
render() {
2020
return (
21-
<div>
22-
<Dropdown arrow overlay={this.renderOverlay()} placement="bottom-start">
23-
<Button>bottomLeft</Button>
24-
</Dropdown>
25-
<Dropdown arrow overlay={this.renderOverlay()} placement="bottom">
26-
<Button>bottomCenter</Button>
27-
</Dropdown>
28-
<Dropdown arrow overlay={this.renderOverlay()} placement="bottom-end">
29-
<Button>bottomRight</Button>
30-
</Dropdown>
21+
<>
22+
<Flex gap="sm">
23+
<Dropdown arrow overlay={this.renderOverlay()} placement="bottom-start">
24+
<Button>bottomLeft</Button>
25+
</Dropdown>
26+
<Dropdown arrow overlay={this.renderOverlay()} placement="bottom">
27+
<Button>bottomCenter</Button>
28+
</Dropdown>
29+
<Dropdown arrow overlay={this.renderOverlay()} placement="bottom-end">
30+
<Button>bottomRight</Button>
31+
</Dropdown>
32+
</Flex>
3133
<br />
32-
<br />
33-
<Dropdown arrow overlay={this.renderOverlay()} placement="top-start">
34-
<Button>topLeft</Button>
35-
</Dropdown>
36-
<Dropdown arrow overlay={this.renderOverlay()} placement="top">
37-
<Button>topCenter</Button>
38-
</Dropdown>
39-
<Dropdown arrow overlay={this.renderOverlay()} placement="top-end">
40-
<Button>topRight</Button>
41-
</Dropdown>
34+
<Flex gap="sm">
35+
<Dropdown arrow overlay={this.renderOverlay()} placement="top-start">
36+
<Button>topLeft</Button>
37+
</Dropdown>
38+
<Dropdown arrow overlay={this.renderOverlay()} placement="top">
39+
<Button>topCenter</Button>
40+
</Dropdown>
41+
<Dropdown arrow overlay={this.renderOverlay()} placement="top-end">
42+
<Button>topRight</Button>
43+
</Dropdown>
44+
</Flex>
4245
</div>
4346
);
4447
}

‎components/dropdown/demo/placement.md‎

Lines changed: 24 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -18,30 +18,31 @@ class PlacementExample extends React.PureComponent {
1818

1919
render() {
2020
return (
21-
<div>
22-
<Dropdown overlay={this.renderOverlay()} placement="top-start">
23-
<Button>topLeft</Button>
24-
</Dropdown>
25-
<Dropdown overlay={this.renderOverlay()} placement="top">
26-
<Button>topCenter</Button>
27-
</Dropdown>
28-
<Dropdown overlay={this.renderOverlay()} placement="top-end">
29-
<Button>topRight</Button>
30-
</Dropdown>
31-
21+
<>
22+
<Flex gap="sm">
23+
<Dropdown overlay={this.renderOverlay()} placement="top-start">
24+
<Button>topLeft</Button>
25+
</Dropdown>
26+
<Dropdown overlay={this.renderOverlay()} placement="top">
27+
<Button>topCenter</Button>
28+
</Dropdown>
29+
<Dropdown overlay={this.renderOverlay()} placement="top-end">
30+
<Button>topRight</Button>
31+
</Dropdown>
32+
</Flex>
3233
<br />
33-
<br />
34-
35-
<Dropdown overlay={this.renderOverlay()} placement="bottom-start">
36-
<Button>bottomLeft</Button>
37-
</Dropdown>
38-
<Dropdown overlay={this.renderOverlay()} placement="bottom">
39-
<Button>bottomCenter</Button>
40-
</Dropdown>
41-
<Dropdown overlay={this.renderOverlay()} placement="bottom-end">
42-
<Button>bottomRight</Button>
43-
</Dropdown>
44-
</div>
34+
<Flex gap="sm">
35+
<Dropdown overlay={this.renderOverlay()} placement="bottom-start">
36+
<Button>bottomLeft</Button>
37+
</Dropdown>
38+
<Dropdown overlay={this.renderOverlay()} placement="bottom">
39+
<Button>bottomCenter</Button>
40+
</Dropdown>
41+
<Dropdown overlay={this.renderOverlay()} placement="bottom-end">
42+
<Button>bottomRight</Button>
43+
</Dropdown>
44+
</Flex>
45+
</>
4546
);
4647
}
4748
}

‎components/form/demo/basic.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ Basic Form data control.
2828
<Checkbox>Remember Me</Checkbox>
2929
</Form.Item>
3030
<Form.Item>
31-
<>
31+
<Flex gap="sm">
3232
<Button btnType="primary" type="submit">Submit</Button>
3333
<Button type="reset">Reset</Button>
34-
</>
34+
</Flex>
3535
</Form.Item>
3636
</Form>
3737
```

0 commit comments

Comments
 (0)