Skip to content

fix(ui): disambiguate the two "compare" links#2180

Merged
ghostdevv merged 3 commits intomainfrom
serhalp/pkg-compare-btn-text
Mar 21, 2026
Merged

fix(ui): disambiguate the two "compare" links#2180
ghostdevv merged 3 commits intomainfrom
serhalp/pkg-compare-btn-text

Conversation

@serhalp
Copy link
Member

@serhalp serhalp commented Mar 21, 2026

🔗 Linked issue

Closes #2156

🧭 Context

The two "compare" buttons when on the package page are not great UX. It isn't obvious that they do different things as they are visually identical and contain the same text.

Screenshot 2026-03-21 at 13 16 59

When I first introduced it, the package page one was in a location that was very space constrained, so I used the short "compare" rather than something more specific. It has since moved to a location with more space.

📚 Description

Change the package page "compare" label to "compare this package...".

Screenshot 2026-03-21 at 13 16 46

I also considered "compare to", "compare to...", "compare this package to...", "compare this to...", "compare with", "start compare...". 🤷🏼

@vercel
Copy link

vercel bot commented Mar 21, 2026

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

Project Deployment Actions Updated (UTC)
docs.npmx.dev Ready Ready Preview, Comment Mar 21, 2026 9:10pm
npmx.dev Ready Ready Preview, Comment Mar 21, 2026 9:10pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
npmx-lunaria Ignored Ignored Mar 21, 2026 9:10pm

Request Review

@github-actions
Copy link

github-actions bot commented Mar 21, 2026

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File Note
i18n/locales/en.json Source changed, localizations will be marked as outdated.
i18n/locales/fr-FR.json Localization changed, will be marked as complete. 🔄️
Warnings reference
Icon Description
🔄️ The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

@codecov
Copy link

codecov bot commented Mar 21, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!

@serhalp serhalp force-pushed the serhalp/pkg-compare-btn-text branch from 281bb23 to b241b93 Compare March 21, 2026 17:12
@serhalp serhalp marked this pull request as ready for review March 21, 2026 17:18
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 21, 2026

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: bd554137-7e71-4c45-b1aa-53085fed54ba

📥 Commits

Reviewing files that changed from the base of the PR and between b241b93 and f51ab6e.

📒 Files selected for processing (3)
  • i18n/locales/en.json
  • i18n/locales/fr-FR.json
  • i18n/schema.json
✅ Files skipped from review due to trivial changes (1)
  • i18n/schema.json
🚧 Files skipped from review as they are similar to previous changes (2)
  • i18n/locales/fr-FR.json
  • i18n/locales/en.json

📝 Walkthrough

Walkthrough

The PR updates the package header component to use a different i18n key for the screen-reader-only text on the compare LinkBase button: package.links.comparepackage.links.compare_this_package. It adds the compare_this_package translation in English and French locale files and updates i18n/schema.json to include the new optional compare_this_package string property under package.links. One line in the component was changed (+1/-1); locale and schema files were added/updated accordingly.

Suggested reviewers

  • danielroe
  • alexdln
🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Description check ✅ Passed The description clearly explains the UX issue with two identical compare buttons and describes the solution of relabelling the package page button to 'compare this package...'.
Linked Issues check ✅ Passed The PR successfully addresses the linked issue #2156 by disambiguating the two compare buttons through a more descriptive label on the package page.
Out of Scope Changes check ✅ Passed All changes are directly related to the objective of disambiguating the compare buttons: updating the button label and adding corresponding i18n translations.

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

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch serhalp/pkg-compare-btn-text

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

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

Copy link
Contributor

@graphieros graphieros left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If you choose 'compare this package...', I would drop the '...' to save a few px
but LGTM :)

@ghostdevv ghostdevv enabled auto-merge March 21, 2026 21:07
@ghostdevv ghostdevv added this pull request to the merge queue Mar 21, 2026
Merged via the queue into main with commit fbf01bd Mar 21, 2026
22 of 23 checks passed
@ghostdevv ghostdevv deleted the serhalp/pkg-compare-btn-text branch March 21, 2026 21:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

discussion: 2 compare buttons is confusing

3 participants