Add support for asymmetrical padding

6 files changed, 80 insertions, 72 deletions

diff --git a/web/src/widget/button.rs b/web/src/widget/button.rs
index 7c389a9f..0e75fa3f 100644
--- a/web/src/widget/button.rs
+++ b/web/src/widget/button.rs
@@ -1,7 +1,7 @@
 //! Allow your users to perform actions by pressing a button.
 //!
 //! A [`Button`] has some local [`State`].
-use crate::{css, Background, Bus, Css, Element, Length, Widget};
+use crate::{css, Background, Bus, Css, Element, Length, Padding, Widget};
 
 pub use iced_style::button::{Style, StyleSheet};
 
@@ -30,7 +30,7 @@ pub struct Button<'a, Message> {
     min_width: u32,
     #[allow(dead_code)]
     min_height: u32,
-    padding: u16,
+    padding: Padding,
     style: Box<dyn StyleSheet>,
 }
 
@@ -48,7 +48,7 @@ impl<'a, Message> Button<'a, Message> {
             height: Length::Shrink,
             min_width: 0,
             min_height: 0,
-            padding: 5,
+            padding: Padding::new(5),
             style: Default::default(),
         }
     }
@@ -77,9 +77,14 @@ impl<'a, Message> Button<'a, Message> {
         self
     }
 
