mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-16 15:11:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 12

WIP IconButton story

Browse source
This commit is contained in:
Nate Butler 2023-12-14 17:51:08 -05:00
parent 3cf003763e
commit 936c78be94
2 changed files with 163 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
crates/storybook2/src/stories/text.rs
View file

@ -1,5 +1,5 @@
use gpui::{ use gpui::{
div, green, red, Component, Div, HighlightStyle, InteractiveText, IntoElement, ParentElement, div, green, red, Component, HighlightStyle, InteractiveText, IntoElement, ParentElement,
Render, Styled, StyledText, View, VisualContext, WindowContext, Render, Styled, StyledText, View, VisualContext, WindowContext,
}; };
use indoc::indoc; use indoc::indoc;

188
crates/ui2/src/components/stories/icon_button.rs
View file

@ -1,5 +1,5 @@
use gpui::{Div, Render}; use gpui::{Component, Div, Render};
use story::Story; use story::{Story, StoryContainer, StoryItem, StorySection};
use crate::{prelude::*, Tooltip}; use crate::{prelude::*, Tooltip};
use crate::{Icon, IconButton}; use crate::{Icon, IconButton};
@ -7,57 +7,167 @@ use crate::{Icon, IconButton};
pub struct IconButtonStory; pub struct IconButtonStory;
impl Render for IconButtonStory { impl Render for IconButtonStory {
type Element = Div; type Element = Component<StoryContainer>;
fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element { fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::Element {
Story::container() let default_button = StoryItem::new(
.child(Story::title_for::<IconButton>()) "Default",
.child(Story::label("Default")) IconButton::new("default_icon_button", Icon::Hash),
.child(div().w_8().child(IconButton::new("icon_a", Icon::Hash)))
.child(Story::label("Selected"))
.child(
div()
.w_8()
.child(IconButton::new("icon_a", Icon::Hash).selected(true)),
) )
.child(Story::label("Selected with `selected_icon`")) .description("Displays an icon button.")
.child( .usage(
div().w_8().child( r#"
IconButton::new("icon_a", Icon::AudioOn) IconButton::new("default_icon_button", Icon::Hash)
"#,
);
let selected_button = StoryItem::new(
"Selected",
IconButton::new("selected_icon_button", Icon::Hash).selected(true),
)
.description("Displays an icon button that is selected.")
.usage(
r#"
IconButton::new("selected_icon_button", Icon::Hash).selected(true)
"#,
);
let selected_with_selected_icon = StoryItem::new(
"Selected with `selected_icon`",
IconButton::new("selected_with_selected_icon_button", Icon::AudioOn)
.selected(true) .selected(true)
.selected_icon(Icon::AudioOff), .selected_icon(Icon::AudioOff),
),
) )
.child(Story::label("Disabled")) .description(
.child( "Displays an icon button that is selected and shows a different icon when selected.",
div()
.w_8()
.child(IconButton::new("icon_a", Icon::Hash).disabled(true)),
) )
.child(Story::label("With `on_click`")) .usage(
.child( r#"
div() IconButton::new("selected_with_selected_icon_button", Icon::AudioOn)
.w_8() .selected(true)
.child( .selected_icon(Icon::AudioOff)
IconButton::new("with_on_click", Icon::Ai).on_click(|_event, _cx| { "#,
);
let disabled_button = StoryItem::new(
"Disabled",
IconButton::new("disabled_icon_button", Icon::Hash).disabled(true),
)
.description("Displays an icon button that is disabled.")
.usage(
r#"
IconButton::new("disabled_icon_button", Icon::Hash).disabled(true)
"#,
);
let with_on_click_button = StoryItem::new(
"With `on_click`",
IconButton::new("with_on_click_button", Icon::Ai).on_click(|_event, _cx| {
println!("Clicked!"); println!("Clicked!");
}), }),
),
) )
.child(Story::label("With `tooltip`")) .description("Displays an icon button which triggers an event on click.")
.child( .usage(
div().w_8().child( r#"
IconButton::new("with_tooltip", Icon::MessageBubbles) IconButton::new("with_on_click_button", Icon::Ai).on_click(|_event, _cx| {
println!("Clicked!");
})
"#,
);
let with_tooltip_button = StoryItem::new(
"With `tooltip`",
IconButton::new("with_tooltip_button", Icon::MessageBubbles)
.tooltip(|cx| Tooltip::text("Open messages", cx)), .tooltip(|cx| Tooltip::text("Open messages", cx)),
),
) )
.child(Story::label("Selected with `tooltip`")) .description("Displays an icon button that has a tooltip when hovered.")
.child( .usage(
div().w_8().child( r#"
IconButton::new("selected_with_tooltip", Icon::InlayHint) IconButton::new("with_tooltip_button", Icon::MessageBubbles)
.tooltip(|cx| Tooltip::text("Open messages", cx))
"#,
);
let selected_with_tooltip_button = StoryItem::new(
"Selected with `tooltip`",
IconButton::new("selected_with_tooltip_button", Icon::InlayHint)
.selected(true) .selected(true)
.tooltip(|cx| Tooltip::text("Toggle inlay hints", cx)), .tooltip(|cx| Tooltip::text("Toggle inlay hints", cx)),
),
) )
.description("Displays a selected icon button with tooltip.")
.usage(
r#"
IconButton::new("selected_with_tooltip_button", Icon::InlayHint)
.selected(true)
.tooltip(|cx| Tooltip::text("Toggle inlay hints", cx))
"#,
);
let buttons = vec![
default_button,
selected_button,
selected_with_selected_icon,
disabled_button,
with_on_click_button,
with_tooltip_button,
selected_with_tooltip_button,
];
StoryContainer::new(
"Icon Button",
"crates/ui2/src/components/stories/icon_button.rs",
)
.children(vec![StorySection::new().children(buttons)])
.into_element()
// Story::container()
// .child(Story::title_for::<IconButton>())
// .child(Story::label("Default"))
// .child(div().w_8().child(IconButton::new("icon_a", Icon::Hash)))
// .child(Story::label("Selected"))
// .child(
// div()
// .w_8()
// .child(IconButton::new("icon_a", Icon::Hash).selected(true)),
// )
// .child(Story::label("Selected with `selected_icon`"))
// .child(
// div().w_8().child(
// IconButton::new("icon_a", Icon::AudioOn)
// .selected(true)
// .selected_icon(Icon::AudioOff),
// ),
// )
// .child(Story::label("Disabled"))
// .child(
// div()
// .w_8()
// .child(IconButton::new("icon_a", Icon::Hash).disabled(true)),
// )
// .child(Story::label("With `on_click`"))
// .child(
// div()
// .w_8()
// .child(
// IconButton::new("with_on_click", Icon::Ai).on_click(|_event, _cx| {
// println!("Clicked!");
// }),
// ),
// )
// .child(Story::label("With `tooltip`"))
// .child(
// div().w_8().child(
// IconButton::new("with_tooltip", Icon::MessageBubbles)
// .tooltip(|cx| Tooltip::text("Open messages", cx)),
// ),
// )
// .child(Story::label("Selected with `tooltip`"))
// .child(
// div().w_8().child(
// IconButton::new("selected_with_tooltip", Icon::InlayHint)
// .selected(true)
// .tooltip(|cx| Tooltip::text("Toggle inlay hints", cx)),
// ),
// )
} }
} }