feat(dialog): uses n as CSS vars prefix. (#1878)

* feat(dialog): uses `n` as CSS vars prefix. * Update Dialog.spec.tsx Co-authored-by: 07akioni <[email protected]>
tusen-ai · Dec 19, 2021 · 1158671 · 1158671
1 parent 83df1c2
commit 1158671
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 71 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -21,6 +21,7 @@
 - `n-avatar` uses `n` as CSS vars prefix.
 - `n-dynamic-tags` uses `n` as CSS vars prefix.
 - `n-tag` uses `n` as CSS vars prefix.
+- `n-dialog` uses `n` as CSS vars prefix.
 
 ## 2.23.0 (2021-12-17)
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -21,6 +21,7 @@
 - `n-avatar` 的 CSS 变量使用 `n` 作为前缀
 - `n-dynamic-tags` 的 CSS 变量使用 `n` 作为前缀
 - `n-tag` 的 CSS 变量使用 `n` 作为前缀
+- `n-dialog` 的 CSS 变量使用 `n` 作为前缀
 
 ## 2.23.0 (2021-12-17)
 

diff --git a/src/dialog/src/Dialog.tsx b/src/dialog/src/Dialog.tsx
@@ -144,27 +144,27 @@ export default defineComponent({
           }
         } = themeRef.value
         return {
-          '--font-size': fontSize,
-          '--icon-color': iconColor,
-          '--bezier': cubicBezierEaseInOut,
-          '--close-margin': closeMargin,
-          '--icon-margin': iconMargin,
-          '--icon-size': iconSize,
-          '--close-size': closeSize,
-          '--close-color': closeColor,
-          '--close-color-hover': closeColorHover,
-          '--close-color-pressed': closeColorPressed,
-          '--color': color,
-          '--text-color': textColor,
-          '--border-radius': borderRadius,
-          '--padding': padding,
-          '--line-height': lineHeight,
-          '--border': border,
-          '--content-margin': contentMargin,
-          '--title-font-size': titleFontSize,
-          '--title-font-weight': titleFontWeight,
-          '--title-text-color': titleTextColor,
-          '--action-space': actionSpace
+          '--n-font-size': fontSize,
+          '--n-icon-color': iconColor,
+          '--n-bezier': cubicBezierEaseInOut,
+          '--n-close-margin': closeMargin,
+          '--n-icon-margin': iconMargin,
+          '--n-icon-size': iconSize,
+          '--n-close-size': closeSize,
+          '--n-close-color': closeColor,
+          '--n-close-color-hover': closeColorHover,
+          '--n-close-color-pressed': closeColorPressed,
+          '--n-color': color,
+          '--n-text-color': textColor,
+          '--n-border-radius': borderRadius,
+          '--n-padding': padding,
+          '--n-line-height': lineHeight,
+          '--n-border': border,
+          '--n-content-margin': contentMargin,
+          '--n-title-font-size': titleFontSize,
+          '--n-title-font-weight': titleFontWeight,
+          '--n-title-text-color': titleTextColor,
+          '--n-action-space': actionSpace
         }
       })
     }

diff --git a/src/dialog/src/styles/index.cssr.ts b/src/dialog/src/styles/index.cssr.ts
@@ -1,53 +1,53 @@
 import { asModal, c, cB, cE, cM, insideModal } from '../../../_utils/cssr'
 
 // vars:
