Skip to content

Add the new Theme infrastructure for the BitProgressIndicator component (#3983) #4014

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
msynk merged 2 commits into from
Feb 26, 2023
Merged

Add the new Theme infrastructure for the BitProgressIndicator component (#3983) #4014

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3fc0a1f
add the new Theme infrastructure for the BitProgressIndicator compone…
msynk Feb 26, 2023
f86a7fc
resolve review comments
msynk Feb 26, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
83 changes: 29 additions & 54 deletions src/BlazorUI/Bit.BlazorUI.Tests/ProgressIndicator/BitProgressIndicatorTests.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ public void BitProgressIndicatorBarHeightTest(int barHeight)
parameters.Add(p => p.BarHeight, barHeight);
});

var piWrapper = component.Find(".bit-pi-wrapper");
var piWrapper = component.Find(".wrapper");
var piWrapperStyle = piWrapper.GetAttribute("style");
var expectedValue = $"height: {barHeight}px";
Assert.IsTrue(piWrapperStyle.Contains(expectedValue));
Expand All @@ -27,14 +27,14 @@ public void BitProgressIndicatorBarHeightTest(int barHeight)
DataRow(52),
DataRow(43)
]
public void BitProgressIndicatorBarWidthShouldBeEqualPrecentCompleteValue(double percentComplete)
public void BitProgressIndicatorBarWidthShouldBeEqualPercentCompleteValue(double percentComplete)
{
var component = RenderComponent<BitProgressIndicatorTest>(parameters =>
{
parameters.Add(p => p.PercentComplete, percentComplete);
});

var piBar = component.Find(".bit-pi-bar");
var piBar = component.Find(".bar");
var piBarStyle = piBar.GetAttribute("style");
var expectedValue = $"width: {percentComplete}%";
Assert.IsTrue(piBarStyle.Contains(expectedValue));
Expand All @@ -44,14 +44,14 @@ public void BitProgressIndicatorBarWidthShouldBeEqualPrecentCompleteValue(double
DataRow(520),
DataRow(430)
]
public void BitProgressIndicatorBarWidthCanNotBeBiggerThan100(double precentComplete)
public void BitProgressIndicatorBarWidthCanNotBeBiggerThan100(double percentComplete)
{
var component = RenderComponent<BitProgressIndicatorTest>(parameters =>
{
parameters.Add(p => p.PercentComplete, precentComplete);
parameters.Add(p => p.PercentComplete, percentComplete);
});

var piBar = component.Find(".bit-pi-bar");
var piBar = component.Find(".bar");
var piBarStyle = piBar.GetAttribute("style");
var expectedValue = $"width: 100%";
Assert.IsTrue(piBarStyle.Contains(expectedValue));
Expand All @@ -68,51 +68,26 @@ public void BitProgressIndicatorBarWidthCanNotBeSmallerThan0(double percentCompl
parameters.Add(p => p.PercentComplete, percentComplete);
});

var piBar = component.Find(".bit-pi-bar");
var piBar = component.Find(".bar");
var piBarStyle = piBar.GetAttribute("style");
var expectedValue = $"width: 0%";
Assert.IsTrue(piBarStyle.Contains(expectedValue));
}


[DataTestMethod,
DataRow(Visual.Fluent),
DataRow(Visual.Cupertino),
DataRow(Visual.Material)
]
public void BitProgressIndicatorMustRespectVisual(Visual visual)
{
var component = RenderComponent<BitProgressIndicatorTest>(parameters =>
{
parameters.Add(p => p.Visual, visual);
});

var visualClass = visual == Visual.Cupertino ? "cupertino" : visual == Visual.Material ? "material" : "fluent";
var pi = component.Find(".bit-pi");
Assert.IsTrue(pi.ClassList.Contains($"bit-pi-{visualClass}"));
}

[DataTestMethod,
DataRow(Visual.Fluent, 32.0),
DataRow(Visual.Fluent, null),

DataRow(Visual.Cupertino, 32.0),
DataRow(Visual.Cupertino, null),

DataRow(Visual.Material, 32.0),
DataRow(Visual.Material, null)
DataRow(32.0),
DataRow(null)
]
public void BitProgressIndicatorIndeterminateClassTest(Visual visual, double? percentComplete)
public void BitProgressIndicatorIndeterminateClassTest(double? percentComplete)
{
var component = RenderComponent<BitProgressIndicatorTest>(parameters =>
{
parameters.Add(p => p.Visual, visual);
parameters.Add(p => p.PercentComplete, percentComplete);
});

var visualClass = visual == Visual.Cupertino ? "cupertino" : visual == Visual.Material ? "material" : "fluent";
var pi = component.Find(".bit-pi");
var hasIndeterminateClass = pi.ClassList.Contains($"bit-pi-indeterminate-{visualClass}");
Assert.AreEqual(percentComplete is null, hasIndeterminateClass);
var pin = component.Find(".bit-pin");
Assert.AreEqual(percentComplete is null, pin.ClassList.Contains($"indeterminate"));
}

