refactor: add explicit block prop to link and button comps

Author: essenmitsosse

app/components/Button/Base.vue

@@ -6,6 +6,7 @@ const props = withDefaults(
     'variant'?: 'primary' | 'secondary'
     'size'?: 'small' | 'medium'
     'keyshortcut'?: string
+    'block'?: boolean
 
     /**
      * Do not use this directly. Use keyshortcut instead; it generates the correct HTML and displays the shortcut in the UI.
@@ -32,8 +33,10 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer flex gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
+    class="group cursor-pointer gap-x-1 items-center justify-center font-mono border border-border rounded-md transition-all duration-200 disabled:(opacity-40 cursor-not-allowed border-transparent)"
     :class="{
+      'inline-flex': !block,
+      'flex': block,
       'text-sm px-4 py-2': size === 'medium',
       'text-xs px-2 py-0.5': size === 'small',
       'bg-transparent text-fg hover:enabled:(bg-fg/10) focus-visible:enabled:(bg-fg/10) aria-pressed:(bg-fg text-bg border-fg hover:enabled:(bg-fg text-bg/50))':

app/components/CollapsibleSection.vue

@@ -103,7 +103,7 @@ useHead({
           />
         </button>
 
-        <LinkBase :to="`#${id}`" class="">
+        <LinkBase :to="`#${id}`">
           {{ title }}
         </LinkBase>
       </component>

app/components/Header/AuthModal.client.vue

@@ -142,12 +142,7 @@ watch(handleInput, newHandleInput => {
         {{ $t('auth.modal.create_account') }}
       </ButtonBase>
       <hr class="color-border" />
-      <ButtonBase
-        type="button"
-        variant="primary"
-        class="w-full flex items-center justify-center gap-2"
-        @click="handleBlueskySignIn"
-      >
+      <ButtonBase type="button" variant="primary" class="w-full" @click="handleBlueskySignIn" block>
         {{ $t('auth.modal.connect_bluesky') }}
         <svg fill="none" viewBox="0 0 64 57" width="20" style="width: 20px">
           <path

app/components/Link/Base.vue

@@ -10,8 +10,9 @@ const props = withDefaults(
        * `type` should never be used, because this will always be a link.
        * */
       'type'?: never
-      'variant'?: 'button-primary' | 'button-secondary' | 'link' | 'link-block'
+      'variant'?: 'button-primary' | 'button-secondary' | 'link'
       'size'?: 'small' | 'medium'
+      'block'?: boolean
 
       'keyshortcut'?: string
 
@@ -52,19 +53,18 @@ const isLinkAnchor = computed(
 )
 
 /** size is only applicable for button like links */
-const isLink = computed(() => props.variant === 'link' || props.variant === 'link-block')
+const isLink = computed(() => props.variant === 'link')
 const isButton = computed(() => !isLink.value)
 const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
 const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
-const isBlock = computed(() => isButton.value || props.variant === 'link-block')
 </script>
 
 <template>
   <span
     v-if="disabled"
     :class="{
-      'flex': isBlock,
-      'inline-flex': !isBlock,
+      'flex': block,
+      'inline-flex': !block,
       'opacity-50 gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
         isButton,
       'text-sm px-4 py-2': isButtonMedium,
@@ -78,8 +78,8 @@ const isBlock = computed(() => isButton.value || props.variant === 'link-block')
     v-else
     class="group/link gap-x-1 items-center"
     :class="{
-      'flex': isBlock,
-      'inline-flex': !isBlock,
+      'flex': block,
+      'inline-flex': !block,
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30': !isLinkAnchor && isLink,
       'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
         isLink,

app/components/Package/Versions.vue

@@ -356,7 +356,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="overflow-hidden">
               <LinkBase
                 :to="versionRoute(row.primaryVersion.version)"
-                variant="link-block"
+                block
                 class="text-sm"
                 :class="
                   row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
@@ -413,7 +413,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <LinkBase
                 :to="versionRoute(v.version)"
-                variant="link-block"
+                block
                 class="text-xs"
                 :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                 :title="
@@ -511,7 +511,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <LinkBase
                 :to="versionRoute(row.primaryVersion.version)"
-                variant="link-block"
+                block
                 class="text-xs"
                 :class="
                   row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
@@ -584,7 +584,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      variant="link-block"
+                      block
                       class="text-xs"
                       :class="
                         group.versions[0]?.deprecated
@@ -645,7 +645,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      variant="link-block"
+                      block
                       class="text-xs ms-6"
                       :class="
                         group.versions[0]?.deprecated
@@ -705,7 +705,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <div class="flex items-center justify-between gap-2">
                     <LinkBase
                       :to="versionRoute(v.version)"
-                      variant="link-block"
+                      block
                       class="text-xs"
                       :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                       :title="

app/components/ReadmeTocDropdown.vue

@@ -152,7 +152,8 @@ function handleKeydown(event: KeyboardEvent) {
     @click="toggle"
     @keydown="handleKeydown"
     classicon="i-carbon:list"
-    class="px-2.5 flex items-center"
+    class="px-2.5"
+    block
   >
     <span
       class="i-carbon:chevron-down w-3 h-3"

app/pages/package-code/[...path].vue

@@ -497,7 +497,6 @@ defineOgImageComponent('Default', {
           <LinkBase
             variant="button-secondary"
             :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-            class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
           </LinkBase>
@@ -549,7 +548,6 @@ defineOgImageComponent('Default', {
           <LinkBase
             variant="button-secondary"
             :to="`https://cdn.jsdelivr.net/npm/${packageName}@${version}/${filePath}`"
-            class="inline-flex items-center gap-2"
           >
             {{ $t('code.view_raw') }}
           </LinkBase>