mirrors/zed
1
0
Fork 0
mirror of https://github.com/zed-industries/zed.git synced 2025-01-16 07:11:18 +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::{
div, green, red, Component, Div, HighlightStyle, InteractiveText, IntoElement, ParentElement,
div, green, red, Component, HighlightStyle, InteractiveText, IntoElement, ParentElement,
Render, Styled, StyledText, View, VisualContext, WindowContext,
};
use indoc::indoc;

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

@ -1,5 +1,5 @@
use gpui::{Div, Render};
use story::Story;
use gpui::{Component, Div, Render};
use story::{Story, StoryContainer, StoryItem, StorySection};
use crate::{prelude::*, Tooltip};
use crate::{Icon, IconButton};
@ -7,57 +7,167 @@ use crate::{Icon, IconButton};
pub struct IconButtonStory;
impl Render for IconButtonStory {
type Element = Div;
type Element = Component<StoryContainer>;
fn render(&mut self, _cx: &mut ViewContext<Self>) -> Self::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)),
let default_button = StoryItem::new(
"Default",
IconButton::new("default_icon_button", Icon::Hash),
)
.child(Story::label("Selected with `selected_icon`"))
.child(
div().w_8().child(
IconButton::new("icon_a", Icon::AudioOn)
.description("Displays an icon button.")
.usage(
r#"
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_icon(Icon::AudioOff),
),
)
.child(Story::label("Disabled"))
.child(
div()
.w_8()
.child(IconButton::new("icon_a", Icon::Hash).disabled(true)),
.description(
"Displays an icon button that is selected and shows a different icon when selected.",
)
.child(Story::label("With `on_click`"))
.child(
div()
.w_8()
.child(
IconButton::new("with_on_click", Icon::Ai).on_click(|_event, _cx| {
.usage(
r#"
IconButton::new("selected_with_selected_icon_button", Icon::AudioOn)
.selected(true)
.selected_icon(Icon::AudioOff)
"#,
);
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!");
}),
),
)
.child(Story::label("With `tooltip`"))
.child(
div().w_8().child(
IconButton::new("with_tooltip", Icon::MessageBubbles)
.description("Displays an icon button which triggers an event on click.")
.usage(
r#"
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)),
),
)
.child(Story::label("Selected with `tooltip`"))
.child(
div().w_8().child(
IconButton::new("selected_with_tooltip", Icon::InlayHint)
.description("Displays an icon button that has a tooltip when hovered.")
.usage(
r#"
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)
.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)),
// ),
// )
}
}