Flatten UI Style properties that use Size + remove Size (#8548)

# Objective

- Simplify API and make authoring styles easier

See:
#8540 (comment)

## Solution

- The `size`, `min_size`, `max_size`, and `gap` properties have been
replaced by `width`, `height`, `min_width`, `min_height`, `max_width`,
`max_height`, `row_gap`, and `column_gap` properties

---

## Changelog

- Flattened `Style` properties that have a `Size` value directly into
`Style`

## Migration Guide

- The `size`, `min_size`, `max_size`, and `gap` properties have been
replaced by the `width`, `height`, `min_width`, `min_height`,
`max_width`, `max_height`, `row_gap`, and `column_gap` properties. Use
the new properties instead.

---------

Co-authored-by: ickshonpe <[email protected]>

Author: nicoburns

crates/bevy_ui/src/geometry.rs

@@ -1,6 +1,5 @@
 use crate::Val;
 use bevy_reflect::{FromReflect, Reflect, ReflectFromReflect};
-use std::ops::{Div, DivAssign, Mul, MulAssign};
 
 /// A type which is commonly used to define margins, paddings and borders.
 ///
@@ -282,152 +281,6 @@ impl Default for UiRect {
     }
 }
 
-/// A 2-dimensional area defined by a width and height.
-///
-/// It is commonly used to define the size of a text or UI element.
-#[derive(Copy, Clone, PartialEq, Debug, Reflect, FromReflect)]
-#[reflect(FromReflect, PartialEq)]
-pub struct Size {
-    /// The width of the 2-dimensional area.
-    pub width: Val,
-    /// The height of the 2-dimensional area.
-    pub height: Val,
-}
-
-impl Size {
-    pub const DEFAULT: Self = Self::AUTO;
-
-    /// Creates a new [`Size`] from a width and a height.
-    ///
-    /// # Example
-    ///
-    /// ```
-    /// # use bevy_ui::{Size, Val};
-    /// #
-    /// let size = Size::new(Val::Px(100.0), Val::Px(200.0));
-    ///
-    /// assert_eq!(size.width, Val::Px(100.0));
-    /// assert_eq!(size.height, Val::Px(200.0));
-    /// ```
-    pub const fn new(width: Val, height: Val) -> Self {
-        Size { width, height }
-    }
-
-    /// Creates a new [`Size`] where both sides take the given value.
-    ///
-    /// # Example
-    ///
-    /// ```
-    /// # use bevy_ui::{Size, Val};
-    /// #
-    /// let size = Size::all(Val::Px(10.));
-    ///
-    /// assert_eq!(size.width, Val::Px(10.0));
-    /// assert_eq!(size.height, Val::Px(10.0));
-    /// ```
-    pub const fn all(value: Val) -> Self {
-        Self {
-            width: value,
-            height: value,
-        }
-    }
-
-    /// Creates a new [`Size`] where `width` takes the given value,
-    /// and `height` is set to [`Val::Auto`].
-
-    ///
-    /// # Example
-    ///
-    /// ```
-    /// # use bevy_ui::{Size, Val};
-    /// #
-    /// let size = Size::width(Val::Px(10.));
-    ///
-    /// assert_eq!(size.width, Val::Px(10.0));
-    /// assert_eq!(size.height, Val::Auto);
-    /// ```
-    pub const fn width(width: Val) -> Self {
-        Self {
-            width,
-            height: Val::Auto,
-        }
-    }
-
-    /// Creates a new [`Size`] where `height` takes the given value,
-    /// and `width` is set to [`Val::Auto`].
-    ///
-    /// # Example
-    ///
-    /// ```
-    /// # use bevy_ui::{Size, Val};
-    /// #
-    /// let size = Size::height(Val::Px(10.));
-    ///
-    /// assert_eq!(size.width, Val::Auto);
-    /// assert_eq!(size.height, Val::Px(10.));
-    /// ```
-    pub const fn height(height: Val) -> Self {
-        Self {
-            width: Val::Auto,
-            height,
-        }
-    }
-
-    /// Creates a Size where both values are [`Val::Auto`].
-    pub const AUTO: Self = Self::all(Val::Auto);
-}
-
-impl Default for Size {
-    fn default() -> Self {
-        Self::DEFAULT
-    }
-}
-
-impl From<(Val, Val)> for Size {
-    fn from(vals: (Val, Val)) -> Self {
-        Self {
-            width: vals.0,
-            height: vals.1,
-        }
-    }
-}
-
-impl Mul<f32> for Size {
-    type Output = Size;
-
-    fn mul(self, rhs: f32) -> Self::Output {
-        Self::Output {
-            width: self.width * rhs,
-            height: self.height * rhs,
-        }
-    }
-}
-
-impl MulAssign<f32> for Size {
-    fn mul_assign(&mut self, rhs: f32) {
-        self.width *= rhs;
-        self.height *= rhs;
-    }
-}
-
-impl Div<f32> for Size {
-    type Output = Size;
-
-    fn div(self, rhs: f32) -> Self::Output {
-        Self::Output {
-            width: self.width / rhs,
-            height: self.height / rhs,
-        }
-    }
-}
-
-impl DivAssign<f32> for Size {
-    fn div_assign(&mut self, rhs: f32) {
-        self.width /= rhs;
-        self.height /= rhs;
-    }
-}
-
 #[cfg(test)]
 mod tests {
     use super::*;
@@ -446,91 +299,6 @@ mod tests {
         assert_eq!(UiRect::default(), UiRect::DEFAULT);
     }
 
-    #[test]
-    fn test_size_from() {
-        let size: Size = (Val::Px(20.), Val::Px(30.)).into();
-
-        assert_eq!(
-            size,
-            Size {
-                width: Val::Px(20.),
-                height: Val::Px(30.),
-            }
-        );
-    }
-
-    #[test]
-    fn test_size_mul() {
-        assert_eq!(Size::all(Val::Px(10.)) * 2., Size::all(Val::Px(20.)));
-
-        let mut size = Size::all(Val::Px(10.));
-        size *= 2.;
-        assert_eq!(size, Size::all(Val::Px(20.)));
-    }
-
-    #[test]
-    fn test_size_div() {
-        assert_eq!(
-            Size::new(Val::Px(20.), Val::Px(20.)) / 2.,
-            Size::new(Val::Px(10.), Val::Px(10.))
-        );
-
-        let mut size = Size::new(Val::Px(20.), Val::Px(20.));
-        size /= 2.;
-        assert_eq!(size, Size::new(Val::Px(10.), Val::Px(10.)));
-    }
-
-    #[test]
-    fn test_size_all() {
-        let length = Val::Px(10.);
-
-        assert_eq!(
-            Size::all(length),
-            Size {
-                width: length,
-                height: length
-            }
-        );
-    }
-
-    #[test]
-    fn test_size_width() {
-        let width = Val::Px(10.);
-
-        assert_eq!(
-            Size::width(width),
-            Size {
-                width,
-                ..Default::default()
-            }
-        );
-    }
-
-    #[test]
-    fn test_size_height() {
-        let height = Val::Px(7.);
-
-        assert_eq!(
-            Size::height(height),
-            Size {
-                height,
-                ..Default::default()
-            }
-        );
-    }
-
-    #[test]
-    fn size_default_equals_const_default() {
-        assert_eq!(
-            Size::default(),
-            Size {
-                width: Val::Auto,
-                height: Val::Auto
-            }
-        );
-        assert_eq!(Size::default(), Size::DEFAULT);
-    }
-
     #[test]
     fn test_uirect_axes() {
         let x = Val::Px(1.);

crates/bevy_ui/src/layout/convert.rs

@@ -3,8 +3,8 @@ use taffy::style_helpers;
 use crate::{
     AlignContent, AlignItems, AlignSelf, Display, FlexDirection, FlexWrap, GridAutoFlow,
     GridPlacement, GridTrack, GridTrackRepetition, JustifyContent, JustifyItems, JustifySelf,
-    MaxTrackSizingFunction, MinTrackSizingFunction, PositionType, RepeatedGridTrack, Size, Style,
-    UiRect, Val,
+    MaxTrackSizingFunction, MinTrackSizingFunction, PositionType, RepeatedGridTrack, Style, UiRect,
+    Val,
 };
 
 use super::LayoutContext;
@@ -63,15 +63,6 @@ impl UiRect {
     }
 }
 
-impl Size {
-    fn map_to_taffy_size<T>(self, map_fn: impl Fn(Val) -> T) -> taffy::geometry::Size<T> {
-        taffy::geometry::Size {
-            width: map_fn(self.width),
-            height: map_fn(self.height),
-        }
-    }
-}
-
 pub fn from_style(context: &LayoutContext, style: &Style) -> taffy::style::Style {
     taffy::style::Style {
         display: style.display.into(),
@@ -102,17 +93,23 @@ pub fn from_style(context: &LayoutContext, style: &Style) -> taffy::style::Style
         flex_grow: style.flex_grow,
         flex_shrink: style.flex_shrink,
         flex_basis: style.flex_basis.into_dimension(context),
-        size: style.size.map_to_taffy_size(|s| s.into_dimension(context)),
-        min_size: style
-            .min_size
-            .map_to_taffy_size(|s| s.into_dimension(context)),
-        max_size: style
-            .max_size
-            .map_to_taffy_size(|s| s.into_dimension(context)),
+        size: taffy::prelude::Size {
+            width: style.width.into_dimension(context),
+            height: style.height.into_dimension(context),
+        },
+        min_size: taffy::prelude::Size {
+            width: style.min_width.into_dimension(context),
+            height: style.min_height.into_dimension(context),
+        },
+        max_size: taffy::prelude::Size {
+            width: style.max_width.into_dimension(context),
+            height: style.max_height.into_dimension(context),
+        },
         aspect_ratio: style.aspect_ratio,
-        gap: style
-            .gap
-            .map_to_taffy_size(|s| s.into_length_percentage(context)),
+        gap: taffy::prelude::Size {
+            width: style.column_gap.into_length_percentage(context),
+            height: style.row_gap.into_length_percentage(context),
+        },
         grid_auto_flow: style.grid_auto_flow.into(),
         grid_template_rows: style
             .grid_template_rows
@@ -439,24 +436,16 @@ mod tests {
             flex_grow: 1.,
             flex_shrink: 0.,
             flex_basis: Val::Px(0.),
-            size: Size {
-                width: Val::Px(0.),
-                height: Val::Auto,
-            },
-            min_size: Size {
-                width: Val::Px(0.),
-                height: Val::Percent(0.),
-            },
-            max_size: Size {
-                width: Val::Auto,
-                height: Val::Px(0.),
-            },
+            width: Val::Px(0.),
+            height: Val::Auto,
+            min_width: Val::Px(0.),
+            min_height: Val::Percent(0.),
+            max_width: Val::Auto,
+            max_height: Val::Px(0.),
             aspect_ratio: None,
             overflow: crate::Overflow::clip(),
-            gap: Size {
-                width: Val::Px(0.),
-                height: Val::Percent(0.),
-            },
+            column_gap: Val::Px(0.),
+            row_gap: Val::Percent(0.),
             grid_auto_flow: GridAutoFlow::ColumnDense,
             grid_template_rows: vec![
                 GridTrack::px(10.0),

crates/bevy_ui/src/lib.rs

@@ -109,7 +109,6 @@ impl Plugin for UiPlugin {
             .register_type::<Overflow>()
             .register_type::<OverflowAxis>()
             .register_type::<PositionType>()
-            .register_type::<Size>()
             .register_type::<UiRect>()
             .register_type::<Style>()
             .register_type::<BackgroundColor>()