feat: Refactor Pill component to use new styling utilities and tokens

[mannycarrera4]

Summary

Fixes: #2394, #2968, #2049

Release Category

Components

Release Note

We've updated ExternalHyperlink to use our new styling utilities and tokens.

• The border color on hover has been updated from licorice400 to licorice500 to match our design specs.
• We've removed extra elements and leverage [flex box}(https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox) to ensure only the label receives overflow styles. When maxWidth is set, it is set on the parent <Pill/> element and the child elements will be styled accordingly. Before v13, maxWidth wasn't calculating the width of all its elements and wasn't a true pixel value.

BREAKING CHANGES

• maxWidth has been removed from the usePillModel. This config was used to style sub components. With the refactor to use data-part and stencils, it is no longer needed on the model. You can still apply maxWidth on the parent <Pill> element and the child elements will be styled accordingly.
• Pill.Icon no longer has a default aria-labe="add". You must provide an aria-label for Pill.Icon to ensure proper accessibility. Our examples have been updated to reflect this change.
• Pill.IconButton no longer has a default aria-label="remove". You must provide an aria-label for Pill.IconButton to ensure proper accessibility. Our examples have been updated to reflect this change.
• Pill.Label is a required element when using other sub components like Pill.Icon to ensure that the label truncates correctly.

---

Checklist

• MDX documentation adheres to Canvas Kit's Documentation Guidelines
• Label ready for review has been added to PR

For the Reviewer

• PR title is short and descriptive
• PR summary describes the change (Fixes/Resolves linked correctly)
• PR Release Notes describes additional information useful to call out in a release message or removed if not applicable
• Breaking Changes provides useful information to upgrade to this code or removed if not applicable

Where Should the Reviewer Start?

Areas for Feedback? (optional)

• Code
• Documentation
• Testing
• Codemods

Testing Manually

Screenshots or GIFs (if applicable)

Thank You Gif (optional)

[cypress]

Workday/canvas-kit    Run #8507

Run Properties:   Passed #8507  •  8901021d95 ℹ️: Merge 4b5cd4fcda79914253e9c0bd84848e1ad8f37e71 into 7575839a5da478211d9ab816e5c7...

Project	Workday/canvas-kit
Branch Review	mc-refactor-pills
Run status	Passed #8507
Run duration	02m 46s
Commit	8901021d95 ℹ️: Merge 4b5cd4fcda79914253e9c0bd84848e1ad8f37e71 into 7575839a5da478211d9ab816e5c7...
Committer	Manuel Carrera
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	2
Pending	21
Skipped	0
Passing	936
View all changes introduced in this branch ↗︎

UI Coverage  21.31%
Untested elements	1530
Tested elements	412

Accessibility  99.27%
Failed rules	6 critical   5 serious   0 moderate   2 minor
Failed elements	98