feat: add separator component

crates/core/Cargo.toml

@@ -34,6 +34,7 @@ full = [
     "scroll_area",
     "scrollbar",
     "segmented",
+    "separator",
     "spinner",
     "field",
     "status_dot",
@@ -64,6 +65,7 @@ popover = []
 scroll_area = []
 scrollbar = ["scroll_area"]
 segmented = []
+separator = []
 spinner = []
 field = []
 status_dot = []

crates/core/src/lib.rs

@@ -72,6 +72,9 @@ pub mod scrollbar;
 #[cfg(feature = "segmented")]
 pub mod segmented;
 
+#[cfg(feature = "separator")]
+pub mod separator;
+
 #[cfg(feature = "spinner")]
 pub mod spinner;
 

crates/core/src/separator.rs

@@ -0,0 +1,76 @@
+//! The separator: a hairline rule between sibling content.
+
+use std::rc::Rc;
+
+use gpui::prelude::FluentBuilder as _;
+use gpui::{App, InteractiveElement as _, IntoElement, RenderOnce, Styled as _, Window, div, px};
+use gpui_native_theme::ActiveTheme as _;
+
+/// Which axis the rule runs along.
+#[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
+pub enum SeparatorOrientation {
+    /// A horizontal rule between stacked content.
+    #[default]
+    Horizontal,
+    /// A vertical rule between side-by-side content.
+    Vertical,
+}
+
+type DebugSelector = Rc<dyn Fn() -> String>;
+
+/// A hairline rule that divides sibling content.
+#[derive(IntoElement)]
+pub struct Separator {
+    orientation: SeparatorOrientation,
+    debug_selector: Option<DebugSelector>,
+}
+
+impl Separator {
+    /// Creates a horizontal rule.
+    pub fn horizontal() -> Self {
+        Self {
+            orientation: SeparatorOrientation::Horizontal,
+            debug_selector: None,
+        }
+    }
+
+    /// Creates a vertical rule.
+    pub fn vertical() -> Self {
+        Self {
+            orientation: SeparatorOrientation::Vertical,
+            debug_selector: None,
+        }
+    }
+
+    /// Sets which axis the rule runs along.
+    pub fn orientation(mut self, orientation: SeparatorOrientation) -> Self {
+        self.orientation = orientation;
+        self
+    }
+
+    /// Sets the debug-bounds selector, for headless tests.
+    pub fn debug_selector<F>(mut self, selector: F) -> Self
+    where
+        F: Fn() -> String + 'static,
+    {
+        self.debug_selector = Some(Rc::new(selector));
+        self
+    }
+}
+
+impl RenderOnce for Separator {
+    fn render(self, _window: &mut Window, cx: &mut App) -> impl IntoElement {
+        let border = cx.theme().colors.border;
+
+        div()
+            .flex_none()
+            .bg(border)
+            .when_some(self.debug_selector, |rule, selector| {
+                rule.debug_selector(move || selector())
+            })
+            .map(|rule| match self.orientation {
+                SeparatorOrientation::Horizontal => rule.w_full().h(px(1.)),
+                SeparatorOrientation::Vertical => rule.self_stretch().w(px(1.)),
+            })
+    }
+}

crates/core/tests/separator.rs

@@ -0,0 +1,61 @@
+use gpui::{
+    AppContext as _, Context, IntoElement, ParentElement as _, Render, Styled as _, TestAppContext,
+    VisualTestContext, Window, div, px,
+};
+use gpui_native_core::separator::{Separator, SeparatorOrientation};
+use gpui_native_theme::Theme;
+
+struct Harness {
+    orientation: SeparatorOrientation,
+}
+
+impl Render for Harness {
+    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
+        let separator = Separator::horizontal()
+            .orientation(self.orientation)
+            .debug_selector(|| "test-separator".to_string());
+        if self.orientation == SeparatorOrientation::Horizontal {
+            div()
+                .w(px(200.))
+                .h(px(50.))
+                .flex()
+                .flex_col()
+                .child(separator)
+        } else {
+            div().w(px(200.)).h(px(50.)).flex().child(separator)
+        }
+    }
+}
+
+fn separator_window(orientation: SeparatorOrientation) -> (TestAppContext, VisualTestContext) {
+    let mut cx = TestAppContext::single();
+    cx.update(Theme::init);
+    let window = cx.add_window(move |_, _| Harness { orientation });
+    let window = window.into();
+    cx.update_window(window, |_, window, cx| {
+        window.draw(cx).clear(cx);
+    })
+    .unwrap();
+    let visual = VisualTestContext::from_window(window, &cx);
+    (cx, visual)
+}
+
+#[test]
+fn the_horizontal_rule_spans_its_container_at_hairline_height() {
+    let (_cx, mut visual) = separator_window(SeparatorOrientation::Horizontal);
+    let bounds = visual
+        .debug_bounds("test-separator")
+        .expect("horizontal separator rendered");
+    assert_eq!(bounds.size.width, px(200.));
+    assert_eq!(bounds.size.height, px(1.));
+}
+
+#[test]
+fn the_vertical_rule_spans_its_container_at_hairline_width() {
+    let (_cx, mut visual) = separator_window(SeparatorOrientation::Vertical);
+    let bounds = visual
+        .debug_bounds("test-separator")
+        .expect("vertical separator rendered");
+    assert_eq!(bounds.size.width, px(1.));
+    assert_eq!(bounds.size.height, px(50.));
+}