feat(dialog): useDialog add style option (#1124)

Co-authored-by: yugang.cao <yugang.cao@tusimple.ai>

CHANGELOG.en-US.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `useDialog` option add `style` prop, closes [#1054](https://github.com/TuSimple/naive-ui/issues/1054).
+
 ## 2.18.0 (2021-09-07)
 
 ### Breaking Changes

CHANGELOG.zh-CN.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Pending
+
+### Feats
+
+- `useDialog` 选项新增 `style` 属性，关闭 [#1054](https://github.com/TuSimple/naive-ui/issues/1054)
+
 ## 2.18.0 (2021-09-07)
 
 ### Breaking Changes

src/dialog/src/DialogEnvironment.tsx

@@ -1,6 +1,6 @@
 // use absolute path to make sure no circular ref of style
 // this -> modal-index -> modal-style
-import { h, defineComponent, PropType, ref } from 'vue'
+import { h, defineComponent, PropType, ref, CSSProperties } from 'vue'
 import NModal from '../../modal/src/Modal'
 import { keep } from '../../_utils'
 import NDialog, { dialogProps, dialogPropKeys } from './Dialog'
@@ -125,6 +125,7 @@ export default defineComponent({
           default: () => (
             <NDialog
               {...keep(this.$props, dialogPropKeys)}
+              style={this.$attrs.style as CSSProperties}
               onClose={handleCloseClick}
               onNegativeClick={handleNegativeClick}
               onPositiveClick={handlePositiveClick}

src/dialog/src/DialogProvider.ts

@@ -18,7 +18,9 @@ import { useClicked, useClickPosition } from 'vooks'
 
 export type DialogOptions = Partial<
 ExtractPropTypes<typeof exposedDialogEnvProps>
->
+> & {
+  style?: string | { [x: string]: string}
+}
 
 export type DialogReactive = {
   readonly key: string

src/dialog/tests/Dialog.spec.tsx

@@ -66,8 +66,9 @@ describe('n-dialog', () => {
         return null
       }
     })
-    await mount(() => <Provider>{{ default: () => <Test /> }}</Provider>)
+    const wrapper = await mount(() => <Provider>{{ default: () => <Test /> }}</Provider>)
     expect(document.querySelector('.n-button__icon')).not.toEqual(null)
+    wrapper.unmount()
   })
 
   it('maskClosable', async () => {
@@ -86,12 +87,13 @@ describe('n-dialog', () => {
         return null
       }
     })
-    mount(() => <Provider>{{ default: () => <Test /> }}</Provider>)
+    const wrapper = mount(() => <Provider>{{ default: () => <Test /> }}</Provider>)
     document.body.dispatchEvent(mousedownEvent)
     document.body.dispatchEvent(mouseupEvent)
     await nextTick(() => {
       expect(document.querySelector('.n-dialog')).not.toBeNull()
     })
+    wrapper.unmount()
   })
 
   it('onMaskClick', async () => {
@@ -111,9 +113,31 @@ describe('n-dialog', () => {
         return null
       }
     })
-    await mount(() => <Provider>{{ default: () => <Test /> }}</Provider>)
+    const wrapper = await mount(() => <Provider>{{ default: () => <Test /> }}</Provider>)
     document.body.dispatchEvent(mousedownEvent)
     document.body.dispatchEvent(mouseupEvent)
     expect(onMaskClick).toHaveBeenCalled()
+    wrapper.unmount()
+  })
+
+  it('should work with `style` option', async () => {
+    const Test = defineComponent({
+      setup () {
+        const dialog = useDialog()
+        dialog.warning({
+          title: 'Custom style',
+          content: 'Content',
+          style: {
+            color: 'rgb(79, 178, 51)'
+          }
+        })
+      },
+      render () {
+        return null
+      }
+    })
+    const wrapper = await mount(() => <Provider>{{ default: () => <Test /> }}</Provider>)
+    expect(document.querySelector('.n-dialog')?.getAttribute('style')).toContain('color: rgb(79, 178, 51);')
+    wrapper.unmount()
   })
 })