- 
                Notifications
    You must be signed in to change notification settings 
- Fork 1.9k
[iOS] Fix RightToLeft flow direction for FormattedText #31498
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
          
     Open
      
      
            jsuarezruiz
  wants to merge
  7
  commits into
  main
  
    
      
        
          
  
    
      Choose a base branch
      
     
    
      
        
      
      
        
          
          
        
        
          
            
              
              
              
  
           
        
        
          
            
              
              
           
        
       
     
  
        
          
            
          
            
          
        
       
    
      
from
fix-31480
  
      
      
   
  
    
  
  
  
 
  
      
    base: main
Could not load branches
            
              
  
    Branch not found: {{ refName }}
  
            
                
      Loading
              
            Could not load tags
            
            
              Nothing to show
            
              
  
            
                
      Loading
              
            Are you sure you want to change the base?
            Some commits from the old base branch may be removed from the timeline,
            and old review comments may become outdated.
          
          
  
     Open
                    Changes from all commits
      Commits
    
    
            Show all changes
          
          
            7 commits
          
        
        Select commit
          Hold shift + click to select a range
      
      f71b478
              
                Fix RightToLeft flow direction for FormattedText on iOS
              
              
                jsuarezruiz f75c872
              
                Added DeviceTests
              
              
                jsuarezruiz ef6c40f
              
                Merge branch 'main' into fix-31480
              
              
                jsuarezruiz a152412
              
                Added pending snapshots
              
              
                jsuarezruiz 48769e5
              
                Pending snapshot
              
              
                jsuarezruiz 606fffc
              
                Windows snapshots
              
              
                jsuarezruiz aa8a48a
              
                Merge branch 'main' into fix-31480
              
              
                jsuarezruiz File filter
Filter by extension
Conversations
          Failed to load comments.   
        
        
          
      Loading
        
  Jump to
        
          Jump to file
        
      
      
          Failed to load files.   
        
        
          
      Loading
        
  Diff view
