diff --git a/crates/story/examples/code-editor.rs b/crates/story/examples/code-editor.rs index 1c56d07a..7b5a48e7 100644 --- a/crates/story/examples/code-editor.rs +++ b/crates/story/examples/code-editor.rs @@ -212,7 +212,11 @@ impl Render for Example { .p_4() .font_family("Monaco") .text_size(px(12.)) - .child(TextInput::new(&self.input_state).h_full()), + .child( + TextInput::new(&self.input_state) + .h_full() + .focus_bordered(false), + ), ) } } diff --git a/crates/story/examples/html.rs b/crates/story/examples/html.rs index 83c29075..245a141d 100644 --- a/crates/story/examples/html.rs +++ b/crates/story/examples/html.rs @@ -59,7 +59,12 @@ impl Render for Example { .size_full() .font_family("Menlo") .text_size(px(13.)) - .child(TextInput::new(&self.input_state).h_full().appearance(false)), + .child( + TextInput::new(&self.input_state) + .h_full() + .appearance(false) + .focus_bordered(false), + ), ), ) .child( diff --git a/crates/story/examples/markdown.rs b/crates/story/examples/markdown.rs index 04bfdb4e..0ef6d866 100644 --- a/crates/story/examples/markdown.rs +++ b/crates/story/examples/markdown.rs @@ -65,7 +65,12 @@ impl Render for Example { .size_full() .font_family("Monaco") .text_size(px(12.)) - .child(TextInput::new(&self.input_state).h_full().appearance(false)), + .child( + TextInput::new(&self.input_state) + .h_full() + .appearance(false) + .focus_bordered(false), + ), ), ) .child( diff --git a/crates/ui/src/input/text_input.rs b/crates/ui/src/input/text_input.rs index af1a81eb..42bb1ddb 100644 --- a/crates/ui/src/input/text_input.rs +++ b/crates/ui/src/input/text_input.rs @@ -28,6 +28,7 @@ pub struct TextInput { mask_toggle: bool, disabled: bool, bordered: bool, + focus_bordered: bool, } impl Sizable for TextInput { @@ -48,10 +49,11 @@ impl TextInput { suffix: None, height: None, appearance: true, - bordered: true, cleanable: false, mask_toggle: false, disabled: false, + bordered: true, + focus_bordered: true, } } @@ -83,12 +85,18 @@ impl TextInput { self } - /// Set the bordered for the input field, default: true + /// Set the bordered for the input, default: true pub fn bordered(mut self, bordered: bool) -> Self { self.bordered = bordered; self } + /// Set focus border for the input, default is true. + pub fn focus_bordered(mut self, bordered: bool) -> Self { + self.focus_bordered = bordered; + self + } + /// Set true to show the clear button when the input field is not empty. pub fn cleanable(mut self) -> Self { self.cleanable = true; @@ -250,7 +258,9 @@ impl RenderOnce for TextInput { this.border_color(cx.theme().input) .border_1() .when(cx.theme().shadow, |this| this.shadow_sm()) - .when(focused, |this| this.focused_border(cx)) + .when(focused && self.focus_bordered, |this| { + this.focused_border(cx) + }) }) }) .when(prefix.is_none(), |this| this.input_pl(self.size))