Bug fixes and RTL implementation improvement (#1276)

* Reinstate ShallowCopy and fix Blazor crash when helper text changes * Replace bool IsRTL logic with CSS based rtl logic * Further rtl css logic refactoring * Add release notes * Improve CSS transform for rtl icons
Material-Blazor · Mar 13, 2024 · 826a9e3 · 826a9e3
1 parent 997bf5f
commit 826a9e3
Show file tree

Hide file tree

Showing 20 changed files with 154 additions and 83 deletions.
diff --git a/Material.Blazor.Website/Shared/DemonstrationPage.razor.cs b/Material.Blazor.Website/Shared/DemonstrationPage.razor.cs
@@ -55,12 +55,9 @@ private class ReferenceItem
         private IEnumerable<MBSelectElement<MBDensity>> Densities { get; set; }
 
         private bool NeedsTable =>
-            ((ComponentAndPageName != null) ||
+            (ComponentAndPageName != null) ||
              (DetailedArticle != null) ||
-             (MaterialIOPage != null));
-
-
-        private bool IsRTL { get; set; } = false;
+             (MaterialIOPage != null);
 
 
         protected override void OnInitialized()

diff --git a/Material.Blazor/Components/Carousel/MBCarousel.razor b/Material.Blazor/Components/Carousel/MBCarousel.razor
@@ -20,11 +20,13 @@
             </InternalCarouselPanel>
         </div>
 
-        <MBFloatingActionButton Icon="@PreviousIcon"
+        <MBFloatingActionButton Icon="navigate_before"
+                                class="mb-rtl-reversed-icon"
                                 style="order: 1;"
                                 @onclick="NavigatePrevious" />
 
-        <MBFloatingActionButton Icon="@NextIcon"
+        <MBFloatingActionButton Icon="navigate_next"
+                                class="mb-rtl-reversed-icon"
                                 style="order: 3;"
                                 @onclick="NavigateNext" />
     </div>

diff --git a/Material.Blazor/Components/Carousel/MBCarousel.razor.cs b/Material.Blazor/Components/Carousel/MBCarousel.razor.cs
@@ -40,11 +40,8 @@ public partial class MBCarousel<TItem> : InputComponent<int>
     private CancellationTokenSource TokenSource { get; set; } = new();
     internal InternalCarouselPanel<TItem> ICP { get; set; }
     private int ItemIndex { get; set; } = 0;
-    private bool IsRTL { get; set; } = false;
     private int RadioItemIndex { get; set; }
     private List<MBSelectElement<int>> RadioElements { get; set; }
-    private string PreviousIcon => IsRTL ? "navigate_next" : "navigate_before";
-    private string NextIcon => IsRTL ? "navigate_before" : "navigate_next";
 
 
 
@@ -78,8 +75,6 @@ protected override async Task OnParametersSetAsync()
         {
             RadioElements.Add(new() { SelectedValue = i, Label = $"Image {i}" });
         }
-
-        IsRTL = await IsElementRTL(ElementReference);
     }
 
 

diff --git a/Material.Blazor/Components/DatePicker/InternalDatePickerPanel.razor b/Material.Blazor/Components/DatePicker/InternalDatePickerPanel.razor
@@ -30,22 +30,22 @@
             @if (!ShowYearPad)
             {
                 <div class="mb-dp-menu__right">
-                    <MBIconButton class="mb-dp-menu__icon-button"
+                    <MBIconButton class="mb-dp-menu__icon-button mb-rtl-reversed-icon"
                                   Disabled="@PreviousMonthDisabled"
-                                  Icon="@BackIcon"
+                                  Icon="chevron_left"
                                   IconFoundry="@foundry"
                                   @onclick="@OnPreviousMonthClick"
                                   type="button" />
 
-                    <MBIconButton class="mb-dp-menu__icon-button spaced"
-                                  Icon="@UndoIcon"
+                    <MBIconButton class="mb-dp-menu__icon-button spaced mb-rtl-reversed-icon"
+                                  Icon="undo"
                                   IconFoundry="@foundry"
                                   @onclick="@OnShowCurrentDateClick"
                                   type="button" />
 
-                    <MBIconButton class="mb-dp-menu__icon-button spaced"
+                    <MBIconButton class="mb-dp-menu__icon-button spaced mb-rtl-reversed-icon"
                                   Disabled="@NextMonthDisabled"
-                                  Icon="@ForwardIcon"
+                                  Icon="chevron_right"
                                   IconFoundry="@foundry"
                                   @onclick="@OnNextMonthClick"
                                   type="button" />

diff --git a/Material.Blazor/Components/DatePicker/InternalDatePickerPanel.razor.cs b/Material.Blazor/Components/DatePicker/InternalDatePickerPanel.razor.cs
@@ -135,10 +135,7 @@ internal bool ShowYearPad
     private readonly string currentYearId = Utilities.GenerateUniqueElementName();
 
     private readonly IMBIconFoundry foundry = MBIconHelper.MSFoundry(fill: true, gradient: MBIconMSGradient.NormalEmphasis, size: MBIconMSSize.Size24, style: MBIconMSStyle.Outlined, weight: MBIconMSWeight.W400);
-    private bool IsRTL { get; set; }
-    private string BackIcon => IsRTL ? "chevron_right" : "chevron_left";
-    private string UndoIcon => IsRTL ? "redo" : "undo";
-    private string ForwardIcon => IsRTL ? "chevron_left" : "chevron_right";
+
 
 
     // Would like to use <inheritdoc/> however DocFX cannot resolve to references outside Material.Blazor
@@ -155,8 +152,6 @@ protected override async Task OnParametersSetAsync()
     {
         await base.OnParametersSetAsync();
 
-        IsRTL = await IsElementRTL(Parent.ElementReference);
-
         SetParameters();
     }
 

diff --git a/Material.Blazor/Components/PagedDataList/MBPagedDataList.razor b/Material.Blazor/Components/PagedDataList/MBPagedDataList.razor
@@ -44,7 +44,5 @@
         {
             ListTemplate = (childContent) => @<ul>@childContent</ul>;
         }
-
-        IsRTL = await IsElementRTL(ElementReference);
     }
 }
