add StyledExt::refine_style to utils

crates/core/src/avatar.rs

@@ -2,13 +2,12 @@ use std::fmt::Display;
 
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
-    App, ElementId, InteractiveElement as _, IntoElement, ParentElement as _, Refineable as _,
-    RenderOnce, Role, SharedString, StatefulInteractiveElement as _, StyleRefinement, Styled as _,
-    Window, div,
+    App, ElementId, InteractiveElement as _, IntoElement, ParentElement as _, RenderOnce, Role,
+    SharedString, StatefulInteractiveElement as _, StyleRefinement, Styled as _, Window, div,
 };
 use gpui_native_theme::{ActiveTheme as _, Oklch, Size, ThemeVariant};
 
-use crate::common::{Sizable, h_flex};
+use crate::common::{Sizable, StyledExt, h_flex};
 
 /// Number of rows and columns in the pixel grid.
 const GRID_SIZE: usize = 8;
@@ -85,7 +84,7 @@ impl RenderOnce for Avatar {
         let radius = theme.radius.control;
         let side = theme.sizes.resolve(self.size).avatar_size;
 
-        let mut base = h_flex()
+        let base = h_flex()
             .id(ElementId::from(self.id.clone()))
             .flex_none()
             .justify_center()
@@ -97,10 +96,8 @@ impl RenderOnce for Avatar {
             .when_some(
                 self.name.clone().or(Some(self.id.clone())),
                 |avatar, label| avatar.role(Role::Image).aria_label(label),
-            );
-
-        // Apply custom styles
-        base.style().refine(&self.style);
+            )
+            .refine_style(&self.style);
 
         match self.picture {
             Some(url) => base.child(
@@ -174,7 +171,7 @@ impl RenderOnce for PixelAvatar {
             }
         }
 
-        let mut grid = div()
+        div()
             .grid()
             .grid_cols(GRID_SIZE as u16)
             .grid_rows(GRID_SIZE as u16)
@@ -183,9 +180,8 @@ impl RenderOnce for PixelAvatar {
             .rounded(radius)
             .overflow_hidden()
             .bg(gpui::Hsla { a: 0.16, ..main })
-            .children(cells);
-        grid.style().refine(&self.style);
-        grid
+            .children(cells)
+            .refine_style(&self.style)
     }
 }
 

crates/core/src/badge.rs

@@ -1,10 +1,10 @@
 use gpui::{
-    App, Hsla, IntoElement, ParentElement as _, Refineable as _, RenderOnce, SharedString,
-    StyleRefinement, Styled as _, Window,
+    App, Hsla, IntoElement, ParentElement as _, RenderOnce, SharedString, StyleRefinement,
+    Styled as _, Window,
 };
 use gpui_native_theme::{ActiveTheme as _, Size, Theme};
 
-use crate::common::{Sizable, h_flex};
+use crate::common::{Sizable, StyledExt, h_flex};
 
 /// How loud a badge is.
 #[derive(Clone, Copy, Debug, Default, PartialEq, Eq)]
@@ -88,7 +88,7 @@ impl RenderOnce for Badge {
         // Counts read smaller than control labels, like every native badge.
         let label_size = metrics.text_size * 0.8;
 
-        let mut pill = h_flex()
+        h_flex()
             .flex_none()
             .justify_center()
             .rounded(theme.radius.full)
@@ -98,10 +98,7 @@ impl RenderOnce for Badge {
             .line_height(label_size * 1.25)
             .px(metrics.padding_x * 0.5)
             .py_0p5()
-            .child(self.label);
-
-        pill.style().refine(&self.style);
-
-        pill
+            .child(self.label)
+            .refine_style(&self.style)
     }
 }

crates/core/src/common.rs

@@ -1,7 +1,7 @@
 //! Shared element constructors and small style helpers.
 
 pub use gpui_native_theme::Size;
-pub use gpui_native_utils::{h_flex, v_flex};
+pub use gpui_native_utils::{StyledExt, h_flex, v_flex};
 
 /// A handler told to clean up after a dismissed surface.
 pub type DismissHandler = std::rc::Rc<dyn Fn(&mut gpui::App)>;

crates/core/src/scroll_area.rs

@@ -1,11 +1,13 @@
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
     App, Bounds, DispatchPhase, ElementId, InteractiveElement as _, IntoElement, MouseDownEvent,
-    MouseMoveEvent, ParentElement, Pixels, Refineable as _, RenderOnce, ScrollHandle, SharedString,
+    MouseMoveEvent, ParentElement, Pixels, RenderOnce, ScrollHandle, SharedString,
     StatefulInteractiveElement as _, Styled, Window, canvas, div, fill, point,
 };
 use gpui_native_theme::ActiveTheme as _;
 
+use crate::common::StyledExt;
+
 /// Which directions the content scrolls in.
 #[derive(Clone, Copy, Debug, PartialEq, Eq, Default)]
 pub enum ScrollAxes {
@@ -116,13 +118,13 @@ impl RenderOnce for ScrollArea {
             .on_scroll(|_, _, cx| {
                 // Keep wheel events from scrolling an outer scroll area too.
                 cx.stop_propagation();
-            });
+            })
+            .refine_style(&self.style);
 
-        pane.style().refine(&self.style);
+        // Extend with children
         pane.extend(self.children);
 
-        let mut wrapper = div().relative();
-        wrapper.style().refine(&self.style);
+        let mut wrapper = div().relative().refine_style(&self.style);
         wrapper.extend(std::iter::once(pane.into_any_element()));
 
         if let Some(handle) = self.handle {

crates/utils/src/lib.rs

@@ -1,7 +1,7 @@
 use gpui::prelude::FluentBuilder as _;
 use gpui::{
-    App, BoxShadow, Div, ElementId, FocusHandle, Hsla, IntoElement, StatefulInteractiveElement,
-    Styled, Window, div, px,
+    App, BoxShadow, Div, ElementId, FocusHandle, Hsla, IntoElement, Refineable as _,
+    StatefulInteractiveElement, StyleRefinement, Styled, Window, div, px,
 };
 use gpui_native_theme::ActiveTheme as _;
 
@@ -15,6 +15,16 @@ pub fn v_flex() -> Div {
     div().flex().flex_col()
 }
 
+/// Extensions over [`Styled`], shared by the components.
+pub trait StyledExt: Styled + Sized {
+    fn refine_style(mut self, style: &StyleRefinement) -> Self {
+        self.style().refine(style);
+        self
+    }
+}
+
+impl<E: Styled> StyledExt for E {}
+
 /// Returns a focus handle for the given element ID.
 pub fn focus_handle(id: &ElementId, window: &mut Window, cx: &mut App) -> FocusHandle {
     window