From ba3d82629e5bf573be28fe706969e842b206bf27 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 23 Apr 2025 19:27:56 -0300
Subject: [PATCH] ui: Add `inline_code` method to label (#29306)

This makes it easy to have a label that looks like Markdown inline code
via the `inline_code(cx)` method.

Release Notes:

- N/A
---
 crates/agent/src/ui/animated_label.rs            |  5 +++++
 .../ui/src/components/label/highlighted_label.rs |  5 +++++
 crates/ui/src/components/label/label.rs          |  9 ++++++++-
 crates/ui/src/components/label/label_like.rs     | 16 +++++++++++++++-
 4 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/crates/agent/src/ui/animated_label.rs b/crates/agent/src/ui/animated_label.rs
index c08d11e993..c2b4107730 100644
--- a/crates/agent/src/ui/animated_label.rs
+++ b/crates/agent/src/ui/animated_label.rs
@@ -73,6 +73,11 @@ impl LabelCommon for AnimatedLabel {
         self.base = self.base.buffer_font(cx);
         self
     }
+
+    fn inline_code(mut self, cx: &App) -> Self {
+        self.base = self.base.inline_code(cx);
+        self
+    }
 }
 
 impl RenderOnce for AnimatedLabel {
diff --git a/crates/ui/src/components/label/highlighted_label.rs b/crates/ui/src/components/label/highlighted_label.rs
index 1a6cd89d15..72f54e08da 100644
--- a/crates/ui/src/components/label/highlighted_label.rs
+++ b/crates/ui/src/components/label/highlighted_label.rs
@@ -78,6 +78,11 @@ impl LabelCommon for HighlightedLabel {
         self.base = self.base.buffer_font(cx);
         self
     }
+
+    fn inline_code(mut self, cx: &App) -> Self {
+        self.base = self.base.inline_code(cx);
+        self
+    }
 }
 
 pub fn highlight_ranges(
diff --git a/crates/ui/src/components/label/label.rs b/crates/ui/src/components/label/label.rs
index b278e6dab8..019ece023e 100644
--- a/crates/ui/src/components/label/label.rs
+++ b/crates/ui/src/components/label/label.rs
@@ -189,6 +189,12 @@ impl LabelCommon for Label {
         self.base = self.base.buffer_font(cx);
         self
     }
+
+    /// Styles the label to look like inline code.
+    fn inline_code(mut self, cx: &App) -> Self {
+        self.base = self.base.inline_code(cx);
+        self
+    }
 }
 
 impl RenderOnce for Label {
@@ -206,7 +212,7 @@ impl Component for Label {
         Some("A text label component that supports various styles, sizes, and formatting options.")
     }
 
-    fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
+    fn preview(_window: &mut Window, cx: &mut App) -> Option<AnyElement> {
         Some(
             v_flex()
                 .gap_6()
@@ -235,6 +241,7 @@ impl Component for Label {
                             single_example("Italic", Label::new("Code Comment").italic().into_any_element()),
                             single_example("Strikethrough", Label::new("Deprecated Feature").strikethrough().into_any_element()),
                             single_example("Underline", Label::new("Clickable Link").underline().into_any_element()),
+                            single_example("Inline Code", Label::new("fn main() {}").inline_code(cx).into_any_element()),
                         ],
                     ),
                     example_group_with_title(
diff --git a/crates/ui/src/components/label/label_like.rs b/crates/ui/src/components/label/label_like.rs
index d0a981ae1c..1fa6b14c83 100644
--- a/crates/ui/src/components/label/label_like.rs
+++ b/crates/ui/src/components/label/label_like.rs
@@ -64,6 +64,9 @@ pub trait LabelCommon {
 
     /// Sets the font to the buffer's
     fn buffer_font(self, cx: &App) -> Self;
+
+    /// Styles the label to look like inline code.
+    fn inline_code(self, cx: &App) -> Self;
 }
 
 /// A label-like element that can be used to create a custom label when
@@ -183,6 +186,16 @@ impl LabelCommon for LabelLike {
             .font(theme::ThemeSettings::get_global(cx).buffer_font.clone());
         self
     }
+
+    fn inline_code(mut self, cx: &App) -> Self {
+        self.base = self
+            .base
+            .font(theme::ThemeSettings::get_global(cx).buffer_font.clone())
+            .bg(cx.theme().colors().element_background)
+            .rounded_sm()
+            .px_0p5();
+        self
+    }
 }
 
 impl ParentElement for LabelLike {
@@ -248,7 +261,7 @@ impl Component for LabelLike {
         )
     }
 
-    fn preview(_window: &mut Window, _cx: &mut App) -> Option<AnyElement> {
+    fn preview(_window: &mut Window, cx: &mut App) -> Option<AnyElement> {
         Some(
             v_flex()
                 .gap_6()
@@ -269,6 +282,7 @@ impl Component for LabelLike {
                             single_example("Italic", LabelLike::new().italic().child("Italic text").into_any_element()),
                             single_example("Underline", LabelLike::new().underline().child("Underlined text").into_any_element()),
                             single_example("Strikethrough", LabelLike::new().strikethrough().child("Strikethrough text").into_any_element()),
+                            single_example("Inline Code", LabelLike::new().inline_code(cx).child("const value = 42;").into_any_element()),
                         ],
                     ),
                     example_group_with_title(