The problem
The toggle-button-group component allows for selecting one option out of many, similar to a radio button group.
But sometimes I want to toggle the state of one single thing using a button, and have the UI reflect its "selected" status. An example of this would be in a WYSIWYG editor. If I wanted to toggle the "bold" setting, I would want to see that in the button itself, and I would want to be able to toggle it on and off.
This was raised in #995 as a possible addition to the base button component. After some investigation and discussion among the Pharos maintainers, using a separate toggle-button component will be easier to ensure the correct accessibility considerations. This also will help avoid overloading the main button component making it harder to maintain.
The solution
Export the existing internal toggle-button, which is currently only used internally in the toggle-button-group as a usable component. Because we already have it as a component, and it is extended from the Pharos button, exposing it as a usable component makes more sense than creating another variant in the button.
We also will want to adjust the styles of the toggle button when they are used outside a group to match the design in #995, and make sure all usage inside and outside of a group remain accessible.
Alternatives considered
The switch component serves a somewhat similar functionality. While switches and toggle buttons can perform similar actions, they're so visually distinct that it wouldn't make a lot of sense to group them together.
The problem
The toggle-button-group component allows for selecting one option out of many, similar to a radio button group.
But sometimes I want to toggle the state of one single thing using a button, and have the UI reflect its "selected" status. An example of this would be in a WYSIWYG editor. If I wanted to toggle the "bold" setting, I would want to see that in the button itself, and I would want to be able to toggle it on and off.
This was raised in #995 as a possible addition to the base button component. After some investigation and discussion among the Pharos maintainers, using a separate
toggle-buttoncomponent will be easier to ensure the correct accessibility considerations. This also will help avoid overloading the mainbuttoncomponent making it harder to maintain.The solution
Export the existing internal toggle-button, which is currently only used internally in the
toggle-button-groupas a usable component. Because we already have it as a component, and it is extended from the Pharos button, exposing it as a usable component makes more sense than creating another variant in the button.We also will want to adjust the styles of the toggle button when they are used outside a group to match the design in #995, and make sure all usage inside and outside of a group remain accessible.
Alternatives considered
The switch component serves a somewhat similar functionality. While switches and toggle buttons can perform similar actions, they're so visually distinct that it wouldn't make a lot of sense to group them together.