Skip to content

Commit 8603fda

Browse files
anlyyaoanlyyao
authored
fix(Dialog): use the correct border-radius (#3469)
* fix(Dialog): use the correct border-radius * feat: update demo * test: update snapshots
1 parent 89149a7 commit 8603fda

File tree

13 files changed

+367
-42
lines changed

13 files changed

+367
-42
lines changed

‎src/dialog/README.en-US.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,12 @@ The component provides the following CSS variables, which can be used to customi
4747
Name | Default Value | Description
4848
-- | -- | --
4949
--td-dialog-body-max-height | 912rpx | -
50-
--td-dialog-close-color | @font-gray-3 | -
51-
--td-dialog-content-color | @font-gray-2 | -
50+
--td-dialog-border-radius | @radius-extra-large | -
51+
--td-dialog-close-color | @text-color-placeholder | -
52+
--td-dialog-content-color | @text-color-secondary | -
5253
--td-dialog-content-font-size | 32rpx | -
5354
--td-dialog-content-line-height | 48rpx | -
54-
--td-dialog-title-color | @font-gray-1 | -
55+
--td-dialog-title-color | @text-color-primary | -
5556
--td-dialog-title-font-size | 36rpx | -
5657
--td-dialog-title-line-height | 52rpx | -
57-
--td-dialog-width | 622rpx | -
58+
--td-dialog-width | 622rpx | -

‎src/dialog/README.md

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -108,11 +108,12 @@ t-class-content | 内容样式类
108108
名称 | 默认值 | 描述
109109
-- | -- | --
110110
--td-dialog-body-max-height | 912rpx | -
111-
--td-dialog-close-color | @font-gray-3 | -
112-
--td-dialog-content-color | @font-gray-2 | -
111+
--td-dialog-border-radius | @radius-extra-large | -
112+
--td-dialog-close-color | @text-color-placeholder | -
113+
--td-dialog-content-color | @text-color-secondary | -
113114
--td-dialog-content-font-size | 32rpx | -
114115
--td-dialog-content-line-height | 48rpx | -
115-
--td-dialog-title-color | @font-gray-1 | -
116+
--td-dialog-title-color | @text-color-primary | -
116117
--td-dialog-title-font-size | 36rpx | -
117118
--td-dialog-title-line-height | 52rpx | -
118-
--td-dialog-width | 622rpx | -
119+
--td-dialog-width | 622rpx | -

‎src/dialog/__test__/__snapshots__/demo.test.js.snap

Lines changed: 192 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ exports[`Dialog Dialog base demo works fine 1`] = `
1212
bind:tap="showDialog"
1313
>
1414
15-
反馈类-基础
15+
反馈类-带标题
1616
1717
</t-button>
1818
<t-dialog
@@ -51,6 +51,30 @@ exports[`Dialog Dialog base demo works fine 1`] = `
5151
visible=""
5252
bind:confirm="closeDialog"
5353
/>
54+
<t-button
55+
block="{{true}}"
56+
data-key="showTitleOnly"
57+
size="large"
58+
tClass="wrapper"
59+
theme="primary"
60+
variant="outline"
61+
bind:tap="showDialog"
62+
>
63+
64+
反馈类-纯标题
65+
66+
</t-button>
67+
<t-dialog
68+
confirmBtn="{{
69+
Object {
70+
"content": "知道了",
71+
"variant": "base",
72+
}
73+
}}"
74+
title="对话框标题"
75+
visible="{{false}}"
76+
bind:confirm="closeDialog"
77+
/>
5478
<t-button
5579
block="{{true}}"
5680
data-key="showMultiTextAndTitle"
@@ -90,6 +114,10 @@ exports[`Dialog Dialog base demo works fine 1`] = `
90114
这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
91115
这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
92116
这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
117+
这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
118+
这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
119+
这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
120+
这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
93121
94122
</wx-view>
95123
</wx-scroll-view>
@@ -190,6 +218,33 @@ exports[`Dialog Dialog confirm demo works fine 1`] = `
190218
bind:cancel="closeDialog"
191219
bind:confirm="closeDialog"
192220
/>
221+
<t-button
222+
block="{{true}}"
223+
data-key="showLightConfirm"
224+
size="large"
225+
tClass="wrapper"
226+
theme="primary"
227+
variant="outline"
228+
bind:tap="showDialog"
229+
>
230+
231+
确认类-纯标题
232+
233+
</t-button>
234+
<t-dialog
235+
cancelBtn="取消"
236+
confirmBtn="{{
237+
Object {
238+
"content": "确定",
239+
"theme": "light",
240+
"variant": "base",
241+
}
242+
}}"
243+
title="对话框标题"
244+
visible="{{false}}"
245+
bind:cancel="closeDialog"
246+
bind:confirm="closeDialog"
247+
/>
193248
</confirm>
194249
`;
195250

@@ -330,7 +385,7 @@ exports[`Dialog Dialog status demo works fine 1`] = `
330385
<wx-view
331386
class="demo-desc"
332387
>
333-
带关闭按钮
388+
带关闭按钮的对话框
334389
</wx-view>
335390
<t-button
336391
block="{{true}}"
@@ -342,7 +397,7 @@ exports[`Dialog Dialog status demo works fine 1`] = `
342397
bind:tap="showDialog"
343398
>
344399
345-
带关闭按钮
400+
带关闭按钮的对话框
346401
347402
</t-button>
348403
<t-dialog
@@ -351,6 +406,7 @@ exports[`Dialog Dialog status demo works fine 1`] = `
351406
confirmBtn="{{
352407
Object {
353408
"content": "警示操作",
409+
"theme": "danger",
354410
"variant": "base",
355411
}
356412
}}"
@@ -375,7 +431,7 @@ exports[`Dialog Dialog with-image demo works fine 1`] = `
375431
bind:tap="showDialog"
376432
>
377433
378-
图片置顶
434+
图片置顶-带标题描述
379435
380436
</t-button>
381437
<t-dialog
@@ -387,8 +443,103 @@ exports[`Dialog Dialog with-image demo works fine 1`] = `
387443
}
388444
}}"
389445
content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
390-
title="带输入框对话框"
391-
visible=""
446+
title="对话框标题"
447+
visible="{{false}}"
448+
bind:cancel="closeDialog"
449+
bind:confirm="closeDialog"
450+
>
451+
<t-image
452+
slot="top"
453+
src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
454+
tClass="dialog-image"
455+
/>
456+
</t-dialog>
457+
<t-button
458+
block="{{true}}"
459+
data-key="imageOnTopWithContent"
460+
size="large"
461+
tClass="wrapper"
462+
theme="primary"
463+
variant="outline"
464+
bind:tap="showDialog"
465+
>
466+
467+
图片置顶-无标题
468+
469+
</t-button>
470+
<t-dialog
471+
cancelBtn="取消"
472+
confirmBtn="{{
473+
Object {
474+
"content": "确定",
475+
"variant": "base",
476+
}
477+
}}"
478+
content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
479+
visible="{{false}}"
480+
bind:cancel="closeDialog"
481+
bind:confirm="closeDialog"
482+
>
483+
<t-image
484+
slot="top"
485+
src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
486+
tClass="dialog-image"
487+
/>
488+
</t-dialog>
489+
<t-button
490+
block="{{true}}"
491+
data-key="imageOnTopWithTitle"
492+
size="large"
493+
tClass="wrapper"
494+
theme="primary"
495+
variant="outline"
496+
bind:tap="showDialog"
497+
>
498+
499+
图片置顶-纯标题
500+
501+
</t-button>
502+
<t-dialog
503+
cancelBtn="取消"
504+
confirmBtn="{{
505+
Object {
506+
"content": "确定",
507+
"variant": "base",
508+
}
509+
}}"
510+
title="对话框标题"
511+
visible="{{false}}"
512+
bind:cancel="closeDialog"
513+
bind:confirm="closeDialog"
514+
>
515+
<t-image
516+
slot="top"
517+
src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
518+
tClass="dialog-image"
519+
/>
520+
</t-dialog>
521+
<t-button
522+
block="{{true}}"
523+
data-key="imageOnMiddleWithImage"
524+
size="large"
525+
tClass="wrapper"
526+
theme="primary"
527+
variant="outline"
528+
bind:tap="showDialog"
529+
>
530+
531+
图片置顶-纯图片
532+
533+
</t-button>
534+
<t-dialog
535+
cancelBtn="取消"
536+
confirmBtn="{{
537+
Object {
538+
"content": "确定",
539+
"variant": "base",
540+
}
541+
}}"
542+
visible="{{false}}"
392543
bind:cancel="closeDialog"
393544
bind:confirm="closeDialog"
394545
>
@@ -408,7 +559,7 @@ exports[`Dialog Dialog with-image demo works fine 1`] = `
408559
bind:tap="showDialog"
409560
>
410561
411-
图片居中
562+
图片居中-带标题描述
412563
413564
</t-button>
414565
<t-dialog
@@ -420,8 +571,40 @@ exports[`Dialog Dialog with-image demo works fine 1`] = `
420571
}
421572
}}"
422573
content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
423-
title="带输入框对话框"
424-
visible=""
574+
title="对话框标题"
575+
visible="{{false}}"
576+
bind:cancel="closeDialog"
577+
bind:confirm="closeDialog"
578+
>
579+
<t-image
580+
slot="middle"
581+
src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
582+
tClass="image-host dialog-image"
583+
/>
584+
</t-dialog>
585+
<t-button
586+
block="{{true}}"
587+
data-key="imageOnMiddleWithTitle"
588+
size="large"
589+
tClass="wrapper"
590+
theme="primary"
591+
variant="outline"
592+
bind:tap="showDialog"
593+
>
594+
595+
图片居中-纯标题
596+
597+
</t-button>
598+
<t-dialog
599+
cancelBtn="取消"
600+
confirmBtn="{{
601+
Object {
602+
"content": "确定",
603+
"variant": "base",
604+
}
605+
}}"
606+
title="对话框标题"
607+
visible="{{false}}"
425608
bind:cancel="closeDialog"
426609
bind:confirm="closeDialog"
427610
>

