chore: align base components size prop values

[antoineneff]

🔗 Linked issue

Resolves #1254

Note

There is already one PR opened linked to the same issue but it seems to do more than expected and was not updated since one month (#1319) so I took the liberty to create this one, I hope that's fine

🧭 Context

The point of this PR is to align size prop values to uno and nuxt/ui components.

Updating BaseButton, BaseInput and BaseLink components.

📚 Description

• update BaseButton size prop values to 'sm' | 'md'
• update BaseInput size prop values to 'sm' | 'md' | 'lg'
• update BaseLink size prop values to 'sm' | 'md'
• remove prop usage if medium value is used

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 22, 2026 3:47am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 22, 2026 3:47am
npmx-lunaria	Ignored		Mar 22, 2026 3:47am

[codecov]

Codecov Report

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

Files with missing lines	Patch %	Lines
app/components/Filter/Panel.vue	0.00%	1 Missing ⚠️
app/components/Header/SearchBox.vue	0.00%	0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This PR renames size tokens across UI primitives from verbose values to abbreviated tokens: ButtonBase, InputBase and LinkBase props change types from 'small'|'medium'|'large' (or subsets) to 'sm'|'md'|'lg' with defaults updated (e.g., 'medium' → 'md'). Component templates/class mappings were adjusted to use the new tokens. All consuming components and Storybook stories were updated to pass the new size tokens. Accessibility tests were updated to use the new values. No functional logic, state flows, or event handling were changed.

Possibly related PRs

• feat: add input component #1173: Renames Input/Button/Link size tokens and updates usages in InputBase — directly overlaps with the InputBase changes here.
• feat: add package download button #1586: Modifies Button/Base.vue size-handling logic and variants — touches the same ButtonBase size behaviour updated in this PR.
• docs(ui): add ButtonGroup stories to storybook #1964: Reorganises ButtonBase stories and Base.vue usage — directly related to the story and ButtonBase edits in this PR.

Suggested labels

needs review

Suggested reviewers

• alexdln
• danielroe

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	All changes align with the stated objectives. The only tangential addition is package.json scripts, which appear to be infrastructure changes unrelated to component prop updates.	Remove the package.json scripts changes as they are out of scope for the size prop renaming objective, or clarify their necessity in the PR description.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description check	✅ Passed	The PR description clearly relates to the changeset, explaining the purpose of updating size prop values in base components.
Linked Issues check	✅ Passed	The PR successfully implements all coding requirements from issue #1254: updated size props to 'sm'/'md'/'lg' format across Button, Link, and Input components throughout the codebase.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/components/Link/Link.stories.ts (1)

106-129: ⚠️ Potential issue | 🟡 Minor

Snapshot still uses legacy size token at Line 125.

The snapshot example still passes size="small", which is out of sync with the new sm/md convention.

🔧 Proposed fix

-          <LinkBase to="/" variant="button-primary" size="small">Small Button</LinkBase>
+          <LinkBase to="/" variant="button-primary" size="sm">Small Button</LinkBase>

🧹 Nitpick comments (1)

app/components/Compare/FacetSelector.vue (1)

64-73: Use global focus-visible styling for this button instead of inline utility classes.

Line 72 adds focus-visible:outline-accent/70 on a ButtonBase; this should rely on the global button focus-visible rule used across the project.

🎯 Suggested adjustment

-          class="gap-1 px-1.5 rounded transition-colors focus-visible:outline-accent/70"
+          class="gap-1 px-1.5 rounded transition-colors"

Based on learnings: In the npmx.dev project, focus-visible styling for buttons and selects is applied globally via `app/assets/main.css`, so per-element inline focus-visible utilities on buttons should be avoided.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: e65d1ea7-2ac2-48b9-87a1-a2dbd66c19d1

📥 Commits

Reviewing files that changed from the base of the PR and between 9e8c805 and 7db6ac8.

📒 Files selected for processing (31)

• app/components/Button/Base.stories.ts
• app/components/Button/Base.vue
• app/components/Compare/FacetSelector.vue
• app/components/Compare/PackageSelector.vue
• app/components/Compare/ReplacementSuggestion.vue
• app/components/Filter/Panel.vue
• app/components/Header/AuthModal.client.vue
• app/components/Header/ConnectorModal.vue
• app/components/Header/SearchBox.vue
• app/components/Input/Base.stories.ts
• app/components/Input/Base.vue
• app/components/Link/Base.vue
• app/components/Link/Link.stories.ts
• app/components/Org/MembersPanel.vue
• app/components/Org/OperationsQueue.vue
• app/components/Org/TeamsPanel.vue
• app/components/Package/Card.vue
• app/components/Package/Header.vue
• app/components/Package/Keywords.vue
• app/components/Package/ListControls.vue
• app/components/Package/Maintainers.vue
• app/components/Package/MetricsBadges.vue
• app/components/Package/TableRow.vue
• app/components/Package/TrendsChart.vue
• app/components/Package/Versions.vue
• app/components/SearchProviderToggle.client.vue
• app/components/Terminal/Install.vue
• app/pages/compare.vue
• app/pages/index.vue
• app/pages/package/[[org]]/[name].vue
• test/nuxt/a11y.spec.ts

💤 Files with no reviewable changes (6)

• app/components/Package/ListControls.vue
• app/components/Org/TeamsPanel.vue
• app/components/Package/Header.vue
• app/components/Header/ConnectorModal.vue
• app/components/Package/TrendsChart.vue
• app/components/Header/AuthModal.client.vue

[coderabbitai]

Actionable comments posted: 1

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b38dca32-fdb8-491e-9d68-e26b80a194cb

📥 Commits

Reviewing files that changed from the base of the PR and between b38f573 and 52061ad.

📒 Files selected for processing (6)

• app/components/Button/Base.vue
• app/components/Link/Link.stories.ts
• app/components/Package/MetricsBadges.vue
• app/pages/compare.vue
• app/pages/package/[[org]]/[name].vue
• test/nuxt/a11y.spec.ts

✅ Files skipped from review due to trivial changes (3)

• app/pages/package/[[org]]/[name].vue
• app/pages/compare.vue
• app/components/Link/Link.stories.ts

🚧 Files skipped from review as they are similar to previous changes (2)

• app/components/Package/MetricsBadges.vue
• test/nuxt/a11y.spec.ts

[github-actions]

Thanks for your first contribution, @antoineneff! 🎊

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.