Skip to content

Commit 4089368

Browse files
tangjinzhoutangjinzhou
committed
test: update grid snap
1 parent af46975 commit 4089368

File tree

7 files changed

+179
-138
lines changed

7 files changed

+179
-138
lines changed

‎components/empty/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 52 additions & 51 deletions
Large diffs are not rendered by default.

‎components/form/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 33 additions & 5 deletions
Large diffs are not rendered by default.

‎components/grid/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -20,35 +20,35 @@ exports[`renders ./antdv-demo/docs/grid/demo/basic.md correctly 1`] = `
2020

2121
exports[`renders ./antdv-demo/docs/grid/demo/flex.md correctly 1`] = `
2222
<p>sub-element align left</p>
23-
<div class="ant-row-flex ant-row-flex-start">
23+
<div class="ant-row ant-row-start">
2424
<div class="ant-col ant-col-4"> col-4 </div>
2525
<div class="ant-col ant-col-4"> col-4 </div>
2626
<div class="ant-col ant-col-4"> col-4 </div>
2727
<div class="ant-col ant-col-4"> col-4 </div>
2828
</div>
2929
<p>sub-element align center</p>
30-
<div class="ant-row-flex ant-row-flex-center">
30+
<div class="ant-row ant-row-center">
3131
<div class="ant-col ant-col-4"> col-4 </div>
3232
<div class="ant-col ant-col-4"> col-4 </div>
3333
<div class="ant-col ant-col-4"> col-4 </div>
3434
<div class="ant-col ant-col-4"> col-4 </div>
3535
</div>
3636
<p>sub-element align right</p>
37-
<div class="ant-row-flex ant-row-flex-end">
37+
<div class="ant-row ant-row-end">
3838
<div class="ant-col ant-col-4"> col-4 </div>
3939
<div class="ant-col ant-col-4"> col-4 </div>
4040
<div class="ant-col ant-col-4"> col-4 </div>
4141
<div class="ant-col ant-col-4"> col-4 </div>
4242
</div>
4343
<p>sub-element monospaced arrangement</p>
44-
<div class="ant-row-flex ant-row-flex-space-between">
44+
<div class="ant-row ant-row-space-between">
4545
<div class="ant-col ant-col-4"> col-4 </div>
4646
<div class="ant-col ant-col-4"> col-4 </div>
4747
<div class="ant-col ant-col-4"> col-4 </div>
4848
<div class="ant-col ant-col-4"> col-4 </div>
4949
</div>
5050
<p>sub-element align full</p>
51-
<div class="ant-row-flex ant-row-flex-space-around">
51+
<div class="ant-row ant-row-space-around">
5252
<div class="ant-col ant-col-4"> col-4 </div>
5353
<div class="ant-col ant-col-4"> col-4 </div>
5454
<div class="ant-col ant-col-4"> col-4 </div>
@@ -58,7 +58,7 @@ exports[`renders ./antdv-demo/docs/grid/demo/flex.md correctly 1`] = `
5858

5959
exports[`renders ./antdv-demo/docs/grid/demo/flex-align.md correctly 1`] = `
6060
<p>Align Top</p>
61-
<div class="ant-row-flex ant-row-flex-center ant-row-flex-top">
61+
<div class="ant-row ant-row-center ant-row-top">
6262
<div class="ant-col ant-col-4">
6363
<p class="height-100"> col-4 </p>
6464
</div>
@@ -73,7 +73,7 @@ exports[`renders ./antdv-demo/docs/grid/demo/flex-align.md correctly 1`] = `
7373
</div>
7474
</div>
7575
<p>Align Center</p>
76-
<div class="ant-row-flex ant-row-flex-space-around ant-row-flex-middle">
76+
<div class="ant-row ant-row-space-around ant-row-middle">
7777
<div class="ant-col ant-col-4">
7878
<p class="height-100"> col-4 </p>
7979
</div>
@@ -88,7 +88,7 @@ exports[`renders ./antdv-demo/docs/grid/demo/flex-align.md correctly 1`] = `
8888
</div>
8989
</div>
9090
<p>Align Bottom</p>
91-
<div class="ant-row-flex ant-row-flex-space-between ant-row-flex-bottom">
91+
<div class="ant-row ant-row-space-between ant-row-bottom">
9292
<div class="ant-col ant-col-4">
9393
<p class="height-100"> col-4 </p>
9494
</div>
@@ -106,24 +106,24 @@ exports[`renders ./antdv-demo/docs/grid/demo/flex-align.md correctly 1`] = `
106106

107107
exports[`renders ./antdv-demo/docs/grid/demo/flex-fill.md correctly 1`] = `
108108
<div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text"> Percentage columns </span></div>
109-
<div class="ant-row-flex">
109+
<div class="ant-row">
110110
<div class="ant-col" style="flex: 2 2 auto;">2 / 5</div>
111111
<div class="ant-col" style="flex: 3 3 auto;">3 / 5</div>
112112
</div>
113113
<div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text"> Fill rest </span></div>
114-
<div class="ant-row-flex">
114+
<div class="ant-row">
115115
<div class="ant-col" style="flex: 0 0 100px;">100px</div>
116116
<div class="ant-col" style="flex-basis: auto;">auto</div>
117117
</div>
118118
<div class="ant-divider ant-divider-horizontal ant-divider-with-text-left" role="separator"><span class="ant-divider-inner-text"> Raw flex style </span></div>
119-
<div class="ant-row-flex">
119+
<div class="ant-row">
120120
<div class="ant-col" style="flex: 1 1 200px;">1 1 200px</div>
121121
<div class="ant-col" style="flex: 0 1 300px;">0 1 300px</div>
122122
</div>
123123
`;
124124

125125
exports[`renders ./antdv-demo/docs/grid/demo/flex-order.md correctly 1`] = `
126-
<div class="ant-row-flex">
126+
<div class="ant-row">
127127
<div class="ant-col ant-col-6 ant-col-order-4"> 1 col-order-4 </div>
128128
<div class="ant-col ant-col-6 ant-col-order-3"> 2 col-order-3 </div>
129129
<div class="ant-col ant-col-6 ant-col-order-2"> 3 col-order-2 </div>

