1use gpui::{
2 AnyElement, AnyView, ClickEvent, ElementId, Hsla, IntoElement, Styled, Window, div, hsla,
3 prelude::*,
4};
5use std::{rc::Rc, sync::Arc};
6
7use crate::utils::is_light;
8use crate::{Color, Icon, IconName, ToggleState, Tooltip};
9use crate::{ElevationIndex, KeyBinding, prelude::*};
10
11// TODO: Checkbox, CheckboxWithLabel, and Switch could all be
12// restructured to use a ToggleLike, similar to Button/Buttonlike, Label/Labellike
13
14/// Creates a new checkbox.
15pub fn checkbox(id: impl Into<ElementId>, toggle_state: ToggleState) -> Checkbox {
16 Checkbox::new(id, toggle_state)
17}
18
19/// Creates a new switch.
20pub fn switch(id: impl Into<ElementId>, toggle_state: ToggleState) -> Switch {
21 Switch::new(id, toggle_state)
22}
23
24/// The visual style of a toggle.
25#[derive(Debug, Default, Clone, PartialEq, Eq)]
26pub enum ToggleStyle {
27 /// Toggle has a transparent background
28 #[default]
29 Ghost,
30 /// Toggle has a filled background based on the
31 /// elevation index of the parent container
32 ElevationBased(ElevationIndex),
33 /// A custom style using a color to tint the toggle
34 Custom(Hsla),
35}
36
37/// # Checkbox
38///
39/// Checkboxes are used for multiple choices, not for mutually exclusive choices.
40/// Each checkbox works independently from other checkboxes in the list,
41/// therefore checking an additional box does not affect any other selections.
42#[derive(IntoElement, RegisterComponent)]
43pub struct Checkbox {
44 id: ElementId,
45 toggle_state: ToggleState,
46 disabled: bool,
47 placeholder: bool,
48 on_click: Option<Box<dyn Fn(&ToggleState, &ClickEvent, &mut Window, &mut App) + 'static>>,
49 filled: bool,
50 style: ToggleStyle,
51 tooltip: Option<Box<dyn Fn(&mut Window, &mut App) -> AnyView>>,
52 label: Option<SharedString>,
53}
54
55impl Checkbox {
56 /// Creates a new [`Checkbox`].
57 pub fn new(id: impl Into<ElementId>, checked: ToggleState) -> Self {
58 Self {
59 id: id.into(),
60 toggle_state: checked,
61 disabled: false,
62 on_click: None,
63 filled: false,
64 style: ToggleStyle::default(),
65 tooltip: None,
66 label: None,
67 placeholder: false,
68 }
69 }
70
71 /// Sets the disabled state of the [`Checkbox`].
72 pub fn disabled(mut self, disabled: bool) -> Self {
73 self.disabled = disabled;
74 self
75 }
76
77 /// Sets the disabled state of the [`Checkbox`].
78 pub fn placeholder(mut self, placeholder: bool) -> Self {
79 self.placeholder = placeholder;
80 self
81 }
82
83 /// Binds a handler to the [`Checkbox`] that will be called when clicked.
84 pub fn on_click(
85 mut self,
86 handler: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
87 ) -> Self {
88 self.on_click = Some(Box::new(move |state, _, window, cx| {
89 handler(state, window, cx)
90 }));
91 self
92 }
93
94 pub fn on_click_ext(
95 mut self,
96 handler: impl Fn(&ToggleState, &ClickEvent, &mut Window, &mut App) + 'static,
97 ) -> Self {
98 self.on_click = Some(Box::new(handler));
99 self
100 }
101
102 /// Sets the `fill` setting of the checkbox, indicating whether it should be filled.
103 pub fn fill(mut self) -> Self {
104 self.filled = true;
105 self
106 }
107
108 /// Sets the style of the checkbox using the specified [`ToggleStyle`].
109 pub fn style(mut self, style: ToggleStyle) -> Self {
110 self.style = style;
111 self
112 }
113
114 /// Match the style of the checkbox to the current elevation using [`ToggleStyle::ElevationBased`].
115 pub fn elevation(mut self, elevation: ElevationIndex) -> Self {
116 self.style = ToggleStyle::ElevationBased(elevation);
117 self
118 }
119
120 /// Sets the tooltip for the checkbox.
121 pub fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
122 self.tooltip = Some(Box::new(tooltip));
123 self
124 }
125
126 /// Set the label for the checkbox.
127 pub fn label(mut self, label: impl Into<SharedString>) -> Self {
128 self.label = Some(label.into());
129 self
130 }
131}
132
133impl Checkbox {
134 fn bg_color(&self, cx: &App) -> Hsla {
135 let style = self.style.clone();
136 match (style, self.filled) {
137 (ToggleStyle::Ghost, false) => cx.theme().colors().ghost_element_background,
138 (ToggleStyle::Ghost, true) => cx.theme().colors().element_background,
139 (ToggleStyle::ElevationBased(_), false) => gpui::transparent_black(),
140 (ToggleStyle::ElevationBased(elevation), true) => elevation.darker_bg(cx),
141 (ToggleStyle::Custom(_), false) => gpui::transparent_black(),
142 (ToggleStyle::Custom(color), true) => color.opacity(0.2),
143 }
144 }
145
146 fn border_color(&self, cx: &App) -> Hsla {
147 if self.disabled {
148 return cx.theme().colors().border_variant;
149 }
150
151 match self.style.clone() {
152 ToggleStyle::Ghost => cx.theme().colors().border,
153 ToggleStyle::ElevationBased(_) => cx.theme().colors().border,
154 ToggleStyle::Custom(color) => color.opacity(0.3),
155 }
156 }
157
158 /// container size
159 pub fn container_size() -> Pixels {
160 px(20.0)
161 }
162}
163
164impl RenderOnce for Checkbox {
165 fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
166 let group_id = format!("checkbox_group_{:?}", self.id);
167 let color = if self.disabled {
168 Color::Disabled
169 } else {
170 Color::Selected
171 };
172 let icon = match self.toggle_state {
173 ToggleState::Selected => {
174 if self.placeholder {
175 None
176 } else {
177 Some(
178 Icon::new(IconName::Check)
179 .size(IconSize::Small)
180 .color(color),
181 )
182 }
183 }
184 ToggleState::Indeterminate => {
185 Some(Icon::new(IconName::Dash).size(IconSize::Small).color(color))
186 }
187 ToggleState::Unselected => None,
188 };
189
190 let bg_color = self.bg_color(cx);
191 let border_color = self.border_color(cx);
192 let hover_border_color = border_color.alpha(0.7);
193
194 let size = Self::container_size();
195
196 let checkbox = h_flex()
197 .id(self.id.clone())
198 .justify_center()
199 .items_center()
200 .size(size)
201 .group(group_id.clone())
202 .child(
203 div()
204 .flex()
205 .flex_none()
206 .justify_center()
207 .items_center()
208 .m_1()
209 .size_4()
210 .rounded_xs()
211 .bg(bg_color)
212 .border_1()
213 .border_color(border_color)
214 .when(self.disabled, |this| this.cursor_not_allowed())
215 .when(self.disabled, |this| {
216 this.bg(cx.theme().colors().element_disabled.opacity(0.6))
217 })
218 .when(!self.disabled, |this| {
219 this.group_hover(group_id.clone(), |el| el.border_color(hover_border_color))
220 })
221 .when(self.placeholder, |this| {
222 this.child(
223 div()
224 .flex_none()
225 .rounded_full()
226 .bg(color.color(cx).alpha(0.5))
227 .size(px(4.)),
228 )
229 })
230 .children(icon),
231 );
232
233 h_flex()
234 .id(self.id)
235 .gap(DynamicSpacing::Base06.rems(cx))
236 .child(checkbox)
237 .when_some(
238 self.on_click.filter(|_| !self.disabled),
239 |this, on_click| {
240 this.on_click(move |click, window, cx| {
241 on_click(&self.toggle_state.inverse(), click, window, cx)
242 })
243 },
244 )
245 // TODO: Allow label size to be different from default.
246 // TODO: Allow label color to be different from muted.
247 .when_some(self.label, |this, label| {
248 this.child(Label::new(label).color(Color::Muted))
249 })
250 .when_some(self.tooltip, |this, tooltip| {
251 this.tooltip(move |window, cx| tooltip(window, cx))
252 })
253 }
254}
255
256/// A [`Checkbox`] that has a [`Label`].
257#[derive(IntoElement, RegisterComponent)]
258pub struct CheckboxWithLabel {
259 id: ElementId,
260 label: Label,
261 checked: ToggleState,
262 on_click: Arc<dyn Fn(&ToggleState, &mut Window, &mut App) + 'static>,
263 filled: bool,
264 style: ToggleStyle,
265 checkbox_position: IconPosition,
266}
267
268// TODO: Remove `CheckboxWithLabel` now that `label` is a method of `Checkbox`.
269impl CheckboxWithLabel {
270 /// Creates a checkbox with an attached label.
271 pub fn new(
272 id: impl Into<ElementId>,
273 label: Label,
274 checked: ToggleState,
275 on_click: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
276 ) -> Self {
277 Self {
278 id: id.into(),
279 label,
280 checked,
281 on_click: Arc::new(on_click),
282 filled: false,
283 style: ToggleStyle::default(),
284 checkbox_position: IconPosition::Start,
285 }
286 }
287
288 /// Sets the style of the checkbox using the specified [`ToggleStyle`].
289 pub fn style(mut self, style: ToggleStyle) -> Self {
290 self.style = style;
291 self
292 }
293
294 /// Match the style of the checkbox to the current elevation using [`ToggleStyle::ElevationBased`].
295 pub fn elevation(mut self, elevation: ElevationIndex) -> Self {
296 self.style = ToggleStyle::ElevationBased(elevation);
297 self
298 }
299
300 /// Sets the `fill` setting of the checkbox, indicating whether it should be filled.
301 pub fn fill(mut self) -> Self {
302 self.filled = true;
303 self
304 }
305
306 pub fn checkbox_position(mut self, position: IconPosition) -> Self {
307 self.checkbox_position = position;
308 self
309 }
310}
311
312impl RenderOnce for CheckboxWithLabel {
313 fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
314 h_flex()
315 .gap(DynamicSpacing::Base08.rems(cx))
316 .when(self.checkbox_position == IconPosition::Start, |this| {
317 this.child(
318 Checkbox::new(self.id.clone(), self.checked)
319 .style(self.style.clone())
320 .when(self.filled, Checkbox::fill)
321 .on_click({
322 let on_click = self.on_click.clone();
323 move |checked, window, cx| {
324 (on_click)(checked, window, cx);
325 }
326 }),
327 )
328 })
329 .child(
330 div()
331 .id(SharedString::from(format!("{}-label", self.id)))
332 .on_click({
333 let on_click = self.on_click.clone();
334 move |_event, window, cx| {
335 (on_click)(&self.checked.inverse(), window, cx);
336 }
337 })
338 .child(self.label),
339 )
340 .when(self.checkbox_position == IconPosition::End, |this| {
341 this.child(
342 Checkbox::new(self.id.clone(), self.checked)
343 .style(self.style)
344 .when(self.filled, Checkbox::fill)
345 .on_click(move |checked, window, cx| {
346 (self.on_click)(checked, window, cx);
347 }),
348 )
349 })
350 }
351}
352
353/// Defines the color for a switch component.
354#[derive(Debug, PartialEq, Eq, PartialOrd, Ord, Hash, Clone, Copy, Default)]
355pub enum SwitchColor {
356 #[default]
357 Default,
358 Accent,
359 Error,
360 Warning,
361 Success,
362 Custom(Hsla),
363}
364
365impl SwitchColor {
366 fn get_colors(&self, is_on: bool, cx: &App) -> (Hsla, Hsla) {
367 if !is_on {
368 return (
369 cx.theme().colors().element_disabled,
370 cx.theme().colors().border,
371 );
372 }
373
374 match self {
375 SwitchColor::Default => {
376 let colors = cx.theme().colors();
377 let base_color = colors.text;
378 let bg_color = colors.element_background.blend(base_color.opacity(0.08));
379 (bg_color, colors.border_variant)
380 }
381 SwitchColor::Accent => {
382 let status = cx.theme().status();
383 (status.info.opacity(0.4), status.info.opacity(0.2))
384 }
385 SwitchColor::Error => {
386 let status = cx.theme().status();
387 (status.error.opacity(0.4), status.error.opacity(0.2))
388 }
389 SwitchColor::Warning => {
390 let status = cx.theme().status();
391 (status.warning.opacity(0.4), status.warning.opacity(0.2))
392 }
393 SwitchColor::Success => {
394 let status = cx.theme().status();
395 (status.success.opacity(0.4), status.success.opacity(0.2))
396 }
397 SwitchColor::Custom(color) => (*color, color.opacity(0.6)),
398 }
399 }
400}
401
402impl From<SwitchColor> for Color {
403 fn from(color: SwitchColor) -> Self {
404 match color {
405 SwitchColor::Default => Color::Default,
406 SwitchColor::Accent => Color::Accent,
407 SwitchColor::Error => Color::Error,
408 SwitchColor::Warning => Color::Warning,
409 SwitchColor::Success => Color::Success,
410 SwitchColor::Custom(_) => Color::Default,
411 }
412 }
413}
414
415/// # Switch
416///
417/// Switches are used to represent opposite states, such as enabled or disabled.
418#[derive(IntoElement, RegisterComponent)]
419pub struct Switch {
420 id: ElementId,
421 toggle_state: ToggleState,
422 disabled: bool,
423 on_click: Option<Rc<dyn Fn(&ToggleState, &mut Window, &mut App) + 'static>>,
424 label: Option<SharedString>,
425 key_binding: Option<KeyBinding>,
426 color: SwitchColor,
427 tab_index: Option<isize>,
428}
429
430impl Switch {
431 /// Creates a new [`Switch`].
432 pub fn new(id: impl Into<ElementId>, state: ToggleState) -> Self {
433 Self {
434 id: id.into(),
435 toggle_state: state,
436 disabled: false,
437 on_click: None,
438 label: None,
439 key_binding: None,
440 color: SwitchColor::default(),
441 tab_index: None,
442 }
443 }
444
445 /// Sets the color of the switch using the specified [`SwitchColor`].
446 pub fn color(mut self, color: SwitchColor) -> Self {
447 self.color = color;
448 self
449 }
450
451 /// Sets the disabled state of the [`Switch`].
452 pub fn disabled(mut self, disabled: bool) -> Self {
453 self.disabled = disabled;
454 self
455 }
456
457 /// Binds a handler to the [`Switch`] that will be called when clicked.
458 pub fn on_click(
459 mut self,
460 handler: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
461 ) -> Self {
462 self.on_click = Some(Rc::new(handler));
463 self
464 }
465
466 /// Sets the label of the [`Switch`].
467 pub fn label(mut self, label: impl Into<SharedString>) -> Self {
468 self.label = Some(label.into());
469 self
470 }
471
472 /// Display the keybinding that triggers the switch action.
473 pub fn key_binding(mut self, key_binding: impl Into<Option<KeyBinding>>) -> Self {
474 self.key_binding = key_binding.into();
475 self
476 }
477
478 pub fn tab_index(mut self, tab_index: impl Into<isize>) -> Self {
479 self.tab_index = Some(tab_index.into());
480 self
481 }
482}
483
484impl RenderOnce for Switch {
485 fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
486 let is_on = self.toggle_state == ToggleState::Selected;
487 let adjust_ratio = if is_light(cx) { 1.5 } else { 1.0 };
488
489 let base_color = cx.theme().colors().text;
490 let thumb_color = base_color;
491 let (bg_color, border_color) = self.color.get_colors(is_on, cx);
492
493 let bg_hover_color = if is_on {
494 bg_color.blend(base_color.opacity(0.16 * adjust_ratio))
495 } else {
496 bg_color.blend(base_color.opacity(0.05 * adjust_ratio))
497 };
498
499 let thumb_opacity = match (is_on, self.disabled) {
500 (_, true) => 0.2,
501 (true, false) => 1.0,
502 (false, false) => 0.5,
503 };
504
505 let group_id = format!("switch_group_{:?}", self.id);
506
507 let switch = div()
508 .id((self.id.clone(), "switch"))
509 .p(px(1.0))
510 .border_2()
511 .border_color(cx.theme().colors().border_transparent)
512 .rounded_full()
513 .when_some(
514 self.tab_index.filter(|_| !self.disabled),
515 |this, tab_index| {
516 this.tab_index(tab_index)
517 .focus_visible(|mut style| {
518 style.border_color = Some(cx.theme().colors().border_focused);
519 style
520 })
521 .when_some(self.on_click.clone(), |this, on_click| {
522 this.on_click(move |_, window, cx| {
523 on_click(&self.toggle_state.inverse(), window, cx)
524 })
525 })
526 },
527 )
528 .child(
529 h_flex()
530 .w(DynamicSpacing::Base32.rems(cx))
531 .h(DynamicSpacing::Base20.rems(cx))
532 .group(group_id.clone())
533 .child(
534 h_flex()
535 .when(is_on, |on| on.justify_end())
536 .when(!is_on, |off| off.justify_start())
537 .size_full()
538 .rounded_full()
539 .px(DynamicSpacing::Base02.px(cx))
540 .bg(bg_color)
541 .when(!self.disabled, |this| {
542 this.group_hover(group_id.clone(), |el| el.bg(bg_hover_color))
543 })
544 .border_1()
545 .border_color(border_color)
546 .child(
547 div()
548 .size(DynamicSpacing::Base12.rems(cx))
549 .rounded_full()
550 .bg(thumb_color)
551 .opacity(thumb_opacity),
552 ),
553 ),
554 );
555
556 h_flex()
557 .id(self.id)
558 .gap(DynamicSpacing::Base06.rems(cx))
559 .cursor_pointer()
560 .child(switch)
561 .when_some(
562 self.on_click.filter(|_| !self.disabled),
563 |this, on_click| {
564 this.on_click(move |_, window, cx| {
565 on_click(&self.toggle_state.inverse(), window, cx)
566 })
567 },
568 )
569 .when_some(self.label, |this, label| {
570 this.child(Label::new(label).size(LabelSize::Small))
571 })
572 .children(self.key_binding)
573 }
574}
575
576/// # SwitchField
577///
578/// A field component that combines a label, description, and switch into one reusable component.
579///
580/// # Examples
581///
582/// ```
583/// use ui::prelude::*;
584/// use ui::{SwitchField, ToggleState};
585///
586/// let switch_field = SwitchField::new(
587/// "feature-toggle",
588/// Some("Enable feature"),
589/// Some("This feature adds new functionality to the app.".into()),
590/// ToggleState::Unselected,
591/// |state, window, cx| {
592/// // Logic here
593/// }
594/// );
595/// ```
596#[derive(IntoElement, RegisterComponent)]
597pub struct SwitchField {
598 id: ElementId,
599 label: Option<SharedString>,
600 description: Option<SharedString>,
601 toggle_state: ToggleState,
602 on_click: Arc<dyn Fn(&ToggleState, &mut Window, &mut App) + 'static>,
603 disabled: bool,
604 color: SwitchColor,
605 tooltip: Option<Rc<dyn Fn(&mut Window, &mut App) -> AnyView>>,
606 tab_index: Option<isize>,
607}
608
609impl SwitchField {
610 pub fn new(
611 id: impl Into<ElementId>,
612 label: Option<impl Into<SharedString>>,
613 description: Option<SharedString>,
614 toggle_state: impl Into<ToggleState>,
615 on_click: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
616 ) -> Self {
617 Self {
618 id: id.into(),
619 label: label.map(Into::into),
620 description,
621 toggle_state: toggle_state.into(),
622 on_click: Arc::new(on_click),
623 disabled: false,
624 color: SwitchColor::Accent,
625 tooltip: None,
626 tab_index: None,
627 }
628 }
629
630 pub fn description(mut self, description: impl Into<SharedString>) -> Self {
631 self.description = Some(description.into());
632 self
633 }
634
635 pub fn disabled(mut self, disabled: bool) -> Self {
636 self.disabled = disabled;
637 self
638 }
639
640 /// Sets the color of the switch using the specified [`SwitchColor`].
641 /// This changes the color scheme of the switch when it's in the "on" state.
642 pub fn color(mut self, color: SwitchColor) -> Self {
643 self.color = color;
644 self
645 }
646
647 pub fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
648 self.tooltip = Some(Rc::new(tooltip));
649 self
650 }
651
652 pub fn tab_index(mut self, tab_index: isize) -> Self {
653 self.tab_index = Some(tab_index);
654 self
655 }
656}
657
658impl RenderOnce for SwitchField {
659 fn render(self, _window: &mut Window, _cx: &mut App) -> impl IntoElement {
660 let tooltip = self
661 .tooltip
662 .zip(self.label.clone())
663 .map(|(tooltip_fn, label)| {
664 h_flex().gap_0p5().child(Label::new(label)).child(
665 IconButton::new("tooltip_button", IconName::Info)
666 .icon_size(IconSize::XSmall)
667 .icon_color(Color::Muted)
668 .shape(crate::IconButtonShape::Square)
669 .style(ButtonStyle::Transparent)
670 .tooltip({
671 let tooltip = tooltip_fn.clone();
672 move |window, cx| tooltip(window, cx)
673 })
674 .on_click(|_, _, _| {}), // Intentional empty on click handler so that clicking on the info tooltip icon doesn't trigger the switch toggle
675 )
676 });
677
678 h_flex()
679 .id((self.id.clone(), "container"))
680 .when(!self.disabled, |this| {
681 this.hover(|this| this.cursor_pointer())
682 })
683 .w_full()
684 .gap_4()
685 .justify_between()
686 .flex_wrap()
687 .child(match (&self.description, tooltip) {
688 (Some(description), Some(tooltip)) => v_flex()
689 .gap_0p5()
690 .max_w_5_6()
691 .child(tooltip)
692 .child(Label::new(description.clone()).color(Color::Muted))
693 .into_any_element(),
694 (Some(description), None) => v_flex()
695 .gap_0p5()
696 .max_w_5_6()
697 .when_some(self.label, |this, label| this.child(Label::new(label)))
698 .child(Label::new(description.clone()).color(Color::Muted))
699 .into_any_element(),
700 (None, Some(tooltip)) => tooltip.into_any_element(),
701 (None, None) => {
702 if let Some(label) = self.label.clone() {
703 Label::new(label).into_any_element()
704 } else {
705 gpui::Empty.into_any_element()
706 }
707 }
708 })
709 .child(
710 Switch::new((self.id.clone(), "switch"), self.toggle_state)
711 .color(self.color)
712 .disabled(self.disabled)
713 .when_some(
714 self.tab_index.filter(|_| !self.disabled),
715 |this, tab_index| this.tab_index(tab_index),
716 )
717 .on_click({
718 let on_click = self.on_click.clone();
719 move |state, window, cx| {
720 (on_click)(state, window, cx);
721 }
722 }),
723 )
724 .when(!self.disabled, |this| {
725 this.on_click({
726 let on_click = self.on_click.clone();
727 let toggle_state = self.toggle_state;
728 move |_click, window, cx| {
729 (on_click)(&toggle_state.inverse(), window, cx);
730 }
731 })
732 })
733 }
734}
735
736impl Component for SwitchField {
737 fn scope() -> ComponentScope {
738 ComponentScope::Input
739 }
740
741 fn description() -> Option<&'static str> {
742 Some("A field component that combines a label, description, and switch")
743 }
744
745 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
746 Some(
747 v_flex()
748 .gap_6()
749 .children(vec![
750 example_group_with_title(
751 "States",
752 vec![
753 single_example(
754 "Unselected",
755 SwitchField::new(
756 "switch_field_unselected",
757 Some("Enable notifications"),
758 Some("Receive notifications when new messages arrive.".into()),
759 ToggleState::Unselected,
760 |_, _, _| {},
761 )
762 .into_any_element(),
763 ),
764 single_example(
765 "Selected",
766 SwitchField::new(
767 "switch_field_selected",
768 Some("Enable notifications"),
769 Some("Receive notifications when new messages arrive.".into()),
770 ToggleState::Selected,
771 |_, _, _| {},
772 )
773 .into_any_element(),
774 ),
775 ],
776 ),
777 example_group_with_title(
778 "Colors",
779 vec![
780 single_example(
781 "Default",
782 SwitchField::new(
783 "switch_field_default",
784 Some("Default color"),
785 Some("This uses the default switch color.".into()),
786 ToggleState::Selected,
787 |_, _, _| {},
788 )
789 .into_any_element(),
790 ),
791 single_example(
792 "Accent",
793 SwitchField::new(
794 "switch_field_accent",
795 Some("Accent color"),
796 Some("This uses the accent color scheme.".into()),
797 ToggleState::Selected,
798 |_, _, _| {},
799 )
800 .color(SwitchColor::Accent)
801 .into_any_element(),
802 ),
803 ],
804 ),
805 example_group_with_title(
806 "Disabled",
807 vec![single_example(
808 "Disabled",
809 SwitchField::new(
810 "switch_field_disabled",
811 Some("Disabled field"),
812 Some("This field is disabled and cannot be toggled.".into()),
813 ToggleState::Selected,
814 |_, _, _| {},
815 )
816 .disabled(true)
817 .into_any_element(),
818 )],
819 ),
820 example_group_with_title(
821 "No Description",
822 vec![single_example(
823 "No Description",
824 SwitchField::new(
825 "switch_field_disabled",
826 Some("Disabled field"),
827 None,
828 ToggleState::Selected,
829 |_, _, _| {},
830 )
831 .into_any_element(),
832 )],
833 ),
834 example_group_with_title(
835 "With Tooltip",
836 vec![
837 single_example(
838 "Tooltip with Description",
839 SwitchField::new(
840 "switch_field_tooltip_with_desc",
841 Some("Nice Feature"),
842 Some("Enable advanced configuration options.".into()),
843 ToggleState::Unselected,
844 |_, _, _| {},
845 )
846 .tooltip(Tooltip::text("This is content for this tooltip!"))
847 .into_any_element(),
848 ),
849 single_example(
850 "Tooltip without Description",
851 SwitchField::new(
852 "switch_field_tooltip_no_desc",
853 Some("Nice Feature"),
854 None,
855 ToggleState::Selected,
856 |_, _, _| {},
857 )
858 .tooltip(Tooltip::text("This is content for this tooltip!"))
859 .into_any_element(),
860 ),
861 ],
862 ),
863 ])
864 .into_any_element(),
865 )
866 }
867}
868
869impl Component for Checkbox {
870 fn scope() -> ComponentScope {
871 ComponentScope::Input
872 }
873
874 fn description() -> Option<&'static str> {
875 Some("A checkbox component that can be used for multiple choice selections")
876 }
877
878 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
879 Some(
880 v_flex()
881 .gap_6()
882 .children(vec![
883 example_group_with_title(
884 "States",
885 vec![
886 single_example(
887 "Unselected",
888 Checkbox::new("checkbox_unselected", ToggleState::Unselected)
889 .into_any_element(),
890 ),
891 single_example(
892 "Placeholder",
893 Checkbox::new("checkbox_indeterminate", ToggleState::Selected)
894 .placeholder(true)
895 .into_any_element(),
896 ),
897 single_example(
898 "Indeterminate",
899 Checkbox::new("checkbox_indeterminate", ToggleState::Indeterminate)
900 .into_any_element(),
901 ),
902 single_example(
903 "Selected",
904 Checkbox::new("checkbox_selected", ToggleState::Selected)
905 .into_any_element(),
906 ),
907 ],
908 ),
909 example_group_with_title(
910 "Styles",
911 vec![
912 single_example(
913 "Default",
914 Checkbox::new("checkbox_default", ToggleState::Selected)
915 .into_any_element(),
916 ),
917 single_example(
918 "Filled",
919 Checkbox::new("checkbox_filled", ToggleState::Selected)
920 .fill()
921 .into_any_element(),
922 ),
923 single_example(
924 "ElevationBased",
925 Checkbox::new("checkbox_elevation", ToggleState::Selected)
926 .style(ToggleStyle::ElevationBased(
927 ElevationIndex::EditorSurface,
928 ))
929 .into_any_element(),
930 ),
931 single_example(
932 "Custom Color",
933 Checkbox::new("checkbox_custom", ToggleState::Selected)
934 .style(ToggleStyle::Custom(hsla(142.0 / 360., 0.68, 0.45, 0.7)))
935 .into_any_element(),
936 ),
937 ],
938 ),
939 example_group_with_title(
940 "Disabled",
941 vec![
942 single_example(
943 "Unselected",
944 Checkbox::new(
945 "checkbox_disabled_unselected",
946 ToggleState::Unselected,
947 )
948 .disabled(true)
949 .into_any_element(),
950 ),
951 single_example(
952 "Selected",
953 Checkbox::new("checkbox_disabled_selected", ToggleState::Selected)
954 .disabled(true)
955 .into_any_element(),
956 ),
957 ],
958 ),
959 example_group_with_title(
960 "With Label",
961 vec![single_example(
962 "Default",
963 Checkbox::new("checkbox_with_label", ToggleState::Selected)
964 .label("Always save on quit")
965 .into_any_element(),
966 )],
967 ),
968 ])
969 .into_any_element(),
970 )
971 }
972}
973
974impl Component for Switch {
975 fn scope() -> ComponentScope {
976 ComponentScope::Input
977 }
978
979 fn description() -> Option<&'static str> {
980 Some("A switch component that represents binary states like on/off")
981 }
982
983 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
984 Some(
985 v_flex()
986 .gap_6()
987 .children(vec![
988 example_group_with_title(
989 "States",
990 vec![
991 single_example(
992 "Off",
993 Switch::new("switch_off", ToggleState::Unselected)
994 .on_click(|_, _, _cx| {})
995 .into_any_element(),
996 ),
997 single_example(
998 "On",
999 Switch::new("switch_on", ToggleState::Selected)
1000 .on_click(|_, _, _cx| {})
1001 .into_any_element(),
1002 ),
1003 ],
1004 ),
1005 example_group_with_title(
1006 "Colors",
1007 vec![
1008 single_example(
1009 "Default",
1010 Switch::new("switch_default_style", ToggleState::Selected)
1011 .color(SwitchColor::Default)
1012 .on_click(|_, _, _cx| {})
1013 .into_any_element(),
1014 ),
1015 single_example(
1016 "Accent",
1017 Switch::new("switch_accent_style", ToggleState::Selected)
1018 .color(SwitchColor::Accent)
1019 .on_click(|_, _, _cx| {})
1020 .into_any_element(),
1021 ),
1022 single_example(
1023 "Error",
1024 Switch::new("switch_error_style", ToggleState::Selected)
1025 .color(SwitchColor::Error)
1026 .on_click(|_, _, _cx| {})
1027 .into_any_element(),
1028 ),
1029 single_example(
1030 "Warning",
1031 Switch::new("switch_warning_style", ToggleState::Selected)
1032 .color(SwitchColor::Warning)
1033 .on_click(|_, _, _cx| {})
1034 .into_any_element(),
1035 ),
1036 single_example(
1037 "Success",
1038 Switch::new("switch_success_style", ToggleState::Selected)
1039 .color(SwitchColor::Success)
1040 .on_click(|_, _, _cx| {})
1041 .into_any_element(),
1042 ),
1043 single_example(
1044 "Custom",
1045 Switch::new("switch_custom_style", ToggleState::Selected)
1046 .color(SwitchColor::Custom(hsla(300.0 / 360.0, 0.6, 0.6, 1.0)))
1047 .on_click(|_, _, _cx| {})
1048 .into_any_element(),
1049 ),
1050 ],
1051 ),
1052 example_group_with_title(
1053 "Disabled",
1054 vec![
1055 single_example(
1056 "Off",
1057 Switch::new("switch_disabled_off", ToggleState::Unselected)
1058 .disabled(true)
1059 .into_any_element(),
1060 ),
1061 single_example(
1062 "On",
1063 Switch::new("switch_disabled_on", ToggleState::Selected)
1064 .disabled(true)
1065 .into_any_element(),
1066 ),
1067 ],
1068 ),
1069 example_group_with_title(
1070 "With Label",
1071 vec![
1072 single_example(
1073 "Label",
1074 Switch::new("switch_with_label", ToggleState::Selected)
1075 .label("Always save on quit")
1076 .into_any_element(),
1077 ),
1078 // TODO: Where did theme_preview_keybinding go?
1079 // single_example(
1080 // "Keybinding",
1081 // Switch::new("switch_with_keybinding", ToggleState::Selected)
1082 // .key_binding(theme_preview_keybinding("cmd-shift-e"))
1083 // .into_any_element(),
1084 // ),
1085 ],
1086 ),
1087 ])
1088 .into_any_element(),
1089 )
1090 }
1091}
1092
1093impl Component for CheckboxWithLabel {
1094 fn scope() -> ComponentScope {
1095 ComponentScope::Input
1096 }
1097
1098 fn description() -> Option<&'static str> {
1099 Some("A checkbox component with an attached label")
1100 }
1101
1102 fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
1103 Some(
1104 v_flex()
1105 .gap_6()
1106 .children(vec![example_group_with_title(
1107 "States",
1108 vec![
1109 single_example(
1110 "Unselected",
1111 CheckboxWithLabel::new(
1112 "checkbox_with_label_unselected",
1113 Label::new("Always save on quit"),
1114 ToggleState::Unselected,
1115 |_, _, _| {},
1116 )
1117 .into_any_element(),
1118 ),
1119 single_example(
1120 "Indeterminate",
1121 CheckboxWithLabel::new(
1122 "checkbox_with_label_indeterminate",
1123 Label::new("Always save on quit"),
1124 ToggleState::Indeterminate,
1125 |_, _, _| {},
1126 )
1127 .into_any_element(),
1128 ),
1129 single_example(
1130 "Selected",
1131 CheckboxWithLabel::new(
1132 "checkbox_with_label_selected",
1133 Label::new("Always save on quit"),
1134 ToggleState::Selected,
1135 |_, _, _| {},
1136 )
1137 .into_any_element(),
1138 ),
1139 ],
1140 )])
1141 .into_any_element(),
1142 )
1143 }
1144}