Skip to content

Commit 17e3b6f

Browse files
msynkmsynk
authored
feat(blazorui): add missing parameters to BitTextField #10883 (#10885)
1 parent d32a96c commit 17e3b6f

File tree

6 files changed

+566
-104
lines changed

6 files changed

+566
-104
lines changed

‎src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/TextField/BitTextFieldTests.cs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,8 +124,8 @@ public void BitTextFieldCanRevealPassword(bool isEnabled)
124124
});
125125

126126
var textField = component.Find(".bit-tfl-inp");
127-
var revealPasswordBtn = component.Find(".bit-tfl-prb");
128-
var revealPasswordIcon = component.Find(".bit-tfl-prb > span > i");
127+
var revealPasswordBtn = component.Find(".bit-tfl-rpb");
128+
var revealPasswordIcon = component.Find(".bit-tfl-rpb > span > i");
129129

130130
Assert.AreEqual("password", textField.GetAttribute("type"));
131131
Assert.IsTrue(revealPasswordIcon.ClassList.Contains($"bit-icon--View"));

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -101,14 +101,14 @@
101101
{
102102
<button @onclick="ToggleRevealPassword"
103103
style="@Styles?.RevealPassword"
104-
class="bit-tfl-prb @Classes?.RevealPassword"
104+
class="bit-tfl-rpb @Classes?.RevealPassword"
105105
type="button"
106106
aria-label="@RevealPasswordAriaLabel"
107107
aria-pressed="@(_elementType == BitInputType.Text ? "true" : "false")">
108108
<span style="@Styles?.RevealPasswordIconContainer"
109-
class="bit-tfl-rin @Classes?.RevealPasswordIconContainer">
109+
class="bit-tfl-rpc @Classes?.RevealPasswordIconContainer">
110110
<i style="@Styles?.RevealPasswordIcon"
111-
class="bit-tfl-ric bit-icon bit-icon--@(_elementType == BitInputType.Text ? "Hide3" : "View") @Classes?.RevealPasswordIcon"
111+
class="bit-tfl-rpi bit-icon bit-icon--@(_elementType == BitInputType.Text ? "Hide3" : "View") @Classes?.RevealPasswordIcon"
112112
aria-hidden="true" />
113113
</span>
114114
</button>

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,12 +23,28 @@ public partial class BitTextField : BitTextInputBase<string?>
2323

2424

2525

26+
/// <summary>
27+
/// The general color of the text field used when focused.
28+
/// </summary>
29+
[Parameter] public BitColor? Accent { get; set; }
30+
2631
/// <summary>
2732
/// Automatically adjust the height of the input in Multiline mode.
2833
/// </summary>
2934
[Parameter, ResetClassBuilder]
3035
public bool AutoHeight { get; set; }
3136

37+
/// <summary>
38+
/// The color kind of the text field background.
39+
/// </summary>
40+
[Parameter] public BitColorKind? Background { get; set; }
41+
42+
/// <summary>
43+
/// The color kind of the text field border.
44+
/// </summary>
45+
[Parameter, ResetClassBuilder]
46+
public BitColorKind? Border { get; set; }
47+
3248
/// <summary>
3349
/// Whether to show the reveal password button for input type 'password'.
3450
/// </summary>
@@ -54,6 +70,11 @@ public partial class BitTextField : BitTextInputBase<string?>
5470
/// </summary>
5571
[Parameter] public RenderFragment? DescriptionTemplate { get; set; }
5672

73+
/// <summary>
74+
/// Forces the text field fill 100% of its container width.
75+
/// </summary>
76+
[Parameter] public bool FullWidth { get; set; }
77+
5778
/// <summary>
5879
/// The icon name for the icon shown in the far right end of the text field.
5980
/// </summary>
@@ -236,6 +257,48 @@ protected override void RegisterCssClasses()
236257
ClassBuilder.Register(() => _hasFocus ? $"bit-tfl-fcs {Classes?.Focused}" : string.Empty);
237258

238259
ClassBuilder.Register(() => Required && Label is null ? "bit-tfl-rnl" : string.Empty);
260+
261+
ClassBuilder.Register(() => FullWidth ? "bit-tfl-fwd" : string.Empty);
262+
263+
ClassBuilder.Register(() => Accent switch
264+
{
265+
BitColor.Primary => "bit-tfl-pri",
266+
BitColor.Secondary => "bit-tfl-sec",
267+
BitColor.Tertiary => "bit-tfl-ter",
268+
BitColor.Info => "bit-tfl-inf",
269+
BitColor.Success => "bit-tfl-suc",
270+
BitColor.Warning => "bit-tfl-wrn",
271+
BitColor.SevereWarning => "bit-tfl-swr",
272+
BitColor.Error => "bit-tfl-err",
273+
BitColor.PrimaryBackground => "bit-tfl-pbg",
274+
BitColor.SecondaryBackground => "bit-tfl-sbg",
275+
BitColor.TertiaryBackground => "bit-tfl-tbg",
276+
BitColor.PrimaryForeground => "bit-tfl-pfg",
277+
BitColor.SecondaryForeground => "bit-tfl-sfg",
278+
BitColor.TertiaryForeground => "bit-tfl-tfg",
279+
BitColor.PrimaryBorder => "bit-tfl-pbr",
280+
BitColor.SecondaryBorder => "bit-tfl-sbr",
281+
BitColor.TertiaryBorder => "bit-tfl-tbr",
282+
_ => "bit-tfl-pri"
283+
});
284+
285+
ClassBuilder.Register(() => Background switch
286+
{
287+
BitColorKind.Primary => "bit-tfl-bpr",
288+
BitColorKind.Secondary => "bit-tfl-bse",
289+
BitColorKind.Tertiary => "bit-tfl-btr",
290+
BitColorKind.Transparent => "bit-tfl-btn",
291+
_ => "bit-tfl-bpr"
292+
});
293+
294+
ClassBuilder.Register(() => Border switch
295+
{
296+
BitColorKind.Primary => "bit-tfl-brp",
297+
BitColorKind.Secondary => "bit-tfl-brs",
298+
BitColorKind.Tertiary => "bit-tfl-brt",
299+
BitColorKind.Transparent => "bit-tfl-brn",
300+
_ => "bit-tfl-brp"
301+
});
239302
}
240303

