Extend border radius on relevant widgets

19 files changed, 111 insertions, 99 deletions

diff --git a/core/src/border_radius.rs b/core/src/border_radius.rs
new file mode 100644
index 00000000..a444dd74
--- /dev/null
+++ b/core/src/border_radius.rs
@@ -0,0 +1,22 @@
+/// The border radii for the corners of a graphics primitive in the order:
+/// top-left, top-right, bottom-right, bottom-left.
+#[derive(Debug, Clone, Copy, PartialEq, Default)]
+pub struct BorderRadius([f32; 4]);
+
+impl From<f32> for BorderRadius {
+    fn from(w: f32) -> Self {
+        Self([w; 4])
+    }
+}
+
+impl From<[f32; 4]> for BorderRadius {
+    fn from(radi: [f32; 4]) -> Self {
+        Self(radi)
+    }
+}
+
+impl From<BorderRadius> for [f32; 4] {
+    fn from(radi: BorderRadius) -> Self {
+        radi.0
+    }
+}
diff --git a/core/src/lib.rs b/core/src/lib.rs
index 6de5ada4..76d775e7 100644
--- a/core/src/lib.rs
+++ b/core/src/lib.rs
@@ -44,6 +44,7 @@ pub mod window;
 
 mod angle;
 mod background;
+mod border_radius;
 mod color;
 mod content_fit;
 mod element;
@@ -60,6 +61,7 @@ mod vector;
 pub use alignment::Alignment;
 pub use angle::{Degrees, Radians};
 pub use background::Background;
+pub use border_radius::BorderRadius;
 pub use clipboard::Clipboard;
 pub use color::Color;
 pub use content_fit::ContentFit;
diff --git a/core/src/renderer.rs b/core/src/renderer.rs
index 007a0370..7c73d2e4 100644
--- a/core/src/renderer.rs
+++ b/core/src/renderer.rs
@@ -6,7 +6,7 @@ mod null;
 pub use null::Null;
 
 use crate::layout;