diff --git a/Material.Blazor/Components/PagedDataList/MBPagedDataList.razor.cs b/Material.Blazor/Components/PagedDataList/MBPagedDataList.razor.cs
@@ -124,7 +124,6 @@ private int BackingItemsPerPage
     private string ContentClass { get; set; } = "";
     public IEnumerable<TItem> CurrentPage => CheckedData.Skip(PageNumber * ItemsPerPage).Take(ItemsPerPage);
     private bool HasRendered { get; set; } = false;
-    private bool IsRTL { get; set; } = false;
     private bool IsHidden { get; set; } = false;
     private Func<TItem, object> KeyGenerator { get; set; }
 
@@ -134,13 +133,13 @@ private async Task OnPageNumberChange(int oldPageNumber, int newPageNumber)
         string nextClass;
         if (newPageNumber < oldPageNumber)
         {
-            nextClass = MBSlidingContent<object>.InFromPrevious(IsRTL);
-            ContentClass = MBSlidingContent<object>.OutToNext(IsRTL);
+            nextClass = MBSlidingContent<object>.InFromPrevious;
+            ContentClass = MBSlidingContent<object>.OutToNext;
         }
         else
         {
-            nextClass = MBSlidingContent<object>.InFromNext(IsRTL);
-            ContentClass = MBSlidingContent<object>.OutToPrevious(IsRTL);
+            nextClass = MBSlidingContent<object>.InFromNext;
+            ContentClass = MBSlidingContent<object>.OutToPrevious;
         }
 
         await Task.Delay(100);

diff --git a/Material.Blazor/Components/Paginator/MBPaginator.razor b/Material.Blazor/Components/Paginator/MBPaginator.razor
@@ -45,10 +45,10 @@
         </div>
 
         <div class="mdc-data-table__pagination-navigation">
-            <MBIconButton class="mdc-data-table__pagination-button" Icon="@FirstItemIcon" @onclick="@OnFirstClick" Disabled="@PreviousDisabled" data-prev-page="true" />
-            <MBIconButton class="mdc-data-table__pagination-button" Icon="@BackIcon" @onclick="@OnPreviousClick" Disabled="@PreviousDisabled" data-prev-page="true" />
-            <MBIconButton class="mdc-data-table__pagination-button" Icon="@ForwardIcon" @onclick="@OnNextClick" Disabled="@NextDisabled" data-prev-page="true" />
-            <MBIconButton class="mdc-data-table__pagination-button" Icon="@LastItemIcon" @onclick="@OnLastClick" Disabled="@NextDisabled" data-prev-page="true" />
+            <MBIconButton class="mdc-data-table__pagination-button mb-rtl-reversed-icon" Icon="first_page" @onclick="@OnFirstClick" Disabled="@PreviousDisabled" data-prev-page="true" />
+            <MBIconButton class="mdc-data-table__pagination-button mb-rtl-reversed-icon" Icon="chevron_left" @onclick="@OnPreviousClick" Disabled="@PreviousDisabled" data-prev-page="true" />
+            <MBIconButton class="mdc-data-table__pagination-button mb-rtl-reversed-icon" Icon="chevron_right" @onclick="@OnNextClick" Disabled="@NextDisabled" data-prev-page="true" />
+            <MBIconButton class="mdc-data-table__pagination-button mb-rtl-reversed-icon" Icon="last_page" @onclick="@OnLastClick" Disabled="@NextDisabled" data-prev-page="true" />
         </div>
     </div>
 </div>
