Feat/component disabled

thaw/src/accordion/accordion_item.rs

@@ -72,9 +72,7 @@ pub fn AccordionItem(
                 </button>
             </div>
             <CSSTransition show=is_show_panel name="thaw-accordion-panel">
-                <div class="thaw-accordion-panel">
-                    {children()}
-                </div>
+                <div class="thaw-accordion-panel">{children()}</div>
             </CSSTransition>
         </div>
     }

thaw/src/color_picker/color-picker.css

@@ -28,6 +28,10 @@
     height: 100%;
 }
 
+.thaw-color-picker-trigger--disabled {
+    cursor: not-allowed;
+}
+
 div.thaw-color-picker-popover {
     width: 240px;
     padding: var(--spacingVerticalM) var(--spacingHorizontalM);

thaw/src/color_picker/docs/mod.md

@@ -46,10 +46,23 @@ view! {
 }
 ```
 
+### Disabled
+
+```rust demo
+use palette::Srgb;
+
+let value = RwSignal::new(Color::from(Srgb::new(0.0, 0.0, 0.0)));
+
+view! {
+    <ColorPicker value disabled=true />
+}
+```
+
 ### ColorPicker Props
 
-| 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.  |
+| Name     | Type                      | Default                   | Desciption                           |
+| -------- | ------------------------- | ------------------------- | ------------------------------------ |
+| class    | `MaybeProp<String>`       | `Default::default()`      |                                      |
+| disabled | `Signal<bool>`            | `false`                   | Whether to disable the color picker. |
+| value    | `Model<Color>`            | `Default::default()`      | Value of the picker.                 |
+| size     | `Signal<ColorPickerSize>` | `ColorPickerSize::Medium` | Size of the picker.                  |

thaw/src/color_picker/mod.rs

@@ -19,6 +19,9 @@ pub fn ColorPicker(
     /// Size of the picker.
     #[prop(optional, into)]
     size: Signal<ColorPickerSize>,
+    /// Whether to disable the color picker.
+    #[prop(optional, into)]
+    disabled: Signal<bool>,
 ) -> impl IntoView {
     mount_style("color-picker", include_str!("./color-picker.css"));
     let hue = RwSignal::new(0f32);
@@ -104,6 +107,9 @@ pub fn ColorPicker(
     let trigger_ref = NodeRef::<html::Div>::new();
     let popover_ref = NodeRef::<html::Div>::new();
     let show_popover = move |_| {
+        if disabled.get() {
+            return;
+        }
         is_show_popover.set(true);
     };
 
@@ -140,6 +146,7 @@ pub fn ColorPicker(
             <div
                 class=class_list![
                     "thaw-color-picker-trigger",
+                    ("thaw-color-picker-trigger--disabled", move || disabled.get()),
                     move || format!("thaw-color-picker-trigger--{}", size.get().as_str()),
                     class
                 ]

thaw/src/date_picker/docs/mod.md

@@ -25,12 +25,21 @@ view! {
 }
 ```
 
+### Disabled
+
+```rust demo
+view! {
+    <DatePicker disabled=true/>
+}
+```
+
 ### DatePicker Props
 
 | Name | Type | Default | Desciption |
 | --- | --- | --- | --- |
 | class | `MaybeProp<String>` | `Default::default()` |  |
 | id | `MaybeProp<String>` | `Default::default()` |  |
+| disabled | `Signal<bool>` | `false` | Whether the date picker is disabled. |
 | name | `MaybeProp<String>` | `Default::default()` | A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. |
 | rules | `Vec<DatePickerRule<T>>` | `vec![]` | The rules to validate Field. |
 | value | `OptionModel<NaiveDate>` | `Default::default()` | Set the date picker value. |

thaw/src/date_picker/mod.rs

@@ -18,6 +18,9 @@ use thaw_utils::{
 pub fn DatePicker(
     #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] id: MaybeProp<String>,
+    /// Whether the date picker is disabled.
+    #[prop(optional, into)]
+    disabled: Signal<bool>,
     /// A string specifying a name for the input control.
     /// This name is submitted along with the control's value when the form data is submitted.
     #[prop(optional, into)]
@@ -92,6 +95,9 @@ pub fn DatePicker(
     };
 
     let open_panel = move || {
+        if disabled.get() {
+            return;
+        }
         if is_show_panel.get() {
             return;
         }
@@ -112,6 +118,7 @@ pub fn DatePicker(
                 <Input
                     id
                     name
+                    disabled
                     value=show_date_text
                     on_focus=move |_| open_panel()
                     size=Signal::derive(move || size.get().into())

thaw/src/date_picker/panel/date_panel.rs

@@ -147,17 +147,19 @@ pub fn DatePanel(
                     />
                 </div>
                 <div class="thaw-date-picker-date-panel__weekdays">
-                    {move|| {
-                        let first_weekday_number = locale.get().first_weekday().num_days_from_sunday() as u8;
+                    {move || {
+                        let first_weekday_number = locale
+                            .get()
+                            .first_weekday()
+                            .num_days_from_sunday() as u8;
                         let last_weekday_number = first_weekday_number + 6;
                         (first_weekday_number..=last_weekday_number)
                             .into_iter()
                             .map(|n| {
-                                view! { <span>{locale.get().ab_day(n%7)}</span>}
+                                view! { <span>{locale.get().ab_day(n % 7)}</span> }
                             })
                             .collect_view()
-                        }
-                    }
+                    }}
                 </div>
                 <div class="thaw-date-picker-date-panel__dates">
                     {move || {
@@ -181,7 +183,7 @@ pub fn DatePanel(
             </div>
             <div class="thaw-date-picker-date-panel__footer">
                 <Button size=ButtonSize::Small on_click=now>
-                    { move || locale.get().today() }
+                    {move || locale.get().today()}
                 </Button>
             </div>
         </div>

thaw/src/date_picker/panel/month_panel.rs

@@ -93,7 +93,9 @@ fn MonthPanelItem(date_panel_show_date: RwSignal<NaiveDate>, month: Month) -> im
             class="thaw-date-picker-month-panel__item"
             class=("thaw-date-picker-month-panel__item--selected", move || is_selected.get())
         >
-            <div class="thaw-date-picker-month-panel__item-month">{locale.get().ab_month(month.number_from_month() as u8)}</div>
+            <div class="thaw-date-picker-month-panel__item-month">
+                {locale.get().ab_month(month.number_from_month() as u8)}
+            </div>
         </div>
     }
 }

thaw/src/icon/icons/mod.rs

@@ -32,8 +32,8 @@ pub fn ChevronRight12RegularIcon() -> impl IntoView {
         >
             <path
                 d="M4.65 2.15a.5.5 0 0 0 0 .7L7.79 6 4.65 9.15a.5.5 0 1 0 .7.7l3.5-3.5a.5.5 0 0 0 0-.7l-3.5-3.5a.5.5 0 0 0-.7 0Z"
-                fill="currentColor">
-            </path>
+                fill="currentColor"
+            ></path>
         </svg>
     }
 }

thaw/src/input/input.css

@@ -166,6 +166,8 @@
     cursor: not-allowed;
 }
 
+.thaw-input--disabled > .thaw-input__prefix,
+.thaw-input--disabled > .thaw-input__suffix,
 .thaw-input--disabled > .thaw-input__input::placeholder {
     color: var(--colorNeutralForegroundDisabled);
 }

thaw/src/popover/mod.rs

@@ -167,7 +167,11 @@ where
                     on:mouseleave=on_mouse_leave
                 >
                     {children()}
-                    <div class="thaw-popover-surface__angle" style=arrow_style node_ref=arrow_ref></div>
+                    <div
+                        class="thaw-popover-surface__angle"
+                        style=arrow_style
+                        node_ref=arrow_ref
+                    ></div>
                 </div>
             </Follower>
         </crate::_binder::Binder>

thaw/src/radio/docs/mod.md

@@ -24,6 +24,19 @@ view! {
 }
 ```
 
+## Disabled
+
+RadioGroup can be disabled, which disables all Radio items inside.
+
+```rust demo
+view! {
+    <RadioGroup value="a".to_string() disabled=true>
+        <Radio value="a" label="Apple"/>
+        <Radio value="o" label="Orange"/>
+    </RadioGroup>
+}
+```
+
 ### Radio Props
 
 | Name  | Type                | Default              | Description                                         |
@@ -38,6 +51,7 @@ view! {
 | --- | --- | --- | --- |
 | class | `MaybeProp<String>` | `Default::default()` |  |
 | id | `MaybeProp<String>` | `Default::default()` |  |
+| disabled | `Signal<bool>` | `false` | Disable all Radio items in this group. |
 | name | `MaybeProp<String>` | `Default::default()` | A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. |
 | rules | `Vec<RadioGroupRule>` | `vec![]` | The rules to validate Field. |
 | value | `OptionModel<String>` | `Default::default()` | The selected Radio item in this group. |

thaw/src/radio/mod.rs

@@ -44,6 +44,7 @@ pub fn Radio(
                 class="thaw-radio__input"
                 type="radio"
                 id=id.clone()
+                disabled=group.disabled
                 name=group.name
                 value=item_value.get_value()
                 prop:checked=move || checked.get()

thaw/src/radio/radio.css

@@ -50,11 +50,11 @@
     color: var(--colorCompoundBrandForeground1);
 }
 
-.thaw-radio__input:hover:checked ~ .thaw-radio__indicator {
+.thaw-radio__input:hover:checked:not(:disabled) ~ .thaw-radio__indicator {
     color: var(--colorCompoundBrandForeground1Hover);
 }
 
-.thaw-radio__input:hover:active ~ .thaw-radio__indicator {
+.thaw-radio__input:hover:active:not(:disabled) ~ .thaw-radio__indicator {
     color: var(--colorCompoundBrandForeground1Pressed);
 }
 
@@ -71,6 +71,11 @@
     content: "";
 }
 
+.thaw-radio__input:disabled ~ .thaw-radio__indicator {
+    border-color: var(--colorNeutralStrokeDisabled);
+    color: var(--colorNeutralForegroundDisabled);
+}
+
 .thaw-radio__label {
     margin-bottom: calc((16px - var(--lineHeightBase300)) / 2);
     margin-top: calc((16px - var(--lineHeightBase300)) / 2);
@@ -100,3 +105,8 @@
 .thaw-radio__input:enabled ~ .thaw-radio__label {
     cursor: pointer;
 }
+
+.thaw-radio__input:disabled ~ .thaw-radio__label {
+    color: var(--colorNeutralForegroundDisabled);
+    cursor: default;
+}

thaw/src/radio/radio_group.rs

@@ -7,7 +7,12 @@ use thaw_utils::{class_list, OptionModel};
 pub fn RadioGroup(
     #[prop(optional, into)] class: MaybeProp<String>,
     #[prop(optional, into)] id: MaybeProp<String>,
-    #[prop(optional, into)] rules: Vec<RadioGroupRule>,
+    /// Disable all Radio items in this group.
+    #[prop(optional, into)]
+    disabled: Signal<bool>,
+    /// The rules to validate Field.
+    #[prop(optional, into)]
+    rules: Vec<RadioGroupRule>,
     /// The selected Radio item in this group.
     #[prop(optional, into)]
     value: OptionModel<String>,
@@ -32,7 +37,11 @@ pub fn RadioGroup(
     });
 
     view! {
-        <Provider value=RadioGroupInjection { value, name }>
+        <Provider value=RadioGroupInjection {
+            value,
+            name,
+            disabled,
+        }>
             <div class=class_list!["thaw-radio-group", class] id=id role="radiogroup">
                 {children()}
             </div>
@@ -44,6 +53,7 @@ pub fn RadioGroup(
 pub(crate) struct RadioGroupInjection {
     pub value: OptionModel<String>,
     pub name: Signal<String>,
+    pub disabled: Signal<bool>,
 }
 
 impl RadioGroupInjection {

thaw/src/slider/docs/mod.md

@@ -31,6 +31,31 @@ view! {
 }
 ```
 
+### Disabled
+
+A disabled slider will not change or fire events on click or keyboard press.
+
+```rust demo
+let value = RwSignal::new(0.0);
+
+view! {
+    <Flex vertical=true inline=true>
+        <Slider value disabled=true />
+        <Slider value max=10.0 step=5.0 disabled=true>
+            <SliderLabel value=0.0>
+                "0"
+            </SliderLabel>
+            <SliderLabel value=5.0>
+                "5"
+            </SliderLabel>
+            <SliderLabel value=10.0>
+                "10"
+            </SliderLabel>
+        </Slider>
+    </Flex>
+}
+```
+
 ## Slider Label
 
 ```rust demo
@@ -58,6 +83,7 @@ view! {
 | class | `MaybeProp<String>` | `Default::default()` |  |
 | style | `MaybeProp<String>` | `Default::default()` |  |
 | id | `MaybeProp<String>` | `Default::default()` |  |
+| disabled | `Signal<bool>` | `false` | Whether the slider is disabled. |
 | name | `MaybeProp<String>` | `Default::default()` | A string specifying a name for the input control. This name is submitted along with the control's value when the form data is submitted. |
 | rules | `Vec<InputRule>` | `vec![]` | The rules to validate Field. |
 | value | `Model<f64>` | `0` | The current value of the controlled Slider. |

thaw/src/slider/docs/range-slider.md

@@ -34,13 +34,36 @@ view! {
 }
 ```
 
+### Disabled
+
+```rust demo
+let value = RwSignal::new((6.0, 8.0));
+
+view! {
+    <Flex vertical=true inline=true>
+        <RangeSlider value step=5.0 disabled=true style="width: 400px"/>
+        <RangeSlider value max=10.0 step=5.0 disabled=true style="width: 400px" >
+            <SliderLabel value=0.0>
+                "0"
+            </SliderLabel>
+            <SliderLabel value=5.0>
+                "5"
+            </SliderLabel>
+            <SliderLabel value=10.0>
+                "10"
+            </SliderLabel>
+        </RangeSlider>
+    </Flex>
+}
+```
+
 ### SliderLabel
 
 ```rust demo
 let value = RwSignal::new((0.0, 1.0));
 
 view! {
-    <RangeSlider value max=10.0 step=5.0  style="width: 400px" >
+    <RangeSlider value max=10.0 step=5.0 style="width: 400px" >
         <SliderLabel value=0.0>
             "0"
         </SliderLabel>
@@ -60,6 +83,7 @@ view! {
 | --- | --- | --- | --- |
 | class | `MaybeProp<String>` | `Default::default()` |  |
 | style | `MaybeProp<String>` | `Default::default()` |  |
+| disabled | `Signal<bool>` | `false` | Whether the slider is disabled. |
 | value | `Model<(f64, f64)>` | `(0.0, 0.0)` | The current value of the controlled Slider. |
 | min | `Signal<f64>` | `0` | Min value of the slider. |
 | max | `Signal<f64>` | `100` | Max value of the slider. |