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

button: Rename ButtonStyle to ButtonVariant. (#460)

Browse source 
This is a breaking changes, we need refactor exist code by this:

- `ButtonStyled` -> `ButtonVariants`
- `.style` -> `.with_variant`
- `ButtonStyle` -> `ButtonVariant`
- `ButtonCustomStyle` -> `ButtonCustomVariant`
This commit is contained in:
Jason Lee 2024-12-03 19:22:28 +08:00 committed by GitHub
parent 7560542659
commit 23f9352295
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
21 changed files with 132 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,7 +9,7 @@ use story::{
SidebarStory, StoryContainer, SwitchStory, TableStory, TextStory, TooltipStory,
};
use ui::{
button::{Button, ButtonStyled as _},
button::{Button, ButtonVariants as _},
color_picker::{ColorPicker, ColorPickerEvent},
dock::{DockArea, DockAreaState, DockEvent, DockItem, DockPlacement},
h_flex,

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

@ -4,7 +4,7 @@ use gpui::{
};
use ui::{
button::{Button, ButtonCustomStyle, ButtonStyled as _},
button::{Button, ButtonCustomVariant, ButtonVariants as _},
button_group::ButtonGroup,
checkbox::Checkbox,
h_flex,
@ -204,7 +204,7 @@ impl Render for ButtonStory {
.child(
Button::new("button-6-custom")
.custom(
ButtonCustomStyle::new(cx)
ButtonCustomVariant::new(cx)
.color(if cx.theme().mode.is_dark() {
ui::green_900()
} else {

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

@ -2,7 +2,7 @@ use gpui::{
px, rems, ParentElement, Render, Styled, View, ViewContext, VisualContext as _, WindowContext,
};
use ui::{
button::{Button, ButtonStyle},
button::{Button, ButtonVariant, ButtonVariants},
h_flex,
theme::ActiveTheme as _,
v_flex, Icon, IconName,
@ -63,7 +63,7 @@ impl Render for IconStory {
.text_color(ui::gray_500())
.size_6(),
)
.style(ButtonStyle::Ghost),
.with_variant(ButtonVariant::Ghost),
)
.child(
Button::new("like2")
@ -72,7 +72,7 @@ impl Render for IconStory {
.text_color(ui::red_500())
.size_6(),
)
.style(ButtonStyle::Ghost),
.with_variant(ButtonVariant::Ghost),
)
.child(
Icon::new(IconName::Plus)

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

@ -7,7 +7,7 @@ use regex::Regex;
use crate::section;
use ui::{
button::Button,
button::{Button, ButtonVariant, ButtonVariants as _},
checkbox::Checkbox,
h_flex,
input::{InputEvent, OtpInput, TextInput},
@ -398,7 +398,7 @@ impl Render for InputStory {
.child(
Button::new("btn-submit")
.w_full()
.style(ui::button::ButtonStyle::Primary)
.with_variant(ButtonVariant::Primary)
.label("Submit")
.on_click(cx.listener(|_, _, cx| cx.dispatch_action(Box::new(Tab)))),
)

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

@ -8,7 +8,7 @@ use gpui::{
};
use ui::{
button::{Button, ButtonStyle, ButtonStyled as _},
button::{Button, ButtonVariant, ButtonVariants as _},
checkbox::Checkbox,
date_picker::DatePicker,
dropdown::Dropdown,
@ -84,7 +84,7 @@ impl ListDelegate for ListItemDeletegate {
.suffix(|_| {
Button::new("like")
.icon(IconName::Heart)
.style(ButtonStyle::Ghost)
.with_variant(ButtonVariant::Ghost)
.size(px(18.))
.on_click(move |_, cx| {
cx.stop_propagation();

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

@ -6,7 +6,7 @@ use gpui::{
};
use serde::Deserialize;
use ui::{
button::{Button, ButtonStyled as _},
button::{Button, ButtonVariants as _},
context_menu::ContextMenuExt,
divider::Divider,
h_flex,

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

@ -8,7 +8,7 @@ use gpui::{
};
use serde::Deserialize;
use ui::{
button::{Button, ButtonStyled},
button::{Button, ButtonVariants},
checkbox::Checkbox,
h_flex,
indicator::Indicator,

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

@ -4,7 +4,7 @@ use gpui::{
};
use ui::{
button::{Button, ButtonStyle},
button::{Button, ButtonVariant, ButtonVariants as _},
checkbox::Checkbox,
clipboard::Clipboard,
h_flex,
@ -118,7 +118,7 @@ impl Render for TextStory {
.child(Label::new("9,182,1 USD").text_2xl().masked(self.masked))
.child(
Button::new("btn-mask")
.style(ButtonStyle::Ghost)
.with_variant(ButtonVariant::Ghost)
.icon(if self.masked {
IconName::EyeOff
} else {

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

@ -4,7 +4,7 @@ use gpui::{
};
use ui::{
button::{Button, ButtonStyle},
button::{Button, ButtonVariant, ButtonVariants},
checkbox::Checkbox,
h_flex,
label::Label,
@ -57,7 +57,7 @@ impl Render for TooltipStory {
.child(
Button::new("button")
.label("Hover me")
.style(ButtonStyle::Primary),
.with_variant(ButtonVariant::Primary),
)
.id("tooltip-1")
.tooltip(|cx| Tooltip::new("This is a Button", cx)),

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

@ -26,7 +26,7 @@ impl From<Pixels> for ButtonRounded {
}
#[derive(Clone, Copy, PartialEq, Eq)]
pub struct ButtonCustomStyle {
pub struct ButtonCustomVariant {
color: Hsla,
foreground: Hsla,
border: Hsla,
@ -35,46 +35,46 @@ pub struct ButtonCustomStyle {
active: Hsla,
}
pub trait ButtonStyled: Sized {
fn with_style(self, style: ButtonStyle) -> Self;
pub trait ButtonVariants: Sized {
fn with_variant(self, variant: ButtonVariant) -> Self;
/// With the primary style for the Button.
fn primary(self) -> Self {
self.with_style(ButtonStyle::Primary)
self.with_variant(ButtonVariant::Primary)
}
/// With the danger style for the Button.
fn danger(self) -> Self {
self.with_style(ButtonStyle::Danger)
self.with_variant(ButtonVariant::Danger)
}
/// With the outline style for the Button.
fn outline(self) -> Self {
self.with_style(ButtonStyle::Outline)
self.with_variant(ButtonVariant::Outline)
}
/// With the ghost style for the Button.
fn ghost(self) -> Self {
self.with_style(ButtonStyle::Ghost)
self.with_variant(ButtonVariant::Ghost)
}
/// With the link style for the Button.
fn link(self) -> Self {
self.with_style(ButtonStyle::Link)
self.with_variant(ButtonVariant::Link)
}
/// With the text style for the Button, it will no padding look like a normal text.
fn text(self) -> Self {
self.with_style(ButtonStyle::Text)
self.with_variant(ButtonVariant::Text)
}
/// With the custom style for the Button.
fn custom(self, style: ButtonCustomStyle) -> Self {
self.with_style(ButtonStyle::Custom(style))
fn custom(self, style: ButtonCustomVariant) -> Self {
self.with_variant(ButtonVariant::Custom(style))
}
}
impl ButtonCustomStyle {
impl ButtonCustomVariant {
pub fn new(cx: &WindowContext) -> Self {
Self {
color: cx.theme().secondary,
@ -117,8 +117,9 @@ impl ButtonCustomStyle {
}
}
/// The veriant of the Button.
#[derive(Clone, Copy, PartialEq, Eq)]
pub enum ButtonStyle {
pub enum ButtonVariant {
Primary,
Secondary,
Danger,
@ -126,10 +127,16 @@ pub enum ButtonStyle {
Ghost,
Link,
Text,
Custom(ButtonCustomStyle),
Custom(ButtonCustomVariant),
}
impl ButtonStyle {
impl Default for ButtonVariant {
fn default() -> Self {
Self::Secondary
}
}
impl ButtonVariant {
fn is_link(&self) -> bool {
matches!(self, Self::Link)
}
@ -153,7 +160,7 @@ pub struct Button {
children: Vec<AnyElement>,
disabled: bool,
pub(crate) selected: bool,
style: ButtonStyle,
variant: ButtonVariant,
rounded: ButtonRounded,
border_corners: Corners<bool>,
border_edges: Edges<bool>,
@ -181,7 +188,7 @@ impl Button {
label: None,
disabled: false,
selected: false,
style: ButtonStyle::Secondary,
variant: ButtonVariant::default(),
rounded: ButtonRounded::Medium,
border_corners: Corners::all(true),
border_edges: Edges::all(true),
@ -232,12 +239,6 @@ impl Button {
self
}
/// Set the ButtonStyle
pub fn style(mut self, style: ButtonStyle) -> Self {
self.style = style;
self
}
/// Set true to show the loading indicator.
pub fn loading(mut self, loading: bool) -> Self {
self.loading = loading;
@ -291,9 +292,9 @@ impl Sizable for Button {
}
}
impl ButtonStyled for Button {
fn with_style(mut self, style: ButtonStyle) -> Self {
self.style = style;
impl ButtonVariants for Button {
fn with_variant(mut self, variant: ButtonVariant) -> Self {
self.variant = variant;
self
}
}
@ -318,7 +319,7 @@ impl InteractiveElement for Button {
impl RenderOnce for Button {
fn render(self, cx: &mut WindowContext) -> impl IntoElement {
let style: ButtonStyle = self.style;
let style: ButtonVariant = self.variant;
let normal_style = style.normal(cx);
let icon_size = match self.size {
Size::Size(v) => Size::Size(v * 0.75),
@ -459,7 +460,7 @@ impl RenderOnce for Button {
}
}
struct ButtonStyles {
struct ButtonVariantStyle {
bg: Hsla,
border: Hsla,
fg: Hsla,
@ -467,66 +468,69 @@ struct ButtonStyles {
shadow: bool,
}
impl ButtonStyle {
impl ButtonVariant {
fn bg_color(&self, cx: &WindowContext) -> Hsla {
match self {
ButtonStyle::Primary => cx.theme().primary,
ButtonStyle::Secondary => cx.theme().secondary,
ButtonStyle::Danger => cx.theme().destructive,
ButtonStyle::Outline | ButtonStyle::Ghost | ButtonStyle::Link | ButtonStyle::Text => {
cx.theme().transparent
}
ButtonStyle::Custom(colors) => colors.color,
ButtonVariant::Primary => cx.theme().primary,
ButtonVariant::Secondary => cx.theme().secondary,
ButtonVariant::Danger => cx.theme().destructive,
ButtonVariant::Outline
| ButtonVariant::Ghost
| ButtonVariant::Link
| ButtonVariant::Text => cx.theme().transparent,
ButtonVariant::Custom(colors) => colors.color,
}
}
fn text_color(&self, cx: &WindowContext) -> Hsla {
match self {
ButtonStyle::Primary => cx.theme().primary_foreground,
ButtonStyle::Secondary | ButtonStyle::Outline | ButtonStyle::Ghost => {
ButtonVariant::Primary => cx.theme().primary_foreground,
ButtonVariant::Secondary | ButtonVariant::Outline | ButtonVariant::Ghost => {
cx.theme().secondary_foreground
}
ButtonStyle::Danger => cx.theme().destructive_foreground,
ButtonStyle::Link => cx.theme().link,
ButtonStyle::Text => cx.theme().foreground,
ButtonStyle::Custom(colors) => colors.foreground,
ButtonVariant::Danger => cx.theme().destructive_foreground,
ButtonVariant::Link => cx.theme().link,
ButtonVariant::Text => cx.theme().foreground,
ButtonVariant::Custom(colors) => colors.foreground,
}
}
fn border_color(&self, cx: &WindowContext) -> Hsla {
match self {
ButtonStyle::Primary => cx.theme().primary,
ButtonStyle::Secondary => cx.theme().border,
ButtonStyle::Danger => cx.theme().destructive,
ButtonStyle::Outline => cx.theme().border,
ButtonStyle::Ghost | ButtonStyle::Link | ButtonStyle::Text => cx.theme().transparent,
ButtonStyle::Custom(colors) => colors.border,
ButtonVariant::Primary => cx.theme().primary,
ButtonVariant::Secondary => cx.theme().border,
ButtonVariant::Danger => cx.theme().destructive,
ButtonVariant::Outline => cx.theme().border,
ButtonVariant::Ghost | ButtonVariant::Link | ButtonVariant::Text => {
cx.theme().transparent
}
ButtonVariant::Custom(colors) => colors.border,
}
}
fn underline(&self, _: &WindowContext) -> bool {
match self {
ButtonStyle::Link => true,
ButtonVariant::Link => true,
_ => false,
}
}
fn shadow(&self, _: &WindowContext) -> bool {
match self {
ButtonStyle::Primary | ButtonStyle::Secondary | ButtonStyle::Danger => true,
ButtonStyle::Custom(c) => c.shadow,
ButtonVariant::Primary | ButtonVariant::Secondary | ButtonVariant::Danger => true,
ButtonVariant::Custom(c) => c.shadow,
_ => false,
}
}
fn normal(&self, cx: &WindowContext) -> ButtonStyles {
fn normal(&self, cx: &WindowContext) -> ButtonVariantStyle {
let bg = self.bg_color(cx);
let border = self.border_color(cx);
let fg = self.text_color(cx);
let underline = self.underline(cx);
let shadow = self.shadow(cx);
ButtonStyles {
ButtonVariantStyle {
bg,
border,
fg,
@ -535,31 +539,31 @@ impl ButtonStyle {
}
}
fn hovered(&self, cx: &WindowContext) -> ButtonStyles {
fn hovered(&self, cx: &WindowContext) -> ButtonVariantStyle {
let bg = match self {
ButtonStyle::Primary => cx.theme().primary_hover,
ButtonStyle::Secondary | ButtonStyle::Outline => cx.theme().secondary_hover,
ButtonStyle::Danger => cx.theme().destructive_hover,
ButtonStyle::Ghost => {
ButtonVariant::Primary => cx.theme().primary_hover,
ButtonVariant::Secondary | ButtonVariant::Outline => cx.theme().secondary_hover,
ButtonVariant::Danger => cx.theme().destructive_hover,
ButtonVariant::Ghost => {
if cx.theme().mode.is_dark() {
cx.theme().secondary.lighten(0.1).opacity(0.8)
} else {
cx.theme().secondary.darken(0.1).opacity(0.8)
}
}
ButtonStyle::Link => cx.theme().transparent,
ButtonStyle::Text => cx.theme().transparent,
ButtonStyle::Custom(colors) => colors.hover,
ButtonVariant::Link => cx.theme().transparent,
ButtonVariant::Text => cx.theme().transparent,
ButtonVariant::Custom(colors) => colors.hover,
};
let border = self.border_color(cx);
let fg = match self {
ButtonStyle::Link => cx.theme().link_hover,
ButtonVariant::Link => cx.theme().link_hover,
_ => self.text_color(cx),
};
let underline = self.underline(cx);
let shadow = self.shadow(cx);
ButtonStyles {
ButtonVariantStyle {
bg,
border,
fg,
@ -568,27 +572,27 @@ impl ButtonStyle {
}
}
fn active(&self, cx: &WindowContext) -> ButtonStyles {
fn active(&self, cx: &WindowContext) -> ButtonVariantStyle {
let bg = match self {
ButtonStyle::Primary => cx.theme().primary_active,
ButtonStyle::Secondary | ButtonStyle::Outline | ButtonStyle::Ghost => {
ButtonVariant::Primary => cx.theme().primary_active,
ButtonVariant::Secondary | ButtonVariant::Outline | ButtonVariant::Ghost => {
cx.theme().secondary_active
}
ButtonStyle::Danger => cx.theme().destructive_active,
ButtonStyle::Link => cx.theme().transparent,
ButtonStyle::Text => cx.theme().transparent,
ButtonStyle::Custom(colors) => colors.active,
ButtonVariant::Danger => cx.theme().destructive_active,
ButtonVariant::Link => cx.theme().transparent,
ButtonVariant::Text => cx.theme().transparent,
ButtonVariant::Custom(colors) => colors.active,
};
let border = self.border_color(cx);
let fg = match self {
ButtonStyle::Link => cx.theme().link_active,
ButtonStyle::Text => cx.theme().foreground.opacity(0.7),
ButtonVariant::Link => cx.theme().link_active,
ButtonVariant::Text => cx.theme().foreground.opacity(0.7),
_ => self.text_color(cx),
};
let underline = self.underline(cx);
let shadow = self.shadow(cx);
ButtonStyles {
ButtonVariantStyle {
bg,
border,
fg,
@ -597,27 +601,27 @@ impl ButtonStyle {
}
}
fn selected(&self, cx: &WindowContext) -> ButtonStyles {
fn selected(&self, cx: &WindowContext) -> ButtonVariantStyle {
let bg = match self {
ButtonStyle::Primary => cx.theme().primary_active,
ButtonStyle::Secondary | ButtonStyle::Outline | ButtonStyle::Ghost => {
ButtonVariant::Primary => cx.theme().primary_active,
ButtonVariant::Secondary | ButtonVariant::Outline | ButtonVariant::Ghost => {
cx.theme().secondary_active
}
ButtonStyle::Danger => cx.theme().destructive_active,
ButtonStyle::Link => cx.theme().transparent,
ButtonStyle::Text => cx.theme().transparent,
ButtonStyle::Custom(colors) => colors.active,
ButtonVariant::Danger => cx.theme().destructive_active,
ButtonVariant::Link => cx.theme().transparent,
ButtonVariant::Text => cx.theme().transparent,
ButtonVariant::Custom(colors) => colors.active,
};
let border = self.border_color(cx);
let fg = match self {
ButtonStyle::Link => cx.theme().link_active,
ButtonStyle::Text => cx.theme().foreground.opacity(0.7),
ButtonVariant::Link => cx.theme().link_active,
ButtonVariant::Text => cx.theme().foreground.opacity(0.7),
_ => self.text_color(cx),
};
let underline = self.underline(cx);
let shadow = self.shadow(cx);
ButtonStyles {
ButtonVariantStyle {
bg,
border,
fg,
@ -626,32 +630,33 @@ impl ButtonStyle {
}
}
fn disabled(&self, cx: &WindowContext) -> ButtonStyles {
fn disabled(&self, cx: &WindowContext) -> ButtonVariantStyle {
let bg = match self {
ButtonStyle::Link | ButtonStyle::Ghost | ButtonStyle::Outline | ButtonStyle::Text => {
cx.theme().transparent
}
ButtonStyle::Primary => cx.theme().primary.opacity(0.15),
ButtonStyle::Danger => cx.theme().destructive.opacity(0.15),
ButtonStyle::Secondary => cx.theme().secondary.opacity(1.5),
ButtonStyle::Custom(style) => style.color.opacity(0.15),
ButtonVariant::Link
| ButtonVariant::Ghost
| ButtonVariant::Outline
| ButtonVariant::Text => cx.theme().transparent,
ButtonVariant::Primary => cx.theme().primary.opacity(0.15),
ButtonVariant::Danger => cx.theme().destructive.opacity(0.15),
ButtonVariant::Secondary => cx.theme().secondary.opacity(1.5),
ButtonVariant::Custom(style) => style.color.opacity(0.15),
};
let fg = match self {
ButtonStyle::Link | ButtonStyle::Text | ButtonStyle::Ghost => {
ButtonVariant::Link | ButtonVariant::Text | ButtonVariant::Ghost => {
cx.theme().link.grayscale()
}
_ => cx.theme().secondary_foreground.opacity(0.5).grayscale(),
};
let border = match self {
ButtonStyle::Outline => cx.theme().border.opacity(0.5),
ButtonVariant::Outline => cx.theme().border.opacity(0.5),
_ => bg,
};
let underline = self.underline(cx);
let shadow = false;
ButtonStyles {
ButtonVariantStyle {
bg,
border,
fg,

14
crates/ui/src/button_group.rs
View file

@ -5,7 +5,7 @@ use gpui::{
use std::{cell::Cell, rc::Rc};
use crate::{
button::{Button, ButtonStyle, ButtonStyled},
button::{Button, ButtonVariant, ButtonVariants},
Disableable, Sizable, Size,
};
@ -20,7 +20,7 @@ pub struct ButtonGroup {
// The button props
compact: Option<bool>,
style: Option<ButtonStyle>,
variant: Option<ButtonVariant>,
size: Option<Size>,
on_click: Option<Box<dyn Fn(&Vec<usize>, &mut WindowContext) + 'static>>,
@ -40,7 +40,7 @@ impl ButtonGroup {
base: div(),
children: Vec::new(),
id: id.into(),
style: None,
variant: None,
size: None,
compact: None,
multiple: false,
@ -89,9 +89,9 @@ impl Styled for ButtonGroup {
}
}
impl ButtonStyled for ButtonGroup {
fn with_style(mut self, style: ButtonStyle) -> Self {
self.style = Some(style);
impl ButtonVariants for ButtonGroup {
fn with_variant(mut self, variant: ButtonVariant) -> Self {
self.variant = Some(variant);
self
}
}
@ -163,7 +163,7 @@ impl RenderOnce for ButtonGroup {
}
.stop_propagation(false)
.when_some(self.size, |this, size| this.with_size(size))
.when_some(self.style, |this, style| this.style(style))
.when_some(self.variant, |this, variant| this.with_variant(variant))
.when_some(self.compact, |this, _| this.compact())
.on_click(move |_, _| {
state.set(Some(child_index));

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

@ -6,7 +6,7 @@ use gpui::{
};
use crate::{
button::{Button, ButtonStyled as _},
button::{Button, ButtonVariants as _},
h_flex, IconName, Sizable as _,
};

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

@ -10,7 +10,7 @@ use gpui::{
use rust_i18n::t;
use crate::{
button::{Button, ButtonStyled as _},
button::{Button, ButtonVariants as _},
dock::DockItemInfo,
h_flex,
popup_menu::{PopupMenu, PopupMenuExt},

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

@ -8,7 +8,7 @@ use gpui::{
};
use crate::{
button::{Button, ButtonStyled as _},
button::{Button, ButtonVariants as _},
h_flex,
modal::overlay_color,
root::ContextModal as _,

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

@ -1,7 +1,7 @@
use gpui::{Styled, WindowContext};
use crate::{
button::{Button, ButtonStyled as _},
button::{Button, ButtonVariants as _},
theme::ActiveTheme as _,
Icon, IconName, Sizable as _,
};

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

@ -9,7 +9,7 @@ use gpui::{
use crate::{
animation::cubic_bezier,
button::{Button, ButtonStyled as _},
button::{Button, ButtonVariants as _},
theme::ActiveTheme as _,
v_flex, ContextModal, IconName, Sizable as _,
};

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

@ -9,7 +9,7 @@ use smol::Timer;
use crate::{
animation::cubic_bezier,
button::{Button, ButtonStyled as _},
button::{Button, ButtonVariants as _},
h_flex,
theme::ActiveTheme as _,
v_flex, Icon, IconName, Sizable as _, StyledExt,

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

@ -6,7 +6,7 @@ use gpui::{
use regex::Regex;
use crate::{
button::{Button, ButtonStyled as _},
button::{Button, ButtonVariants as _},
h_flex,
input::{InputEvent, TextInput},
prelude::FluentBuilder,

2
crates/ui/src/sidebar/mod.rs
View file

@ -1,5 +1,5 @@
use crate::{
button::{Button, ButtonStyled},
button::{Button, ButtonVariants},
h_flex,
scroll::ScrollbarAxis,
theme::ActiveTheme,

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

@ -9,7 +9,7 @@ use gpui::{
use rust_i18n::t;
use crate::{
button::{Button, ButtonStyled as _},
button::{Button, ButtonVariants as _},
h_flex,
theme::ActiveTheme,
v_flex, Disableable as _, IconName, Selectable, Sizable, Size,

2
crates/ui/src/time/date_picker.rs
View file

@ -8,7 +8,7 @@ use gpui::{
use rust_i18n::t;
use crate::{
button::{Button, ButtonStyled as _},
button::{Button, ButtonVariants as _},
dropdown::Escape,
h_flex,
input::ClearButton,