RTL compatibility and bug fixes (#1274)

* 2024-03-04 A couple of release note updates, repair of MD2 demo page, Dependabot

* DB

* Add CultureInfo to MBCascadingDefaults and apply to MBDatePicker

* MBDatePicker rtl & make select, segmented btn, txt area/field responsive

* Implement rtl compatibility for MBDatePicker

* Move RTL selection to top app bar menu and escape autocompletes

* Fix MCW lack of RTL support for segmented buttons

* Refactor RTL check

* Make paginator rtl and internationalization capable

* Make badge rtl capable

* Make all sliding content rtl capable

* 2024-03-06 EoD

* Make file upload rtl capable

* Make shield rtl capable

* EoD - not working for sliders yet.

* Next

* Make slider rtl capable

* Update release notes

* Disable workflow tests pending design decisions

* Update workflows

* Fix unit tests

* Documentation and release notes

* Improve material symbols rendering

* Remove setting font--size on style when setting material symbols size

* DB updates

---------

Co-authored-by: Mark Stega <[email protected]>

Material.Blazor.MD3/package.json

@@ -26,15 +26,15 @@
     "@babel/plugin-transform-runtime": "^7.24.0",
     "@babel/preset-env": "^7.24.0",
     "@babel/preset-typescript": "^7.23.3",
-    "@material/web": "^1.3.1-nightly.c3d303e.0",
+    "@material/web": "^1.3.1-nightly.34c0a67.0",
     "babel-loader": "^9.1.3",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
     "material-components-web": "14.0.0",
     "regexp": "^1.0.0",
     "sass": "1.39.2",
-    "terser": "^5.28.1",
+    "terser": "^5.29.1",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.3.3",
+    "typescript": "^5.4.2",
     "webpack": "^5.90.3",
     "webpack-cli": "^5.1.4"
   }

Material.Blazor.Test/Material.Blazor.Test.csproj

@@ -4,9 +4,9 @@
 	</PropertyGroup>
 
 	<ItemGroup>
-		<PackageReference Include="bunit" Version="1.26.64" />
-		<PackageReference Include="bunit.core" Version="1.26.64" />
-		<PackageReference Include="bunit.web" Version="1.26.64" />
+		<PackageReference Include="bunit" Version="1.27.17" />
+		<PackageReference Include="bunit.core" Version="1.27.17" />
+		<PackageReference Include="bunit.web" Version="1.27.17" />
 		<PackageReference Include="NSubstitute" Version="5.1.0" />
 		<PackageReference Include="xunit" Version="2.7.0" />
 		<PackageReference Include="xunit.runner.visualstudio" Version="2.5.7">

Material.Blazor.Test/Mocking.cs

@@ -1,8 +1,9 @@
 using Bunit;
-using Material.Blazor;
 using Material.Blazor.Internal;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Logging;
+using Microsoft.JSInterop;
+
 using NSubstitute;
 using System.Globalization;
 using Xunit;
@@ -14,6 +15,11 @@ public class Mocking
     private TestContext ctx;
     private void InjectMockedServices()
     {
+        _ = new BunitJSInterop
+        {
+            Mode = JSRuntimeMode.Loose
+        };
+
         var cultureInfo = new CultureInfo("en-US");
 
         CultureInfo.DefaultThreadCurrentCulture = cultureInfo;
@@ -27,8 +33,11 @@ private void InjectMockedServices()
             .AddSingleton(Substitute.For<IMBSnackbarService>())
             .AddSingleton(Substitute.For<ILogger<ComponentFoundation>>())
             .AddSingleton(Substitute.For<IMBIcon>())
-            .AddSingleton(Substitute.For<IMBIconFoundry>());
+            .AddSingleton(Substitute.For<IMBIconFoundry>())
+            .AddSingleton(Substitute.For<IJSRuntime>());
     }
+
+
     [Fact]
     public void TryRenderMBAnchor()
     {
@@ -286,6 +295,7 @@ public void TryRenderMBDatePicker()
     {
         InjectMockedServices();
         var cut = ctx.RenderComponent<MBDatePicker>();
+
         cut.MarkupMatches(@"
 <div class=""mdc-select   mdc-select--outlined mdc-select--no-label  "" >
   <div class=""mdc-select__anchor"" role=""button"" aria-haspopup:ignore aria-expanded=""false"" aria-labelledby:ignore>
@@ -303,18 +313,17 @@ public void TryRenderMBDatePicker()
       </svg>
     </span>
   </div>
-  <div id:ignore class=""mdc-select__menu mdc-menu mdc-menu-surface mb-dp-menu__surface-adjust  mb-dp-menu__day-menu"" >
+  <div id:ignore="""" class=""mdc-select__menu mdc-menu mdc-menu-surface mb-dp-menu__surface-adjust mb-dp-menu__year-menu"">
     <div class=""mdc-typography--body2 mb-dp-container"">
       <ul class=""mdc-deprecated-list mb-dp-list"">
         <li class=""mdc-deprecated-list-item mdc-deprecated-list-item--selected mb-dp-list-item"" data-value=""Monday, January 1, 0001"" aria-selected=""true"" role=""option"">
           <span class=""mdc-deprecated-list-item__ripple""></span>
-          <span class=""mdc-deprecated-list-item__text mb-dp-list-item__text"" >Monday, January 1, 0001</span>
+          <span class=""mdc-deprecated-list-item__text mb-dp-list-item__text"">Monday, January 1, 0001</span>
         </li>
       </ul>
       <div class=""mb-dp-blank-filler""></div>
     </div>
-  </div>
-</div>
+  </div></div>
         ");
     }
 
@@ -561,7 +570,7 @@ public void TryRenderMBSlider()
       <div class=""mdc-slider__track--active_fill"" style=""transform: scaleX(0)""></div>
     </div>
   </div>
-  <div class=""mdc-slider__thumb"" style=""left: calc(0% - 24px)"">
+  <div class=""mdc-slider__thumb"" style=""visibility: hidden;"">
     <div class=""mdc-slider__thumb-knob""></div>
   </div>
 </div>

Material.Blazor.Website.MD3/Pages/Roadmap.razor.cs

@@ -9,7 +9,7 @@ public partial class Roadmap
     public Roadmap()
     {
         var rawMarkDown = @"
-# Version 2024-02-10
+# Version 2024-03-06
 
 # About Material 3
 
@@ -110,13 +110,11 @@ Time picker | 🟡 | Future | 💤 | 💤 |
 DragAndDropList | 🟢 | n/a | n/a | 💤 |
 Drawer | 🟢 | n/a | n/a | 💤 |
 FileUpload | 🟢 | n/a | n/a | 💤 | 
-Grid | 🟢 | n/a | n/a | 🟢 |
 IconButtonToggle | 🟢 | n/a | n/a | 💤 |
 IntField | 🟢 | n/a | n/a | 🟡 | Density and supporting text persistence |
 PagedDataList | 🟢 | n/a | n/a | 💤 |
 Paginator | 🟢 | n/a | n/a | 💤 |
 RadioButtonGroup | 🟢 | n/a | n/a | 🟡 | Density |
-Scheduler | 🟢 | n/a | n/a | 💤 |
 SegmentedButtonMulti | 🟢 | n/a | n/a | 💤 |
 Shield | 🟢 | n/a | n/a | 💤 |
 Slider | 🟢 | n/a | n/a | 💤 |