Add UiRect::px() and UiRect::percent() utils (#8866)

# Objective

Make the UI code more concise.

## Solution

Add two utility methods to make manipulating `UiRect` from code more
concise:
- `UiRect::px()` create a new `UiRect` like the `new()` function, but
with values in logical pixels directly.
- `UiRect::percent()` is similar, with values as percentages.

This saves a lot of typing and makes UI code more compact while
retaining readability.

---

## Changelog

### Added

Added two new constructors `UiRect::px()` and `UiRect::percent()` to
create a new `UiRect` from values directly specified in logical pixels
and percentages, respectively. The argument order is the same as
`UiRect::new()`, but avoids having to repeat `Val::Px` and
`Val::Percent`, respectively.

crates/bevy_ui/src/geometry.rs

@@ -117,6 +117,54 @@ impl UiRect {
         }
     }
 
+    /// Creates a new [`UiRect`] from the values specified in logical pixels.
+    ///
+    /// This is a shortcut for [`UiRect::new()`], applying [`Val::Px`] to all arguments.
+    ///
+    /// # Example
+    ///
+    /// ```
+    /// # use bevy_ui::{UiRect, Val};
+    /// #
+    /// let ui_rect = UiRect::px(10., 20., 30., 40.);
+    /// assert_eq!(ui_rect.left, Val::Px(10.));
+    /// assert_eq!(ui_rect.right, Val::Px(20.));
+    /// assert_eq!(ui_rect.top, Val::Px(30.));
+    /// assert_eq!(ui_rect.bottom, Val::Px(40.));
+    /// ```
+    pub const fn px(left: f32, right: f32, top: f32, bottom: f32) -> Self {
+        UiRect {
+            left: Val::Px(left),
+            right: Val::Px(right),
+            top: Val::Px(top),
+            bottom: Val::Px(bottom),
+        }
+    }
+
+    /// Creates a new [`UiRect`] from the values specified in percentages.
+    ///
+    /// This is a shortcut for [`UiRect::new()`], applying [`Val::Percent`] to all arguments.
+    ///
+    /// # Example
+    ///
+    /// ```
+    /// # use bevy_ui::{UiRect, Val};
+    /// #
+    /// let ui_rect = UiRect::percent(5., 10., 2., 1.);
+    /// assert_eq!(ui_rect.left, Val::Percent(5.));
+    /// assert_eq!(ui_rect.right, Val::Percent(10.));
+    /// assert_eq!(ui_rect.top, Val::Percent(2.));
+    /// assert_eq!(ui_rect.bottom, Val::Percent(1.));
+    /// ```
+    pub const fn percent(left: f32, right: f32, top: f32, bottom: f32) -> Self {
+        UiRect {
+            left: Val::Percent(left),
+            right: Val::Percent(right),
+            top: Val::Percent(top),
+            bottom: Val::Percent(bottom),
+        }
+    }
+
     /// Creates a new [`UiRect`] where `left` and `right` take the given value,
     /// and `top` and `bottom` set to zero `Val::Px(0.)`.
     ///
@@ -312,4 +360,22 @@ mod tests {
         assert_eq!(r.left, h.left);
         assert_eq!(r.right, h.right);
     }
+
+    #[test]
+    fn uirect_px() {
+        let r = UiRect::px(3., 5., 20., 999.);
+        assert_eq!(r.left, Val::Px(3.));
+        assert_eq!(r.right, Val::Px(5.));
+        assert_eq!(r.top, Val::Px(20.));
+        assert_eq!(r.bottom, Val::Px(999.));
+    }
+
+    #[test]
+    fn uirect_percent() {
+        let r = UiRect::percent(3., 5., 20., 99.);
+        assert_eq!(r.left, Val::Percent(3.));
+        assert_eq!(r.right, Val::Percent(5.));
+        assert_eq!(r.top, Val::Percent(20.));
+        assert_eq!(r.bottom, Val::Percent(99.));
+    }
 }

crates/bevy_ui/src/ui_node.rs

@@ -81,7 +81,7 @@ impl Default for Node {
 #[derive(Copy, Clone, PartialEq, Debug, Serialize, Deserialize, Reflect, FromReflect)]
 #[reflect(FromReflect, PartialEq, Serialize, Deserialize)]
 pub enum Val {
-    /// Automatically determine the value based on the context and other `Style` properties.
+    /// Automatically determine the value based on the context and other [`Style`] properties.
     Auto,
     /// Set this value in logical pixels.
     Px(f32),