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 icon: Option<IconName>,
19 icon_color: Color,
20 bg_color: Option<Hsla>,
21 border_color: Option<Hsla>,
22 height: Option<Pixels>,
23 truncate: bool,
24 tooltip: Option<Box<dyn Fn(&mut Window, &mut App) -> AnyView + 'static>>,
25}
26
27impl Chip {
28 /// Creates a new `Chip` component with the specified label.
29 pub fn new(label: impl Into<SharedString>) -> Self {
30 Self {
31 label: label.into(),
32 label_color: Color::Default,
33 label_size: LabelSize::XSmall,
34 icon: None,
35 icon_color: Color::Default,
36 bg_color: None,
37 border_color: None,
38 height: None,
39 truncate: false,
40 tooltip: None,
41 }
42 }
43
44 /// Sets the color of the label.
45 pub fn label_color(mut self, color: Color) -> Self {
46 self.label_color = color;
47 self
48 }
49
50 /// Sets the size of the label.
51 pub fn label_size(mut self, size: LabelSize) -> Self {
52 self.label_size = size;
53 self
54 }
55
56 /// Sets an icon to display before the label.
57 pub fn icon(mut self, icon: IconName) -> Self {
58 self.icon = Some(icon);
59 self
60 }
61
62 /// Sets the color of the icon.
63 pub fn icon_color(mut self, color: Color) -> Self {
64 self.icon_color = color;
65 self
66 }
67
68 /// Sets a custom background color for the callout content.
69 pub fn bg_color(mut self, color: Hsla) -> Self {
70 self.bg_color = Some(color);
71 self
72 }
73
74 /// Sets a custom border color for the chip.
75 pub fn border_color(mut self, color: Hsla) -> Self {
76 self.border_color = Some(color);
77 self
78 }
79
80 /// Sets a custom height for the chip.
81 pub fn height(mut self, height: Pixels) -> Self {
82 self.height = Some(height);
83 self
84 }
85
86 /// Allows the chip to shrink and truncate its label when space is limited.
87 pub fn truncate(mut self) -> Self {
88 self.truncate = true;
89 self
90 }
91
92 pub fn tooltip(mut self, tooltip: impl Fn(&mut Window, &mut App) -> AnyView + 'static) -> Self {
93 self.tooltip = Some(Box::new(tooltip));
94 self
95 }
96}
97
98impl RenderOnce for Chip {
99 fn render(self, _: &mut Window, cx: &mut App) -> impl IntoElement {
100 let bg_color = self
101 .bg_color
102 .unwrap_or(cx.theme().colors().element_background);
103
104 let border_color = self.border_color.unwrap_or(cx.theme().colors().border);
105
106 h_flex()
107 .when_some(self.height, |this, h| this.h(h))
108 .when(self.truncate, |this| this.min_w_0())
109 .when(!self.truncate, |this| this.flex_none())
110 .gap_0p5()
111 .px_1()
112 .border_1()
113 .rounded_sm()
114 .border_color(border_color)
115 .bg(bg_color)
116 .overflow_hidden()
117 .when_some(self.icon, |this, icon| {
118 this.child(
119 Icon::new(icon)
120 .size(IconSize::XSmall)
121 .color(self.icon_color),
122 )
123 })
124 .child(
125 Label::new(self.label.clone())
126 .size(self.label_size)
127 .color(self.label_color)
128 .buffer_font(cx)
129 .truncate(),
130 )
131 .id(self.label.clone())
132 .when_some(self.tooltip, |this, tooltip| this.tooltip(tooltip))
133 }
134}
135
136impl Component for Chip {
137 fn scope() -> ComponentScope {
138 ComponentScope::DataDisplay
139 }
140
141 fn preview(_window: &mut Window, cx: &mut App) -> Option<AnyElement> {
142 let chip_examples = vec![
143 single_example("Default", Chip::new("Chip Example").into_any_element()),
144 single_example(
145 "Customized Label Color",
146 Chip::new("Chip Example")
147 .label_color(Color::Accent)
148 .into_any_element(),
149 ),
150 single_example(
151 "Customized Label Size",
152 Chip::new("Chip Example")
153 .label_size(LabelSize::Large)
154 .label_color(Color::Accent)
155 .into_any_element(),
156 ),
157 single_example(
158 "Customized Background Color",
159 Chip::new("Chip Example")
160 .bg_color(cx.theme().colors().text_accent.opacity(0.1))
161 .into_any_element(),
162 ),
163 ];
164
165 Some(example_group(chip_examples).vertical().into_any_element())
166 }
167}