Skip to content

Add icons and large size to TagField - #162

Merged
pglevy merged 1 commit into
mainfrom
tag-icon-large-size-161
Aug 24, 2026
Merged

Add icons and large size to TagField#162
pglevy merged 1 commit into
mainfrom
tag-icon-large-size-161

Conversation

@pglevy

@pglevy pglevy commented Aug 24, 2026

Copy link
Copy Markdown
Owner

Closes #161

Summary

  • Add optional icon / iconPosition (START | END, default START) to TagItem, using Lucide icons (matches ButtonWidget's pattern)
  • Icon color has no separate prop — it inherits the tag's text color via currentColor
  • Add LARGE tag size (SMALL | STANDARD | LARGE; no MEDIUM, per SAIL docs)
  • Text sizes for LARGE align with buttonSizeMap's text-xl, but vertical padding stays shallow so tags keep their pill shape instead of growing to button height
  • When an icon is present, the icon-adjacent side's horizontal padding is tightened by 2px (inline style override) for visual balance — the icon's own weight plus the text/icon gap otherwise made that side look heavier
  • Moved tag sizing into tagSizeMap / tagIconSizeMap / tagHorizontalPaddingMap in src/utils/sailMaps.ts, consistent with the shared-map convention already used for buttons

Testing

  • New src/components/Tag/TagField.test.tsx — 29 tests covering visibility, rendering, sizing, icons (position, color inheritance, invalid icon name, size scaling), the new padding adjustment, and accessibility (list/listitem roles, aria-hidden icons, accessible name from visible text)
  • New stories: LargeSize, WithIcons, IconSizes
  • Full suite: 499/499 tests pass
  • pnpm run lint: 0 errors (pre-existing warnings elsewhere, unrelated)
  • pnpm run build:lib: type-checks and builds cleanly
  • Verified visually in Storybook

Notes

  • Found a pre-existing a11y gap unrelated to this change: linked tags have role="listitem" which overrides the anchor's implicit link role. Not fixed here since it's out of scope — happy to file a follow-up issue if useful.

- Add icon/iconPosition to TagItem (Lucide icon, START/END, default START)
- Icon color inherits the tag's text color via currentColor
- Add LARGE tag size (SMALL | STANDARD | LARGE, no MEDIUM per SAIL docs)
- Add tagSizeMap/tagIconSizeMap to sailMaps.ts as single source of truth
- Tighten padding by 2px on the icon-adjacent side for visual balance
- Add TagField.test.tsx covering sizing, icons, and accessibility
- Add LargeSize, WithIcons, IconSizes stories
- Update TAILWIND-SAIL-MAPPING.md Tag Sizes section
@pglevy
pglevy merged commit 7f6065e into main Aug 24, 2026
3 checks passed
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.

Add icons and large size to tag

1 participant