Skip to content

Commit 0a9313a

Browse files
msynkmsynk
authored
feat(components): add the new Theme infrastructure for the BitProgressIndicator component #3983 (#4014)
1 parent 7dd93ef commit 0a9313a

File tree

8 files changed

+166
-178
lines changed

8 files changed

+166
-178
lines changed

‎src/BlazorUI/Bit.BlazorUI.Tests/ProgressIndicator/BitProgressIndicatorTests.cs‎

Lines changed: 29 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ public void BitProgressIndicatorBarHeightTest(int barHeight)
1717
parameters.Add(p => p.BarHeight, barHeight);
1818
});
1919

20-
var piWrapper = component.Find(".bit-pi-wrapper");
20+
var piWrapper = component.Find(".wrapper");
2121
var piWrapperStyle = piWrapper.GetAttribute("style");
2222
var expectedValue = $"height: {barHeight}px";
2323
Assert.IsTrue(piWrapperStyle.Contains(expectedValue));
@@ -27,14 +27,14 @@ public void BitProgressIndicatorBarHeightTest(int barHeight)
2727
DataRow(52),
2828
DataRow(43)
2929
]
30-
public void BitProgressIndicatorBarWidthShouldBeEqualPrecentCompleteValue(double percentComplete)
30+
public void BitProgressIndicatorBarWidthShouldBeEqualPercentCompleteValue(double percentComplete)
3131
{
3232
var component = RenderComponent<BitProgressIndicatorTest>(parameters =>
3333
{
3434
parameters.Add(p => p.PercentComplete, percentComplete);
3535
});
3636

37-
var piBar = component.Find(".bit-pi-bar");
37+
var piBar = component.Find(".bar");
3838
var piBarStyle = piBar.GetAttribute("style");
3939
var expectedValue = $"width: {percentComplete}%";
4040
Assert.IsTrue(piBarStyle.Contains(expectedValue));
@@ -44,14 +44,14 @@ public void BitProgressIndicatorBarWidthShouldBeEqualPrecentCompleteValue(double
4444
DataRow(520),
4545
DataRow(430)
4646
]
47-
public void BitProgressIndicatorBarWidthCanNotBeBiggerThan100(double precentComplete)
47+
public void BitProgressIndicatorBarWidthCanNotBeBiggerThan100(double percentComplete)
4848
{
4949
var component = RenderComponent<BitProgressIndicatorTest>(parameters =>
5050
{
51-
parameters.Add(p => p.PercentComplete, precentComplete);
51+
parameters.Add(p => p.PercentComplete, percentComplete);
5252
});
5353

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

71-
var piBar = component.Find(".bit-pi-bar");
71+
var piBar = component.Find(".bar");
7272
var piBarStyle = piBar.GetAttribute("style");
7373
var expectedValue = $"width: 0%";
7474
Assert.IsTrue(piBarStyle.Contains(expectedValue));
7575
}
7676

77+
7778
[DataTestMethod,
78-
DataRow(Visual.Fluent),
79-
DataRow(Visual.Cupertino),
80-
DataRow(Visual.Material)
81-
]
82-
public void BitProgressIndicatorMustRespectVisual(Visual visual)
83-
{
84-
var component = RenderComponent<BitProgressIndicatorTest>(parameters =>
85-
{
86-
parameters.Add(p => p.Visual, visual);
87-
});
88-
89-
var visualClass = visual == Visual.Cupertino ? "cupertino" : visual == Visual.Material ? "material" : "fluent";
90-
var pi = component.Find(".bit-pi");
91-
Assert.IsTrue(pi.ClassList.Contains($"bit-pi-{visualClass}"));
92-
}
93-
94-
[DataTestMethod,
95-
DataRow(Visual.Fluent, 32.0),
96-
DataRow(Visual.Fluent, null),
97-
98-
DataRow(Visual.Cupertino, 32.0),
99-
DataRow(Visual.Cupertino, null),
100-
101-
DataRow(Visual.Material, 32.0),
102-
DataRow(Visual.Material, null)
79+
DataRow(32.0),
80+
DataRow(null)
10381
]
104-
public void BitProgressIndicatorIndeterminateClassTest(Visual visual, double? percentComplete)
82+
public void BitProgressIndicatorIndeterminateClassTest(double? percentComplete)
10583
{
10684
var component = RenderComponent<BitProgressIndicatorTest>(parameters =>
10785
{
108-
parameters.Add(p => p.Visual, visual);
10986
parameters.Add(p => p.PercentComplete, percentComplete);
11087
});
11188

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

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

129-
var piBar = component.Find(".bit-pi-bar");
104+
var piBar = component.Find(".bar");
130105
if (label is not null)
131106
{
132-
var piLabel = component.Find(".bit-pi-lbl");
107+
var piLabel = component.Find(".label");
133108
Assert.AreEqual(label, piLabel.TextContent);
134109
Assert.IsNotNull(piBar.GetAttribute("aria-labelledby"));
135110
}
136111
else
137112
{
138-
Assert.ThrowsException<ElementNotFoundException>(() => component.Find(".bit-pi-lbl"));
113+
Assert.ThrowsException<ElementNotFoundException>(() => component.Find(".label"));
139114
Assert.IsNull(piBar.GetAttribute("aria-labelledby"));
140115
}
141116
}
@@ -151,16 +126,16 @@ public void BitProgressIndicatorDescriptionTest(string description)
151126
parameters.Add(p => p.Description, description);
152127
});
153128

