From 46b7e5e9c6ced7c83a1984c02cb31aef2b1d574c Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Thu, 23 Feb 2023 15:59:03 +0000
Subject: [PATCH 01/31] changes: * Added the module `border` * Added
 `BorderStyle` and `CalculatedBorder` types. * Added `border_style` and
 `calculated_border` fields to `NodeBundle` and `ButtonBundle` * Added the
 `extract_uinode_borders` system to the UI Render App. * Added the
 `calculate_borders_system` which calculates the border geometry for each
 node. * Added the UI example `borders` * Changed the button example to give
 the button a border.

---
 Cargo.toml                         |  10 +++
 crates/bevy_ui/src/borders.rs      |  99 ++++++++++++++++++++++
 crates/bevy_ui/src/lib.rs          |  12 ++-
 crates/bevy_ui/src/node_bundles.rs |  16 +++-
 crates/bevy_ui/src/render/mod.rs   |  49 +++++++++++
 crates/bevy_ui/src/ui_node.rs      |  29 +++++++
 examples/README.md                 |   1 +
 examples/ui/borders.rs             | 132 +++++++++++++++++++++++++++++
 examples/ui/button.rs              |  14 ++-
 9 files changed, 356 insertions(+), 6 deletions(-)
 create mode 100644 crates/bevy_ui/src/borders.rs
 create mode 100644 examples/ui/borders.rs

diff --git a/Cargo.toml b/Cargo.toml
index 0b1427689d214..b1c3435a259a2 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1553,6 +1553,16 @@ category = "Transforms"
 wasm = true
 
 # UI (User Interface)
+[[example]]
+name = "borders"
+path = "examples/ui/borders.rs"
+
+[package.metadata.example.borders]
+name = "Borders"
+description = "Demonstrates how to create a node with a border"
+category = "UI (User Interface)"
+wasm = true
+
 [[example]]
 name = "button"
 path = "examples/ui/button.rs"
