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/editor/src/code_context_menus.rs

@@ -16,8 +16,8 @@ use project::{CodeAction, Completion, TaskSourceKind};
 use task::ResolvedTask;
 use ui::{
     h_flex, ActiveTheme as _, Color, FluentBuilder as _, InteractiveElement as _, IntoElement,
-    Label, LabelCommon as _, LabelSize, ListItem, ParentElement as _, Popover, Selectable as _,
-    StatefulInteractiveElement as _, Styled, StyledExt as _,
+    Label, LabelCommon as _, LabelSize, ListItem, ParentElement as _, Popover,
+    StatefulInteractiveElement as _, Styled, StyledExt as _, Toggleable as _,
 };
 use util::ResultExt as _;
 use workspace::Workspace;
@@ -473,7 +473,7 @@ impl CompletionsMenu {
                         div().min_w(px(220.)).max_w(px(540.)).child(
                             ListItem::new(mat.candidate_id)
                                 .inset(true)
-                                .selected(item_ix == selected_item)
+                                .toggle_state(item_ix == selected_item)
                                 .on_click(cx.listener(move |editor, _event, cx| {
                                     cx.stop_propagation();
                                     if let Some(task) = editor.confirm_completion(

crates/editor/src/editor.rs

@@ -4811,7 +4811,7 @@ impl Editor {
                     .shape(ui::IconButtonShape::Square)
                     .icon_size(IconSize::XSmall)
                     .icon_color(Color::Muted)
-                    .selected(is_active)
+                    .toggle_state(is_active)
                     .tooltip({
                         let focus_handle = self.focus_handle.clone();
                         move |cx| {
@@ -4988,7 +4988,7 @@ impl Editor {
             .shape(ui::IconButtonShape::Square)
             .icon_size(IconSize::XSmall)
             .icon_color(Color::Muted)
-            .selected(is_active)
+            .toggle_state(is_active)
             .on_click(cx.listener(move |editor, _e, cx| {
                 editor.focus(cx);
                 editor.toggle_code_actions(
@@ -13772,7 +13772,7 @@ impl EditorSnapshot {
         if folded || (is_foldable && (row_contains_cursor || self.gutter_hovered)) {
             Some(
                 Disclosure::new(("gutter_crease", buffer_row.0), !folded)
-                    .selected(folded)
+                    .toggle_state(folded)
                     .on_click(cx.listener_for(&editor, move |this, _e, cx| {
                         if folded {
                             this.unfold_at(&UnfoldAt { buffer_row }, cx);

crates/editor/src/editor_settings_controls.rs

@@ -265,8 +265,8 @@ impl RenderOnce for BufferFontLigaturesControl {
             |selection, cx| {
                 Self::write(
                     match selection {
-                        Selection::Selected => true,
-                        Selection::Unselected | Selection::Indeterminate => false,
+                        ToggleState::Selected => true,
+                        ToggleState::Unselected | ToggleState::Indeterminate => false,
                     },
                     cx,
                 );
@@ -318,8 +318,8 @@ impl RenderOnce for InlineGitBlameControl {
             |selection, cx| {
                 Self::write(
                     match selection {
-                        Selection::Selected => true,
-                        Selection::Unselected | Selection::Indeterminate => false,
+                        ToggleState::Selected => true,
+                        ToggleState::Unselected | ToggleState::Indeterminate => false,
                     },
                     cx,
                 );
@@ -371,8 +371,8 @@ impl RenderOnce for LineNumbersControl {
             |selection, cx| {
                 Self::write(
                     match selection {
-                        Selection::Selected => true,
-                        Selection::Unselected | Selection::Indeterminate => false,
+                        ToggleState::Selected => true,
+                        ToggleState::Unselected | ToggleState::Indeterminate => false,
                     },
                     cx,
                 );

crates/editor/src/hunk_diff.rs

@@ -726,7 +726,7 @@ impl Editor {
                                                             .shape(IconButtonShape::Square)
                                                             .icon_size(IconSize::Small)
                                                             .style(ButtonStyle::Subtle)
-                                                            .selected(
+                                                            .toggle_state(
                                                                 hunk_controls_menu_handle
                                                                     .is_deployed(),
                                                             )