Add PopupHorizontalPosition (#3001)

microsoft · Dec 3, 2024 · 176f4eb · 176f4eb
1 parent 1552ee3
commit 176f4eb
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 2 deletions.
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -2931,6 +2931,12 @@
             Gets or sets a value which will be set when double-clicking on the text field of date picker.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDatePicker.PopupHorizontalPosition">
+            <summary>
+            Gets or sets an <see cref="T:Microsoft.FluentUI.AspNetCore.Components.HorizontalPosition"/> for the popup displayed when the user open the calendar.
+            By default, this value is Left or Right, depending of the 'CurrentUICulture.TextInfo.IsRightToLeft' value.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentTimePicker.StyleValue">
             <summary />
         </member>

diff --git a/examples/Demo/Shared/Pages/DateTimes/Examples/DatePickerDefault.razor b/examples/Demo/Shared/Pages/DateTimes/Examples/DatePickerDefault.razor
@@ -12,7 +12,7 @@
         <FluentDatePicker Label="Months view" AriaLabel="To" @bind-Value="@SelectedValue" View="CalendarViews.Months" DoubleClickToDate="@DoubleClickToDate" />
     </div>
     <div>
-        <FluentDatePicker Label="Years view" AriaLabel="To" @bind-Value="@SelectedValue" View="CalendarViews.Years" DoubleClickToDate="@DoubleClickToDate" />
+        <FluentDatePicker Label="Years view" AriaLabel="To" @bind-Value="@SelectedValue" View="CalendarViews.Years" DoubleClickToDate="@DoubleClickToDate" PopupHorizontalPosition="@HorizontalPosition.Left" />
     </div>
 </div>
 <p>

diff --git a/src/Core/Components/DateTime/FluentDatePicker.razor b/src/Core/Components/DateTime/FluentDatePicker.razor
@@ -27,7 +27,7 @@
     <FluentOverlay @bind-Visible="@Opened" Dismissable="true" FullScreen="true" Interactive="true" InteractiveExceptId="@PopupId" />
     <FluentAnchoredRegion Anchor="@Id"
                           Id="@PopupId"
-                          HorizontalDefaultPosition="@(System.Globalization.CultureInfo.CurrentUICulture.TextInfo.IsRightToLeft ? HorizontalPosition.Left : HorizontalPosition.Right)"
+                          HorizontalDefaultPosition="@(PopupHorizontalPosition ?? (System.Globalization.CultureInfo.CurrentUICulture.TextInfo.IsRightToLeft ? HorizontalPosition.Left : HorizontalPosition.Right))"
                           HorizontalInset="true"
                           VerticalDefaultPosition="@VerticalPosition.Unset"
                           Shadow="ElevationShadow.Flyout"

diff --git a/src/Core/Components/DateTime/FluentDatePicker.razor.cs b/src/Core/Components/DateTime/FluentDatePicker.razor.cs
@@ -65,6 +65,13 @@ protected override string? ClassValue
     [Parameter]
     public DateTime? DoubleClickToDate { get; set; }
 
+    /// <summary>
+    /// Gets or sets an <see cref="HorizontalPosition"/> for the popup displayed when the user open the calendar.
+    /// By default, this value is Left or Right, depending of the 'CurrentUICulture.TextInfo.IsRightToLeft' value.
+    /// </summary>
+    [Parameter]
+    public HorizontalPosition? PopupHorizontalPosition { get; set; }
+
     public bool Opened { get; set; } = false;
 
     protected override string? FormatValueAsString(DateTime? value)
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,7 @@ @@
             <FluentDatePicker Label="Months view" AriaLabel="To" @bind-Value="@SelectedValue" View="CalendarViews.Months" DoubleClickToDate="@DoubleClickToDate" />
         </div>
         <div>
-            <FluentDatePicker Label="Years view" AriaLabel="To" @bind-Value="@SelectedValue" View="CalendarViews.Years" DoubleClickToDate="@DoubleClickToDate" />
+            <FluentDatePicker Label="Years view" AriaLabel="To" @bind-Value="@SelectedValue" View="CalendarViews.Years" DoubleClickToDate="@DoubleClickToDate" PopupHorizontalPosition="@HorizontalPosition.Left" />
         </div>
     </div>
     <p>
@@ Expand Down @@