Add general-purpose functions for sizing in viewport units (#3833)

This PR adds general-purpose functions for obtaining a `Length` in
viewport units.

Previously in #3600 we had added specific variants of `w` and `h` that
took viewport units, but I think it makes more sense to just have a
primitive that can compose with any styling method that accepts a
`Length` or `Into<Length>`.

Release Notes:

- N/A

crates/ui2/src/prelude.rs

@@ -9,6 +9,7 @@ pub use crate::clickable::*;
 pub use crate::disableable::*;
 pub use crate::fixed::*;
 pub use crate::selectable::*;
+pub use crate::styles::{vh, vw};
 pub use crate::visible_on_hover::*;
 pub use crate::{h_stack, v_stack};
 pub use crate::{Button, ButtonSize, ButtonStyle, IconButton};

crates/ui2/src/styled_ext.rs

@@ -16,20 +16,6 @@ fn elevated<E: Styled>(this: E, cx: &mut WindowContext, index: ElevationIndex) -
 
 /// Extends [`Styled`](gpui::Styled) with Zed specific styling methods.
 pub trait StyledExt: Styled + Sized {
-    /// Sets the width of the element as a percentage of the viewport's width.
-    ///
-    /// `percent` should be a value between `0.0` and `1.0`.
-    fn w_vw(self, percent: f32, cx: &mut WindowContext) -> Self {
-        self.w(cx.viewport_size().width * percent)
-    }
-
-    /// Sets the height of the element as a percentage of the viewport's height.
-    ///
-    /// `percent` should be a value between `0.0` and `1.0`.
-    fn h_vh(self, percent: f32, cx: &mut WindowContext) -> Self {
-        self.h(cx.viewport_size().height * percent)
-    }
-
     /// Horizontally stacks elements.
     ///
     /// Sets `flex()`, `flex_row()`, `items_center()`

crates/ui2/src/styles.rs

@@ -1,7 +1,9 @@
 mod color;
 mod elevation;
 mod typography;
+mod units;
 
 pub use color::*;
 pub use elevation::*;
 pub use typography::*;
+pub use units::*;

crates/ui2/src/styles/units.rs

@@ -0,0 +1,15 @@
+use gpui::{Length, WindowContext};
+
+/// Returns a [`Length`] corresponding to the specified percentage of the viewport's width.
+///
+/// `percent` should be a value between `0.0` and `1.0`.
+pub fn vw(percent: f32, cx: &mut WindowContext) -> Length {
+    Length::from(cx.viewport_size().width * percent)
+}
+
+/// Returns a [`Length`] corresponding to the specified percentage of the viewport's height.
+///
+/// `percent` should be a value between `0.0` and `1.0`.
+pub fn vh(percent: f32, cx: &mut WindowContext) -> Length {
+    Length::from(cx.viewport_size().height * percent)
+}