‎components/grid/style/index.less

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,6 @@
44

55
// Grid system
66
.@{ant-prefix}-row {
7-
.make-row();
8-
9-
display: block;
10-
box-sizing: border-box;
11-
}
12-
13-
.@{ant-prefix}-row + .@{ant-prefix}-row::before {
14-
clear: both;
15-
}
16-
17-
.@{ant-prefix}-row-flex {
187
display: flex;
198
flex-flow: row wrap;
209

@@ -25,52 +14,52 @@
2514
}
2615

2716
// x轴原点
28-
.@{ant-prefix}-row-flex-start {
17+
.@{ant-prefix}-row-start {
2918
justify-content: flex-start;
3019
}
3120

3221
// x轴居中
33-
.@{ant-prefix}-row-flex-center {
22+
.@{ant-prefix}-row-center {
3423
justify-content: center;
3524
}
3625

3726
// x轴反方向
38-
.@{ant-prefix}-row-flex-end {
27+
.@{ant-prefix}-row-end {
3928
justify-content: flex-end;
4029
}
4130

4231
// x轴平分
43-
.@{ant-prefix}-row-flex-space-between {
32+
.@{ant-prefix}-row-space-between {
4433
justify-content: space-between;
4534
}
4635

4736
// x轴有间隔地平分
48-
.@{ant-prefix}-row-flex-space-around {
37+
.@{ant-prefix}-row-space-around {
4938
justify-content: space-around;
5039
}
5140

5241
// 顶部对齐
53-
.@{ant-prefix}-row-flex-top {
42+
.@{ant-prefix}-row-top {
5443
align-items: flex-start;
5544
}
5645

5746
// 居中对齐
58-
.@{ant-prefix}-row-flex-middle {
47+
.@{ant-prefix}-row-middle {
5948
align-items: center;
6049
}
6150

6251
// 底部对齐
63-
.@{ant-prefix}-row-flex-bottom {
52+
.@{ant-prefix}-row-bottom {
6453
align-items: flex-end;
6554
}
6655

6756
.@{ant-prefix}-col {
6857
position: relative;
58+
max-width: 100%;
6959
// Prevent columns from collapsing when empty
7060
min-height: 1px;
7161
}
7262

73-
.make-grid-columns();
7463
.make-grid();
7564

7665
// Extra small grid
@@ -120,3 +109,5 @@
120109
@media (min-width: @screen-xxl-min) {
121110
.make-grid(-xxl);
122111
}
112+
113+
@import './rtl';

‎components/grid/style/mixin.less

Lines changed: 2 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,59 +2,12 @@
22

33
// mixins for grid system
44
// ------------------------
5-
.make-row(@gutter: @grid-gutter-width) {
6-
position: relative;
7-
height: auto;
8-
margin-right: (@gutter / -2);
9-
margin-left: (@gutter / -2);
10-
.clearfix;
11-
}
12-
13-
.make-grid-columns() {
14-
.col(@index) {
15-
@item: ~'.@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}';
16-
.col((@index + 1), @item);
17-
}
18-
.col(@index, @list) when (@index =< @grid-columns) {
19-
@item: ~'.@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}';
20-
.col((@index + 1), ~'@{list}, @{item}');
21-
}
22-
.col(@index, @list) when (@index > @grid-columns) {
23-
@{list} {
24-
position: relative;
25-
padding-right: (@grid-gutter-width / 2);
26-
padding-left: (@grid-gutter-width / 2);
27-
}
28-
}
29-
.col(1);
30-
}
31-
32-
.float-grid-columns(@class) {
33-
.col(@index) {
34-
// initial
35-
@item: ~'.@{ant-prefix}-col@{class}-@{index}';
36-
.col((@index + 1), @item);
37-
}
38-
.col(@index, @list) when (@index =< @grid-columns) {
39-
// general
40-
@item: ~'.@{ant-prefix}-col@{class}-@{index}';
41-
.col((@index + 1), ~'@{list}, @{item}');
42-
}
43-
.col(@index, @list) when (@index > @grid-columns) {
44-
// terminal
45-
@{list} {
46-
flex: 0 0 auto;
47-
float: left;
48-
}
49-
}
50-
.col(1); // kickstart it
51-
}
525

536
.loop-grid-columns(@index, @class) when (@index > 0) {
547
.@{ant-prefix}-col@{class}-@{index} {
558
display: block;
56-
box-sizing: border-box;
57-
width: percentage((@index / @grid-columns));
9+
flex: 0 0 percentage((@index / @grid-columns));
10+
max-width: percentage((@index / @grid-columns));
5811
}
5912
.@{ant-prefix}-col@{class}-push-@{index} {
6013
left: percentage((@index / @grid-columns));
@@ -96,6 +49,5 @@
9649
}
9750

9851
.make-grid(@class: ~'') {
99-
.float-grid-columns(@class);
10052
.loop-grid-columns(@grid-columns, @class);
10153
}

‎components/grid/style/rtl.less

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
@import '../../style/themes/index';
2+
@import '../../style/mixins/index';
3+
4+
.@{ant-prefix}-row {
5+
&-rtl {
6+
direction: rtl;
7+
}
8+
}
9+
10+
// mixin
11+
.loop-grid-columns(@index, @class) when (@index > 0) {
12+
.@{ant-prefix}-col@{class}-push-@{index} {
13+
// reset property in RTL direction
14+
&.@{ant-prefix}-col-rtl {
15+
right: percentage((@index / @grid-columns));
16+
left: auto;
17+
}
18+
}
19+
20+
.@{ant-prefix}-col@{class}-pull-@{index} {
21+
// reset property in RTL direction
22+
&.@{ant-prefix}-col-rtl {
23+
right: auto;
24+
left: percentage((@index / @grid-columns));
25+
}
26+
}
27+
28+
.@{ant-prefix}-col@{class}-offset-@{index} {
29+
// reset property in RTL direction
30+
&.@{ant-prefix}-col-rtl {
31+
margin-right: percentage((@index / @grid-columns));
32+
margin-left: 0;
33+
}
34+
}
35+
}
36+
37+
.loop-grid-columns(@index, @class) when (@index = 0) {
38+
.@{ant-prefix}-col-push-@{index} {
39+
// reset property in RTL direction
40+
&.@{ant-prefix}-col-rtl {
41+
right: auto;
42+
}
43+
}
44+
45+
.@{ant-prefix}-col-pull-@{index} {
46+
&.@{ant-prefix}-col-rtl {
47+
left: auto;
48+
}
49+
}
50+
51+
.@{ant-prefix}-col@{class}-push-@{index} {
52+
&.@{ant-prefix}-col-rtl {
53+
right: auto;
54+
}
55+
}
56+
57+
.@{ant-prefix}-col@{class}-pull-@{index} {
58+
&.@{ant-prefix}-col-rtl {
59+
left: auto;
60+
}
61+
}
62+
63+
.@{ant-prefix}-col@{class}-offset-@{index} {
64+
&.@{ant-prefix}-col-rtl {
65+
margin-right: 0;
66+
}
67+
}
68+
}

‎components/vc-tree-select/src/SearchInput.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const SearchInput = {
2222
ariaId: PropTypes.string,
2323
isMultiple: PropTypes.looseBool.def(true),
2424
},
25+
emits: ['mirrorSearchValueChange'],
2526
setup(props, { emit }) {
2627
const measureRef = ref();
2728
const inputWidth = ref(0);

0 commit comments

Comments
 (0)