Skip to content

Commit b734408

Browse files
iamnbutleriamnbutler
committed
Continue on component preview
1 parent 58dd0f0 commit b734408

40 files changed

+387
-165
lines changed

‎crates/component_preview/src/component_preview.rs

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,7 +106,6 @@ impl ComponentPreview {
106106
.py_2()
107107
.child(
108108
v_flex()
109-
.bg(cx.theme().colors().text.opacity(0.05))
110109
.border_1()
111110
.border_color(cx.theme().colors().border)
112111
.rounded_md()

‎crates/ui/src/components/avatar.rs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
use crate::{prelude::*, Indicator};
1+
use crate::prelude::*;
22

33
use gpui::{img, AnyElement, Hsla, ImageSource, Img, IntoElement, Styled};
44

‎crates/ui/src/components/button/button.rs

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
#![allow(missing_docs)]
21
use component::{example_group_with_title, single_example, ComponentPreview};
32
use gpui::{AnyElement, AnyView, DefiniteLength};
43
use ui_macros::IntoComponent;
@@ -81,6 +80,7 @@ use super::button_icon::ButtonIcon;
8180
/// ```
8281
///
8382
#[derive(IntoElement, IntoComponent)]
83+
#[component(scope = "input")]
8484
pub struct Button {
8585
base: ButtonLike,
8686
label: SharedString,
@@ -463,7 +463,7 @@ impl ComponentPreview for Button {
463463
.gap_6()
464464
.children(vec![
465465
example_group_with_title(
466-
"Styles",
466+
"Button Styles",
467467
vec![
468468
single_example(
469469
"Default",
@@ -481,6 +481,12 @@ impl ComponentPreview for Button {
481481
.style(ButtonStyle::Subtle)
482482
.into_any_element(),
483483
),
484+
single_example(
485+
"Tinted",
486+
Button::new("tinted_accent_style", "Accent")
487+
.style(ButtonStyle::Tinted(TintColor::Accent))
488+
.into_any_element(),
489+
),
484490
single_example(
485491
"Transparent",
486492
Button::new("transparent", "Transparent")
@@ -490,7 +496,7 @@ impl ComponentPreview for Button {
490496
],
491497
),
492498
example_group_with_title(
493-
"Tinted",
499+
"Tint Styles",
494500
vec![
495501
single_example(
496502
"Accent",
@@ -519,7 +525,7 @@ impl ComponentPreview for Button {
519525
],
520526
),
521527
example_group_with_title(
522-
"States",
528+
"Special States",
523529
vec![
524530
single_example(
525531
"Default",
@@ -540,7 +546,7 @@ impl ComponentPreview for Button {
540546
],
541547
),
542548
example_group_with_title(
543-
"With Icons",
549+
"Buttons with Icons",
544550
vec![
545551
single_example(
546552
"Icon Start",
@@ -563,16 +569,6 @@ impl ComponentPreview for Button {
563569
.icon_color(Color::Accent)
564570
.into_any_element(),
565571
),
566-
single_example(
567-
"Tinted Icons",
568-
Button::new("tinted_icons", "Error")
569-
.style(ButtonStyle::Tinted(TintColor::Error))
570-
.color(Color::Error)
571-
.icon_color(Color::Error)
572-
.icon(IconName::Trash)
573-
.icon_position(IconPosition::Start)
574-
.into_any_element(),
575-
),
576572
],
577573
),
578574
])

‎crates/ui/src/components/button/button_icon.rs

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
#![allow(missing_docs)]
21
use crate::{prelude::*, Icon, IconName, IconSize, IconWithIndicator, Indicator};
32
use gpui::Hsla;
43

‎crates/ui/src/components/button/button_like.rs

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
#![allow(missing_docs)]
21
use gpui::{relative, CursorStyle, DefiniteLength, MouseButton};
32
use gpui::{transparent_black, AnyElement, AnyView, ClickEvent, Hsla, Rems};
43
use smallvec::SmallVec;

‎crates/ui/src/components/button/icon_button.rs

Lines changed: 160 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
#![allow(missing_docs)]
21
use gpui::{AnyView, DefiniteLength, Hsla};
32

43
use super::button_like::{ButtonCommon, ButtonLike, ButtonSize, ButtonStyle};
5-
use crate::{prelude::*, ElevationIndex, Indicator, SelectableButton};
4+
use crate::{prelude::*, ElevationIndex, Indicator, SelectableButton, TintColor};
65
use crate::{IconName, IconSize};
76

87
use super::button_icon::ButtonIcon;
@@ -14,7 +13,8 @@ pub enum IconButtonShape {
1413
Wide,
1514
}
1615

17-
#[derive(IntoElement)]
16+
#[derive(IntoElement, IntoComponent)]
17+
#[component(scope = "input")]
1818
pub struct IconButton {
1919
base: ButtonLike,
2020
shape: IconButtonShape,
@@ -200,3 +200,160 @@ impl RenderOnce for IconButton {
200200
)
201201
}
202202
}
203+
204+
impl ComponentPreview for IconButton {
205+
fn preview(_window: &mut Window, _cx: &App) -> AnyElement {
206+
v_flex()
207+
.gap_6()
208+
.children(vec![
209+
example_group_with_title(
210+
"Icon Button Styles",
211+
vec![
212+
single_example(
213+
"Default",
214+
IconButton::new("default", IconName::Check)
215+
.layer(ElevationIndex::Background)
216+
.into_any_element(),
217+
),
218+
single_example(
219+
"Filled",
220+
IconButton::new("filled", IconName::Check)
221+
.layer(ElevationIndex::Background)
222+
.style(ButtonStyle::Filled)
223+
.into_any_element(),
224+
),
225+
single_example(
226+
"Subtle",
227+
IconButton::new("subtle", IconName::Check)
228+
.layer(ElevationIndex::Background)
229+
.style(ButtonStyle::Subtle)
230+
.into_any_element(),
231+
),
232+
single_example(
233+
"Tinted",
234+
IconButton::new("tinted", IconName::Check)
235+
.layer(ElevationIndex::Background)
236+
.style(ButtonStyle::Tinted(TintColor::Accent))
237+
.into_any_element(),
238+
),
239+
single_example(
240+
"Transparent",
241+
IconButton::new("transparent", IconName::Check)
242+
.layer(ElevationIndex::Background)
243+
.style(ButtonStyle::Transparent)
244+
.into_any_element(),
245+
),
246+
],
247+
),
248+
example_group_with_title(
249+
"Icon Button Shapes",
250+
vec![
251+
single_example(
252+
"Square",
253+
IconButton::new("square", IconName::Check)
254+
.shape(IconButtonShape::Square)
255+
.style(ButtonStyle::Filled)
256+
.layer(ElevationIndex::Background)
257+
.into_any_element(),
258+
),
259+
single_example(
260+
"Wide",
261+
IconButton::new("wide", IconName::Check)
262+
.shape(IconButtonShape::Wide)
263+
.style(ButtonStyle::Filled)
264+
.layer(ElevationIndex::Background)
265+
.into_any_element(),
266+
),
267+
],
268+
),
269+
example_group_with_title(
270+
"Icon Button Sizes",
271+
vec![
272+
single_example(
273+
"Small",
274+
IconButton::new("small", IconName::Check)
275+
.icon_size(IconSize::XSmall)
276+
.style(ButtonStyle::Filled)
277+
.layer(ElevationIndex::Background)
278+
.into_any_element(),
279+
),
280+
single_example(
281+
"Small",
282+
IconButton::new("small", IconName::Check)
283+
.icon_size(IconSize::Small)
284+
.style(ButtonStyle::Filled)
285+
.layer(ElevationIndex::Background)
286+
.into_any_element(),
287+
),
288+
single_example(
289+
"Medium",
290+
IconButton::new("medium", IconName::Check)
291+
.icon_size(IconSize::Medium)
292+
.style(ButtonStyle::Filled)
293+
.layer(ElevationIndex::Background)
294+
.into_any_element(),
295+
),
296+
single_example(
297+
"XLarge",
298+
IconButton::new("xlarge", IconName::Check)
299+
.icon_size(IconSize::XLarge)
300+
.style(ButtonStyle::Filled)
301+
.layer(ElevationIndex::Background)
302+
.into_any_element(),
303+
),
304+
],
305+
),
306+
example_group_with_title(
307+
"Special States",
308+
vec![
309+
single_example(
310+
"Disabled",
311+
IconButton::new("disabled", IconName::Check)
312+
.disabled(true)
313+
.style(ButtonStyle::Filled)
314+
.layer(ElevationIndex::Background)
315+
.into_any_element(),
316+
),
317+
single_example(
318+
"Selected",
319+
IconButton::new("selected", IconName::Check)
320+
.toggle_state(true)
321+
.style(ButtonStyle::Filled)
322+
.layer(ElevationIndex::Background)
323+
.into_any_element(),
324+
),
325+
single_example(
326+
"With Indicator",
327+
IconButton::new("indicator", IconName::Check)
328+
.indicator(Indicator::dot().color(Color::Success))
329+
.style(ButtonStyle::Filled)
330+
.layer(ElevationIndex::Background)
331+
.into_any_element(),
332+
),
333+
],
334+
),
335+
example_group_with_title(
336+
"Custom Colors",
337+
vec![
338+
single_example(
339+
"Custom Icon Color",
340+
IconButton::new("custom_color", IconName::Check)
341+
.icon_color(Color::Accent)
342+
.style(ButtonStyle::Filled)
343+
.layer(ElevationIndex::Background)
344+
.into_any_element(),
345+
),
346+
single_example(
347+
"With Alpha",
348+
IconButton::new("alpha", IconName::Check)
349+
.alpha(0.5)
350+
.style(ButtonStyle::Filled)
351+
.layer(ElevationIndex::Background)
352+
.into_any_element(),
353+
),
354+
],
355+
),
356+
])
357+
.into_any_element()
358+
}
359+
}

0 commit comments

Comments
 (0)