1use crate::prelude::*;
2use gpui::{AnyElement, AnyView, Hsla, IntoElement, ParentElement, Styled};
3
4/// Chips provide a container for an informative label.
5///
6/// # Usage Example
7///
8/// ```
9/// use ui::Chip;
10///
11/// let chip = Chip::new("This Chip");
12/// ```
13#[derive(IntoElement, RegisterComponent)]
14pub struct Chip {
15 label: SharedString,
16 label_color: Color,
17 label_size: LabelSize,
18 bg_color: Option<Hsla>,
19 border_color: Option<Hsla>,
20 height: Option<Pixels>,
21 tooltip: Option<Box<dyn Fn(&mut Window, &mut App) -> AnyView + 'static>>,
22}
23
24impl Chip {
25 /// Creates a new `Chip` component with the specified label.
26 pub fn new(label: impl Into<SharedString>) -> Self {
27 Self {
28 label: label.into(),
29 label_color: Color::Default,
30 label_size: LabelSize::XSmall,
31 bg_color: None,
32 border_color: None,
33 height: None,
34 tooltip: None,
35 }
36 }
37
38 /// Sets the color of the label.
39 pub fn label_color(mut self, color: Color) -> Self {
40 self.label_color = color;
41 self
42 }
43
44 /// Sets the size of the label.
45 pub fn label_size(mut self, size: LabelSize) -> Self {
46 self.label_size = size;
47 self
48 }
49
50 /// Sets a custom background color for the callout content.
51 pub fn bg_color(mut self, color: Hsla) -> Self {
52 self.bg_color = Some(color);
53 self
54 }
55
56 /// Sets a custom border color for the chip.
57 pub fn border_color(mut self, color: Hsla) -> Self {
58 self.border_color = Some(color);
59 self
60 }
61
62 /// Sets a custom height for the chip.
63 pub fn height(mut self, height: Pixels) -> Self {
64 self.height = Some(height);
65 self
66 }
67
68 pub fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
69 self.tooltip = Some(Box::new(tooltip));
70 self
71 }
72}
73
74impl RenderOnce for Chip {
75 fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
76 let bg_color = self
77 .bg_color
78 .unwrap_or(cx.theme().colors().element_background);
79
80 let border_color = self.border_color.unwrap_or(cx.theme().colors().border);
81
82 h_flex()
83 .when_some(self.height, |this, h| this.h(h))
84 .flex_none()
85 .px_1()
86 .border_1()
87 .rounded_sm()
88 .border_color(border_color)
89 .bg(bg_color)
90 .overflow_hidden()
91 .child(
92 Label::new(self.label.clone())
93 .size(self.label_size)
94 .color(self.label_color)
95 .buffer_font(cx)
96 .truncate(),
97 )
98 .id(self.label.clone())
99 .when_some(self.tooltip, |this, tooltip| this.tooltip(tooltip))
100 }
101}
102
103impl Component for Chip {
104 fn scope() -> ComponentScope {
105 ComponentScope::DataDisplay
106 }
107
108 fn preview(_window: &mut Window, cx: &mut App) -> Option<AnyElement> {
109 let chip_examples = vec![
110 single_example("Default", Chip::new("Chip Example").into_any_element()),
111 single_example(
112 "Customized Label Color",
113 Chip::new("Chip Example")
114 .label_color(Color::Accent)
115 .into_any_element(),
116 ),
117 single_example(
118 "Customized Label Size",
119 Chip::new("Chip Example")
120 .label_size(LabelSize::Large)
121 .label_color(Color::Accent)
122 .into_any_element(),
123 ),
124 single_example(
125 "Customized Background Color",
126 Chip::new("Chip Example")
127 .bg_color(cx.theme().colors().text_accent.opacity(0.1))
128 .into_any_element(),
129 ),
130 ];
131
132 Some(example_group(chip_examples).vertical().into_any_element())
133 }
134}