Diff view
There are no files selected for viewing
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              
        
          
          Binary file added
          
            BIN
              
                +99.8 KB
              
          
        
  ...Controls/tests/TestCases.Android.Tests/snapshots/android/Issue81_InitialLTR.png
  
  
      
      
   
        
      
      
    
      
      Loading
      
  Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
    
        
          
          Binary file added
          
            BIN
              
                +99.8 KB
              
          
        
  ...rols/tests/TestCases.Android.Tests/snapshots/android/Issue81_ToggledBackLTR.png
  
  
      
      
   
        
      
      
    
      
      Loading
      
  Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
    
        
          
          Binary file added
          
            BIN
              
                +99.8 KB
              
          
        
  ...Controls/tests/TestCases.Android.Tests/snapshots/android/Issue81_ToggledRTL.png
  
  
      
      
   
        
      
      
    
      
      Loading
      
  Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
    
        
          
          
            143 changes: 143 additions & 0 deletions
          
          143 
        
  src/Controls/tests/TestCases.HostApp/Issues/Issue31480.cs
  
  
      
      
   
        
      
      
    
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              | Original file line number | Diff line number | Diff line change | 
|---|---|---|
| @@ -0,0 +1,143 @@ | ||
| namespace Maui.Controls.Sample.Issues; | ||
|  | ||
| [Issue(IssueTracker.Github, 31480, "RightToLeft does not apply for FormattedText", PlatformAffected.iOS | PlatformAffected.macOS)] | ||
| public class Issue31480 : TestContentPage | ||
| { | ||
| const string ToggleButton = "ToggleFlowDirection"; | ||
| const string FormattedTextLabel = "FormattedTextLabel"; | ||
|  | ||
| Label _formattedTextLabel; | ||
| bool _isRtl = false; | ||
|  | ||
| protected override void Init() | ||
| { | ||
| var layout = new StackLayout { Padding = new Thickness(20), Spacing = 20 }; | ||
|  | ||
| var instructions = new Label | ||
| { | ||
| Text = "This test demonstrates FormattedText alignment with FlowDirection. " + | ||
| "Tap the button to toggle between LTR and RTL. " + | ||
| "The text should align properly based on the FlowDirection.", | ||
| FontSize = 14 | ||
| }; | ||
|  | ||
| layout.Children.Add(instructions); | ||
|  | ||
| // Create FormattedText label | ||
| var formattedString = new FormattedString(); | ||
| formattedString.Spans.Add(new Span | ||
| { | ||
| Text = "This is RTL formatted text that should align correctly", FontSize = 16 | ||
| }); | ||
|  | ||
| _formattedTextLabel = new Label | ||
| { | ||
| AutomationId = FormattedTextLabel, | ||
| FormattedText = formattedString, | ||
| FlowDirection = FlowDirection.LeftToRight, | ||
| HorizontalTextAlignment = TextAlignment.Start, | ||
| BackgroundColor = Colors.LightGray, | ||
| Padding = new Thickness(10), | ||
| Margin = new Thickness(0, 10) | ||
| }; | ||
|  | ||
| layout.Children.Add(_formattedTextLabel); | ||
|  | ||
| // Add a status label to show current flow direction | ||
| var statusLabel = new Label | ||
| { | ||
| Text = "Current FlowDirection: LeftToRight", FontSize = 12, TextColor = Colors.Blue | ||
| }; | ||
|  | ||
| layout.Children.Add(statusLabel); | ||
|  | ||
| // Add toggle button | ||
| var toggleButton = new Button | ||
| { | ||
| AutomationId = ToggleButton, | ||
| Text = "Toggle FlowDirection", | ||
| BackgroundColor = Colors.Blue, | ||
| TextColor = Colors.White | ||
| }; | ||
|  | ||
| toggleButton.Clicked += (sender, e) => | ||
| { | ||
| _isRtl = !_isRtl; | ||
| _formattedTextLabel.FlowDirection = _isRtl ? FlowDirection.RightToLeft : FlowDirection.LeftToRight; | ||
| statusLabel.Text = $"Current FlowDirection: {_formattedTextLabel.FlowDirection}"; | ||
| }; | ||
|  | ||
| layout.Children.Add(toggleButton); | ||
|  | ||
| // Add additional test labels for different scenarios | ||
| AddTestScenarios(layout); | ||
|  | ||
| Content = layout; | ||
| } | ||
|  | ||
| private void AddTestScenarios(StackLayout layout) | ||
| { | ||
| // Test scenario 1: RTL with Start alignment | ||
| var formattedStringRtlStart = new FormattedString(); | ||
| formattedStringRtlStart.Spans.Add(new Span { Text = "RTL Start alignment test", FontSize = 14 }); | ||
|  | ||
| var rtlStartLabel = new Label | ||
| { | ||
| AutomationId = "FormattedTextStartRTL", | ||
| FormattedText = formattedStringRtlStart, | ||
| FlowDirection = FlowDirection.RightToLeft, | ||
| HorizontalTextAlignment = TextAlignment.Start, | ||
| BackgroundColor = Colors.LightYellow, | ||
| Padding = new Thickness(10), | ||
| Margin = new Thickness(0, 5) | ||
| }; | ||
|  | ||
| layout.Children.Add(new Label | ||
| { | ||
| Text = "RTL with Start alignment:", FontSize = 12, FontAttributes = FontAttributes.Bold | ||
| }); | ||
| layout.Children.Add(rtlStartLabel); | ||
|  | ||
| // Test scenario 2: LTR with Start alignment | ||
| var formattedStringLtrStart = new FormattedString(); | ||
| formattedStringLtrStart.Spans.Add(new Span { Text = "LTR Start alignment test", FontSize = 14 }); | ||
|  | ||
| var ltrStartLabel = new Label | ||
| { | ||
| AutomationId = "FormattedTextStartLTR", | ||
| FormattedText = formattedStringLtrStart, | ||
| FlowDirection = FlowDirection.LeftToRight, | ||
| HorizontalTextAlignment = TextAlignment.Start, | ||
| BackgroundColor = Colors.LightGreen, | ||
| Padding = new Thickness(10), | ||
| Margin = new Thickness(0, 5) | ||
| }; | ||
|  | ||
| layout.Children.Add(new Label | ||
| { | ||
| Text = "LTR with Start alignment:", FontSize = 12, FontAttributes = FontAttributes.Bold | ||
| }); | ||
| layout.Children.Add(ltrStartLabel); | ||
|  | ||
| // Test scenario 3: RTL label for main test | ||
| var formattedStringRtl = new FormattedString(); | ||
| formattedStringRtl.Spans.Add(new Span { Text = "Fixed RTL FormattedText alignment", FontSize = 14 }); | ||
|  | ||
| var rtlLabel = new Label | ||
| { | ||
| AutomationId = "FormattedTextRTLLabel", | ||
| FormattedText = formattedStringRtl, | ||
| FlowDirection = FlowDirection.RightToLeft, | ||
| HorizontalTextAlignment = TextAlignment.Start, | ||
| BackgroundColor = Colors.LightPink, | ||
| Padding = new Thickness(10), | ||
| Margin = new Thickness(0, 5) | ||
| }; | ||
|  | ||
| layout.Children.Add(new Label | ||
| { | ||
| Text = "RTL FormattedText (should align right):", FontSize = 12, FontAttributes = FontAttributes.Bold | ||
| }); | ||
| layout.Children.Add(rtlLabel); | ||
| } | ||
| } | 
        
          
          Binary file added
          
            BIN
              
                +23.5 KB
              
          
        
  src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/Issue81_InitialLTR.png
  
  
      
      
   
        
      
      
    
      
      Loading
      
  Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
    
        
          
          Binary file added
          
            BIN
              
                +23.5 KB
              
          
        
  src/Controls/tests/TestCases.Mac.Tests/snapshots/mac/Issue81_ToggledRTL.png
  
  
      
      
   
        
      
      
    
      
      Loading
      
  Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
    
        
          
          
            39 changes: 39 additions & 0 deletions
          
          39 
        
  src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue31480.cs
  
  
      
      
   
        
      
      
    
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              | Original file line number | Diff line number | Diff line change | 
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| using NUnit.Framework; | ||
| using UITest.Appium; | ||
| using UITest.Core; | ||
|  | ||
| namespace Microsoft.Maui.TestCases.Tests.Issues; | ||
|  | ||
| public class Issue31480 : _IssuesUITest | ||
| { | ||
| public Issue31480(TestDevice testDevice) : base(testDevice) | ||
| { | ||
| } | ||
|  | ||
| public override string Issue => "RightToLeft does not apply for FormattedText"; | ||
|  | ||
| [Test] | ||
| [Category(UITestCategories.Label)] | ||
| public void FormattedTextToggleFlowDirectionTest() | ||
| { | ||
| Exception? exception = null; | ||
|  | ||
| // Verify initial state (LTR) | ||
| App.WaitForElement("FormattedTextLabel"); | ||
| App.WaitForElement("ToggleFlowDirection"); | ||
| VerifyScreenshotOrSetException(ref exception, "Issue81_InitialLTR"); | ||
|  | ||
| // Toggle to RTL | ||
| App.Tap("ToggleFlowDirection"); | ||
| VerifyScreenshotOrSetException(ref exception, "Issue81_ToggledRTL"); | ||
|  | ||
| // Toggle back to LTR | ||
| App.Tap("ToggleFlowDirection"); | ||
| VerifyScreenshotOrSetException(ref exception, "Issue81_ToggledBackLTR"); | ||
|  | ||
| if (exception != null) | ||
| { | ||
| throw exception; | ||
| } | ||
| } | ||
| } | 
        
          
          Binary file added
          
            BIN
              
                +23.4 KB
              
          
        
  ...ntrols/tests/TestCases.WinUI.Tests/snapshots/windows/Issue81_ToggledBackLTR.png
  
  
      
      
   
        
      
      
    
      
      Loading
      
  Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
    
        
          
          Binary file added
          
            BIN
              
                +23.5 KB
              
          
        
  src/Controls/tests/TestCases.WinUI.Tests/snapshots/windows/Issue81_ToggledRTL.png
  
  
      
      
   
        
      
      
    
      
      Loading
      
  Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
    
        
          
          Binary file added
          
            BIN
              
                +112 KB
              
          
        
  src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/Issue81_InitialLTR.png
  
  
      
      
   
        
      
      
    
      
      Loading
      
  Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
    
        
          
          Binary file added
          
            BIN
              
                +112 KB
              
          
        
  src/Controls/tests/TestCases.iOS.Tests/snapshots/ios/Issue81_ToggledRTL.png
  
  
      
      
   
        
      
      
    
      
      Loading
      
  Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
    
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
              
      
      Oops, something went wrong.
        
    
  
  Add this suggestion to a batch that can be applied as a single commit.
  This suggestion is invalid because no changes were made to the code.
  Suggestions cannot be applied while the pull request is closed.
  Suggestions cannot be applied while viewing a subset of changes.
  Only one suggestion per line can be applied in a batch.
  Add this suggestion to a batch that can be applied as a single commit.
  Applying suggestions on deleted lines is not supported.
  You must change the existing code in this line in order to create a valid suggestion.
  Outdated suggestions cannot be applied.
  This suggestion has been applied or marked resolved.
  Suggestions cannot be applied from pending reviews.
  Suggestions cannot be applied on multi-line comments.
  Suggestions cannot be applied while the pull request is queued to merge.
  Suggestion cannot be applied right now. Please check back later.
  
    
  
    
Uh oh!
There was an error while loading. Please reload this page.