Draft `Style` and `StyleSheet` for `Button`

4 files changed, 124 insertions, 40 deletions

diff --git a/examples/pokedex.rs b/examples/pokedex.rs
index 2d595ec4..0dcf6981 100644
--- a/examples/pokedex.rs
+++ b/examples/pokedex.rs
@@ -220,7 +220,26 @@ impl From<surf::Exception> for Error {
 
 fn button<'a>(state: &'a mut button::State, text: &str) -> Button<'a, Message> {
     Button::new(state, Text::new(text).color(Color::WHITE))
-        .background(Color::from_rgb(0.11, 0.42, 0.87))
-        .border_radius(10)
         .padding(10)
+        .style(style::Button::Primary)
+}
+
+mod style {
+    use iced::{button, Background, Color};
+
+    pub enum Button {
+        Primary,
+    }
+
+    impl button::StyleSheet for Button {
+        fn active(&self) -> button::Style {
+            button::Style {
+                background: Some(Background::Color(match self {
+                    Button::Primary => Color::from_rgb(0.11, 0.42, 0.87),
+                })),
+                border_radius: 12,
+                shadow_offset: 1.0,
+            }
+        }
+    }
 }
diff --git a/examples/stopwatch.rs b/examples/stopwatch.rs
index 7a7f0793..0e0cdba5 100644
--- a/examples/stopwatch.rs
+++ b/examples/stopwatch.rs
@@ -1,7 +1,6 @@
 use iced::{
-    button, Align, Application, Background, Button, Color, Column, Command,
-    Container, Element, HorizontalAlignment, Length, Row, Settings,
-    Subscription, Text,
+    button, Align, Application, Button, Color, Column, Command, Container,
+    Element, HorizontalAlignment, Length, Row, Settings, Subscription, Text,
 };
 use std::time::{Duration, Instant};
 
@@ -99,7 +98,7 @@ impl Application for Stopwatch {
         .width(Length::Shrink)
         .size(40);
 
-        let button = |state, label, color: [f32; 3]| {
+        let button = |state, label, style| {
             Button::new(
                 state,
                 Text::new(label)
@@ -107,22 +106,22 @@ impl Application for Stopwatch {
                     .horizontal_alignment(HorizontalAlignment::Center),
             )
             .min_width(80)
-            .background(Background::Color(color.into()))
-            .border_radius(10)
             .padding(10)
+            .style(style)
         };
 
         let toggle_button = {
             let (label, color) = match self.state {
-                State::Idle => ("Start", [0.11, 0.42, 0.87]),
-                State::Ticking { .. } => ("Stop", [0.9, 0.4, 0.4]),
+                State::Idle => ("Start", style::Button::Primary),
+                State::Ticking { .. } => ("Stop", style::Button::Destructive),
             };
 
             button(&mut self.toggle, label, color).on_press(Message::Toggle)
         };
 
-        let reset_button = button(&mut self.reset, "Reset", [0.7, 0.7, 0.7])
-            .on_press(Message::Reset);
+        let reset_button =
+            button(&mut self.reset, "Reset", style::Button::Secondary)
+                .on_press(Message::Reset);
 
         let controls = Row::new()
             .width(Length::Shrink)
@@ -180,3 +179,27 @@ mod time {
         }
     }
 }
+
+mod style {
+    use iced::{button, Background, Color};
+
+    pub enum Button {
+        Primary,
+        Secondary,
+        Destructive,
+    }
+
+    impl button::StyleSheet for Button {
+        fn active(&self) -> button::Style {
+            button::Style {
+                background: Some(Background::Color(match self {
+                    Button::Primary => Color::from_rgb(0.11, 0.42, 0.87),
+                    Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5),
+                    Button::Destructive => Color::from_rgb(0.8, 0.2, 0.2),
+                })),
+                border_radius: 12,
+                shadow_offset: 1.0,
+            }
+        }
+    }
+}
diff --git a/examples/todos.rs b/examples/todos.rs
index 42e88f65..00edd7fb 100644
--- a/examples/todos.rs
+++ b/examples/todos.rs
@@ -296,7 +296,8 @@ impl Task {
                             edit_icon().color([0.5, 0.5, 0.5]),
                         )
                         .on_press(TaskMessage::Edit)
-                        .padding(10),
+                        .padding(10)
+                        .style(style::Button::NoBackground),
                     )
                     .into()
             }
@@ -331,8 +332,7 @@ impl Task {
                         )
                         .on_press(TaskMessage::Delete)
                         .padding(10)
