Process review comments

.gitignore

@@ -50,3 +50,4 @@ UpgradeLog.htm
 /artifacts
 /src/Microsoft.Fast.Components.FluentUI.Tests/coverage.net8.0.cobertura.xml
 /Directory.Build.targets
+/global.json

examples/FluentUI.Demo.Shared/Pages/InputFile/InputFilePage.razor

@@ -5,7 +5,7 @@
 
 <h1>InputFile</h1>
 
-<p>ToDo</p>
+<p>The <code>FluentInputFile</code> wraps the native Blazor <code>InputFile</code> component and extends it with drag/drop zone support. See the examples below for some different ways on how to use this component.</p>
 
 <ApiDocumentation Component="typeof(FluentInputFile)" />
 

src/Microsoft.Fast.Components.FluentUI/Components/InputFile/FluentInputFile.razor

@@ -4,14 +4,14 @@
 
 <div class="@ClassValue"
      style="@StyleValue"
-     drop-files=@DropOver
-@ondragenter="@(e => DropOver = true)"
-@ondragenter:stopPropagation
-@ondragover="@(e => DropOver = true)"
-@ondragover:stopPropagation
-@ondragleave="@(e => DropOver = false)"
-@ondragleave:stopPropagation
-@ondragend="@(e => DropOver = false)">
+     drop-files="@DropOver"
+     @ondragenter="@(e => DropOver = true)"
+     @ondragenter:stopPropagation
+     @ondragover="@(e => DropOver = true)"
+     @ondragover:stopPropagation
+     @ondragleave="@(e => DropOver = false)"
+     @ondragleave:stopPropagation
+     @ondragend="@(e => DropOver = false)">
 
     <div class="inputfile-content" style="z-index: @(DropOver ? null : 999)">
 
@@ -26,11 +26,10 @@
         </div>
     </div>
 
-    <div style="grid-column: 1; grid-row: 1; z-index: @(DropOver ? 999 : null)">
+    <div style="grid-column: 1; grid-row: 1; z-index: @(DropOver ? ZIndex.InputFileDropZone : null)">
         <InputFile OnChange="OnUploadFilesHandlerAsync"
-                       id="@Id"
-                       class="power-input-uploader"
-                       multiple=@Multiple
-                       accept="@Accept" />
+                   id="@Id"
+                   multiple=@Multiple
+                   accept="@Accept" />
     </div>
 </div>

src/Microsoft.Fast.Components.FluentUI/Components/InputFile/FluentInputFile.razor.cs

@@ -64,15 +64,16 @@ public partial class FluentInputFile : FluentComponentBase
     /// <summary>
     /// Filter for what file types the user can pick from the file input dialog box.
     /// Example: ".gif, .jpg, .png, .doc", "audio/*", "video/*", "image/*"
-    /// See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept.
+    /// See <see href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept</see>
+    /// for more information.
     /// </summary>
     [Parameter]
     public string Accept { get; set; } = string.Empty;
 
     /// <summary>
     /// Type of file reading.
-    /// For SaveToTemporaryFolder, use PowerInputFileEventArgs.LocalFile to retrieve the file.
-    /// For Buffer, use PowerInputFileEventArgs.Buffer to retrieve bytes.
+    /// For SaveToTemporaryFolder, use <see cref="FluentInputFileEventArgs.LocalFile" /> to retrieve the file.
+    /// For Buffer, use <see cref="FluentInputFileEventArgs.Buffer" /> to retrieve bytes.
     /// </summary>
     [Parameter]
     public InputFileMode Mode { get; set; } = InputFileMode.SaveToTemporaryFolder;
@@ -172,7 +173,7 @@ protected async Task OnUploadFilesHandlerAsync(InputFileChangeEventArgs e)
 
         List<FluentInputFileEventArgs>? uploadedFiles = new();
         IReadOnlyList<IBrowserFile>? allFiles = e.GetMultipleFiles(MaximumFileCount);
-        (string Name, long Size, string ContentType)[]? allFilesSummary = allFiles.Select(i => (i.Name, i.Size, i.ContentType)).ToArray();
+        List<UploadedFileDetails>? allFilesSummary = allFiles.Select(i => (new UploadedFileDetails(i.Name, i.Size, i.ContentType))).ToList();
         long totalFileSizes = allFiles.Sum(i => i.Size);
         long totalRead = 0L;
         int fileNumber = 0;