241304
protected override void RegisterCssStyles()

‎src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss‎

Lines changed: 127 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,10 @@
7474
}
7575
}
7676

77+
.bit-tfl-fwd {
78+
width: 100%;
79+
}
80+
7781
.bit-tfl-lbl {
7882
margin: 0;
7983
display: block;
@@ -99,8 +103,8 @@
99103
min-height: spacing(4);
100104
box-sizing: border-box;
101105
border-radius: $shp-border-radius;
102-
background-color: $clr-bg-pri;
103-
border: $shp-border-width $shp-border-style $clr-brd-pri;
106+
background-color: var(--bit-tfl-clr-bg);
107+
border: $shp-border-width $shp-border-style var(--bit-tfl-clr-brd);
104108
}
105109

106110
.bit-tfl-inp {
@@ -128,7 +132,7 @@
128132
}
129133
}
130134

131-
.bit-tfl-prb {
135+
.bit-tfl-rpb {
132136
height: 100%;
133137
border: none;
134138
cursor: pointer;
@@ -137,7 +141,7 @@
137141
outline: transparent;
138142
padding: 0 spacing(0.5);
139143
min-height: spacing(3.75);
140-
color: $clr-pri;
144+
color: var(--bit-tfl-clr);
141145
background-color: transparent;
142146

143147
@media (hover: hover) {
@@ -147,22 +151,22 @@
147151
}
148152
}
149153

150-
.bit-tfl-rin {
154+
.bit-tfl-rpc {
151155
display: flex;
152156
align-items: center;
153157
font-size: spacing(2);
154158
justify-content: center;
155159
}
156160

157-
.bit-tfl-ric {
158-
color: $clr-pri;
161+
.bit-tfl-rpi {
162+
color: var(--bit-tfl-clr);
159163
}
160164

161165
.bit-tfl-ico {
162166
color: $clr-fg-pri;
163167
}
164168

165-
.bit-tfl-ric,
169+
.bit-tfl-rpi,
166170
.bit-tfl-ico {
167171
width: spacing(4);
168172
text-align: center;
@@ -231,13 +235,22 @@
231235
}
232236

233237
.bit-tfl-fcs {
238+
.bit-tfl-ico {
239+
color: var(--bit-tfl-clr);
240+
}
241+
242+
.bit-tfl-pre,
243+
.bit-tfl-suf {
244+
color: var(--bit-tfl-clr);
245+
}
246+
234247
.bit-tfl-fgp::after {
235248
content: "";
236249
position: absolute;
237250
pointer-events: none;
238251
inset: spacing(-0.125);
239252
border-radius: $shp-border-radius;
240-
border: spacing(0.25) $shp-border-style $clr-pri;
253+
border: spacing(0.25) $shp-border-style var(--bit-tfl-clr);
241254
}
242255

243256
&.bit-tfl-und {
@@ -250,7 +263,7 @@
250263
position: absolute;
251264
pointer-events: none;
252265
inset: spacing(-0.125);
253-
border-bottom: spacing(0.25) $shp-border-style $clr-pri;
266+
border-bottom: spacing(0.25) $shp-border-style var(--bit-tfl-clr);
254267
}
255268
}
256269
}
@@ -259,7 +272,7 @@
259272
.bit-tfl-wrp {
260273
width: 100%;
261274
display: flex;
262-
border-bottom: $shp-border-width $shp-border-style $clr-brd-pri;
275+
border-bottom: $shp-border-width $shp-border-style var(--bit-tfl-clr-brd);
263276
}
264277

265278
.bit-tfl-lbl {
@@ -299,3 +312,106 @@
299312
border: none;
300313
}
301314
}
315+
316+
317+
.bit-tfl-pri {
318+
--bit-tfl-clr: #{$clr-pri};
319+
}
320+
321+
.bit-tfl-sec {
322+
--bit-tfl-clr: #{$clr-sec};
323+
}
324+
325+
.bit-tfl-ter {
326+
--bit-tfl-clr: #{$clr-ter};
327+
}
328+
329+
.bit-tfl-inf {
330+
--bit-tfl-clr: #{$clr-inf};
331+
}
332+
333+
.bit-tfl-suc {
334+
--bit-tfl-clr: #{$clr-suc};
335+
}
336+
337+
.bit-tfl-wrn {
338+
--bit-tfl-clr: #{$clr-wrn};
339+
}
340+
341+
.bit-tfl-swr {
342+
--bit-tfl-clr: #{$clr-swr};
343+
}
344+
345+
.bit-tfl-err {
346+
--bit-tfl-clr: #{$clr-err};
347+
}
348+
349+
.bit-tfl-pbg {
350+
--bit-tfl-clr: #{$clr-bg-pri};
351+
}
352+
353+
.bit-tfl-sbg {
354+
--bit-tfl-clr: #{$clr-bg-sec};
355+
}
356+
357+
.bit-tfl-tbg {
358+
--bit-tfl-clr: #{$clr-bg-ter};
359+
}
360+
361+
.bit-tfl-pfg {
362+
--bit-tfl-clr: #{$clr-fg-pri};
363+
}
364+
365+
.bit-tfl-sfg {
366+
--bit-tfl-clr: #{$clr-fg-sec};
367+
}
368+
369+
.bit-tfl-tfg {
370+
--bit-tfl-clr: #{$clr-fg-ter};
371+
}
372+
373+
.bit-tfl-pbr {
374+
--bit-tfl-clr: #{$clr-brd-pri};
375+
}
376+
377+
.bit-tfl-sbr {
378+
--bit-tfl-clr: #{$clr-brd-sec};
379+
}
380+
381+
.bit-tfl-tbr {
382+
--bit-tfl-clr: #{$clr-brd-ter};
383+
}
384+
385+
386+
.bit-tfl-bpr {
387+
--bit-tfl-clr-bg: #{$clr-bg-pri};
388+
}
389+
390+
.bit-tfl-bse {
391+
--bit-tfl-clr-bg: #{$clr-bg-sec};
392+
}
393+
394+
.bit-tfl-btr {
395+
--bit-tfl-clr-bg: #{$clr-bg-ter};
396+
}
397+
398+
.bit-tfl-btn {
399+
--bit-tfl-clr-bg: transparent;
400+
}
401+
402+
403+
.bit-tfl-brp {
404+
--bit-tfl-clr-brd: #{$clr-brd-pri};
405+
}
406+
407+
.bit-tfl-brs {
408+
--bit-tfl-clr-brd: #{$clr-brd-sec};
409+
}
410+
411+
.bit-tfl-brt {
412+
--bit-tfl-clr-brd: #{$clr-brd-ter};
413+
}
414+
415+
.bit-tfl-brn {
416+
--bit-tfl-clr-brd: transparent;
417+
}

0 commit comments

Comments
 (0)