-use crate::{Background, Color, Element, Rectangle, Vector};
+use crate::{Background, BorderRadius, Color, Element, Rectangle, Vector};
 
 /// A component that can be used by widgets to draw themselves on a screen.
 pub trait Renderer: Sized {
@@ -60,29 +60,6 @@ pub struct Quad {
     pub border_color: Color,
 }
 
-/// The border radii for the corners of a graphics primitive in the order:
-/// top-left, top-right, bottom-right, bottom-left.
-#[derive(Debug, Clone, Copy, PartialEq, Default)]
-pub struct BorderRadius([f32; 4]);
-
-impl From<f32> for BorderRadius {
-    fn from(w: f32) -> Self {
-        Self([w; 4])
-    }
-}
-
-impl From<[f32; 4]> for BorderRadius {
-    fn from(radi: [f32; 4]) -> Self {
-        Self(radi)
-    }
-}
-
-impl From<BorderRadius> for [f32; 4] {
-    fn from(radi: BorderRadius) -> Self {
-        radi.0
-    }
-}
-
 /// The styling attributes of a [`Renderer`].
 #[derive(Debug, Clone, Copy, PartialEq)]
 pub struct Style {
diff --git a/examples/modal/src/main.rs b/examples/modal/src/main.rs
index f48afb69..9e1e4c2f 100644
--- a/examples/modal/src/main.rs
+++ b/examples/modal/src/main.rs
@@ -418,7 +418,7 @@ mod modal {
             renderer.fill_quad(
                 renderer::Quad {
                     bounds: layout.bounds(),
-                    border_radius: renderer::BorderRadius::from(0.0),
+                    border_radius: Default::default(),
                     border_width: 0.0,
                     border_color: Color::TRANSPARENT,
                 },
diff --git a/examples/scrollable/src/main.rs b/examples/scrollable/src/main.rs
index 9d57cb94..efc880e3 100644
--- a/examples/scrollable/src/main.rs
+++ b/examples/scrollable/src/main.rs
@@ -289,13 +289,18 @@ impl Application for ScrollableDemo {
             }
             Direction::Horizontal => {
                 progress_bar(0.0..=1.0, self.current_scroll_offset.x)
-                    .style(progress_bar_custom_style)
+                    .style(theme::ProgressBar::Custom(Box::new(
+                        ProgressBarCustomStyle,
+                    )))
                     .into()
             }
             Direction::Multi => column![
                 progress_bar(0.0..=1.0, self.current_scroll_offset.y),
-                progress_bar(0.0..=1.0, self.current_scroll_offset.x)
-                    .style(progress_bar_custom_style)
+                progress_bar(0.0..=1.0, self.current_scroll_offset.x).style(
+                    theme::ProgressBar::Custom(Box::new(
+                        ProgressBarCustomStyle,
+                    ))
+                )
             ]
             .spacing(10)
             .into(),
@@ -351,12 +356,12 @@ impl scrollable::StyleSheet for ScrollbarCustomStyle {
                 background: style
                     .active(&theme::Scrollable::default())
                     .background,
-                border_radius: 0.0,
+                border_radius: 0.0.into(),
                 border_width: 0.0,
                 border_color: Default::default(),
                 scroller: Scroller {
                     color: Color::from_rgb8(250, 85, 134),
-                    border_radius: 0.0,
+                    border_radius: 0.0.into(),
                     border_width: 0.0,
                     border_color: Default::default(),
                 },
@@ -367,10 +372,16 @@ impl scrollable::StyleSheet for ScrollbarCustomStyle {
     }
 }
 
-fn progress_bar_custom_style(theme: &Theme) -> progress_bar::Appearance {
-    progress_bar::Appearance {
-        background: theme.extended_palette().background.strong.color.into(),
-        bar: Color::from_rgb8(250, 85, 134).into(),
-        border_radius: 0.0,
+struct ProgressBarCustomStyle;
+
+impl progress_bar::StyleSheet for ProgressBarCustomStyle {
+    type Style = Theme;
+
+    fn appearance(&self, style: &Self::Style) -> progress_bar::Appearance {
+        progress_bar::Appearance {
+            background: style.extended_palette().background.strong.color.into(),
+            bar: Color::from_rgb8(250, 85, 134).into(),
+            border_radius: 0.0.into(),
+        }
     }
 }
diff --git a/style/src/button.rs b/style/src/button.rs
index 32ec28b7..e49ad94a 100644
--- a/style/src/button.rs
+++ b/style/src/button.rs
@@ -1,5 +1,5 @@
 //! Change the apperance of a button.
-use iced_core::{Background, Color, Vector};
+use iced_core::{Background, BorderRadius, Color, Vector};
 
 /// The appearance of a button.
 #[derive(Debug, Clone, Copy)]
@@ -9,7 +9,7 @@ pub struct Appearance {
     /// The [`Background`] of the button.
     pub background: Option<Background>,
     /// The border radius of the button.
-    pub border_radius: f32,
+    pub border_radius: BorderRadius,
     /// The border width of the button.
     pub border_width: f32,
     /// The border [`Color`] of the button.
@@ -23,7 +23,7 @@ impl std::default::Default for Appearance {
         Self {
             shadow_offset: Vector::default(),
             background: None,
-            border_radius: 0.0,
+            border_radius: 0.0.into(),
             border_width: 0.0,
             border_color: Color::TRANSPARENT,
             text_color: Color::BLACK,
diff --git a/style/src/checkbox.rs b/style/src/checkbox.rs
index 52b90ec9..cf52c05d 100644
--- a/style/src/checkbox.rs
+++ b/style/src/checkbox.rs
@@ -1,5 +1,5 @@
 //! Change the appearance of a checkbox.
-use iced_core::{Background, Color};
+use iced_core::{Background, BorderRadius, Color};
 
 /// The appearance of a checkbox.
 #[derive(Debug, Clone, Copy)]
@@ -9,7 +9,7 @@ pub struct Appearance {
     /// The icon [`Color`] of the checkbox.
     pub icon_color: Color,
     /// The border radius of the checkbox.
-    pub border_radius: f32,
+    pub border_radius: BorderRadius,
     /// The border width of the checkbox.
     pub border_width: f32,
     /// The border [`Color`] of the checkbox.
diff --git a/style/src/container.rs b/style/src/container.rs
index 560b2d5b..ec543ae4 100644
--- a/style/src/container.rs
+++ b/style/src/container.rs
@@ -1,5 +1,5 @@
 //! Change the appearance of a container.
-use iced_core::{Background, Color};
+use iced_core::{Background, BorderRadius, Color};
 
 /// The appearance of a container.
 #[derive(Debug, Clone, Copy)]
@@ -9,7 +9,7 @@ pub struct Appearance {
     /// The [`Background`] of the container.
     pub background: Option<Background>,
     /// The border radius of the container.
-    pub border_radius: f32,
+    pub border_radius: BorderRadius,
     /// The border width of the container.
     pub border_width: f32,
     /// The border [`Color`] of the container.
@@ -21,7 +21,7 @@ impl std::default::Default for Appearance {
         Self {
             text_color: None,
             background: None,
-            border_radius: 0.0,
+            border_radius: 0.0.into(),
             border_width: 0.0,
             border_color: Color::TRANSPARENT,
         }
diff --git a/style/src/menu.rs b/style/src/menu.rs
index 7d878748..dbf19dae 100644
--- a/style/src/menu.rs
+++ b/style/src/menu.rs
@@ -1,5 +1,5 @@
 //! Change the appearance of menus.
-use iced_core::{Background, Color};
+use iced_core::{Background, BorderRadius, Color};
 
 /// The appearance of a menu.
 #[derive(Debug, Clone, Copy)]
@@ -11,7 +11,7 @@ pub struct Appearance {
     /// The border width of the menu.
     pub border_width: f32,
     /// The border radius of the menu.
-    pub border_radius: f32,
+    pub border_radius: BorderRadius,
     /// The border [`Color`] of the menu.
     pub border_color: Color,
     /// The text [`Color`] of a selected option in the menu.
diff --git a/style/src/pane_grid.rs b/style/src/pane_grid.rs
index c1002725..b99af955 100644
--- a/style/src/pane_grid.rs
+++ b/style/src/pane_grid.rs
@@ -1,5 +1,5 @@
 //! Change the appearance of a pane grid.
-use iced_core::{Background, Color};
+use iced_core::{Background, BorderRadius, Color};
 
 /// The appearance of the hovered region of a pane grid.
 #[derive(Debug, Clone, Copy)]
@@ -11,7 +11,7 @@ pub struct Appearance {
     /// The border [`Color`] of the hovered pane region.
     pub border_color: Color,
     /// The border radius of the hovered pane region.
-    pub border_radius: f32,
+    pub border_radius: BorderRadius,
 }
 
 /// A line.
diff --git a/style/src/pick_list.rs b/style/src/pick_list.rs
index 11e13b01..961c1e93 100644
--- a/style/src/pick_list.rs
+++ b/style/src/pick_list.rs
@@ -1,5 +1,5 @@
 //! Change the appearance of a pick list.
-use iced_core::{Background, Color};
+use iced_core::{Background, BorderRadius, Color};
 
 /// The appearance of a pick list.
 #[derive(Debug, Clone, Copy)]
@@ -13,7 +13,7 @@ pub struct Appearance {
     /// The [`Background`] of the pick list.
     pub background: Background,
     /// The border radius of the pick list.
-    pub border_radius: f32,
+    pub border_radius: BorderRadius,
     /// The border width of the pick list.
     pub border_width: f32,
     /// The border color of the pick list.
diff --git a/style/src/progress_bar.rs b/style/src/progress_bar.rs
index fb1819fc..c05a6ee4 100644
--- a/style/src/progress_bar.rs
+++ b/style/src/progress_bar.rs
@@ -1,5 +1,5 @@
 //! Change the appearance of a progress bar.
-use iced_core::Background;
+use iced_core::{Background, BorderRadius};
 
 /// The appearance of a progress bar.
 #[derive(Debug, Clone, Copy)]
@@ -9,7 +9,7 @@ pub struct Appearance {
     /// The [`Background`] of the bar of the progress bar.
     pub bar: Background,
     /// The border radius of the progress bar.
-    pub border_radius: f32,
+    pub border_radius: BorderRadius,
 }
 
 /// A set of rules that dictate the style of a progress bar.
diff --git a/style/src/rule.rs b/style/src/rule.rs
index b7380747..afae085c 100644
--- a/style/src/rule.rs
+++ b/style/src/rule.rs
@@ -1,5 +1,5 @@
 //! Change the appearance of a rule.
-use iced_core::Color;
+use iced_core::{BorderRadius, Color};
 
 /// The appearance of a rule.
 #[derive(Debug, Clone, Copy)]
@@ -9,7 +9,7 @@ pub struct Appearance {
     /// The width (thickness) of the rule line.
     pub width: u16,
     /// The radius of the line corners.
-    pub radius: f32,
+    pub radius: BorderRadius,
     /// The [`FillMode`] of the rule.
     pub fill_mode: FillMode,
 }
diff --git a/style/src/scrollable.rs b/style/src/scrollable.rs
index b528c444..952c11e1 100644
--- a/style/src/scrollable.rs
+++ b/style/src/scrollable.rs
@@ -1,5 +1,5 @@
 //! Change the appearance of a scrollable.
-use iced_core::{Background, Color};
+use iced_core::{Background, BorderRadius, Color};
 
 /// The appearance of a scrollable.
 #[derive(Debug, Clone, Copy)]
@@ -7,7 +7,7 @@ pub struct Scrollbar {
     /// The [`Background`] of a scrollable.
     pub background: Option<Background>,
     /// The border radius of a scrollable.
-    pub border_radius: f32,
+    pub border_radius: BorderRadius,
     /// The border width of a scrollable.
     pub border_width: f32,
     /// The border [`Color`] of a scrollable.
@@ -22,7 +22,7 @@ pub struct Scroller {
     /// The [`Color`] of the scroller.
     pub color: Color,
     /// The border radius of the scroller.
-    pub border_radius: f32,
+    pub border_radius: BorderRadius,
     /// The border width of the scroller.
     pub border_width: f32,
     /// The border [`Color`] of the scroller.
diff --git a/style/src/slider.rs b/style/src/slider.rs
index 884d3871..ca115f46 100644
--- a/style/src/slider.rs
+++ b/style/src/slider.rs
@@ -1,5 +1,5 @@
 //! Change the apperance of a slider.
-use iced_core::Color;
+use iced_core::{BorderRadius, Color};
 
 /// The appearance of a slider.
 #[derive(Debug, Clone, Copy)]
@@ -45,7 +45,7 @@ pub enum HandleShape {
         /// The width of the rectangle.
         width: u16,
         /// The border radius of the corners of the rectangle.
-        border_radius: f32,
+        border_radius: BorderRadius,
     },
 }
 
diff --git a/style/src/text_input.rs b/style/src/text_input.rs
index 2616ad5a..90251b5c 100644
--- a/style/src/text_input.rs
+++ b/style/src/text_input.rs
@@ -1,5 +1,5 @@
 //! Change the appearance of a text input.
-use iced_core::{Background, Color};
+use iced_core::{Background, BorderRadius, Color};
 
 /// The appearance of a text input.
 #[derive(Debug, Clone, Copy)]
@@ -7,7 +7,7 @@ pub struct Appearance {
     /// The [`Background`] of the text input.
     pub background: Background,
     /// The border radius of the text input.
-    pub border_radius: f32,
+    pub border_radius: BorderRadius,
     /// The border width of the text input.
     pub border_width: f32,
     /// The border [`Color`] of the text input.
diff --git a/style/src/theme.rs b/style/src/theme.rs
index 9500fe9d..4a8ee749 100644
--- a/style/src/theme.rs
+++ b/style/src/theme.rs
@@ -157,7 +157,7 @@ impl button::StyleSheet for Theme {
         let palette = self.extended_palette();
 
         let appearance = button::Appearance {
-            border_radius: 2.0,
+            border_radius: 2.0.into(),
             ..button::Appearance::default()
         };
 
@@ -346,7 +346,7 @@ fn checkbox_appearance(
             base.color
         }),
         icon_color,
-        border_radius: 2.0,
+        border_radius: 2.0.into(),
         border_width: 1.0,
         border_color: accent.color,
         text_color: None,
@@ -383,7 +383,7 @@ impl container::StyleSheet for Theme {
                 container::Appearance {
                     text_color: None,
                     background: Some(palette.background.weak.color.into()),
-                    border_radius: 2.0,
+                    border_radius: 2.0.into(),
                     border_width: 0.0,
                     border_color: Color::TRANSPARENT,
                 }
@@ -422,7 +422,7 @@ impl slider::StyleSheet for Theme {
                 let handle = slider::Handle {
                     shape: slider::HandleShape::Rectangle {
                         width: 8,
-                        border_radius: 4.0,
+                        border_radius: 4.0.into(),
                     },
                     color: Color::WHITE,
                     border_color: Color::WHITE,
@@ -507,7 +507,7 @@ impl menu::StyleSheet for Theme {
                     text_color: palette.background.weak.text,
                     background: palette.background.weak.color.into(),
                     border_width: 1.0,
-                    border_radius: 0.0,
+                    border_radius: 0.0.into(),
                     border_color: palette.background.strong.color,
                     selected_text_color: palette.primary.strong.text,
                     selected_background: palette.primary.strong.color.into(),
@@ -553,7 +553,7 @@ impl pick_list::StyleSheet for Theme {
                     background: palette.background.weak.color.into(),
                     placeholder_color: palette.background.strong.color,
                     handle_color: palette.background.weak.text,
-                    border_radius: 2.0,
+                    border_radius: 2.0.into(),
                     border_width: 1.0,
                     border_color: palette.background.strong.color,
                 }
@@ -572,7 +572,7 @@ impl pick_list::StyleSheet for Theme {
                     background: palette.background.weak.color.into(),
                     placeholder_color: palette.background.strong.color,
                     handle_color: palette.background.weak.text,
-                    border_radius: 2.0,
+                    border_radius: 2.0.into(),
                     border_width: 1.0,
                     border_color: palette.primary.strong.color,
                 }
@@ -729,7 +729,7 @@ impl pane_grid::StyleSheet for Theme {
                     }),
                     border_width: 2.0,
                     border_color: palette.primary.strong.color,
-                    border_radius: 0.0,
+                    border_radius: 0.0.into(),
                 }
             }
             PaneGrid::Custom(custom) => custom.hovered_region(self),
@@ -800,7 +800,7 @@ impl progress_bar::StyleSheet for Theme {
         let from_palette = |bar: Color| progress_bar::Appearance {
             background: palette.background.strong.color.into(),
             bar: bar.into(),
-            border_radius: 2.0,
+            border_radius: 2.0.into(),
         };
 
         match style {
@@ -846,7 +846,7 @@ impl rule::StyleSheet for Theme {
             Rule::Default => rule::Appearance {
                 color: palette.background.strong.color,
                 width: 1,
-                radius: 0.0,
+                radius: 0.0.into(),
                 fill_mode: rule::FillMode::Full,
             },
             Rule::Custom(custom) => custom.appearance(self),
@@ -929,12 +929,12 @@ impl scrollable::StyleSheet for Theme {
 
                 scrollable::Scrollbar {
                     background: Some(palette.background.weak.color.into()),
-                    border_radius: 2.0,
+                    border_radius: 2.0.into(),
                     border_width: 0.0,
                     border_color: Color::TRANSPARENT,
                     scroller: scrollable::Scroller {
                         color: palette.background.strong.color,
-                        border_radius: 2.0,
+                        border_radius: 2.0.into(),
                         border_width: 0.0,
                         border_color: Color::TRANSPARENT,
                     },
@@ -956,12 +956,12 @@ impl scrollable::StyleSheet for Theme {
 
                     scrollable::Scrollbar {
                         background: Some(palette.background.weak.color.into()),
-                        border_radius: 2.0,
+                        border_radius: 2.0.into(),
                         border_width: 0.0,
                         border_color: Color::TRANSPARENT,
                         scroller: scrollable::Scroller {
                             color: palette.primary.strong.color,
-                            border_radius: 2.0,
+                            border_radius: 2.0.into(),
                             border_width: 0.0,
                             border_color: Color::TRANSPARENT,
                         },
@@ -1063,7 +1063,7 @@ impl text_input::StyleSheet for Theme {
 
         text_input::Appearance {
             background: palette.background.base.color.into(),
-            border_radius: 2.0,
+            border_radius: 2.0.into(),
             border_width: 1.0,
             border_color: palette.background.strong.color,
             icon_color: palette.background.weak.text,
@@ -1079,7 +1079,7 @@ impl text_input::StyleSheet for Theme {
 
         text_input::Appearance {
             background: palette.background.base.color.into(),
-            border_radius: 2.0,
+            border_radius: 2.0.into(),
             border_width: 1.0,
             border_color: palette.background.base.text,
             icon_color: palette.background.weak.text,
@@ -1095,7 +1095,7 @@ impl text_input::StyleSheet for Theme {
 
         text_input::Appearance {
             background: palette.background.base.color.into(),
-            border_radius: 2.0,
+            border_radius: 2.0.into(),
             border_width: 1.0,
             border_color: palette.primary.strong.color,
             icon_color: palette.background.weak.text,
@@ -1141,7 +1141,7 @@ impl text_input::StyleSheet for Theme {
 
         text_input::Appearance {
             background: palette.background.weak.color.into(),
-            border_radius: 2.0,
+            border_radius: 2.0.into(),
             border_width: 1.0,
             border_color: palette.background.strong.color,
             icon_color: palette.background.strong.color,
diff --git a/widget/src/slider.rs b/widget/src/slider.rs
index 18a49665..d3c4a936 100644
--- a/widget/src/slider.rs
+++ b/widget/src/slider.rs
@@ -368,16 +368,16 @@ pub fn draw<T, R>(
         style_sheet.active(style)
     };
 
-    let (handle_width, handle_height, handle_border_radius) = match style
-        .handle
-        .shape
-    {
-        HandleShape::Circle { radius } => (radius * 2.0, radius * 2.0, radius),
-        HandleShape::Rectangle {
-            width,
-            border_radius,
-        } => (f32::from(width), bounds.height, border_radius),
-    };
+    let (handle_width, handle_height, handle_border_radius) =
+        match style.handle.shape {
+            HandleShape::Circle { radius } => {
+                (radius * 2.0, radius * 2.0, radius.into())
+            }
+            HandleShape::Rectangle {
+                width,
+                border_radius,
+            } => (f32::from(width), bounds.height, border_radius),
+        };
 
     let value = value.into() as f32;
     let (range_start, range_end) = {
diff --git a/widget/src/vertical_slider.rs b/widget/src/vertical_slider.rs
index 2635611d..3b2430c4 100644
--- a/widget/src/vertical_slider.rs
+++ b/widget/src/vertical_slider.rs
@@ -366,16 +366,16 @@ pub fn draw<T, R>(
         style_sheet.active(style)
     };
 
-    let (handle_width, handle_height, handle_border_radius) = match style
-        .handle
-        .shape
-    {
-        HandleShape::Circle { radius } => (radius * 2.0, radius * 2.0, radius),
-        HandleShape::Rectangle {
-            width,
-            border_radius,
-        } => (f32::from(width), bounds.width, border_radius),
-    };
+    let (handle_width, handle_height, handle_border_radius) =
+        match style.handle.shape {
+            HandleShape::Circle { radius } => {
+                (radius * 2.0, radius * 2.0, radius.into())
+            }
+            HandleShape::Rectangle {
+                width,
+                border_radius,
+            } => (f32::from(width), bounds.width, border_radius),
+        };
 
     let value = value.into() as f32;
     let (range_start, range_end) = {
@@ -431,7 +431,7 @@ pub fn draw<T, R>(
                 width: handle_height,
                 height: handle_width,
             },
-            border_radius: handle_border_radius.into(),
+            border_radius: handle_border_radius,
             border_width: style.handle.border_width,
             border_color: style.handle.border_color,
         },