@@ -182,7 +183,7 @@ protected async Task OnUploadFilesHandlerAsync(InputFileChangeEventArgs e)
         foreach (IBrowserFile file in allFiles)
         {
             // Keep a trace of this file
-            FluentInputFileEventArgs? fileDetails = new FluentInputFileEventArgs()
+            FluentInputFileEventArgs? fileDetails = new()
             {
                 AllFiles = allFilesSummary,
                 Index = fileNumber,
@@ -235,7 +236,7 @@ await ReadFileToBufferAndRaiseProgressEventAsync(file, fileDetails, async (buffe
                         {
                             totalRead += bytesRead;
 
-                            await writeStream.WriteAsync(buffer, 0, bytesRead);
+                            await writeStream.WriteAsync(buffer.AsMemory(0, bytesRead));
 
                             ProgressPercent = Convert.ToInt32(decimal.Divide(totalRead, totalFileSizes) * 100);
                         });

src/Microsoft.Fast.Components.FluentUI/Components/InputFile/FluentInputFileBuffer.cs

@@ -27,10 +27,8 @@ public FluentInputFileBuffer(byte[] data, int bytesRead)
     /// <returns></returns>
     public async Task AppendToFileAsync(string file)
     {
-        using (var stream = new FileStream(file, FileMode.Append))
-        {
-            await stream.WriteAsync(Data, 0, BytesRead);
-        }
+        using var stream = new FileStream(file, FileMode.Append);
+        await stream.WriteAsync(Data.AsMemory(0, BytesRead));
     }
 
     /// <summary>

src/Microsoft.Fast.Components.FluentUI/Components/InputFile/FluentInputFileEventArgs.cs

@@ -60,10 +60,10 @@ public class FluentInputFileEventArgs : EventArgs
     /// <summary>
     /// Gets a list of all files currently in an upload process.
     /// </summary>
-    public IEnumerable<(string Name, long Size, string ContentType)> AllFiles { get; internal set; } = default!;
+    public IEnumerable<UploadedFileDetails> AllFiles { get; internal set; } = default!;
 
     /// <summary>
     /// Set this property to True to cancel the current upload file.
     /// </summary>
     public bool IsCancelled { get; set; } = false;
-}
+}

src/Microsoft.Fast.Components.FluentUI/Components/InputFile/UploadedFileDetails.cs

@@ -0,0 +1,3 @@
+namespace Microsoft.Fast.Components.FluentUI;
+
+public record struct UploadedFileDetails(string Name, long Size, string ContentType);

src/Microsoft.Fast.Components.FluentUI/Components/Progress/FluentProgress.razor

@@ -1,12 +1,15 @@
 @namespace Microsoft.Fast.Components.FluentUI
 @inherits FluentComponentBase
-<fluent-progress @ref=Element
-                 class="@ClassValue"
-                 style="@StyleValue"
-                 min="@Min"
-                 max="@Max"
-                 value="@Value"
-                 Paused="@Paused"
-                 @attributes="AdditionalAttributes">
-    @ChildContent
-</fluent-progress>
+@if (Visible)
+{
+    <fluent-progress @ref=Element
+                     class="@ClassValue"
+                     style="@StyleValue"
+                     min="@Min"
+                     max="@Max"
+                     value="@Value"
+                     Paused="@Paused"
+                     @attributes="AdditionalAttributes">
+        @ChildContent
+    </fluent-progress>
+}

src/Microsoft.Fast.Components.FluentUI/Components/Progress/FluentProgress.razor.cs

@@ -10,7 +10,6 @@ public partial class FluentProgress : FluentComponentBase
 
     protected string? StyleValue => new StyleBuilder()
         .AddStyle(Style)
-        .AddStyle("visibility", "hidden", () => Visible == false)
         .Build();
 
     /// <summary>

src/Microsoft.Fast.Components.FluentUI/Components/Progress/FluentProgressRing.razor

@@ -1,12 +1,15 @@
 @namespace Microsoft.Fast.Components.FluentUI
 @inherits FluentComponentBase
-<fluent-progress-ring @ref=Element
-                      class="@ClassValue"
-                      style="@StyleValue"
-                      min="@Min"
-                      max="@Max"
-                      value="@Value"
-                      Paused="@Paused"
-                      @attributes="AdditionalAttributes">
-    @ChildContent
-</fluent-progress-ring>
+@if (Visible)
+{
+    <fluent-progress-ring @ref=Element
+                          class="@ClassValue"
+                          style="@StyleValue"
+                          min="@Min"
+                          max="@Max"
+                          value="@Value"
+                          Paused="@Paused"
+                          @attributes="AdditionalAttributes">
+        @ChildContent
+    </fluent-progress-ring>
+}

src/Microsoft.Fast.Components.FluentUI/Components/Progress/FluentProgressRing.razor.cs

@@ -10,7 +10,6 @@ public partial class FluentProgressRing : FluentComponentBase
 
     protected string? StyleValue => new StyleBuilder()
         .AddStyle(Style)
-        .AddStyle("visibility", "hidden", () => Visible == false)
         .Build();
 
     /// <summary>

src/Microsoft.Fast.Components.FluentUI/DesignTokens/Z-Index.cs

@@ -5,4 +5,6 @@ public static class ZIndex
     public static int DatePickerPopup { get; set; } = 9995;
 
     public static int Overlay { get; set; } = 9900;
+
+    public static int InputFileDropZone { get; set; } = 990;
 }

src/Microsoft.Fast.Components.FluentUI/Enums/InputFileMode.cs

@@ -5,12 +5,20 @@
 /// </summary>
 public enum InputFileMode
 {
-    /// <summary />
+    /// <summary>
+    /// Uploaded files are saved to a temporary folder.
+    /// </summary>
     SaveToTemporaryFolder,
 
-    /// <summary />
+    /// <summary >
+    /// Files are read into a buffer. 
+    /// Use <see cref="FluentInputFileEventArgs.Buffer"/> to retrieve bytes.
+    /// </summary>
     Buffer,
 
-    /// <summary />
+    /// <summary >
+    /// In Blazor Server, file data is streamed over the SignalR connection into .NET code on the server as the file is read.
+    /// In Blazor WebAssembly, file data is streamed directly into the .NET code within the browser.
+    /// </summary>
     Stream,
 }

src/Microsoft.Fast.Components.FluentUI/Microsoft.Fast.Components.FluentUI.csproj

@@ -45,7 +45,6 @@
 	<ItemGroup>
 		<None Include="..\..\README.md" Pack="true" PackagePath="\" />
         <None Include="..\..\icon.png" Pack="true" PackagePath="\" />
-		<None Include="Components\Label\FluentLabel.razor" />
 	</ItemGroup>
 
 	<ItemGroup>
@@ -117,10 +116,4 @@
 	  <LastGenOutput>%(ParentFile).Designer.cs</LastGenOutput>
 	</EmbeddedResource>
   </ItemGroup>
-  <ItemGroup>
-    <Compile Update="Resources\FluentInputFileResource.Designer.cs">
-      <DependentUpon>FluentInputFileResource.resx</DependentUpon>
-    </Compile>
-  </ItemGroup>
-
 </Project>