ui_storybook/components/primitives/
select_pill.rs

1//! `SelectPill` — compact pill button that opens a popover (M-UI.4 /
2//! AUT-124).
3//!
4//! Visual only. Clicking opens the popover; the parent owns the open
5//! state and the popover content.
6
7use leptos::prelude::*;
8
9use crate::components::primitives::ChevronDown;
10
11#[component]
12pub fn SelectPill(
13    /// Optional leading glyph.
14    #[prop(optional, into)]
15    icon: Option<String>,
16    /// Selected label shown inside the pill.
17    #[prop(into)]
18    label: String,
19    /// `true` when the parent's popover is open. Drives the rotation of
20    /// the trailing chevron.
21    #[prop(optional)]
22    open: bool,
23    /// `true` to render disabled.
24    #[prop(optional)]
25    disabled: bool,
26) -> impl IntoView {
27    let mut class = String::from("select-pill");
28    if open {
29        class.push_str(" select-pill-open");
30    }
31    view! {
32        <button
33            class=class
34            aria-haspopup="listbox"
35            aria-expanded=open
36            disabled=disabled
37        >
38            {icon.map(|i| view! { <span class="select-pill-icon" aria-hidden="true">{i}</span> })}
39            <span class="select-pill-label">{label}</span>
40            <span class="select-pill-chevron" aria-hidden="true">
41                <ChevronDown />
42            </span>
43        </button>
44    }
45}
ui_storybook/components/primitives/select_pill.rs

ui_storybook/components/primitives/
select_pill.rs
