fix(dialog): display an empty button when positive-text is not set, f…

…ix #549
tusen-ai · Jul 21, 2021 · dab555d · dab555d
1 parent b29f32f
commit dab555d
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 33 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -14,6 +14,7 @@
 - Fix `n-space`'s inner `display: grid` element breaks item height, closes `https://github.com/TuSimple/naive-ui/issues/546`.
 - Fix `n-dropdown`'s `render-label` prop is invalid for group type option.
 - Fix `n-descriptions` doesn't work with `v-for` children.
+- Fix `n-dialog` display an empty button when `positive-text` is not set, closes [#549](https://github.com/TuSimple/naive-ui/issues/549).
 
 ## 2.15.5 (2021-07-16)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -14,6 +14,7 @@
 - 修复 `n-space` 中 `display: grid` 的元素显示不正确，关闭 `https://github.com/TuSimple/naive-ui/issues/546`
 - 修复 `n-dropdown` 的 `render-label` 属性对 group 类型 option 失效
 - 修复 `n-descriptions` 无法使用 `v-for` 的子元素
+- 修复 `n-dialog` `positive-text` 为空仍然显示按钮，关闭 [#549](https://github.com/TuSimple/naive-ui/issues/549)
 
 ## 2.15.5 (2021-07-16)
 

diff --git a/src/dialog/src/Dialog.tsx b/src/dialog/src/Dialog.tsx
@@ -185,6 +185,7 @@ export default defineComponent({
       title,
       content,
       negativeText,
+      positiveText,
       handlePositiveClick,
       handleNegativeClick,
       mergedTheme,
@@ -242,36 +243,40 @@ export default defineComponent({
         <div class={`${mergedClsPrefix}-dialog__content`}>
           {renderSlot($slots, 'default', undefined, () => [render(content)])}
         </div>
-        <div class={`${mergedClsPrefix}-dialog__action`}>
-          {renderSlot($slots, 'action', undefined, () => [
-            negativeText ? (
-              <NButton
-                theme={mergedTheme.peers.Button}
-                themeOverrides={mergedTheme.peerOverrides.Button}
-                ghost
-                size="small"
-                onClick={handleNegativeClick}
-              >
-                {{
-                  default: () => render(this.negativeText)
-                }}
-              </NButton>
-            ) : null,
-            <NButton
-              theme={mergedTheme.peers.Button}
-              themeOverrides={mergedTheme.peerOverrides.Button}
-              disabled={loading}
-              loading={loading}
-              size="small"
-              type={type === 'default' ? 'primary' : type}
-              onClick={handlePositiveClick}
-            >
-              {{
-                default: () => render(this.positiveText)
-              }}
-            </NButton>
-          ])}
-        </div>
+        {$slots.action || (!$slots.action && (positiveText || negativeText)) ? (
+          <div class={`${mergedClsPrefix}-dialog__action`}>
+            {renderSlot($slots, 'action', undefined, () => [
+              this.negativeText && (
+                <NButton
+                  theme={mergedTheme.peers.Button}
+                  themeOverrides={mergedTheme.peerOverrides.Button}
+                  ghost
+                  size="small"
+                  onClick={handleNegativeClick}
+                >
+                  {{
+                    default: () => render(this.negativeText)
+                  }}
+                </NButton>
+              ),
+              this.positiveText && (
+                <NButton
+                  theme={mergedTheme.peers.Button}
+                  themeOverrides={mergedTheme.peerOverrides.Button}
+                  disabled={loading}
+                  loading={loading}
+                  size="small"
+                  type={type === 'default' ? 'primary' : type}
+                  onClick={handlePositiveClick}
+                >
+                  {{
+                    default: () => render(this.positiveText)
+                  }}
+                </NButton>
+              )
+            ])}
+          </div>
+        ) : null}
       </div>
     )
   }

diff --git a/src/dialog/src/styles/index.cssr.ts b/src/dialog/src/styles/index.cssr.ts
@@ -76,7 +76,9 @@ export default c([
       font-size: var(--font-size);
       margin: var(--content-margin);
       position: relative;
-    `),
+    `, [
+      c('&:last-child', 'margin-bottom: 0;')
+    ]),
     cE('action', `
       display: flex;
       justify-content: flex-end;

diff --git a/src/dialog/tests/Dialog.spec.tsx b/src/dialog/tests/Dialog.spec.tsx
@@ -26,7 +26,9 @@ describe('n-dialog', () => {
         return null
       }
     })
-    const dialogProvider = mount(() => <Provider>{{ default: () => <Test /> }}</Provider>)
+    const dialogProvider = mount(() => (
+      <Provider>{{ default: () => <Test /> }}</Provider>
+    ))
     dialogProvider.unmount()
   })
 
@@ -38,10 +40,17 @@ describe('n-dialog', () => {
         content: 'success'
       }
     })
-    expect(document.querySelector('.n-dialog__content')?.textContent).toEqual('success')
+    expect(document.querySelector('.n-dialog__content')?.textContent).toEqual(
+      'success'
+    )
     dialog.unmount()
   })
 
+  it("shouldn't display button if no text is set", () => {
+    const wrapper = mount(NDialog)
+    expect(wrapper.find('button').exists()).toEqual(false)
+  })
+
   it('async', async () => {
     const Test = defineComponent({
       setup () {