diff --git a/Material.Blazor/Components/Paginator/MBPaginator.razor.cs b/Material.Blazor/Components/Paginator/MBPaginator.razor.cs
@@ -134,13 +134,6 @@ private int BackingPageNumber
 
 
 
-    private bool IsRTL { get; set; }
-    private string FirstItemIcon => IsRTL ? "last_page" : "first_page";
-    private string BackIcon => IsRTL ? "chevron_right" : "chevron_left";
-    private string ForwardIcon => IsRTL ? "chevron_left" : "chevron_right";
-    private string LastItemIcon => IsRTL ? "first_page" : "last_page";
-
-
 
     private bool toggleOn;
     private bool ToggleOn 
@@ -193,8 +186,6 @@ protected override async Task OnParametersSetAsync()
     {
         await base.OnParametersSetAsync().ConfigureAwait(false);
 
-        IsRTL = await IsElementRTL(ContainerReference);
-
         if (_cachedItemCount != ItemCount)
         {
             _cachedItemCount = ItemCount;

diff --git a/Material.Blazor/Components/SlidingContent/MBSlidingContent.razor.cs b/Material.Blazor/Components/SlidingContent/MBSlidingContent.razor.cs
@@ -47,21 +47,15 @@ public partial class MBSlidingContent<TItem> : ComponentFoundation
     private string VisibilityClass => HideContent ? Hidden : Visible;
     private TItem CurrentItem { get; set; }
     private ElementReference ElementReference { get; set; }
-    private bool IsRTL { get; set; } = false;
     private bool HasRendered { get; set; } = false;
 
 
     internal const string Hidden = "mb-visibility-hidden";
     internal const string Visible = "mb-visibility-visible";
-    private const string InFromLeft = "mb-slide-in-from-left";
-    private const string InFromRight = "mb-slide-in-from-right";
-    private const string OutToLeft = "mb-slide-out-to-left";
-    private const string OutToRight = "mb-slide-out-to-right";
-
-    internal static string InFromPrevious(bool isRTL) => isRTL ? InFromRight : InFromLeft;
-    internal static string InFromNext(bool isRTL) => isRTL ? InFromLeft : InFromRight;
-    internal static string OutToPrevious(bool isRTL) => isRTL ? OutToRight : OutToLeft;
-    internal static string OutToNext(bool isRTL) => isRTL ? OutToLeft : OutToRight;
+    internal const string InFromPrevious = "mb-slide-in-from-previous";
+    internal const string InFromNext = "mb-slide-in-from-next";
+    internal const string OutToPrevious = "mb-slide-out-to-previous";
+    internal const string OutToNext = "mb-slide-out-to-next";
 
     private enum SlideDirection { Backwards, Forwards }
 
@@ -81,8 +75,6 @@ protected override async Task OnParametersSetAsync()
             var direction = (ItemIndex > _cachedItemIndex) ? SlideDirection.Forwards : SlideDirection.Backwards;
             EnqueueJSInteropAction(() => SlideToItem(ItemIndex, direction));
         }
-
-        IsRTL = await IsElementRTL(ElementReference);
     }
 
 
@@ -96,13 +88,13 @@ private async Task SlideToItem(int index, SlideDirection direction)
 
                 if (direction == SlideDirection.Backwards)
                 {
-                    nextClass = InFromPrevious(IsRTL);
-                    ContentClass = OutToNext(IsRTL);
+                    nextClass = InFromPrevious;
+                    ContentClass = OutToNext;
                 }
                 else
                 {
-                    nextClass = InFromNext(IsRTL);
-                    ContentClass = OutToPrevious(IsRTL);
+                    nextClass = InFromNext;
+                    ContentClass = OutToPrevious;
                 }
 
                 await InvokeAsync(StateHasChanged);

diff --git a/Material.Blazor/Components/SlidingContent/MBSlidingContent.scss b/Material.Blazor/Components/SlidingContent/MBSlidingContent.scss
@@ -6,11 +6,61 @@
     visibility: visible;
 }
 
