Fixed Extra Padding on iOS buttons required when image on top or bott…

…om (#26018)

* Fixed the extra padding issue for button

* Added test cases

* Committed the images

* Committed the failed case images

* Committed the images

* Modified the logics based on the border width

* Committed the failure image

* Modified a breaking image

* add UITest image

* another screenshot

* another screenshot

---------

Co-authored-by: Shalini-Ashokan <[email protected]>
Co-authored-by: tj-devel709 <[email protected]>

src/Controls/src/Core/Button/Button.iOS.cs

@@ -142,19 +142,6 @@ Size ICrossPlatformLayout.CrossPlatformMeasure(double widthConstraint, double he
 				}
 			}
 
-			// if the image is on top or bottom, let's make sure the title is not cut off by ensuring we have enough padding for the image and title.
-			if (image is not null
-				&& (layout.Position == ButtonContentLayout.ImagePosition.Top || layout.Position == ButtonContentLayout.ImagePosition.Bottom))
-			{
-				var maxTitleRect = ComputeTitleRect(platformButton, button, image, double.PositiveInfinity, double.PositiveInfinity, borderWidth, padding, true);
-
-				var smallerWidth = (nfloat)Math.Min(maxTitleRect.Width, platformButton.CurrentImage?.Size.Width ?? 0);
-				if (padding.HorizontalThickness < smallerWidth)
-				{
-					buttonContentWidth += (nfloat)(smallerWidth - padding.HorizontalThickness);
-				}
-			}
-
 			var returnSize = new Size(Math.Min(buttonContentWidth, widthConstraint),
 							Math.Min(buttonContentHeight, heightConstraint));
 
@@ -213,27 +200,40 @@ void LayoutButton(UIButton platformButton, Button button, Rect size)
 				var sharedSpacing = spacing / 2;
 
 				// These are just used to shift the image and title to center
