,
selected: bool,
@@ -171,3 +171,48 @@ impl RenderOnce for Tab {
)
}
}
+
+impl ComponentPreview for Tab {
+ fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
+ v_flex()
+ .gap_6()
+ .children(vec![example_group_with_title(
+ "Variations",
+ vec![
+ single_example(
+ "Default",
+ Tab::new("default").child("Default Tab").into_any_element(),
+ ),
+ single_example(
+ "Selected",
+ Tab::new("selected")
+ .toggle_state(true)
+ .child("Selected Tab")
+ .into_any_element(),
+ ),
+ single_example(
+ "First",
+ Tab::new("first")
+ .position(TabPosition::First)
+ .child("First Tab")
+ .into_any_element(),
+ ),
+ single_example(
+ "Middle",
+ Tab::new("middle")
+ .position(TabPosition::Middle(Ordering::Equal))
+ .child("Middle Tab")
+ .into_any_element(),
+ ),
+ single_example(
+ "Last",
+ Tab::new("last")
+ .position(TabPosition::Last)
+ .child("Last Tab")
+ .into_any_element(),
+ ),
+ ],
+ )])
+ .into_any_element()
+ }
+}
diff --git a/crates/ui/src/components/table.rs b/crates/ui/src/components/table.rs
index c1918829791a6e14b7e9f8dbaeae9307c5439c23..aa955a6d089ee30d922b5cbc2104391e164a51ba 100644
--- a/crates/ui/src/components/table.rs
+++ b/crates/ui/src/components/table.rs
@@ -2,7 +2,7 @@ use crate::{prelude::*, Indicator};
use gpui::{div, AnyElement, FontWeight, IntoElement, Length};
/// A table component
-#[derive(IntoElement)]
+#[derive(IntoElement, IntoComponent)]
pub struct Table {
column_headers: Vec
,
rows: Vec>,
@@ -152,88 +152,110 @@ where
}
impl ComponentPreview for Table {
- fn description() -> impl Into> {
- "Used for showing tabular data. Tables may show both text and elements in their cells."
- }
-
- fn example_label_side() -> ExampleLabelSide {
- ExampleLabelSide::Top
- }
-
- fn examples(_window: &mut Window, _: &mut App) -> Vec> {
- vec![
- example_group(vec![
- single_example(
- "Simple Table",
- Table::new(vec!["Name", "Age", "City"])
- .width(px(400.))
- .row(vec!["Alice", "28", "New York"])
- .row(vec!["Bob", "32", "San Francisco"])
- .row(vec!["Charlie", "25", "London"]),
+ fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
+ v_flex()
+ .gap_6()
+ .children(vec![
+ example_group_with_title(
+ "Basic Tables",
+ vec![
+ single_example(
+ "Simple Table",
+ Table::new(vec!["Name", "Age", "City"])
+ .width(px(400.))
+ .row(vec!["Alice", "28", "New York"])
+ .row(vec!["Bob", "32", "San Francisco"])
+ .row(vec!["Charlie", "25", "London"])
+ .into_any_element(),
+ ),
+ single_example(
+ "Two Column Table",
+ Table::new(vec!["Category", "Value"])
+ .width(px(300.))
+ .row(vec!["Revenue", "$100,000"])
+ .row(vec!["Expenses", "$75,000"])
+ .row(vec!["Profit", "$25,000"])
+ .into_any_element(),
+ ),
+ ],
+ ),
+ example_group_with_title(
+ "Styled Tables",
+ vec![
+ single_example(
+ "Default",
+ Table::new(vec!["Product", "Price", "Stock"])
+ .width(px(400.))
+ .row(vec!["Laptop", "$999", "In Stock"])
+ .row(vec!["Phone", "$599", "Low Stock"])
+ .row(vec!["Tablet", "$399", "Out of Stock"])
+ .into_any_element(),
+ ),
+ single_example(
+ "Striped",
+ Table::new(vec!["Product", "Price", "Stock"])
+ .width(px(400.))
+ .striped()
+ .row(vec!["Laptop", "$999", "In Stock"])
+ .row(vec!["Phone", "$599", "Low Stock"])
+ .row(vec!["Tablet", "$399", "Out of Stock"])
+ .row(vec!["Headphones", "$199", "In Stock"])
+ .into_any_element(),
+ ),
+ ],
),
- single_example(
- "Two Column Table",
- Table::new(vec!["Category", "Value"])
- .width(px(300.))
- .row(vec!["Revenue", "$100,000"])
- .row(vec!["Expenses", "$75,000"])
- .row(vec!["Profit", "$25,000"]),
+ example_group_with_title(
+ "Mixed Content Table",
+ vec![single_example(
+ "Table with Elements",
+ Table::new(vec!["Status", "Name", "Priority", "Deadline", "Action"])
+ .width(px(840.))
+ .row(vec![
+ element_cell(
+ Indicator::dot().color(Color::Success).into_any_element(),
+ ),
+ string_cell("Project A"),
+ string_cell("High"),
+ string_cell("2023-12-31"),
+ element_cell(
+ Button::new("view_a", "View")
+ .style(ButtonStyle::Filled)
+ .full_width()
+ .into_any_element(),
+ ),
+ ])
+ .row(vec![
+ element_cell(
+ Indicator::dot().color(Color::Warning).into_any_element(),
+ ),
+ string_cell("Project B"),
+ string_cell("Medium"),
+ string_cell("2024-03-15"),
+ element_cell(
+ Button::new("view_b", "View")
+ .style(ButtonStyle::Filled)
+ .full_width()
+ .into_any_element(),
+ ),
+ ])
+ .row(vec![
+ element_cell(
+ Indicator::dot().color(Color::Error).into_any_element(),
+ ),
+ string_cell("Project C"),
+ string_cell("Low"),
+ string_cell("2024-06-30"),
+ element_cell(
+ Button::new("view_c", "View")
+ .style(ButtonStyle::Filled)
+ .full_width()
+ .into_any_element(),
+ ),
+ ])
+ .into_any_element(),
+ )],
),
- ]),
- example_group(vec![single_example(
- "Striped Table",
- Table::new(vec!["Product", "Price", "Stock"])
- .width(px(600.))
- .striped()
- .row(vec!["Laptop", "$999", "In Stock"])
- .row(vec!["Phone", "$599", "Low Stock"])
- .row(vec!["Tablet", "$399", "Out of Stock"])
- .row(vec!["Headphones", "$199", "In Stock"]),
- )]),
- example_group_with_title(
- "Mixed Content Table",
- vec![single_example(
- "Table with Elements",
- Table::new(vec!["Status", "Name", "Priority", "Deadline", "Action"])
- .width(px(840.))
- .row(vec![
- element_cell(Indicator::dot().color(Color::Success).into_any_element()),
- string_cell("Project A"),
- string_cell("High"),
- string_cell("2023-12-31"),
- element_cell(
- Button::new("view_a", "View")
- .style(ButtonStyle::Filled)
- .full_width()
- .into_any_element(),
- ),
- ])
- .row(vec![
- element_cell(Indicator::dot().color(Color::Warning).into_any_element()),
- string_cell("Project B"),
- string_cell("Medium"),
- string_cell("2024-03-15"),
- element_cell(
- Button::new("view_b", "View")
- .style(ButtonStyle::Filled)
- .full_width()
- .into_any_element(),
- ),
- ])
- .row(vec![
- element_cell(Indicator::dot().color(Color::Error).into_any_element()),
- string_cell("Project C"),
- string_cell("Low"),
- string_cell("2024-06-30"),
- element_cell(
- Button::new("view_c", "View")
- .style(ButtonStyle::Filled)
- .full_width()
- .into_any_element(),
- ),
- ]),
- )],
- ),
- ]
+ ])
+ .into_any_element()
}
}
diff --git a/crates/ui/src/components/toggle.rs b/crates/ui/src/components/toggle.rs
index 0413891811d4baf07d243233db50d2a42b8d3cff..1f095065c30386375b7e1bfeb0d1adce5d2f3c8e 100644
--- a/crates/ui/src/components/toggle.rs
+++ b/crates/ui/src/components/toggle.rs
@@ -1,5 +1,6 @@
use gpui::{
- div, hsla, prelude::*, AnyView, CursorStyle, ElementId, Hsla, IntoElement, Styled, Window,
+ div, hsla, prelude::*, AnyElement, AnyView, CursorStyle, ElementId, Hsla, IntoElement, Styled,
+ Window,
};
use std::sync::Arc;
@@ -38,7 +39,8 @@ pub enum ToggleStyle {
/// Checkboxes are used for multiple choices, not for mutually exclusive choices.
/// Each checkbox works independently from other checkboxes in the list,
/// therefore checking an additional box does not affect any other selections.
-#[derive(IntoElement)]
+#[derive(IntoElement, IntoComponent)]
+#[component(scope = "input")]
pub struct Checkbox {
id: ElementId,
toggle_state: ToggleState,
@@ -237,7 +239,8 @@ impl RenderOnce for Checkbox {
}
/// A [`Checkbox`] that has a [`Label`].
-#[derive(IntoElement)]
+#[derive(IntoElement, IntoComponent)]
+#[component(scope = "input")]
pub struct CheckboxWithLabel {
id: ElementId,
label: Label,
@@ -314,7 +317,8 @@ impl RenderOnce for CheckboxWithLabel {
/// # Switch
///
/// Switches are used to represent opposite states, such as enabled or disabled.
-#[derive(IntoElement)]
+#[derive(IntoElement, IntoComponent)]
+#[component(scope = "input")]
pub struct Switch {
id: ElementId,
toggle_state: ToggleState,
@@ -429,6 +433,7 @@ impl RenderOnce for Switch {
h_flex()
.id(self.id)
.gap(DynamicSpacing::Base06.rems(cx))
+ .cursor_pointer()
.child(switch)
.when_some(
self.on_click.filter(|_| !self.disabled),
@@ -445,286 +450,249 @@ impl RenderOnce for Switch {
}
}
+/// A [`Switch`] that has a [`Label`].
+#[derive(IntoElement)]
+// #[component(scope = "input")]
+pub struct SwitchWithLabel {
+ id: ElementId,
+ label: Label,
+ toggle_state: ToggleState,
+ on_click: Arc,
+ disabled: bool,
+}
+
+impl SwitchWithLabel {
+ /// Creates a switch with an attached label.
+ pub fn new(
+ id: impl Into,
+ label: Label,
+ toggle_state: impl Into,
+ on_click: impl Fn(&ToggleState, &mut Window, &mut App) + 'static,
+ ) -> Self {
+ Self {
+ id: id.into(),
+ label,
+ toggle_state: toggle_state.into(),
+ on_click: Arc::new(on_click),
+ disabled: false,
+ }
+ }
+
+ /// Sets the disabled state of the [`SwitchWithLabel`].
+ pub fn disabled(mut self, disabled: bool) -> Self {
+ self.disabled = disabled;
+ self
+ }
+}
+
+impl RenderOnce for SwitchWithLabel {
+ fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
+ h_flex()
+ .id(SharedString::from(format!("{}-container", self.id)))
+ .gap(DynamicSpacing::Base08.rems(cx))
+ .child(
+ Switch::new(self.id.clone(), self.toggle_state)
+ .disabled(self.disabled)
+ .on_click({
+ let on_click = self.on_click.clone();
+ move |checked, window, cx| {
+ (on_click)(checked, window, cx);
+ }
+ }),
+ )
+ .child(
+ div()
+ .id(SharedString::from(format!("{}-label", self.id)))
+ .child(self.label),
+ )
+ }
+}
+
impl ComponentPreview for Checkbox {
- fn description() -> impl Into> {
- "A checkbox lets people choose between a pair of opposing states, like enabled and disabled, using a different appearance to indicate each state."
+ fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
+ v_flex()
+ .gap_6()
+ .children(vec![
+ example_group_with_title(
+ "States",
+ vec![
+ single_example(
+ "Unselected",
+ Checkbox::new("checkbox_unselected", ToggleState::Unselected)
+ .into_any_element(),
+ ),
+ single_example(
+ "Indeterminate",
+ Checkbox::new("checkbox_indeterminate", ToggleState::Indeterminate)
+ .into_any_element(),
+ ),
+ single_example(
+ "Selected",
+ Checkbox::new("checkbox_selected", ToggleState::Selected)
+ .into_any_element(),
+ ),
+ ],
+ ),
+ example_group_with_title(
+ "Styles",
+ vec![
+ single_example(
+ "Default",
+ Checkbox::new("checkbox_default", ToggleState::Selected)
+ .into_any_element(),
+ ),
+ single_example(
+ "Filled",
+ Checkbox::new("checkbox_filled", ToggleState::Selected)
+ .fill()
+ .into_any_element(),
+ ),
+ single_example(
+ "ElevationBased",
+ Checkbox::new("checkbox_elevation", ToggleState::Selected)
+ .style(ToggleStyle::ElevationBased(ElevationIndex::EditorSurface))
+ .into_any_element(),
+ ),
+ single_example(
+ "Custom Color",
+ Checkbox::new("checkbox_custom", ToggleState::Selected)
+ .style(ToggleStyle::Custom(hsla(142.0 / 360., 0.68, 0.45, 0.7)))
+ .into_any_element(),
+ ),
+ ],
+ ),
+ example_group_with_title(
+ "Disabled",
+ vec![
+ single_example(
+ "Unselected",
+ Checkbox::new("checkbox_disabled_unselected", ToggleState::Unselected)
+ .disabled(true)
+ .into_any_element(),
+ ),
+ single_example(
+ "Selected",
+ Checkbox::new("checkbox_disabled_selected", ToggleState::Selected)
+ .disabled(true)
+ .into_any_element(),
+ ),
+ ],
+ ),
+ example_group_with_title(
+ "With Label",
+ vec![single_example(
+ "Default",
+ Checkbox::new("checkbox_with_label", ToggleState::Selected)
+ .label("Always save on quit")
+ .into_any_element(),
+ )],
+ ),
+ ])
+ .into_any_element()
}
+}
- fn examples(_window: &mut Window, _: &mut App) -> Vec> {
- vec![
- example_group_with_title(
- "Default",
- vec![
- single_example(
- "Unselected",
- Checkbox::new("checkbox_unselected", ToggleState::Unselected),
- ),
- single_example(
- "Indeterminate",
- Checkbox::new("checkbox_indeterminate", ToggleState::Indeterminate),
- ),
- single_example(
- "Selected",
- Checkbox::new("checkbox_selected", ToggleState::Selected),
- ),
- ],
- ),
- example_group_with_title(
- "Default (Filled)",
- vec![
- single_example(
- "Unselected",
- Checkbox::new("checkbox_unselected", ToggleState::Unselected).fill(),
- ),
- single_example(
- "Indeterminate",
- Checkbox::new("checkbox_indeterminate", ToggleState::Indeterminate).fill(),
- ),
- single_example(
- "Selected",
- Checkbox::new("checkbox_selected", ToggleState::Selected).fill(),
- ),
- ],
- ),
- example_group_with_title(
- "ElevationBased",
- vec![
- single_example(
- "Unselected",
- Checkbox::new("checkbox_unfilled_unselected", ToggleState::Unselected)
- .style(ToggleStyle::ElevationBased(ElevationIndex::EditorSurface)),
- ),
- single_example(
- "Indeterminate",
- Checkbox::new(
- "checkbox_unfilled_indeterminate",
- ToggleState::Indeterminate,
- )
- .style(ToggleStyle::ElevationBased(ElevationIndex::EditorSurface)),
- ),
- single_example(
- "Selected",
- Checkbox::new("checkbox_unfilled_selected", ToggleState::Selected)
- .style(ToggleStyle::ElevationBased(ElevationIndex::EditorSurface)),
- ),
- ],
- ),
- example_group_with_title(
- "ElevationBased (Filled)",
- vec![
- single_example(
- "Unselected",
- Checkbox::new("checkbox_filled_unselected", ToggleState::Unselected)
- .fill()
- .style(ToggleStyle::ElevationBased(ElevationIndex::EditorSurface)),
- ),
- single_example(
- "Indeterminate",
- Checkbox::new("checkbox_filled_indeterminate", ToggleState::Indeterminate)
- .fill()
- .style(ToggleStyle::ElevationBased(ElevationIndex::EditorSurface)),
- ),
- single_example(
- "Selected",
- Checkbox::new("checkbox_filled_selected", ToggleState::Selected)
- .fill()
- .style(ToggleStyle::ElevationBased(ElevationIndex::EditorSurface)),
- ),
- ],
- ),
- example_group_with_title(
- "Custom Color",
- vec![
- single_example(
- "Unselected",
- Checkbox::new("checkbox_custom_unselected", ToggleState::Unselected)
- .style(ToggleStyle::Custom(hsla(142.0 / 360., 0.68, 0.45, 0.7))),
- ),
- single_example(
- "Indeterminate",
- Checkbox::new("checkbox_custom_indeterminate", ToggleState::Indeterminate)
- .style(ToggleStyle::Custom(hsla(142.0 / 360., 0.68, 0.45, 0.7))),
- ),
- single_example(
- "Selected",
- Checkbox::new("checkbox_custom_selected", ToggleState::Selected)
- .style(ToggleStyle::Custom(hsla(142.0 / 360., 0.68, 0.45, 0.7))),
- ),
- ],
- ),
- example_group_with_title(
- "Custom Color (Filled)",
- vec![
- single_example(
- "Unselected",
- Checkbox::new("checkbox_custom_filled_unselected", ToggleState::Unselected)
- .fill()
- .style(ToggleStyle::Custom(hsla(142.0 / 360., 0.68, 0.45, 0.7))),
- ),
- single_example(
- "Indeterminate",
- Checkbox::new(
- "checkbox_custom_filled_indeterminate",
- ToggleState::Indeterminate,
- )
- .fill()
- .style(ToggleStyle::Custom(hsla(
- 142.0 / 360.,
- 0.68,
- 0.45,
- 0.7,
- ))),
- ),
- single_example(
- "Selected",
- Checkbox::new("checkbox_custom_filled_selected", ToggleState::Selected)
- .fill()
- .style(ToggleStyle::Custom(hsla(142.0 / 360., 0.68, 0.45, 0.7))),
- ),
- ],
- ),
- example_group_with_title(
- "Disabled",
- vec![
- single_example(
- "Unselected",
- Checkbox::new("checkbox_disabled_unselected", ToggleState::Unselected)
- .disabled(true),
- ),
- single_example(
- "Indeterminate",
- Checkbox::new(
- "checkbox_disabled_indeterminate",
- ToggleState::Indeterminate,
- )
- .disabled(true),
- ),
- single_example(
- "Selected",
- Checkbox::new("checkbox_disabled_selected", ToggleState::Selected)
- .disabled(true),
- ),
- ],
- ),
- example_group_with_title(
- "Disabled (Filled)",
+impl ComponentPreview for Switch {
+ fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
+ v_flex()
+ .gap_6()
+ .children(vec![
+ example_group_with_title(
+ "States",
+ vec![
+ single_example(
+ "Off",
+ Switch::new("switch_off", ToggleState::Unselected)
+ .on_click(|_, _, _cx| {})
+ .into_any_element(),
+ ),
+ single_example(
+ "On",
+ Switch::new("switch_on", ToggleState::Selected)
+ .on_click(|_, _, _cx| {})
+ .into_any_element(),
+ ),
+ ],
+ ),
+ example_group_with_title(
+ "Disabled",
+ vec![
+ single_example(
+ "Off",
+ Switch::new("switch_disabled_off", ToggleState::Unselected)
+ .disabled(true)
+ .into_any_element(),
+ ),
+ single_example(
+ "On",
+ Switch::new("switch_disabled_on", ToggleState::Selected)
+ .disabled(true)
+ .into_any_element(),
+ ),
+ ],
+ ),
+ example_group_with_title(
+ "With Label",
+ vec![
+ single_example(
+ "Label",
+ Switch::new("switch_with_label", ToggleState::Selected)
+ .label("Always save on quit")
+ .into_any_element(),
+ ),
+ // TODO: Where did theme_preview_keybinding go?
+ // single_example(
+ // "Keybinding",
+ // Switch::new("switch_with_keybinding", ToggleState::Selected)
+ // .key_binding(theme_preview_keybinding("cmd-shift-e"))
+ // .into_any_element(),
+ // ),
+ ],
+ ),
+ ])
+ .into_any_element()
+ }
+}
+
+impl ComponentPreview for CheckboxWithLabel {
+ fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
+ v_flex()
+ .gap_6()
+ .children(vec![example_group_with_title(
+ "States",
vec![
single_example(
"Unselected",
- Checkbox::new(
- "checkbox_disabled_filled_unselected",
+ CheckboxWithLabel::new(
+ "checkbox_with_label_unselected",
+ Label::new("Always save on quit"),
ToggleState::Unselected,
+ |_, _, _| {},
)
- .fill()
- .disabled(true),
+ .into_any_element(),
),
single_example(
"Indeterminate",
- Checkbox::new(
- "checkbox_disabled_filled_indeterminate",
+ CheckboxWithLabel::new(
+ "checkbox_with_label_indeterminate",
+ Label::new("Always save on quit"),
ToggleState::Indeterminate,
+ |_, _, _| {},
)
- .fill()
- .disabled(true),
+ .into_any_element(),
),
single_example(
"Selected",
- Checkbox::new("checkbox_disabled_filled_selected", ToggleState::Selected)
- .fill()
- .disabled(true),
- ),
- ],
- ),
- ]
- }
-}
-
-impl ComponentPreview for Switch {
- fn description() -> impl Into> {
- "A switch toggles between two mutually exclusive states, typically used for enabling or disabling a setting."
- }
-
- fn examples(_window: &mut Window, _cx: &mut App) -> Vec> {
- vec![
- example_group_with_title(
- "Default",
- vec![
- single_example(
- "Off",
- Switch::new("switch_off", ToggleState::Unselected).on_click(|_, _, _cx| {}),
- ),
- single_example(
- "On",
- Switch::new("switch_on", ToggleState::Selected).on_click(|_, _, _cx| {}),
- ),
- ],
- ),
- example_group_with_title(
- "Disabled",
- vec![
- single_example(
- "Off",
- Switch::new("switch_disabled_off", ToggleState::Unselected).disabled(true),
- ),
- single_example(
- "On",
- Switch::new("switch_disabled_on", ToggleState::Selected).disabled(true),
- ),
- ],
- ),
- example_group_with_title(
- "Label Permutations",
- vec![
- single_example(
- "Label",
- Switch::new("switch_with_label", ToggleState::Selected)
- .label("Always save on quit"),
- ),
- single_example(
- "Keybinding",
- Switch::new("switch_with_label", ToggleState::Selected)
- .key_binding(theme_preview_keybinding("cmd-shift-e")),
+ CheckboxWithLabel::new(
+ "checkbox_with_label_selected",
+ Label::new("Always save on quit"),
+ ToggleState::Selected,
+ |_, _, _| {},
+ )
+ .into_any_element(),
),
],
- ),
- ]
- }
-}
-
-impl ComponentPreview for CheckboxWithLabel {
- fn description() -> impl Into> {
- "A checkbox with an associated label, allowing users to select an option while providing a descriptive text."
- }
-
- fn examples(_window: &mut Window, _: &mut App) -> Vec> {
- vec![example_group(vec![
- single_example(
- "Unselected",
- CheckboxWithLabel::new(
- "checkbox_with_label_unselected",
- Label::new("Always save on quit"),
- ToggleState::Unselected,
- |_, _, _| {},
- ),
- ),
- single_example(
- "Indeterminate",
- CheckboxWithLabel::new(
- "checkbox_with_label_indeterminate",
- Label::new("Always save on quit"),
- ToggleState::Indeterminate,
- |_, _, _| {},
- ),
- ),
- single_example(
- "Selected",
- CheckboxWithLabel::new(
- "checkbox_with_label_selected",
- Label::new("Always save on quit"),
- ToggleState::Selected,
- |_, _, _| {},
- ),
- ),
- ])]
+ )])
+ .into_any_element()
}
}
diff --git a/crates/ui/src/components/tool_strip.rs b/crates/ui/src/components/tool_strip.rs
deleted file mode 100644
index 00166c8d7ef8c3b71e40179bcecdc9867dd73efd..0000000000000000000000000000000000000000
--- a/crates/ui/src/components/tool_strip.rs
+++ /dev/null
@@ -1,58 +0,0 @@
-#![allow(missing_docs)]
-
-use gpui::Axis;
-
-use crate::prelude::*;
-
-#[derive(IntoElement)]
-pub struct ToolStrip {
- id: ElementId,
- tools: Vec