fix(select): cannot override n-empty theme vars (#1151)

Co-authored-by: yugang.cao <yugang.cao@tusimple.ai>
Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -14,6 +14,7 @@
 ### Fixes
 
 - Fix `n-p` warns when `depth` is number.
+- Fix `n-select` can't override `n-empty`'s theme variables.
 - Fix `n-dynamic-tags` add button is not disabled when it is disabled.
 - Fix `n-select` closes menu when enter key is pressed in filterable mode without options data.
 

CHANGELOG.zh-CN.md

@@ -14,6 +14,7 @@
 ### Fixes
 
 - 修复 `n-p` `depth` 传入 number 报错
+- 修复 `n-select` 无法重写 empty 的主题变量
 - 修复 `n-dynamic-tags` 禁用时 add 按钮未被禁用
 - 修复 `n-select` 在 filterable 并且菜单无数据是按下 enter 导致菜单关闭
 

src/_internal/select-menu/src/SelectMenu.tsx

@@ -331,6 +331,7 @@ export default defineComponent({
       getPendingTmNode
     }
     return {
+      mergedTheme: themeRef,
       virtualListRef,
       scrollbarRef,
       style: styleRef,
@@ -383,6 +384,8 @@ export default defineComponent({
         ) : !this.empty ? (
           <NScrollbar
             ref="scrollbarRef"
+            theme={this.mergedTheme.peers.Scrollbar}
+            themeOverrides={this.mergedTheme.peerOverrides.Scrollbar}
             scrollable={this.scrollable}
             container={virtualScroll ? this.virtualListContainer : undefined}
             content={virtualScroll ? this.virtualListContent : undefined}
@@ -466,7 +469,12 @@ export default defineComponent({
           </NScrollbar>
         ) : (
           <div class={`${clsPrefix}-base-select-menu__empty`}>
-            {renderSlot($slots, 'empty', undefined, () => [<NEmpty />])}
+            {renderSlot($slots, 'empty', undefined, () => [
+              <NEmpty
+              theme={this.mergedTheme.peers.Empty}
+              themeOverrides={this.mergedTheme.peerOverrides.Empty}
+              />
+            ])}
           </div>
         )}
         {$slots.action && (

src/select/tests/Select.spec.tsx

@@ -317,4 +317,26 @@ describe('n-select', () => {
       ).toMatchSnapshot()
     })
   })
+
+  it('should work with `themeOverrides` prop', async () => {
+    const selectThemeOverrides = {
+      peers: {
+        InternalSelectMenu: {
+          peers: {
+            Empty: {
+              textColor: '#4fb233'
+            }
+          }
+        }
+      }
+    }
+    const wrapper = mount(NSelect, {
+      props: {
+        themeOverrides: selectThemeOverrides,
+        show: true
+      }
+    })
+    const menuWrapper = wrapper.findComponent(NInternalSelectMenu)
+    expect(menuWrapper.find('.n-base-select-menu__empty .n-empty').attributes('style')).toContain('--text-color: #4fb233;')
+  })
 })