Add WithRemSize element (#11928)

This PR adds a new `WithRemSize` element to the `ui` crate.

This element can be used to create an element tree that has a different
rem size than the base window.

`WithRemSize` can be nested, allowing for subtrees that have a different
rem size than their parent and their children.

<img width="912" alt="Screenshot 2024-05-16 at 2 25 28 PM"
src="https://github.com/zed-industries/zed/assets/1486634/f599cd9f-c101-496b-93e8-06e570fbf74f">

Release Notes:

- N/A

crates/storybook/src/stories.rs

@@ -7,6 +7,7 @@ mod picker;
 mod scroll;
 mod text;
 mod viewport_units;
+mod with_rem_size;
 
 pub use auto_height_editor::*;
 pub use cursor::*;
@@ -17,3 +18,4 @@ pub use picker::*;
 pub use scroll::*;
 pub use text::*;
 pub use viewport_units::*;
+pub use with_rem_size::*;

crates/storybook/src/stories/with_rem_size.rs

@@ -0,0 +1,61 @@
+use gpui::{AnyElement, Hsla, Render};
+use story::Story;
+
+use ui::{prelude::*, WithRemSize};
+
+pub struct WithRemSizeStory;
+
+impl Render for WithRemSizeStory {
+    fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
+        Story::container().child(
+            Example::new(16., gpui::red())
+                .child(
+                    Example::new(24., gpui::green())
+                        .child(Example::new(8., gpui::blue()))
+                        .child(Example::new(16., gpui::yellow())),
+                )
+                .child(
+                    Example::new(12., gpui::green())
+                        .child(Example::new(48., gpui::blue()))
+                        .child(Example::new(16., gpui::yellow())),
+                ),
+        )
+    }
+}
+
+#[derive(IntoElement)]
+struct Example {
+    rem_size: Pixels,
+    border_color: Hsla,
+    children: Vec<AnyElement>,
+}
+
+impl Example {
+    pub fn new(rem_size: impl Into<Pixels>, border_color: Hsla) -> Self {
+        Self {
+            rem_size: rem_size.into(),
+            border_color,
+            children: Vec::new(),
+        }
+    }
+}
+
+impl ParentElement for Example {
+    fn extend(&mut self, elements: impl IntoIterator<Item = AnyElement>) {
+        self.children.extend(elements);
+    }
+}
+
+impl RenderOnce for Example {
+    fn render(self, _cx: &mut WindowContext) -> impl IntoElement {
+        WithRemSize::new(self.rem_size).child(
+            v_flex()
+                .gap_2()
+                .p_2()
+                .border_2()
+                .border_color(self.border_color)
+                .child(Label::new(format!("1rem = {}px", self.rem_size.0)))
+                .children(self.children),
+        )
+    }
+}

crates/storybook/src/story_selector.rs

@@ -40,6 +40,7 @@ pub enum ComponentStory {
     ToggleButton,
     ToolStrip,
     ViewportUnits,
+    WithRemSize,
 }
 
 impl ComponentStory {
@@ -76,6 +77,7 @@ impl ComponentStory {
             Self::ToggleButton => cx.new_view(|_| ui::ToggleButtonStory).into(),
             Self::ToolStrip => cx.new_view(|_| ui::ToolStripStory).into(),
             Self::ViewportUnits => cx.new_view(|_| crate::stories::ViewportUnitsStory).into(),
+            Self::WithRemSize => cx.new_view(|_| crate::stories::WithRemSizeStory).into(),
             Self::Picker => PickerStory::new(cx).into(),
         }
     }