BitBoxSwiss / bitbox-wallet-app

The BitBoxApp for desktop and mobile.
https://bitbox.swiss/app
Apache License 2.0
251 stars 82 forks source link

frontend: make reusable pill button & pill button group #2740

Closed shonsirsha closed 2 months ago

shonsirsha commented 2 months ago

Right now, we're only using such components in filters.tsx. However, this will change in the future as other components may incorporate these pill buttons for filtering / tabbing-like functionality.

I didn't make a new variant in the button component because we wanna keep the styling on the parent container of the buttons (PillButtonGroup) as we want them to look & behave the same (size-wise, etc) on every components we want to have them in. So instead, I made a PillButtonGroup and PillButton components to be used together.

shonsirsha commented 2 months ago

Thanks, PTAL @thisconnect !

shonsirsha commented 2 months ago

nit: how about renaming the file from pillbuttongroup to just pill ?

Hm.. To me just pill isn't descriptive enough tbh. 😇 I think naming it pillbuttongroup is clearer to describe that it's a:

  1. component to be used with pillbutton, and
  2. on first glance, only having <Pill> somewhere in the codebase to me, also imply that it's just as a "pill". Except it's not - it's a container and not even a "pill" per-se.
thisconnect commented 2 months ago

or just PillButton, as pillbuttongroup is only the container and less important?