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