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