fix(Dialog): use the correct border-radius (#3469)

* fix(Dialog): use the correct border-radius * feat: update demo * test: update snapshots
Tencent · Feb 6, 2025 · 8603fda · 8603fda
1 parent 89149a7
commit 8603fda
Show file tree

Hide file tree

Showing 13 changed files with 367 additions and 42 deletions.
diff --git a/src/dialog/README.en-US.md b/src/dialog/README.en-US.md
@@ -47,11 +47,12 @@ The component provides the following CSS variables, which can be used to customi
 Name | Default Value | Description 
 -- | -- | --
 --td-dialog-body-max-height | 912rpx | - 
---td-dialog-close-color | @font-gray-3 | - 
---td-dialog-content-color | @font-gray-2 | - 
+--td-dialog-border-radius | @radius-extra-large | - 
+--td-dialog-close-color | @text-color-placeholder | - 
+--td-dialog-content-color | @text-color-secondary | - 
 --td-dialog-content-font-size | 32rpx | - 
 --td-dialog-content-line-height | 48rpx | - 
---td-dialog-title-color | @font-gray-1 | - 
+--td-dialog-title-color | @text-color-primary | - 
 --td-dialog-title-font-size | 36rpx | - 
 --td-dialog-title-line-height | 52rpx | - 
---td-dialog-width | 622rpx | -
+--td-dialog-width | 622rpx | - 
diff --git a/src/dialog/README.md b/src/dialog/README.md
@@ -108,11 +108,12 @@ t-class-content | 内容样式类
 名称 | 默认值 | 描述 
 -- | -- | --
 --td-dialog-body-max-height | 912rpx | - 
---td-dialog-close-color | @font-gray-3 | - 
---td-dialog-content-color | @font-gray-2 | - 
+--td-dialog-border-radius | @radius-extra-large | - 
+--td-dialog-close-color | @text-color-placeholder | - 
+--td-dialog-content-color | @text-color-secondary | - 
 --td-dialog-content-font-size | 32rpx | - 
 --td-dialog-content-line-height | 48rpx | - 
---td-dialog-title-color | @font-gray-1 | - 
+--td-dialog-title-color | @text-color-primary | - 
 --td-dialog-title-font-size | 36rpx | - 
 --td-dialog-title-line-height | 52rpx | - 
---td-dialog-width | 622rpx | -
+--td-dialog-width | 622rpx | - 
diff --git a/src/dialog/__test__/__snapshots__/demo.test.js.snap b/src/dialog/__test__/__snapshots__/demo.test.js.snap
@@ -12,7 +12,7 @@ exports[`Dialog Dialog base demo works fine 1`] = `
     bind:tap="showDialog"
   >
     
-  反馈类-基础
+  反馈类-带标题
 
   </t-button>
   <t-dialog
@@ -51,6 +51,30 @@ exports[`Dialog Dialog base demo works fine 1`] = `
     visible=""
     bind:confirm="closeDialog"
   />
+  <t-button
+    block="{{true}}"
+    data-key="showTitleOnly"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  反馈类-纯标题
+
+  </t-button>
+  <t-dialog
+    confirmBtn="{{
+      Object {
+        "content": "知道了",
+        "variant": "base",
+      }
+    }}"
+    title="对话框标题"
+    visible="{{false}}"
+    bind:confirm="closeDialog"
+  />
   <t-button
     block="{{true}}"
     data-key="showMultiTextAndTitle"
@@ -90,6 +114,10 @@ exports[`Dialog Dialog base demo works fine 1`] = `
       这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
       这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
       这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+      这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+      这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+      这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+      这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
     
       </wx-view>
     </wx-scroll-view>
@@ -190,6 +218,33 @@ exports[`Dialog Dialog confirm demo works fine 1`] = `
     bind:cancel="closeDialog"
     bind:confirm="closeDialog"
   />
+  <t-button
+    block="{{true}}"
+    data-key="showLightConfirm"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  确认类-纯标题
+
+  </t-button>
+  <t-dialog
+    cancelBtn="取消"
+    confirmBtn="{{
+      Object {
+        "content": "确定",
+        "theme": "light",
+        "variant": "base",
+      }
+    }}"
+    title="对话框标题"
+    visible="{{false}}"
+    bind:cancel="closeDialog"
+    bind:confirm="closeDialog"
+  />
 </confirm>
 `;
 
@@ -330,7 +385,7 @@ exports[`Dialog Dialog status demo works fine 1`] = `
   <wx-view
     class="demo-desc"
   >
-    带关闭按钮
+    带关闭按钮的对话框
   </wx-view>
   <t-button
     block="{{true}}"
@@ -342,7 +397,7 @@ exports[`Dialog Dialog status demo works fine 1`] = `
     bind:tap="showDialog"
   >
     
-  带关闭按钮
+  带关闭按钮的对话框
 
   </t-button>
   <t-dialog
@@ -351,6 +406,7 @@ exports[`Dialog Dialog status demo works fine 1`] = `
     confirmBtn="{{
       Object {
         "content": "警示操作",
+        "theme": "danger",
         "variant": "base",
       }
     }}"
@@ -375,7 +431,7 @@ exports[`Dialog Dialog with-image demo works fine 1`] = `
     bind:tap="showDialog"
   >
     
-  图片置顶
+  图片置顶-带标题描述
 
   </t-button>
   <t-dialog
@@ -387,8 +443,103 @@ exports[`Dialog Dialog with-image demo works fine 1`] = `
       }
     }}"
     content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
