Add border and shadow styling to `Button`

8 files changed, 58 insertions, 32 deletions

diff --git a/core/src/vector.rs b/core/src/vector.rs
index 7d87343a..1c09ee3e 100644
--- a/core/src/vector.rs
+++ b/core/src/vector.rs
@@ -31,3 +31,15 @@ where
         Self::new(self.x + b.x, self.y + b.y)
     }
 }
+
+impl<T> Default for Vector<T>
+where
+    T: Default,
+{
+    fn default() -> Self {
+        Self {
+            x: T::default(),
+            y: T::default(),
+        }
+    }
+}
diff --git a/examples/pokedex.rs b/examples/pokedex.rs
index 35d38251..2a696ffe 100644
--- a/examples/pokedex.rs
+++ b/examples/pokedex.rs
@@ -225,7 +225,7 @@ fn button<'a>(state: &'a mut button::State, text: &str) -> Button<'a, Message> {
 }
 
 mod style {
-    use iced::{button, Background, Color};
+    use iced::{button, Background, Color, Vector};
 
     pub enum Button {
         Primary,
@@ -238,8 +238,9 @@ mod style {
                     Button::Primary => Color::from_rgb(0.11, 0.42, 0.87),
                 })),
                 border_radius: 12,
-                shadow_offset: 1.0,
+                shadow_offset: Vector::new(1.0, 1.0),
                 text_color: Color::WHITE,
+                ..button::Style::default()
             }
         }
     }
diff --git a/examples/stopwatch.rs b/examples/stopwatch.rs
index 99746609..9b69f7ca 100644
--- a/examples/stopwatch.rs
+++ b/examples/stopwatch.rs
@@ -180,7 +180,7 @@ mod time {
 }
 
 mod style {
-    use iced::{button, Background, Color};
+    use iced::{button, Background, Color, Vector};
 
     pub enum Button {
         Primary,
@@ -197,8 +197,9 @@ mod style {
                     Button::Destructive => Color::from_rgb(0.8, 0.2, 0.2),
                 })),
                 border_radius: 12,
-                shadow_offset: 1.0,
+                shadow_offset: Vector::new(1.0, 1.0),
                 text_color: Color::WHITE,
+                ..button::Style::default()
             }
         }
     }
diff --git a/examples/todos.rs b/examples/todos.rs
index ca20183f..1563aad5 100644
--- a/examples/todos.rs
+++ b/examples/todos.rs
@@ -551,7 +551,7 @@ impl SavedState {
 }
 
 mod style {
-    use iced::{button, Background, Color};
+    use iced::{button, Background, Color, Vector};
 
     pub enum Button {
         Filter { selected: bool },
@@ -569,31 +569,25 @@ mod style {
                                 Color::from_rgb(0.2, 0.2, 0.7),
                             )),
                             border_radius: 10,
-                            shadow_offset: 0.0,
                             text_color: Color::WHITE,
+                            ..button::Style::default()
                         }
                     } else {
-                        button::Style {
-                            background: None,
-                            border_radius: 0,
-                            shadow_offset: 0.0,
-                            text_color: Color::BLACK,
-                        }
+                        button::Style::default()
                     }
                 }
                 Button::Icon => button::Style {
-                    background: None,
-                    border_radius: 0,
-                    shadow_offset: 0.0,
                     text_color: Color::from_rgb(0.5, 0.5, 0.5),
+                    ..button::Style::default()
                 },
                 Button::Destructive => button::Style {
                     background: Some(Background::Color(Color::from_rgb(
                         0.8, 0.2, 0.2,
                     ))),
                     border_radius: 5,
-                    shadow_offset: 1.0,
                     text_color: Color::WHITE,
+                    shadow_offset: Vector::new(1.0, 1.0),
+                    ..button::Style::default()
                 },
             }
         }
@@ -609,7 +603,7 @@ mod style {
                     }
                     _ => active.text_color,
                 },
-                shadow_offset: active.shadow_offset + 1.0,
+                shadow_offset: active.shadow_offset + Vector::new(0.0, 1.0),
                 ..active
             }
         }
diff --git a/examples/tour.rs b/examples/tour.rs
index d006d397..84e5d516 100644
--- a/examples/tour.rs
+++ b/examples/tour.rs
@@ -27,7 +27,7 @@ impl Sandbox for Tour {
             scroll: scrollable::State::new(),
             back_button: button::State::new(),
             next_button: button::State::new(),
-            debug: true,
+            debug: false,
         }
     }
 