[DataTestMethod,
Expand All @@ -126,16 +101,16 @@ public void BitProgressIndicatorLabelTest(string label)
parameters.Add(p => p.Label, label);
});

var piBar = component.Find(".bit-pi-bar");
var piBar = component.Find(".bar");
if (label is not null)
{
var piLabel = component.Find(".bit-pi-lbl");
var piLabel = component.Find(".label");
Assert.AreEqual(label, piLabel.TextContent);
Assert.IsNotNull(piBar.GetAttribute("aria-labelledby"));
}
else
{
Assert.ThrowsException<ElementNotFoundException>(() => component.Find(".bit-pi-lbl"));
Assert.ThrowsException<ElementNotFoundException>(() => component.Find(".label"));
Assert.IsNull(piBar.GetAttribute("aria-labelledby"));
}
}
Expand All @@ -151,16 +126,16 @@ public void BitProgressIndicatorDescriptionTest(string description)
parameters.Add(p => p.Description, description);
});

var piBar = component.Find(".bit-pi-bar");
var piBar = component.Find(".bar");
if (description is not null)
{
var piDescription = component.Find(".bit-pi-dsc");
var piDescription = component.Find(".description");
Assert.AreEqual(description, piDescription.TextContent);
Assert.IsNotNull(piBar.GetAttribute("aria-describedby"));
}
else
{
Assert.ThrowsException<ElementNotFoundException>(() => component.Find(".bit-pi-dsc"));
Assert.ThrowsException<ElementNotFoundException>(() => component.Find(".description"));
Assert.IsNull(piBar.GetAttribute("aria-describedby"));
}
}
Expand All @@ -176,7 +151,7 @@ public void BitProgressIndicatorAriaValueTextTest(string txt)
parameters.Add(p => p.AriaValueText, txt);
});

var piBar = component.Find(".bit-pi-bar");
var piBar = component.Find(".bar");
if (txt is not null)
{
Assert.AreEqual(txt, piBar.GetAttribute("aria-valuetext"));
Expand All @@ -195,34 +170,34 @@ public void BitProgressIndicatorIsProgressHiddenTest()
parameters.Add(p => p.IsProgressHidden, true);
});

Assert.ThrowsException<ElementNotFoundException>(() => component.Find(".bit-pi-wrapper"));
Assert.ThrowsException<ElementNotFoundException>(() => component.Find(".wrapper"));
}

[DataTestMethod,
DataRow("<h1>this is a custom label</h1>")
]
public void BitProgressIndicatorLabelFragmentTest(string labelFragment)
public void BitProgressIndicatorLabelTemplateTest(string labelTemplate)
{
var component = RenderComponent<BitProgressIndicator>(parameters =>
{
parameters.Add(p => p.LabelFragment, labelFragment);
parameters.Add(p => p.LabelTemplate, labelTemplate);
});

var labelChildNodes = component.Find(".bit-pi-lbl").ChildNodes;
labelChildNodes.MarkupMatches(labelFragment);
var labelChildNodes = component.Find(".label").ChildNodes;
labelChildNodes.MarkupMatches(labelTemplate);
}

[DataTestMethod,
DataRow("<h1>this is a custom description</h1>"),
]
public void BitProgressIndicatorDescriptionFragmentTest(string descriptionFragment)
public void BitProgressIndicatorDescriptionTemplateTest(string descriptionTemplate)
{
var component = RenderComponent<BitProgressIndicator>(parameters =>
{
parameters.Add(p => p.DescriptionFragment, descriptionFragment);
parameters.Add(p => p.DescriptionTemplate, descriptionTemplate);
});

var descriptionChildNodes = component.Find(".bit-pi-dsc").ChildNodes;
descriptionChildNodes.MarkupMatches(descriptionFragment);
var descriptionChildNodes = component.Find(".description").ChildNodes;
descriptionChildNodes.MarkupMatches(descriptionTemplate);
}
}
67 changes: 0 additions & 67 deletions src/BlazorUI/Bit.BlazorUI/Components/ProgressIndicator/BitProgressIndicator.Fluent.scss
View file
Open in desktop

