Toggle & Switch (#21979)

![CleanShot 2024-12-13 at 11 27
39@2x](https://github.com/user-attachments/assets/7c7828c0-c5c7-4dc6-931e-722366d4f15a)

- Adds the Switch component
- Updates `Selected`, `Selectable` -> `ToggleState`, `Toggleable`
- Adds `checkbox` and `switch` functions to align better with other
elements in our layout system.

We decided not to merge Switch and Checkbox. However, in a followup I'll
introduce a Toggle or AnyToggle enum so we can update
`CheckboxWithLabel` -> `ToggleWithLabel` as this component will work
exactly the same with either a Checkbox or a Switch.

Release Notes:

- N/A

crates/ui/src/components/button/button.rs

@@ -194,7 +194,7 @@ impl Button {
     }
 }
 
-impl Selectable for Button {
+impl Toggleable for Button {
     /// Sets the selected state of the button.
     ///
     /// This method allows the selection state of the button to be specified.
@@ -213,8 +213,8 @@ impl Selectable for Button {
     /// ```
     ///
     /// Use [`selected_style`](Button::selected_style) to change the style of the button when it is selected.
-    fn selected(mut self, selected: bool) -> Self {
-        self.base = self.base.selected(selected);
+    fn toggle_state(mut self, selected: bool) -> Self {
+        self.base = self.base.toggle_state(selected);
         self
     }
 }
@@ -405,7 +405,7 @@ impl RenderOnce for Button {
                     this.children(self.icon.map(|icon| {
                         ButtonIcon::new(icon)
                             .disabled(is_disabled)
-                            .selected(is_selected)
+                            .toggle_state(is_selected)
                             .selected_icon(self.selected_icon)
                             .selected_icon_color(self.selected_icon_color)
                             .size(self.icon_size)
@@ -429,7 +429,7 @@ impl RenderOnce for Button {
                     this.children(self.icon.map(|icon| {
                         ButtonIcon::new(icon)
                             .disabled(is_disabled)
-                            .selected(is_selected)
+                            .toggle_state(is_selected)
                             .selected_icon(self.selected_icon)
                             .selected_icon_color(self.selected_icon_color)
                             .size(self.icon_size)
@@ -500,7 +500,7 @@ impl ComponentPreview for Button {
                     ),
                     single_example(
                         "Selected",
-                        Button::new("selected", "Selected").selected(true),
+                        Button::new("selected", "Selected").toggle_state(true),
                     ),
                 ],
             ),

crates/ui/src/components/button/button_icon.rs

@@ -65,8 +65,8 @@ impl Disableable for ButtonIcon {
     }
 }
 
-impl Selectable for ButtonIcon {
-    fn selected(mut self, selected: bool) -> Self {
+impl Toggleable for ButtonIcon {
+    fn toggle_state(mut self, selected: bool) -> Self {
         self.selected = selected;
         self
     }

crates/ui/src/components/button/button_like.rs

@@ -6,7 +6,7 @@ use smallvec::SmallVec;
 use crate::{prelude::*, DynamicSpacing, ElevationIndex};
 
 /// A trait for buttons that can be Selected. Enables setting the [`ButtonStyle`] of a button when it is selected.
-pub trait SelectableButton: Selectable {
+pub trait SelectableButton: Toggleable {
     fn selected_style(self, style: ButtonStyle) -> Self;
 }
 
@@ -400,8 +400,8 @@ impl Disableable for ButtonLike {
     }
 }
 
-impl Selectable for ButtonLike {
-    fn selected(mut self, selected: bool) -> Self {
+impl Toggleable for ButtonLike {
+    fn toggle_state(mut self, selected: bool) -> Self {
         self.selected = selected;
         self
     }

crates/ui/src/components/button/icon_button.rs

@@ -66,9 +66,9 @@ impl Disableable for IconButton {
     }
 }
 
-impl Selectable for IconButton {
-    fn selected(mut self, selected: bool) -> Self {
-        self.base = self.base.selected(selected);
+impl Toggleable for IconButton {
+    fn toggle_state(mut self, selected: bool) -> Self {
+        self.base = self.base.toggle_state(selected);
         self
     }
 }
@@ -157,7 +157,7 @@ impl RenderOnce for IconButton {
             .child(
                 ButtonIcon::new(self.icon)
                     .disabled(is_disabled)
-                    .selected(is_selected)
+                    .toggle_state(is_selected)
                     .selected_icon(self.selected_icon)
                     .when_some(selected_style, |this, style| this.selected_style(style))
                     .size(self.icon_size)

crates/ui/src/components/button/toggle_button.rs

@@ -57,9 +57,9 @@ impl ToggleButton {
     }
 }
 
-impl Selectable for ToggleButton {
-    fn selected(mut self, selected: bool) -> Self {
-        self.base = self.base.selected(selected);
+impl Toggleable for ToggleButton {
+    fn toggle_state(mut self, selected: bool) -> Self {
+        self.base = self.base.toggle_state(selected);
         self
     }
 }