-// --icon-color
-// --bezier
-// --close-margin
-// --icon-margin
-// --icon-size
-// --close-size
-// --close-color
-// --close-color-hover
-// --close-color-pressed
-// --color
-// --text-color
-// --border-radius
-// --padding
-// --line-height
-// --border
-// --content-margin
-// --title-font-size
-// --title-font-weight
-// --title-text-color
-// --action-space
+// --n-icon-color
+// --n-bezier
+// --n-close-margin
+// --n-icon-margin
+// --n-icon-size
+// --n-close-size
+// --n-close-color
+// --n-close-color-hover
+// --n-close-color-pressed
+// --n-color
+// --n-text-color
+// --n-border-radius
+// --n-padding
+// --n-line-height
+// --n-border
+// --n-content-margin
+// --n-title-font-size
+// --n-title-font-weight
+// --n-title-text-color
+// --n-action-space
 export default c([
   cB('dialog', `
-    line-height: var(--line-height);
+    line-height: var(--n-line-height);
     position: relative;
-    background: var(--color);
-    color: var(--text-color);
+    background: var(--n-color);
+    color: var(--n-text-color);
     box-sizing: border-box;
     margin: auto;
-    border-radius: var(--border-radius);
-    padding: var(--padding);
+    border-radius: var(--n-border-radius);
+    padding: var(--n-padding);
     transition: 
-      border-color .3s var(--bezier),
-      background-color .3s var(--bezier),
-      color .3s var(--bezier);
+      border-color .3s var(--n-bezier),
+      background-color .3s var(--n-bezier),
+      color .3s var(--n-bezier);
   `, [
     cE('icon', {
-      color: 'var(--icon-color)'
+      color: 'var(--n-icon-color)'
     }),
     cM('bordered', {
-      border: 'var(--border)'
+      border: 'var(--n-border)'
     }),
     cM('icon-top', [
       cE('close', {
-        margin: 'var(--close-margin)'
+        margin: 'var(--n-close-margin)'
       }),
       cE('icon', {
-        margin: 'var(--icon-margin)'
+        margin: 'var(--n-icon-margin)'
       }),
       cE('content', {
         textAlign: 'center'
@@ -61,21 +61,21 @@ export default c([
     ]),
     cM('icon-left', [
       cE('icon', {
-        margin: 'var(--icon-margin)'
+        margin: 'var(--n-icon-margin)'
       })
     ]),
     cE('close', `
-      font-size: var(--close-size);
+      font-size: var(--n-close-size);
       position: absolute;
       right: 0;
       top: 0;
-      margin: var(--close-margin);
-      transition: .3s color var(--bezier);
+      margin: var(--n-close-margin);
+      transition: .3s color var(--n-bezier);
       z-index: 1;
     `),
     cE('content', `
-      font-size: var(--font-size);
-      margin: var(--content-margin);
+      font-size: var(--n-font-size);
+      margin: var(--n-content-margin);
       position: relative;
       word-break: break-word;
     `, [
@@ -86,20 +86,20 @@ export default c([
       justify-content: flex-end;
     `, [
       c('> *:not(:last-child)', {
-        marginRight: 'var(--action-space)'
+        marginRight: 'var(--n-action-space)'
       })
     ]),
     cE('icon', {
-      fontSize: 'var(--icon-size)',
-      transition: 'color .3s var(--bezier)'
+      fontSize: 'var(--n-icon-size)',
+      transition: 'color .3s var(--n-bezier)'
     }),
     cE('title', `
-      transition: color .3s var(--bezier);
+      transition: color .3s var(--n-bezier);
       display: flex;
       align-items: center;
-      font-size: var(--title-font-size);
-      font-weight: var(--title-font-weight);
-      color: var(--title-text-color);
+      font-size: var(--n-title-font-size);
+      font-weight: var(--n-title-font-weight);
+      color: var(--n-title-text-color);
     `),
     cB('dialog-icon-container', {
       display: 'flex',

diff --git a/src/dialog/tests/Dialog.spec.tsx b/src/dialog/tests/Dialog.spec.tsx
@@ -182,39 +182,39 @@ describe('n-dialog', () => {
     ))
     expect(
       document.querySelector('.n-dialog')?.getAttribute('style')
-    ).toContain('--icon-color: #18a058;')
+    ).toContain('--n-icon-color: #18a058;')
     wrapperCreate.unmount()
 
     const wrapperError = await mount(() => (
       <Provider>{{ default: () => <TestError /> }}</Provider>
     ))
     expect(
       document.querySelector('.n-dialog')?.getAttribute('style')
-    ).toContain('--icon-color: #d03050;')
+    ).toContain('--n-icon-color: #d03050;')
     wrapperError.unmount()
 
     const wrapperInfo = await mount(() => (
       <Provider>{{ default: () => <TestInfo /> }}</Provider>
     ))
     expect(
       document.querySelector('.n-dialog')?.getAttribute('style')
-    ).toContain('--icon-color: #2080f0;')
+    ).toContain('--n-icon-color: #2080f0;')
     wrapperInfo.unmount()
 
     const wrapperSuccess = await mount(() => (
       <Provider>{{ default: () => <TestSuccess /> }}</Provider>
     ))
     expect(
       document.querySelector('.n-dialog')?.getAttribute('style')
-    ).toContain('--icon-color: #18a058;')
+    ).toContain('--n-icon-color: #18a058;')
     wrapperSuccess.unmount()
 
     const wrapperWarning = await mount(() => (
       <Provider>{{ default: () => <TestWarning /> }}</Provider>
     ))
     expect(
       document.querySelector('.n-dialog')?.getAttribute('style')
-    ).toContain('--icon-color: #f0a020;')
+    ).toContain('--n-icon-color: #f0a020;')
     wrapperWarning.unmount()
   })