diff --git a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml index 85d0e94d3c..55c02bc877 100644 --- a/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml +++ b/examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml @@ -5674,6 +5674,16 @@ Gets or sets the current value. + + + Gets or sets the visibility of the component + + + + + Gets or sets the component width. + + Gets or sets a value indicating whether the progress element is paused. @@ -5684,6 +5694,21 @@ Gets or sets the content to be rendered inside the component. + + + Gets or sets the stroke width of the progress bar. If not set, the default theme stroke width is used. + + + + + Gets or sets the color to be used for the progress bar. If not set, the default theme color is used. + + + + + Gets or sets the color to be used for the background. If not set, the default theme color is used. + + Gets or sets the minimum value @@ -5709,6 +5734,21 @@ Gets or sets the content to be rendered inside the component. + + + Gets or sets the component width and height. + + + + + Gets or sets the stroke width of the progress ring. If not set, the default theme stroke width is used. + + + + + Gets or sets the color to be used for the progress ring. If not set, the default theme color is used. + + Gets context for this . diff --git a/examples/Demo/Shared/Pages/Progress/Examples/ProgressStroke.razor b/examples/Demo/Shared/Pages/Progress/Examples/ProgressStroke.razor new file mode 100644 index 0000000000..57468f9e7c --- /dev/null +++ b/examples/Demo/Shared/Pages/Progress/Examples/ProgressStroke.razor @@ -0,0 +1,23 @@ +

Stroke and Color

+ + + + + + + + @Percentage + + + + +@code +{ + ProgressStrokes Stroke = ProgressStrokes.Normal; + int Percentage = 30; + bool Indeterminate = false; + OfficeColor Color = OfficeColor.Default; +} \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/Progress/ProgressPage.razor b/examples/Demo/Shared/Pages/Progress/ProgressPage.razor index 8df1f73744..7a78802354 100644 --- a/examples/Demo/Shared/Pages/Progress/ProgressPage.razor +++ b/examples/Demo/Shared/Pages/Progress/ProgressPage.razor @@ -25,6 +25,8 @@ + +

Documentation

diff --git a/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingCustomSizes.razor b/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingCustomSizes.razor index cfe5b1ce46..93cec6fc24 100644 --- a/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingCustomSizes.razor +++ b/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingCustomSizes.razor @@ -1,15 +1,15 @@ 

Custom Sizes

-
+ -
-
+ + -
\ No newline at end of file + \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingPaused.razor b/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingPaused.razor index 0c5f00e7cc..5301f47fa0 100644 --- a/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingPaused.razor +++ b/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingPaused.razor @@ -1,5 +1,5 @@ 

Paused

-
+ -
\ No newline at end of file + \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingStroke.razor b/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingStroke.razor new file mode 100644 index 0000000000..abdd8211f4 --- /dev/null +++ b/examples/Demo/Shared/Pages/ProgressRing/Examples/ProgressRingStroke.razor @@ -0,0 +1,33 @@ +

Stroke and Color