-				// Which makes the later math easier to follow
-				imageInsets.Left += titleWidth / 2;
-				imageInsets.Right -= titleWidth / 2;
-				titleInsets.Left -= imageWidth / 2;
-				titleInsets.Right += imageWidth / 2;
+				// Which makes the later math easier to follow				
+				if (layout.Position == ButtonContentLayout.ImagePosition.Left || layout.Position == ButtonContentLayout.ImagePosition.Right)
+				{
+					imageInsets.Left += titleWidth / 2;
+					imageInsets.Right -= titleWidth / 2;
+					titleInsets.Left -= imageWidth / 2;
+					titleInsets.Right += imageWidth / 2;
+				}
 
 				if (layout.Position == ButtonContentLayout.ImagePosition.Top)
 				{
 					imageInsets.Top -= (titleHeight / 2) + sharedSpacing;
 					imageInsets.Bottom += (titleHeight / 2) + sharedSpacing;
+					imageInsets.Left += (float)(((size.Width - imageWidth) / 2) - borderWidth);
+					imageInsets.Right += (float)(((size.Width - imageWidth) / 2) - borderWidth);
 
 					titleInsets.Top += (imageHeight / 2) + sharedSpacing;
 					titleInsets.Bottom -= (imageHeight / 2) + sharedSpacing;
+					titleInsets.Left -= (nfloat)(imageWidth - padding.Left);
+					titleInsets.Right += (nfloat)padding.Right;
 				}
 				else if (layout.Position == ButtonContentLayout.ImagePosition.Bottom)
 				{
 					imageInsets.Top += (titleHeight / 2) + sharedSpacing;
 					imageInsets.Bottom -= (titleHeight / 2) + sharedSpacing;
+					imageInsets.Left += (float)(((size.Width - imageWidth) / 2) - borderWidth);
+					imageInsets.Right += (float)(((size.Width - imageWidth) / 2) - borderWidth);
 
 					titleInsets.Top -= (imageHeight / 2) + sharedSpacing;
 					titleInsets.Bottom += (imageHeight / 2) + sharedSpacing;
+
+					titleInsets.Left -= (nfloat)(imageWidth - padding.Left);
+					titleInsets.Right += (nfloat)padding.Right;
+
 				}
 				else if (layout.Position == ButtonContentLayout.ImagePosition.Left)
 				{
@@ -286,7 +286,8 @@ CGRect ComputeTitleRect(UIButton platformButton, Button button, UIImage image, d
 			var titleWidthConstraint = widthConstraint - ((nfloat)borderWidth * 2);
 			var titleHeightConstraint = heightConstraint - ((nfloat)borderWidth * 2);
 
-			if (image is not null && !string.IsNullOrEmpty(platformButton.CurrentTitle) && titleWidthConstraint != double.PositiveInfinity)
+			if (image is not null && !string.IsNullOrEmpty(platformButton.CurrentTitle) && titleWidthConstraint != double.PositiveInfinity
+			&& (button.ContentLayout.Position == ButtonContentLayout.ImagePosition.Left || button.ContentLayout.Position == ButtonContentLayout.ImagePosition.Right))
 			{
 				// In non-UIButtonConfiguration setups, the title will always be truncated by the image's width
 				// even when the image is on top or bottom.

src/Controls/tests/TestCases.HostApp/Issues/Issue25489.xaml

@@ -0,0 +1,64 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+             x:Class="Maui.Controls.Sample.Issues.Issue25489"
+             Title="Issue25489">
+
+    <VerticalStackLayout>
+        <HorizontalStackLayout>
+            <Button Text="Hello, longer world!"
+                    ImageSource="dotnet_bot_resized2.png"
+                    Background="lightgray"
+                    ContentLayout="Top,0"/>
+        </HorizontalStackLayout>
+
+        <HorizontalStackLayout>
+            <Button Text="Hello, longer world!"
+                    ImageSource="dotnet_bot_resized2.png"
+                    Background="lightgreen"
+                    ContentLayout="Bottom,0"/>
+        </HorizontalStackLayout>
+
+        <HorizontalStackLayout>
+            <Button Text="Hello, longer world!"
+                    ImageSource="dotnet_bot_resized2.png"
+                    Background="lightblue"
+                    ContentLayout="Left,0"/>
+        </HorizontalStackLayout>
+
+        <HorizontalStackLayout>
+            <Button Text="Hello, longer world!"
+                    ImageSource="dotnet_bot_resized2.png"
+                    Background="purple"
+                    ContentLayout="Right,0"/>
+        </HorizontalStackLayout>
+
+        <Button Text="Hello, longer world!"
+                ImageSource="dotnet_bot_resized2.png"
+                Background="lightgray"
+                ContentLayout="Bottom,0"
+                HorizontalOptions="Center"/>
+
+        <Button Text="Hello, longer world!"
+                ImageSource="dotnet_bot_resized2.png"
+                Padding="0"
+                Background="lightgreen"
+                ContentLayout="Bottom,0"
+                HorizontalOptions="Center"/>
+
+        <Button Text="Hello, longer world!"
+                ImageSource="dotnet_bot_resized2.png"
+                Padding="5"
+                Background="lightblue"
+                ContentLayout="Bottom,0"
+                HorizontalOptions="Center"/>
+
+        <Button Text="Hello, longer world!"
+                ImageSource="dotnet_bot_resized2.png"
+                Padding="50,10"
+                Background="purple"
+                ContentLayout="Bottom,0"
+                HorizontalOptions="Center"/>
+
+    </VerticalStackLayout>
+</ContentPage>

src/Controls/tests/TestCases.HostApp/Issues/Issue25489.xaml.cs

@@ -0,0 +1,10 @@
+namespace Maui.Controls.Sample.Issues;
+
+[Issue(IssueTracker.Github, 25489, "Remove extra padding from the iOS button", PlatformAffected.All)]
+public partial class Issue25489 : ContentPage
+{
+	public Issue25489()
+	{
+		InitializeComponent();
+	}
+}

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue25489.cs

@@ -0,0 +1,22 @@
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.TestCases.Tests.Issues
+{
+	public class Issue25489 : _IssuesUITest
+	{
+		public Issue25489(TestDevice testDevice) : base(testDevice)
+		{
+		}
+
+		public override string Issue => "Remove extra padding from the iOS button";
+
+		[Test]
+		[Category(UITestCategories.Button)]
+		public void RemoveExtraPaddingFromButton()
+		{
+			VerifyScreenshot();
+		}
+	}
+}