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
zed-industries · Dec 13, 2024 · 19d6e06 · 19d6e06
1 parent 2f2e7f0
commit 19d6e06
Show file tree

Hide file tree

Showing 77 changed files with 626 additions and 453 deletions.
diff --git a/crates/assistant/src/assistant_panel.rs b/crates/assistant/src/assistant_panel.rs
@@ -305,7 +305,7 @@ impl PickerDelegate for SavedContextPickerDelegate {
             ListItem::new(ix)
                 .inset(true)
                 .spacing(ListItemSpacing::Sparse)
-                .selected(selected)
+                .toggle_state(selected)
                 .child(item),
         )
     }
@@ -442,7 +442,7 @@ impl AssistantPanel {
                             )
                         }
                     })
-                    .selected(
+                    .toggle_state(
                         pane.active_item()
                             .map_or(false, |item| item.downcast::<ContextHistory>().is_some()),
                     );
@@ -4956,7 +4956,7 @@ fn render_slash_command_output_toggle(
         ("slash-command-output-fold-indicator", row.0 as u64),
         !is_folded,
     )
-    .selected(is_folded)
+    .toggle_state(is_folded)
     .on_click(move |_e, cx| fold(!is_folded, cx))
     .into_any_element()
 }
@@ -4971,7 +4971,7 @@ fn fold_toggle(
 ) -> AnyElement {
     move |row, is_folded, fold, _cx| {
         Disclosure::new((name, row.0 as u64), !is_folded)
-            .selected(is_folded)
+            .toggle_state(is_folded)
             .on_click(move |_e, cx| fold(!is_folded, cx))
             .into_any_element()
     }
@@ -5013,7 +5013,7 @@ fn render_quote_selection_output_toggle(
     _cx: &mut WindowContext,
 ) -> AnyElement {
     Disclosure::new(("quote-selection-indicator", row.0 as u64), !is_folded)
-        .selected(is_folded)
+        .toggle_state(is_folded)
         .on_click(move |_e, cx| fold(!is_folded, cx))
         .into_any_element()
 }
@@ -5036,7 +5036,7 @@ fn render_pending_slash_command_gutter_decoration(
             icon = icon.icon_color(Color::Muted);
         }
         PendingSlashCommandStatus::Running { .. } => {
-            icon = icon.selected(true);
+            icon = icon.toggle_state(true);
         }
         PendingSlashCommandStatus::Error(_) => icon = icon.icon_color(Color::Error),
     }

