refactor: remove unnecessary prop from links (#1247)

Author: essenmitsosse

app/components/AppHeader.vue

@@ -270,7 +270,7 @@ onKeyStroke(
       <!-- Mobile: Menu button (always visible, click to open menu) -->
       <ButtonBase
         type="button"
-        class="sm:hidden flex"
+        class="sm:hidden"
         :aria-label="$t('nav.open_menu')"
         :aria-expanded="showMobileMenu"
         @click="showMobileMenu = !showMobileMenu"

app/components/Button/Base.vue

@@ -6,6 +6,7 @@ const props = withDefaults(
     variant?: 'primary' | 'secondary'
     size?: 'small' | 'medium'
     ariaKeyshortcuts?: string
+    block?: boolean
 
     classicon?: string
   }>(),
@@ -27,8 +28,10 @@ defineExpose({
 <template>
   <button
     ref="el"
-    class="group cursor-pointer inline-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/10 border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
@@ -48,11 +51,7 @@ defineExpose({
     "
     :aria-keyshortcuts="ariaKeyshortcuts"
   >
-    <span
-      v-if="classicon"
-      :class="[size === 'small' ? 'size-3' : 'size-4', classicon]"
-      aria-hidden="true"
-    />
+    <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
     <kbd
       v-if="ariaKeyshortcuts"

app/components/Code/FileTree.vue

@@ -50,7 +50,8 @@ watch(
       <!-- Directory -->
       <template v-if="node.type === 'directory'">
         <ButtonBase
-          class="w-full flex! justify-start! rounded-none! border-none!"
+          class="w-full justify-start! rounded-none! border-none!"
+          block
           :aria-pressed="isNodeActive(node)"
           :style="{ paddingLeft: `${depth * 12 + 12}px` }"
           @click="toggleDir(node.path)"
@@ -82,7 +83,8 @@ watch(
           variant="button-secondary"
           :to="getFileRoute(node.path)"
           :aria-current="currentPath === node.path"
-          class="w-full flex! justify-start! rounded-none! border-none!"
+          class="w-full justify-start! rounded-none! border-none!"
+          block
           :style="{ paddingLeft: `${depth * 12 + 32}px` }"
           :classicon="getFileIcon(node.name)"
         >

app/components/CollapsibleSection.vue

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

app/components/Compare/ComparisonGrid.vue

@@ -42,7 +42,8 @@ function getReplacementTooltip(col: ComparisonGridColumn): string {
           <span class="inline-flex items-center gap-1.5 truncate">
             <LinkBase
               :to="packageRoute(col.name, col.version)"
-              class="text-sm flex! truncate"
+              class="text-sm truncate"
+              block
               :title="col.version ? `${col.name}@${col.version}` : col.name"
             >
               {{ col.name }}<template v-if="col.version">@{{ col.version }}</template>

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

@@ -12,7 +12,7 @@ const props = withDefaults(
       type?: never
       variant?: 'button-primary' | 'button-secondary' | 'link'
       size?: 'small' | 'medium'
-      iconSize?: 'sm' | 'md' | 'lg'
+      block?: boolean
 
       ariaKeyshortcuts?: string
 
@@ -50,28 +50,20 @@ const isLinkAnchor = computed(
   () => !!props.to && typeof props.to === 'string' && props.to.startsWith('#'),
 )
 
-const ICON_SIZE_MAP = {
-  sm: 'size-3 min-w-3',
-  md: 'size-4 min-w-4',
-  lg: 'size-5 min-w-5',
-}
-
 /** size is only applicable for button like links */
 const isLink = computed(() => props.variant === 'link')
-const isButton = computed(() => props.variant !== 'link')
-const isButtonSmall = computed(() => props.size === 'small' && props.variant !== 'link')
-const isButtonMedium = computed(() => props.size === 'medium' && props.variant !== 'link')
-
-const iconSizeClass = computed(
-  () => ICON_SIZE_MAP[props.iconSize || (isButtonSmall.value && 'sm') || 'md'],
-)
+const isButton = computed(() => !isLink.value)
+const isButtonSmall = computed(() => props.size === 'small' && !isLink.value)
+const isButtonMedium = computed(() => props.size === 'medium' && !isLink.value)
 </script>
 
 <template>
   <span
     v-if="disabled"
     :class="{
-      'opacity-50 inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md':
+      '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,
       'text-xs px-2 py-0.5': isButtonSmall,
@@ -82,13 +74,16 @@ const iconSizeClass = computed(
   /></span>
   <NuxtLink
     v-else
-    class="group/link inline-flex gap-x-1 items-center justify-center"
+    class="group/link gap-x-1 items-center"
     :class="{
+      'flex': block,
+      'inline-flex': !block,
       'underline-offset-[0.2rem] underline decoration-1 decoration-fg/30':
         !isLinkAnchor && isLink && !noUnderline,
-      'font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
+      'justify-start font-mono text-fg hover:(decoration-accent text-accent) focus-visible:(decoration-accent text-accent) transition-colors duration-200':
         isLink,
-      'font-mono border border-border rounded-md transition-all duration-200': isButton,
+      'justify-center font-mono border border-border rounded-md transition-all duration-200':
+        isButton,
       'text-sm px-4 py-2': isButtonMedium,
       'text-xs px-2 py-0.5': isButtonSmall,
       'bg-transparent text-fg hover:(bg-fg/10 text-accent) focus-visible:(bg-fg/10 text-accent) aria-[current=true]:(bg-fg/10 text-accent border-fg/20 hover:enabled:(bg-fg/20 text-fg/50))':
@@ -100,22 +95,22 @@ const iconSizeClass = computed(
     :aria-keyshortcuts="ariaKeyshortcuts"
     :target="isLinkExternal ? '_blank' : undefined"
   >
-    <span v-if="classicon" class="me-1" :class="[iconSizeClass, classicon]" aria-hidden="true" />
+    <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
     <!-- automatically show icon indicating external link -->
     <span
       v-if="isLinkExternal && !classicon"
-      class="i-carbon:launch rtl-flip w-3 h-3 opacity-50"
+      class="i-carbon:launch rtl-flip size-[1em] opacity-50"
       aria-hidden="true"
     />
     <span
       v-else-if="isLinkAnchor && isLink"
-      class="i-carbon:link w-3 h-3 opacity-0 group-hover/link:opacity-100 transition-opacity duration-200"
+      class="i-carbon:link size-[1em] opacity-0 group-hover/link:opacity-100 transition-opacity duration-200"
       aria-hidden="true"
     />
     <kbd
       v-if="ariaKeyshortcuts"
-      class="ms-2 inline-flex items-center justify-center w-4 h-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
+      class="ms-2 inline-flex items-center justify-center size-4 text-xs text-fg bg-bg-muted border border-border rounded no-underline"
       aria-hidden="true"
     >
       {{ ariaKeyshortcuts }}

app/components/Package/Versions.vue

@@ -354,33 +354,31 @@ function getTagVersions(tag: string): VersionDisplay[] {
           <!-- Version info -->
           <div class="flex-1 py-1.5 min-w-0 flex gap-2 justify-between items-center">
             <div class="overflow-hidden">
-              <div>
-                <LinkBase
-                  :to="versionRoute(row.primaryVersion.version)"
-                  class="text-sm block truncate"
-                  :class="
-                    row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
-                  "
-                  :title="
-                    row.primaryVersion.deprecated
-                      ? $t('package.versions.deprecated_title', {
-                          version: row.primaryVersion.version,
-                        })
-                      : row.primaryVersion.version
-                  "
-                  :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
-                  icon-size="sm"
-                >
-                  <span dir="ltr">
-                    {{ row.primaryVersion.version }}
-                  </span>
-                </LinkBase>
-              </div>
+              <LinkBase
+                :to="versionRoute(row.primaryVersion.version)"
+                block
+                class="text-sm"
+                :class="
+                  row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
+                "
+                :title="
+                  row.primaryVersion.deprecated
+                    ? $t('package.versions.deprecated_title', {
+                        version: row.primaryVersion.version,
+                      })
+                    : row.primaryVersion.version
+                "
+                :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
+              >
+                <span dir="ltr" class="block truncate">
+                  {{ row.primaryVersion.version }}
+                </span>
+              </LinkBase>
               <div v-if="row.tags.length" class="flex items-center gap-1 mt-0.5 flex-wrap">
                 <span
                   v-for="tag in row.tags"
                   :key="tag"
-                  class="text-4xs font-semibold text-fg-subtle uppercase tracking-wide truncate max-w-[150px]"
+                  class="text-4xs font-semibold text-fg-subtle uppercase tracking-wide truncate"
                   :title="tag"
                 >
                   {{ tag }}
@@ -415,17 +413,17 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <LinkBase
                 :to="versionRoute(v.version)"
-                class="text-xs block truncate"
+                block
+                class="text-xs"
                 :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                 :title="
                   v.deprecated
                     ? $t('package.versions.deprecated_title', { version: v.version })
                     : v.version
                 "
                 :classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
-                icon-size="sm"
               >
-                <span dir="ltr">
+                <span dir="ltr" class="block truncate">
                   {{ v.version }}
                 </span>
               </LinkBase>
@@ -513,7 +511,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
             <div class="flex items-center justify-between gap-2">
               <LinkBase
                 :to="versionRoute(row.primaryVersion.version)"
-                class="text-xs block truncate"
+                block
+                class="text-xs"
                 :class="
                   row.primaryVersion.deprecated ? 'text-red-400 hover:text-red-300' : undefined
                 "
@@ -525,9 +524,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     : row.primaryVersion.version
                 "
                 :classicon="row.primaryVersion.deprecated ? 'i-carbon-warning-hex' : undefined"
-                icon-size="sm"
               >
-                <span dir="ltr">
+                <span dir="ltr" class="block truncate">
                   {{ row.primaryVersion.version }}
                 </span>
               </LinkBase>
@@ -586,7 +584,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                     <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="text-xs block truncate"
+                      block
+                      class="text-xs"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'
@@ -602,9 +601,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       :classicon="
                         group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
                       "
-                      icon-size="sm"
                     >
-                      <span dir="ltr">
+                      <span dir="ltr" class="block truncate">
                         {{ group.versions[0]?.version }}
                       </span>
                     </LinkBase>
@@ -644,11 +642,11 @@ function getTagVersions(tag: string): VersionDisplay[] {
               <div v-else class="py-1">
                 <div class="flex items-center justify-between gap-2">
                   <div class="flex items-center gap-2 min-w-0">
-                    <span class="w-4 shrink-0" />
                     <LinkBase
                       v-if="group.versions[0]?.version"
                       :to="versionRoute(group.versions[0]?.version)"
-                      class="text-xs block truncate"
+                      block
+                      class="text-xs ms-6"
                       :class="
                         group.versions[0]?.deprecated
                           ? 'text-red-400 hover:text-red-300'
@@ -664,9 +662,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       :classicon="
                         group.versions[0]?.deprecated ? 'i-carbon-warning-hex' : undefined
                       "
-                      icon-size="sm"
                     >
-                      <span dir="ltr">
+                      <span dir="ltr" class="block truncate">
                         {{ group.versions[0]?.version }}
                       </span>
                     </LinkBase>
@@ -708,7 +705,8 @@ function getTagVersions(tag: string): VersionDisplay[] {
                   <div class="flex items-center justify-between gap-2">
                     <LinkBase
                       :to="versionRoute(v.version)"
-                      class="text-xs block truncate"
+                      block
+                      class="text-xs"
                       :class="v.deprecated ? 'text-red-400 hover:text-red-300' : undefined"
                       :title="
                         v.deprecated
@@ -717,7 +715,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
                       "
                       :classicon="v.deprecated ? 'i-carbon-warning-hex' : undefined"
                     >
-                      <span dir="ltr">
+                      <span dir="ltr" class="block truncate">
                         {{ v.version }}
                       </span>
                     </LinkBase>

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/components/Tag/Static.vue

@@ -16,7 +16,7 @@ const props = withDefaults(
     class="bg-bg-muted text-fg-muted inline-flex gap-x-1 items-center justify-center font-mono border border-transparent rounded-md text-xs px-2 py-0.5"
     :class="{ 'opacity-40': variant === 'ghost' }"
   >
-    <span v-if="classicon" :class="['size-3', classicon]" aria-hidden="true" />
+    <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
     <slot />
   </component>
 </template>