Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fixed line break mode for buttons #20133

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
using NUnit.Framework;
using UITest.Appium;
using UITest.Core;

namespace Microsoft.Maui.TestCases.Tests.Issues
{
public class Issue19806 : _IssuesUITest
{
public Issue19806(TestDevice device)
: base(device)
{ }

public override string Issue => "Button doesn't respect LineBreakMode";

[Test]
public void TextInButtonShouldBeTruncated()
{
App.WaitForElement("button");

//Text in the button should be truncated and fit within the frame
VerifyScreenshot();
}
}
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
42 changes: 42 additions & 0 deletions src/Controls/tests/TestCases/Issues/Issue19806.xaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
<?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.Issue19806">
<ScrollView>
<VerticalStackLayout>
<Border Margin="8"
Padding="8"
Background="White"
StrokeShape="{RoundRectangle CornerRadius=4}"
Shadow="{Shadow Radius=4, Opacity=.4}">

<Grid Padding="8"
ColumnDefinitions="*"
RowSpacing="4"
RowDefinitions="*,*,*">

<Label Grid.Row="0"
Grid.Column="0"
Text="Row 0: Hello, World!"
SemanticProperties.HeadingLevel="Level1" />

<Label Grid.Row="1"
Grid.Column="0"
Text="Row 1: Welcome to .NET Multi-platform App UI"/>

<Button Grid.Row="2"
Grid.Column="0"
AutomationId="button"
Text="Row 2: Why is this happening to this button in this context on this iOS simulator? This text should be truncated. This text should be truncated. This text should be truncated. This text should be truncated. This text should be truncated. This text should be truncated. This text should be truncated. This text should be truncated."
HorizontalOptions="Start"
BorderWidth="1"
BackgroundColor="White"
TextColor="Purple"
BorderColor="Purple"
Padding="0"
LineBreakMode="TailTruncation"/>
</Grid>
</Border>
</VerticalStackLayout>
</ScrollView>
</ContentPage>
17 changes: 17 additions & 0 deletions src/Controls/tests/TestCases/Issues/Issue19806.xaml.cs
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
using System;
using System.ComponentModel;
using Microsoft.Maui.Controls;
using Microsoft.Maui.Controls.Xaml;

namespace Maui.Controls.Sample.Issues
{
[XamlCompilation(XamlCompilationOptions.Compile)]
[Issue(IssueTracker.Github, 19806, "Button doesn't respect LineBreakMode", PlatformAffected.All)]
public partial class Issue19806 : ContentPage
{
public Issue19806()
{
InitializeComponent();
}
}
}
10 changes: 10 additions & 0 deletions src/Core/src/Layouts/LayoutExtensions.cs
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,11 @@ public static Rect ComputeFrame(this IView view, Rect bounds)
{
consumedWidth = Math.Min(bounds.Width, view.MaximumWidth);
}
else if (!IsExplicitSet(view.Width))
kubaflo marked this conversation as resolved.
Show resolved Hide resolved
Copy link
Contributor

@albyrock87 albyrock87 Apr 19, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@kubaflo we have the same logical bug on the vertical constraint, would you mind fixing that too?

This for example impacts while using a portrait image with AspectFit put inside a smaller vertical space with VerticalPosition="Start": the image will overflow the container (which is wrong).

Thanks

			// But, if the element is set to fill vertically and it doesn't have an explicitly set height,
			// then we want the minimum between its MaximumHeight  and the bounds' height
			// MaximumHeight is always positive infinity if not defined by the user
			if (view.VerticalLayoutAlignment == LayoutAlignment.Fill && !IsExplicitSet(view.Height))
			{
				consumedHeight = Math.Min(bounds.Height, view.MaximumHeight);
			}
// ->
            else if (!IsExplicitSet(view.Height))
			{
				consumedHeight = Math.Min(bounds.Height, view.DesiredSize.Height);
			}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@albyrock87 do you perhaps have a sample of this issue? I just want to make sure that we get a test in for your issue either in here or in another PR. I will have a look at what you are seeing and try make a repro, but if you have something it will help.

Copy link
Contributor

@albyrock87 albyrock87 May 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

{
consumedWidth = Math.Min(bounds.Width, view.DesiredSize.Width);
}


// And the actual frame width needs to subtract the margins
var frameWidth = Math.Max(0, consumedWidth - margin.HorizontalThickness);
Expand Down Expand Up @@ -83,6 +88,11 @@ static double AlignHorizontal(IView view, Rect bounds, Thickness margin)
// If the width is not set, we use the minimum between the MaxWidth or the bound's width
desiredWidth = IsExplicitSet(view.Width) ? desiredWidth : Math.Min(bounds.Width, view.MaximumWidth);
}
else if (!IsExplicitSet(view.Width))
kubaflo marked this conversation as resolved.
Show resolved Hide resolved
{
desiredWidth = Math.Min(bounds.Width, view.DesiredSize.Width);
}


return AlignHorizontal(bounds.X, margin.Left, margin.Right, bounds.Width, desiredWidth, alignment);
}
Expand Down
Loading