Skip to main content

patternfly_yew/components/toolbar/
group.rs

1use crate::prelude::{
2    AsClasses, ExtendClasses, ToolbarAlignment, ToolbarElementModifier, WithBreakpoints,
3};
4use yew::prelude::*;
5
6#[derive(Clone, Copy, Debug, Default, Eq, PartialEq)]
7pub enum GroupVariant {
8    #[default]
9    None,
10    Button,
11    Filter,
12    IconButton,
13}
14
15impl AsClasses for GroupVariant {
16    fn extend_classes(&self, classes: &mut Classes) {
17        classes.push(match self {
18            Self::None => "",
19            Self::Button => "pf-m-button-group",
20            Self::Filter => "pf-m-filter-group",
21            Self::IconButton => "pf-m-icon-button-group",
22        });
23    }
24}
25
26/// Properties for [`ToolbarGroup`]
27#[derive(Clone, PartialEq, Properties)]
28pub struct ToolbarGroupProperties {
29    #[prop_or_default]
30    pub id: Option<AttrValue>,
31
32    #[prop_or_default]
33    pub children: Html,
34    #[prop_or_default]
35    pub modifiers: WithBreakpoints<ToolbarElementModifier>,
36    #[prop_or_default]
37    pub variant: GroupVariant,
38
39    /// Cross-axis alignment of this element within its parent
40    #[prop_or_default]
41    pub align_self: Option<ToolbarAlignment>,
42
43    /// Cross-axis alignment of the children of this element
44    #[prop_or_default]
45    pub align_items: Option<ToolbarAlignment>,
46
47    /// Additional classes
48    #[prop_or_default]
49    pub class: Classes,
50}
51
52/// A group item for a toolbar
53#[function_component(ToolbarGroup)]
54pub fn toolbar_group(props: &ToolbarGroupProperties) -> Html {
55    let mut class = Classes::from("pf-v6-c-toolbar__group");
56
57    class.extend_from(&props.modifiers);
58    class.extend_from(&props.variant);
59    if let Some(align_self) = props.align_self {
60        class.push(align_self.align_self_class());
61    }
62    if let Some(align_items) = props.align_items {
63        class.push(align_items.align_items_class());
64    }
65    class.extend(props.class.clone());
66
67    html! { <div id={&props.id} {class}>{ props.children.clone() }</div> }
68}