microsoft
feat: add toggle button as a new component
Our button styles do not account for a toggle button and we probably should for ease of use and to maintain consistency. Something like so?
:host([appearance="outline"][aria-pressed="true"]) {...}
:host([appearance="outline"][aria-pressed="false"]) {...}
I'm not sure we need to make any functional changes to button as authors can control toggle states easily enough by setting "aria-pressed"
😯 Current Behavior
No built in toggle button styles
Modifying this ask slightly to export an actual toggle button. We likely need the "checkable" form associated behavior in this scenario and we likely want an "out of box" experience here.
As a note, I created a toggle button earlier this year within our design system. What we found worked well was making the toggle button's class extended FAST Foundation's switch while making the template look very similar to the button's template (without using an actual HTML button within it). This allowed us to get a lot of functionality for free from the switch while being able to use the same CSS for the button and the toggle button.
As a note, I created a toggle button earlier this year within our design system. What we found worked well was making the toggle button's class extended FAST Foundation's switch while making the template look very similar to the button's template (without using an actual HTML button within it). This allowed us to get a lot of functionality for free from the switch while being able to use the same CSS for the button and the toggle button.
Nice! So far, the approach I've taken has been to extend from button and add a checked state that toggles the aria-pressed value OR enables a user to control that behavior, similar to what switch/checkbox do. My reason for holding with button thus far is that I don't think the actual semantics of the button change, nor does it's form association behavior from what I can tell.
Your solution though, is quite inline with what we hope to enable with FAST overall - focusing on what it is and leveraging reuse in a variety of ways! Would love to see your design system if it's out there somewhere @mollykreis! Also, we are getting ready to highlight some projects which are building on top of FAST - if your company or project allows that we'd love to make a callout to it (@EisenbergEffect as FYI).
Our project isn't open source yet. We're still working with our legal department to get everything in place for that, but we're hoping to have that done later this year.
You're welcome to mention our company, NI, as one that is building on top of FAST for some of our products.
My reason for holding with button thus far is that I don't think the actual semantics of the button change, nor does it's form association behavior from what I can tell.
We considered extending the button but decided to go with the switch for the opposite reason. We were of the opinion that the toggle button was more of a visual styling choice of a boolean control (such as a checkbox or a switch) rather than a button and that the button's form association would be unexpected/misleading on a toggle button.
My reason for holding with button thus far is that I don't think the actual semantics of the button change, nor does it's form association behavior from what I can tell.
We considered extending the button but decided to go with the switch for the opposite reason. We were of the opinion that the toggle button was more of a visual styling choice of a boolean control (such as a checkbox or a switch) rather than a button and that the button's form association would be unexpected/misleading on a toggle button.
Yea, what does it mean for a <fast-toggle-button type="reset"> to be switched to the down state on click (resetting a form) and clicked again switching to the up state (again resetting a form). Same for type="submit" the state of a toggle button doesn't seem align with button form association compared to a checkable form association.
@chrisdholt, @EisenbergEffect , @mollykreis. Just an FYI, we have finally been able to make our design system repo public. https://github.com/ni/nimble
We have been using FoundationSwitch with a custom template to support the aria-pressed/read-only/disabled attributes (and start + end templates) for a couple years as a reference: https://github.com/ni/nimble/tree/main/packages/nimble-components/src/toggle-button
Would still love to contribute it upstream to the current stable branch (archive) and the foundation alpha (master) if that direction makes sense.
Unfortunately @microsoft/fast-components has been deprecated for some time. We are placing a stronger focus on @microsoft/fast-element and a few other packages for the FAST project.
