ui: Give `NumericStepper`s an ID (#15344)

Marshall Bowers created 1 year ago

This PR gives the `NumericStepper` component an ID.

This prevents the UI and buffer font size settings controls from having
their increment/decrement buttons visually change when the other one is
pressed.

Release Notes:

- N/A

Change summary

crates/editor/src/editor_settings_controls.rs          | 1 +
crates/settings_ui/src/appearance_settings_controls.rs | 1 +
crates/title_bar/src/application_menu.rs               | 2 ++
crates/ui/src/components/numeric_stepper.rs            | 4 ++++
4 files changed, 8 insertions(+)

Detailed changes

crates/editor/src/editor_settings_controls.rs

@@ -140,6 +140,7 @@ impl RenderOnce for BufferFontSizeControl {
             .gap_2()
             .child(Icon::new(IconName::FontSize))
             .child(NumericStepper::new(
+                "buffer-font-size",
                 value.to_string(),
                 move |_, cx| {
                     Self::write(value - px(1.), cx);

crates/settings_ui/src/appearance_settings_controls.rs

@@ -260,6 +260,7 @@ impl RenderOnce for UiFontSizeControl {
             .gap_2()
             .child(Icon::new(IconName::FontSize))
             .child(NumericStepper::new(
+                "ui-font-size",
                 value.to_string(),
                 move |_, cx| {
                     Self::write(value - px(1.), cx);

crates/title_bar/src/application_menu.rs

@@ -26,6 +26,7 @@ impl RenderOnce for ApplicationMenu {
                                 .child(Label::new("Buffer Font Size"))
                                 .child(
                                     NumericStepper::new(
+                                        "buffer-font-size",
                                         theme::get_buffer_font_size(cx).to_string(),
                                         |_, cx| {
                                             cx.dispatch_action(Box::new(
@@ -61,6 +62,7 @@ impl RenderOnce for ApplicationMenu {
                                 .child(Label::new("UI Font Size"))
                                 .child(
                                     NumericStepper::new(
+                                        "ui-font-size",
                                         theme::get_ui_font_size(cx).to_string(),
                                         |_, cx| {
                                             cx.dispatch_action(Box::new(

crates/ui/src/components/numeric_stepper.rs

@@ -4,6 +4,7 @@ use crate::{prelude::*, IconButtonShape};
 
 #[derive(IntoElement)]
 pub struct NumericStepper {
+    id: ElementId,
     value: SharedString,
     on_decrement: Box<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>,
     on_increment: Box<dyn Fn(&ClickEvent, &mut WindowContext) + 'static>,
@@ -14,11 +15,13 @@ pub struct NumericStepper {
 
 impl NumericStepper {
     pub fn new(
+        id: impl Into<ElementId>,
         value: impl Into<SharedString>,
         on_decrement: impl Fn(&ClickEvent, &mut WindowContext) + 'static,
         on_increment: impl Fn(&ClickEvent, &mut WindowContext) + 'static,
     ) -> Self {
         Self {
+            id: id.into(),
             value: value.into(),
             on_decrement: Box::new(on_decrement),
             on_increment: Box::new(on_increment),
@@ -47,6 +50,7 @@ impl RenderOnce for NumericStepper {
         let icon_size = IconSize::Small;
 
         h_flex()
+            .id(self.id)
             .gap_1()
             .map(|element| {
                 if let Some(on_reset) = self.on_reset {