chore: Rename outline styled method to focused_border. (#635)

This change to avoid conflict with `outline` method in Button.

## Break changes:

- The `outline` method in `StyledExt` now renamed to `focused_border`.

crates/ui/src/dropdown.rs

@@ -658,7 +658,7 @@ where
                         Length::Definite(l) => this.flex_none().w(l),
                         Length::Auto => this.w_full(),
                     })
-                    .when(outline_visible, |this| this.outline(cx))
+                    .when(outline_visible, |this| this.focusd_border(cx))
                     .input_size(self.size)
                     .when(allow_open, |this| {
                         this.on_click(cx.listener(Self::toggle_menu))

crates/ui/src/input/input.rs

@@ -1649,7 +1649,7 @@ impl Render for TextInput {
                 .border_1()
                 .rounded(cx.theme().radius)
                 .when(cx.theme().shadow, |this| this.shadow_sm())
-                .when(focused, |this| this.outline(cx))
+                .when(focused, |this| this.focusd_border(cx))
             })
             .when(prefix.is_none(), |this| this.input_pl(self.size))
             .when(suffix.is_none(), |this| this.input_pr(self.size))

crates/ui/src/input/number_input.rs

@@ -9,7 +9,7 @@ use crate::{
     button::{Button, ButtonVariants as _},
     h_flex,
     input::{InputEvent, TextInput},
-    ActiveTheme, IconName, Sizable, Size, StyleSized, StyledExt,
+    ActiveTheme, IconName, Sizable, Size, StyleSized, StyledExt as _,
 };
 
 actions!(number_input, [Increment, Decrement]);
@@ -182,7 +182,7 @@ impl Render for NumberInput {
             .border_color(cx.theme().input)
             .border_1()
             .rounded(cx.theme().radius)
-            .when(focused, |this| this.outline(cx))
+            .when(focused, |this| this.focusd_border(cx))
             .child(
                 Button::new("minus")
                     .ghost()

crates/ui/src/styled.rs

@@ -106,7 +106,7 @@ pub trait StyledExt: Styled + Sized {
 
     /// Render a border with a width of 1px, color ring color
     #[inline]
-    fn outline(self, cx: &App) -> Self {
+    fn focusd_border(self, cx: &App) -> Self {
         self.border_color(cx.theme().ring)
     }
 

crates/ui/src/time/date_picker.rs

@@ -325,7 +325,7 @@ impl Render for DatePicker {
                     .cursor_pointer()
                     .overflow_hidden()
                     .input_text_size(self.size)
-                    .when(is_focused, |this| this.outline(cx))
+                    .when(is_focused, |this| this.focusd_border(cx))
                     .input_size(self.size)
                     .when(!self.open, |this| {
                         this.on_click(cx.listener(Self::toggle_calendar))