big-design icon indicating copy to clipboard operation
big-design copied to clipboard

Simplify PillTab component implementation (refactoring only)

Open leeBigCommerce opened this issue 7 months ago • 1 comments

N.B. individual commits used for easier review, will be squash-merged

What?

  • Refactor PillTabs component to a simpler implementation

Why?

  • This component was full of indirection and states on top of states, making it hard to follow
  • This should make it easier to extend the component to take a notion of "grouped pills" in an upcoming PR

Screenshots/Screen Recordings

Basic "selected" state

https://github.com/user-attachments/assets/127d13d2-dd9a-4fac-a480-e030ef48c900

Overflowing into the dropdown menu on resize

https://github.com/user-attachments/assets/2868120d-a74d-4c00-8c60-8b0d5a153269

Testing/Proof

  • Unchanged, passing tests + 1 additional new test (proves a pre-existing behaviour, previously not covered)
  • Manual testing

leeBigCommerce avatar Apr 01 '25 02:04 leeBigCommerce