-                        .border_radius(5)
-                        .background(Color::from_rgb(0.8, 0.2, 0.2)),
+                        .style(style::Button::Destructive),
                     )
                     .into()
             }
@@ -361,15 +361,12 @@ impl Controls {
             let label = Text::new(label).size(16).width(Length::Shrink);
             let button = if filter == current_filter {
                 Button::new(state, label.color(Color::WHITE))
-                    .background(Color::from_rgb(0.2, 0.2, 0.7))
+                    .style(style::Button::FilterSelected)
             } else {
-                Button::new(state, label)
+                Button::new(state, label).style(style::Button::NoBackground)
             };
 
-            button
-                .on_press(Message::FilterChanged(filter))
-                .padding(8)
-                .border_radius(10)
+            button.on_press(Message::FilterChanged(filter)).padding(8)
         };
 
         Row::new()
@@ -562,3 +559,39 @@ impl SavedState {
         Ok(())
     }
 }
+
+mod style {
+    use iced::{button, Background, Color};
+
+    pub enum Button {
+        FilterSelected,
+        NoBackground,
+        Destructive,
+    }
+
+    impl button::StyleSheet for Button {
+        fn active(&self) -> button::Style {
+            match self {
+                Button::FilterSelected => button::Style {
+                    background: Some(Background::Color(Color::from_rgb(
+                        0.2, 0.2, 0.7,
+                    ))),
+                    border_radius: 10,
+                    shadow_offset: 0.0,
+                },
+                Button::NoBackground => button::Style {
+                    background: None,
+                    border_radius: 0,
+                    shadow_offset: 0.0,
+                },
+                Button::Destructive => button::Style {
+                    background: Some(Background::Color(Color::from_rgb(
+                        0.8, 0.2, 0.2,
+                    ))),
+                    border_radius: 5,
+                    shadow_offset: 1.0,
+                },
+            }
+        }
+    }
+}
diff --git a/examples/tour.rs b/examples/tour.rs
index da05b396..402bf1c4 100644
--- a/examples/tour.rs
+++ b/examples/tour.rs
@@ -62,8 +62,9 @@ impl Sandbox for Tour {
 
         if steps.has_previous() {
             controls = controls.push(
-                secondary_button(back_button, "Back")
-                    .on_press(Message::BackPressed),
+                button(back_button, "Back")
+                    .on_press(Message::BackPressed)
+                    .style(style::Button::Secondary),
             );
         }
 
@@ -71,8 +72,9 @@ impl Sandbox for Tour {
 
         if steps.can_continue() {
             controls = controls.push(
-                primary_button(next_button, "Next")
-                    .on_press(Message::NextPressed),
+                button(next_button, "Next")
+                    .on_press(Message::NextPressed)
+                    .style(style::Button::Primary),
             );
         }
 
@@ -697,24 +699,9 @@ fn button<'a, Message>(
             .horizontal_alignment(HorizontalAlignment::Center),
     )
     .padding(12)
-    .border_radius(12)
     .min_width(100)
 }
 
-fn primary_button<'a, Message>(
-    state: &'a mut button::State,
-    label: &str,
-) -> Button<'a, Message> {
-    button(state, label).background(Color::from_rgb(0.11, 0.42, 0.87))
-}
-
-fn secondary_button<'a, Message>(
-    state: &'a mut button::State,
-    label: &str,
-) -> Button<'a, Message> {
-    button(state, label).background(Color::from_rgb(0.4, 0.4, 0.4))
-}
-
 #[derive(Debug, Clone, Copy, PartialEq, Eq)]
 pub enum Language {
     Rust,
@@ -757,6 +744,28 @@ pub enum Layout {
     Column,
 }
 
+mod style {
+    use iced::{button, Background, Color};
+
+    pub enum Button {
+        Primary,
+        Secondary,
+    }
+
+    impl button::StyleSheet for Button {
+        fn active(&self) -> button::Style {
+            button::Style {
+                background: Some(Background::Color(match self {
+                    Button::Primary => Color::from_rgb(0.11, 0.42, 0.87),
+                    Button::Secondary => Color::from_rgb(0.5, 0.5, 0.5),
+                })),
+                border_radius: 12,
+                shadow_offset: 1.0,
+            }
+        }
+    }
+}
+
 // This should be gracefully handled by Iced in the future. Probably using our
 // own proc macro, or maybe the whole process is streamlined by `wasm-pack` at
 // some point.