‎src/dialog/_example/base/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ Component({
55
showText: false,
66
showMultiText: false,
77
showTextAndTitle: false,
8+
showTitleOnly: false,
89
showMultiTextAndTitle: false,
910
},
1011
methods: {

‎src/dialog/_example/base/index.wxml

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
bind:tap="showDialog"
88
block
99
>
10-
反馈类-基础
10+
反馈类-带标题
1111
</t-button>
1212
<t-dialog
1313
visible="{{showTextAndTitle}}"
@@ -35,6 +35,19 @@
3535
bind:confirm="closeDialog"
3636
/>
3737

38+
<t-button
39+
t-class="wrapper"
40+
theme="primary"
41+
size="large"
42+
variant="outline"
43+
data-key="showTitleOnly"
44+
bind:tap="showDialog"
45+
block
46+
>
47+
反馈类-纯标题
48+
</t-button>
49+
<t-dialog visible="{{showTitleOnly}}" title="对话框标题" confirm-btn="{{ confirmBtn }}" bind:confirm="closeDialog" />
50+
3851
<t-button
3952
t-class="wrapper"
4053
theme="primary"
@@ -61,6 +74,10 @@
6174
这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
6275
这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
6376
这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
77+
这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
78+
这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
79+
这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
80+
这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
6481
</view>
6582
</scroll-view>
6683
</t-dialog>

‎src/dialog/_example/base/index.wxss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,9 @@
1212
.long-content .content-container {
1313
white-space: pre-line;
1414
}
15+
16+
.long-content ::-webkit-scrollbar {
17+
display: none;
18+
width: 0;
19+
height: 0;
20+
}

‎src/dialog/_example/confirm/index.js

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,7 @@ Component({
44
dialogKey: '',
55
showConfirm: false,
66
showWarnConfirm: false,
7-
showTooLongBtnContent: false,
8-
showMultiBtn: false,
9-
multiBtnList: [
10-
{ content: '次要按钮', theme: 'light' },
11-
{ content: '次要按钮', theme: 'light' },
12-
{ content: '主要按钮', theme: 'primary' },
13-
],
7+
showLightConfirm: false,
148
},
159
methods: {
1610
showDialog(e) {

0 commit comments

Comments
 (0)