various style consistency fixes

app/web/src/components/Actions/FuncRunTabGroup.vue

@@ -10,11 +10,7 @@
         v-if="props.selectedAction"
         class="absolute w-[500px] h-full left-[-500px] bg-neutral-800 z-[-10]"
       >
-        <TabGroup
-          ref="tabGroupRef"
-          variant="fullsize"
-          @closeButtonTabClicked="props.close"
-        >
+        <TabGroup ref="tabGroupRef" @closeButtonTabClicked="props.close">
           <TabGroupCloseButton />
           <ChangesPanelHistorySubpanelTab
             label="Arguments"

app/web/src/components/AssetActionsDetails.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="h-full relative">
     <TabGroup
-      variant="minimal"
+      variant="secondary"
       :startSelectedTabSlug="componentsStore.detailsTabSlugs[1] || undefined"
       marginTop="2xs"
       @update:selectedTab="onTabSelected"

app/web/src/components/AssetFuncAttachDropdown.vue

@@ -2,6 +2,7 @@
   <IconButton
     iconTone="action"
     icon="link"
+    size="sm"
     :requestStatus="requestStatus"
     :selected="menuRef?.isOpen"
     tooltip="Attach Function"

app/web/src/components/AssetFuncListPanel.vue

@@ -9,6 +9,7 @@
         >
           <AssetFuncAttachDropdown
             v-if="assetStore.selectedVariantId"
+            variant="simple"
             :disabled="!assetStore.selectedSchemaVariant?.schemaVariantId"
             @selected-attach-type="openAttachFuncModal"
           />

app/web/src/components/AssetPalette.vue

@@ -20,7 +20,7 @@
               <Icon
                 v-tooltip="{
                   content:
-                    'Drag the assets that you wish to include in your application into the canvas to the right.',
+                    'Drag the assets that you wish to include in your application on to the canvas to the right.',
                   theme: 'w-380',
                 }"
                 class="cursor-pointer hover:text-shade-100 dark:hover:text-shade-0"
@@ -76,7 +76,7 @@
             @click.right.prevent
           >
             <template #label>
-              <TruncateWithTooltip class="text-sm">
+              <TruncateWithTooltip class="text-xs">
                 {{ schemaVariantDisplayName(schemaVariant) }}
               </TruncateWithTooltip>
               <!-- <div

app/web/src/components/ComponentDetails.vue

@@ -75,7 +75,6 @@
         <TabGroup
           ref="tabsRef"
           trackingSlug="asset_details"
-          variant="fullsize"
           :startSelectedTabSlug="
             componentsStore.detailsTabSlugs[0] || undefined
           "
@@ -84,7 +83,7 @@
           <TabGroupItem slug="component">
             <template #label>
               <Inline noWrap alignY="center">
-                <span>Component</span>
+                <span class="uppercase">Component</span>
                 <StatusIndicatorIcon
                   v-if="selectedComponentQualificationStatus"
                   type="qualification"
@@ -96,7 +95,7 @@
             <TabGroup
               ref="componentSubTabsRef"
               trackingSlug="asset_details/component"
-              variant="minimal"
+              variant="secondary"
               :startSelectedTabSlug="
                 componentsStore.detailsTabSlugs[1] || undefined
               "
@@ -149,7 +148,7 @@
           <TabGroupItem slug="actions">
             <template #label>
               <Inline noWrap alignY="center">
-                <span>Actions</span>
+                <span class="uppercase">Actions</span>
                 <PillCounter
                   :count="selectedComponentActionsCount"
                   hideIfZero
@@ -161,7 +160,7 @@
           <TabGroupItem slug="resource">
             <template #label>
               <Inline noWrap alignY="center">
-                <span>Resource</span>
+                <span class="uppercase">Resource</span>
                 <StatusIndicatorIcon
                   v-if="selectedComponent.hasResource"
                   type="resource"

app/web/src/components/CustomizeTabs.vue

@@ -3,7 +3,6 @@
     ref="group"
     :startSelectedTabSlug="tabContentSlug"
     marginTop="2xs"
-    variant="fullsize"
     @update:selected-tab="onTabChange"
   >
     <TabGroupItem slug="assets" label="ASSETS">

app/web/src/components/FuncEditor/FuncDetails.vue

@@ -22,6 +22,7 @@
             :class="clsx(!unlocking && 'hover:scale-125')"
             :loading="unlocking"
             icon="sliders-vertical"
+            size="sm"
             tooltip="Edit"
             tooltipPlacement="top"
             variant="simple"
@@ -101,11 +102,7 @@
       </div>
     </div>
     <div class="flex-grow relative">
-      <TabGroup
-        ref="funcDetailsTabGroupRef"
-        growTabsToFillWidth
-        variant="fullsize"
-      >
+      <TabGroup ref="funcDetailsTabGroupRef" growTabsToFillWidth>
         <TabGroupItem label="Properties" slug="properties">
           <div
             class="flex flex-col absolute inset-0 overflow-y-auto overflow-x-hidden border-t border-neutral-200 dark:border-neutral-600"

app/web/src/components/FuncEditor/FuncTest.vue

@@ -82,6 +82,7 @@
       ref="funcTestTabsRef"
       startSelectedTabSlug="input"
       growTabsToFillWidth
+      variant="secondary"
       marginTop="2xs"
     >
       <TabGroupItem label="Input" slug="input">

