fix(components): [global-config] (#11866)

* fix(components): [global-config]

* Fix size injection for global components.

* chore: remove unused

packages/components/config-provider/__tests__/config-provider.test.tsx

@@ -15,6 +15,7 @@ import ConfigProvider from '../src/config-provider'
 import type { PropType } from 'vue'
 import type { VueWrapper } from '@vue/test-utils'
 import type { Language } from '@element-plus/locale'
+import type { ComponentSize } from '@element-plus/constants'
 import type { ConfigProviderProps } from '../src/config-provider-props'
 
 const TestComp = defineComponent({
@@ -244,20 +245,27 @@ describe('config-provider', () => {
   })
 
   describe('global component configs', () => {
-    it('should use global configured settings', () => {
+    it('should use global configured settings', async () => {
       const namespace = 'test'
       const locale = Chinese
       const zIndex = 1000
       const block = 'button'
+      const size = 'large'
       const receiverRef = ref()
+      const fallback = ref('' as ComponentSize)
       const ReceiverComponent = defineComponent({
         setup() {
-          receiverRef.value = useGlobalComponentSettings(block)
+          receiverRef.value = useGlobalComponentSettings(block, fallback)
         },
         template: '<div></div>',
       })
       mount(() => (
-        <ConfigProvider zIndex={zIndex} locale={locale} namespace={namespace}>
+        <ConfigProvider
+          zIndex={zIndex}
+          locale={locale}
+          namespace={namespace}
+          size={size}
+        >
           <ReceiverComponent />
         </ConfigProvider>
       ))
@@ -266,6 +274,12 @@ describe('config-provider', () => {
       expect(vm.ns.namespace).toBe(namespace)
       expect(vm.locale.locale).toBe(locale)
       expect(vm.zIndex.currentZIndex).toBeGreaterThanOrEqual(zIndex)
+      expect(vm.size).toBe(size)
+
+      fallback.value = 'small'
+      await nextTick()
+
+      expect(vm.size).toBe('small')
     })
   })
 })

packages/components/config-provider/src/hooks/use-global-config.ts

@@ -45,7 +45,10 @@ export function useGlobalConfig(
 }
 
 // for components like `ElMessage` `ElNotification` `ElMessageBox`.
-export function useGlobalComponentSettings(block: string) {
+export function useGlobalComponentSettings(
+  block: string,
+  sizeFallback?: MaybeRef<ConfigProviderContext['size']>
+) {
   const config = useGlobalConfig()
 
   const ns = useNamespace(
@@ -57,11 +60,13 @@ export function useGlobalComponentSettings(block: string) {
   const zIndex = useZIndex(
     computed(() => config.value?.zIndex || defaultInitialZIndex)
   )
+  const size = computed(() => unref(sizeFallback) || config.value?.size || '')
 
   return {
     ns,
     locale,
     zIndex,
+    size,
   }
 }
 

packages/components/message-box/src/index.vue

@@ -169,7 +169,6 @@ import {
   useSameTarget,
 } from '@element-plus/hooks'
 import ElInput from '@element-plus/components/input'
-import { useFormSize } from '@element-plus/components/form'
 import { ElOverlay } from '@element-plus/components/overlay'
 import {
   TypeComponents,
@@ -249,7 +248,15 @@ export default defineComponent({
   emits: ['vanish', 'action'],
   setup(props, { emit }) {
     // const popup = usePopup(props, doClose)
-    const { locale, zIndex, ns } = useGlobalComponentSettings('message-box')
+    const {
+      locale,
+      zIndex,
+      ns,
+      size: btnSize,
+    } = useGlobalComponentSettings(
+      'message-box',
+      computed(() => props.buttonSize)
+    )
 
     const { t } = locale
     const { nextZIndex } = zIndex
@@ -304,11 +311,6 @@ export default defineComponent({
     const contentId = useId()
     const inputId = useId()
 
-    const btnSize = useFormSize(
-      computed(() => props.buttonSize),
-      { prop: true, form: true, formItem: true }
-    )
-
     const iconComponent = computed(
       () => state.icon || TypeComponentsMap[state.type] || ''
     )