Skip to content

Comments

Refactor Link component from makeStyles to sprinkles#6250

Merged
lkostrowski merged 11 commits intomainfrom
link-size
Jan 21, 2026
Merged

Refactor Link component from makeStyles to sprinkles#6250
lkostrowski merged 11 commits intomainfrom
link-size

Conversation

@lkostrowski
Copy link
Member

@lkostrowski lkostrowski commented Jan 12, 2026

Summary

This PR refactors the Link component to use the modern sprinkles styling system instead of the legacy makeStyles API from Material-UI. This modernization improves the component's maintainability and aligns it with the current design system architecture.

Changes

  • Replaced makeStyles with sprinkles: Migrated from Material-UI's makeStyles to @saleor/macaw-ui-next's sprinkles utility for styling
  • Improved font size inheritance: Links now properly inherit the font size from their parent element (usually paragraphs), fixing visual inconsistencies within text blocks
  • Removed TypeScript strict ignore: Cleaned up type definitions and removed @ts-strict-ignore directive
  • Added comprehensive tests: Implemented full test coverage for the Link component (481 lines of new tests)
  • Fixed color theming: Updated color handling to use the new design system tokens (accent1, default1, default2)
  • Simplified props interface: Removed deprecated typographyProps parameter

Files Changed

  • src/components/Link.tsx - Complete refactor of styling implementation
  • src/components/Link.test.tsx - New comprehensive test suite
  • .changeset/quick-parrots-heal.md - Changeset documenting user-facing improvements

Testing

  • Added unit tests covering all component variants and states
  • Verified visual consistency across different contexts
  • Tested disabled states, color variants, and underline options

Checklist

  • I confirm I added ripples for changes (see src/ripples) or my feature doesn't contain any user-facing changes
  • I used analytics "trackEvent" for important events

🤖 Generated with Claude Code

Copilot AI review requested due to automatic review settings January 12, 2026 11:13
@lkostrowski lkostrowski requested a review from a team as a code owner January 12, 2026 11:13
@changeset-bot
Copy link

changeset-bot bot commented Jan 12, 2026

🦋 Changeset detected

Latest commit: 22ecbb9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
saleor-dashboard Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

This PR refactors the Link component from using Material-UI's makeStyles to the newer sprinkles utility from @saleor/macaw-ui-next. The refactoring improves the component by making links inherit font size from their parent elements, fixing display issues within text blocks.

Changes:

  • Migrated styling from makeStyles to sprinkles utility for better integration with the new design system
  • Restructured internal logic with improved code organization and better handling of disabled states
  • Added comprehensive test coverage for the Link component including edge cases and known bugs

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.

File Description
src/components/Link.tsx Refactored from makeStyles to sprinkles, improved styling logic, added named export, removed typographyProps
src/components/Link.test.tsx Added comprehensive test suite covering internal/external links, styling, click handlers, and edge cases
.changeset/quick-parrots-heal.md Documented the patch-level change for improved link display

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@lkostrowski lkostrowski changed the title refactor makeStyles to sprinkles Refactor Link component from makeStyles to sprinkles Jan 12, 2026
@codecov
Copy link

codecov bot commented Jan 12, 2026

Codecov Report

❌ Patch coverage is 96.15385% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 42.57%. Comparing base (ead06a8) to head (22ecbb9).
⚠️ Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
src/components/ExternalLink/ExternalLink.tsx 50.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #6250      +/-   ##
==========================================
+ Coverage   42.54%   42.57%   +0.02%     
==========================================
  Files        2459     2459              
  Lines       41639    41644       +5     
  Branches     9196     9581     +385     
==========================================
+ Hits        17717    17730      +13     
+ Misses      23890    22675    -1215     
- Partials       32     1239    +1207     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copilot AI review requested due to automatic review settings January 20, 2026 08:34
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 11 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot AI review requested due to automatic review settings January 20, 2026 09:03
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

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

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 7 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@lkostrowski lkostrowski merged commit 472d0cd into main Jan 21, 2026
14 checks passed
@lkostrowski lkostrowski deleted the link-size branch January 21, 2026 09:33
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.

2 participants