From a2012fd0eb10f68b7e10aa5b6b6cdf0809fee497 Mon Sep 17 00:00:00 2001
From: Steffen <steffen.kluge@mailbox.org>
Date: Sun, 4 May 2025 18:47:57 +0200
Subject: [PATCH] feat: ColorPicker label optional

---
 thaw/src/color_picker/docs/mod.md |  9 +++++++++
 thaw/src/color_picker/mod.rs      | 13 ++++++++-----
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/thaw/src/color_picker/docs/mod.md b/thaw/src/color_picker/docs/mod.md
index d352c1c7..17d0e524 100644
--- a/thaw/src/color_picker/docs/mod.md
+++ b/thaw/src/color_picker/docs/mod.md
@@ -46,6 +46,14 @@ view! {
 }
 ```
 
+### Label
+
+```rust demo
+view! {
+    <ColorPicker label="Color"/>
+}
+```
+
 ### ColorPicker Props
 
 | Name  | Type                      | Default                   | Desciption           |
@@ -53,3 +61,4 @@ view! {
 | class | `MaybeProp<String>`       | `Default::default()`      |                      |
 | value | `Model<Color>`            | `Default::default()`      | Value of the picker. |
 | size  | `Signal<ColorPickerSize>` | `ColorPickerSize::Medium` | Size of the picker.  |
+| label | `MaybeProp<String>`       | `Default::default()`      | Label of the picker. |
diff --git a/thaw/src/color_picker/mod.rs b/thaw/src/color_picker/mod.rs
index 43b7d9e0..3a52ff50 100644
--- a/thaw/src/color_picker/mod.rs
+++ b/thaw/src/color_picker/mod.rs
@@ -19,11 +19,14 @@ pub fn ColorPicker(
     /// Size of the picker.
     #[prop(optional, into)]
     size: Signal<ColorPickerSize>,
+    /// Label of the picker.
+    #[prop(optional, into)]
+    label: MaybeProp<String>,
 ) -> impl IntoView {
     mount_style("color-picker", include_str!("./color-picker.css"));
     let hue = RwSignal::new(0f32);
     let sv = RwSignal::new((0f32, 0f32));
-    let label = RwSignal::new(String::new());
+    let caption = RwSignal::new(String::new());
     let style = Memo::new(move |_| {
         let mut style = String::new();
 
@@ -39,7 +42,7 @@ pub fn ColorPicker(
                     let rgb = Srgb::<u8>::from_format(rgb.clone());
                     let color = format!("rgb({}, {}, {})", rgb.red, rgb.green, rgb.blue);
                     style.push_str(&format!("background-color: {color};"));
-                    label.set(color);
+                    caption.set(color);
                 }
                 Color::HSV(hsv) => {
                     let rgb: Srgb = hsv.clone().into_color();
@@ -53,7 +56,7 @@ pub fn ColorPicker(
                         hsv.saturation * 100.0,
                         hsv.value * 100.0
                     );
-                    label.set(color);
+                    caption.set(color);
                 }
                 Color::HSL(hsl) => {
                     let color = format!(
@@ -63,7 +66,7 @@ pub fn ColorPicker(
                         hsl.lightness * 100.0
                     );
                     style.push_str(&format!("background-color: {color};"));
-                    label.set(color);
+                    caption.set(color);
                 }
             }
         });
@@ -147,7 +150,7 @@ pub fn ColorPicker(
                 node_ref=trigger_ref
             >
                 <div class="thaw-color-picker-trigger__content" style=move || style.get()>
-                    {move || label.get()}
+                    {move || label.get().unwrap_or_else(|| caption.get())}
                 </div>
             </div>
             <Follower slot show=is_show_popover placement=FollowerPlacement::BottomStart>