button: Hotfix Button to valign text center. (#235)

<img width="1336" alt="image"
src="https://github.com/user-attachments/assets/64029ab3-6447-47b1-a40c-f1e6668172b7">
This commit is contained in:
Jason Lee 2024-09-11 11:39:17 +08:00 committed by GitHub
parent 4f8c4ccd5d
commit 77cb8cb448
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -299,6 +299,7 @@ impl RenderOnce for Button {
.items_center() .items_center()
.justify_center() .justify_center()
.cursor_pointer() .cursor_pointer()
.overflow_hidden()
.when(!style.no_padding(), |this| { .when(!style.no_padding(), |this| {
if self.label.is_none() && self.children.is_empty() { if self.label.is_none() && self.children.is_empty() {
// Icon Button // Icon Button
@ -311,18 +312,10 @@ impl RenderOnce for Button {
} else { } else {
// Normal Button // Normal Button
match self.size { match self.size {
Size::Size(size) => this.p(size * 0.2), Size::Size(size) => this.px(size * 0.2),
Size::XSmall => this.h_5().p_1(), Size::XSmall => this.h_5().px_1(),
Size::Small => this Size::Small => this.h_6().px_3().when(self.compact, |this| this.px_2()),
.px_3() _ => this.h_8().px_4().when(self.compact, |this| this.px_2()),
.py_2()
.h_6()
.when(self.compact, |this| this.p_2()),
_ => this
.px_4()
.py_2()
.h_8()
.when(self.compact, |this| this.p_2()),
} }
} }
}) })
@ -399,13 +392,13 @@ impl RenderOnce for Button {
.id("label") .id("label")
.items_center() .items_center()
.justify_center() .justify_center()
.h_full()
.gap_2() .gap_2()
.map(|this| match self.size { .map(|this| match self.size {
Size::XSmall => this.text_xs(), Size::XSmall => this.text_xs(),
Size::Small => this.text_sm(), Size::Small => this.text_sm(),
_ => this.text_base(), _ => this.text_base(),
}) })
.line_height(relative(1.))
.when(!self.loading, |this| { .when(!self.loading, |this| {
this.when_some(self.icon, |this, icon| { this.when_some(self.icon, |this, icon| {
this.child(icon.with_size(icon_size)) this.child(icon.with_size(icon_size))
@ -414,7 +407,16 @@ impl RenderOnce for Button {
.when(self.loading, |this| { .when(self.loading, |this| {
this.child(Indicator::new().with_size(self.size)) this.child(Indicator::new().with_size(self.size))
}) })
.when_some(self.label, |this, label| this.child(label)) .when_some(self.label, |this, label| {
this.child(
div()
// FIXME: Move down 3px to vertically center the text
.mt(px(2.))
.flex_none()
.line_height(relative(1.))
.child(label),
)
})
.children(self.children) .children(self.children)
}) })
.when(self.loading, |this| this.bg(normal_style.bg.opacity(0.8))) .when(self.loading, |this| this.bg(normal_style.bg.opacity(0.8)))