154-
var piBar = component.Find(".bit-pi-bar");
129+
var piBar = component.Find(".bar");
155130
if (description is not null)
156131
{
157-
var piDescription = component.Find(".bit-pi-dsc");
132+
var piDescription = component.Find(".description");
158133
Assert.AreEqual(description, piDescription.TextContent);
159134
Assert.IsNotNull(piBar.GetAttribute("aria-describedby"));
160135
}
161136
else
162137
{
163-
Assert.ThrowsException<ElementNotFoundException>(() => component.Find(".bit-pi-dsc"));
138+
Assert.ThrowsException<ElementNotFoundException>(() => component.Find(".description"));
164139
Assert.IsNull(piBar.GetAttribute("aria-describedby"));
165140
}
166141
}
@@ -176,7 +151,7 @@ public void BitProgressIndicatorAriaValueTextTest(string txt)
176151
parameters.Add(p => p.AriaValueText, txt);
177152
});
178153

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

198-
Assert.ThrowsException<ElementNotFoundException>(() => component.Find(".bit-pi-wrapper"));
173+
Assert.ThrowsException<ElementNotFoundException>(() => component.Find(".wrapper"));
199174
}
200175

201176
[DataTestMethod,
202177
DataRow("<h1>this is a custom label</h1>")
203178
]
204-
public void BitProgressIndicatorLabelFragmentTest(string labelFragment)
179+
public void BitProgressIndicatorLabelTemplateTest(string labelTemplate)
205180
{
206181
var component = RenderComponent<BitProgressIndicator>(parameters =>
207182
{
208-
parameters.Add(p => p.LabelFragment, labelFragment);
183+
parameters.Add(p => p.LabelTemplate, labelTemplate);
209184
});
210185

211-
var labelChildNodes = component.Find(".bit-pi-lbl").ChildNodes;
212-
labelChildNodes.MarkupMatches(labelFragment);
186+
var labelChildNodes = component.Find(".label").ChildNodes;
187+
labelChildNodes.MarkupMatches(labelTemplate);
213188
}
214189

215190
[DataTestMethod,
216191
DataRow("<h1>this is a custom description</h1>"),
217192
]
218-
public void BitProgressIndicatorDescriptionFragmentTest(string descriptionFragment)
193+
public void BitProgressIndicatorDescriptionTemplateTest(string descriptionTemplate)
219194
{
220195
var component = RenderComponent<BitProgressIndicator>(parameters =>
221196
{
222-
parameters.Add(p => p.DescriptionFragment, descriptionFragment);
197+
parameters.Add(p => p.DescriptionTemplate, descriptionTemplate);
223198
});
224199

225-
var descriptionChildNodes = component.Find(".bit-pi-dsc").ChildNodes;
226-
descriptionChildNodes.MarkupMatches(descriptionFragment);
200+
var descriptionChildNodes = component.Find(".description").ChildNodes;
201+
descriptionChildNodes.MarkupMatches(descriptionTemplate);
227202
}
228203
}

‎src/BlazorUI/Bit.BlazorUI/Components/ProgressIndicator/BitProgressIndicator.Fluent.scss‎

Lines changed: 0 additions & 67 deletions
This file was deleted.

