feat(segmented-button): Selection style and implementation

examples/cosmic/src/window.rs

@@ -129,7 +129,8 @@ pub struct Window {
     debug: bool,
     theme: Theme,
     slider_value: f32,
-    demo_tab_state: segmented_button::State<DemoView>,
+    demo_view_switcher: segmented_button::State<DemoView>,
+    demo_selection: segmented_button::State<()>,
     spin_button: SpinButtonModel<i32>,
     checkbox_value: bool,
     toggler_value: bool,
@@ -166,6 +167,7 @@ pub enum Message {
     CondensedViewToggle(()),
     Debug(bool),
     DemoTabActivate(segmented_button::Key),
+    DemoSelectionActivate(segmented_button::Key),
     Drag,
     InputChanged,
     Maximize,
@@ -271,20 +273,30 @@ impl Application for Window {
         window.spin_button.min = -10;
         window.spin_button.max = 10;
 
+        // Configures the demo view switcher.
         let key = window
-            .demo_tab_state
+            .demo_view_switcher
             .insert(String::from("Tab A"), DemoView::TabA);
 
-        window.demo_tab_state.activate(key);
+        window.demo_view_switcher.activate(key);
 
         window
-            .demo_tab_state
+            .demo_view_switcher
             .insert(String::from("Tab B"), DemoView::TabB);
 
         window
-            .demo_tab_state
+            .demo_view_switcher
             .insert(String::from("Tab C"), DemoView::TabC);
 
+        // Configures the demo selection button.
+        let key = window.
+            demo_selection
+            .insert(String::from("Choice A"), ());
+
+        window.demo_selection.activate(key);
+        window.demo_selection.insert(String::from("Choice B"), ());
+        window.demo_selection.insert(String::from("Choice C"), ());
+
         (window, Command::none())
     }
 
@@ -341,7 +353,8 @@ impl Application for Window {
             Message::InputChanged => {}
             Message::SpinButton(msg) => self.spin_button.update(msg),
             Message::CondensedViewToggle(_) => {}
-            Message::DemoTabActivate(key) => self.demo_tab_state.activate(key),
+            Message::DemoTabActivate(key) => self.demo_view_switcher.activate(key),
+            Message::DemoSelectionActivate(key) => self.demo_selection.activate(key),
         }
 
         Command::none()

examples/cosmic/src/window/demo.rs

@@ -1,7 +1,7 @@
 use cosmic::{
     iced::widget::{checkbox, pick_list, progress_bar, radio, row, slider},
     iced::{Alignment, Length},
-    theme::{Button as ButtonTheme, Theme},
+    theme::{self, Button as ButtonTheme, Theme},
     widget::{button, segmented_button, settings, toggler},
     Element,
 };
@@ -30,10 +30,11 @@ impl Window {
 
         settings::view_column(vec![
             self.page_title(Page::Demo),
-            segmented_button(&self.demo_tab_state)
+            segmented_button(&self.demo_view_switcher)
+                .height(Length::Units(48))
                 .on_activate(Message::DemoTabActivate)
                 .into(),
-            match self.demo_tab_state.active_data() {
+            match self.demo_view_switcher.active_data() {
                 None => panic!("no tab is active"),
                 Some(DemoView::TabA) => settings::view_column(vec![
                     settings::view_section("Debug")
@@ -117,9 +118,15 @@ impl Window {
                 .padding(0)
                 .into(),
                 Some(DemoView::TabB) => {
-                    settings::view_column(vec![settings::view_section("Tab B")
+                    settings::view_column(vec![
-                        .add(cosmic::iced::widget::text("Nothing here yet").width(Length::Fill))
+                        cosmic::iced::widget::text("SegmentedButton::Selection")
-                        .into()])
+                            .font(cosmic::font::FONT_SEMIBOLD)
+                            .into(),
+                        segmented_button(&self.demo_selection)
+                            .style(theme::SegmentedButton::Selection)
+                            .on_activate(Message::DemoSelectionActivate)
+                            .into()
+                    ])
                     .padding(0)
                     .into()
                 }

src/theme/mod.rs

@@ -871,6 +871,8 @@ pub enum SegmentedButton {
     /// A tabbed widget for switching between views in an interface.
     #[default]
     ViewSwitcher,
+    /// A widget for multiple choice selection.
+    Selection,
     /// Or implement any custom theme of your liking.
     Custom(fn(&Theme) -> segmented_button::Appearance)
 }
@@ -913,6 +915,39 @@ impl segmented_button::StyleSheet for Theme {
                     }
                 }
             }
+            SegmentedButton::Selection => {
+                let cosmic = self.cosmic();
+                segmented_button::Appearance {
+                    background: None,
+                    border_color: Color::TRANSPARENT,
+                    border_radius: BorderRadius::from(0.0),
+                    border_width: 0.0,
+                    button_active: segmented_button::ButtonAppearance {
+                        background: Some(Background::Color(cosmic.secondary.component.divider.into())),
+                        border_bottom: None,
+                        border_radius_first: BorderRadius::from([24.0, 0.0, 0.0, 24.0]),
+                        border_radius_last: BorderRadius::from([0.0, 24.0, 24.0, 0.0]),
+                        border_radius_middle: BorderRadius::from(0.0),
+                        text_color: cosmic.accent.base.into(),
+                    },
+                    button_inactive: segmented_button::ButtonAppearance {
+                        background: Some(Background::Color(cosmic.secondary.component.base.into())),
+                        border_bottom: None,
+                        border_radius_first: BorderRadius::from([24.0, 0.0, 0.0, 24.0]),
+                        border_radius_last: BorderRadius::from([0.0, 24.0, 24.0, 0.0]),
+                        border_radius_middle: BorderRadius::from(0.0),
+                        text_color: cosmic.primary.on.into(),
+                    },
+                    button_hover: segmented_button::ButtonAppearance {
+                        background: Some(Background::Color(cosmic.primary.component.hover.into())),
+                        border_bottom: None,
+                        border_radius_first: BorderRadius::from([24.0, 0.0, 0.0, 24.0]),
+                        border_radius_last: BorderRadius::from([0.0, 24.0, 24.0, 0.0]),
+                        border_radius_middle: BorderRadius::from(0.0),
+                        text_color: cosmic.accent.base.into(),
+                    }
+                }
+            }
             SegmentedButton::Custom(func) => func(self)
         }
     }

src/widget/segmented_button/mod.rs

@@ -1,6 +1,5 @@
 /// Copyright 2022 System76 <info@system76.com>
 // SPDX-License-Identifier: MPL-2.0
-
 mod state;
 mod style;
 
@@ -49,7 +48,7 @@ where
     pub fn new(state: &'a WidgetState) -> Self {
         Self {
             state,
-            height: Length::Units(48),
+            height: Length::Units(32),
             width: Length::Fill,
             spacing: 0,
             style: <Renderer::Theme as StyleSheet>::Style::default(),

src/widget/segmented_button/state.rs

@@ -1,6 +1,5 @@
 /// Copyright 2022 System76 <info@system76.com>
 // SPDX-License-Identifier: MPL-2.0
-
 use slotmap::{SecondaryMap, SlotMap};
 
 slotmap::new_key_type! {

src/widget/segmented_button/style.rs

@@ -1,6 +1,5 @@
 /// Copyright 2022 System76 <info@system76.com>
 // SPDX-License-Identifier: MPL-2.0
-
 use iced_core::{Background, BorderRadius, Color};
 
 /// The appearance of a [`SegmentedButton`].