button.rs
1use gpui::{rems, Div, Render};
2use strum::IntoEnumIterator;
3
4use crate::prelude::*;
5use crate::{h_stack, v_stack, Button, Icon, IconPosition, Label, Story};
6
7pub struct ButtonStory;
8
9impl Render for ButtonStory {
10 type Element = Div;
11
12 fn render(&mut self, cx: &mut ViewContext<Self>) -> Self::Element {
13 let states = InteractionState::iter();
14
15 Story::container(cx)
16 .child(Story::title_for::<Button>(cx))
17 .child(
18 div()
19 .flex()
20 .gap_8()
21 .child(
22 div()
23 .child(Story::label(cx, "Ghost (Default)"))
24 .child(h_stack().gap_2().children(states.clone().map(|state| {
25 v_stack()
26 .gap_1()
27 .child(Label::new(state.to_string()).color(Color::Muted))
28 .child(
29 Button::new("Label").variant(ButtonVariant::Ghost), // .state(state),
30 )
31 })))
32 .child(Story::label(cx, "Ghost – Left Icon"))
33 .child(h_stack().gap_2().children(states.clone().map(|state| {
34 v_stack()
35 .gap_1()
36 .child(Label::new(state.to_string()).color(Color::Muted))
37 .child(
38 Button::new("Label")
39 .variant(ButtonVariant::Ghost)
40 .icon(Icon::Plus)
41 .icon_position(IconPosition::Left), // .state(state),
42 )
43 })))
44 .child(Story::label(cx, "Ghost – Right Icon"))
45 .child(h_stack().gap_2().children(states.clone().map(|state| {
46 v_stack()
47 .gap_1()
48 .child(Label::new(state.to_string()).color(Color::Muted))
49 .child(
50 Button::new("Label")
51 .variant(ButtonVariant::Ghost)
52 .icon(Icon::Plus)
53 .icon_position(IconPosition::Right), // .state(state),
54 )
55 }))),
56 )
57 .child(
58 div()
59 .child(Story::label(cx, "Filled"))
60 .child(h_stack().gap_2().children(states.clone().map(|state| {
61 v_stack()
62 .gap_1()
63 .child(Label::new(state.to_string()).color(Color::Muted))
64 .child(
65 Button::new("Label").variant(ButtonVariant::Filled), // .state(state),
66 )
67 })))
68 .child(Story::label(cx, "Filled – Left Button"))
69 .child(h_stack().gap_2().children(states.clone().map(|state| {
70 v_stack()
71 .gap_1()
72 .child(Label::new(state.to_string()).color(Color::Muted))
73 .child(
74 Button::new("Label")
75 .variant(ButtonVariant::Filled)
76 .icon(Icon::Plus)
77 .icon_position(IconPosition::Left), // .state(state),
78 )
79 })))
80 .child(Story::label(cx, "Filled – Right Button"))
81 .child(h_stack().gap_2().children(states.clone().map(|state| {
82 v_stack()
83 .gap_1()
84 .child(Label::new(state.to_string()).color(Color::Muted))
85 .child(
86 Button::new("Label")
87 .variant(ButtonVariant::Filled)
88 .icon(Icon::Plus)
89 .icon_position(IconPosition::Right), // .state(state),
90 )
91 }))),
92 )
93 .child(
94 div()
95 .child(Story::label(cx, "Fixed With"))
96 .child(h_stack().gap_2().children(states.clone().map(|state| {
97 v_stack()
98 .gap_1()
99 .child(Label::new(state.to_string()).color(Color::Muted))
100 .child(
101 Button::new("Label")
102 .variant(ButtonVariant::Filled)
103 // .state(state)
104 .width(Some(rems(6.).into())),
105 )
106 })))
107 .child(Story::label(cx, "Fixed With – Left Icon"))
108 .child(h_stack().gap_2().children(states.clone().map(|state| {
109 v_stack()
110 .gap_1()
111 .child(Label::new(state.to_string()).color(Color::Muted))
112 .child(
113 Button::new("Label")
114 .variant(ButtonVariant::Filled)
115 // .state(state)
116 .icon(Icon::Plus)
117 .icon_position(IconPosition::Left)
118 .width(Some(rems(6.).into())),
119 )
120 })))
121 .child(Story::label(cx, "Fixed With – Right Icon"))
122 .child(h_stack().gap_2().children(states.clone().map(|state| {
123 v_stack()
124 .gap_1()
125 .child(Label::new(state.to_string()).color(Color::Muted))
126 .child(
127 Button::new("Label")
128 .variant(ButtonVariant::Filled)
129 // .state(state)
130 .icon(Icon::Plus)
131 .icon_position(IconPosition::Right)
132 .width(Some(rems(6.).into())),
133 )
134 }))),
135 ),
136 )
137 .child(Story::label(cx, "Button with `on_click`"))
138 .child(
139 Button::new("Label")
140 .variant(ButtonVariant::Ghost)
141 .on_click(|_, cx| println!("Button clicked.")),
142 )
143 }
144}