feat: ColorPicker adds size prop

thaw-ui · Dec 15, 2024 · 08686fc · 08686fc
1 parent 259ecc9
commit 08686fc
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 5 deletions.
diff --git a/thaw/src/color_picker/color-picker.css b/thaw/src/color_picker/color-picker.css
@@ -9,6 +9,18 @@
     cursor: pointer;
 }
 
+.thaw-color-picker-trigger--small {
+    height: 24px;
+    font-size: var(--fontSizeBase200);
+    line-height: var(--lineHeightBase200);
+}
+
+.thaw-color-picker-trigger--large {
+    height: 40px;
+    font-size: var(--fontSizeBase400);
+    line-height: var(--lineHeightBase400);
+}
+
 .thaw-color-picker-trigger__content {
     display: flex;
     justify-content: center;

diff --git a/thaw/src/color_picker/docs/mod.md b/thaw/src/color_picker/docs/mod.md
@@ -30,9 +30,24 @@ view! {
 }
 ```
 
+### Size
+
+```rust demo
+use palette::Srgb;
+
+let value = RwSignal::new(Color::from(Srgb::new(0.0, 0.0, 0.0)));
+
+view! {
+    <ColorPicker value size=ColorPickerSize::Small/>
+    <ColorPicker value/>
+    <ColorPicker value size=ColorPickerSize::Large/>
+}
+```
+
 ### ColorPicker Props
 
-| Name  | Type                | Default              | Desciption           |
-| ----- | ------------------- | -------------------- | -------------------- |
-| class | `MaybeProp<String>` | `Default::default()` |                      |
-| value | `Model<Color>`      | `Default::default()` | Value of the picker. |
+| Name  | Type                      | Default                   | Desciption           |
+| ----- | ------------------------- | ------------------------- | -------------------- |
+| class | `MaybeProp<String>`       | `Default::default()`      |                      |
+| value | `Model<Color>`            | `Default::default()`      | Value of the picker. |
+| size  | `Signal<ColorPickerSize>` | `ColorPickerSize::Medium` | Size of the picker.  |
diff --git a/thaw/src/color_picker/mod.rs b/thaw/src/color_picker/mod.rs
@@ -1,6 +1,8 @@
 mod color;
+mod types;
 
 pub use color::*;
+pub use types::*;
 
 use crate::ConfigInjection;
 use leptos::leptos_dom::helpers::WindowListenerHandle;
@@ -15,6 +17,9 @@ pub fn ColorPicker(
     /// Value of the picker.
     #[prop(optional, into)]
     value: Model<Color>,
+    /// Size of the picker.
+    #[prop(optional, into)]
+    size: Signal<ColorPickerSize>,
 ) -> impl IntoView {
     mount_style("color-picker", include_str!("./color-picker.css"));
     let config_provider = ConfigInjection::expect_context();
@@ -135,7 +140,11 @@ pub fn ColorPicker(
     view! {
         <Binder>
             <div
-                class=class_list!["thaw-color-picker-trigger", class]
+                class=class_list![
+                    "thaw-color-picker-trigger",
+                    move || format!("thaw-color-picker-trigger--{}", size.get().as_str()),
+                    class
+                ]
                 on:click=show_popover
                 node_ref=trigger_ref
             >

diff --git a/thaw/src/color_picker/types.rs b/thaw/src/color_picker/types.rs
@@ -0,0 +1,17 @@
+#[derive(Debug, Default, PartialEq, Clone, Copy)]
+pub enum ColorPickerSize {
+    Small,
+    #[default]
+    Medium,
+    Large,
+}
+
+impl ColorPickerSize {
+    pub fn as_str(&self) -> &'static str {
+        match self {
+            Self::Small => "small",
+            Self::Medium => "medium",
+            Self::Large => "large",
+        }
+    }
+}