From 3aaa348fbbefc7c1afc987536ea7c79798d388dd Mon Sep 17 00:00:00 2001
From: Jason Lee <huacnlee@gmail.com>
Date: Wed, 17 Jul 2024 14:11:17 +0800
Subject: [PATCH] Add label support to horizontal Divider.

---
 crates/story/src/lib.rs  |  2 +-
 crates/ui/src/divider.rs | 48 ++++++++++++++++++++++++++--------------
 2 files changed, 33 insertions(+), 17 deletions(-)

diff --git a/crates/story/src/lib.rs b/crates/story/src/lib.rs
index d83e1b13..3895c42e 100644
--- a/crates/story/src/lib.rs
+++ b/crates/story/src/lib.rs
@@ -221,7 +221,7 @@ impl Render for StoryContainer {
                     .p_4()
                     .child(Label::new(self.name.clone()).text_size(px(24.0)))
                     .child(Label::new(self.description.clone()).text_size(px(16.0)))
-                    .child(Divider::horizontal()),
+                    .child(Divider::horizontal().label("This is a divider")),
             )
             .when_some(self.story.clone(), |this, story| {
                 this.child(
diff --git a/crates/ui/src/divider.rs b/crates/ui/src/divider.rs
index 4260860d..ec90ad38 100644
--- a/crates/ui/src/divider.rs
+++ b/crates/ui/src/divider.rs
@@ -1,34 +1,37 @@
 use gpui::{div, prelude::FluentBuilder as _, RenderOnce};
-use gpui::{Div, IntoElement, ParentElement, Styled};
+use gpui::{Axis, Div, IntoElement, ParentElement, SharedString, Styled};
 
 use crate::theme::ActiveTheme;
 use crate::StyledExt as _;
 
-enum Orientation {
-    Vertical,
-    Horizontal,
-}
-
 #[derive(IntoElement)]
 pub struct Divider {
     base: Div,
-    orientation: Orientation,
+    label: Option<SharedString>,
+    axis: Axis,
 }
 
 impl Divider {
     pub fn vertical() -> Self {
         Self {
             base: div(),
-            orientation: Orientation::Vertical,
+            axis: Axis::Vertical,
+            label: None,
         }
     }
 
     pub fn horizontal() -> Self {
         Self {
             base: div(),
-            orientation: Orientation::Horizontal,
+            axis: Axis::Horizontal,
+            label: None,
         }
     }
+
+    pub fn label(mut self, label: impl Into<SharedString>) -> Self {
+        self.label = Some(label.into());
+        self
+    }
 }
 
 impl Styled for Divider {
@@ -42,17 +45,30 @@ impl RenderOnce for Divider {
         let theme = cx.theme();
 
         self.base
-            .map(|this| match self.orientation {
-                Orientation::Vertical => this.v_flex().h_full(),
-                Orientation::Horizontal => this.h_flex().w_full(),
+            .map(|this| match self.axis {
+                Axis::Vertical => this.v_flex().h_full(),
+                Axis::Horizontal => this.h_flex().w_full(),
             })
             .child(
                 div()
-                    .map(|this| match self.orientation {
-                        Orientation::Vertical => this.v_flex().w_0().h_full().border_l_1(),
-                        Orientation::Horizontal => this.h_flex().h_0().w_full().border_b_1(),
+                    .absolute()
+                    .map(|this| match self.axis {
+                        Axis::Vertical => this.v_flex().w_0().h_full().border_l_1(),
+                        Axis::Horizontal => this.h_flex().h_0().w_full().border_b_1(),
                     })
-                    .border_color(theme.border),
+                    .border_color(cx.theme().border),
             )
+            .when_some(self.label, |this, label| {
+                this.child(
+                    div()
+                        .px_2()
+                        .py_1()
+                        .mx_auto()
+                        .text_xs()
+                        .bg(cx.theme().background)
+                        .text_color(theme.muted_foreground)
+                        .child(label),
+                )
+            })
     }
 }