@@ -743,7 +743,7 @@ pub enum Layout {
 }
 
 mod style {
-    use iced::{button, Background, Color};
+    use iced::{button, Background, Color, Vector};
 
     pub enum Button {
         Primary,
@@ -758,15 +758,16 @@ mod style {
                     Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5),
                 })),
                 border_radius: 12,
-                shadow_offset: 1.0,
+                shadow_offset: Vector::new(1.0, 1.0),
                 text_color: Color::from_rgb8(0xEE, 0xEE, 0xEE),
+                ..button::Style::default()
             }
         }
 
         fn hovered(&self) -> button::Style {
             button::Style {
                 text_color: Color::WHITE,
-                shadow_offset: 2.0,
+                shadow_offset: Vector::new(1.0, 2.0),
                 ..self.active()
             }
         }
diff --git a/src/native.rs b/src/native.rs
index 3535ab6a..b7becdc8 100644
--- a/src/native.rs
+++ b/src/native.rs
@@ -1,6 +1,6 @@
 pub use iced_winit::{
     Align, Background, Color, Command, Font, HorizontalAlignment, Length,
-    Space, Subscription, VerticalAlignment,
+    Space, Subscription, Vector, VerticalAlignment,
 };
 
 pub mod widget {
diff --git a/style/src/button.rs b/style/src/button.rs
index 42286897..4a9dac45 100644
--- a/style/src/button.rs
+++ b/style/src/button.rs
@@ -1,15 +1,30 @@
 //! Allow your users to perform actions by pressing a button.
-use iced_core::{Background, Color};
+use iced_core::{Background, Color, Vector};
 
 /// The appearance of a button.
 #[derive(Debug)]
 pub struct Style {
-    pub shadow_offset: f32,
+    pub shadow_offset: Vector,
     pub background: Option<Background>,
     pub border_radius: u16,
+    pub border_width: u16,
+    pub border_color: Color,
     pub text_color: Color,
 }
 
+impl std::default::Default for Style {
+    fn default() -> Self {
+        Style {
+            shadow_offset: Vector::default(),
+            background: None,
+            border_radius: 0,
+            border_width: 0,
+            border_color: Color::TRANSPARENT,
+            text_color: Color::BLACK,
+        }
+    }
+}
+
 /// A set of rules that dictate the style of a button.
 pub trait StyleSheet {
     fn active(&self) -> Style;
@@ -18,14 +33,14 @@ pub trait StyleSheet {
         let active = self.active();
 
         Style {
-            shadow_offset: active.shadow_offset + 1.0,
+            shadow_offset: active.shadow_offset + Vector::new(0.0, 1.0),
             ..active
         }
     }
 
     fn pressed(&self) -> Style {
         Style {
-            shadow_offset: 0.0,
+            shadow_offset: Vector::default(),
             ..self.active()
         }
     }
@@ -34,7 +49,7 @@ pub trait StyleSheet {
         let active = self.active();
 
         Style {
-            shadow_offset: 0.0,
+            shadow_offset: Vector::default(),
             background: active.background.map(|background| match background {
                 Background::Color(color) => Background::Color(Color {
                     a: color.a * 0.5,
@@ -55,9 +70,11 @@ struct Default;
 impl StyleSheet for Default {
     fn active(&self) -> Style {
         Style {
-            shadow_offset: 1.0,
+            shadow_offset: Vector::new(0.0, 1.0),
             background: Some(Background::Color([0.5, 0.5, 0.5].into())),
             border_radius: 5,
+            border_width: 0,
+            border_color: Color::TRANSPARENT,
             text_color: Color::BLACK,
         }
     }
diff --git a/wgpu/src/renderer/widget/button.rs b/wgpu/src/renderer/widget/button.rs
index d00a43a5..63a53473 100644
--- a/wgpu/src/renderer/widget/button.rs
+++ b/wgpu/src/renderer/widget/button.rs
@@ -51,8 +51,8 @@ impl iced_native::button::Renderer for Renderer {
                     primitives: vec![
                         Primitive::Quad {
                             bounds: Rectangle {
-                                x: bounds.x + 1.0,
-                                y: bounds.y + styling.shadow_offset,
+                                x: bounds.x + styling.shadow_offset.x,
+                                y: bounds.y + styling.shadow_offset.y,
                                 ..bounds
                             },
                             background: Background::Color(
@@ -66,8 +66,8 @@ impl iced_native::button::Renderer for Renderer {
                             bounds,
                             background,
                             border_radius: styling.border_radius,
-                            border_width: 0,
-                            border_color: Color::TRANSPARENT,
+                            border_width: styling.border_width,
+                            border_color: styling.border_color,
                         },
                         content,
                     ],