Skip to content

feat(ui-pill): new Pill v3 implementation - #2727

Draft
git-nandor wants to merge 5 commits into
masterfrom
INSTUI-5179_new_pill_v3
Draft

git-nandor wants to merge 5 commits into
masterfrom
INSTUI-5179_new_pill_v3

Conversation

@git-nandor

@git-nandor git-nandor commented Sep 23, 2026 •

Copy link
Copy Markdown
Contributor

Summary

  • Split Pill into a frozen v2 and a new v3, wired into the umbrella and the docs version map
  • Convert Pill v3 to a functional component
  • Redesign v3 with the new design tokens:
    size prop (x-small, small, medium, large),
    accent colors (stone, sky, orange, aurora, plum, violet, sea),
    pastel backgrounds and alpha borders in rebrand, auto-sized renderIcon.

Test Plan

  • Docs /v11_8/Pill: check the Sizes and Colors examples against Figma
  • Visual regression small-components: new size row and accent colors

Fixes INSTUI-5179

🤖 Generated with Claude Code

git-nandor and others added 4 commits September 23, 2026 13:24
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Pin Pill v2 cross-package imports to v11_7, add exports/c.ts for Pill v3 and
point ./v11_8 and ./latest to it.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Use useStyleNew instead of the withStyleNew decorator, with the same API and
styling. Add the missing statusLabel and renderIcon to allowedProps.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@git-nandor git-nandor self-assigned this Sep 23, 2026
Add a size prop (x-small, small, medium, large) and the accent colors stone,
sky, orange, aurora, plum, violet and sea. Rebrand themes use pastel
backgrounds with an alpha border. renderIcon accepts a Renderable and InstUI
icons are sized to match the Pill.

BREAKING CHANGE: Pill from /latest now renders the redesigned v3 styles,
including pastel backgrounds and a solid error variant in the rebrand themes.
Use @instructure/ui-pill/v11_7 to keep the previous look.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@git-nandor
git-nandor force-pushed the INSTUI-5179_new_pill_v3 branch from a3f4543 to 97644d8 Compare September 23, 2026 14:37

This branch has not been deployed

No deployments
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.

1 participant