ButtonToggle: V2 Development

[eniomoura]

Summary

What changed?

Introduced hair variant and color picker variant to ButtonToggle.

Why?

To bring web implementation in line with Figma specification.

Links

• Jira
• TDD
• Figma

Checklist

• [ Yes ] Added unit and Flow Tests
• [ Yes ] Added documentation + accessibility tests
• [ Yes ] Verified accessibility: keyboard & screen reader interaction
• [ Yes ] Checked dark mode, responsiveness, and right-to-left support
• [ Yes ] Checked stakeholder feedback (e.g. Gestalt designers, relevant feature teams)

[netlify]

✅ Deploy Preview for gestalt ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	b97a3e2
🔍 Latest deploy log	https://app.netlify.com/sites/gestalt/deploys/666b52bda5848400084537a7
😎 Deploy Preview	https://deploy-preview-3611--gestalt.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[AlbertCarreras]

I think we need to handle borders differently

It shakes the surrounding ones, I believe because we are increasing the size of the wrapping borders

[AlbertCarreras]

Can we add here all the variants?

[eniomoura]

I think we need to handle borders differently

It shakes the surrounding ones, I believe because we are increasing the size of the wrapping borders

I tackled this with two changes:

• The background color change made the border changes in most cases unecessary (no border in black selected states).
• The only case with a variable size border remaining is the disabled button, and i added some css to offset the component size to compensate for the border size increase.

It is normal behavior in many cases for the button size to change on selected state though, since we recommend the text to change to reinforce the selected state.