input: Add focus_bordered method to toggle Input focus border. (#946)

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),
+                    ),
             )
     }
 }

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(

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(

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))