Add Placeholders to PickList

examples/game_of_life/src/style.rs

@@ -171,6 +171,7 @@ impl pick_list::StyleSheet for PickList {
             },
             border_radius: 2.0,
             icon_size: 0.5,
+            ..pick_list::Style::default()
         }
     }
 

examples/pick_list/src/main.rs

@@ -11,7 +11,7 @@ pub fn main() -> iced::Result {
 struct Example {
     scroll: scrollable::State,
     pick_list: pick_list::State<Language>,
-    selected_language: Language,
+    selected_language: Option<Language>,
 }
 
 #[derive(Debug, Clone, Copy)]
@@ -33,7 +33,7 @@ impl Sandbox for Example {
     fn update(&mut self, message: Message) {
         match message {
             Message::LanguageSelected(language) => {
-                self.selected_language = language;
+                self.selected_language = Some(language);
             }
         }
     }
@@ -42,9 +42,10 @@ impl Sandbox for Example {
         let pick_list = PickList::new(
             &mut self.pick_list,
             &Language::ALL[..],
-            Some(self.selected_language),
+            self.selected_language,
             Message::LanguageSelected,
-        );
+        )
+        .placeholder("Choose a language...");
 
         let mut content = Scrollable::new(&mut self.scroll)
             .width(Length::Fill)

graphics/src/widget/pick_list.rs

@@ -31,12 +31,14 @@ where
         bounds: Rectangle,
         cursor_position: Point,
         selected: Option<String>,
+        placeholder: Option<&str>,
         padding: Padding,
         text_size: u16,
         font: Font,
         style: &Box<dyn StyleSheet>,
     ) -> Self::Output {
         let is_mouse_over = bounds.contains(cursor_position);
+        let is_selected = selected.is_some();
 
         let style = if is_mouse_over {
             style.hovered()
@@ -68,12 +70,16 @@ where
 
         (
             Primitive::Group {
-                primitives: if let Some(label) = selected {
+                primitives: if let Some(label) =
+                    selected.or_else(|| placeholder.map(str::to_string))
+                {
                     let label = Primitive::Text {
                         content: label,
                         size: f32::from(text_size),
                         font,
-                        color: style.text_color,
+                        color: is_selected
+                            .then(|| style.text_color)
+                            .unwrap_or(style.placeholder_color),
                         bounds: Rectangle {
                             x: bounds.x + f32::from(padding.left),
                             y: bounds.center_y(),

native/src/widget/pick_list.rs

@@ -25,6 +25,7 @@ where
     last_selection: &'a mut Option<T>,
     on_selected: Box<dyn Fn(T) -> Message>,
     options: Cow<'a, [T]>,
+    placeholder: Option<String>,
     selected: Option<T>,
     width: Length,
     padding: Padding,
@@ -82,6 +83,7 @@ where
             last_selection,
             on_selected: Box::new(on_selected),
             options: options.into(),
+            placeholder: None,
             selected,
             width: Length::Shrink,
             text_size: None,
@@ -91,6 +93,12 @@ where
         }
     }
 
+    /// Sets the placeholder of the [`PickList`].
+    pub fn placeholder(mut self, placeholder: impl Into<String>) -> Self {
+        self.placeholder = Some(placeholder.into());
+        self
+    }
+
     /// Sets the width of the [`PickList`].
     pub fn width(mut self, width: Length) -> Self {
         self.width = width;
@@ -154,24 +162,34 @@ where
             .pad(self.padding);
 
         let text_size = self.text_size.unwrap_or(renderer.default_size());
+        let font = self.font;
 
         let max_width = match self.width {
             Length::Shrink => {
+                let measure = |label: &str| -> u32 {
+                    let (width, _) = renderer.measure(
+                        label,
+                        text_size,
+                        font,
+                        Size::new(f32::INFINITY, f32::INFINITY),
+                    );
+
+                    width.round() as u32
+                };
+
                 let labels = self.options.iter().map(ToString::to_string);
 
-                labels
-                    .map(|label| {
-                        let (width, _) = renderer.measure(
-                            &label,
-                            text_size,
-                            self.font,
-                            Size::new(f32::INFINITY, f32::INFINITY),
-                        );
-
-                        width.round() as u32
-                    })
-                    .max()
-                    .unwrap_or(100)
+                let labels_width =
+                    labels.map(|label| measure(&label)).max().unwrap_or(100);
+
+                let placeholder_width = self
+                    .placeholder
+                    .as_ref()
+                    .map(String::as_str)
+                    .map(measure)
+                    .unwrap_or(100);
+
+                labels_width.max(placeholder_width)
             }
             _ => 0,
         };
@@ -195,6 +213,8 @@ where
 
         match self.width {
             Length::Shrink => {
+                self.placeholder.hash(state);
+
                 self.options
                     .iter()
                     .map(ToString::to_string)
@@ -265,6 +285,7 @@ where
             layout.bounds(),
             cursor_position,
             self.selected.as_ref().map(ToString::to_string),
+            self.placeholder.as_ref().map(String::as_str),
             self.padding,
             self.text_size.unwrap_or(renderer.default_size()),
             self.font,
@@ -325,6 +346,7 @@ pub trait Renderer: text::Renderer + menu::Renderer {
         bounds: Rectangle,
         cursor_position: Point,
         selected: Option<String>,
+        placeholder: Option<&str>,
         padding: Padding,
         text_size: u16,
         font: Self::Font,

style/src/pick_list.rs

@@ -5,6 +5,7 @@ use iced_core::{Background, Color};
 #[derive(Debug, Clone, Copy)]
 pub struct Style {
     pub text_color: Color,
+    pub placeholder_color: Color,
     pub background: Background,
     pub border_radius: f32,
     pub border_width: f32,
@@ -16,6 +17,7 @@ impl std::default::Default for Style {
     fn default() -> Self {
         Self {
             text_color: Color::BLACK,
+            placeholder_color: [0.4, 0.4, 0.4].into(),
             background: Background::Color([0.87, 0.87, 0.87].into()),
             border_radius: 0.0,
             border_width: 1.0,