merge

microsoft · Jan 12, 2024 · cd4b771 · cd4b771
2 parents 3fe8bf9 + f56764a
commit cd4b771
Show file tree

Hide file tree

Showing 288 changed files with 1,902 additions and 3,586 deletions.
diff --git a/.azure-devops/common/versioning.yml b/.azure-devops/common/versioning.yml
@@ -2,5 +2,5 @@ variables:
   # File and Package version
   # dev  branch: 1.2.4-Preview-23282-1'    (PackageSuffix is always ignored in Dev branch)
   # main branch: 1.2.4-RC.1'               (PackageSuffix is ignored, if empty, in Main branch)
-  FileVersion: '4.3.0'   # Set the next final version here.
+  FileVersion: '4.3.1'   # Set the next final version here.
   PackageSuffix: ''
diff --git a/.gitignore b/.gitignore
@@ -409,4 +409,4 @@ Microsoft.Fast.Components.FluentUI.xml
 /examples/Demo/Shared/FluentUI.Demo.Shared.xml
 /examples/Demo/Shared/Microsoft.Fast.Components.FluentUI.xml
 /tests/TemplateValidation/**/Data/Migrations
-/tests/TemplateValidation/**/Data/app.db
+/tests/TemplateValidation/**/Data/*
diff --git a/Directory.Build.props b/Directory.Build.props
@@ -12,8 +12,8 @@
 		<SolutionDir>$(MSBuildThisFileDirectory)</SolutionDir>
 		<AccelerateBuildsInVisualStudio>true</AccelerateBuildsInVisualStudio>
 
-		<VersionFile>4.3.0</VersionFile>
-		<VersionPrefix>4.3.0</VersionPrefix>
+		<VersionFile>4.3.1</VersionFile>
+		<VersionPrefix>4.3.1</VersionPrefix>
 		<VersionSuffix></VersionSuffix>
 		<AssemblyVersion>$(VersionFile)</AssemblyVersion>
 		<FileVersion>$(VersionFile)</FileVersion>

diff --git a/examples/Demo/Shared/Components/SiteSettingsPanel.razor b/examples/Demo/Shared/Components/SiteSettingsPanel.razor
@@ -9,22 +9,22 @@
 
     <FluentStack Orientation="Orientation.Vertical" VerticalGap="0">
         <FluentSelect Label="Theme"
-                      Style="margin-bottom: 30px;"
                       Width="100%"
+                      Style="margin-bottom: 30px;"
                       Items="@AllModes"
                       @bind-SelectedOption="@Mode" />
 
         <FluentSelect Label="Color"
                       Style="margin-bottom: 30px;"
                       Width="100%"
-                      Items="@AllOfficeColors"
+                      Items="@(OfficeColorUtilities.AllColors.Cast<OfficeColor?>())"
                       Height="200px"
                       @bind-SelectedOption="@OfficeColor">
             <OptionTemplate>
                 <FluentStack>
                     <FluentIcon Value="@(new Icons.Filled.Size20.RectangleLandscape())"
                                 Color="Color.Custom"
-                                CustomColor="@(@context.ToAttributeValue() != "default" ? context.ToAttributeValue() : "#036ac4" )" />
+                                CustomColor="@GetCustomColor(@context)" />
                     <FluentLabel>@context</FluentLabel>
                 </FluentStack>
             </OptionTemplate>
@@ -38,7 +38,7 @@
                       ValueChanged="HandleDirectionChanged"/>
         <FluentLabel>
             These values (except for Direction) are persisted in the LocalStorage.
-            You can recover this style during your next visits.<br />
+            and will be recovered during your next visits.<br /><br />
             Use the 'Reset settings button' below to go back to the system theme and a random color.
         </FluentLabel>
         <FluentDivider Style="width: 100%; margin: 1rem 0" />

diff --git a/examples/Demo/Shared/Components/SiteSettingsPanel.razor.cs b/examples/Demo/Shared/Components/SiteSettingsPanel.razor.cs
@@ -62,9 +62,18 @@ private async Task ResetSite()
         Logger.LogInformation(msg);
         _status = msg;
 
-        OfficeColor = Microsoft.FluentUI.AspNetCore.Components.OfficeColor.Random;
+        OfficeColor = OfficeColorUtilities.GetRandom();
         Mode = DesignThemeModes.System;
+    }
+
+    private static string? GetCustomColor(OfficeColor? color)
+    {
+        return color switch
+        {
+            null => OfficeColorUtilities.GetRandom(true).ToAttributeValue(),
+            Microsoft.FluentUI.AspNetCore.Components.OfficeColor.Default => "#036ac4",
+            _ => color.ToAttributeValue(),
+        };
 
-        //StateHasChanged();
     }
 }
diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml
@@ -2838,7 +2838,7 @@
         </member>
         <member name="E:Microsoft.FluentUI.AspNetCore.Components.DialogService.OnShow">
             <summary>
-            A event that will be invoked when showing a dialog with a custom component
+            An event that will be invoked when showing a dialog with a custom component
             </summary>
         </member>
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.IDialogService.ShowDialogAsync``1(System.Type,``0,Microsoft.FluentUI.AspNetCore.Components.DialogParameters)">
@@ -2901,7 +2901,7 @@
         </member>
         <member name="E:Microsoft.FluentUI.AspNetCore.Components.IDialogService.OnShow">
             <summary>
-            A event that will be invoked when showing a dialog with a custom component
+            An event that will be invoked when showing a dialog with a custom component
             </summary>
         </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentDivider.Role">
@@ -6180,6 +6180,12 @@
             Default is 8.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSplitter.BarHandle">
+            <summary>
+            Gets or sets a value indicating whether the splitter bar handle is visible.
+            Default is true.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentSplitter.Collapsed">
             <summary>
             Gets or sets a value indicating whether the splitter is collapsed.
@@ -6439,6 +6445,13 @@
         <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentTabs.DisplayMoreTabAsync(Microsoft.FluentUI.AspNetCore.Components.FluentTab)">
             <summary />
         </member>
+        <member name="M:Microsoft.FluentUI.AspNetCore.Components.FluentTabs.GoToTab(System.String)">
+            <summary>
+            Go to a specific tab by specifying an id
+            </summary>
+            <param name="TabId">Id of the tab to goto</param>
+            <returns></returns>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentTextArea.Resize">
             <summary>
             Gets or sets a value indicating whether the text area is resizeable. See <see cref="T:Microsoft.FluentUI.AspNetCore.Components.TextAreaResize"/>
@@ -11220,11 +11233,6 @@
             The official product colors for Microsoft Office apps.
             </summary>
         </member>
-        <member name="F:Microsoft.FluentUI.AspNetCore.Components.OfficeColor.Random">
-            <summary>
-            A random color from the OfficeColor enum
-            </summary>
-        </member>
         <member name="F:Microsoft.FluentUI.AspNetCore.Components.OfficeColor.Default">
             <summary>
             The default Fluent UI accent color

diff --git a/examples/Demo/Shared/Pages/Design/Examples/DesignThemeDefault.razor b/examples/Demo/Shared/Pages/Design/Examples/DesignThemeDefault.razor
@@ -1,6 +1,5 @@
 <FluentDesignTheme @bind-Mode="@Mode"
-                   OfficeColor="@OfficeColor"
-                   OfficeColorChanged="@(e => { OnOfficeColorChanged(e); })"
+                   @bind-OfficeColor="@OfficeColor"
                    OnLoaded="@OnLoaded"
                    OnLuminanceChanged="@OnLuminanceChanged"
                    StorageName="theme" />
@@ -9,14 +8,16 @@
     <FluentGrid>
         <FluentGridItem>
             <FluentSelect Label="Theme"
+                          Width="250px"
                           Items="@(Enum.GetValues<DesignThemeModes>())"
                           @bind-SelectedOption="@Mode" />
         </FluentGridItem>
 
         <FluentGridItem>
             <FluentSelect Label="Color"
-                          Items="@(Enum.GetValues<OfficeColor>())"
+                          Items="@(Enum.GetValues<OfficeColor>().Select(i => (OfficeColor?)i))"
                           Height="200px"
+                          Width="250px"
                           @bind-SelectedOption="@OfficeColor">
                 <OptionTemplate>  
                     <FluentStack>
@@ -27,6 +28,7 @@
                     </FluentStack>
                 </OptionTemplate> 
             </FluentSelect>
+            <FluentButton Appearance="Appearance.Accent" OnClick="PickRandomColor">Feeling lucky?</FluentButton>
         </FluentGridItem>
     </FluentGrid>
 
@@ -44,7 +46,7 @@
 
 
 
-    public OfficeColor OfficeColor { get; set; }
+    public OfficeColor? OfficeColor { get; set; }
 
     void OnLoaded(LoadedEventArgs e)
     {
@@ -56,26 +58,8 @@
         DemoLogger.WriteLine($"Changed: {(e.Mode == DesignThemeModes.System ? "System" : "")} {(e.IsDark ? "Dark" : "Light")}");
     }
 
-    void OnOfficeColorChanged(OfficeColor? e)
+    void PickRandomColor()
     {
-        switch (e)
-        {
-            case null:
-                OfficeColor = OfficeColor.Default;
-                break;
-            case OfficeColor.Random:
-                {
-                    Array values = Enum.GetValues<OfficeColor>().Skip(2).ToArray();
-                    Random random = new Random();
-                    OfficeColor randomValue = (OfficeColor)values.GetValue(random.Next(values.Length))!;
-
-                    OfficeColor = randomValue;
-                    break;
-                }
-
-            default:
-                OfficeColor = e.Value;
-                break;
-        }
+        OfficeColor = OfficeColorUtilities.GetRandom();
     }
 }
diff --git a/examples/Demo/Shared/Pages/Splitter/Examples/SplitterBarHandle.razor b/examples/Demo/Shared/Pages/Splitter/Examples/SplitterBarHandle.razor
@@ -0,0 +1,41 @@
+<FluentSwitch CheckedMessage="Bar handle shown" UncheckedMessage="Bar handle hidden" @bind-Value="_barhandle" />
+<br />
+<br />
+
+<FluentSplitter OnResized=OnResizedHandler BarSize="6" BarHandle="_barhandle" Panel1MinSize="15%" Panel2MinSize="50px">
+    <Panel1>
+        <div class="demopanel">
+            <p>
+                Panel 1 -  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+                Eget dolor morbi non arcu risus quis varius. Turpis tincidunt id aliquet risus feugiat in ante. Eros donec ac odio tempor orci 
+                dapibus ultrices in iaculis. Sit amet justo donec enim diam vulputate ut. Morbi blandit cursus risus at ultrices mi tempus. Sed 
+                ullamcorper morbi tincidunt ornare massa eget egestas. Mi eget mauris pharetra et ultrices neque. Sit amet porttitor eget dolor 
+                morbi non arcu risus quis. Tempus egestas sed sed risus pretium quam vulputate dignissim. Diam vel quam elementum pulvinar. Enim 
+                nulla aliquet porttitor lacus luctus accumsan. Convallis tellus id interdum velit laoreet id donec ultrices. Dui faucibus in ornare 
+                quam viverra orci sagittis.
+            </p>
+        </div>
+    </Panel1>
+    <Panel2>
+        <div class="demopanel">
+            <p>
+                Panel 2 - Neque laoreet suspendisse interdum consectetur libero id faucibus nisl tincidunt. Suspendisse faucibus interdum posuere lorem ipsum 
+                dolor sit amet. Imperdiet sed euismod nisi porta lorem mollis aliquam. Malesuada proin libero nunc consequat interdum. Amet nisl purus
+                in mollis nunc sed id semper risus. Nunc sed augue lacus viverra vitae congue eu. Fermentum dui faucibus in ornare quam viverra. Ut eu 
+                sem integer vitae. Interdum velit laoreet id donec ultrices tincidunt arcu non. Pellentesque dignissim enim sit amet. Scelerisque purus
+                semper eget duis at.
+            </p>
+        </div>
+    </Panel2>
+</FluentSplitter>
+
+
+@code
+{
+    bool _barhandle = false;
+
+    private void OnResizedHandler(SplitterResizedEventArgs args)
+    {
+       DemoLogger.WriteLine($"Size changed: {args.Panel1Size}, {args.Panel2Size}");
+    }
+}
diff --git a/examples/Demo/Shared/Pages/Splitter/SplitterPage.razor b/examples/Demo/Shared/Pages/Splitter/SplitterPage.razor
@@ -19,8 +19,8 @@
             See the 'Razor' tab for the code
         </p>
     </Description>
-</DemoSection>
-    
+</DemoSection> 
+
 <DemoSection Component="typeof(SplitterNested)" Title="Nested splitters">
     <Description>
         <p>
@@ -41,6 +41,14 @@
     </Description>
 </DemoSection>
 
+<DemoSection Component="typeof(SplitterBarHandle)" Title="Hide the bar handle">
+    <Description>
+        <p>
+            You can hide the bar handle by setting <code>ShowBarHandle</code> to false.
+        </p>
+    </Description>
+</DemoSection>
+
 <h2 id="documentation">Documentation</h2>
 
 <ApiDocumentation Component="typeof(FluentSplitter)" />

diff --git a/src/Core.Assets/src/SplitPanels.ts b/src/Core.Assets/src/SplitPanels.ts
@@ -11,15 +11,15 @@ styleSheet.replaceSync(`
     :host([direction=row]) { grid-template-columns: var(--first-size, 1fr) max-content var(--second-size, 1fr); }
     :host([direction=row]) #median { grid-column: 2 / 3; }
     :host([direction=row]) #median:hover { cursor: col-resize; }
-    :host([direction=row]) #median span[part="handle"] { height: 16px; margin: 2px 0;}
+    :host([direction=row]) #median span[part="handle"] { height: 16px; margin: 2px 0; }
     :host([direction=row]) #slot1 { grid-column: 1 / 2; grid-row: 1 / 1; }
     :host([direction=row]) #slot2 { grid-column: 3 / 4; grid-row: 1 / 1; }
 
     :host([resizing][direction=col]){ cursor: row-resize; }
     :host([direction=column]) { grid-template-rows: var(--first-size, 1fr) max-content var(--second-size, 1fr); }
     :host([direction=column]) #median { grid-row: 2 / 3; }
     :host([direction=column]) #median:hover { cursor: row-resize; }
-    :host([direction=column]) #median span[part="handle"] { width: 16px; margin: 0 2px;}
+    :host([direction=column]) #median span[part="handle"] { width: 16px; margin: 0 2px; }
     :host([direction=column]) #slot1 { grid-row: 1 / 2; grid-column: 1 / 1; }
     :host([direction=column]) #slot2 { grid-row: 3 / 4; grid-column: 1 / 1; }
 
@@ -35,6 +35,8 @@ styleSheet.replaceSync(`
     :host([collapsed]) { grid-template-columns: 1fr !important; grid-template-rows: none !important; }
     :host([collapsed]) #median { display: none; }
     :host([collapsed]) #slot2 { display: none; }
+
+    :host([no-barhandle]) #median span[part="handle"] { display: none; }
 `);
 
 const template = `
@@ -46,11 +48,12 @@ const template = `
 `;
 
 class SplitPanels extends HTMLElement {
-  static observedAttributes = ["direction", "collapsed", "barsize", "slot1minsize", "slot2minsize"];
+  static observedAttributes = ["direction", "collapsed", "barsize", "no-barhandle", "slot1minsize", "slot2minsize"];
   #direction = "row";
   #isResizing = false;
   #collapsed = false;
   #barsize: number = 8;
+  #barhandle = true;
   #slot1size: number = 0;
   #slot2size: number = 0;
   #slot1minsize: number = 0;
@@ -177,6 +180,9 @@ class SplitPanels extends HTMLElement {
     if (newValue != oldValue) {
       (this as any as DOMStringMap)[name] = newValue;
     }
+    console.log(
+      `Attribute ${name} has changed from ${oldValue} to ${newValue}.`,
+    );
   }
   ensurevalue(value: string | number | any) {
     if (!value)
@@ -255,6 +261,23 @@ class SplitPanels extends HTMLElement {
   get barsize() {
     return this.#barsize;
   }
+
+  set barhandle(value) {
+    const realValue = value !== null && value !== undefined && value !== false;
+    if (this.#barhandle !== realValue) {
+      this.#barhandle = realValue;
+      if (this.#barhandle) {
+        this.removeAttribute("no-barhandle");
+      } else {
+        this.setAttribute("no-barhandle", "");
+
+      }
+    }
+  }
+  get barhandle() {
+    return this.#barhandle;
+  }
+
 }
 
 export { SplitPanels };
diff --git a/src/Core/Components/Button/FluentButton.razor.js b/src/Core/Components/Button/FluentButton.razor.js
@@ -5,7 +5,12 @@ export function updateProxy(id) {
     }
     const element = document.getElementById(id);
 
-    if (!!element && !!element.form) {
-        element.proxy.setAttribute("form", element.form.id)
+    if (element && element.form) {
+        if (element.form.id !== '') {
+            element.proxy.setAttribute("form", element.form.id)
+        }
+        else {
+            console.warn("When the submit button is placed outside of the EditForm, make sure to supply an id attribute to the EditForm.");
+        }
     }
 }
diff --git a/src/Core/Components/DesignSystemProvider/FluentDesignTheme.razor.cs b/src/Core/Components/DesignSystemProvider/FluentDesignTheme.razor.cs
@@ -267,11 +267,8 @@ private class DataLocalStorage
         {
             return Enum.GetName(OfficeColor.Value);
         }
-
-        Array? values = Enum.GetValues(typeof(OfficeColor));
-        OfficeColor randomValue = (OfficeColor)values.GetValue(new Random().Next(values.Length))!;
 
-        return Enum.GetName(randomValue);
+        return OfficeColorUtilities.GetRandom().ToAttributeValue();
     }
 
     private string? GetMode()