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/workspace/src/dock.rs

@@ -781,7 +781,7 @@ impl Render for PanelButtons {
                         .trigger(
                             IconButton::new(name, icon)
                                 .icon_size(IconSize::Small)
-                                .selected(is_active_button)
+                                .toggle_state(is_active_button)
                                 .on_click({
                                     let action = action.boxed_clone();
                                     move |_, cx| cx.dispatch_action(action.boxed_clone())

crates/workspace/src/pane.rs

@@ -481,7 +481,7 @@ impl Pane {
                         let zoomed = pane.is_zoomed();
                         IconButton::new("toggle_zoom", IconName::Maximize)
                             .icon_size(IconSize::Small)
-                            .selected(zoomed)
+                            .toggle_state(zoomed)
                             .selected_icon(IconName::Minimize)
                             .on_click(cx.listener(|pane, _, cx| {
                                 pane.toggle_zoom(&crate::ToggleZoom, cx);
@@ -2038,7 +2038,7 @@ impl Pane {
                 ClosePosition::Left => ui::TabCloseSide::Start,
                 ClosePosition::Right => ui::TabCloseSide::End,
             })
-            .selected(is_active)
+            .toggle_state(is_active)
             .on_click(
                 cx.listener(move |pane: &mut Self, _, cx| pane.activate_item(ix, true, true, cx)),
             )
@@ -3273,7 +3273,7 @@ impl Render for DraggedTab {
             cx,
         );
         Tab::new("")
-            .selected(self.is_active)
+            .toggle_state(self.is_active)
             .child(label)
             .render(cx)
             .font(ui_font)

crates/workspace/src/theme_preview.rs

@@ -6,7 +6,7 @@ use ui::{
     element_cell, prelude::*, string_cell, utils::calculate_contrast_ratio, AudioStatus,
     Availability, Avatar, AvatarAudioStatusIndicator, AvatarAvailabilityIndicator, ButtonLike,
     Checkbox, CheckboxWithLabel, ContentGroup, DecoratedIcon, ElevationIndex, Facepile,
-    IconDecoration, Indicator, Table, TintColor, Tooltip,
+    IconDecoration, Indicator, Switch, Table, TintColor, Tooltip,
 };
 
 use crate::{Item, Workspace};
@@ -369,6 +369,7 @@ impl ThemePreview {
             .overflow_scroll()
             .size_full()
             .gap_2()
+            .child(Switch::render_component_previews(cx))
             .child(ContentGroup::render_component_previews(cx))
             .child(IconDecoration::render_component_previews(cx))
             .child(DecoratedIcon::render_component_previews(cx))
@@ -394,7 +395,7 @@ impl ThemePreview {
                         this.current_page = p;
                         cx.notify();
                     }))
-                    .selected(p == self.current_page)
+                    .toggle_state(p == self.current_page)
                     .selected_style(ButtonStyle::Tinted(TintColor::Accent))
             }))
     }