Merge branch 'dev' of https://github.com/microsoft/fluentui-blazor in…

…to dev
microsoft · Jun 20, 2024 · b8e1aa5 · b8e1aa5
2 parents 451acb4 + 0fbee83
commit b8e1aa5
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 10 deletions.
diff --git a/examples/Demo/Shared/wwwroot/docs/IconsAndEmoji.md b/examples/Demo/Shared/wwwroot/docs/IconsAndEmoji.md
@@ -21,13 +21,13 @@ To browse the collections, use the following links:
 To use the **Fluent UI System Icons** in your application, you will need to install the [Microsoft.FluentUI.AspNetCore.Components.Icons](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components.Icons/) NuGet package in the project which is using the main library. 
 
 ```shell
-dotnet add package FluentUI.AspNetCore.Components.Icons
+dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons
 ```
 
 To use the **Fluent UI Emoji** in your application, you need to install the [Microsoft.FluentUI.AspNetCore.Components.Emojis](https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components.Emoji/) NuGet package in the project which is using the main library.
 
 ```shell
-dotnet add package FluentUI.AspNetCore.Components.Emojis
+dotnet add package Microsoft.FluentUI.AspNetCore.Components.Emojis
 ```
 
 
@@ -116,4 +116,4 @@ For Icons:
 
 For Emojis:
 - To search: `<FluentEmoji Emoji="(?<name>[^"]+)"?`
-- To replace by: `<FluentEmoji Value="@(new ${name}())"`
+- To replace by: `<FluentEmoji Value="@(new ${name}())"`
diff --git a/src/Core/Components/DesignSystemProvider/FluentDesignTheme.razor.js b/src/Core/Components/DesignSystemProvider/FluentDesignTheme.razor.js
@@ -13,8 +13,15 @@ export function addThemeChangeEvent(dotNetHelper, id) {
             }
         });
 
-        const theme = element.themeStorage.readLocalStorage()
-        return theme == null ? theme : JSON.stringify(theme);
+        try {
+            // This can fail when localStorage does not contain a valid JSON object
+            const theme = element.themeStorage.readLocalStorage()
+            return theme == null ? theme : JSON.stringify(theme);
+        } catch (error) {
+            ClearLocalStorage(id);
+            console.error(`FluentDesignTheme: failing to load theme from localStorage.`, error);
+        }
+
     }
 
     return null;

diff --git a/src/Core/Components/Splitter/FluentMultiSplitter.razor.css b/src/Core/Components/Splitter/FluentMultiSplitter.razor.css
@@ -1,4 +1,4 @@
-.fluent-multi-splitter {
+.fluent-multi-splitter {
     /* Resize Icon colors */
     --fluent-multi-splitter-color: var(--neutral-stroke-strong-rest);
     --fluent-multi-splitter-color-active: var(--neutral-stroke-strong-hover);
@@ -103,7 +103,7 @@
     }
 
         .fluent-multi-splitter[orientation="horizontal"] ::deep > .fluent-multi-splitter-bar > span[part="collapse"]:before {
-            content: '\025C0;';            
+            content: '\025C0';            
         }
 
         .fluent-multi-splitter[orientation="horizontal"] ::deep > .fluent-multi-splitter-bar > span[part="resize"] {
@@ -112,7 +112,7 @@
         }
 
         .fluent-multi-splitter[orientation="horizontal"] ::deep > .fluent-multi-splitter-bar > span[part="expand"]:before {
-            content: '\025B6;';
+            content: '\025B6';
         }
 
         .fluent-multi-splitter[orientation="horizontal"] ::deep > .fluent-multi-splitter-bar[status="resizable"]:hover {
@@ -130,7 +130,7 @@
     }
 
         .fluent-multi-splitter[orientation="vertical"] ::deep > .fluent-multi-splitter-bar > span[part="collapse"]:before {
-            content: '\025B2;';
+            content: '\025B2';
         }
 
         .fluent-multi-splitter[orientation="vertical"] ::deep > .fluent-multi-splitter-bar > span[part="resize"] {
@@ -139,7 +139,7 @@
         }
 
         .fluent-multi-splitter[orientation="vertical"] ::deep > .fluent-multi-splitter-bar > span[part="expand"]:before {
-            content: '\025BC;';
+            content: '\025BC';
         }
 
         .fluent-multi-splitter[orientation="vertical"] ::deep > .fluent-multi-splitter-bar[status="resizable"]:hover {