This file was deleted.

22 changes: 11 additions & 11 deletions src/BlazorUI/Bit.BlazorUI/Components/ProgressIndicator/BitProgressIndicator.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,15 @@
<div @ref="RootElement"
style="@StyleBuilder.Value"
class="@ClassBuilder.Value">
@if (LabelFragment is not null)
@if (LabelTemplate is not null)
{
<div class="bit-pi-lbl" id="@LabelId">
@LabelFragment
<div class="label" id="@LabelId">
@LabelTemplate
</div>
}
else if (Label.HasValue())
{
<div class="bit-pi-lbl" id="@LabelId">
<div class="label" id="@LabelId">
@Label
</div>
}
Expand All @@ -25,9 +25,9 @@
}
else
{
<div class="bit-pi-wrapper" style="@($"height: {BarHeight}px;")">
<div class="bit-pi-track"></div>
<div class="bit-pi-bar"
<div class="wrapper" style="@($"height: {BarHeight}px;")">
<div class="track"></div>
<div class="bar"
style="@($"{(PercentComplete is not null ? $"width: {percentComplete}%" : string.Empty)};")"
role="progressbar"
aria-describedby="@DescriptionId"
Expand All @@ -41,15 +41,15 @@
}
}

@if (DescriptionFragment is not null)
@if (DescriptionTemplate is not null)
{
<div class="bit-pi-dsc" id="@DescriptionId">
@DescriptionFragment
<div class="description" id="@DescriptionId">
@DescriptionTemplate
</div>
}
else if (Description.HasValue())
{
<div class="bit-pi-dsc" id="@DescriptionId">
<div class="description" id="@DescriptionId">
@Description
</div>
}
Expand Down
33 changes: 13 additions & 20 deletions src/BlazorUI/Bit.BlazorUI/Components/ProgressIndicator/BitProgressIndicator.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
using System;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Components;

namespace Bit.BlazorUI;
namespace Bit.BlazorUI;

public partial class BitProgressIndicator
{
protected override bool UseVisual => false;


private double? percentComplete;


/// <summary>
/// Label to display above the component
/// </summary>
Expand All @@ -16,7 +16,7 @@ public partial class BitProgressIndicator
/// <summary>
/// Custom label template to display above the component
/// </summary>
[Parameter] public RenderFragment? LabelFragment { get; set; }
[Parameter] public RenderFragment? LabelTemplate { get; set; }

/// <summary>
/// Height of the ProgressIndicator
Expand Down Expand Up @@ -44,7 +44,7 @@ public double? PercentComplete
/// <summary>
/// Custom template for describing or supplementing the operation
/// </summary>
[Parameter] public RenderFragment? DescriptionFragment { get; set; }
[Parameter] public RenderFragment? DescriptionTemplate { get; set; }

/// <summary>
/// Text alternative of the progress status, used by screen readers for reading the value of the progress
Expand All @@ -61,23 +61,16 @@ public double? PercentComplete
/// </summary>
[Parameter] public RenderFragment<BitProgressIndicator>? ProgressTemplate { get; set; }

public string? LabelId { get; set; } = string.Empty;
public string? DescriptionId { get; set; } = string.Empty;

protected override async Task OnParametersSetAsync()
{
LabelId = Label.HasValue() ? $"progress-indicator{UniqueId}-label" : null;
DescriptionId = Description.HasValue() ? $"progress-indicator{UniqueId}-description" : null;

await base.OnParametersSetAsync();
}
private string? LabelId => Label.HasValue() || LabelTemplate is not null
? $"ProgressIndicator-{UniqueId}-Label" : null;
private string? DescriptionId => Description.HasValue() || DescriptionTemplate is not null
? $"ProgressIndicator-{UniqueId}-Description" : null;

protected override string RootElementClass => "bit-pi";
protected override string RootElementClass => "bit-pin";

protected override void RegisterComponentClasses()
{
ClassBuilder.Register(() => PercentComplete is not null ? string.Empty
: $"{RootElementClass}-indeterminate-{VisualClassRegistrar()}");
ClassBuilder.Register(() => PercentComplete is not null ? string.Empty : "indeterminate");
}

private static double Normalize(double? value) => Math.Clamp(value ?? 0, 0, 100);
Expand Down
Loading