mirror of
https://github.com/zed-industries/zed.git
synced 2025-01-16 07:11:18 +00:00
WIP IconButton story
This commit is contained in:
Nate Butler
parent
3cf003763e
commit
936c78be94
2 changed files with 163 additions and 53 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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)),
|
||||
)
|
||||
.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)),
|
||||
),
|
||||
)
|
||||
let default_button = StoryItem::new(
|
||||
"Default",
|
||||
IconButton::new("default_icon_button", Icon::Hash),
|
||||
)
|
||||
.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),
|
||||
)
|
||||
.description(
|
||||
"Displays an icon button that is selected and shows a different icon when selected.",
|
||||
)
|
||||
.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!");
|
||||
}),
|
||||
)
|
||||
.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)),
|
||||
)
|
||||
.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)),
|
||||
// ),
|
||||
// )
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue