fix!: Implement DesignToken.WithDefault and use in Demo site (#869)

microsoft · Oct 20, 2023 · 6698f96 · 6698f96
1 parent 369274d
commit 6698f96
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 8 deletions.
diff --git a/examples/Demo/Shared/Components/SiteSettingsPanel.razor.cs b/examples/Demo/Shared/Components/SiteSettingsPanel.razor.cs
@@ -64,7 +64,7 @@ public async Task UpdateDirection()
         Content.Dir = _dir;
 
         await _jsModule!.InvokeVoidAsync("switchDirection", _dir.ToString());
-        await Direction.SetValueFor(_container, _dir.ToAttributeValue());
+        await Direction.WithDefault(_dir.ToAttributeValue());
 
         StateHasChanged();
     }
@@ -82,7 +82,7 @@ public async void UpdateTheme()
 
         Content.Luminance = _baseLayerLuminance;
 
-        await BaseLayerLuminance.SetValueFor(_container, _baseLayerLuminance.GetLuminanceValue());
+        await BaseLayerLuminance.WithDefault(_baseLayerLuminance.GetLuminanceValue());
         await _jsModule!.InvokeVoidAsync("switchHighlightStyle", _baseLayerLuminance == StandardLuminance.DarkMode);
     }
 
@@ -93,11 +93,13 @@ private async void HandleColorChange(ChangeEventArgs args)
         {
             if (value != "default")
             {
-                await AccentBaseColor.SetValueFor(_container, value.ToSwatch());
+                await AccentBaseColor.WithDefault(value.ToSwatch());
             }
             else
             {
-                await AccentBaseColor.DeleteValueFor(_container);
+                // Default FluentUI value for AccentBaseColor from 
+                // https://github.com/microsoft/fluentui/blob/c0d3065982e1646c54ba00c1d524248b792dbcad/packages/web-components/src/color/utilities/color-constants.ts#L22C32-L22C39
+                await AccentBaseColor.WithDefault("#0078D4".ToSwatch());
             }
 
             Content.Color = value;

diff --git a/examples/Demo/Shared/Shared/DemoMainLayout.razor.cs b/examples/Demo/Shared/Shared/DemoMainLayout.razor.cs
@@ -77,7 +77,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
             GlobalState.SetLuminance(_dark ? StandardLuminance.DarkMode: StandardLuminance.LightMode);
 
             if (_selectedColorOption != OfficeColor.Default)
-                await AccentBaseColor.SetValueFor(container, _selectedColorOption.ToAttributeValue()!.ToSwatch());            
+                await AccentBaseColor.WithDefault(_selectedColorOption.ToAttributeValue()!.ToSwatch());            
         }
     }
 

diff --git a/src/Core/DesignTokens/DesignToken.razor.cs b/src/Core/DesignTokens/DesignToken.razor.cs
@@ -74,9 +74,10 @@ private async Task InitJSReference()
     /// <summary>
     /// Sets the default value of this token
     /// </summary>
-    public DesignToken<T> WithDefault(T value)
+    public async ValueTask<DesignToken<T>> WithDefault(T value)
     {
-        //_defaultValue = value;
+        await InitJSReference();
+        await _jsModule.InvokeVoidAsync(Name + ".withDefault", value);
         return this;
     }
 

diff --git a/src/Core/DesignTokens/IDesignToken.cs b/src/Core/DesignTokens/IDesignToken.cs
@@ -10,7 +10,7 @@ public interface IDesignToken<T>
     ValueTask<T> GetValueFor(ElementReference element);
 
     ValueTask SetValueFor(ElementReference element, T value);
-    DesignToken<T> WithDefault(T value);
+    ValueTask<DesignToken<T>> WithDefault(T value);
 
     ValueTask<DesignToken<T>> Create(string name);
 }