Skip to content

refactor(frontend): button and icon components on tailwind-variants - #3985

Open
Kadrian wants to merge 3 commits into
chore/tailwind-variantsfrom
refactor/tailwind-button-icon
Open

refactor(frontend): button and icon components on tailwind-variants#3985
Kadrian wants to merge 3 commits into
chore/tailwind-variantsfrom
refactor/tailwind-button-icon

Conversation

@Kadrian

@Kadrian Kadrian commented Aug 27, 2026

Copy link
Copy Markdown
Collaborator

Second step of the emotion → tailwind migration: src/js/button/* and src/js/icon/FaIcon are emotion-free.

  • font sizes: only tailwind's own (text-xstext-2xl), anything else is a literal (text-[11px]). No custom size tokens: tv's class merger classifies unknown text-* names as colours and would drop them next to a colour class, literals are recognised as sizes
  • BasicButton, IconButton, FaIcon: prop flags → tv variants. Where several flags conflict (tiny/small/large, colour flags) the variant order encodes the old precedence (later wins), noted inline; FaIcon's colour priority stays a small function
  • PrimaryButton, TransparentButton, DestroyButton, SelectFileButton, BadgeToggleButton, PreviewButton, QueryResultHistoryButton, DownloadButton: real components, className merges through tv. DownloadButton reads the filetype-* colours as CSS vars instead of useTheme
  • Icon (FaIcon without fa-fw) is gone: FaIcon forces width: initial anyway, so the 4 consumers use FaIcon
  • --animate-spin-fast token keeps the 0.5s spinner
  • text-xstext-2xl are font-size only now (--text-*--line-height: initial): the emotion theme never set a line-height, so migrated components would otherwise shift by a few px
  • emotion no longer strips non-DOM props before <button>, SxSelectFileButton gets a shouldForwardProp until its file is migrated
  • FaIcon's @ts-ignore on ref is gone

Remaining styled(IconButton) / styled(FaIcon) overrides in other files keep working: emotion classes are unlayered and beat the utilities.

first styled() slice; shared tv in src/js/tv.ts so the class merger knows text-tiny is a font size, not a colour
…ties font-size only

matches the previous behaviour: small only shrank the icon, and the emotion theme set font sizes without a line-height
drops the text-tiny token and the createTV merge config it needed
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