Add preview for Checkbox with Label (#20448)

Add previews for Checkbox with Label.

Merge checkbox components.

Release Notes:

- N/A

crates/storybook/src/story_selector.rs

@@ -16,7 +16,6 @@ pub enum ComponentStory {
     AutoHeightEditor,
     Avatar,
     Button,
-    Checkbox,
     CollabNotification,
     ContextMenu,
     Cursor,
@@ -52,7 +51,6 @@ impl ComponentStory {
             Self::AutoHeightEditor => AutoHeightEditorStory::new(cx).into(),
             Self::Avatar => cx.new_view(|_| ui::AvatarStory).into(),
             Self::Button => cx.new_view(|_| ui::ButtonStory).into(),
-            Self::Checkbox => cx.new_view(|_| ui::CheckboxStory).into(),
             Self::CollabNotification => cx
                 .new_view(|_| collab_ui::notifications::CollabNotificationStory)
                 .into(),

crates/ui/src/components/checkbox.rs

@@ -1,7 +1,4 @@
 #![allow(missing_docs)]
-mod checkbox_with_label;
-
-pub use checkbox_with_label::*;
 
 use gpui::{div, prelude::*, ElementId, IntoElement, Styled, WindowContext};
 
@@ -163,3 +160,89 @@ impl ComponentPreview for Checkbox {
         ]
     }
 }
+
+use std::sync::Arc;
+
+/// A [`Checkbox`] that has a [`Label`].
+#[derive(IntoElement)]
+pub struct CheckboxWithLabel {
+    id: ElementId,
+    label: Label,
+    checked: Selection,
+    on_click: Arc<dyn Fn(&Selection, &mut WindowContext) + 'static>,
+}
+
+impl CheckboxWithLabel {
+    pub fn new(
+        id: impl Into<ElementId>,
+        label: Label,
+        checked: Selection,
+        on_click: impl Fn(&Selection, &mut WindowContext) + 'static,
+    ) -> Self {
+        Self {
+            id: id.into(),
+            label,
+            checked,
+            on_click: Arc::new(on_click),
+        }
+    }
+}
+
+impl RenderOnce for CheckboxWithLabel {
+    fn render(self, cx: &mut WindowContext) -> impl IntoElement {
+        h_flex()
+            .gap(Spacing::Large.rems(cx))
+            .child(Checkbox::new(self.id.clone(), self.checked).on_click({
+                let on_click = self.on_click.clone();
+                move |checked, cx| {
+                    (on_click)(checked, cx);
+                }
+            }))
+            .child(
+                div()
+                    .id(SharedString::from(format!("{}-label", self.id)))
+                    .on_click(move |_event, cx| {
+                        (self.on_click)(&self.checked.inverse(), cx);
+                    })
+                    .child(self.label),
+            )
+    }
+}
+
+impl ComponentPreview for CheckboxWithLabel {
+    fn description() -> impl Into<Option<&'static str>> {
+        "A checkbox with an associated label, allowing users to select an option while providing a descriptive text."
+    }
+
+    fn examples() -> Vec<ComponentExampleGroup<Self>> {
+        vec![example_group(vec![
+            single_example(
+                "Unselected",
+                CheckboxWithLabel::new(
+                    "checkbox_with_label_unselected",
+                    Label::new("Always save on quit"),
+                    Selection::Unselected,
+                    |_, _| {},
+                ),
+            ),
+            single_example(
+                "Indeterminate",
+                CheckboxWithLabel::new(
+                    "checkbox_with_label_indeterminate",
+                    Label::new("Always save on quit"),
+                    Selection::Indeterminate,
+                    |_, _| {},
+                ),
+            ),
+            single_example(
+                "Selected",
+                CheckboxWithLabel::new(
+                    "checkbox_with_label_selected",
+                    Label::new("Always save on quit"),
+                    Selection::Selected,
+                    |_, _| {},
+                ),
+            ),
+        ])]
+    }
+}

crates/ui/src/components/stories.rs

@@ -3,7 +3,6 @@
 #![allow(missing_docs)]
 mod avatar;
 mod button;
-mod checkbox;
 mod context_menu;
 mod disclosure;
 mod icon;
@@ -20,7 +19,6 @@ mod tool_strip;
 
 pub use avatar::*;
 pub use button::*;
-pub use checkbox::*;
 pub use context_menu::*;
 pub use disclosure::*;
 pub use icon::*;

crates/ui/src/traits/component_preview.rs

@@ -9,9 +9,9 @@ pub enum ExampleLabelSide {
     Left,
     /// Right side
     Right,
+    #[default]
     /// Top side
     Top,
-    #[default]
     /// Bottom side
     Bottom,
 }
@@ -81,7 +81,7 @@ pub trait ComponentPreview: IntoElement {
         v_flex()
             .gap_2()
             .when_some(group.title, |this, title| {
-                this.child(Headline::new(title).size(HeadlineSize::Small))
+                this.child(Label::new(title).size(LabelSize::Small))
             })
             .child(
                 h_flex()

crates/workspace/src/theme_preview.rs

@@ -5,7 +5,7 @@ use theme::all_theme_colors;
 use ui::{
     element_cell, prelude::*, string_cell, utils::calculate_contrast_ratio, AudioStatus,
     Availability, Avatar, AvatarAudioStatusIndicator, AvatarAvailabilityIndicator, ButtonLike,
-    Checkbox, ElevationIndex, Facepile, Indicator, Table, TintColor, Tooltip,
+    Checkbox, CheckboxWithLabel, ElevationIndex, Facepile, Indicator, Table, TintColor, Tooltip,
 };
 
 use crate::{Item, Workspace};
@@ -510,6 +510,7 @@ impl ThemePreview {
             .size_full()
             .gap_2()
             .child(Checkbox::render_component_previews(cx))
+            .child(CheckboxWithLabel::render_component_previews(cx))
             .child(Facepile::render_component_previews(cx))
             .child(Button::render_component_previews(cx))
             .child(Indicator::render_component_previews(cx))