Fix: remove resolveComponent from Tab

Author: juzser

src/components/Tabs/Tabs.vue

@@ -140,13 +140,12 @@ import {
   reactive,
   computed,
   h,
-  resolveComponent,
 } from 'vue';
 import { useBreakpoints } from '@/use/useBreakpoints';
 import useI18n from '@/use/useI18n';
 import type { VueNode } from '@/utilities/types';
 import { useHasSlot } from '@/use/useHasSlot';
-import { Icon, Tooltip, Popover, Box } from '@/components';
+import { Icon, Tooltip, Popover, Box, Text, UnstyledButton } from '@/components';
 import { Tab, TabMeasurer, CreateViewModal, Panel, List } from './components';
 import type { TabMeasurements, TabProps, TabsEvents } from './types';
 import { getVisibleAndHiddenTabIndices } from './utilities';
@@ -529,7 +528,7 @@ watch(
 );
 
 const activator = () => h(
-  resolveComponent('UnstyledButton'),
+  UnstyledButton,
   {
     type: 'button',
     className: classNames(styles.DisclosureActivator),
@@ -539,7 +538,7 @@ const activator = () => h(
   },
   () => [
     h(
-      resolveComponent('Text'),
+      Text,
       { as: 'span', variant: 'bodySm', fontWeight: 'medium' },
       () => props.disclosureText ?? i18n.translate('Polaris.Tabs.toggleTabsLabel'),
     ),
@@ -552,7 +551,7 @@ const activator = () => h(
         ),
       },
       h(
-        resolveComponent('Icon'),
+        Icon,
         { source: ChevronDownIcon, tone: 'subdued' },
       ),
     ),

src/components/Tabs/components/Tab/Tab.vue

@@ -117,13 +117,12 @@ import {
   getCurrentInstance,
   watch,
   h,
-  resolveComponent,
 } from 'vue';
 import useI18n from '@/use/useI18n';
 import { focusFirstFocusableNode, handleMouseUpByBlurring } from '@/utilities/focus';
 import { classNames } from '@/utilities/css';
 import { useHasSlot } from '@/use/useHasSlot';
-import { Popover, ActionList, Modal, ModalSection } from '@/components';
+import { Popover, ActionList, Modal, ModalSection, InlineStack, UnstyledButton, UnstyledLink, Icon, Text, Badge } from '@/components';
 import styles from '@polaris/components/Tabs/Tabs.module.css';
 import InfoIcon from '@icons/InfoIcon.svg';
 import DuplicateIcon from '@icons/DuplicateIcon.svg';
@@ -302,8 +301,8 @@ const handleKeyDown = (event: KeyboardEvent) => {
 const activator = () => {
   return h(
     urlIfNotDisabledOrSelected.value
-      ? resolveComponent('UnstyledLink')
-      : resolveComponent('UnstyledButton'),
+      ? UnstyledLink
+      : UnstyledButton,
     {
       id: props.id,
       className: tabClassName.value,
@@ -321,16 +320,16 @@ const activator = () => {
     },
     () => [
       h(
-        resolveComponent('InlineStack'),
+        InlineStack,
         {
-          gap: 200,
+          gap: '200',
           align: 'center',
           blockAlign: 'center',
           wrap: false,
         },
         () => [
           h(
-            resolveComponent('Text'),
+            Text,
             {
               as: 'span',
               variant: 'bodySm',
@@ -341,7 +340,7 @@ const activator = () => {
             },
           ),
           props.badge ? h(
-            resolveComponent('Badge'),
+            Badge,
             { tone: props.selected ? undefined : 'new' },
             { default: () => props.badge },
           ) : null,
@@ -350,7 +349,7 @@ const activator = () => {
       props.selected && props.actions?.length ? h(
         'div',
         { class: classNames(styles.IconWrap) },
-        h(resolveComponent('Icon'), { source: ChevronDownIcon }),
+        h(Icon, { source: ChevronDownIcon }),
       ) : null,
     ],
   );