-    title="带输入框对话框"
-    visible=""
+    title="对话框标题"
+    visible="{{false}}"
+    bind:cancel="closeDialog"
+    bind:confirm="closeDialog"
+  >
+    <t-image
+      slot="top"
+      src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+      tClass="dialog-image"
+    />
+  </t-dialog>
+  <t-button
+    block="{{true}}"
+    data-key="imageOnTopWithContent"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  图片置顶-无标题
+
+  </t-button>
+  <t-dialog
+    cancelBtn="取消"
+    confirmBtn="{{
+      Object {
+        "content": "确定",
+        "variant": "base",
+      }
+    }}"
+    content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
+    visible="{{false}}"
+    bind:cancel="closeDialog"
+    bind:confirm="closeDialog"
+  >
+    <t-image
+      slot="top"
+      src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+      tClass="dialog-image"
+    />
+  </t-dialog>
+  <t-button
+    block="{{true}}"
+    data-key="imageOnTopWithTitle"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  图片置顶-纯标题
+
+  </t-button>
+  <t-dialog
+    cancelBtn="取消"
+    confirmBtn="{{
+      Object {
+        "content": "确定",
+        "variant": "base",
+      }
+    }}"
+    title="对话框标题"
+    visible="{{false}}"
+    bind:cancel="closeDialog"
+    bind:confirm="closeDialog"
+  >
+    <t-image
+      slot="top"
+      src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+      tClass="dialog-image"
+    />
+  </t-dialog>
+  <t-button
+    block="{{true}}"
+    data-key="imageOnMiddleWithImage"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  图片置顶-纯图片
+
+  </t-button>
+  <t-dialog
+    cancelBtn="取消"
+    confirmBtn="{{
+      Object {
+        "content": "确定",
+        "variant": "base",
+      }
+    }}"
+    visible="{{false}}"
     bind:cancel="closeDialog"
     bind:confirm="closeDialog"
   >
@@ -408,7 +559,7 @@ exports[`Dialog Dialog with-image demo works fine 1`] = `
     bind:tap="showDialog"
   >
     
-  图片居中
+  图片居中-带标题描述
 
   </t-button>
   <t-dialog
@@ -420,8 +571,40 @@ exports[`Dialog Dialog with-image demo works fine 1`] = `
       }
     }}"
     content="告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内"
-    title="带输入框对话框"
-    visible=""
+    title="对话框标题"
+    visible="{{false}}"
+    bind:cancel="closeDialog"
+    bind:confirm="closeDialog"
+  >
+    <t-image
+      slot="middle"
+      src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+      tClass="image-host dialog-image"
+    />
+  </t-dialog>
+  <t-button
+    block="{{true}}"
+    data-key="imageOnMiddleWithTitle"
+    size="large"
+    tClass="wrapper"
+    theme="primary"
+    variant="outline"
+    bind:tap="showDialog"
+  >
+    
+  图片居中-纯标题
+
+  </t-button>
+  <t-dialog
+    cancelBtn="取消"
+    confirmBtn="{{
+      Object {
+        "content": "确定",
+        "variant": "base",
+      }
+    }}"
+    title="对话框标题"
+    visible="{{false}}"
     bind:cancel="closeDialog"
     bind:confirm="closeDialog"
   >

diff --git a/src/dialog/_example/base/index.js b/src/dialog/_example/base/index.js
@@ -5,6 +5,7 @@ Component({
     showText: false,
     showMultiText: false,
     showTextAndTitle: false,
+    showTitleOnly: false,
     showMultiTextAndTitle: false,
   },
   methods: {

diff --git a/src/dialog/_example/base/index.wxml b/src/dialog/_example/base/index.wxml
@@ -7,7 +7,7 @@
   bind:tap="showDialog"
   block
 >
-  反馈类-基础
+  反馈类-带标题
 </t-button>
 <t-dialog
   visible="{{showTextAndTitle}}"
@@ -35,6 +35,19 @@
   bind:confirm="closeDialog"
 />
 
+<t-button
+  t-class="wrapper"
+  theme="primary"
+  size="large"
+  variant="outline"
+  data-key="showTitleOnly"
+  bind:tap="showDialog"
+  block
+>
+  反馈类-纯标题
+</t-button>
+<t-dialog visible="{{showTitleOnly}}" title="对话框标题" confirm-btn="{{ confirmBtn }}" bind:confirm="closeDialog" />
+
 <t-button
   t-class="wrapper"
   theme="primary"
@@ -61,6 +74,10 @@
       这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
       这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
       这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+      这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+      这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+      这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+      这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
     </view>
   </scroll-view>
 </t-dialog>
diff --git a/src/dialog/_example/base/index.wxss b/src/dialog/_example/base/index.wxss
@@ -12,3 +12,9 @@
 .long-content .content-container {
   white-space: pre-line;
 }
+
+.long-content ::-webkit-scrollbar {
+  display: none;
+  width: 0;
+  height: 0;
+}
diff --git a/src/dialog/_example/confirm/index.js b/src/dialog/_example/confirm/index.js
@@ -4,13 +4,7 @@ Component({
     dialogKey: '',
     showConfirm: false,
     showWarnConfirm: false,
-    showTooLongBtnContent: false,
-    showMultiBtn: false,
-    multiBtnList: [
-      { content: '次要按钮', theme: 'light' },
-      { content: '次要按钮', theme: 'light' },
-      { content: '主要按钮', theme: 'primary' },
-    ],
+    showLightConfirm: false,
   },
   methods: {
     showDialog(e) {