refactor(LinkBase/ButtonBase): add inline prop & rename size prop for buttons and links #1319

RYGRIT · 2026-02-10T08:10:51Z

resolves: #1254

vercel · 2026-02-10T08:10:59Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 10, 2026 8:26am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 10, 2026 8:26am
npmx-lunaria	Ignored		Feb 10, 2026 8:26am

codecov · 2026-02-10T08:13:27Z

Codecov Report

❌ Patch coverage is 74.28571% with 9 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/pages/package/[[org]]/[name].vue	0.00%	3 Missing ⚠️
app/components/Compare/ComparisonGrid.vue	0.00%	2 Missing ⚠️
app/components/Link/Base.vue	91.66%	2 Missing ⚠️
app/app.vue	0.00%	1 Missing ⚠️
app/components/Package/Dependencies.vue	66.66%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

coderabbitai · 2026-02-10T08:15:38Z

📝 Walkthrough

Walkthrough

This pull request refactors the LinkBase component's public API by replacing the variant prop with type ('button' | 'link'), expanding the size scale from {'small', 'medium'} to {'xs', 'sm', 'md', 'lg'}, and introducing a new inline boolean prop. The component's internal logic is updated to use type-based checks and computed size classes. All usages of LinkBase across the application are updated to conform to the new prop signatures, and related tests are modified to verify the updated styling and behaviour.

Possibly related PRs

feat: extract button and link component, unify and improve design #1071: Introduces the LinkBase component and replaces multiple NuxtLink usages with LinkBase, which this PR builds upon by updating the LinkBase API and all its usages throughout the codebase.
refactor: remove unnecessary prop from links #1247: Modifies the LinkBase component API and refactors how block/inline and size/type handling work within the component.
refactor: replace links and buttons for compare and code page #1243: Updates LinkBase API and refactors its prop signatures across components including FileTree, ComparisonGrid, and ReplacementSuggestion.

Suggested reviewers

danielroe
alexdln

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description references issue `#1254`, which aligns with the LinkBase and ButtonBase refactoring work shown in the changeset.
Linked Issues check	✅ Passed	The PR successfully updates the size prop from 'small'/'medium' to 'xs'/'sm'/'md'/'lg' across LinkBase and all usages, adds the inline prop to LinkBase, and updates tests accordingly.
Out of Scope Changes check	✅ Passed	All changes are scoped to the LinkBase component refactoring and its usages throughout the application, which aligns with the objective of issue `#1254`.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (3)

app/components/Link/Base.vue (1)
54-78: Add exhaustive handling or a default case to the switch statements.

The sizeClass computed property has two switch statements that don't handle the exhaustive case. While TypeScript will catch invalid values at compile time, adding exhaustive handling improves runtime safety and makes the code more maintainable.
♻️ Proposed fix to add exhaustive type checking
 const sizeClass = computed(() => {
   if (isButton.value) {
     switch (props.size) {
       case 'xs':
         return 'text-xs px-2 py-0.5'
       case 'sm':
         return 'text-sm px-4 py-2'
       case 'md':
         return 'text-base px-5 py-2.5'
       case 'lg':
         return 'text-lg px-6 py-3'
+      default: {
+        const _exhaustiveCheck: never = props.size
+        return _exhaustiveCheck
+      }
     }
   }
 
   switch (props.size) {
     case 'xs':
       return 'text-xs'
     case 'sm':
       return 'text-sm'
     case 'md':
       return 'text-base'
     case 'lg':
       return 'text-lg'
+    default: {
+      const _exhaustiveCheck: never = props.size
+      return _exhaustiveCheck
+    }
   }
 })
As per coding guidelines: "Ensure you write strictly type-safe code, for example by ensuring you always check when accessing an array value by index".
app/components/Package/MetricsBadges.vue (1)
61-66: Switch UnoCSS icon class to colon syntax.
This keeps icon resolution consistent with the preset-icons convention and avoids the slower dash lookup.
♻️ Suggested change
-          classicon="i-carbon-checkmark"
+          classicon="i-carbon:checkmark"
Based on learnings: In Vue components that use UnoCSS with the preset-icons collection, prefer colon-syntax for icons (e.g., i-carbon:checkmark) over the dash-separated form (i-carbon-checkmark).
app/components/Package/Versions.vue (1)
646-651: Consider using the new size prop for the single-version link.
This keeps sizing consistent with the rest of the file and avoids relying on manual text-size classes.
♻️ Suggested change
-                    <LinkBase
-                      v-if="group.versions[0]?.version"
-                      :to="versionRoute(group.versions[0]?.version)"
-                      :inline="false"
-                      class="text-xs ms-6"
+                    <LinkBase
+                      v-if="group.versions[0]?.version"
+                      :to="versionRoute(group.versions[0]?.version)"
+                      :inline="false"
+                      size="xs"
+                      class="ms-6"