diff --git a/crates/assistant/src/inline_assistant.rs b/crates/assistant/src/inline_assistant.rs
@@ -1534,7 +1534,7 @@ impl Render for PromptEditor {
                                 v_flex()
                                     .child(
                                         IconButton::new("rate-limit-error", IconName::XCircle)
-                                            .selected(self.show_rate_limit_notice)
+                                            .toggle_state(self.show_rate_limit_notice)
                                             .shape(IconButtonShape::Square)
                                             .icon_size(IconSize::Small)
                                             .on_click(cx.listener(Self::toggle_rate_limit_notice)),
@@ -2133,15 +2133,15 @@ impl PromptEditor {
                             "dont-show-again",
                             Label::new("Don't show again"),
                             if dismissed_rate_limit_notice() {
-                                ui::Selection::Selected
+                                ui::ToggleState::Selected
                             } else {
-                                ui::Selection::Unselected
+                                ui::ToggleState::Unselected
                             },
                             |selection, cx| {
                                 let is_dismissed = match selection {
-                                    ui::Selection::Unselected => false,
-                                    ui::Selection::Indeterminate => return,
-                                    ui::Selection::Selected => true,
+                                    ui::ToggleState::Unselected => false,
+                                    ui::ToggleState::Indeterminate => return,
+                                    ui::ToggleState::Selected => true,
                                 };
 
                                 set_rate_limit_notice_dismissed(is_dismissed, cx)

diff --git a/crates/assistant/src/prompt_library.rs b/crates/assistant/src/prompt_library.rs
@@ -232,13 +232,13 @@ impl PickerDelegate for PromptPickerDelegate {
         let element = ListItem::new(ix)
             .inset(true)
             .spacing(ListItemSpacing::Sparse)
-            .selected(selected)
+            .toggle_state(selected)
             .child(h_flex().h_5().line_height(relative(1.)).child(Label::new(
                 prompt.title.clone().unwrap_or("Untitled".into()),
             )))
             .end_slot::<IconButton>(default.then(|| {
                 IconButton::new("toggle-default-prompt", IconName::SparkleFilled)
-                    .selected(true)
+                    .toggle_state(true)
                     .icon_color(Color::Accent)
                     .shape(IconButtonShape::Square)
                     .tooltip(move |cx| Tooltip::text("Remove from Default Prompt", cx))
@@ -274,7 +274,7 @@ impl PickerDelegate for PromptPickerDelegate {
                     })
                     .child(
                         IconButton::new("toggle-default-prompt", IconName::Sparkle)
-                            .selected(default)
+                            .toggle_state(default)
                             .selected_icon(IconName::SparkleFilled)
                             .icon_color(if default { Color::Accent } else { Color::Muted })
                             .shape(IconButtonShape::Square)
@@ -1053,7 +1053,7 @@ impl PromptLibrary {
                                                         IconName::Sparkle,
                                                     )
                                                     .style(ButtonStyle::Transparent)
-                                                    .selected(prompt_metadata.default)
+                                                    .toggle_state(prompt_metadata.default)
                                                     .selected_icon(IconName::SparkleFilled)
                                                     .icon_color(if prompt_metadata.default {
                                                         Color::Accent

diff --git a/crates/assistant/src/slash_command_picker.rs b/crates/assistant/src/slash_command_picker.rs
@@ -176,7 +176,7 @@ impl PickerDelegate for SlashCommandDelegate {
                 ListItem::new(ix)
                     .inset(true)
                     .spacing(ListItemSpacing::Dense)
-                    .selected(selected)
+                    .toggle_state(selected)
                     .tooltip({
                         let description = info.description.clone();
                         move |cx| cx.new_view(|_| Tooltip::new(description.clone())).into()
@@ -229,7 +229,7 @@ impl PickerDelegate for SlashCommandDelegate {
                 ListItem::new(ix)
                     .inset(true)
                     .spacing(ListItemSpacing::Dense)
-                    .selected(selected)
+                    .toggle_state(selected)
                     .child(renderer(cx)),
             ),
         }

diff --git a/crates/assistant2/src/context_picker.rs b/crates/assistant2/src/context_picker.rs
@@ -174,7 +174,7 @@ impl PickerDelegate for ContextPickerDelegate {
             ListItem::new(ix)
                 .inset(true)
                 .spacing(ListItemSpacing::Dense)
-                .selected(selected)
+                .toggle_state(selected)
                 .tooltip({
                     let description = entry.description.clone();
                     move |cx| cx.new_view(|_cx| Tooltip::new(description.clone())).into()

diff --git a/crates/assistant2/src/context_picker/file_context_picker.rs b/crates/assistant2/src/context_picker/file_context_picker.rs
@@ -260,7 +260,7 @@ impl PickerDelegate for FileContextPickerDelegate {
             ListItem::new(ix)
                 .inset(true)
                 .spacing(ListItemSpacing::Sparse)
-                .selected(selected)
+                .toggle_state(selected)
                 .child(mat.path.to_string_lossy().to_string()),
         )
     }

diff --git a/crates/assistant2/src/inline_assistant.rs b/crates/assistant2/src/inline_assistant.rs
@@ -1623,7 +1623,7 @@ impl Render for PromptEditor {
                                 v_flex()
                                     .child(
                                         IconButton::new("rate-limit-error", IconName::XCircle)
-                                            .selected(self.show_rate_limit_notice)
+                                            .toggle_state(self.show_rate_limit_notice)
                                             .shape(IconButtonShape::Square)
                                             .icon_size(IconSize::Small)
                                             .on_click(cx.listener(Self::toggle_rate_limit_notice)),
@@ -2065,15 +2065,15 @@ impl PromptEditor {
                             "dont-show-again",
                             Label::new("Don't show again"),
                             if dismissed_rate_limit_notice() {
-                                ui::Selection::Selected
+                                ui::ToggleState::Selected
                             } else {
-                                ui::Selection::Unselected
+                                ui::ToggleState::Unselected
                             },
                             |selection, cx| {
                                 let is_dismissed = match selection {
-                                    ui::Selection::Unselected => false,
-                                    ui::Selection::Indeterminate => return,
-                                    ui::Selection::Selected => true,
+                                    ui::ToggleState::Unselected => false,
+                                    ui::ToggleState::Indeterminate => return,
+                                    ui::ToggleState::Selected => true,
                                 };
 
                                 set_rate_limit_notice_dismissed(is_dismissed, cx)

diff --git a/crates/assistant2/src/message_editor.rs b/crates/assistant2/src/message_editor.rs
@@ -268,8 +268,8 @@ impl Render for MessageEditor {
                         self.use_tools.into(),
                         cx.listener(|this, selection, _cx| {
                             this.use_tools = match selection {
-                                Selection::Selected => true,
-                                Selection::Unselected | Selection::Indeterminate => false,
+                                ToggleState::Selected => true,
+                                ToggleState::Unselected | ToggleState::Indeterminate => false,
                             };
                         }),
                     )))

diff --git a/crates/collab_ui/src/collab_panel.rs b/crates/collab_ui/src/collab_panel.rs
@@ -841,7 +841,7 @@ impl CollabPanel {
         ListItem::new(SharedString::from(user.github_login.clone()))
             .start_slot(Avatar::new(user.avatar_uri.clone()))
             .child(Label::new(user.github_login.clone()))
-            .selected(is_selected)
+            .toggle_state(is_selected)
             .end_slot(if is_pending {
                 Label::new("Calling").color(Color::Muted).into_any_element()
             } else if is_current_user {
@@ -894,7 +894,7 @@ impl CollabPanel {
         .into();
 
         ListItem::new(project_id as usize)
-            .selected(is_selected)
+            .toggle_state(is_selected)
             .on_click(cx.listener(move |this, _, cx| {
                 this.workspace
                     .update(cx, |workspace, cx| {
@@ -924,7 +924,7 @@ impl CollabPanel {
         let id = peer_id.map_or(usize::MAX, |id| id.as_u64() as usize);
 
         ListItem::new(("screen", id))
-            .selected(is_selected)
+            .toggle_state(is_selected)
             .start_slot(
                 h_flex()
                     .gap_1()
@@ -964,7 +964,7 @@ impl CollabPanel {
         let channel_store = self.channel_store.read(cx);
         let has_channel_buffer_changed = channel_store.has_channel_buffer_changed(channel_id);
         ListItem::new("channel-notes")
-            .selected(is_selected)
+            .toggle_state(is_selected)
             .on_click(cx.listener(move |this, _, cx| {
                 this.open_channel_notes(channel_id, cx);
             }))
@@ -996,7 +996,7 @@ impl CollabPanel {
         let channel_store = self.channel_store.read(cx);
         let has_messages_notification = channel_store.has_new_messages(channel_id);
         ListItem::new("channel-chat")
-            .selected(is_selected)
+            .toggle_state(is_selected)
             .on_click(cx.listener(move |this, _, cx| {
                 this.join_channel_chat(channel_id, cx);
             }))
@@ -2253,7 +2253,7 @@ impl CollabPanel {
                 })
                 .inset(true)
                 .end_slot::<AnyElement>(button)
-                .selected(is_selected),
+                .toggle_state(is_selected),
         )
     }
 
@@ -2270,7 +2270,7 @@ impl CollabPanel {
         let item = ListItem::new(github_login.clone())
             .indent_level(1)
             .indent_step_size(px(20.))
-            .selected(is_selected)
+            .toggle_state(is_selected)
             .child(
                 h_flex()
                     .w_full()
@@ -2381,7 +2381,7 @@ impl CollabPanel {
         ListItem::new(github_login.clone())
             .indent_level(1)
             .indent_step_size(px(20.))
-            .selected(is_selected)
+            .toggle_state(is_selected)
             .child(
                 h_flex()
                     .w_full()
@@ -2425,7 +2425,7 @@ impl CollabPanel {
         ];
 
         ListItem::new(("channel-invite", channel.id.0 as usize))
-            .selected(is_selected)
+            .toggle_state(is_selected)
             .child(
                 h_flex()
                     .w_full()
@@ -2448,7 +2448,7 @@ impl CollabPanel {
         ListItem::new("contact-placeholder")
             .child(Icon::new(IconName::Plus))
             .child(Label::new("Add a Contact"))
-            .selected(is_selected)
+            .toggle_state(is_selected)
             .on_click(cx.listener(|this, _, cx| this.toggle_contact_finder(cx)))
     }
 
@@ -2547,7 +2547,7 @@ impl CollabPanel {
                     // Add one level of depth for the disclosure arrow.
                     .indent_level(depth + 1)
                     .indent_step_size(px(20.))
-                    .selected(is_selected || is_active)
+                    .toggle_state(is_selected || is_active)
                     .toggle(disclosed)
                     .on_toggle(
                         cx.listener(move |this, _, cx| {

diff --git a/crates/collab_ui/src/collab_panel/channel_modal.rs b/crates/collab_ui/src/collab_panel/channel_modal.rs
@@ -89,15 +89,15 @@ impl ChannelModal {
         cx.notify()
     }
 
-    fn set_channel_visibility(&mut self, selection: &Selection, cx: &mut ViewContext<Self>) {
+    fn set_channel_visibility(&mut self, selection: &ToggleState, cx: &mut ViewContext<Self>) {
         self.channel_store.update(cx, |channel_store, cx| {
             channel_store
                 .set_channel_visibility(
                     self.channel_id,
                     match selection {
-                        Selection::Unselected => ChannelVisibility::Members,
-                        Selection::Selected => ChannelVisibility::Public,
-                        Selection::Indeterminate => return,
+                        ToggleState::Unselected => ChannelVisibility::Members,
+                        ToggleState::Selected => ChannelVisibility::Public,
+                        ToggleState::Indeterminate => return,
                     },
                     cx,
                 )
@@ -159,9 +159,9 @@ impl Render for ChannelModal {
                                 "is-public",
                                 Label::new("Public").size(LabelSize::Small),
                                 if visibility == ChannelVisibility::Public {
-                                    ui::Selection::Selected
+                                    ui::ToggleState::Selected
                                 } else {
-                                    ui::Selection::Unselected
+                                    ui::ToggleState::Unselected
                                 },
                                 cx.listener(Self::set_channel_visibility),
                             ))
@@ -386,7 +386,7 @@ impl PickerDelegate for ChannelModalDelegate {
             ListItem::new(ix)
                 .inset(true)
                 .spacing(ListItemSpacing::Sparse)
-                .selected(selected)
+                .toggle_state(selected)
                 .start_slot(Avatar::new(user.avatar_uri.clone()))
                 .child(Label::new(user.github_login.clone()))
                 .end_slot(h_flex().gap_2().map(|slot| {

diff --git a/crates/collab_ui/src/collab_panel/contact_finder.rs b/crates/collab_ui/src/collab_panel/contact_finder.rs
@@ -151,7 +151,7 @@ impl PickerDelegate for ContactFinderDelegate {
             ListItem::new(ix)
                 .inset(true)
                 .spacing(ListItemSpacing::Sparse)
-                .selected(selected)
+                .toggle_state(selected)
                 .start_slot(Avatar::new(user.avatar_uri.clone()))
                 .child(Label::new(user.github_login.clone()))
                 .end_slot::<Icon>(icon_path.map(Icon::from_path)),

diff --git a/crates/command_palette/src/command_palette.rs b/crates/command_palette/src/command_palette.rs
@@ -397,7 +397,7 @@ impl PickerDelegate for CommandPaletteDelegate {
             ListItem::new(ix)
                 .inset(true)
                 .spacing(ListItemSpacing::Sparse)
-                .selected(selected)
+                .toggle_state(selected)
                 .child(
                     h_flex()
                         .w_full()

diff --git a/crates/editor/src/code_context_menus.rs b/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(

diff --git a/crates/editor/src/editor.rs b/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);