diff --git a/crates/bevy_ui/src/borders.rs b/crates/bevy_ui/src/borders.rs
new file mode 100644
index 0000000000000..6ee2e0fbcbea8
--- /dev/null
+++ b/crates/bevy_ui/src/borders.rs
@@ -0,0 +1,99 @@
+use bevy_ecs::prelude::Component;
+use bevy_ecs::query::Changed;
+use bevy_ecs::query::Or;
+use bevy_ecs::query::With;
+use bevy_ecs::reflect::ReflectComponent;
+use bevy_ecs::system::Query;
+use bevy_hierarchy::Children;
+use bevy_hierarchy::Parent;
+use bevy_math::Rect;
+use bevy_math::Vec2;
+use bevy_reflect::Reflect;
+
+use crate::Node;
+use crate::Style;
+use crate::Val;
+
+/// Stores the calculated border geometry
+#[derive(Component, Copy, Clone, Debug, Reflect)]
+#[reflect(Component)]
+pub struct CalculatedBorder {
+    /// The four rects that make up the border
+    pub edges: [Option<Rect>; 4],
+}
+
+impl CalculatedBorder {
+    const DEFAULT: Self = Self { edges: [None; 4] };
+}
+
+impl Default for CalculatedBorder {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
+fn resolve_thickness(value: Val, parent_width: f32) -> f32 {
+    match value {
+        Val::Px(px) => px,
+        Val::Percent(percent) => parent_width * percent / 100.,
+        Val::Auto => 0.,
+        Val::Undefined => 0.,
+    }
+}
+
+/// Generates the border geometry
+pub fn calculate_borders_system(
+    parent_query: Query<&Node, With<Children>>,
+    mut border_query: Query<
+        (&Node, &Style, &mut CalculatedBorder, Option<&Parent>),
+        Or<(Changed<Node>, Changed<Style>, Changed<Parent>)>,
+    >,
+) {
+    for (node, style, mut calculated_border, parent) in border_query.iter_mut() {
+        let node_size = node.calculated_size;
+        if node_size.x <= 0. || node_size.y <= 0. {
+            continue;
+        }
+
+        let parent_width = parent
+            .and_then(|parent| parent_query.get(parent.get()).ok())
+            .map(|parent_node| parent_node.calculated_size.x)
+            .unwrap_or(0.);
+        let border = style.border;
+        let left = resolve_thickness(border.left, parent_width).min(node_size.x);
+        let right = resolve_thickness(border.right, parent_width).min(node_size.x);
+        let top = resolve_thickness(border.top, parent_width).min(node_size.y);
+        let bottom = resolve_thickness(border.bottom, parent_width).min(node_size.y);
+        let min = -0.5 * node_size;
+        let max = 0.5 * node_size;
+        let inner_min = min + Vec2::new(left, top);
+        let inner_max = max - Vec2::new(right, bottom);
+
+        let border_rects = [
+            Rect {
+                min,
+                max: Vec2::new(inner_min.x, max.y),
+            },
+            Rect {
+                min: Vec2::new(inner_max.x, min.y),
+                max,
+            },
+            Rect {
+                min: Vec2::new(inner_min.x, min.y),
+                max: Vec2::new(inner_max.x, inner_min.y),
+            },
+            Rect {
+                min: Vec2::new(inner_min.x, inner_max.y),
+                max: Vec2::new(inner_max.x, max.y),
+            },
+        ];
+
+        for (i, edge) in border_rects.into_iter().enumerate() {
+            calculated_border.edges[i] = if edge.min.x < edge.max.x && edge.min.y < edge.max.y {
+                Some(edge)
+            } else {
+                None
+            };
+        }
+    }
+}
diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs
index 8ea3b454108d8..7445e44e7d995 100644
--- a/crates/bevy_ui/src/lib.rs
+++ b/crates/bevy_ui/src/lib.rs
@@ -9,6 +9,7 @@ mod render;
 mod stack;
 mod ui_node;
 
+pub mod borders;
 pub mod camera_config;
 pub mod node_bundles;
 pub mod update;
@@ -25,8 +26,8 @@ pub use ui_node::*;
 pub mod prelude {
     #[doc(hidden)]
     pub use crate::{
-        camera_config::*, geometry::*, node_bundles::*, ui_node::*, widget::Button, Interaction,
-        UiScale,
+        borders::CalculatedBorder, camera_config::*, geometry::*, node_bundles::*, ui_node::*,
+        widget::Button, Interaction, UiScale,
     };
 }
 
@@ -100,6 +101,8 @@ impl Plugin for UiPlugin {
             .register_type::<UiImage>()
             .register_type::<Val>()
             .register_type::<widget::Button>()
+            .register_type::<BorderStyle>()
+            .register_type::<borders::CalculatedBorder>()
             .configure_set(UiSystem::Focus.in_base_set(CoreSet::PreUpdate))
             .configure_set(UiSystem::Flex.in_base_set(CoreSet::PostUpdate))
             .configure_set(UiSystem::Stack.in_base_set(CoreSet::PostUpdate))
@@ -140,6 +143,11 @@ impl Plugin for UiPlugin {
                 update_clipping_system
                     .after(TransformSystem::TransformPropagate)
                     .in_base_set(CoreSet::PostUpdate),
+            )
+            .add_system(
+                borders::calculate_borders_system
+                    .in_base_set(CoreSet::PostUpdate)
+                    .after(UiSystem::Flex),
             );
 
         crate::render::build_ui_render(app);
diff --git a/crates/bevy_ui/src/node_bundles.rs b/crates/bevy_ui/src/node_bundles.rs
index f6a2433396344..ba313b561a1c7 100644
--- a/crates/bevy_ui/src/node_bundles.rs
+++ b/crates/bevy_ui/src/node_bundles.rs
@@ -1,8 +1,8 @@
 //! This module contains basic node bundles used to build UIs
 
 use crate::{
-    widget::Button, BackgroundColor, CalculatedSize, FocusPolicy, Interaction, Node, Style,
-    UiImage, ZIndex,
+    borders::CalculatedBorder, widget::Button, BackgroundColor, BorderStyle, CalculatedSize,
+    FocusPolicy, Interaction, Node, Style, UiImage, ZIndex,
 };
 use bevy_ecs::bundle::Bundle;
 use bevy_render::{
@@ -23,6 +23,10 @@ pub struct NodeBundle {
     pub style: Style,
     /// The background color, which serves as a "fill" for this node
     pub background_color: BackgroundColor,
+    /// How to draw the node's border
+    pub border_style: BorderStyle,
+    /// Stores the border's calculated geometry
+    pub calculated_border: CalculatedBorder,
     /// Whether this node should block interaction with lower nodes
     pub focus_policy: FocusPolicy,
     /// The transform of the node
@@ -48,6 +52,8 @@ impl Default for NodeBundle {
         NodeBundle {
             // Transparent background
             background_color: Color::NONE.into(),
+            border_style: Color::NONE.into(),
+            calculated_border: Default::default(),
             node: Default::default(),
             style: Default::default(),
             focus_policy: Default::default(),
@@ -192,6 +198,10 @@ impl TextBundle {
 pub struct ButtonBundle {
     /// Describes the size of the node
     pub node: Node,
+    /// How to draw the node's border
+    pub border_style: BorderStyle,
+    /// Stores the border's calculated geometry
+    pub calculated_border: CalculatedBorder,
     /// Marker component that signals this node is a button
     pub button: Button,
     /// Describes the style including flexbox settings
@@ -231,6 +241,8 @@ impl Default for ButtonBundle {
             node: Default::default(),
             button: Default::default(),
             style: Default::default(),
+            border_style: Default::default(),
+            calculated_border: Default::default(),
             interaction: Default::default(),
             background_color: Default::default(),
             image: Default::default(),
diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index f213118a01093..e18a93f82f929 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -7,6 +7,7 @@ use bevy_window::{PrimaryWindow, Window};
 pub use pipeline::*;
 pub use render_pass::*;
 
+use crate::{borders::CalculatedBorder, BorderStyle};
 use crate::{prelude::UiCameraConfig, BackgroundColor, CalculatedClip, Node, UiImage, UiStack};
 use bevy_app::prelude::*;
 use bevy_asset::{load_internal_asset, AssetEvent, Assets, Handle, HandleUntyped};
@@ -78,6 +79,7 @@ pub fn build_ui_render(app: &mut App) {
                 extract_default_ui_camera_view::<Camera2d>,
                 extract_default_ui_camera_view::<Camera3d>,
                 extract_uinodes.in_set(RenderUiSystem::ExtractNode),
+                extract_uinode_borders.after(RenderUiSystem::ExtractNode),
                 extract_text_uinodes.after(RenderUiSystem::ExtractNode),
             ),
         )
@@ -177,6 +179,52 @@ pub struct ExtractedUiNodes {
     pub uinodes: Vec<ExtractedUiNode>,
 }
 
+pub fn extract_uinode_borders(
+    mut extracted_uinodes: ResMut<ExtractedUiNodes>,
+    ui_stack: Extract<Res<UiStack>>,
+    uinode_query: Extract<
+        Query<(
+            &GlobalTransform,
+            &CalculatedBorder,
+            &BorderStyle,
+            &ComputedVisibility,
+            Option<&CalculatedClip>,
+        )>,
+    >,
+) {
+    for (stack_index, entity) in ui_stack.uinodes.iter().enumerate() {
+        if let Ok((transform, border, border_style, visibility, clip)) = uinode_query.get(*entity) {
+            // Skip invisible nodes
+            if !visibility.is_visible() || border_style.color.a() == 0.0 {
+                continue;
+            }
+
+            let image = DEFAULT_IMAGE_HANDLE.typed();
+
+            for &border_rect in border.edges.iter().flatten() {
+                let center = border_rect.center();
+                let transform = Mat4::from_translation(Vec3::new(center.x, center.y, 0.0))
+                    * transform.compute_matrix();
+
+                extracted_uinodes.uinodes.push(ExtractedUiNode {
+                    stack_index,
+                    transform,
+                    color: border_style.color,
+                    rect: Rect {
+                        max: border_rect.size(),
+                        ..Default::default()
+                    },
+                    image: image.clone_weak(),
+                    atlas_size: None,
+                    clip: clip.map(|clip| clip.clip),
+                    flip_x: false,
+                    flip_y: false,
+                });
+            }
+        }
+    }
+}
+
 pub fn extract_uinodes(
     mut extracted_uinodes: ResMut<ExtractedUiNodes>,
     images: Extract<Res<Assets<Image>>>,
@@ -193,6 +241,7 @@ pub fn extract_uinodes(
     >,
 ) {
     extracted_uinodes.uinodes.clear();
+
     for (stack_index, entity) in ui_stack.uinodes.iter().enumerate() {
         if let Ok((uinode, transform, color, maybe_image, visibility, clip)) =
             uinode_query.get(*entity)
diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs
index 588cb141d3f38..e7e04a75d5299 100644
--- a/crates/bevy_ui/src/ui_node.rs
+++ b/crates/bevy_ui/src/ui_node.rs
@@ -608,6 +608,35 @@ impl From<Color> for BackgroundColor {
     }
 }
 
+/// The border color of the node
+#[derive(Component, Copy, Clone, Debug, Reflect)]
+#[reflect(Component, Default)]
+pub struct BorderStyle {
+    pub color: Color,
+}
+
+impl BorderStyle {
+    pub const DEFAULT: Self = Self {
+        color: Color::WHITE,
+    };
+
+    pub fn new(color: Color) -> Self {
+        Self { color }
+    }
+}
+
+impl Default for BorderStyle {
+    fn default() -> Self {
+        Self::DEFAULT
+    }
+}
+
+impl From<Color> for BorderStyle {
+    fn from(color: Color) -> Self {
+        Self { color }
+    }
+}
+
 /// The 2D texture displayed for this UI node
 #[derive(Component, Clone, Debug, Reflect)]
 #[reflect(Component, Default)]
diff --git a/examples/README.md b/examples/README.md
index c54ca491ec420..7dbaa6e981d9f 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -321,6 +321,7 @@ Example | Description
 
 Example | Description
 --- | ---
+[Borders](../examples/ui/borders.rs) | Demonstrates how to create a node with a border
 [Button](../examples/ui/button.rs) | Illustrates creating and updating a button
 [Font Atlas Debug](../examples/ui/font_atlas_debug.rs) | Illustrates how FontAtlases are populated (used to optimize text rendering internally)
 [Relative Cursor Position](../examples/ui/relative_cursor_position.rs) | Showcases the RelativeCursorPosition component
diff --git a/examples/ui/borders.rs b/examples/ui/borders.rs
new file mode 100644
index 0000000000000..46f5a6eec07eb
--- /dev/null
+++ b/examples/ui/borders.rs
@@ -0,0 +1,132 @@
+//! Example demonstrating bordered UI nodes
+
+use bevy::prelude::*;
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .add_startup_system(setup_many)
+        .run();
+}
+
+fn setup_many(mut commands: Commands) {
+    commands.spawn(Camera2dBundle::default());
+    let root = commands
+        .spawn(NodeBundle {
+            style: Style {
+                flex_basis: Val::Percent(100.0),
+                margin: UiRect::all(Val::Px(25.0)),
+                flex_wrap: FlexWrap::Wrap,
+                justify_content: JustifyContent::FlexStart,
+                align_items: AlignItems::FlexStart,
+                align_content: AlignContent::FlexStart,
+                ..Default::default()
+            },
+            background_color: BackgroundColor(Color::BLACK),
+            ..Default::default()
+        })
+        .id();
+
+    let borders = [
+        UiRect::default(),
+        UiRect::all(Val::Px(10.)),
+        UiRect::left(Val::Px(10.)),
+        UiRect::right(Val::Px(10.)),
+        UiRect::top(Val::Px(10.)),
+        UiRect::bottom(Val::Px(10.)),
+        UiRect::horizontal(Val::Px(10.)),
+        UiRect::vertical(Val::Px(10.)),
+        UiRect {
+            left: Val::Px(10.),
+            top: Val::Px(10.),
+            ..Default::default()
+        },
+        UiRect {
+            left: Val::Px(10.),
+            bottom: Val::Px(10.),
+            ..Default::default()
+        },
+        UiRect {
+            right: Val::Px(10.),
+            top: Val::Px(10.),
+            ..Default::default()
+        },
+        UiRect {
+            right: Val::Px(10.),
+            bottom: Val::Px(10.),
+            ..Default::default()
+        },
+        UiRect {
+            right: Val::Px(10.),
+            top: Val::Px(10.),
+            bottom: Val::Px(10.),
+            ..Default::default()
+        },
+        UiRect {
+            left: Val::Px(10.),
+            top: Val::Px(10.),
+            bottom: Val::Px(10.),
+            ..Default::default()
+        },
+        UiRect {
+            left: Val::Px(10.),
+            right: Val::Px(10.),
+            top: Val::Px(10.),
+            ..Default::default()
+        },
+        UiRect {
+            left: Val::Px(10.),
+            right: Val::Px(10.),
+            bottom: Val::Px(10.),
+            ..Default::default()
+        },
+    ];
+
+    for i in 0..64 {
+        let b = commands
+            .spawn(NodeBundle {
+                style: Style {
+                    size: Size::all(Val::Px(50.)),
+                    border: borders[i % borders.len()],
+                    margin: UiRect::all(Val::Px(2.)),
+                    ..Default::default()
+                },
+                background_color: Color::BLUE.into(),
+                border_style: Color::WHITE.into(),
+                ..Default::default()
+            })
+            .id();
+        commands.entity(root).add_child(b);
+    }
+}
+
+fn setup(mut commands: Commands) {
+    commands.spawn(Camera2dBundle::default());
+    let root = commands
+        .spawn(NodeBundle {
+            style: Style {
+                flex_basis: Val::Percent(100.0),
+                justify_content: JustifyContent::FlexStart,
+                align_items: AlignItems::FlexStart,
+                align_content: AlignContent::FlexStart,
+                ..Default::default()
+            },
+            background_color: BackgroundColor(Color::BLACK),
+            ..Default::default()
+        })
+        .id();
+
+    let b = commands
+        .spawn(NodeBundle {
+            style: Style {
+                size: Size::all(Val::Px(100.)),
+                border: UiRect::all(Val::Px(10.)),
+                ..Default::default()
+            },
+            background_color: Color::BLUE.into(),
+            border_style: Color::WHITE.into(),
+            ..Default::default()
+        })
+        .id();
+    commands.entity(root).add_child(b);
+}
diff --git a/examples/ui/button.rs b/examples/ui/button.rs
index aa364baf8bc55..2e2b27d3d231d 100644
--- a/examples/ui/button.rs
+++ b/examples/ui/button.rs
@@ -19,25 +19,33 @@ const PRESSED_BUTTON: Color = Color::rgb(0.35, 0.75, 0.35);
 
 fn button_system(
     mut interaction_query: Query<
-        (&Interaction, &mut BackgroundColor, &Children),
+        (
+            &Interaction,
+            &mut BackgroundColor,
+            &mut BorderStyle,
+            &Children,
+        ),
         (Changed<Interaction>, With<Button>),
     >,
     mut text_query: Query<&mut Text>,
 ) {
-    for (interaction, mut color, children) in &mut interaction_query {
+    for (interaction, mut color, mut border_style, children) in &mut interaction_query {
         let mut text = text_query.get_mut(children[0]).unwrap();
         match *interaction {
             Interaction::Clicked => {
                 text.sections[0].value = "Press".to_string();
                 *color = PRESSED_BUTTON.into();
+                border_style.color = Color::YELLOW;
             }
             Interaction::Hovered => {
                 text.sections[0].value = "Hover".to_string();
                 *color = HOVERED_BUTTON.into();
+                border_style.color = Color::WHITE;
             }
             Interaction::None => {
                 text.sections[0].value = "Button".to_string();
                 *color = NORMAL_BUTTON.into();
+                border_style.color = Color::BLACK;
             }
         }
     }
@@ -61,12 +69,14 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                 .spawn(ButtonBundle {
                     style: Style {
                         size: Size::new(Val::Px(150.0), Val::Px(65.0)),
+                        border: UiRect::all(Val::Px(5.0)),
                         // horizontally center child text
                         justify_content: JustifyContent::Center,
                         // vertically center child text
                         align_items: AlignItems::Center,
                         ..default()
                     },
+                    border_style: BorderStyle::new(Color::BLACK),
                     background_color: NORMAL_BUTTON.into(),
                     ..default()
                 })

From f91e4f304a5af7c2329e34d8cf7c12286361033d Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Thu, 23 Feb 2023 16:34:46 +0000
Subject: [PATCH 02/31] fix up borders example

---
 examples/ui/borders.rs | 38 ++++----------------------------------
 1 file changed, 4 insertions(+), 34 deletions(-)

diff --git a/examples/ui/borders.rs b/examples/ui/borders.rs
index 46f5a6eec07eb..94debc4dd730b 100644
--- a/examples/ui/borders.rs
+++ b/examples/ui/borders.rs
@@ -5,11 +5,11 @@ use bevy::prelude::*;
 fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
-        .add_startup_system(setup_many)
+        .add_startup_system(setup)
         .run();
 }
 
-fn setup_many(mut commands: Commands) {
+fn setup(mut commands: Commands) {
     commands.spawn(Camera2dBundle::default());
     let root = commands
         .spawn(NodeBundle {
@@ -27,6 +27,7 @@ fn setup_many(mut commands: Commands) {
         })
         .id();
 
+    // all the different combinations of border edges
     let borders = [
         UiRect::default(),
         UiRect::all(Val::Px(10.)),
@@ -92,41 +93,10 @@ fn setup_many(mut commands: Commands) {
                     ..Default::default()
                 },
                 background_color: Color::BLUE.into(),
-                border_style: Color::WHITE.into(),
+                border_style: Color::WHITE.with_a(0.5).into(),
                 ..Default::default()
             })
             .id();
         commands.entity(root).add_child(b);
     }
 }
-
-fn setup(mut commands: Commands) {
-    commands.spawn(Camera2dBundle::default());
-    let root = commands
-        .spawn(NodeBundle {
-            style: Style {
-                flex_basis: Val::Percent(100.0),
-                justify_content: JustifyContent::FlexStart,
-                align_items: AlignItems::FlexStart,
-                align_content: AlignContent::FlexStart,
-                ..Default::default()
-            },
-            background_color: BackgroundColor(Color::BLACK),
-            ..Default::default()
-        })
-        .id();
-
-    let b = commands
-        .spawn(NodeBundle {
-            style: Style {
-                size: Size::all(Val::Px(100.)),
-                border: UiRect::all(Val::Px(10.)),
-                ..Default::default()
-            },
-            background_color: Color::BLUE.into(),
-            border_style: Color::WHITE.into(),
-            ..Default::default()
-        })
-        .id();
-    commands.entity(root).add_child(b);
-}

From b485e178aa07a77922fd9c18e3260d2b62b5d2a3 Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Thu, 23 Feb 2023 16:43:09 +0000
Subject: [PATCH 03/31] changes: * Changed `calculate_borders_system` to remove
 the previous border geometry of degnerate nodes before continuing.

---
 crates/bevy_ui/src/borders.rs | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/crates/bevy_ui/src/borders.rs b/crates/bevy_ui/src/borders.rs
index 6ee2e0fbcbea8..48cfc3ece8fce 100644
--- a/crates/bevy_ui/src/borders.rs
+++ b/crates/bevy_ui/src/borders.rs
@@ -32,13 +32,14 @@ impl Default for CalculatedBorder {
     }
 }
 
-fn resolve_thickness(value: Val, parent_width: f32) -> f32 {
+fn resolve_thickness(value: Val, parent_width: f32, max_thickness: f32) -> f32 {
     match value {
         Val::Px(px) => px,
         Val::Percent(percent) => parent_width * percent / 100.,
         Val::Auto => 0.,
         Val::Undefined => 0.,
     }
+    .min(max_thickness)
 }
 
 /// Generates the border geometry
@@ -52,6 +53,7 @@ pub fn calculate_borders_system(
     for (node, style, mut calculated_border, parent) in border_query.iter_mut() {
         let node_size = node.calculated_size;
         if node_size.x <= 0. || node_size.y <= 0. {
+            calculated_border.edges = [None; 4];
             continue;
         }
 
@@ -60,12 +62,12 @@ pub fn calculate_borders_system(
             .map(|parent_node| parent_node.calculated_size.x)
             .unwrap_or(0.);
         let border = style.border;
-        let left = resolve_thickness(border.left, parent_width).min(node_size.x);
-        let right = resolve_thickness(border.right, parent_width).min(node_size.x);
-        let top = resolve_thickness(border.top, parent_width).min(node_size.y);
-        let bottom = resolve_thickness(border.bottom, parent_width).min(node_size.y);
-        let min = -0.5 * node_size;
+        let left = resolve_thickness(border.left, parent_width, node_size.x);
+        let right = resolve_thickness(border.right, parent_width, node_size.x);
+        let top = resolve_thickness(border.top, parent_width, node_size.y);
+        let bottom = resolve_thickness(border.bottom, parent_width, node_size.y);
         let max = 0.5 * node_size;
+        let min = -max;
         let inner_min = min + Vec2::new(left, top);
         let inner_max = max - Vec2::new(right, bottom);
 

From de7c9d8a6643d7b66e0d5a4712224a2a48661288 Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Thu, 23 Feb 2023 17:07:20 +0000
Subject: [PATCH 04/31] lint fix

---
 crates/bevy_ui/src/borders.rs | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/crates/bevy_ui/src/borders.rs b/crates/bevy_ui/src/borders.rs
index 48cfc3ece8fce..cd312ca8948fe 100644
--- a/crates/bevy_ui/src/borders.rs
+++ b/crates/bevy_ui/src/borders.rs
@@ -34,10 +34,9 @@ impl Default for CalculatedBorder {
 
 fn resolve_thickness(value: Val, parent_width: f32, max_thickness: f32) -> f32 {
     match value {
+        Val::Auto | Val::Undefined => 0.,
         Val::Px(px) => px,
         Val::Percent(percent) => parent_width * percent / 100.,
-        Val::Auto => 0.,
-        Val::Undefined => 0.,
     }
     .min(max_thickness)
 }

From caa72fd5597b9ee1749b6626e1b5698de2a5c9ac Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Thu, 23 Feb 2023 20:32:59 +0000
Subject: [PATCH 05/31] improvements to example

---
 examples/ui/borders.rs | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/examples/ui/borders.rs b/examples/ui/borders.rs
index 94debc4dd730b..126c371de088e 100644
--- a/examples/ui/borders.rs
+++ b/examples/ui/borders.rs
@@ -84,19 +84,33 @@ fn setup(mut commands: Commands) {
     ];
 
     for i in 0..64 {
-        let b = commands
+        let inner_spot = commands
+            .spawn(NodeBundle {
+                style: Style {
+                    size: Size::all(Val::Px(10.)),
+                    ..Default::default()
+                },
+                background_color: Color::YELLOW.into(),
+                ..Default::default()
+            })
+            .id();
+        let bordered_node = commands
             .spawn(NodeBundle {
                 style: Style {
                     size: Size::all(Val::Px(50.)),
                     border: borders[i % borders.len()],
                     margin: UiRect::all(Val::Px(2.)),
+                    align_items: AlignItems::Center,
+                    justify_content: JustifyContent::Center,
                     ..Default::default()
                 },
                 background_color: Color::BLUE.into(),
                 border_style: Color::WHITE.with_a(0.5).into(),
                 ..Default::default()
             })
+            .add_child(inner_spot)
             .id();
-        commands.entity(root).add_child(b);
+        commands.entity(bordered_node).add_child(inner_spot);
+        commands.entity(root).add_child(bordered_node);
     }
 }

From d77ebe9d4ec8f89ae68d6e8b869cc6b8942c17ca Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Thu, 23 Feb 2023 20:34:19 +0000
Subject: [PATCH 06/31] removed duplicate child insertion from example

---
 examples/ui/borders.rs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/ui/borders.rs b/examples/ui/borders.rs
index 126c371de088e..7dccc0e59a481 100644
--- a/examples/ui/borders.rs
+++ b/examples/ui/borders.rs
@@ -110,7 +110,6 @@ fn setup(mut commands: Commands) {
             })
             .add_child(inner_spot)
             .id();
-        commands.entity(bordered_node).add_child(inner_spot);
         commands.entity(root).add_child(bordered_node);
     }
 }

From df56157ca7b7726eae061e97d72f0571db141d5e Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Thu, 23 Feb 2023 23:41:40 +0000
Subject: [PATCH 07/31] force inner_min <= inner_max to prevent overlap of
 opposite edge borders in `calculate_borders_system`

---
 crates/bevy_ui/src/borders.rs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/crates/bevy_ui/src/borders.rs b/crates/bevy_ui/src/borders.rs
index cd312ca8948fe..8818a391e0aaa 100644
--- a/crates/bevy_ui/src/borders.rs
+++ b/crates/bevy_ui/src/borders.rs
@@ -68,8 +68,8 @@ pub fn calculate_borders_system(
         let max = 0.5 * node_size;
         let min = -max;
         let inner_min = min + Vec2::new(left, top);
-        let inner_max = max - Vec2::new(right, bottom);
-
+        let inner_max = (max - Vec2::new(right, bottom)).max(inner_min);
+        
         let border_rects = [
             Rect {
                 min,

From ba63de00a2d4004b3aba3beb23e750ddf70b91c1 Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Thu, 23 Feb 2023 23:43:37 +0000
Subject: [PATCH 08/31] cargo fmt --all

---
 crates/bevy_ui/src/borders.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/bevy_ui/src/borders.rs b/crates/bevy_ui/src/borders.rs
index 8818a391e0aaa..736b7ef06e8d1 100644
--- a/crates/bevy_ui/src/borders.rs
+++ b/crates/bevy_ui/src/borders.rs
@@ -69,7 +69,7 @@ pub fn calculate_borders_system(
         let min = -max;
         let inner_min = min + Vec2::new(left, top);
         let inner_max = (max - Vec2::new(right, bottom)).max(inner_min);
-        
+
         let border_rects = [
             Rect {
                 min,

From f3f9a16c50dcaebd2f4ad66e7305ea1c52e62722 Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Fri, 24 Feb 2023 00:30:25 +0000
Subject: [PATCH 09/31] move the image handle conversion out of the loop in the
 extraction function

---
 crates/bevy_ui/src/render/mod.rs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index e18a93f82f929..47ee0abec7c5b 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -192,6 +192,8 @@ pub fn extract_uinode_borders(
         )>,
     >,
 ) {
+    let image = DEFAULT_IMAGE_HANDLE.typed();
+
     for (stack_index, entity) in ui_stack.uinodes.iter().enumerate() {
         if let Ok((transform, border, border_style, visibility, clip)) = uinode_query.get(*entity) {
             // Skip invisible nodes
@@ -199,8 +201,6 @@ pub fn extract_uinode_borders(
                 continue;
             }
 
-            let image = DEFAULT_IMAGE_HANDLE.typed();
-
             for &border_rect in border.edges.iter().flatten() {
                 let center = border_rect.center();
                 let transform = Mat4::from_translation(Vec3::new(center.x, center.y, 0.0))

From 457648c0cf90e62cfc4fef815a09017af08e4ceb Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Fri, 24 Feb 2023 10:44:06 +0000
Subject: [PATCH 10/31] Added borders to the buttons in the `many_buttons`
 stress test example.

---
 examples/stress_tests/many_buttons.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/stress_tests/many_buttons.rs b/examples/stress_tests/many_buttons.rs
index 79c761277e834..16489d71f1456 100644
--- a/examples/stress_tests/many_buttons.rs
+++ b/examples/stress_tests/many_buttons.rs
@@ -90,7 +90,7 @@ fn spawn_button(
             ButtonBundle {
                 style: Style {
                     size: Size::new(Val::Percent(width), Val::Percent(width)),
-
+                    border: UiRect::all(Val::Px(1.)),
                     position: UiRect {
                         bottom: Val::Percent(100.0 / total * i as f32),
                         left: Val::Percent(100.0 / total * j as f32),

From e2b214c9608411c7b0a58dd8528ce948d1cd5dc2 Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Fri, 24 Feb 2023 12:53:24 +0000
Subject: [PATCH 11/31] move `compute_matrix()` out of loop

---
 crates/bevy_ui/src/render/mod.rs | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index 47ee0abec7c5b..9d8965140086b 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -195,20 +195,16 @@ pub fn extract_uinode_borders(
     let image = DEFAULT_IMAGE_HANDLE.typed();
 
     for (stack_index, entity) in ui_stack.uinodes.iter().enumerate() {
-        if let Ok((transform, border, border_style, visibility, clip)) = uinode_query.get(*entity) {
+        if let Ok((global_transform, border, border_style, visibility, clip)) = uinode_query.get(*entity) {
             // Skip invisible nodes
             if !visibility.is_visible() || border_style.color.a() == 0.0 {
                 continue;
             }
-
             for &border_rect in border.edges.iter().flatten() {
-                let center = border_rect.center();
-                let transform = Mat4::from_translation(Vec3::new(center.x, center.y, 0.0))
-                    * transform.compute_matrix();
-
+                let transform = global_transform.compute_matrix();
                 extracted_uinodes.uinodes.push(ExtractedUiNode {
                     stack_index,
-                    transform,
+                    transform: Mat4::from_translation(border_rect.center().extend(0.)) * transform,
                     color: border_style.color,
                     rect: Rect {
                         max: border_rect.size(),

From 51e8088300f970b9393597ade89a9c248870dc58 Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Fri, 24 Feb 2023 13:18:37 +0000
Subject: [PATCH 12/31] fmt

---
 crates/bevy_ui/src/render/mod.rs | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index 9d8965140086b..697e6a7b71066 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -195,7 +195,9 @@ pub fn extract_uinode_borders(
     let image = DEFAULT_IMAGE_HANDLE.typed();
 
     for (stack_index, entity) in ui_stack.uinodes.iter().enumerate() {
-        if let Ok((global_transform, border, border_style, visibility, clip)) = uinode_query.get(*entity) {
+        if let Ok((global_transform, border, border_style, visibility, clip)) =
+            uinode_query.get(*entity)
+        {
             // Skip invisible nodes
             if !visibility.is_visible() || border_style.color.a() == 0.0 {
                 continue;

From 6630107960feb247fda48b63c6064f906931effe Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Wed, 1 Mar 2023 12:39:06 +0000
Subject: [PATCH 13/31] changes: * moved `compute_matrix` out of loop * added
 comments to border module * removed border overflow clamping

---
 crates/bevy_ui/src/borders.rs    | 19 ++++++++++++-------
 crates/bevy_ui/src/render/mod.rs |  6 ++++--
 2 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/crates/bevy_ui/src/borders.rs b/crates/bevy_ui/src/borders.rs
index 736b7ef06e8d1..9ba3cdb4c0d2b 100644
--- a/crates/bevy_ui/src/borders.rs
+++ b/crates/bevy_ui/src/borders.rs
@@ -9,7 +9,6 @@ use bevy_hierarchy::Parent;
 use bevy_math::Rect;
 use bevy_math::Vec2;
 use bevy_reflect::Reflect;
-
 use crate::Node;
 use crate::Style;
 use crate::Val;
@@ -32,13 +31,13 @@ impl Default for CalculatedBorder {
     }
 }
 
-fn resolve_thickness(value: Val, parent_width: f32, max_thickness: f32) -> f32 {
+/// Percentage thickness of all border edges is calculated based on the width of the parent node.
+fn resolve_thickness(value: Val, parent_width: f32) -> f32 {
     match value {
         Val::Auto | Val::Undefined => 0.,
         Val::Px(px) => px,
         Val::Percent(percent) => parent_width * percent / 100.,
     }
-    .min(max_thickness)
 }
 
 /// Generates the border geometry
@@ -61,28 +60,34 @@ pub fn calculate_borders_system(
             .map(|parent_node| parent_node.calculated_size.x)
             .unwrap_or(0.);
         let border = style.border;
-        let left = resolve_thickness(border.left, parent_width, node_size.x);
-        let right = resolve_thickness(border.right, parent_width, node_size.x);
-        let top = resolve_thickness(border.top, parent_width, node_size.y);
-        let bottom = resolve_thickness(border.bottom, parent_width, node_size.y);
+        let left = resolve_thickness(border.left, parent_width);
+        let right = resolve_thickness(border.right, parent_width);
+        let top = resolve_thickness(border.top, parent_width);
+        let bottom = resolve_thickness(border.bottom, parent_width);
+
+        // calculate border rects, ensuring that they don't overlap
         let max = 0.5 * node_size;
         let min = -max;
         let inner_min = min + Vec2::new(left, top);
         let inner_max = (max - Vec2::new(right, bottom)).max(inner_min);
 
         let border_rects = [
+            // Left border
             Rect {
                 min,
                 max: Vec2::new(inner_min.x, max.y),
             },
+            // Right border
             Rect {
                 min: Vec2::new(inner_max.x, min.y),
                 max,
             },
+            // Top border
             Rect {
                 min: Vec2::new(inner_min.x, min.y),
                 max: Vec2::new(inner_max.x, inner_min.y),
             },
+            // Bottom border
             Rect {
                 min: Vec2::new(inner_min.x, inner_max.y),
                 max: Vec2::new(inner_max.x, max.y),
diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index 697e6a7b71066..4b9a828d1549a 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -202,11 +202,13 @@ pub fn extract_uinode_borders(
             if !visibility.is_visible() || border_style.color.a() == 0.0 {
                 continue;
             }
+
+            let transform = global_transform.compute_matrix();
+            
             for &border_rect in border.edges.iter().flatten() {
-                let transform = global_transform.compute_matrix();
                 extracted_uinodes.uinodes.push(ExtractedUiNode {
                     stack_index,
-                    transform: Mat4::from_translation(border_rect.center().extend(0.)) * transform,
+                    transform: transform * Mat4::from_translation(border_rect.center().extend(0.)),
                     color: border_style.color,
                     rect: Rect {
                         max: border_rect.size(),

From 0e7fdff06c6dba8da3a821b00ee04a43d49c1c34 Mon Sep 17 00:00:00 2001
From: Ickshonpe <david.curthoys@googlemail.com>
Date: Fri, 3 Mar 2023 11:19:56 +0000
Subject: [PATCH 14/31] changes: * Renamed `BorderStyle` to `BorderColor` and
 made it a tuple-struct. * Added `BorderBundle` which contains the components
 needed by a node to draw a border. * Renamed the `border_style` fields of
 `NodeBundle` and `ButtonBundle` to `border_color`.

---
 crates/bevy_ui/src/borders.rs      | 15 ++++++++++++---
 crates/bevy_ui/src/lib.rs          |  2 +-
 crates/bevy_ui/src/node_bundles.rs | 14 +++++++-------
 crates/bevy_ui/src/render/mod.rs   | 12 ++++++------
 crates/bevy_ui/src/ui_node.rs      | 20 ++++++--------------
 examples/ui/borders.rs             |  2 +-
 examples/ui/button.rs              | 12 ++++++------
 7 files changed, 39 insertions(+), 38 deletions(-)

diff --git a/crates/bevy_ui/src/borders.rs b/crates/bevy_ui/src/borders.rs
index 9ba3cdb4c0d2b..40a1c69f8c395 100644
--- a/crates/bevy_ui/src/borders.rs
+++ b/crates/bevy_ui/src/borders.rs
@@ -1,3 +1,8 @@
+use crate::BorderColor;
+use crate::Node;
+use crate::Style;
+use crate::Val;
+use bevy_ecs::prelude::Bundle;
 use bevy_ecs::prelude::Component;
 use bevy_ecs::query::Changed;
 use bevy_ecs::query::Or;
@@ -9,9 +14,6 @@ use bevy_hierarchy::Parent;
 use bevy_math::Rect;
 use bevy_math::Vec2;
 use bevy_reflect::Reflect;
-use crate::Node;
-use crate::Style;
-use crate::Val;
 
 /// Stores the calculated border geometry
 #[derive(Component, Copy, Clone, Debug, Reflect)]
@@ -31,6 +33,13 @@ impl Default for CalculatedBorder {
     }
 }
 
+/// A bundle containing the components needed for a Node to display a border
+#[derive(Bundle, Default, Clone)]
+pub struct BorderBundle {
+    pub border_color: BorderColor,
+    pub calculated_border: CalculatedBorder,
+}
+
 /// Percentage thickness of all border edges is calculated based on the width of the parent node.
 fn resolve_thickness(value: Val, parent_width: f32) -> f32 {
     match value {
diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs
index 7445e44e7d995..e8a8677c46299 100644
--- a/crates/bevy_ui/src/lib.rs
+++ b/crates/bevy_ui/src/lib.rs
@@ -101,7 +101,7 @@ impl Plugin for UiPlugin {
             .register_type::<UiImage>()
             .register_type::<Val>()
             .register_type::<widget::Button>()
-            .register_type::<BorderStyle>()
+            .register_type::<BorderColor>()
             .register_type::<borders::CalculatedBorder>()
             .configure_set(UiSystem::Focus.in_base_set(CoreSet::PreUpdate))
             .configure_set(UiSystem::Flex.in_base_set(CoreSet::PostUpdate))
diff --git a/crates/bevy_ui/src/node_bundles.rs b/crates/bevy_ui/src/node_bundles.rs
index ba313b561a1c7..dba884a6dc77f 100644
--- a/crates/bevy_ui/src/node_bundles.rs
+++ b/crates/bevy_ui/src/node_bundles.rs
@@ -1,7 +1,7 @@
 //! This module contains basic node bundles used to build UIs
 
 use crate::{
-    borders::CalculatedBorder, widget::Button, BackgroundColor, BorderStyle, CalculatedSize,
+    borders::CalculatedBorder, widget::Button, BackgroundColor, BorderColor, CalculatedSize,
     FocusPolicy, Interaction, Node, Style, UiImage, ZIndex,
 };
 use bevy_ecs::bundle::Bundle;
@@ -23,8 +23,8 @@ pub struct NodeBundle {
     pub style: Style,
     /// The background color, which serves as a "fill" for this node
     pub background_color: BackgroundColor,
-    /// How to draw the node's border
-    pub border_style: BorderStyle,
+    /// The color of the Node's border
+    pub border_color: BorderColor,
     /// Stores the border's calculated geometry
     pub calculated_border: CalculatedBorder,
     /// Whether this node should block interaction with lower nodes
@@ -52,7 +52,7 @@ impl Default for NodeBundle {
         NodeBundle {
             // Transparent background
             background_color: Color::NONE.into(),
-            border_style: Color::NONE.into(),
+            border_color: Color::NONE.into(),
             calculated_border: Default::default(),
             node: Default::default(),
             style: Default::default(),
@@ -198,8 +198,8 @@ impl TextBundle {
 pub struct ButtonBundle {
     /// Describes the size of the node
     pub node: Node,
-    /// How to draw the node's border
-    pub border_style: BorderStyle,
+    /// The color of the Node's border
+    pub border_color: BorderColor,
     /// Stores the border's calculated geometry
     pub calculated_border: CalculatedBorder,
     /// Marker component that signals this node is a button
@@ -241,7 +241,7 @@ impl Default for ButtonBundle {
             node: Default::default(),
             button: Default::default(),
             style: Default::default(),
-            border_style: Default::default(),
+            border_color: Default::default(),
             calculated_border: Default::default(),
             interaction: Default::default(),
             background_color: Default::default(),
diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index 4b9a828d1549a..ea96118ff3ef9 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -7,7 +7,7 @@ use bevy_window::{PrimaryWindow, Window};
 pub use pipeline::*;
 pub use render_pass::*;
 
-use crate::{borders::CalculatedBorder, BorderStyle};
+use crate::{borders::CalculatedBorder, BorderColor};
 use crate::{prelude::UiCameraConfig, BackgroundColor, CalculatedClip, Node, UiImage, UiStack};
 use bevy_app::prelude::*;
 use bevy_asset::{load_internal_asset, AssetEvent, Assets, Handle, HandleUntyped};
@@ -186,7 +186,7 @@ pub fn extract_uinode_borders(
         Query<(
             &GlobalTransform,
             &CalculatedBorder,
-            &BorderStyle,
+            &BorderColor,
             &ComputedVisibility,
             Option<&CalculatedClip>,
         )>,
@@ -195,21 +195,21 @@ pub fn extract_uinode_borders(
     let image = DEFAULT_IMAGE_HANDLE.typed();
 
     for (stack_index, entity) in ui_stack.uinodes.iter().enumerate() {
-        if let Ok((global_transform, border, border_style, visibility, clip)) =
+        if let Ok((global_transform, border, &BorderColor(border_color), visibility, clip)) =
             uinode_query.get(*entity)
         {
             // Skip invisible nodes
-            if !visibility.is_visible() || border_style.color.a() == 0.0 {
+            if !visibility.is_visible() || border_color.a() == 0.0 {
                 continue;
             }
 
             let transform = global_transform.compute_matrix();
-            
+
             for &border_rect in border.edges.iter().flatten() {
                 extracted_uinodes.uinodes.push(ExtractedUiNode {
                     stack_index,
                     transform: transform * Mat4::from_translation(border_rect.center().extend(0.)),
-                    color: border_style.color,
+                    color: border_color,
                     rect: Rect {
                         max: border_rect.size(),
                         ..Default::default()
diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs
index e7e04a75d5299..437b674b95c0f 100644
--- a/crates/bevy_ui/src/ui_node.rs
+++ b/crates/bevy_ui/src/ui_node.rs
@@ -611,29 +611,21 @@ impl From<Color> for BackgroundColor {
 /// The border color of the node
 #[derive(Component, Copy, Clone, Debug, Reflect)]
 #[reflect(Component, Default)]
-pub struct BorderStyle {
-    pub color: Color,
-}
-
-impl BorderStyle {
-    pub const DEFAULT: Self = Self {
-        color: Color::WHITE,
-    };
+pub struct BorderColor(pub Color);
 
-    pub fn new(color: Color) -> Self {
-        Self { color }
-    }
+impl BorderColor {
+    pub const DEFAULT: Self = BorderColor(Color::WHITE);
 }
 
-impl Default for BorderStyle {
+impl Default for BorderColor {
     fn default() -> Self {
         Self::DEFAULT
     }
 }
 
-impl From<Color> for BorderStyle {
+impl From<Color> for BorderColor {
     fn from(color: Color) -> Self {
-        Self { color }
+        Self(color)
     }
 }
 
diff --git a/examples/ui/borders.rs b/examples/ui/borders.rs
index 7dccc0e59a481..4337f1f2b700c 100644
--- a/examples/ui/borders.rs
+++ b/examples/ui/borders.rs
@@ -105,7 +105,7 @@ fn setup(mut commands: Commands) {
                     ..Default::default()
                 },
                 background_color: Color::BLUE.into(),
-                border_style: Color::WHITE.with_a(0.5).into(),
+                border_color: Color::WHITE.with_a(0.5).into(),
                 ..Default::default()
             })
             .add_child(inner_spot)
diff --git a/examples/ui/button.rs b/examples/ui/button.rs
index 2e2b27d3d231d..c56544026e80d 100644
--- a/examples/ui/button.rs
+++ b/examples/ui/button.rs
@@ -22,30 +22,30 @@ fn button_system(
         (
             &Interaction,
             &mut BackgroundColor,
-            &mut BorderStyle,
+            &mut BorderColor,
             &Children,
         ),
         (Changed<Interaction>, With<Button>),
     >,
     mut text_query: Query<&mut Text>,
 ) {
-    for (interaction, mut color, mut border_style, children) in &mut interaction_query {
+    for (interaction, mut color, mut border_color, children) in &mut interaction_query {
         let mut text = text_query.get_mut(children[0]).unwrap();
         match *interaction {
             Interaction::Clicked => {
                 text.sections[0].value = "Press".to_string();
                 *color = PRESSED_BUTTON.into();
-                border_style.color = Color::YELLOW;
+                border_color.0 = Color::YELLOW;
             }
             Interaction::Hovered => {
                 text.sections[0].value = "Hover".to_string();
                 *color = HOVERED_BUTTON.into();
-                border_style.color = Color::WHITE;
+                border_color.0 = Color::WHITE;
             }
             Interaction::None => {
                 text.sections[0].value = "Button".to_string();
                 *color = NORMAL_BUTTON.into();
-                border_style.color = Color::BLACK;
+                border_color.0 = Color::BLACK;
             }
         }
     }
@@ -76,7 +76,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         align_items: AlignItems::Center,
                         ..default()
                     },
-                    border_style: BorderStyle::new(Color::BLACK),
+                    border_color: BorderColor(Color::BLACK),
                     background_color: NORMAL_BUTTON.into(),
                     ..default()
                 })

From d806d33743fbdd1368984e700fa5bed93ac9dd99 Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Sat, 11 Mar 2023 11:02:38 +0000
Subject: [PATCH 15/31] changes: * Removed the `borders` module. * Removed the
 `CalculatedBorder` type. * Removed the `calculate_borders_system * Moved the
 border rect calculations into `extract_uinode_borders`.

---
 crates/bevy_ui/src/borders.rs         | 114 --------------------------
 crates/bevy_ui/src/lib.rs             |  12 +--
 crates/bevy_ui/src/node_bundles.rs    |  13 +--
 crates/bevy_ui/src/render/mod.rs      | 114 +++++++++++++++++++-------
 crates/bevy_ui/src/ui_node.rs         |  16 ++--
 examples/stress_tests/many_buttons.rs |   1 -
 examples/ui/button.rs                 |   2 +-
 examples/ui/ui.rs                     |   1 +
 8 files changed, 102 insertions(+), 171 deletions(-)
 delete mode 100644 crates/bevy_ui/src/borders.rs

diff --git a/crates/bevy_ui/src/borders.rs b/crates/bevy_ui/src/borders.rs
deleted file mode 100644
index 40a1c69f8c395..0000000000000
--- a/crates/bevy_ui/src/borders.rs
+++ /dev/null
@@ -1,114 +0,0 @@
-use crate::BorderColor;
-use crate::Node;
-use crate::Style;
-use crate::Val;
-use bevy_ecs::prelude::Bundle;
-use bevy_ecs::prelude::Component;
-use bevy_ecs::query::Changed;
-use bevy_ecs::query::Or;
-use bevy_ecs::query::With;
-use bevy_ecs::reflect::ReflectComponent;
-use bevy_ecs::system::Query;
-use bevy_hierarchy::Children;
-use bevy_hierarchy::Parent;
-use bevy_math::Rect;
-use bevy_math::Vec2;
-use bevy_reflect::Reflect;
-
-/// Stores the calculated border geometry
-#[derive(Component, Copy, Clone, Debug, Reflect)]
-#[reflect(Component)]
-pub struct CalculatedBorder {
-    /// The four rects that make up the border
-    pub edges: [Option<Rect>; 4],
-}
-
-impl CalculatedBorder {
-    const DEFAULT: Self = Self { edges: [None; 4] };
-}
-
-impl Default for CalculatedBorder {
-    fn default() -> Self {
-        Self::DEFAULT
-    }
-}
-
-/// A bundle containing the components needed for a Node to display a border
-#[derive(Bundle, Default, Clone)]
-pub struct BorderBundle {
-    pub border_color: BorderColor,
-    pub calculated_border: CalculatedBorder,
-}
-
-/// Percentage thickness of all border edges is calculated based on the width of the parent node.
-fn resolve_thickness(value: Val, parent_width: f32) -> f32 {
-    match value {
-        Val::Auto | Val::Undefined => 0.,
-        Val::Px(px) => px,
-        Val::Percent(percent) => parent_width * percent / 100.,
-    }
-}
-
-/// Generates the border geometry
-pub fn calculate_borders_system(
-    parent_query: Query<&Node, With<Children>>,
-    mut border_query: Query<
-        (&Node, &Style, &mut CalculatedBorder, Option<&Parent>),
-        Or<(Changed<Node>, Changed<Style>, Changed<Parent>)>,
-    >,
-) {
-    for (node, style, mut calculated_border, parent) in border_query.iter_mut() {
-        let node_size = node.calculated_size;
-        if node_size.x <= 0. || node_size.y <= 0. {
-            calculated_border.edges = [None; 4];
-            continue;
-        }
-
-        let parent_width = parent
-            .and_then(|parent| parent_query.get(parent.get()).ok())
-            .map(|parent_node| parent_node.calculated_size.x)
-            .unwrap_or(0.);
-        let border = style.border;
-        let left = resolve_thickness(border.left, parent_width);
-        let right = resolve_thickness(border.right, parent_width);
-        let top = resolve_thickness(border.top, parent_width);
-        let bottom = resolve_thickness(border.bottom, parent_width);
-
-        // calculate border rects, ensuring that they don't overlap
-        let max = 0.5 * node_size;
-        let min = -max;
-        let inner_min = min + Vec2::new(left, top);
-        let inner_max = (max - Vec2::new(right, bottom)).max(inner_min);
-
-        let border_rects = [
-            // Left border
-            Rect {
-                min,
-                max: Vec2::new(inner_min.x, max.y),
-            },
-            // Right border
-            Rect {
-                min: Vec2::new(inner_max.x, min.y),
-                max,
-            },
-            // Top border
-            Rect {
-                min: Vec2::new(inner_min.x, min.y),
-                max: Vec2::new(inner_max.x, inner_min.y),
-            },
-            // Bottom border
-            Rect {
-                min: Vec2::new(inner_min.x, inner_max.y),
-                max: Vec2::new(inner_max.x, max.y),
-            },
-        ];
-
-        for (i, edge) in border_rects.into_iter().enumerate() {
-            calculated_border.edges[i] = if edge.min.x < edge.max.x && edge.min.y < edge.max.y {
-                Some(edge)
-            } else {
-                None
-            };
-        }
-    }
-}
diff --git a/crates/bevy_ui/src/lib.rs b/crates/bevy_ui/src/lib.rs
index e8a8677c46299..346c8f0ff600a 100644
--- a/crates/bevy_ui/src/lib.rs
+++ b/crates/bevy_ui/src/lib.rs
@@ -9,7 +9,6 @@ mod render;
 mod stack;
 mod ui_node;
 
-pub mod borders;
 pub mod camera_config;
 pub mod node_bundles;
 pub mod update;
@@ -26,7 +25,7 @@ pub use ui_node::*;
 pub mod prelude {
     #[doc(hidden)]
     pub use crate::{
-        borders::CalculatedBorder, camera_config::*, geometry::*, node_bundles::*, ui_node::*,
+        camera_config::*, geometry::*, node_bundles::*, ui_node::*,
         widget::Button, Interaction, UiScale,
     };
 }
@@ -102,7 +101,6 @@ impl Plugin for UiPlugin {
             .register_type::<Val>()
             .register_type::<widget::Button>()
             .register_type::<BorderColor>()
-            .register_type::<borders::CalculatedBorder>()
             .configure_set(UiSystem::Focus.in_base_set(CoreSet::PreUpdate))
             .configure_set(UiSystem::Flex.in_base_set(CoreSet::PostUpdate))
             .configure_set(UiSystem::Stack.in_base_set(CoreSet::PostUpdate))
@@ -143,13 +141,7 @@ impl Plugin for UiPlugin {
                 update_clipping_system
                     .after(TransformSystem::TransformPropagate)
                     .in_base_set(CoreSet::PostUpdate),
-            )
-            .add_system(
-                borders::calculate_borders_system
-                    .in_base_set(CoreSet::PostUpdate)
-                    .after(UiSystem::Flex),
-            );
-
+            );           
         crate::render::build_ui_render(app);
     }
 }
diff --git a/crates/bevy_ui/src/node_bundles.rs b/crates/bevy_ui/src/node_bundles.rs
index dba884a6dc77f..eab86f981c6e8 100644
--- a/crates/bevy_ui/src/node_bundles.rs
+++ b/crates/bevy_ui/src/node_bundles.rs
@@ -1,7 +1,7 @@
 //! This module contains basic node bundles used to build UIs
 
 use crate::{
-    borders::CalculatedBorder, widget::Button, BackgroundColor, BorderColor, CalculatedSize,
+    widget::Button, BackgroundColor, BorderColor, CalculatedSize,
     FocusPolicy, Interaction, Node, Style, UiImage, ZIndex,
 };
 use bevy_ecs::bundle::Bundle;
@@ -25,8 +25,6 @@ pub struct NodeBundle {
     pub background_color: BackgroundColor,
     /// The color of the Node's border
     pub border_color: BorderColor,
-    /// Stores the border's calculated geometry
-    pub calculated_border: CalculatedBorder,
     /// Whether this node should block interaction with lower nodes
     pub focus_policy: FocusPolicy,
     /// The transform of the node
@@ -53,7 +51,6 @@ impl Default for NodeBundle {
             // Transparent background
             background_color: Color::NONE.into(),
             border_color: Color::NONE.into(),
-            calculated_border: Default::default(),
             node: Default::default(),
             style: Default::default(),
             focus_policy: Default::default(),
@@ -198,10 +195,7 @@ impl TextBundle {
 pub struct ButtonBundle {
     /// Describes the size of the node
     pub node: Node,
-    /// The color of the Node's border
-    pub border_color: BorderColor,
-    /// Stores the border's calculated geometry
-    pub calculated_border: CalculatedBorder,
+    
     /// Marker component that signals this node is a button
     pub button: Button,
     /// Describes the style including flexbox settings
@@ -214,6 +208,8 @@ pub struct ButtonBundle {
     ///
     /// When combined with `UiImage`, tints the provided image.
     pub background_color: BackgroundColor,
+    /// The color of the Node's border
+    pub border_color: BorderColor,
     /// The image of the node
     pub image: UiImage,
     /// The transform of the node
@@ -242,7 +238,6 @@ impl Default for ButtonBundle {
             button: Default::default(),
             style: Default::default(),
             border_color: Default::default(),
-            calculated_border: Default::default(),
             interaction: Default::default(),
             background_color: Default::default(),
             image: Default::default(),
diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index ea96118ff3ef9..cde49d9897e0d 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -2,13 +2,14 @@ mod pipeline;
 mod render_pass;
 
 use bevy_core_pipeline::{core_2d::Camera2d, core_3d::Camera3d};
+use bevy_hierarchy::Parent;
 use bevy_render::ExtractSchedule;
 use bevy_window::{PrimaryWindow, Window};
 pub use pipeline::*;
 pub use render_pass::*;
 
-use crate::{borders::CalculatedBorder, BorderColor};
-use crate::{prelude::UiCameraConfig, BackgroundColor, CalculatedClip, Node, UiImage, UiStack};
+use crate::{Style, CalculatedSize, Val};
+use crate::{prelude::UiCameraConfig, BackgroundColor, CalculatedClip, Node, UiImage, UiStack, BorderColor};
 use bevy_app::prelude::*;
 use bevy_asset::{load_internal_asset, AssetEvent, Assets, Handle, HandleUntyped};
 use bevy_ecs::prelude::*;
@@ -179,47 +180,104 @@ pub struct ExtractedUiNodes {
     pub uinodes: Vec<ExtractedUiNode>,
 }
 
+fn resolve_border_thickness(value: Val, parent_width: f32) -> f32 {
+    match value {
+        Val::Auto | Val::Undefined => 0.,
+        Val::Px(px) => px.max(0.),
+        Val::Percent(percent) => (parent_width * percent / 100.).max(0.),
+    }
+}
+
 pub fn extract_uinode_borders(
     mut extracted_uinodes: ResMut<ExtractedUiNodes>,
     ui_stack: Extract<Res<UiStack>>,
     uinode_query: Extract<
-        Query<(
-            &GlobalTransform,
-            &CalculatedBorder,
-            &BorderColor,
-            &ComputedVisibility,
-            Option<&CalculatedClip>,
-        )>,
+        Query<
+            (
+                &Node,
+                &GlobalTransform,
+                &Style,
+                &BorderColor,
+                Option<&Parent>,
+                &ComputedVisibility,
+                Option<&CalculatedClip>,
+            ),
+            Without<CalculatedSize>,
+        >,
     >,
+    parent_node_query: Extract<
+        Query<
+            &Node, With<Parent>
+        >
+    >
 ) {
-    let image = DEFAULT_IMAGE_HANDLE.typed();
+    let image = bevy_render::texture::DEFAULT_IMAGE_HANDLE.typed();
 
     for (stack_index, entity) in ui_stack.uinodes.iter().enumerate() {
-        if let Ok((global_transform, border, &BorderColor(border_color), visibility, clip)) =
+        if let Ok((node, global_transform, style, border_color, parent, visibility, clip)) =
             uinode_query.get(*entity)
         {
-            // Skip invisible nodes
-            if !visibility.is_visible() || border_color.a() == 0.0 {
+            // Skip invisible borders
+            if !visibility.is_visible() || border_color.0.a() == 0.0 || node.size().x <= 0. || node.size().y <= 0. {
                 continue;
             }
 
+            // calculate border rects, ensuring no overlap
+            let parent_width = parent
+                .and_then(|parent| parent_node_query.get(parent.get()).ok())
+                .map(|parent_node| parent_node.size().x)
+                .unwrap_or(0.);
+            let left = resolve_border_thickness(style.border.left, parent_width);
+            let right = resolve_border_thickness(style.border.right, parent_width);
+            let top = resolve_border_thickness(style.border.top, parent_width);
+            let bottom = resolve_border_thickness(style.border.bottom, parent_width);
+            let max = 0.5 * node.size();
+            let min = -max;
+            let inner_min = min + Vec2::new(left, top);
+            let inner_max = (max - Vec2::new(right, bottom)).max(inner_min);
+            let border_rects = [
+                // Left border
+                Rect {
+                    min,
+                    max: Vec2::new(inner_min.x, max.y),
+                },
+                // Right border
+                Rect {
+                    min: Vec2::new(inner_max.x, min.y),
+                    max,
+                },
+                // Top border
+                Rect {
+                    min: Vec2::new(inner_min.x, min.y),
+                    max: Vec2::new(inner_max.x, inner_min.y),
+                },
+                // Bottom border
+                Rect {
+                    min: Vec2::new(inner_min.x, inner_max.y),
+                    max: Vec2::new(inner_max.x, max.y),
+                },
+            ];
+
+            // calculate border rects, ensuring that they don't overlap
             let transform = global_transform.compute_matrix();
 
-            for &border_rect in border.edges.iter().flatten() {
-                extracted_uinodes.uinodes.push(ExtractedUiNode {
-                    stack_index,
-                    transform: transform * Mat4::from_translation(border_rect.center().extend(0.)),
-                    color: border_color,
-                    rect: Rect {
-                        max: border_rect.size(),
-                        ..Default::default()
-                    },
-                    image: image.clone_weak(),
-                    atlas_size: None,
-                    clip: clip.map(|clip| clip.clip),
-                    flip_x: false,
-                    flip_y: false,
-                });
+            for &edge in border_rects.iter() {
+                if edge.min.x < edge.max.x && edge.min.y < edge.max.y {
+                    extracted_uinodes.uinodes.push(ExtractedUiNode {
+                        stack_index,
+                        transform: transform * Mat4::from_translation(edge.center().extend(0.)),
+                        color: border_color.0,
+                        rect: Rect {
+                            max: edge.size(),
+                            ..Default::default()
+                        },
+                        image: image.clone_weak(),
+                        atlas_size: None,
+                        clip: clip.map(|clip| clip.clip),
+                        flip_x: false,
+                        flip_y: false,
+                    });
+                }
             }
         }
     }
diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs
index 437b674b95c0f..51a964f2132ec 100644
--- a/crates/bevy_ui/src/ui_node.rs
+++ b/crates/bevy_ui/src/ui_node.rs
@@ -608,11 +608,17 @@ impl From<Color> for BackgroundColor {
     }
 }
 
-/// The border color of the node
+/// The border color of the UI node.
 #[derive(Component, Copy, Clone, Debug, Reflect)]
-#[reflect(Component, Default)]
+#[reflect(Component)]
 pub struct BorderColor(pub Color);
 
+impl From<Color> for BorderColor {
+    fn from(color: Color) -> Self {
+        Self(color)
+    }
+}
+
 impl BorderColor {
     pub const DEFAULT: Self = BorderColor(Color::WHITE);
 }
@@ -623,12 +629,6 @@ impl Default for BorderColor {
     }
 }
 
-impl From<Color> for BorderColor {
-    fn from(color: Color) -> Self {
-        Self(color)
-    }
-}
-
 /// The 2D texture displayed for this UI node
 #[derive(Component, Clone, Debug, Reflect)]
 #[reflect(Component, Default)]
diff --git a/examples/stress_tests/many_buttons.rs b/examples/stress_tests/many_buttons.rs
index 16489d71f1456..0bb3655cb246e 100644
--- a/examples/stress_tests/many_buttons.rs
+++ b/examples/stress_tests/many_buttons.rs
@@ -90,7 +90,6 @@ fn spawn_button(
             ButtonBundle {
                 style: Style {
                     size: Size::new(Val::Percent(width), Val::Percent(width)),
-                    border: UiRect::all(Val::Px(1.)),
                     position: UiRect {
                         bottom: Val::Percent(100.0 / total * i as f32),
                         left: Val::Percent(100.0 / total * j as f32),
diff --git a/examples/ui/button.rs b/examples/ui/button.rs
index c56544026e80d..a1093d1a294c4 100644
--- a/examples/ui/button.rs
+++ b/examples/ui/button.rs
@@ -35,7 +35,7 @@ fn button_system(
             Interaction::Clicked => {
                 text.sections[0].value = "Press".to_string();
                 *color = PRESSED_BUTTON.into();
-                border_color.0 = Color::YELLOW;
+                border_color.0 = Color::RED;
             }
             Interaction::Hovered => {
                 text.sections[0].value = "Hover".to_string();
diff --git a/examples/ui/ui.rs b/examples/ui/ui.rs
index b8f2d21e35ce2..259dc562ad75a 100644
--- a/examples/ui/ui.rs
+++ b/examples/ui/ui.rs
@@ -165,6 +165,7 @@ fn setup(mut commands: Commands, asset_server: Res<AssetServer>) {
                         border: UiRect::all(Val::Px(20.0)),
                         ..default()
                     },
+                    border_color: Color::GREEN.into(),
                     background_color: Color::rgb(0.4, 0.4, 1.0).into(),
                     ..default()
                 })

From 4202bde11010822d6ab8301d32908d33fc54c70b Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Sat, 11 Mar 2023 11:07:13 +0000
Subject: [PATCH 16/31] Set the default `ButtonBundle` `border_color` to
 `Color::NONE`

---
 crates/bevy_ui/src/node_bundles.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/bevy_ui/src/node_bundles.rs b/crates/bevy_ui/src/node_bundles.rs
index eab86f981c6e8..656e58d083b78 100644
--- a/crates/bevy_ui/src/node_bundles.rs
+++ b/crates/bevy_ui/src/node_bundles.rs
@@ -237,7 +237,7 @@ impl Default for ButtonBundle {
             node: Default::default(),
             button: Default::default(),
             style: Default::default(),
-            border_color: Default::default(),
+            border_color: BorderColor(Color::NONE),
             interaction: Default::default(),
             background_color: Default::default(),
             image: Default::default(),

From 98c88b67dc4693ed800475c870c37f683b2c52e6 Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Fri, 14 Apr 2023 10:44:12 +0100
Subject: [PATCH 17/31] format and build pages

---
 crates/bevy_ui/src/node_bundles.rs |  6 +++---
 crates/bevy_ui/src/render/mod.rs   | 28 +++++++++++++++++-----------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/crates/bevy_ui/src/node_bundles.rs b/crates/bevy_ui/src/node_bundles.rs
index 2729eb850f2f0..c35d6df8c26a8 100644
--- a/crates/bevy_ui/src/node_bundles.rs
+++ b/crates/bevy_ui/src/node_bundles.rs
@@ -1,8 +1,8 @@
 //! This module contains basic node bundles used to build UIs
 
 use crate::{
-    widget::Button, BackgroundColor, BorderColor, CalculatedSize,
-    FocusPolicy, Interaction, Node, Style, UiImage, ZIndex,
+    widget::Button, BackgroundColor, BorderColor, CalculatedSize, FocusPolicy, Interaction, Node,
+    Style, UiImage, ZIndex,
 };
 use bevy_ecs::bundle::Bundle;
 use bevy_render::{
@@ -199,7 +199,7 @@ impl TextBundle {
 pub struct ButtonBundle {
     /// Describes the logical size of the node
     pub node: Node,
-    
+
     /// Marker component that signals this node is a button
     pub button: Button,
     /// Describes the style including flexbox settings
diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index 9f9c744f4b6a1..c0f6245534ec6 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -9,8 +9,10 @@ use bevy_window::{PrimaryWindow, Window};
 pub use pipeline::*;
 pub use render_pass::*;
 
-use crate::{Style, CalculatedSize, Val, UiScale};
-use crate::{prelude::UiCameraConfig, BackgroundColor, CalculatedClip, Node, UiImage, UiStack, BorderColor};
+use crate::{
+    prelude::UiCameraConfig, BackgroundColor, BorderColor, CalculatedClip, Node, UiImage, UiStack,
+};
+use crate::{CalculatedSize, Style, UiScale, Val};
 use bevy_app::prelude::*;
 use bevy_asset::{load_internal_asset, AssetEvent, Assets, Handle, HandleUntyped};
 use bevy_ecs::prelude::*;
@@ -196,26 +198,30 @@ pub fn extract_uinode_borders(
             Without<CalculatedSize>,
         >,
     >,
-    parent_node_query: Extract<
-        Query<
-            &Node, With<Parent>
-        >
-    >
+    parent_node_query: Extract<Query<&Node, With<Parent>>>,
 ) {
     let image = bevy_render::texture::DEFAULT_IMAGE_HANDLE.typed();
-    
+
     let viewport_size = windows
         .get_single()
-        .map(|window| Vec2::new( window.resolution.physical_width() as f32, window.resolution.physical_height() as f32) * (window.resolution.scale_factor() * ui_scale.scale) as f32)
+        .map(|window| {
+            Vec2::new(
+                window.resolution.physical_width() as f32,
+                window.resolution.physical_height() as f32,
+            ) * (window.resolution.scale_factor() * ui_scale.scale) as f32
+        })
         .unwrap_or(Vec2::ZERO);
 
-
     for (stack_index, entity) in ui_stack.uinodes.iter().enumerate() {
         if let Ok((node, global_transform, style, border_color, parent, visibility, clip)) =
             uinode_query.get(*entity)
         {
             // Skip invisible borders
-            if !visibility.is_visible() || border_color.0.a() == 0.0 || node.size().x <= 0. || node.size().y <= 0. {
+            if !visibility.is_visible()
+                || border_color.0.a() == 0.0
+                || node.size().x <= 0.
+                || node.size().y <= 0.
+            {
                 continue;
             }
 

From 29e22052a05ffb05d7291c2056f691a46c62078d Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Fri, 14 Apr 2023 11:23:23 +0100
Subject: [PATCH 18/31] fix for explicit_iter_loop lint

---
 crates/bevy_ui/src/render/mod.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index c0f6245534ec6..e2f971d3fdf40 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -264,7 +264,7 @@ pub fn extract_uinode_borders(
             // calculate border rects, ensuring that they don't overlap
             let transform = global_transform.compute_matrix();
 
-            for &edge in border_rects.iter() {
+            for edge in border_rects {
                 if edge.min.x < edge.max.x && edge.min.y < edge.max.y {
                     extracted_uinodes.uinodes.push(ExtractedUiNode {
                         stack_index,

From ac9278fba6d6587d871e1ba462d12416239a4a88 Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Fri, 14 Apr 2023 12:16:29 +0100
Subject: [PATCH 19/31] Fixed `resolve_border_thickness` so its uses the `.max`
 function not `.min`

---
 crates/bevy_ui/src/render/mod.rs | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index e2f971d3fdf40..143f81520b59d 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -171,11 +171,11 @@ fn resolve_border_thickness(value: Val, parent_width: f32, viewport_size: Vec2)
     match value {
         Val::Auto => 0.,
         Val::Px(px) => px.max(0.),
-        Val::Percent(percent) => (parent_width * percent / 100.).min(0.),
-        Val::Vw(percent) => (viewport_size.x * percent / 100.).min(0.),
-        Val::Vh(percent) => (viewport_size.y * percent / 100.).min(0.),
-        Val::VMin(percent) => (viewport_size.min_element() * percent / 100.).min(0.),
-        Val::VMax(percent) => (viewport_size.max_element() * percent / 100.).min(0.),
+        Val::Percent(percent) => (parent_width * percent / 100.).max(0.),
+        Val::Vw(percent) => (viewport_size.x * percent / 100.).max(0.),
+        Val::Vh(percent) => (viewport_size.y * percent / 100.).max(0.),
+        Val::VMin(percent) => (viewport_size.min_element() * percent / 100.).max(0.),
+        Val::VMax(percent) => (viewport_size.max_element() * percent / 100.).max(0.),
     }
 }
 

From f496b546f9416429dff680556c23146012358863 Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Tue, 18 Apr 2023 09:03:41 +0100
Subject: [PATCH 20/31] Update examples/ui/borders.rs

Co-authored-by: Nico Burns <nico@nicoburns.com>
---
 examples/ui/borders.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/ui/borders.rs b/examples/ui/borders.rs
index 4337f1f2b700c..7e7aab39e01a9 100644
--- a/examples/ui/borders.rs
+++ b/examples/ui/borders.rs
@@ -5,7 +5,7 @@ use bevy::prelude::*;
 fn main() {
     App::new()
         .add_plugins(DefaultPlugins)
-        .add_startup_system(setup)
+        .add_systems(Startup, setup)
         .run();
 }
 

From 4f0e38bfab5ce8e87f06da4d5803af21331806db Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Tue, 18 Apr 2023 11:16:40 +0100
Subject: [PATCH 21/31] changes: * fixed viewport size calculation in
 `extract_uinode_borders` * added `viewport_debug` example

---
 Cargo.toml                         |  10 ++
 crates/bevy_ui/src/node_bundles.rs |   3 +-
 crates/bevy_ui/src/render/mod.rs   |   7 +-
 examples/README.md                 |   1 +
 examples/ui/viewport_debug.rs      | 227 +++++++++++++++++++++++++++++
 5 files changed, 244 insertions(+), 4 deletions(-)
 create mode 100644 examples/ui/viewport_debug.rs

diff --git a/Cargo.toml b/Cargo.toml
index 98853aa2e7bca..a7b80ce8b7cc5 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1878,6 +1878,16 @@ description = "Illustrates how to scale the UI"
 category = "UI (User Interface)"
 wasm = true
 
+[[example]]
+name = "viewport_debug"
+path = "examples/ui/viewport_debug.rs"
+
+[package.metadata.example.viewport_debug]
+name = "Viewport Debug"
+description = "An example for debugging viewport coordinates"
+category = "UI (User Interface)"
+wasm = true
+
 # Window
 [[example]]
 name = "clear_color"
diff --git a/crates/bevy_ui/src/node_bundles.rs b/crates/bevy_ui/src/node_bundles.rs
index de3dc1420f60c..a8bfe6a969bbf 100644
--- a/crates/bevy_ui/src/node_bundles.rs
+++ b/crates/bevy_ui/src/node_bundles.rs
@@ -2,7 +2,8 @@
 
 use crate::{
     widget::{Button, UiImageSize},
-    BackgroundColor, CalculatedSize, BorderColor, FocusPolicy, Interaction, Node, Style, UiImage, ZIndex,
+    BackgroundColor, BorderColor, CalculatedSize, FocusPolicy, Interaction, Node, Style, UiImage,
+    ZIndex,
 };
 use bevy_ecs::bundle::Bundle;
 use bevy_render::{
diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index 530ca115b2bf3..3d4d0d25af6f0 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -208,7 +208,7 @@ pub fn extract_uinode_borders(
             Vec2::new(
                 window.resolution.physical_width() as f32,
                 window.resolution.physical_height() as f32,
-            ) * (window.resolution.scale_factor() * ui_scale.scale) as f32
+            ) / (window.resolution.scale_factor() * ui_scale.scale) as f32
         })
         .unwrap_or(Vec2::ZERO);
 
@@ -225,7 +225,6 @@ pub fn extract_uinode_borders(
                 continue;
             }
 
-            // calculate border rects, ensuring no overlap
             let parent_width = parent
                 .and_then(|parent| parent_node_query.get(parent.get()).ok())
                 .map(|parent_node| parent_node.size().x)
@@ -234,6 +233,9 @@ pub fn extract_uinode_borders(
             let right = resolve_border_thickness(style.border.right, parent_width, viewport_size);
             let top = resolve_border_thickness(style.border.top, parent_width, viewport_size);
             let bottom = resolve_border_thickness(style.border.bottom, parent_width, viewport_size);
+
+            // Calculate the border rects, ensuring no overlap.
+            // The border occupies the space between the node's bounding rect and the node's bounding rect inset in each direction by the node's corresponding border value.
             let max = 0.5 * node.size();
             let min = -max;
             let inner_min = min + Vec2::new(left, top);
@@ -261,7 +263,6 @@ pub fn extract_uinode_borders(
                 },
             ];
 
-            // calculate border rects, ensuring that they don't overlap
             let transform = global_transform.compute_matrix();
 
             for edge in border_rects {
diff --git a/examples/README.md b/examples/README.md
index 7549b00777e36..a5d959a0738f6 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -344,6 +344,7 @@ Example | Description
 [UI](../examples/ui/ui.rs) | Illustrates various features of Bevy UI
 [UI Scaling](../examples/ui/ui_scaling.rs) | Illustrates how to scale the UI
 [UI Z-Index](../examples/ui/z_index.rs) | Demonstrates how to control the relative depth (z-position) of UI elements
+[Viewport Debug](../examples/ui/viewport_debug.rs) | An example for debugging viewport coordinates
 [Window Fallthrough](../examples/ui/window_fallthrough.rs) | Illustrates how to access `winit::window::Window`'s `hittest` functionality.
 
 ## Window
diff --git a/examples/ui/viewport_debug.rs b/examples/ui/viewport_debug.rs
new file mode 100644
index 0000000000000..30320e4d100fe
--- /dev/null
+++ b/examples/ui/viewport_debug.rs
@@ -0,0 +1,227 @@
+//! An example for debugging viewport coordinates
+
+use bevy::prelude::*;
+
+const PALETTE: [Color; 10] = [
+    Color::ORANGE,
+    Color::BLUE,
+    Color::WHITE,
+    Color::BEIGE,
+    Color::CYAN,
+    Color::CRIMSON,
+    Color::NAVY,
+    Color::AZURE,
+    Color::GREEN,
+    Color::BLACK,
+];
+
+#[derive(Default, Debug, Hash, Eq, PartialEq, Clone, States)]
+enum Coords {
+    #[default]
+    Viewport,
+    Pixel,
+}
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins.set(WindowPlugin {
+            primary_window: Some(Window {
+                resolution: [800., 600.].into(),
+                title: "Viewport Coordinates Debug".to_string(),
+                resizable: false,
+                ..Default::default()
+            }),
+            ..Default::default()
+        }))
+        .add_state::<Coords>()
+        .add_systems(Startup, setup)
+        .add_systems(OnEnter(Coords::Viewport), spawn_with_viewport_coords)
+        .add_systems(OnEnter(Coords::Pixel), spawn_with_pixel_coords)
+        .add_systems(OnExit(Coords::Viewport), despawn_nodes)
+        .add_systems(OnExit(Coords::Pixel), despawn_nodes)
+        .add_systems(Update, update)
+        .run();
+}
+
+fn despawn_nodes(mut commands: Commands, query: Query<Entity, With<Node>>) {
+    for entity in query.iter() {
+        commands.entity(entity).despawn();
+    }
+}
+
+fn update(
+    mut timer: Local<f32>,
+    time: Res<Time>,
+    state: Res<State<Coords>>,
+    mut next_state: ResMut<NextState<Coords>>,
+) {
+    *timer += time.delta_seconds();
+    if 1. <= *timer {
+        *timer = 0.;
+        next_state.set(if *state.get() == Coords::Viewport {
+            Coords::Pixel
+        } else {
+            Coords::Viewport
+        });
+    }
+}
+
+fn setup(mut commands: Commands) {
+    commands.spawn(Camera2dBundle::default());
+}
+
+fn spawn_with_viewport_coords(mut commands: Commands) {
+    commands
+        .spawn(NodeBundle {
+            style: Style {
+                size: Size::new(Val::Vw(100.), Val::Vh(100.)),
+                border: UiRect::axes(Val::Vw(5.), Val::Vh(5.)),
+                flex_wrap: FlexWrap::Wrap,
+                ..default()
+            },
+            background_color: PALETTE[0].into(),
+            border_color: PALETTE[1].into(),
+            ..default()
+        })
+        .with_children(|builder| {
+            builder.spawn(NodeBundle {
+                style: Style {
+                    size: Size::new(Val::Vw(30.), Val::Vh(30.)),
+                    border: UiRect::all(Val::VMin(5.)),
+                    ..default()
+                },
+                background_color: PALETTE[2].into(),
+                border_color: PALETTE[9].into(),
+                ..default()
+            });
+
+            builder.spawn(NodeBundle {
+                style: Style {
+                    size: Size::new(Val::Vw(60.), Val::Vh(30.)),
+                    ..default()
+                },
+                background_color: PALETTE[3].into(),
+                ..default()
+            });
+
+            builder.spawn(NodeBundle {
+                style: Style {
+                    size: Size::new(Val::Vw(45.), Val::Vh(30.)),
+                    border: UiRect::left(Val::VMax(45. / 2.)),
+                    ..default()
+                },
+                background_color: PALETTE[4].into(),
+                border_color: PALETTE[8].into(),
+                ..default()
+            });
+
+            builder.spawn(NodeBundle {
+                style: Style {
+                    size: Size::new(Val::Vw(45.), Val::Vh(30.)),
+                    border: UiRect::right(Val::VMax(45. / 2.)),
+                    ..default()
+                },
+                background_color: PALETTE[5].into(),
+                border_color: PALETTE[8].into(),
+                ..default()
+            });
+
+            builder.spawn(NodeBundle {
+                style: Style {
+                    size: Size::new(Val::Vw(60.), Val::Vh(30.)),
+                    ..default()
+                },
+                background_color: PALETTE[6].into(),
+                ..default()
+            });
+
+            builder.spawn(NodeBundle {
+                style: Style {
+                    size: Size::new(Val::Vw(30.), Val::Vh(30.)),
+                    border: UiRect::all(Val::VMin(5.)),
+                    ..default()
+                },
+                background_color: PALETTE[7].into(),
+                border_color: PALETTE[9].into(),
+                ..default()
+            });
+        });
+}
+
+fn spawn_with_pixel_coords(mut commands: Commands) {
+    commands
+        .spawn(NodeBundle {
+            style: Style {
+                size: Size::new(Val::Px(800.), Val::Px(600.)),
+                border: UiRect::axes(Val::Px(40.), Val::Px(30.)),
+                flex_wrap: FlexWrap::Wrap,
+                ..default()
+            },
+            background_color: PALETTE[1].into(),
+            border_color: PALETTE[0].into(),
+            ..default()
+        })
+        .with_children(|builder| {
+            builder.spawn(NodeBundle {
+                style: Style {
+                    size: Size::new(Val::Px(240.), Val::Px(180.)),
+                    border: UiRect::axes(Val::Px(30.), Val::Px(30.)),
+                    ..default()
+                },
+                background_color: PALETTE[2].into(),
+                border_color: PALETTE[9].into(),
+                ..default()
+            });
+
+            builder.spawn(NodeBundle {
+                style: Style {
+                    size: Size::new(Val::Px(480.), Val::Px(180.)),
+                    ..default()
+                },
+                background_color: PALETTE[3].into(),
+                ..default()
+            });
+
+            builder.spawn(NodeBundle {
+                style: Style {
+                    size: Size::new(Val::Px(360.), Val::Px(180.)),
+                    border: UiRect::left(Val::Px(180.)),
+                    ..default()
+                },
+                background_color: PALETTE[4].into(),
+                border_color: PALETTE[8].into(),
+                ..default()
+            });
+
+            builder.spawn(NodeBundle {
+                style: Style {
+                    size: Size::new(Val::Px(360.), Val::Px(180.)),
+                    border: UiRect::right(Val::Px(180.)),
+                    ..default()
+                },
+                background_color: PALETTE[5].into(),
+                border_color: PALETTE[8].into(),
+                ..default()
+            });
+
+            builder.spawn(NodeBundle {
+                style: Style {
+                    size: Size::new(Val::Px(480.), Val::Px(180.)),
+                    ..default()
+                },
+                background_color: PALETTE[6].into(),
+                ..default()
+            });
+
+            builder.spawn(NodeBundle {
+                style: Style {
+                    size: Size::new(Val::Px(240.), Val::Px(180.)),
+                    border: UiRect::axes(Val::Px(30.), Val::Px(30.)),
+                    ..default()
+                },
+                background_color: PALETTE[7].into(),
+                border_color: PALETTE[9].into(),
+                ..default()
+            });
+        });
+}

From d0458421a092f4da67440ef57e695f562a4076c6 Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Wed, 31 May 2023 11:35:10 +0100
Subject: [PATCH 22/31] Fixed some renamings after merge.

---
 crates/bevy_ui/src/render/mod.rs | 4 ++--
 examples/ui/borders.rs           | 6 ++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index ffc3052592db2..4d3343b1119b2 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -12,7 +12,7 @@ pub use render_pass::*;
 use crate::{
     prelude::UiCameraConfig, BackgroundColor, BorderColor, CalculatedClip, Node, UiImage, UiStack,
 };
-use crate::{CalculatedSize, Style, UiScale, Val};
+use crate::{ContentSize, Style, UiScale, Val};
 use bevy_app::prelude::*;
 use bevy_asset::{load_internal_asset, AssetEvent, Assets, Handle, HandleUntyped};
 use bevy_ecs::prelude::*;
@@ -194,7 +194,7 @@ pub fn extract_uinode_borders(
                 &ComputedVisibility,
                 Option<&CalculatedClip>,
             ),
-            Without<CalculatedSize>,
+            Without<ContentSize>,
         >,
     >,
     parent_node_query: Extract<Query<&Node, With<Parent>>>,
diff --git a/examples/ui/borders.rs b/examples/ui/borders.rs
index 7e7aab39e01a9..bf6cac544ce75 100644
--- a/examples/ui/borders.rs
+++ b/examples/ui/borders.rs
@@ -87,7 +87,8 @@ fn setup(mut commands: Commands) {
         let inner_spot = commands
             .spawn(NodeBundle {
                 style: Style {
-                    size: Size::all(Val::Px(10.)),
+                    width: Val::Px(10.),
+                    height: Val::Px(10.),
                     ..Default::default()
                 },
                 background_color: Color::YELLOW.into(),
@@ -97,7 +98,8 @@ fn setup(mut commands: Commands) {
         let bordered_node = commands
             .spawn(NodeBundle {
                 style: Style {
-                    size: Size::all(Val::Px(50.)),
+                    width: Val::Px(50.),
+                    height: Val::Px(50.),
                     border: borders[i % borders.len()],
                     margin: UiRect::all(Val::Px(2.)),
                     align_items: AlignItems::Center,

From 1550763210763a735b8b9deebdcb4f0c462e2af9 Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Wed, 31 May 2023 11:35:53 +0100
Subject: [PATCH 23/31] cargo fmt --all

---
 crates/bevy_ui/src/node_bundles.rs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/crates/bevy_ui/src/node_bundles.rs b/crates/bevy_ui/src/node_bundles.rs
index 96742b5041b01..dd04f780e83a4 100644
--- a/crates/bevy_ui/src/node_bundles.rs
+++ b/crates/bevy_ui/src/node_bundles.rs
@@ -2,7 +2,8 @@
 
 use crate::{
     widget::{Button, TextFlags, UiImageSize},
-    BackgroundColor, BorderColor, ContentSize, FocusPolicy, Interaction, Node, Style, UiImage, ZIndex,
+    BackgroundColor, BorderColor, ContentSize, FocusPolicy, Interaction, Node, Style, UiImage,
+    ZIndex,
 };
 use bevy_ecs::bundle::Bundle;
 use bevy_render::{

From ad17940c28c8bc4e0424f88765f126180872c465 Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Wed, 31 May 2023 12:16:27 +0100
Subject: [PATCH 24/31] some minor fixes: * To calculate the logical size of
 the viewport for viewport coordinates, the physical size of the window
 shouldn't be multipied by the `UiScale` only the window's scale factor. * Use
 the viewport width to determine the border thickness for root UI nodes with
 percentage border values.

---
 crates/bevy_ui/src/render/mod.rs | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index 4d3343b1119b2..802a27e532ca2 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -3,7 +3,7 @@ mod render_pass;
 
 use bevy_core_pipeline::{core_2d::Camera2d, core_3d::Camera3d};
 use bevy_hierarchy::Parent;
-use bevy_render::{ExtractSchedule, Render};
+use bevy_render::{ExtractSchedule, Render, view};
 #[cfg(feature = "bevy_text")]
 use bevy_window::{PrimaryWindow, Window};
 pub use pipeline::*;
@@ -181,7 +181,6 @@ fn resolve_border_thickness(value: Val, parent_width: f32, viewport_size: Vec2)
 pub fn extract_uinode_borders(
     mut extracted_uinodes: ResMut<ExtractedUiNodes>,
     windows: Extract<Query<&Window, With<PrimaryWindow>>>,
-    ui_scale: Extract<Res<UiScale>>,
     ui_stack: Extract<Res<UiStack>>,
     uinode_query: Extract<
         Query<
@@ -207,7 +206,7 @@ pub fn extract_uinode_borders(
             Vec2::new(
                 window.resolution.physical_width() as f32,
                 window.resolution.physical_height() as f32,
-            ) / (window.resolution.scale_factor() * ui_scale.scale) as f32
+            ) / window.resolution.scale_factor() as f32
         })
         .unwrap_or(Vec2::ZERO);
 
@@ -227,7 +226,7 @@ pub fn extract_uinode_borders(
             let parent_width = parent
                 .and_then(|parent| parent_node_query.get(parent.get()).ok())
                 .map(|parent_node| parent_node.size().x)
-                .unwrap_or(0.);
+                .unwrap_or(viewport_size.x);
             let left = resolve_border_thickness(style.border.left, parent_width, viewport_size);
             let right = resolve_border_thickness(style.border.right, parent_width, viewport_size);
             let top = resolve_border_thickness(style.border.top, parent_width, viewport_size);

From f8878cf9fff76dc86cd362994a07c91e2bdf7e76 Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Wed, 31 May 2023 12:17:00 +0100
Subject: [PATCH 25/31] Fixed unused imports.

---
 crates/bevy_ui/src/render/mod.rs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index 802a27e532ca2..172f3189c9b8c 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -3,7 +3,7 @@ mod render_pass;
 
 use bevy_core_pipeline::{core_2d::Camera2d, core_3d::Camera3d};
 use bevy_hierarchy::Parent;
-use bevy_render::{ExtractSchedule, Render, view};
+use bevy_render::{ExtractSchedule, Render};
 #[cfg(feature = "bevy_text")]
 use bevy_window::{PrimaryWindow, Window};
 pub use pipeline::*;
@@ -12,7 +12,7 @@ pub use render_pass::*;
 use crate::{
     prelude::UiCameraConfig, BackgroundColor, BorderColor, CalculatedClip, Node, UiImage, UiStack,
 };
-use crate::{ContentSize, Style, UiScale, Val};
+use crate::{ContentSize, Style, Val};
 use bevy_app::prelude::*;
 use bevy_asset::{load_internal_asset, AssetEvent, Assets, Handle, HandleUntyped};
 use bevy_ecs::prelude::*;

From e3dcf7c196ae1ba790a61c65fa297c20f89e9d24 Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Wed, 31 May 2023 13:33:48 +0100
Subject: [PATCH 26/31] fixed viewport_debug example

---
 examples/ui/viewport_debug.rs | 42 +++++++++++++++++++++++------------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/examples/ui/viewport_debug.rs b/examples/ui/viewport_debug.rs
index 30320e4d100fe..691d70ee6a3d8 100644
--- a/examples/ui/viewport_debug.rs
+++ b/examples/ui/viewport_debug.rs
@@ -74,7 +74,8 @@ fn spawn_with_viewport_coords(mut commands: Commands) {
     commands
         .spawn(NodeBundle {
             style: Style {
-                size: Size::new(Val::Vw(100.), Val::Vh(100.)),
+                width: Val::Vw(100.),
+                height: Val::Vh(100.),
                 border: UiRect::axes(Val::Vw(5.), Val::Vh(5.)),
                 flex_wrap: FlexWrap::Wrap,
                 ..default()
@@ -86,7 +87,8 @@ fn spawn_with_viewport_coords(mut commands: Commands) {
         .with_children(|builder| {
             builder.spawn(NodeBundle {
                 style: Style {
-                    size: Size::new(Val::Vw(30.), Val::Vh(30.)),
+                    width: Val::Vw(30.),
+                    height: Val::Vh(30.),
                     border: UiRect::all(Val::VMin(5.)),
                     ..default()
                 },
@@ -97,7 +99,8 @@ fn spawn_with_viewport_coords(mut commands: Commands) {
 
             builder.spawn(NodeBundle {
                 style: Style {
-                    size: Size::new(Val::Vw(60.), Val::Vh(30.)),
+                    width: Val::Vw(60.),
+                    height: Val::Vh(30.),
                     ..default()
                 },
                 background_color: PALETTE[3].into(),
@@ -106,7 +109,8 @@ fn spawn_with_viewport_coords(mut commands: Commands) {
 
             builder.spawn(NodeBundle {
                 style: Style {
-                    size: Size::new(Val::Vw(45.), Val::Vh(30.)),
+                    width: Val::Vw(45.),
+                    height: Val::Vh(30.),
                     border: UiRect::left(Val::VMax(45. / 2.)),
                     ..default()
                 },
@@ -117,7 +121,8 @@ fn spawn_with_viewport_coords(mut commands: Commands) {
 
             builder.spawn(NodeBundle {
                 style: Style {
-                    size: Size::new(Val::Vw(45.), Val::Vh(30.)),
+                    width: Val::Vw(45.),
+                    height: Val::Vh(30.),
                     border: UiRect::right(Val::VMax(45. / 2.)),
                     ..default()
                 },
@@ -128,7 +133,8 @@ fn spawn_with_viewport_coords(mut commands: Commands) {
 
             builder.spawn(NodeBundle {
                 style: Style {
-                    size: Size::new(Val::Vw(60.), Val::Vh(30.)),
+                    width: Val::Vw(60.),
+                    height: Val::Vh(30.),
                     ..default()
                 },
                 background_color: PALETTE[6].into(),
@@ -137,7 +143,8 @@ fn spawn_with_viewport_coords(mut commands: Commands) {
 
             builder.spawn(NodeBundle {
                 style: Style {
-                    size: Size::new(Val::Vw(30.), Val::Vh(30.)),
+                    width: Val::Vw(30.),
+                    height: Val::Vh(30.),
                     border: UiRect::all(Val::VMin(5.)),
                     ..default()
                 },
@@ -152,7 +159,8 @@ fn spawn_with_pixel_coords(mut commands: Commands) {
     commands
         .spawn(NodeBundle {
             style: Style {
-                size: Size::new(Val::Px(800.), Val::Px(600.)),
+                width: Val::Px(800.),
+                height: Val::Px(600.),
                 border: UiRect::axes(Val::Px(40.), Val::Px(30.)),
                 flex_wrap: FlexWrap::Wrap,
                 ..default()
@@ -164,7 +172,8 @@ fn spawn_with_pixel_coords(mut commands: Commands) {
         .with_children(|builder| {
             builder.spawn(NodeBundle {
                 style: Style {
-                    size: Size::new(Val::Px(240.), Val::Px(180.)),
+                    width: Val::Px(240.),
+                    height: Val::Px(180.),
                     border: UiRect::axes(Val::Px(30.), Val::Px(30.)),
                     ..default()
                 },
@@ -175,7 +184,8 @@ fn spawn_with_pixel_coords(mut commands: Commands) {
 
             builder.spawn(NodeBundle {
                 style: Style {
-                    size: Size::new(Val::Px(480.), Val::Px(180.)),
+                    width: Val::Px(480.),
+                    height: Val::Px(180.),
                     ..default()
                 },
                 background_color: PALETTE[3].into(),
@@ -184,7 +194,8 @@ fn spawn_with_pixel_coords(mut commands: Commands) {
 
             builder.spawn(NodeBundle {
                 style: Style {
-                    size: Size::new(Val::Px(360.), Val::Px(180.)),
+                    width: Val::Px(360.),
+                    height: Val::Px(180.),
                     border: UiRect::left(Val::Px(180.)),
                     ..default()
                 },
@@ -195,7 +206,8 @@ fn spawn_with_pixel_coords(mut commands: Commands) {
 
             builder.spawn(NodeBundle {
                 style: Style {
-                    size: Size::new(Val::Px(360.), Val::Px(180.)),
+                    width: Val::Px(360.),
+                    height: Val::Px(180.),
                     border: UiRect::right(Val::Px(180.)),
                     ..default()
                 },
@@ -206,7 +218,8 @@ fn spawn_with_pixel_coords(mut commands: Commands) {
 
             builder.spawn(NodeBundle {
                 style: Style {
-                    size: Size::new(Val::Px(480.), Val::Px(180.)),
+                    width: Val::Px(480.),
+                    height: Val::Px(180.),
                     ..default()
                 },
                 background_color: PALETTE[6].into(),
@@ -215,7 +228,8 @@ fn spawn_with_pixel_coords(mut commands: Commands) {
 
             builder.spawn(NodeBundle {
                 style: Style {
-                    size: Size::new(Val::Px(240.), Val::Px(180.)),
+                    width: Val::Px(240.),
+                    height: Val::Px(180.),
                     border: UiRect::axes(Val::Px(30.), Val::Px(30.)),
                     ..default()
                 },

From af4c5654daebc76367eaef568d1c7948186eb610 Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Fri, 9 Jun 2023 16:32:21 +0100
Subject: [PATCH 27/31] Added a comment explaining that percentage border
 values are calculated from parent width.

---
 crates/bevy_ui/src/render/mod.rs | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index 172f3189c9b8c..9f050d85b0e7c 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -223,6 +223,8 @@ pub fn extract_uinode_borders(
                 continue;
             }
 
+            // Both vertical and horizontal percentage border values are calculated based on the width of the parent node
+            // <https://developer.mozilla.org/en-US/docs/Web/CSS/border-width>
             let parent_width = parent
                 .and_then(|parent| parent_node_query.get(parent.get()).ok())
                 .map(|parent_node| parent_node.size().x)

From fbf687e7755dcd2f6a571b69952f8b7eacbd4afb Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Fri, 9 Jun 2023 23:59:05 +0100
Subject: [PATCH 28/31] Replaced logical size calculations with
 `WindowResolution::width` and `height`

---
 crates/bevy_ui/src/render/mod.rs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index 9f050d85b0e7c..41b2ea3f9aa4d 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -204,9 +204,9 @@ pub fn extract_uinode_borders(
         .get_single()
         .map(|window| {
             Vec2::new(
-                window.resolution.physical_width() as f32,
-                window.resolution.physical_height() as f32,
-            ) / window.resolution.scale_factor() as f32
+                window.resolution.width(),
+                window.resolution.height(),
+            )
         })
         .unwrap_or(Vec2::ZERO);
 

From 7adbf2c717bf9cd3a9befc1db1ba544408d7b1fb Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Sun, 11 Jun 2023 11:03:00 +0100
Subject: [PATCH 29/31] Added `FromReflect` derive, and `reflect(FromReflect,
 Default)` to `BorderColor`.

---
 crates/bevy_ui/src/ui_node.rs | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/crates/bevy_ui/src/ui_node.rs b/crates/bevy_ui/src/ui_node.rs
index 0e6e79846bd3d..96a69972024ad 100644
--- a/crates/bevy_ui/src/ui_node.rs
+++ b/crates/bevy_ui/src/ui_node.rs
@@ -1564,8 +1564,8 @@ impl From<Color> for BackgroundColor {
 }
 
 /// The border color of the UI node.
-#[derive(Component, Copy, Clone, Debug, Reflect)]
-#[reflect(Component)]
+#[derive(Component, Copy, Clone, Debug, Reflect, FromReflect)]
+#[reflect(FromReflect, Component, Default)]
 pub struct BorderColor(pub Color);
 
 impl From<Color> for BorderColor {

From d2bc8c64dfd8c90d7489b2fc17885207873f2778 Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Sun, 11 Jun 2023 12:04:02 +0100
Subject: [PATCH 30/31] Added a comment explaning the purpose of the
 translation inside the inner loop.

---
 crates/bevy_ui/src/render/mod.rs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index 41b2ea3f9aa4d..0ae337e277d59 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -269,6 +269,7 @@ pub fn extract_uinode_borders(
                 if edge.min.x < edge.max.x && edge.min.y < edge.max.y {
                     extracted_uinodes.uinodes.push(ExtractedUiNode {
                         stack_index,
+                        // This translates the uinode's transform to the center of the current border rectangle
                         transform: transform * Mat4::from_translation(edge.center().extend(0.)),
                         color: border_color.0,
                         rect: Rect {

From b34f36392e982cbb1f1320ae8a88842ca9ed511e Mon Sep 17 00:00:00 2001
From: ickshonpe <david.curthoys@googlemail.com>
Date: Wed, 14 Jun 2023 22:52:07 +0100
Subject: [PATCH 31/31] cargo fmt --all

---
 crates/bevy_ui/src/render/mod.rs | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/crates/bevy_ui/src/render/mod.rs b/crates/bevy_ui/src/render/mod.rs
index 0ae337e277d59..18e3bb560d8c2 100644
--- a/crates/bevy_ui/src/render/mod.rs
+++ b/crates/bevy_ui/src/render/mod.rs
@@ -202,12 +202,7 @@ pub fn extract_uinode_borders(
 
     let viewport_size = windows
         .get_single()
-        .map(|window| {
-            Vec2::new(
-                window.resolution.width(),
-                window.resolution.height(),
-            )
-        })
+        .map(|window| Vec2::new(window.resolution.width(), window.resolution.height()))
         .unwrap_or(Vec2::ZERO);
 
     for (stack_index, entity) in ui_stack.uinodes.iter().enumerate() {