+ + + + + + + + @Percentage + + + + + + + + +@code +{ + ProgressStrokes Stroke = ProgressStrokes.Normal; + int Percentage = 30; + bool Indeterminate = false; + OfficeColor Color = OfficeColor.Default; +} \ No newline at end of file diff --git a/examples/Demo/Shared/Pages/ProgressRing/ProgressRingPage.razor b/examples/Demo/Shared/Pages/ProgressRing/ProgressRingPage.razor index 90aeecf20f..89a061ee85 100644 --- a/examples/Demo/Shared/Pages/ProgressRing/ProgressRingPage.razor +++ b/examples/Demo/Shared/Pages/ProgressRing/ProgressRingPage.razor @@ -24,6 +24,8 @@ + + diff --git a/src/Core/Components/Progress/FluentProgress.razor b/src/Core/Components/Progress/FluentProgress.razor index 54471939ec..0ce08b9c6c 100644 --- a/src/Core/Components/Progress/FluentProgress.razor +++ b/src/Core/Components/Progress/FluentProgress.razor @@ -2,7 +2,25 @@ @inherits FluentComponentBase @if (Visible) { - + @if (Value == null) + { + @($" #{Id}::part(progress) {{ {StyleIndeterminate} }}") + @($" #{Id}::part(indeterminate-indicator-1) {{ {StyleIndeterminateIndicator} }}") + @($" #{Id}::part(indeterminate-indicator-2) {{ {StyleIndeterminateIndicator} }}") + } + else + { + @($" #{Id}::part(progress) {{ {StyleProgress} }}") + @($" #{Id}::part(determinate) {{ {StyleProgressIndicator} }}") + } + + } + + new StyleBuilder(Style) + .AddStyle("width", Width, () => !string.IsNullOrEmpty(Width)) .Build(); + public FluentProgress() + { + Id = Identifier.NewId(); + } + /// /// Gets or sets the minimum value /// @@ -29,13 +35,20 @@ public partial class FluentProgress : FluentComponentBase [Parameter] public int? Value { get; set; } - - + /// + /// Gets or sets the visibility of the component + /// [Parameter] public bool Visible { get; set; } = true; /// - /// Gets or sets if the progress element is paused + /// Gets or sets the component width. + /// + [Parameter] + public string? Width { get; set; } + + /// + /// Gets or sets a value indicating whether the progress element is paused. /// [Parameter] public bool? Paused { get; set; } @@ -45,4 +58,41 @@ public partial class FluentProgress : FluentComponentBase /// [Parameter] public RenderFragment? ChildContent { get; set; } + + /// + /// Gets or sets the stroke width of the progress bar. If not set, the default theme stroke width is used. + /// + [Parameter] + public ProgressStrokes Stroke { get; set; } = ProgressStrokes.Normal; + + /// + /// Gets or sets the color to be used for the progress bar. If not set, the default theme color is used. + /// + [Parameter] + public string? Color { get; set; } + + /// + /// Gets or sets the color to be used for the background. If not set, the default theme color is used. + /// + [Parameter] + public string? BackgroundColor { get; set; } + + private (int BarHeight, int BackgroundHeight, string DefaultBackgroundColor) StrokeDetails => Stroke switch + { + ProgressStrokes.Thin => (2, 1, "--neutral-stroke-strong-rest"), + ProgressStrokes.Normal => (3, 1, "--neutral-stroke-strong-rest"), + ProgressStrokes.Large => (9, 6, "--neutral-stroke-rest"), + _ => throw new NotImplementedException(), + }; + private string StyleProgress => $"height: calc((var(--stroke-width) * {StrokeDetails.BackgroundHeight}) * 1px); " + + $"background-color: {(string.IsNullOrEmpty(BackgroundColor) ? $"var({StrokeDetails.DefaultBackgroundColor})" : BackgroundColor)};"; + + private string StyleProgressIndicator => $"height: calc((var(--stroke-width) * {StrokeDetails.BarHeight}) * 1px); " + + $"background-color: {(string.IsNullOrEmpty(Color) ? "var(--accent-fill-rest)" : Color)};"; + + private string StyleIndeterminate => $"--stroke-width: {((double)StrokeDetails.BarHeight / 3d).ToString("0.00")}; " + + $"height: calc((1 * {StrokeDetails.BackgroundHeight}) * 1px); " + + $"background-color: {(string.IsNullOrEmpty(BackgroundColor) ? $"var({StrokeDetails.DefaultBackgroundColor})" : BackgroundColor)};"; + + private string StyleIndeterminateIndicator => $"background-color: {(string.IsNullOrEmpty(Color) ? "var(--accent-fill-rest)" : Color)};"; } \ No newline at end of file diff --git a/src/Core/Components/Progress/FluentProgressRing.razor b/src/Core/Components/Progress/FluentProgressRing.razor index 1f06b16320..8994e79c10 100644 --- a/src/Core/Components/Progress/FluentProgressRing.razor +++ b/src/Core/Components/Progress/FluentProgressRing.razor @@ -2,13 +2,22 @@ @inherits FluentComponentBase @if (Visible) { - + @($"#{Id}::part(background) {{ {StyleBackground} }}") + @($"#{Id}::part({(Value == null ? "indeterminate-indicator-1" : "determinate")}) {{ {StyleIndicator} }}") + + } + + @ChildContent diff --git a/src/Core/Components/Progress/FluentProgressRing.razor.cs b/src/Core/Components/Progress/FluentProgressRing.razor.cs index e86d10206b..22d6fff23e 100644 --- a/src/Core/Components/Progress/FluentProgressRing.razor.cs +++ b/src/Core/Components/Progress/FluentProgressRing.razor.cs @@ -9,8 +9,15 @@ public partial class FluentProgressRing : FluentComponentBase .Build(); protected string? StyleValue => new StyleBuilder(Style) + .AddStyle("width", Width, () => !string.IsNullOrEmpty(Width)) + .AddStyle("height", Width, () => !string.IsNullOrEmpty(Width)) .Build(); + public FluentProgressRing() + { + Id = Identifier.NewId(); + } + /// /// Gets or sets the minimum value /// @@ -44,4 +51,38 @@ public partial class FluentProgressRing : FluentComponentBase /// [Parameter] public RenderFragment? ChildContent { get; set; } + + /// + /// Gets or sets the component width and height. + /// + [Parameter] + public string? Width { get; set; } + + /// + /// Gets or sets the stroke width of the progress ring. If not set, the default theme stroke width is used. + /// + [Parameter] + public ProgressStrokes Stroke { get; set; } = ProgressStrokes.Normal; + + /// + /// Gets or sets the color to be used for the progress ring. If not set, the default theme color is used. + /// + [Parameter] + public string? Color { get; set; } + + private (int Width, int Radius, int Dashoffset) StrokeDetails => Stroke switch + { + ProgressStrokes.Thin => (1, 7, 0), + ProgressStrokes.Normal => (2, 7, 0), + ProgressStrokes.Large => (4, 6, (int)(0.066 * (Value ?? 0) + 0.22)), + _ => throw new NotImplementedException(), + }; + + private string StyleBackground => $"stroke-width: {StrokeDetails.Width}px; " + + $"r: {StrokeDetails.Radius}px;"; + + private string StyleIndicator => $"stroke-width: {StrokeDetails.Width}px; " + + $"r: {StrokeDetails.Radius}px; " + + $"stroke-dashoffset: {StrokeDetails.Dashoffset}px; " + + $"stroke: {(string.IsNullOrEmpty(Color) ? "var(--accent-fill-rest)" : Color )};"; } \ No newline at end of file diff --git a/src/Core/Enums/ProgressStrokes.cs b/src/Core/Enums/ProgressStrokes.cs new file mode 100644 index 0000000000..c9121388ea --- /dev/null +++ b/src/Core/Enums/ProgressStrokes.cs @@ -0,0 +1,8 @@ +namespace Microsoft.FluentUI.AspNetCore.Components; + +public enum ProgressStrokes +{ + Normal, + Thin, + Large, +} diff --git a/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Colors.verified.razor.html b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Colors.verified.razor.html new file mode 100644 index 0000000000..06efe9d9d6 --- /dev/null +++ b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Colors.verified.razor.html @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Content.verified.razor.html b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Content.verified.razor.html new file mode 100644 index 0000000000..6b21f45740 --- /dev/null +++ b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Content.verified.razor.html @@ -0,0 +1,2 @@ + +My content \ No newline at end of file diff --git a/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Default.verified.razor.html b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Default.verified.razor.html new file mode 100644 index 0000000000..305ffdd599 --- /dev/null +++ b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Default.verified.razor.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Paused.verified.razor.html b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Paused.verified.razor.html new file mode 100644 index 0000000000..57afc2917a --- /dev/null +++ b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Paused.verified.razor.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Stroke.verified.razor.html b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Stroke.verified.razor.html new file mode 100644 index 0000000000..495a3e38bb --- /dev/null +++ b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Stroke.verified.razor.html @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Stroke_Indeterminate.verified.razor.html b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Stroke_Indeterminate.verified.razor.html new file mode 100644 index 0000000000..51e4bb39db --- /dev/null +++ b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Stroke_Indeterminate.verified.razor.html @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Width.verified.razor.html b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Width.verified.razor.html new file mode 100644 index 0000000000..ea0c1214b8 --- /dev/null +++ b/tests/Core/Progress/FluentProgressRingTests.FluentProgressRing_Width.verified.razor.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/tests/Core/Progress/FluentProgressRingTests.razor b/tests/Core/Progress/FluentProgressRingTests.razor new file mode 100644 index 0000000000..7f639ce78b --- /dev/null +++ b/tests/Core/Progress/FluentProgressRingTests.razor @@ -0,0 +1,86 @@ +@using Xunit; +@inherits TestContext +@code +{ + [Fact] + public void FluentProgressRing_Default() + { + // Arrange && Act + var cut = Render(@); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentProgressRing_Width() + { + // Arrange && Act + var cut = Render(@); + + // Assert + cut.Verify(); + + } + + [Fact] + public void FluentProgressRing_Content() + { + // Arrange && Act + var cut = Render(@My content); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentProgressRing_Visible() + { + // Arrange && Act + var cut = Render(@); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentProgressRing_Paused() + { + // Arrange && Act + var cut = Render(@); + + // Assert + cut.Verify(); + } + + + [Fact] + public void FluentProgressRing_Stroke() + { + // Arrange && Act + var cut = Render(@); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentProgressRing_Stroke_Indeterminate() + { + // Arrange && Act + var cut = Render(@); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentProgressRing_Colors() + { + // Arrange && Act + var cut = Render(@); + + // Assert + cut.Verify(); + } +} \ No newline at end of file diff --git a/tests/Core/Progress/FluentProgressTests.FluentProgress_Colors.verified.razor.html b/tests/Core/Progress/FluentProgressTests.FluentProgress_Colors.verified.razor.html new file mode 100644 index 0000000000..fa8d05bd4f --- /dev/null +++ b/tests/Core/Progress/FluentProgressTests.FluentProgress_Colors.verified.razor.html @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/tests/Core/Progress/FluentProgressTests.FluentProgress_Content.verified.razor.html b/tests/Core/Progress/FluentProgressTests.FluentProgress_Content.verified.razor.html new file mode 100644 index 0000000000..483721bfe1 --- /dev/null +++ b/tests/Core/Progress/FluentProgressTests.FluentProgress_Content.verified.razor.html @@ -0,0 +1,2 @@ + +My content \ No newline at end of file diff --git a/tests/Core/Progress/FluentProgressTests.FluentProgress_Default.verified.razor.html b/tests/Core/Progress/FluentProgressTests.FluentProgress_Default.verified.razor.html new file mode 100644 index 0000000000..674bf698cc --- /dev/null +++ b/tests/Core/Progress/FluentProgressTests.FluentProgress_Default.verified.razor.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/tests/Core/Progress/FluentProgressTests.FluentProgress_Paused.verified.razor.html b/tests/Core/Progress/FluentProgressTests.FluentProgress_Paused.verified.razor.html new file mode 100644 index 0000000000..745b7a2aa8 --- /dev/null +++ b/tests/Core/Progress/FluentProgressTests.FluentProgress_Paused.verified.razor.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/tests/Core/Progress/FluentProgressTests.FluentProgress_Stroke.verified.razor.html b/tests/Core/Progress/FluentProgressTests.FluentProgress_Stroke.verified.razor.html new file mode 100644 index 0000000000..fa6d1ec6a0 --- /dev/null +++ b/tests/Core/Progress/FluentProgressTests.FluentProgress_Stroke.verified.razor.html @@ -0,0 +1,6 @@ + + + \ No newline at end of file diff --git a/tests/Core/Progress/FluentProgressTests.FluentProgress_Stroke_Indeterminate.verified.razor.html b/tests/Core/Progress/FluentProgressTests.FluentProgress_Stroke_Indeterminate.verified.razor.html new file mode 100644 index 0000000000..edb99284d8 --- /dev/null +++ b/tests/Core/Progress/FluentProgressTests.FluentProgress_Stroke_Indeterminate.verified.razor.html @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/tests/Core/Progress/FluentProgressTests.FluentProgress_Width.verified.razor.html b/tests/Core/Progress/FluentProgressTests.FluentProgress_Width.verified.razor.html new file mode 100644 index 0000000000..ca5a59c305 --- /dev/null +++ b/tests/Core/Progress/FluentProgressTests.FluentProgress_Width.verified.razor.html @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/tests/Core/Progress/FluentProgressTests.razor b/tests/Core/Progress/FluentProgressTests.razor new file mode 100644 index 0000000000..db3bac12d9 --- /dev/null +++ b/tests/Core/Progress/FluentProgressTests.razor @@ -0,0 +1,76 @@ +@using Xunit; +@inherits TestContext +@code +{ + [Fact] + public void FluentProgress_Default() + { + // Arrange && Act + var cut = Render(@); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentProgress_Width() + { + // Arrange && Act + var cut = Render(@); + + // Assert + cut.Verify(); + + } + + [Fact] + public void FluentProgress_Content() + { + // Arrange && Act + var cut = Render(@My content); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentProgress_Visible() + { + // Arrange && Act + var cut = Render(@); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentProgress_Paused() + { + // Arrange && Act + var cut = Render(@); + + // Assert + cut.Verify(); + } + + + [Fact] + public void FluentProgress_Stroke() + { + // Arrange && Act + var cut = Render(@); + + // Assert + cut.Verify(); + } + + [Fact] + public void FluentProgress_Colors() + { + // Arrange && Act + var cut = Render(@); + + // Assert + cut.Verify(); + } +} \ No newline at end of file diff --git a/tests/Core/_ToDo/Progress/FluentProgressRingTests.cs b/tests/Core/_ToDo/Progress/FluentProgressRingTests.cs deleted file mode 100644 index c9caa67aac..0000000000 --- a/tests/Core/_ToDo/Progress/FluentProgressRingTests.cs +++ /dev/null @@ -1,36 +0,0 @@ -using Bunit; -using Xunit; - -namespace Microsoft.Fast.Components.FluentUI.Tests.Progress; -public class FluentProgressRingTests : TestBase -{ - [Fact] - public void FluentProgressRing_Default() - { - //Arrange - string childContent = "render me"; - int? min = default!; - int? max = default!; - int? value = default!; - bool visible = default!; - bool? paused = default!; - var cut = TestContext.RenderComponent(parameters => parameters - .Add(p => p.Min, min) - .Add(p => p.Max, max) - .Add(p => p.Value, value) - .Add(p => p.Visible, visible) - .Add(p => p.Paused, paused) - .AddChildContent(childContent) - ); - //Act - - //Assert - cut.Verify(); - } -} - - - - - - diff --git a/tests/Core/_ToDo/Progress/FluentProgressTests.cs b/tests/Core/_ToDo/Progress/FluentProgressTests.cs deleted file mode 100644 index 63f0adb944..0000000000 --- a/tests/Core/_ToDo/Progress/FluentProgressTests.cs +++ /dev/null @@ -1,36 +0,0 @@ -using Bunit; -using Xunit; - -namespace Microsoft.Fast.Components.FluentUI.Tests.Progress; -public class FluentProgressTests : TestBase -{ - [Fact] - public void FluentProgress_Default() - { - //Arrange - string childContent = "render me"; - int? min = default!; - int? max = default!; - int? value = default!; - bool visible = default!; - bool? paused = default!; - var cut = TestContext.RenderComponent(parameters => parameters - .Add(p => p.Min, min) - .Add(p => p.Max, max) - .Add(p => p.Value, value) - .Add(p => p.Visible, visible) - .Add(p => p.Paused, paused) - .AddChildContent(childContent) - ); - //Act - - //Assert - cut.Verify(); - } -} - - - - - -