feat: adds ComboboxOptionGroup

demo_markdown/docs/combobox/mod.md

@@ -1,38 +0,0 @@
-# Combobox
-
-```rust demo
-let selected_options = RwSignal::new(None::<String>);
-
-view! {
-    <Combobox selected_options>
-        <ComboboxOption value="cat" text="Car" />
-        <ComboboxOption value="dog" text="Dog" />
-    </Combobox>
-}
-```
-
-### Clearable
-
-```rust demo
-let selected_options = RwSignal::new(vec![]);
-
-view! {
-    <Combobox selected_options clearable=true>
-        <ComboboxOption value="cat" text="Car" />
-        <ComboboxOption value="dog" text="Dog" />
-    </Combobox>
-}
-```
-
-### Multiselect
-
-```rust demo
-let selected_options = RwSignal::new(vec![]);
-
-view! {
-    <Combobox selected_options>
-        <ComboboxOption value="cat" text="Car" />
-        <ComboboxOption value="dog" text="Dog" />
-    </Combobox>
-}
-```

demo_markdown/src/lib.rs

@@ -39,7 +39,7 @@ pub fn include_md(_token_stream: proc_macro::TokenStream) -> proc_macro::TokenSt
         "CardMdPage" => "../docs/card/mod.md",
         "CheckboxMdPage" => "../docs/checkbox/mod.md",
         "ColorPickerMdPage" => "../docs/color_picker/mod.md",
-        "ComboboxMdPage" => "../docs/combobox/mod.md",
+        "ComboboxMdPage" => "../../thaw/src/combobox/docs/mod.md",
         "ConfigProviderMdPage" => "../docs/config_provider/mod.md",
         "DatePickerMdPage" => "../docs/date_picker/mod.md",
         "DialogMdPage" => "../docs/dialog/mod.md",

thaw/src/combobox/combobox-option-group.css

@@ -0,0 +1,23 @@
+.thaw-combobox-option-group {
+    display: flex;
+    row-gap: var(--spacingHorizontalXXS);
+    flex-direction: column;
+}
+
+.thaw-combobox-option-group__label {
+    display: block;
+    color: var(--colorNeutralForeground3);
+    font-weight: var(--fontWeightSemibold);
+    font-size: var(--fontSizeBase200);
+    line-height: var(--lineHeightBase200);
+    padding: var(--spacingHorizontalS) var(--spacingHorizontalSNudge);
+    border-radius: var(--borderRadiusMedium);
+}
+
+.thaw-combobox-option-group:not(:last-child)::after {
+    content: "";
+    display: block;
+    margin: 0 calc(var(--spacingHorizontalXS) * -1) var(--spacingVerticalXS);
+    padding-bottom: var(--spacingHorizontalXS);
+    border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
+}

thaw/src/combobox/combobox_option_group.rs

@@ -0,0 +1,23 @@
+use leptos::prelude::*;
+use thaw_utils::{class_list, mount_style};
+
+#[component]
+pub fn ComboboxOptionGroup(
+    #[prop(optional, into)] class: MaybeProp<String>,
+    #[prop(into)]  label: String,
+    children: Children,
+) -> impl IntoView {
+    mount_style(
+        "combobox-option-group",
+        include_str!("./combobox-option-group.css"),
+    );
+
+    view! {
+        <div role="group" class=class_list!["thaw-combobox-option-group", class]>
+            <span role="presentation" class="thaw-combobox-option-group__label">
+                {label}
+            </span>
+            {children()}
+        </div>
+    }
+}

thaw/src/combobox/docs/mod.md

@@ -0,0 +1,69 @@
+# Combobox
+
+```rust demo
+let selected_options = RwSignal::new(None::<String>);
+
+view! {
+    <Combobox selected_options>
+        <ComboboxOption value="cat" text="Car" />
+        <ComboboxOption value="dog" text="Dog" />
+    </Combobox>
+}
+```
+
+### Clearable
+
+```rust demo
+let selected_options = RwSignal::new(vec![]);
+
+view! {
+    <Combobox selected_options clearable=true>
+        <ComboboxOption value="cat" text="Car" />
+        <ComboboxOption value="dog" text="Dog" />
+    </Combobox>
+}
+```
+
+### Multiselect
+
+```rust demo
+let selected_options = RwSignal::new(vec![]);
+
+view! {
+    <Combobox selected_options>
+        <ComboboxOption value="cat" text="Car" />
+        <ComboboxOption value="dog" text="Dog" />
+    </Combobox>
+}
+```
+
+### Grouped
+
+```rust demo
+
+let land = vec!["Cat".to_string(), "Dog".to_string(), "Ferret".to_string(), "Hamster".to_string()];
+let water = vec!["Fish".to_string(), "Jellyfish".to_string(), "Octopus".to_string(), "Seal".to_string()];
+
+view! {
+    <Combobox>
+        <ComboboxOptionGroup label="Land">
+            {
+                land.into_iter().map(|option| view!{
+                    <ComboboxOption value={option.clone()}>
+                        {option}
+                    </ComboboxOption>
+                }).collect_view()
+            }
+        </ComboboxOptionGroup>
+        <OptionGroup label="Sea">
+            {
+                water.into_iter().map(|option| view!{
+                    <ComboboxOption value={option.clone()}>
+                        {option}
+                    </ComboboxOption>
+                }).collect_view()
+            }
+        </OptionGroup>
+    </Combobox>
+}
+```

thaw/src/combobox/mod.rs

@@ -1,7 +1,9 @@
 mod combobox;
 mod combobox_option;
+mod combobox_option_group;
 pub(crate) mod listbox;
 mod utils;
 
 pub use combobox::*;
 pub use combobox_option::*;
+pub use combobox_option_group::*;