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 13, 2026 9:41pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 13, 2026 9:41pm
npmx-lunaria	Ignored		Mar 13, 2026 9:41pm

[codecov]

Codecov Report

❌ Patch coverage is 70.00000% with 3 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 ⚠️
app/components/Package/TableRow.vue	0.00%	1 Missing ⚠️

📢 Thoughts on this report? Let us know!

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a67e70dd-16a1-485e-8311-01e944a7d7c1

📥 Commits

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

📒 Files selected for processing (1)

• app/components/Link/Link.stories.ts

---

📝 Walkthrough

Walkthrough

This PR standardises size tokens across UI components: it renames size prop values from verbose tokens ('small'|'medium'|'large') to compact tokens ('sm'|'md'|'lg'), updates default values (where applicable) and corresponding class mappings in Button, Input and Link base components, and replaces usages site-wide (components, pages, stories and tests). No control-flow, state, or behavioural logic changes were introduced.

Possibly related PRs

• feat: add selects to ui library #1290: Modifies app/components/Input/Base.vue and its size-related styling, sharing the same area of change.
• feat: extract button and link component, unify and improve design #1071: Introduced/modified Button/Base.vue and Link/Base.vue props that this PR also updates (size token changes).
• feat(ui): community version distribution #1245: Touches app/components/Package/Versions.vue where size token usage was adjusted in this PR.

Suggested labels

front

Suggested reviewers

• alexdln
• danielroe

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the alignment of size prop values in base components from human-readable tokens to abbreviated tokens (small→sm, medium→md, large→lg).
Linked Issues check	✅ Passed	The pull request successfully addresses all coding requirements from issue #1254: BaseButton size prop updated to 'sm'|'md', BaseInput to 'sm'|'md'|'lg', BaseLink to 'sm'|'md', and explicit 'medium' usage removed throughout the codebase.
Out of Scope Changes check	✅ Passed	All changes are scoped to the stated objectives: updating size prop values in base components and their usages across the application. Test file updates (a11y.spec.ts) align with the issue's mention of updating tests.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

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

📝 Coding Plan

• Generate coding plan for human review comments

---

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.}

Tip

You can validate your CodeRabbit configuration file in your editor.

If your editor has YAML language server, you can enable auto-completion and validation by adding # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json at the top of your CodeRabbit configuration file.

[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