ui: Add `inline_code` method to label (#29306)

Danilo Leal created 8 months ago

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

Release Notes:

- N/A

Change summary

crates/agent/src/ui/animated_label.rs               |  5 ++++
crates/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(-)

Detailed changes

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 {

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(

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(

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(