dan/gpui-component
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(button): Remove track_focus (#282)

Browse source
This commit is contained in:
Floyd Wang 2024-09-27 14:39:48 +08:00 committed by GitHub
parent 2c1119a7bd
commit c5b4505560
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 157 additions and 181 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
crates/app/src/story_workspace.rs
View file

@ -310,7 +310,7 @@ impl Render for StoryWorkspace {
.gap_2() .gap_2()
.child(self.theme_color_picker.clone()) .child(self.theme_color_picker.clone())
.child( .child(
Button::new("theme-mode", cx) Button::new("theme-mode")
.map(|this| { .map(|this| {
if cx.theme().mode.is_dark() { if cx.theme().mode.is_dark() {
this.icon(IconName::Sun) this.icon(IconName::Sun)
@ -331,7 +331,7 @@ impl Render for StoryWorkspace {
) )
.child(self.locale_selector.clone()) .child(self.locale_selector.clone())
.child( .child(
Button::new("github", cx) Button::new("github")
.icon(IconName::GitHub) .icon(IconName::GitHub)
.small() .small()
.ghost() .ghost()
@ -343,7 +343,7 @@ impl Render for StoryWorkspace {
div() div()
.relative() .relative()
.child( .child(
Button::new("bell", cx) Button::new("bell")
.small() .small()
.ghost() .ghost()
.compact() .compact()
@ -403,7 +403,7 @@ impl Render for LocaleSelector {
.track_focus(&focus_handle) .track_focus(&focus_handle)
.on_action(cx.listener(Self::on_select_locale)) .on_action(cx.listener(Self::on_select_locale))
.child( .child(
Button::new("btn", cx) Button::new("btn")
.small() .small()
.ghost() .ghost()
.icon(IconName::Globe) .icon(IconName::Globe)

92
crates/story/src/button_story.rs
View file

@ -133,7 +133,7 @@ impl Render for ButtonStory {
.child( .child(
section("Normal Button", cx) section("Normal Button", cx)
.child( .child(
Button::new("button-1", cx) Button::new("button-1")
.primary() .primary()
.label("Primary Button") .label("Primary Button")
.disabled(disabled) .disabled(disabled)
@ -143,7 +143,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-2", cx) Button::new("button-2")
.label("Secondary Button") .label("Secondary Button")
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
@ -152,7 +152,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-4", cx) Button::new("button-4")
.danger() .danger()
.label("Danger Button") .label("Danger Button")
.disabled(disabled) .disabled(disabled)
@ -162,7 +162,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-5", cx) Button::new("button-5")
.outline() .outline()
.label("Outline Button") .label("Outline Button")
.disabled(disabled) .disabled(disabled)
@ -172,7 +172,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-5-ghost", cx) Button::new("button-5-ghost")
.ghost() .ghost()
.label("Ghost Button") .label("Ghost Button")
.disabled(disabled) .disabled(disabled)
@ -182,7 +182,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-5-link", cx) Button::new("button-5-link")
.link() .link()
.label("Link Button") .label("Link Button")
.disabled(disabled) .disabled(disabled)
@ -192,7 +192,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-5-text", cx) Button::new("button-5-text")
.text() .text()
.label("Text Button") .label("Text Button")
.disabled(disabled) .disabled(disabled)
@ -202,7 +202,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-6-custom", cx) Button::new("button-6-custom")
.custom( .custom(
ButtonCustomStyle::new(cx) ButtonCustomStyle::new(cx)
.color(if cx.theme().mode.is_dark() { .color(if cx.theme().mode.is_dark() {
@ -242,7 +242,7 @@ impl Render for ButtonStory {
.child( .child(
section("Button with Icon", cx) section("Button with Icon", cx)
.child( .child(
Button::new("button-icon-1", cx) Button::new("button-icon-1")
.primary() .primary()
.label("Confirm") .label("Confirm")
.icon(IconName::Check) .icon(IconName::Check)
@ -253,7 +253,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-icon-2", cx) Button::new("button-icon-2")
.label("Abort") .label("Abort")
.icon(IconName::Close) .icon(IconName::Close)
.disabled(disabled) .disabled(disabled)
@ -263,7 +263,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-icon-3", cx) Button::new("button-icon-3")
.label("Maximize") .label("Maximize")
.icon(Icon::new(IconName::Maximize)) .icon(Icon::new(IconName::Maximize))
.disabled(disabled) .disabled(disabled)
@ -273,7 +273,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-icon-4", cx) Button::new("button-icon-4")
.primary() .primary()
.child( .child(
h_flex() h_flex()
@ -290,7 +290,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-icon-5-ghost", cx) Button::new("button-icon-5-ghost")
.ghost() .ghost()
.icon(IconName::Check) .icon(IconName::Check)
.label("Confirm") .label("Confirm")
@ -301,7 +301,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-icon-6-link", cx) Button::new("button-icon-6-link")
.link() .link()
.icon(IconName::Check) .icon(IconName::Check)
.label("Link") .label("Link")
@ -312,7 +312,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-icon-6-text", cx) Button::new("button-icon-6-text")
.text() .text()
.icon(IconName::Check) .icon(IconName::Check)
.label("Text Button") .label("Text Button")
@ -330,7 +330,7 @@ impl Render for ButtonStory {
.child( .child(
section("Small Size", cx) section("Small Size", cx)
.child( .child(
Button::new("button-6", cx) Button::new("button-6")
.label("Primary Button") .label("Primary Button")
.primary() .primary()
.small() .small()
@ -342,7 +342,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-7", cx) Button::new("button-7")
.label("Secondary Button") .label("Secondary Button")
.small() .small()
.disabled(disabled) .disabled(disabled)
@ -352,7 +352,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-8", cx) Button::new("button-8")
.label("Danger Button") .label("Danger Button")
.danger() .danger()
.small() .small()
@ -363,7 +363,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-8-outline", cx) Button::new("button-8-outline")
.label("Outline Button") .label("Outline Button")
.outline() .outline()
.small() .small()
@ -374,7 +374,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-8-ghost", cx) Button::new("button-8-ghost")
.label("Ghost Button") .label("Ghost Button")
.ghost() .ghost()
.small() .small()
@ -385,7 +385,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-8-link", cx) Button::new("button-8-link")
.label("Link Button") .label("Link Button")
.link() .link()
.small() .small()
@ -399,7 +399,7 @@ impl Render for ButtonStory {
.child( .child(
section("XSmall Size", cx) section("XSmall Size", cx)
.child( .child(
Button::new("button-xs-1", cx) Button::new("button-xs-1")
.label("Primary Button") .label("Primary Button")
.primary() .primary()
.xsmall() .xsmall()
@ -410,7 +410,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-xs-2", cx) Button::new("button-xs-2")
.label("Secondary Button") .label("Secondary Button")
.xsmall() .xsmall()
.loading(true) .loading(true)
@ -421,7 +421,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-xs-3", cx) Button::new("button-xs-3")
.label("Danger Button") .label("Danger Button")
.danger() .danger()
.xsmall() .xsmall()
@ -432,7 +432,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-xs-3-ghost", cx) Button::new("button-xs-3-ghost")
.label("Ghost Button") .label("Ghost Button")
.ghost() .ghost()
.xsmall() .xsmall()
@ -443,7 +443,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-xs-3-outline", cx) Button::new("button-xs-3-outline")
.label("Outline Button") .label("Outline Button")
.outline() .outline()
.xsmall() .xsmall()
@ -454,7 +454,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-xs-3-link", cx) Button::new("button-xs-3-link")
.label("Link Button") .label("Link Button")
.link() .link()
.xsmall() .xsmall()
@ -473,7 +473,7 @@ impl Render for ButtonStory {
.small() .small()
.disabled(disabled) .disabled(disabled)
.child( .child(
Button::new("button-one", cx) Button::new("button-one")
.label("One") .label("One")
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
@ -481,7 +481,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-two", cx) Button::new("button-two")
.label("Two") .label("Two")
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
@ -489,7 +489,7 @@ impl Render for ButtonStory {
.on_click(Self::on_click), .on_click(Self::on_click),
) )
.child( .child(
Button::new("button-three", cx) Button::new("button-three")
.label("Three") .label("Three")
.disabled(disabled) .disabled(disabled)
.selected(selected) .selected(selected)
@ -515,22 +515,22 @@ impl Render for ButtonStory {
.compact() .compact()
.multiple(toggle_multiple) .multiple(toggle_multiple)
.child( .child(
Button::new("disabled-toggle-button", cx) Button::new("disabled-toggle-button")
.label("Disabled") .label("Disabled")
.selected(disabled), .selected(disabled),
) )
.child( .child(
Button::new("loading-toggle-button", cx) Button::new("loading-toggle-button")
.label("Loading") .label("Loading")
.selected(loading), .selected(loading),
) )
.child( .child(
Button::new("selected-toggle-button", cx) Button::new("selected-toggle-button")
.label("Selected") .label("Selected")
.selected(selected), .selected(selected),
) )
.child( .child(
Button::new("compact-toggle-button", cx) Button::new("compact-toggle-button")
.label("Compact") .label("Compact")
.selected(compact), .selected(compact),
) )
@ -547,7 +547,7 @@ impl Render for ButtonStory {
.child( .child(
section("Icon Button", cx) section("Icon Button", cx)
.child( .child(
Button::new("icon-button-primary", cx) Button::new("icon-button-primary")
.icon(IconName::Search) .icon(IconName::Search)
.loading_icon(IconName::LoaderCircle) .loading_icon(IconName::LoaderCircle)
.primary() .primary()
@ -557,7 +557,7 @@ impl Render for ButtonStory {
.when(compact, |this| this.compact()), .when(compact, |this| this.compact()),
) )
.child( .child(
Button::new("icon-button-secondary", cx) Button::new("icon-button-secondary")
.icon(IconName::Info) .icon(IconName::Info)
.loading(true) .loading(true)
.disabled(disabled) .disabled(disabled)
@ -566,7 +566,7 @@ impl Render for ButtonStory {
.when(compact, |this| this.compact()), .when(compact, |this| this.compact()),
) )
.child( .child(
Button::new("icon-button-danger", cx) Button::new("icon-button-danger")
.icon(IconName::Close) .icon(IconName::Close)
.danger() .danger()
.disabled(disabled) .disabled(disabled)
@ -575,7 +575,7 @@ impl Render for ButtonStory {
.when(compact, |this| this.compact()), .when(compact, |this| this.compact()),
) )
.child( .child(
Button::new("icon-button-small-primary", cx) Button::new("icon-button-small-primary")
.icon(IconName::Search) .icon(IconName::Search)
.small() .small()
.primary() .primary()
@ -585,7 +585,7 @@ impl Render for ButtonStory {
.when(compact, |this| this.compact()), .when(compact, |this| this.compact()),
) )
.child( .child(
Button::new("icon-button-outline", cx) Button::new("icon-button-outline")
.icon(IconName::Search) .icon(IconName::Search)
.outline() .outline()
.disabled(disabled) .disabled(disabled)
@ -594,7 +594,7 @@ impl Render for ButtonStory {
.when(compact, |this| this.compact()), .when(compact, |this| this.compact()),
) )
.child( .child(
Button::new("icon-button-ghost", cx) Button::new("icon-button-ghost")
.icon(IconName::ArrowLeft) .icon(IconName::ArrowLeft)
.loading_icon(IconName::LoaderCircle) .loading_icon(IconName::LoaderCircle)
.ghost() .ghost()
@ -607,7 +607,7 @@ impl Render for ButtonStory {
.child( .child(
section("Icon Button", cx) section("Icon Button", cx)
.child( .child(
Button::new("icon-button-4", cx) Button::new("icon-button-4")
.icon(IconName::Info) .icon(IconName::Info)
.small() .small()
.disabled(disabled) .disabled(disabled)
@ -616,7 +616,7 @@ impl Render for ButtonStory {
.when(compact, |this| this.compact()), .when(compact, |this| this.compact()),
) )
.child( .child(
Button::new("icon-button-5", cx) Button::new("icon-button-5")
.icon(IconName::Close) .icon(IconName::Close)
.small() .small()
.danger() .danger()
@ -626,7 +626,7 @@ impl Render for ButtonStory {
.when(compact, |this| this.compact()), .when(compact, |this| this.compact()),
) )
.child( .child(
Button::new("icon-button-6", cx) Button::new("icon-button-6")
.icon(IconName::Search) .icon(IconName::Search)
.small() .small()
.primary() .primary()
@ -636,7 +636,7 @@ impl Render for ButtonStory {
.when(compact, |this| this.compact()), .when(compact, |this| this.compact()),
) )
.child( .child(
Button::new("icon-button-7", cx) Button::new("icon-button-7")
.icon(IconName::Info) .icon(IconName::Info)
.xsmall() .xsmall()
.disabled(disabled) .disabled(disabled)
@ -645,7 +645,7 @@ impl Render for ButtonStory {
.when(compact, |this| this.compact()), .when(compact, |this| this.compact()),
) )
.child( .child(
Button::new("icon-button-8", cx) Button::new("icon-button-8")
.icon(IconName::Close) .icon(IconName::Close)
.xsmall() .xsmall()
.danger() .danger()
@ -655,7 +655,7 @@ impl Render for ButtonStory {
.when(compact, |this| this.compact()), .when(compact, |this| this.compact()),
) )
.child( .child(
Button::new("icon-button-9", cx) Button::new("icon-button-9")
.icon(IconName::Heart) .icon(IconName::Heart)
.size(px(24.)) .size(px(24.))
.ghost() .ghost()

4
crates/story/src/icon_story.rs
View file

@ -61,7 +61,7 @@ impl Render for IconStory {
) )
.child(Icon::new(IconName::Maximize).size(px(55.))) .child(Icon::new(IconName::Maximize).size(px(55.)))
.child( .child(
Button::new("like1", cx) Button::new("like1")
.icon( .icon(
Icon::new(IconName::Heart) Icon::new(IconName::Heart)
.text_color(ui::gray_500()) .text_color(ui::gray_500())
@ -70,7 +70,7 @@ impl Render for IconStory {
.style(ButtonStyle::Ghost), .style(ButtonStyle::Ghost),
) )
.child( .child(
Button::new("like2", cx) Button::new("like2")
.icon( .icon(
Icon::new(IconName::HeartOff) Icon::new(IconName::HeartOff)
.text_color(ui::red_500()) .text_color(ui::red_500())

4
crates/story/src/input_story.rs
View file

@ -301,14 +301,14 @@ impl Render for InputStory {
.w_full() .w_full()
.gap_3() .gap_3()
.child( .child(
Button::new("btn-submit", cx) Button::new("btn-submit")
.w_full() .w_full()
.style(ui::button::ButtonStyle::Primary) .style(ui::button::ButtonStyle::Primary)
.label("Submit") .label("Submit")
.on_click(cx.listener(|_, _, cx| cx.dispatch_action(Box::new(Tab)))), .on_click(cx.listener(|_, _, cx| cx.dispatch_action(Box::new(Tab)))),
) )
.child( .child(
Button::new("btn-cancel", cx) Button::new("btn-cancel")
.w_full() .w_full()
.label("Cancel") .label("Cancel")
.into_element(), .into_element(),

62
crates/story/src/modal_story.rs
View file

@ -79,8 +79,8 @@ impl ListDelegate for ListItemDeletegate {
.justify_between() .justify_between()
.child(item.to_string()), .child(item.to_string()),
) )
.suffix(|cx| { .suffix(|_| {
Button::new("like", cx) Button::new("like")
.icon(IconName::Heart) .icon(IconName::Heart)
.style(ButtonStyle::Ghost) .style(ButtonStyle::Ghost)
.size(px(18.)) .size(px(18.))
@ -311,15 +311,12 @@ impl ModalStory {
h_flex() h_flex()
.gap_6() .gap_6()
.items_center() .items_center()
.child( .child(Button::new("confirm").primary().label("Confirm").on_click(
Button::new("confirm", cx) |_, cx| {
.primary()
.label("Confirm")
.on_click(|_, cx| {
cx.close_drawer(); cx.close_drawer();
}), },
) ))
.child(Button::new("cancel", cx).label("Cancel").on_click(|_, cx| { .child(Button::new("cancel").label("Cancel").on_click(|_, cx| {
cx.close_drawer(); cx.close_drawer();
})), })),
) )
@ -340,7 +337,7 @@ impl ModalStory {
let dropdown = self.dropdown.clone(); let dropdown = self.dropdown.clone();
let view = cx.view().clone(); let view = cx.view().clone();
cx.open_modal(move |modal, cx| { cx.open_modal(move |modal, _| {
modal modal
.title("Form Modal") .title("Form Modal")
.overlay(overlay) .overlay(overlay)
@ -359,11 +356,7 @@ impl ModalStory {
h_flex() h_flex()
.gap_6() .gap_6()
.items_center() .items_center()
.child( .child(Button::new("confirm").primary().label("Confirm").on_click({
Button::new("confirm", cx)
.primary()
.label("Confirm")
.on_click({
let view = view.clone(); let view = view.clone();
let input1 = input1.clone(); let input1 = input1.clone();
let date_picker = date_picker.clone(); let date_picker = date_picker.clone();
@ -381,22 +374,19 @@ impl ModalStory {
) )
}); });
} }
}), }))
) .child(Button::new("new-modal").label("Open Other Modal").on_click(
.child( move |_, cx| {
Button::new("new-modal", cx)
.label("Open Other Modal")
.on_click(move |_, cx| {
cx.open_modal(move |modal, _| { cx.open_modal(move |modal, _| {
modal modal
.title("Other Modal") .title("Other Modal")
.child("This is another modal.") .child("This is another modal.")
.min_h(px(300.)) .min_h(px(300.))
}); });
}), },
) ))
.child( .child(
Button::new("cancel", cx) Button::new("cancel")
.label("Cancel") .label("Cancel")
.on_click(move |_, cx| { .on_click(move |_, cx| {
cx.close_modal(); cx.close_modal();
@ -467,7 +457,7 @@ impl Render for ModalStory {
.child("Test Focus Back") .child("Test Focus Back")
.child(self.input2.clone()) .child(self.input2.clone())
.child( .child(
Button::new("test-action", cx) Button::new("test-action")
.label("Test Dispatch Action") .label("Test Dispatch Action")
.on_click(|_, cx| { .on_click(|_, cx| {
cx.dispatch_action(Box::new(TestAction)); cx.dispatch_action(Box::new(TestAction));
@ -479,28 +469,28 @@ impl Render for ModalStory {
.items_start() .items_start()
.gap_3() .gap_3()
.child( .child(
Button::new("show-drawer-left", cx) Button::new("show-drawer-left")
.label("Left Drawer...") .label("Left Drawer...")
.on_click(cx.listener(|this, _, cx| { .on_click(cx.listener(|this, _, cx| {
this.open_drawer_at(Placement::Left, cx) this.open_drawer_at(Placement::Left, cx)
})), })),
) )
.child( .child(
Button::new("show-drawer-top", cx) Button::new("show-drawer-top")
.label("Top Drawer...") .label("Top Drawer...")
.on_click(cx.listener(|this, _, cx| { .on_click(cx.listener(|this, _, cx| {
this.open_drawer_at(Placement::Top, cx) this.open_drawer_at(Placement::Top, cx)
})), })),
) )
.child( .child(
Button::new("show-drawer", cx) Button::new("show-drawer")
.label("Right Drawer...") .label("Right Drawer...")
.on_click(cx.listener(|this, _, cx| { .on_click(cx.listener(|this, _, cx| {
this.open_drawer_at(Placement::Right, cx) this.open_drawer_at(Placement::Right, cx)
})), })),
) )
.child( .child(
Button::new("show-drawer", cx) Button::new("show-drawer")
.label("Bottom Drawer...") .label("Bottom Drawer...")
.on_click(cx.listener(|this, _, cx| { .on_click(cx.listener(|this, _, cx| {
this.open_drawer_at(Placement::Bottom, cx) this.open_drawer_at(Placement::Bottom, cx)
@ -517,7 +507,7 @@ impl Render for ModalStory {
) )
}) })
.child( .child(
Button::new("show-modal", cx) Button::new("show-modal")
.label("Open Modal...") .label("Open Modal...")
.on_click(cx.listener(|this, _, cx| this.show_modal(cx))), .on_click(cx.listener(|this, _, cx| this.show_modal(cx))),
) )
@ -525,7 +515,7 @@ impl Render for ModalStory {
h_flex() h_flex()
.gap_3() .gap_3()
.child( .child(
Button::new("show-notify-info", cx) Button::new("show-notify-info")
.label("Info Notify...") .label("Info Notify...")
.on_click(cx.listener(|_, _, cx| { .on_click(cx.listener(|_, _, cx| {
cx.push_notification( cx.push_notification(
@ -534,7 +524,7 @@ impl Render for ModalStory {
})), })),
) )
.child( .child(
Button::new("show-notify-error", cx) Button::new("show-notify-error")
.label("Error Notify...") .label("Error Notify...")
.on_click(cx.listener(|_, _, cx| { .on_click(cx.listener(|_, _, cx| {
cx.push_notification(( cx.push_notification((
@ -544,7 +534,7 @@ impl Render for ModalStory {
})), })),
) )
.child( .child(
Button::new("show-notify-success", cx) Button::new("show-notify-success")
.label("Success Notify...") .label("Success Notify...")
.on_click(cx.listener(|_, _, cx| { .on_click(cx.listener(|_, _, cx| {
cx.push_notification(( cx.push_notification((
@ -554,7 +544,7 @@ impl Render for ModalStory {
})), })),
) )
.child( .child(
Button::new("show-notify-warning", cx) Button::new("show-notify-warning")
.label("Warning Notify...") .label("Warning Notify...")
.on_click(cx.listener(|_, _, cx| { .on_click(cx.listener(|_, _, cx| {
struct WarningNotification; struct WarningNotification;
@ -564,7 +554,7 @@ impl Render for ModalStory {
})), })),
) )
.child( .child(
Button::new("show-notify-warning", cx) Button::new("show-notify-warning")
.label("Notification with Title") .label("Notification with Title")
.on_click(cx.listener(|_, _, cx| { .on_click(cx.listener(|_, _, cx| {
struct TestNotification; struct TestNotification;

30
crates/story/src/popup_story.rs
View file

@ -64,7 +64,7 @@ impl Render for Form {
.child("This is a form container.") .child("This is a form container.")
.child(self.input1.clone()) .child(self.input1.clone())
.child( .child(
Button::new("submit", cx) Button::new("submit")
.label("Submit") .label("Submit")
.primary() .primary()
.on_click(cx.listener(|_, _, cx| cx.emit(DismissEvent))), .on_click(cx.listener(|_, _, cx| cx.emit(DismissEvent))),
@ -200,17 +200,17 @@ impl Render for PopupStory {
.child( .child(
v_flex().gap_4().child( v_flex().gap_4().child(
Popover::new("info-top-left") Popover::new("info-top-left")
.trigger(Button::new("info-top-left", cx).label("Top Left")) .trigger(Button::new("info-top-left").label("Top Left"))
.content(|cx| { .content(|cx| {
cx.new_view(|cx| { cx.new_view(|cx| {
PopoverContent::new(cx, |cx| { PopoverContent::new(cx, |_| {
v_flex() v_flex()
.gap_4() .gap_4()
.child("Hello, this is a Popover.") .child("Hello, this is a Popover.")
.w(px(400.)) .w(px(400.))
.child(Divider::horizontal()) .child(Divider::horizontal())
.child( .child(
Button::new("info1", cx) Button::new("info1")
.label("Yes") .label("Yes")
.w(px(80.)) .w(px(80.))
.small(), .small(),
@ -225,17 +225,17 @@ impl Render for PopupStory {
.child( .child(
Popover::new("info-top-right") Popover::new("info-top-right")
.anchor(AnchorCorner::TopRight) .anchor(AnchorCorner::TopRight)
.trigger(Button::new("info-top-right", cx).label("Top Right")) .trigger(Button::new("info-top-right").label("Top Right"))
.content(|cx| { .content(|cx| {
cx.new_view(|cx| { cx.new_view(|cx| {
PopoverContent::new(cx, |cx| { PopoverContent::new(cx, |_| {
v_flex() v_flex()
.gap_4() .gap_4()
.w_96() .w_96()
.child("Hello, this is a Popover on the Top Right.") .child("Hello, this is a Popover on the Top Right.")
.child(Divider::horizontal()) .child(Divider::horizontal())
.child( .child(
Button::new("info1", cx) Button::new("info1")
.label("Yes") .label("Yes")
.w(px(80.)) .w(px(80.))
.small(), .small(),
@ -250,7 +250,7 @@ impl Render for PopupStory {
h_flex() h_flex()
.gap_3() .gap_3()
.child( .child(
Button::new("popup-menu-1", cx) Button::new("popup-menu-1")
.icon(IconName::Ellipsis) .icon(IconName::Ellipsis)
.popup_menu(move |this, cx| { .popup_menu(move |this, cx| {
this.menu("Copy", Box::new(Copy)) this.menu("Copy", Box::new(Copy))
@ -288,20 +288,14 @@ impl Render for PopupStory {
.child( .child(
Popover::new("info-bottom-left") Popover::new("info-bottom-left")
.anchor(AnchorCorner::BottomLeft) .anchor(AnchorCorner::BottomLeft)
.trigger( .trigger(Button::new("pop").label("Popup with Form").w(px(300.)))
Button::new("pop", cx).label("Popup with Form").w(px(300.)),
)
.content(move |_| form.clone()), .content(move |_| form.clone()),
) )
.child( .child(
Popover::new("info-bottom-right") Popover::new("info-bottom-right")
.anchor(AnchorCorner::BottomRight) .anchor(AnchorCorner::BottomRight)
.mouse_button(MouseButton::Right) .mouse_button(MouseButton::Right)
.trigger( .trigger(Button::new("pop").label("Mouse Right Click").w(px(300.)))
Button::new("pop", cx)
.label("Mouse Right Click")
.w(px(300.)),
)
.content(|cx| { .content(|cx| {
cx.new_view(|cx| { cx.new_view(|cx| {
PopoverContent::new(cx, |cx| { PopoverContent::new(cx, |cx| {
@ -315,7 +309,7 @@ impl Render for PopupStory {
h_flex() h_flex()
.gap_4() .gap_4()
.child( .child(
Button::new("info1", cx) Button::new("info1")
.label("Ok") .label("Ok")
.w(px(80.)) .w(px(80.))
.small() .small()
@ -329,7 +323,7 @@ impl Render for PopupStory {
)), )),
) )
.child( .child(
Button::new("close", cx) Button::new("close")
.label("Cancel") .label("Cancel")
.small() .small()
.on_click(cx.listener( .on_click(cx.listener(

12
crates/story/src/progress_story.rs
View file

@ -92,28 +92,28 @@ impl Render for ProgressStory {
h_flex() h_flex()
.gap_x_2() .gap_x_2()
.child( .child(
Button::new("button-1", cx) Button::new("button-1")
.label("0%") .label("0%")
.on_click(cx.listener(|this, _, _| { .on_click(cx.listener(|this, _, _| {
this.set_value(0.); this.set_value(0.);
})), })),
) )
.child( .child(
Button::new("button-2", cx) Button::new("button-2")
.label("25%") .label("25%")
.on_click(cx.listener(|this, _, _| { .on_click(cx.listener(|this, _, _| {
this.set_value(25.); this.set_value(25.);
})), })),
) )
.child( .child(
Button::new("button-3", cx) Button::new("button-3")
.label("75%") .label("75%")
.on_click(cx.listener(|this, _, _| { .on_click(cx.listener(|this, _, _| {
this.set_value(75.); this.set_value(75.);
})), })),
) )
.child( .child(
Button::new("button-4", cx) Button::new("button-4")
.label("100%") .label("100%")
.on_click(cx.listener(|this, _, _| { .on_click(cx.listener(|this, _, _| {
this.set_value(100.); this.set_value(100.);
@ -125,14 +125,14 @@ impl Render for ProgressStory {
h_flex() h_flex()
.gap_x_2() .gap_x_2()
.child( .child(
Button::new("button-5", cx) Button::new("button-5")
.icon(IconName::Minus) .icon(IconName::Minus)
.on_click(cx.listener(|this, _, _| { .on_click(cx.listener(|this, _, _| {
this.set_value((this.value - 1.).max(0.)); this.set_value((this.value - 1.).max(0.));
})), })),
) )
.child( .child(
Button::new("button-6", cx) Button::new("button-6")
.icon(IconName::Plus) .icon(IconName::Plus)
.on_click(cx.listener(|this, _, _| { .on_click(cx.listener(|this, _, _| {
this.set_value((this.value + 1.).min(100.)); this.set_value((this.value + 1.).min(100.));

14
crates/story/src/scrollable_story.rs
View file

@ -93,28 +93,28 @@ impl Render for ScrollableStory {
h_flex() h_flex()
.gap_2() .gap_2()
.child( .child(
Button::new("test-0", cx) Button::new("test-0")
.label("Size 0") .label("Size 0")
.on_click(cx.listener(|view, _, cx| { .on_click(cx.listener(|view, _, cx| {
view.change_test_cases(0, cx); view.change_test_cases(0, cx);
})), })),
) )
.child( .child(
Button::new("test-1", cx) Button::new("test-1")
.label("Size 1") .label("Size 1")
.on_click(cx.listener(|view, _, cx| { .on_click(cx.listener(|view, _, cx| {
view.change_test_cases(1, cx); view.change_test_cases(1, cx);
})), })),
) )
.child( .child(
Button::new("test-2", cx) Button::new("test-2")
.label("Size 2") .label("Size 2")
.on_click(cx.listener(|view, _, cx| { .on_click(cx.listener(|view, _, cx| {
view.change_test_cases(2, cx); view.change_test_cases(2, cx);
})), })),
) )
.child( .child(
Button::new("test-3", cx) Button::new("test-3")
.label("Size 3") .label("Size 3")
.on_click(cx.listener(|view, _, cx| { .on_click(cx.listener(|view, _, cx| {
view.change_test_cases(3, cx); view.change_test_cases(3, cx);
@ -122,7 +122,7 @@ impl Render for ScrollableStory {
) )
.child(Divider::vertical().px_2()) .child(Divider::vertical().px_2())
.child( .child(
Button::new("test-axis-both", cx) Button::new("test-axis-both")
.label("Both Scrollbar") .label("Both Scrollbar")
.on_click( .on_click(
cx.listener(|view, _, cx| { cx.listener(|view, _, cx| {
@ -131,14 +131,14 @@ impl Render for ScrollableStory {
), ),
) )
.child( .child(
Button::new("test-axis-vertical", cx) Button::new("test-axis-vertical")
.label("Vertical") .label("Vertical")
.on_click(cx.listener(|view, _, cx| { .on_click(cx.listener(|view, _, cx| {
view.change_axis(ScrollbarAxis::Vertical, cx) view.change_axis(ScrollbarAxis::Vertical, cx)
})), })),
) )
.child( .child(
Button::new("test-axis-horizontal", cx) Button::new("test-axis-horizontal")
.label("Horizontal") .label("Horizontal")
.on_click(cx.listener(|view, _, cx| { .on_click(cx.listener(|view, _, cx| {
view.change_axis(ScrollbarAxis::Horizontal, cx) view.change_axis(ScrollbarAxis::Horizontal, cx)

2
crates/story/src/text_story.rs
View file

@ -117,7 +117,7 @@ impl Render for TextStory {
h_flex() h_flex()
.child(Label::new("9,182,1 USD").text_2xl().masked(self.masked)) .child(Label::new("9,182,1 USD").text_2xl().masked(self.masked))
.child( .child(
Button::new("btn-mask", cx) Button::new("btn-mask")
.style(ButtonStyle::Ghost) .style(ButtonStyle::Ghost)
.icon(if self.masked { .icon(if self.masked {
IconName::EyeOff IconName::EyeOff

4
crates/story/src/tooltip_story.rs
View file

@ -47,7 +47,7 @@ impl gpui::FocusableView for TooltipStory {
} }
} }
impl Render for TooltipStory { impl Render for TooltipStory {
fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl gpui::IntoElement { fn render(&mut self, _: &mut gpui::ViewContext<Self>) -> impl gpui::IntoElement {
v_flex() v_flex()
.p_4() .p_4()
.gap_5() .gap_5()
@ -55,7 +55,7 @@ impl Render for TooltipStory {
div() div()
.cursor(CursorStyle::PointingHand) .cursor(CursorStyle::PointingHand)
.child( .child(
Button::new("button", cx) Button::new("button")
.label("Hover me") .label("Hover me")
.style(ButtonStyle::Primary), .style(ButtonStyle::Primary),
) )

2
crates/story/src/webview_story.rs
View file

@ -103,7 +103,7 @@ impl Render for WebViewStory {
.gap_2() .gap_2()
.items_center() .items_center()
.child( .child(
Button::new("go-back", cx) Button::new("go-back")
.icon(IconName::ArrowLeft) .icon(IconName::ArrowLeft)
.on_click(cx.listener(Self::go_back)), .on_click(cx.listener(Self::go_back)),
) )

11
crates/ui/src/button.rs
View file

@ -7,8 +7,8 @@ use crate::{
}; };
use gpui::{ use gpui::{
div, prelude::FluentBuilder as _, px, relative, AnyElement, ClickEvent, Corners, Div, Edges, div, prelude::FluentBuilder as _, px, relative, AnyElement, ClickEvent, Corners, Div, Edges,
ElementId, FocusHandle, Hsla, InteractiveElement, IntoElement, MouseButton, ParentElement, ElementId, Hsla, InteractiveElement, IntoElement, MouseButton, ParentElement, Pixels,
Pixels, RenderOnce, SharedString, StatefulInteractiveElement as _, Styled, WindowContext, RenderOnce, SharedString, StatefulInteractiveElement as _, Styled, WindowContext,
}; };
pub enum ButtonRounded { pub enum ButtonRounded {
@ -147,7 +147,6 @@ impl ButtonStyle {
pub struct Button { pub struct Button {
pub base: Div, pub base: Div,
id: ElementId, id: ElementId,
focus_handle: FocusHandle,
icon: Option<Icon>, icon: Option<Icon>,
label: Option<SharedString>, label: Option<SharedString>,
children: Vec<AnyElement>, children: Vec<AnyElement>,
@ -173,10 +172,9 @@ impl From<Button> for AnyElement {
} }
impl Button { impl Button {
pub fn new(id: impl Into<ElementId>, cx: &mut WindowContext) -> Self { pub fn new(id: impl Into<ElementId>) -> Self {
Self { Self {
base: div(), base: div(),
focus_handle: cx.focus_handle(),
id: id.into(), id: id.into(),
icon: None, icon: None,
label: None, label: None,
@ -311,7 +309,6 @@ impl RenderOnce for Button {
fn render(self, cx: &mut WindowContext) -> impl IntoElement { fn render(self, cx: &mut WindowContext) -> impl IntoElement {
let style: ButtonStyle = self.style; let style: ButtonStyle = self.style;
let normal_style = style.normal(cx); let normal_style = style.normal(cx);
let focused = self.focus_handle.is_focused(cx);
let icon_size = match self.size { let icon_size = match self.size {
Size::Size(v) => Size::Size(v * 0.75), Size::Size(v) => Size::Size(v * 0.75),
_ => self.size, _ => self.size,
@ -326,7 +323,6 @@ impl RenderOnce for Button {
self.base self.base
.id(self.id) .id(self.id)
.track_focus(&self.focus_handle)
.flex() .flex()
.items_center() .items_center()
.justify_center() .justify_center()
@ -402,7 +398,6 @@ impl RenderOnce for Button {
.text_color(active_style.fg) .text_color(active_style.fg)
}) })
}) })
.when(focused, |this| this.border_color(cx.theme().ring))
.when_some( .when_some(
self.on_click.filter(|_| !self.disabled && !self.loading), self.on_click.filter(|_| !self.disabled && !self.loading),
|this, on_click| { |this, on_click| {

2
crates/ui/src/clipboard.rs
View file

@ -95,7 +95,7 @@ impl Element for Clipboard {
.items_center() .items_center()
.when_some(content_element, |this, element| this.child(element)) .when_some(content_element, |this, element| this.child(element))
.child( .child(
Button::new(clipboard_id, cx) Button::new(clipboard_id)
.icon(if copide_value { .icon(if copide_value {
IconName::Check IconName::Check
} else { } else {

4
crates/ui/src/dock/tab_panel.rs
View file

@ -259,7 +259,7 @@ impl TabPanel {
.items_center() .items_center()
.when(self.is_zoomed, |this| { .when(self.is_zoomed, |this| {
this.child( this.child(
Button::new("zoom", cx) Button::new("zoom")
.icon(IconName::Minimize) .icon(IconName::Minimize)
.xsmall() .xsmall()
.ghost() .ghost()
@ -270,7 +270,7 @@ impl TabPanel {
) )
}) })
.child( .child(
Button::new("menu", cx) Button::new("menu")
.icon(IconName::Ellipsis) .icon(IconName::Ellipsis)
.xsmall() .xsmall()
.ghost() .ghost()

2
crates/ui/src/drawer.rs
View file

@ -178,7 +178,7 @@ impl RenderOnce for Drawer {
.w_full() .w_full()
.child(self.title.unwrap_or(div().into_any_element())) .child(self.title.unwrap_or(div().into_any_element()))
.child( .child(
Button::new("close", cx) Button::new("close")
.small() .small()
.ghost() .ghost()
.icon(IconName::Close) .icon(IconName::Close)

4
crates/ui/src/input/clear_button.rs
View file

@ -8,8 +8,8 @@ use crate::{
pub(crate) struct ClearButton {} pub(crate) struct ClearButton {}
impl ClearButton { impl ClearButton {
pub fn new(cx: &mut WindowContext) -> Button { pub fn new(_: &mut WindowContext) -> Button {
Button::new("clean", cx) Button::new("clean")
.icon(IconName::CircleX) .icon(IconName::CircleX)
.ghost() .ghost()
.with_size(px(14.)) .with_size(px(14.))

5
crates/ui/src/modal.rs
View file

@ -208,10 +208,7 @@ impl RenderOnce for Modal {
}) })
.when(self.show_close, |this| { .when(self.show_close, |this| {
this.child( this.child(
Button::new( Button::new(SharedString::from(format!("modal-close-{layer_ix}")))
SharedString::from(format!("modal-close-{layer_ix}")),
cx,
)
.absolute() .absolute()
.top_2() .top_2()
.right_2() .right_2()

2
crates/ui/src/notification.rs
View file

@ -251,7 +251,7 @@ impl Render for Notification {
.invisible() .invisible()
.group_hover("", |this| this.visible()) .group_hover("", |this| this.visible())
.child( .child(
Button::new("close", cx) Button::new("close")
.icon(IconName::Close) .icon(IconName::Close)
.ghost() .ghost()
.xsmall() .xsmall()

8
crates/ui/src/time/calendar.rs
View file

@ -470,7 +470,7 @@ impl Calendar {
.justify_between() .justify_between()
.items_center() .items_center()
.child( .child(
Button::new("prev", cx) Button::new("prev")
.icon(IconName::ArrowLeft) .icon(IconName::ArrowLeft)
.ghost() .ghost()
.disabled(disabled) .disabled(disabled)
@ -488,7 +488,7 @@ impl Calendar {
.justify_center() .justify_center()
.gap_3() .gap_3()
.child( .child(
Button::new("month", cx) Button::new("month")
.ghost() .ghost()
.label(self.month_name(0)) .label(self.month_name(0))
.selected(self.view_mode.is_month()) .selected(self.view_mode.is_month())
@ -503,7 +503,7 @@ impl Calendar {
})), })),
) )
.child( .child(
Button::new("year", cx) Button::new("year")
.ghost() .ghost()
.label(current_year.to_string()) .label(current_year.to_string())
.compact() .compact()
@ -531,7 +531,7 @@ impl Calendar {
)) ))
}) })
.child( .child(
Button::new("next", cx) Button::new("next")
.icon(IconName::ArrowRight) .icon(IconName::ArrowRight)
.ghost() .ghost()
.disabled(disabled) .disabled(disabled)