-    /// Sets the padding of the [`Button`].
-    pub fn padding(mut self, padding: u16) -> Self {
-        self.padding = padding;
+    /// Sets the [`Padding`] of the [`Button`].
+    ///```ignore
+    /// Button::new(/*...*/).padding(20);              // 20px on all sides
+    /// Button::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Button::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -122,9 +127,6 @@ where
         // TODO: State-based styling
         let style = self.style.active();
 
-        let padding_class =
-            style_sheet.insert(bump, css::Rule::Padding(self.padding));
-
         let background = match style.background {
             None => String::from("none"),
             Some(background) => match background {
@@ -132,25 +134,19 @@ where
             },
         };
 
-        let class = {
-            use dodrio::bumpalo::collections::String;
-
-            String::from_str_in(&padding_class, bump).into_bump_str()
-        };
-
         let mut node = button(bump)
-            .attr("class", class)
             .attr(
                 "style",
                 bumpalo::format!(
                     in bump,
                     "background: {}; border-radius: {}px; width:{}; \
-                    min-width: {}; color: {}",
+                    min-width: {}; color: {}; padding: {}",
                     background,
                     style.border_radius,
                     css::length(self.width),
                     css::min_length(self.min_width),
-                    css::color(style.text_color)
+                    css::color(style.text_color),
+                    css::padding(self.padding)
                 )
                 .into_bump_str(),
             )
diff --git a/web/src/widget/column.rs b/web/src/widget/column.rs
index d832fdcb..a4c99046 100644
--- a/web/src/widget/column.rs
+++ b/web/src/widget/column.rs
@@ -1,4 +1,4 @@
-use crate::{css, Align, Bus, Css, Element, Length, Widget};
+use crate::{css, Align, Bus, Css, Element, Length, Padding, Widget};
 
 use dodrio::bumpalo;
 use std::u32;
@@ -9,7 +9,7 @@ use std::u32;
 #[allow(missing_debug_implementations)]
 pub struct Column<'a, Message> {
     spacing: u16,
-    padding: u16,
+    padding: Padding,
     width: Length,
     height: Length,
     max_width: u32,
@@ -28,7 +28,7 @@ impl<'a, Message> Column<'a, Message> {
     pub fn with_children(children: Vec<Element<'a, Message>>) -> Self {
         Column {
             spacing: 0,
-            padding: 0,
+            padding: Padding::ZERO,
             width: Length::Fill,
             height: Length::Shrink,
             max_width: u32::MAX,
@@ -48,9 +48,14 @@ impl<'a, Message> Column<'a, Message> {
         self
     }
 
-    /// Sets the padding of the [`Column`].
-    pub fn padding(mut self, units: u16) -> Self {
-        self.padding = units;
+    /// Sets the [`Padding`] of the [`Column`].
+    ///```ignore
+    /// Column::new(/*...*/).padding(20);              // 20px on all sides
+    /// Column::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Column::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -114,23 +119,21 @@ impl<'a, Message> Widget<Message> for Column<'a, Message> {
         let spacing_class =
             style_sheet.insert(bump, css::Rule::Spacing(self.spacing));
 
-        let padding_class =
-            style_sheet.insert(bump, css::Rule::Padding(self.padding));
-
         // TODO: Complete styling
         div(bump)
             .attr(
                 "class",
-                bumpalo::format!(in bump, "{} {} {}", column_class, spacing_class, padding_class)
+                bumpalo::format!(in bump, "{} {}", column_class, spacing_class)
                     .into_bump_str(),
             )
             .attr("style", bumpalo::format!(
                     in bump,
-                    "width: {}; height: {}; max-width: {}; max-height: {}; align-items: {}",
+                    "width: {}; height: {}; max-width: {}; max-height: {}; padding: {}; align-items: {}",
                     css::length(self.width),
                     css::length(self.height),
                     css::max_length(self.max_width),
                     css::max_length(self.max_height),
+                    css::padding(self.padding),
                     css::align(self.align_items)
                 ).into_bump_str()
             )
diff --git a/web/src/widget/container.rs b/web/src/widget/container.rs
index 8de3cc41..9040f2ae 100644
--- a/web/src/widget/container.rs
+++ b/web/src/widget/container.rs
@@ -1,5 +1,5 @@
 //! Decorate content and apply alignment.
-use crate::{bumpalo, css, Align, Bus, Css, Element, Length, Widget};
+use crate::{bumpalo, css, Align, Bus, Css, Element, Length, Padding, Widget};
 
 pub use iced_style::container::{Style, StyleSheet};
 
@@ -8,7 +8,7 @@ pub use iced_style::container::{Style, StyleSheet};
 /// It is normally used for alignment purposes.
 #[allow(missing_debug_implementations)]
 pub struct Container<'a, Message> {
-    padding: u16,
+    padding: Padding,
     width: Length,
     height: Length,
     max_width: u32,
@@ -29,7 +29,7 @@ impl<'a, Message> Container<'a, Message> {
         use std::u32;
 
         Container {
-            padding: 0,
+            padding: Padding::ZERO,
             width: Length::Shrink,
             height: Length::Shrink,
             max_width: u32::MAX,
@@ -41,9 +41,14 @@ impl<'a, Message> Container<'a, Message> {
         }
     }
 
-    /// Sets the padding of the [`Container`].
-    pub fn padding(mut self, units: u16) -> Self {
-        self.padding = units;
+    /// Sets the [`Padding`] of the [`Container`].
+    ///```ignore
+    /// Container::new(/*...*/).padding(20);              // 20px on all sides
+    /// Container::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Container::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -106,24 +111,22 @@ where
 
         let column_class = style_sheet.insert(bump, css::Rule::Column);
 
-        let padding_class =
-            style_sheet.insert(bump, css::Rule::Padding(self.padding));
-
         let style = self.style_sheet.style();
 
         let node = div(bump)
             .attr(
                 "class",
-                bumpalo::format!(in bump, "{} {}", column_class, padding_class).into_bump_str(),
+                bumpalo::format!(in bump, "{}", column_class).into_bump_str(),
             )
             .attr(
                 "style",
                 bumpalo::format!(
                     in bump,
-                    "width: {}; height: {}; max-width: {}; align-items: {}; justify-content: {}; background: {}; color: {}; border-width: {}px; border-color: {}; border-radius: {}px",
+                    "width: {}; height: {}; max-width: {}; padding: {}; align-items: {}; justify-content: {}; background: {}; color: {}; border-width: {}px; border-color: {}; border-radius: {}px",
                     css::length(self.width),
                     css::length(self.height),
                     css::max_length(self.max_width),
+                    css::padding(self.padding),
                     css::align(self.horizontal_alignment),
                     css::align(self.vertical_alignment),
                     style.background.map(css::background).unwrap_or(String::from("initial")),
diff --git a/web/src/widget/row.rs b/web/src/widget/row.rs
index f00a544a..e0df294e 100644
--- a/web/src/widget/row.rs
+++ b/web/src/widget/row.rs
@@ -1,4 +1,4 @@
-use crate::{css, Align, Bus, Css, Element, Length, Widget};
+use crate::{css, Align, Bus, Css, Element, Length, Padding, Widget};
 
 use dodrio::bumpalo;
 use std::u32;
@@ -9,7 +9,7 @@ use std::u32;
 #[allow(missing_debug_implementations)]
 pub struct Row<'a, Message> {
     spacing: u16,
-    padding: u16,
+    padding: Padding,
     width: Length,
     height: Length,
     max_width: u32,
@@ -28,7 +28,7 @@ impl<'a, Message> Row<'a, Message> {
     pub fn with_children(children: Vec<Element<'a, Message>>) -> Self {
         Row {
             spacing: 0,
-            padding: 0,
+            padding: Padding::ZERO,
             width: Length::Fill,
             height: Length::Shrink,
             max_width: u32::MAX,
@@ -48,9 +48,14 @@ impl<'a, Message> Row<'a, Message> {
         self
     }
 
-    /// Sets the padding of the [`Row`].
-    pub fn padding(mut self, units: u16) -> Self {
-        self.padding = units;
+    /// Sets the [`Padding`] of the [`Row`].
+    ///```ignore
+    /// Row::new(/*...*/).padding(20);              // 20px on all sides
+    /// Row::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Row::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -114,23 +119,21 @@ impl<'a, Message> Widget<Message> for Row<'a, Message> {
         let spacing_class =
             style_sheet.insert(bump, css::Rule::Spacing(self.spacing));
 
-        let padding_class =
-            style_sheet.insert(bump, css::Rule::Padding(self.padding));
-
         // TODO: Complete styling
         div(bump)
             .attr(
                 "class",
-                bumpalo::format!(in bump, "{} {} {}", row_class, spacing_class, padding_class)
+                bumpalo::format!(in bump, "{} {}", row_class, spacing_class)
                     .into_bump_str(),
             )
             .attr("style", bumpalo::format!(
                     in bump,
-                    "width: {}; height: {}; max-width: {}; max-height: {}; align-items: {}",
+                    "width: {}; height: {}; max-width: {}; max-height: {}; padding: {}; align-items: {}",
                     css::length(self.width),
                     css::length(self.height),
                     css::max_length(self.max_width),
                     css::max_length(self.max_height),
+                    css::padding(self.padding),
                     css::align(self.align_items)
                 ).into_bump_str()
             )
diff --git a/web/src/widget/scrollable.rs b/web/src/widget/scrollable.rs
index bd9260ff..10f633de 100644
--- a/web/src/widget/scrollable.rs
+++ b/web/src/widget/scrollable.rs
@@ -1,5 +1,7 @@
 //! Navigate an endless amount of content with a scrollbar.
-use crate::{bumpalo, css, Align, Bus, Column, Css, Element, Length, Widget};
+use crate::{
+    bumpalo, css, Align, Bus, Column, Css, Element, Length, Padding, Widget,
+};
 
 pub use iced_style::scrollable::{Scrollbar, Scroller, StyleSheet};
 
@@ -39,9 +41,14 @@ impl<'a, Message> Scrollable<'a, Message> {
         self
     }
 
-    /// Sets the padding of the [`Scrollable`].
-    pub fn padding(mut self, units: u16) -> Self {
-        self.content = self.content.padding(units);
+    /// Sets the [`Padding`] of the [`Scrollable`].
+    ///```ignore
+    /// Scrollable::new(/*...*/).padding(20);              // 20px on all sides
+    /// Scrollable::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// Scrollable::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```    
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.content = self.content.padding(padding);
         self
     }
 
diff --git a/web/src/widget/text_input.rs b/web/src/widget/text_input.rs
index bc2048a8..c671f80e 100644
--- a/web/src/widget/text_input.rs
+++ b/web/src/widget/text_input.rs
@@ -1,7 +1,7 @@
 //! Display fields that can be filled with text.
 //!
 //! A [`TextInput`] has some local [`State`].
-use crate::{bumpalo, css, Bus, Css, Element, Length, Widget};
+use crate::{bumpalo, css, Bus, Css, Element, Length, Padding, Widget};
 
 pub use iced_style::text_input::{Style, StyleSheet};
 
@@ -35,7 +35,7 @@ pub struct TextInput<'a, Message> {
     is_secure: bool,
     width: Length,
     max_width: u32,
-    padding: u16,
+    padding: Padding,
     size: Option<u16>,
     on_change: Rc<Box<dyn Fn(String) -> Message>>,
     on_submit: Option<Message>,
@@ -66,7 +66,7 @@ impl<'a, Message> TextInput<'a, Message> {
             is_secure: false,
             width: Length::Fill,
             max_width: u32::MAX,
-            padding: 0,
+            padding: Padding::ZERO,
             size: None,
             on_change: Rc::new(Box::new(on_change)),
             on_submit: None,
@@ -92,9 +92,14 @@ impl<'a, Message> TextInput<'a, Message> {
         self
     }
 
-    /// Sets the padding of the [`TextInput`].
-    pub fn padding(mut self, units: u16) -> Self {
-        self.padding = units;
+    /// Sets the [`Padding`] of the [`TextInput`].
+    ///```ignore
+    /// TextInput::new(/*...*/).padding(20);              // 20px on all sides
+    /// TextInput::new(/*...*/).padding([10, 20]);        // top/bottom, left/right
+    /// TextInput::new(/*...*/).padding([5, 10, 15, 20]); // top, right, bottom, left
+    /// ```
+    pub fn padding<P: Into<Padding>>(mut self, padding: P) -> Self {
+        self.padding = padding.into();
         self
     }
 
@@ -131,15 +136,6 @@ where
         use dodrio::builder::*;
         use wasm_bindgen::JsCast;
 
-        let class = {
-            use dodrio::bumpalo::collections::String;
-
-            let padding_class =
-                style_sheet.insert(bump, css::Rule::Padding(self.padding));
-
-            String::from_str_in(&padding_class, bump).into_bump_str()
-        };
-
         let placeholder = {
             use dodrio::bumpalo::collections::String;
 
@@ -159,16 +155,16 @@ where
         let style = self.style_sheet.active();
 
         input(bump)
-            .attr("class", class)
             .attr(
                 "style",
                 bumpalo::format!(
                     in bump,
-                    "width: {}; max-width: {}; font-size: {}px; \
+                    "width: {}; max-width: {}; padding: {}; font-size: {}px; \
                     background: {}; border-width: {}px; border-color: {}; \
                     border-radius: {}px; color: {}",
                     css::length(self.width),
                     css::max_length(self.max_width),
+                    css::padding(self.padding),
                     self.size.unwrap_or(20),
                     css::background(style.background),
                     style.border_width,