Add BoxSizing to Style

crates/bevy_ui/src/ui_node.rs

@@ -271,6 +271,20 @@ pub struct Style {
     /// <https://developer.mozilla.org/en-US/docs/Web/CSS/display>
     pub display: Display,
 
+    /// Which layout algorithm to use when laying out this node's contents:
+    ///   - [`Display::Flex`]: Use the Flexbox layout algorithm
+    ///   - [`Display::Grid`]: Use the CSS Grid layout algorithm
+    ///   - [`Display::None`]: Hide this node and perform layout as if it does not exist.
+    ///
+    /// Which part of a Node's box length styles like width and height control
+    ///   - [`BoxSizing::BorderBox`]: They refer to the "border box" size (size including padding and border)
+    ///   - [`BoxSizing::ContentBox`]: They refer to the "content box" size (size excluding padding and border)
+    ///
+    /// `BoxSizing::BorderBox` is generally considered more intuitive and is the default in Bevy even though it is not on the web.
+    ///
+    /// See: <https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing>
+    pub box_sizing: BoxSizing,
+
     /// Whether a node should be laid out in-flow with, or independently of its siblings:
     ///  - [`PositionType::Relative`]: Layout this node in-flow with other nodes using the usual (flexbox/grid) layout algorithm.
     ///  - [`PositionType::Absolute`]: Layout this node on top and independently of other nodes.
@@ -533,6 +547,7 @@ pub struct Style {
 impl Style {
     pub const DEFAULT: Self = Self {
         display: Display::DEFAULT,
+        box_sizing: BoxSizing::DEFAULT,
         position_type: PositionType::DEFAULT,
         left: Val::Auto,
         right: Val::Auto,
@@ -866,6 +881,33 @@ impl Default for Display {
     }
 }
 
+/// Whether to show or hide overflowing items
+#[derive(Copy, Clone, PartialEq, Eq, Debug, Reflect)]
+#[reflect(Default, PartialEq)]
+#[cfg_attr(
+    feature = "serialize",
+    derive(serde::Serialize, serde::Deserialize),
+    reflect(Serialize, Deserialize)
+)]
+
+/// Which part of a Node's box length styles like width and height control
+///
+/// See: <https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing>
+pub enum BoxSizing {
+    /// Length styles like width and height refer to the "border box" size (size including padding and border)
+    BorderBox,
+    /// Length styles like width and height refer to the "content box" size (size excluding padding and border)
+    ContentBox,
+}
+impl BoxSizing {
+    pub const DEFAULT: Self = Self::BorderBox;
+}
+impl Default for BoxSizing {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
 /// Defines how flexbox items are ordered within a flexbox
 #[derive(Copy, Clone, PartialEq, Eq, Debug, Reflect)]
 #[reflect(Default, PartialEq)]