app/web/src/components/NoSelectionDetailsPanel.vue

@@ -28,15 +28,14 @@
         startSelectedTabSlug="changes"
         rememberSelectedTabKey="no-selection-details-panel"
         trackingSlug="no-selection-details-panel"
-        variant="fullsize"
       >
-        <TabGroupItem label="CHANGES" slug="changes">
+        <TabGroupItem label="Changes" slug="changes">
           <ChangesPanelProposed />
         </TabGroupItem>
-        <TabGroupItem label="HISTORY" slug="history">
+        <TabGroupItem label="History" slug="history">
           <ChangesPanelHistory />
         </TabGroupItem>
-        <TabGroupItem label="SECRETS" slug="secrets">
+        <TabGroupItem label="Secrets" slug="secrets">
           <SecretsPanel />
         </TabGroupItem>
       </TabGroup>

lib/vue-lib/src/design-system/tabs/TabGroup.vue

@@ -14,7 +14,7 @@
         ref="tabContainerRef"
         :class="
           clsx(
-            variant !== 'fullsize' &&
+            variant !== 'primary' &&
               {
                 none: '',
                 '2xs': 'mt-2xs',
@@ -30,7 +30,7 @@
           v-if="
             firstTabMarginLeft &&
             firstTabMarginLeft !== 'none' &&
-            variant !== 'fullsize'
+            variant !== 'primary'
           "
           :class="
             clsx(
@@ -67,7 +67,14 @@
             @click="clickedTab($event, tab.props.slug)"
             @auxclick.prevent.stop="closeTab(tab)"
           >
-            <div class="max-w-full truncate">
+            <div
+              :class="
+                clsx(
+                  'max-w-full truncate',
+                  variant === 'primary' && 'uppercase',
+                )
+              "
+            >
               <template v-if="tab.slots.label">
                 <component :is="tab.slots.label" />
               </template>
@@ -90,7 +97,7 @@
             </button>
           </a>
           <div
-            v-if="variant !== 'fullsize' && !growTabs"
+            v-if="variant !== 'primary' && !growTabs"
             class="border-b border-neutral-300 dark:border-neutral-600 w-2xs shrink-0"
           />
         </template>
@@ -183,11 +190,10 @@ import { themeClasses } from "../utils/theme_tools";
 import { TabGroupItemDefinition } from "./TabGroupItem.vue";
 
 // TabGroupVariant is used to determine the styling for a TabGroup
-//      "classic" is the original design for TabGroup used throughout the product up until May 2024
-//      "minimal" is the first variant added for a TabGroup which is a child of another TabGroups to use
-//      "fullsize" is the newest design for TabGroup added in May 2024
+//      "primary" is the newest design for TabGroup added in May 2024
+//      "secondary" is the first variant added for a TabGroup which is a child of another TabGroups to use
 // If you intend to add another style variant, please update this comment accordingly!
-export type TabGroupVariant = "classic" | "minimal" | "fullsize";
+export type TabGroupVariant = "primary" | "secondary";
 
 const unmounting = ref(false);
 const showOverflowDropdown = ref(false);
@@ -209,30 +215,30 @@ const props = defineProps({
     default: "none",
   },
   trackingSlug: String,
-  growTabsToFillWidth: { type: Boolean, default: undefined }, // the "fullsize" variant does this by default
-  variant: { type: String as PropType<TabGroupVariant>, default: "classic" },
+  growTabsToFillWidth: { type: Boolean, default: undefined }, // the primary variant does this by default
+  variant: { type: String as PropType<TabGroupVariant>, default: "primary" },
   disableOverflowDropdown: { type: Boolean },
 });
 
 const growTabs = computed(() => {
   if (
     props.growTabsToFillWidth ||
-    (props.growTabsToFillWidth === undefined && props.variant === "fullsize")
+    (props.growTabsToFillWidth === undefined && props.variant === "primary")
   )
     return true;
   else return false;
 });
 
 const variantStyles = (slug: string) => {
   switch (props.variant) {
-    case "minimal":
+    case "secondary":
       return [
         "border-b hover:border-b-2",
         slug === selectedTabSlug.value
           ? "border-current text-action-500 dark:text-action-300 font-bold"
           : "border-neutral-300 dark:border-neutral-600 hover:border-shade-100 dark:hover:border-shade-0",
       ];
-    case "fullsize":
+    default: // PRIMARY
       return [
         "font-bold",
         slug === selectedTabSlug.value && slug !== "closeButton"
@@ -246,16 +252,6 @@ const variantStyles = (slug: string) => {
             ),
         slug === "closeButton" && themeClasses("bg-shade-0", "bg-neutral-800"),
       ];
-    default: // CLASSIC
-      return [
-        "text-neutral-400 border-b border-neutral-300 dark:border-neutral-600 border-x border-t border-x-neutral-300 border-t-neutral-300 dark:border-x-neutral-600 dark:border-t-neutral-600 rounded-t group-hover:border-shade-100 dark:group-hover:border-shade-0",
-        slug === selectedTabSlug.value
-          ? "border-b-white dark:border-b-neutral-800 border-b text-action-700 dark:text-action-300 font-bold"
-          : themeClasses(
-              "hover:text-neutral-400 font-medium hover:bg-neutral-100",
-              "hover:text-neutral-300 font-medium hover:bg-neutral-900",
-            ),
-      ];
   }
 };