coderabbitai · 2026-02-10T08:15:41Z

app/components/Package/InstallScripts.vue

+              <LinkBase :to="scriptParts[scriptName].link" text="sm">
+                {{ scriptParts[scriptName].filePath }}
+              </LinkBase>


⚠️ Potential issue | 🟡 Minor

Likely typo: text="sm" should be size="sm".

Based on the PR objectives and all other LinkBase usages in this PR (which use size="xs" or size="sm"), this appears to be a typo. The text prop doesn't align with the documented LinkBase API changes.

🔧 Proposed fix

{{ scriptParts[scriptName].prefix }} - <LinkBase :to="scriptParts[scriptName].link" text="sm"> + <LinkBase :to="scriptParts[scriptName].link" size="sm"> {{ scriptParts[scriptName].filePath }} </LinkBase>

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

<LinkBase :to="scriptParts[scriptName].link" text="sm">

{{ scriptParts[scriptName].filePath }}

</LinkBase>

<LinkBase :to="scriptParts[scriptName].link" size="sm">

{{ scriptParts[scriptName].filePath }}

</LinkBase>

essenmitsosse · 2026-02-10T10:05:08Z

Thanks for your work. Won't have time to fully review it until later. Just one thing:

I think inline was a more resonable default, with block being an optional prop. Inline is almost always fine, where as block is only needed in special cases, like when you want to apply truncate. I'd suggest to switch it back.

essenmitsosse · 2026-02-10T10:10:12Z

app/components/Link/Base.vue

+const sizeClass = computed(() => {
+  if (isButton.value) {
+    switch (props.size) {
+      case 'xs':
+        return 'text-xs px-2 py-0.5'
+      case 'sm':
+        return 'text-sm px-4 py-2'
+      case 'md':
+        return 'text-base px-5 py-2.5'
+      case 'lg':
+        return 'text-lg px-6 py-3'
+    }
+  }
+
+  switch (props.size) {
+    case 'xs':
+      return 'text-xs'
+    case 'sm':
+      return 'text-sm'
+    case 'md':
+      return 'text-base'
+    case 'lg':
+      return 'text-lg'
+  }
+})


Setting a class like this doesn't work, because Uno won't pick these up. It only works "by accident", because these classes are all used somewhere else. Try setting bg-indigo-300 here and it wouldn't be applied.

This needs to be inlined into the components class prop.

essenmitsosse · 2026-02-10T10:10:56Z

The primary/secondary color variant for Links is now missing. Is that on purpose or part of the WIP?

RYGRIT added 2 commits February 10, 2026 15:58

refactor(link-base): update size and tests

1ab5a16

fix: update LinkBase usage across app

6d3840d

RYGRIT marked this pull request as draft February 10, 2026 08:11

vercel bot deployed to Preview – npmx.dev February 10, 2026 08:12 View deployment

coderabbitai bot reviewed Feb 10, 2026

View reviewed changes

fix: update LinkBase size prop in InstallScripts component

da94380

vercel bot deployed to Preview – npmx.dev February 10, 2026 08:26 View deployment

essenmitsosse reviewed Feb 10, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(LinkBase/ButtonBase): add inline prop & rename size prop for buttons and links #1319

refactor(LinkBase/ButtonBase): add inline prop & rename size prop for buttons and links #1319

Uh oh!

RYGRIT commented Feb 10, 2026

Uh oh!

vercel bot commented Feb 10, 2026 •

edited

Loading

Uh oh!

codecov bot commented Feb 10, 2026

Uh oh!

coderabbitai bot commented Feb 10, 2026

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Uh oh!

coderabbitai bot Feb 10, 2026

Uh oh!

essenmitsosse commented Feb 10, 2026

Uh oh!

essenmitsosse Feb 10, 2026

Uh oh!

essenmitsosse commented Feb 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

refactor(LinkBase/ButtonBase): add inline prop & rename size prop for buttons and links #1319

Are you sure you want to change the base?

refactor(LinkBase/ButtonBase): add inline prop & rename size prop for buttons and links #1319

Uh oh!

Conversation

RYGRIT commented Feb 10, 2026

Uh oh!

vercel bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Feb 10, 2026

Codecov Report

Uh oh!

coderabbitai bot commented Feb 10, 2026

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai bot Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

essenmitsosse commented Feb 10, 2026

Uh oh!

essenmitsosse Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

essenmitsosse commented Feb 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Feb 10, 2026 •

edited

Loading