From 938e13888f4b7da13fceb1c6179d07416fa2b481 Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sun, 5 Jun 2022 00:12:05 +0800
Subject: [PATCH] fix(select): menu checkmark overlaps with label

---
 src/_internal/select-menu/src/SelectMenu.tsx       | 1 +
 src/_internal/select-menu/src/styles/index.cssr.ts | 9 +++------
 src/popselect/demos/zhCN/basic.demo.vue            | 7 +------
 src/popselect/demos/zhCN/index.demo-entry.md       | 4 ++++
 4 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/_internal/select-menu/src/SelectMenu.tsx b/src/_internal/select-menu/src/SelectMenu.tsx
index 649d9dd97..253e1b8e2 100644
--- a/src/_internal/select-menu/src/SelectMenu.tsx
+++ b/src/_internal/select-menu/src/SelectMenu.tsx
@@ -376,6 +376,7 @@ export default defineComponent({
         '--n-option-text-color-pressed': optionTextColorPressed,
         '--n-option-padding': optionPadding,
         '--n-option-padding-left': getPadding(optionPadding, 'left'),
+        '--n-option-padding-right': getPadding(optionPadding, 'right'),
         '--n-loading-color': loadingColor,
         '--n-loading-size': loadingSize
       }
diff --git a/src/_internal/select-menu/src/styles/index.cssr.ts b/src/_internal/select-menu/src/styles/index.cssr.ts
index 5d81af0d0..c06183076 100644
--- a/src/_internal/select-menu/src/styles/index.cssr.ts
+++ b/src/_internal/select-menu/src/styles/index.cssr.ts
@@ -3,6 +3,7 @@ import { fadeInScaleUpTransition } from '../../../../_styles/transitions/fade-in
 
 // --n-loading-color
 // --n-loading-size
+// --n-option-padding-right
 export default cB('base-select-menu', `
   line-height: 1.5;
   outline: none;
@@ -14,11 +15,6 @@ export default cB('base-select-menu', `
     box-shadow .3s var(--n-bezier);
   background-color: var(--n-color);
 `, [
-  cM('multiple', [
-    cB('base-select-option', `
-      padding-right: 28px;
-    `)
-  ]),
   cB('scrollbar', `
     max-height: var(--n-height);
   `),
@@ -77,6 +73,7 @@ export default cB('base-select-menu', `
     cursor: pointer;
     position: relative;
     padding: var(--n-option-padding);
+    padding-right: calc(var(--n-option-padding-right) + 20px);
     transition:
       color .3s var(--n-bezier),
       opacity .3s var(--n-bezier);
@@ -130,7 +127,7 @@ export default cB('base-select-menu', `
     cE('check', `
       font-size: 16px;
       position: absolute;
-      right: 8px;
+      right: calc(var(--n-option-padding-right) - 4px);
       top: calc(50% - 7px);
       color: var(--n-option-check-color);
       transition: color .3s var(--n-bezier);
diff --git a/src/popselect/demos/zhCN/basic.demo.vue b/src/popselect/demos/zhCN/basic.demo.vue
index 1770b6e9f..208f7569d 100644
--- a/src/popselect/demos/zhCN/basic.demo.vue
+++ b/src/popselect/demos/zhCN/basic.demo.vue
@@ -4,12 +4,7 @@
 </markdown>
 
 <template>
-  <n-popselect
-    v-model:value="value"
-    :options="options"
-    trigger="click"
-    width="trigger"
-  >
+  <n-popselect v-model:value="value" :options="options" trigger="click">
     <n-button>{{ value || '弹出选择' }}</n-button>
   </n-popselect>
 </template>
diff --git a/src/popselect/demos/zhCN/index.demo-entry.md b/src/popselect/demos/zhCN/index.demo-entry.md
index d7799309b..cc50826c5 100644
--- a/src/popselect/demos/zhCN/index.demo-entry.md
+++ b/src/popselect/demos/zhCN/index.demo-entry.md
@@ -6,6 +6,10 @@
 
 ```demo
 basic.vue
+size.vue
+scrollable.vue
+multiple.vue
+slot.vue
 ```
 
 ## API