‎src/BlazorUI/Bit.BlazorUI/Components/ProgressIndicator/BitProgressIndicator.razor‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
<div @ref="RootElement"
55
style="@StyleBuilder.Value"
66
class="@ClassBuilder.Value">
7-
@if (LabelFragment is not null)
7+
@if (LabelTemplate is not null)
88
{
9-
<div class="bit-pi-lbl" id="@LabelId">
10-
@LabelFragment
9+
<div class="label" id="@LabelId">
10+
@LabelTemplate
1111
</div>
1212
}
1313
else if (Label.HasValue())
1414
{
15-
<div class="bit-pi-lbl" id="@LabelId">
15+
<div class="label" id="@LabelId">
1616
@Label
1717
</div>
1818
}
@@ -25,9 +25,9 @@
2525
}
2626
else
2727
{
28-
<div class="bit-pi-wrapper" style="@($"height: {BarHeight}px;")">
29-
<div class="bit-pi-track"></div>
30-
<div class="bit-pi-bar"
28+
<div class="wrapper" style="@($"height: {BarHeight}px;")">
29+
<div class="track"></div>
30+
<div class="bar"
3131
style="@($"{(PercentComplete is not null ? $"width: {percentComplete}%" : string.Empty)};")"
3232
role="progressbar"
3333
aria-describedby="@DescriptionId"
@@ -41,15 +41,15 @@
4141
}
4242
}
4343

44-
@if (DescriptionFragment is not null)
44+
@if (DescriptionTemplate is not null)
4545
{
46-
<div class="bit-pi-dsc" id="@DescriptionId">
47-
@DescriptionFragment
46+
<div class="description" id="@DescriptionId">
47+
@DescriptionTemplate
4848
</div>
4949
}
5050
else if (Description.HasValue())
5151
{
52-
<div class="bit-pi-dsc" id="@DescriptionId">
52+
<div class="description" id="@DescriptionId">
5353
@Description
5454
</div>
5555
}

‎src/BlazorUI/Bit.BlazorUI/Components/ProgressIndicator/BitProgressIndicator.razor.cs‎

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
using System;
2-
using System.Threading.Tasks;
3-
using Microsoft.AspNetCore.Components;
4-
5-
namespace Bit.BlazorUI;
1+
namespace Bit.BlazorUI;
62

73
public partial class BitProgressIndicator
84
{
5+
protected override bool UseVisual => false;
6+
7+
98
private double? percentComplete;
109

10+
1111
/// <summary>
1212
/// Label to display above the component
1313
/// </summary>
@@ -16,7 +16,7 @@ public partial class BitProgressIndicator
1616
/// <summary>
1717
/// Custom label template to display above the component
1818
/// </summary>
19-
[Parameter] public RenderFragment? LabelFragment { get; set; }
19+
[Parameter] public RenderFragment? LabelTemplate { get; set; }
2020

2121
/// <summary>
2222
/// Height of the ProgressIndicator
@@ -44,7 +44,7 @@ public double? PercentComplete
4444
/// <summary>
4545
/// Custom template for describing or supplementing the operation
4646
/// </summary>
47-
[Parameter] public RenderFragment? DescriptionFragment { get; set; }
47+
[Parameter] public RenderFragment? DescriptionTemplate { get; set; }
4848

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

64-
public string? LabelId { get; set; } = string.Empty;
65-
public string? DescriptionId { get; set; } = string.Empty;
66-
67-
protected override async Task OnParametersSetAsync()
68-
{
69-
LabelId = Label.HasValue() ? $"progress-indicator{UniqueId}-label" : null;
70-
DescriptionId = Description.HasValue() ? $"progress-indicator{UniqueId}-description" : null;
71-
72-
await base.OnParametersSetAsync();
73-
}
64+
private string? LabelId => Label.HasValue() || LabelTemplate is not null
65+
? $"ProgressIndicator-{UniqueId}-Label" : null;
66+
private string? DescriptionId => Description.HasValue() || DescriptionTemplate is not null
67+
? $"ProgressIndicator-{UniqueId}-Description" : null;
7468

75-
protected override string RootElementClass => "bit-pi";
69+
protected override string RootElementClass => "bit-pin";
7670

7771
protected override void RegisterComponentClasses()
7872
{
79-
ClassBuilder.Register(() => PercentComplete is not null ? string.Empty
80-
: $"{RootElementClass}-indeterminate-{VisualClassRegistrar()}");
73+
ClassBuilder.Register(() => PercentComplete is not null ? string.Empty : "indeterminate");
8174
}
8275

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

0 commit comments

Comments
 (0)