Implement TextInput styling in iced_web

native/src/widget/text_input.rs

@@ -9,6 +9,8 @@ use crate::{
     layout, Clipboard, Element, Event, Font, Hasher, Layout, Length, Point,
     Rectangle, Size, Widget,
 };
+
+use std::u32;
 use unicode_segmentation::UnicodeSegmentation;
 
 /// A field that can be filled with text.
@@ -43,7 +45,7 @@ pub struct TextInput<'a, Message, Renderer: self::Renderer> {
     is_secure: bool,
     font: Font,
     width: Length,
-    max_width: Length,
+    max_width: u32,
     padding: u16,
     size: Option<u16>,
     on_change: Box<dyn Fn(String) -> Message>,
@@ -78,7 +80,7 @@ impl<'a, Message, Renderer: self::Renderer> TextInput<'a, Message, Renderer> {
             is_secure: false,
             font: Font::Default,
             width: Length::Fill,
-            max_width: Length::Shrink,
+            max_width: u32::MAX,
             padding: 0,
             size: None,
             on_change: Box::new(on_change),
@@ -114,7 +116,7 @@ impl<'a, Message, Renderer: self::Renderer> TextInput<'a, Message, Renderer> {
     /// Sets the maximum width of the [`TextInput`].
     ///
     /// [`TextInput`]: struct.TextInput.html
-    pub fn max_width(mut self, max_width: Length) -> Self {
+    pub fn max_width(mut self, max_width: u32) -> Self {
         self.max_width = max_width;
         self
     }
@@ -178,6 +180,7 @@ where
         let limits = limits
             .pad(padding)
             .width(self.width)
+            .max_width(self.max_width)
             .height(Length::Units(text_size));
 
         let mut text = layout::Node::new(limits.resolve(Size::ZERO));

web/src/widget/text_input.rs

@@ -8,7 +8,7 @@ use crate::{bumpalo, css, Bus, Css, Element, Length, Widget};
 
 pub use iced_style::text_input::{Style, StyleSheet};
 
-use std::rc::Rc;
+use std::{rc::Rc, u32};
 
 /// A field that can be filled with text.
 ///
@@ -37,12 +37,12 @@ pub struct TextInput<'a, Message> {
     value: String,
     is_secure: bool,
     width: Length,
-    max_width: Length,
+    max_width: u32,
     padding: u16,
     size: Option<u16>,
     on_change: Rc<Box<dyn Fn(String) -> Message>>,
     on_submit: Option<Message>,
-    style: Box<dyn StyleSheet>,
+    style_sheet: Box<dyn StyleSheet>,
 }
 
 impl<'a, Message> TextInput<'a, Message> {
@@ -71,12 +71,12 @@ impl<'a, Message> TextInput<'a, Message> {
             value: String::from(value),
             is_secure: false,
             width: Length::Fill,
-            max_width: Length::Shrink,
+            max_width: u32::MAX,
             padding: 0,
             size: None,
             on_change: Rc::new(Box::new(on_change)),
             on_submit: None,
-            style: Default::default(),
+            style_sheet: Default::default(),
         }
     }
 
@@ -99,7 +99,7 @@ impl<'a, Message> TextInput<'a, Message> {
     /// Sets the maximum width of the [`TextInput`].
     ///
     /// [`TextInput`]: struct.TextInput.html
-    pub fn max_width(mut self, max_width: Length) -> Self {
+    pub fn max_width(mut self, max_width: u32) -> Self {
         self.max_width = max_width;
         self
     }
@@ -133,7 +133,7 @@ impl<'a, Message> TextInput<'a, Message> {
     ///
     /// [`TextInput`]: struct.TextInput.html
     pub fn style(mut self, style: impl Into<Box<dyn StyleSheet>>) -> Self {
-        self.style = style.into();
+        self.style_sheet = style.into();
         self
     }
 }
@@ -151,13 +151,12 @@ where
         use dodrio::builder::*;
         use wasm_bindgen::JsCast;
 
-        let width = css::length(self.width);
-        let max_width = css::length(self.max_width);
         let padding_class =
             style_sheet.insert(bump, css::Rule::Padding(self.padding));
 
         let on_change = self.on_change.clone();
         let event_bus = bus.clone();
+        let style = self.style_sheet.active();
 
         input(bump)
             .attr(
@@ -168,10 +167,15 @@ where
                 "style",
                 bumpalo::format!(
                     in bump,
-                    "width: {}; max-width: {}; font-size: {}px",
-                    width,
-                    max_width,
-                    self.size.unwrap_or(20)
+                    "width: {}; max-width: {}; font-size: {}px; background: {}; border-width: {}px; border-color: {}; border-radius: {}px; color: {}",
+                    css::length(self.width),
+                    css::max_length(self.max_width),
+                    self.size.unwrap_or(20),
+                    css::background(style.background),
+                    style.border_width,
+                    css::color(style.border_color),
+                    style.border_radius,
+                    css::color(self.style_sheet.value_color())
                 )
                 .into_bump_str(),
             )