-.mb-slide-in-from-left {
+
+
+
+.mb-slide-in-from-previous {
+    animation: slideInFromLeft ease 200ms;
+    -webkit-animation: slideInFromLeft ease 200ms;
+}
+
+[dir="rtl"] .mb-slide-in-from-previous {
+    animation: slideInFromRight ease 200ms;
+    -webkit-animation: slideInFromRight ease 200ms;
+}
+
+
+
+
+.mb-slide-in-from-next {
+    animation: slideInFromRight ease 200ms;
+    -webkit-animation: slideInFromRight ease 200ms;
+}
+
+[dir="rtl"] .mb-slide-in-from-next {
     animation: slideInFromLeft ease 200ms;
     -webkit-animation: slideInFromLeft ease 200ms;
 }
 
+
+
+
+.mb-slide-out-to-previous {
+    animation: slideOutToLeft ease-out 10000ms;
+    -webkit-animation: slideOutToLeft ease-out 10000ms;
+}
+
+[dir="rtl"] .mb-slide-out-to-previous {
+    animation: slideOutToRight ease-out 10000ms;
+    -webkit-animation: slideOutToRight ease-out 10000ms;
+}
+
+
+
+
+.mb-slide-out-to-next {
+    animation: slideOutToRight ease-out 10000ms;
+    -webkit-animation: slideOutToRight ease-out 10000ms;
+}
+
+[dir="rtl"] .mb-slide-out-to-next {
+    animation: slideOutToLeft ease-out 10000ms;
+    -webkit-animation: slideOutToLeft ease-out 10000ms;
+}
+
+
+
+
 @-webkit-keyframes slideInFromLeft {
     0% {
         margin-left: -12px;
@@ -36,10 +86,7 @@
 }
 
 
-.mb-slide-in-from-right {
-    animation: slideInFromRight ease 200ms;
-    -webkit-animation: slideInFromRight ease 200ms;
-}
+
 
 @-webkit-keyframes slideInFromRight {
     0% {
@@ -66,10 +113,7 @@
 }
 
 
-.mb-slide-out-to-left {
-    animation: slideOutToLeft ease-out 10000ms;
-    -webkit-animation: slideOutToLeft ease-out 10000ms;
-}
+
 
 @-webkit-keyframes slideOutToLeft {
     0% {
@@ -108,10 +152,7 @@
 }
 
 
-.mb-slide-out-to-right {
-    animation: slideOutToRight ease-out 10000ms;
-    -webkit-animation: slideOutToRight ease-out 10000ms;
-}
+
 
 @-webkit-keyframes slideOutToRight {
     0% {

diff --git a/Material.Blazor/Components/TextArea/MBTextArea.razor.cs b/Material.Blazor/Components/TextArea/MBTextArea.razor.cs
@@ -16,6 +16,7 @@ public partial class MBTextArea : InputComponent<string>
     /// Helper text that is displayed either with focus or persistently with <see cref="HelperTextPersistent"/>.
     /// </summary>
     [Parameter] public string HelperText { get; set; } = "";
+    private string _cachedHelperText;
 
 
     /// <summary>
@@ -129,6 +130,7 @@ protected override async Task OnInitializedAsync()
         }
 
         _cachedLabel = Label;
+        _cachedHelperText = HelperText;
     }
 
 
@@ -142,6 +144,12 @@ protected override async Task OnParametersSetAsync()
             _cachedLabel = Label;
             AllowNextRender(true);
         }
+
+        if (_cachedHelperText != HelperText)
+        {
+            _cachedHelperText = HelperText;
+            AllowNextRender(true);
+        }
     }
 
 

diff --git a/Material.Blazor/Components/TextField/MBTextField.razor b/Material.Blazor/Components/TextField/MBTextField.razor
@@ -86,10 +86,11 @@
     var additionalClass = HasErrorText ? "mb-text-field__helper-text" : "";
 
     <div class="mdc-text-field-helper-line @additionalClass">
-        <div @ref="@HelperTextReference"
-         class="mdc-text-field-helper-text"
-         id="@helperTextId"
-         aria-hidden="true">
+        <div @key="@HelperTextMarkup" 
+             @ref="@HelperTextReference"
+             class="mdc-text-field-helper-text"
+             id="@helperTextId"
+             aria-hidden="true">
             @HelperTextMarkup
         </div>
     </div>
@@ -99,7 +100,7 @@
 {
     <div class="mdc-text-field-helper-line  mb-text-field__helper-invalid-text">
         <div @ref="@ErrorTextReference"
-         aria-hidden="true">
+             aria-hidden="true">
             @DateFieldErrorMessage
         </div>
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,7 +44,5 @@ @@
             {
                 ListTemplate = (childContent) => @<ul>@childContent</ul>;
             }
-            IsRTL = await IsElementRTL(ElementReference);
         }
     }