Skip to content

Commit c563417

Browse files
msynkmsynk
authored
feat(blazorui): add missing Background and Border parameters to BitAccordion #12113 (#12116)
1 parent 6a9f70e commit c563417

File tree

4 files changed

+227
-17
lines changed

4 files changed

+227
-17
lines changed

‎src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Accordion/BitAccordion.razor.cs‎

Lines changed: 31 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,22 @@
1-
namespace Bit.BlazorUI;
1+
namespace Bit.BlazorUI;
22

33
/// <summary>
44
/// The Accordion component allows the user to show and hide sections of related content on a page.
55
/// </summary>
66
public partial class BitAccordion : BitComponentBase
77
{
8+
/// <summary>
9+
/// The color kind of the background of the accordion.
10+
/// </summary>
11+
[Parameter, ResetClassBuilder]
12+
public BitColorKind? Background { get; set; }
13+
14+
/// <summary>
15+
/// The color kind of the border of the accordion.
16+
/// </summary>
17+
[Parameter, ResetClassBuilder]
18+
public BitColorKind? Border { get; set; }
19+
820
/// <summary>
921
/// Alias for the ChildContent parameter.
1022
/// </summary>
@@ -78,6 +90,24 @@ protected override void RegisterCssClasses()
7890
ClassBuilder.Register(() => IsExpanded ? Classes?.Expanded : string.Empty);
7991

8092
ClassBuilder.Register(() => NoBorder ? "bit-acd-nbd" : string.Empty);
93+
94+
ClassBuilder.Register(() => Background switch
95+
{
96+
BitColorKind.Primary => "bit-acd-pbg",
97+
BitColorKind.Secondary => "bit-acd-sbg",
98+
BitColorKind.Tertiary => "bit-acd-tbg",
99+
BitColorKind.Transparent => "bit-acd-rbg",
100+
_ => string.Empty
101+
});
102+
103+
ClassBuilder.Register(() => Border switch
104+
{
105+
BitColorKind.Primary => "bit-acd-pbr",
106+
BitColorKind.Secondary => "bit-acd-sbr",
107+
BitColorKind.Tertiary => "bit-acd-tbr",
108+
BitColorKind.Transparent => "bit-acd-rbr",
109+
_ => string.Empty
110+
});
81111
}
82112

83113
protected override void RegisterCssStyles()

‎src/BlazorUI/Bit.BlazorUI/Components/Surfaces/Accordion/BitAccordion.scss‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../../../Styles/functions.scss";
1+
@import "../../../Styles/functions.scss";
22

33
.bit-acd {
44
width: 100%;
@@ -33,6 +33,41 @@
3333
}
3434
}
3535

36+
37+
.bit-acd-pbg {
38+
background-color: $clr-bg-pri;
39+
}
40+
41+
.bit-acd-sbg {
42+
background-color: $clr-bg-sec;
43+
}
44+
45+
.bit-acd-tbg {
46+
background-color: $clr-bg-ter;
47+
}
48+
49+
.bit-acd-rbg {
50+
background-color: transparent;
51+
}
52+
53+
54+
.bit-acd-pbr {
55+
border-color: $clr-brd-pri;
56+
}
57+
58+
.bit-acd-sbr {
59+
border-color: $clr-brd-sec;
60+
}
61+
62+
.bit-acd-tbr {
63+
border-color: $clr-brd-ter;
64+
}
65+
66+
.bit-acd-rbr {
67+
border-color: transparent;
68+
}
69+
70+
3671
.bit-acd-hdr {
3772
display: flex;
3873
cursor: pointer;

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Accordion/BitAccordionDemo.razor‎

Lines changed: 50 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@page "/components/accordion"
1+
@page "/components/accordion"
22

33
<PageOutlet Url="components/accordion"
44
Title="Accordion"
@@ -8,6 +8,7 @@
88
SecondaryNames="@(["Expander"])"
99
Description="The Accordion component allows the user to show and hide sections of related content on a page."
1010
Parameters="componentParameters"
11+
SubEnums="componentSubEnums"
1112
SubClasses="componentSubClasses"
1213
GitHubUrl="Surfaces/Accordion/BitAccordion.razor"
1314
GitHubDemoUrl="Surfaces/Accordion/BitAccordionDemo.razor">
@@ -35,7 +36,49 @@
3536
</BitAccordion>
3637
</DemoExample>
3738

38-
<DemoExample Title="Multiple" RazorCode="@example3RazorCode" Id="example3">
39+
<DemoExample Title="Background" RazorCode="@example3RazorCode" CsharpCode="@example3CsharpCode" Id="example3">
40+
<BitChoiceGroup @bind-Value="backgroundColorKind" Horizontal
41+
TItem="BitChoiceGroupOption<BitColorKind>" TValue="BitColorKind">
42+
<BitChoiceGroupOption Text="Primary" Value="BitColorKind.Primary" />
43+
<BitChoiceGroupOption Text="Secondary" Value="BitColorKind.Secondary" />
44+
<BitChoiceGroupOption Text="Tertiary" Value="BitColorKind.Tertiary" />
45+
<BitChoiceGroupOption Text="Transparent" Value="BitColorKind.Transparent" />
46+
</BitChoiceGroup>
47+
<br />
48+
<div style="padding:2rem;background:gray">
49+
<BitAccordion Title="Accordion" Background="backgroundColorKind">
50+
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
51+
These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
52+
Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
53+
inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
54+
spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
55+
in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
56+
are boundless. This space is yours to craft, yours to shape, yours to bring to life.
57+
</BitAccordion>
58+
</div>
59+
</DemoExample>
60+
61+
<DemoExample Title="Border" RazorCode="@example4RazorCode" CsharpCode="@example4CsharpCode" Id="example4">
62+
<BitChoiceGroup @bind-Value="borderColorKind" Horizontal
63+
TItem="BitChoiceGroupOption<BitColorKind>" TValue="BitColorKind">
64+
<BitChoiceGroupOption Text="Primary" Value="BitColorKind.Primary" />
65+
<BitChoiceGroupOption Text="Secondary" Value="BitColorKind.Secondary" />
66+
<BitChoiceGroupOption Text="Tertiary" Value="BitColorKind.Tertiary" />
67+
<BitChoiceGroupOption Text="Transparent" Value="BitColorKind.Transparent" />
68+
</BitChoiceGroup>
69+
<br />
70+
<BitAccordion Title="Accordion" Border="borderColorKind">
71+
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
72+
These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
73+
Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
74+
inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
75+
spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
76+
in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
77+
are boundless. This space is yours to craft, yours to shape, yours to bring to life.
78+
</BitAccordion>
79+
</DemoExample>
80+
81+
<DemoExample Title="Multiple" RazorCode="@example5RazorCode" Id="example5">
3982
<div>You can define multiple accordions together.</div><br />
4083
<BitAccordion Title="Accordion 1">
4184
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
@@ -67,7 +110,7 @@
67110
</BitAccordion>
68111
</DemoExample>
69112

70-
<DemoExample Title="Description" RazorCode="@example4RazorCode" Id="example4">
113+
<DemoExample Title="Description" RazorCode="@example6RazorCode" Id="example6">
71114
<div>You can set a short description inside the Accordion header.</div><br />
72115
<BitAccordion Title="General settings" Description="The general settings of the application">
73116
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
@@ -80,7 +123,7 @@
80123
</BitAccordion>
81124
</DemoExample>
82125

83-
<DemoExample Title="Controlled" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
126+
<DemoExample Title="Controlled" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
84127
<div>You can control the accordions to open only one at a time.</div><br />
85128
<BitAccordion Title="General settings"
86129
Description="I am an accordion"
@@ -121,7 +164,7 @@
121164
</BitAccordion>
122165
</DemoExample>
123166

124-
<DemoExample Title="Binding" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
167+
<DemoExample Title="Binding" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
125168
<div>You can bind values ​​with Accordion.</div><br />
126169
<BitToggle @bind-Value="AccordionToggleIsEnabled" OnText="Enabled" OffText="Disabled" />
127170
<br />
@@ -141,7 +184,7 @@
141184
</BitAccordion>
142185
</DemoExample>
143186

144-
<DemoExample Title="Customization" RazorCode="@example7RazorCode" Id="example7">
187+
<DemoExample Title="Customization" RazorCode="@example9RazorCode" Id="example9">
145188
<div>This Accordion header is customized.</div><br />
146189
<BitAccordion>
147190
<HeaderTemplate Context="isExpanded">
@@ -181,7 +224,7 @@
181224
</BitAccordion>
182225
</DemoExample>
183226

184-
<DemoExample Title="RTL" RazorCode="@example8RazorCode" Id="example8">
227+
<DemoExample Title="RTL" RazorCode="@example10RazorCode" Id="example10">
185228
<div>Use BitAccordion in right-to-left (RTL).</div><br />
186229
<BitAccordion Dir="BitDir.Rtl"
187230
Title="تنظیمات"

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Surfaces/Accordion/BitAccordionDemo.razor.cs‎

Lines changed: 110 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,27 @@
1-
namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Surfaces.Accordion;
1+
namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Surfaces.Accordion;
22

33
public partial class BitAccordionDemo
44
{
55
private readonly List<ComponentParameter> componentParameters =
66
[
7+
new()
8+
{
9+
Name = "Background",
10+
Type = "BitColorKind?",
11+
DefaultValue = "null",
12+
Description = "The color kind of the background of the accordion.",
13+
LinkType = LinkType.Link,
14+
Href = "#color-kind-enum",
15+
},
16+
new()
17+
{
18+
Name = "Border",
19+
Type = "BitColorKind?",
20+
DefaultValue = "null",
21+
Description = "The color kind of the border of the accordion.",
22+
LinkType = LinkType.Link,
23+
Href = "#color-kind-enum",
24+
},
725
new()
826
{
927
Name = "Body",
@@ -92,6 +110,43 @@ public partial class BitAccordionDemo
92110
}
93111
];
94112

113+
private readonly List<ComponentSubEnum> componentSubEnums =
114+
[
115+
new()
116+
{
117+
Id = "color-kind-enum",
118+
Name = "BitColorKind",
119+
Description = "Defines the color kinds available in the bit BlazorUI.",
120+
Items =
121+
[
122+
new()
123+
{
124+
Name = "Primary",
125+
Description = "The primary color kind.",
126+
Value = "0",
127+
},
128+
new()
129+
{
130+
Name = "Secondary",
131+
Description = "The secondary color kind.",
132+
Value = "1",
133+
},
134+
new()
135+
{
136+
Name = "Tertiary",
137+
Description = "The tertiary color kind.",
138+
Value = "2",
139+
},
140+
new()
141+
{
142+
Name = "Transparent",
143+
Description = "The transparent color kind.",
144+
Value = "3",
145+
},
146+
]
147+
}
148+
];
149+
95150
private readonly List<ComponentSubClass> componentSubClasses =
96151
[
97152
new()
@@ -169,6 +224,9 @@ public partial class BitAccordionDemo
169224

170225

171226

227+
private BitColorKind backgroundColorKind = BitColorKind.Primary;
228+
private BitColorKind borderColorKind = BitColorKind.Primary;
229+
172230
private byte controlledAccordionExpandedItem = 1;
173231

174232
private bool AccordionToggleIsEnabled;
@@ -199,6 +257,50 @@ These placeholder words symbolize the beginning—a moment of possibility where
199257
</BitAccordion>";
200258

201259
private readonly string example3RazorCode = @"
260+
<BitChoiceGroup @bind-Value=""backgroundColorKind"" Horizontal
261+
TItem=""BitChoiceGroupOption<BitColorKind>"" TValue=""BitColorKind"">
262+
<BitChoiceGroupOption Text=""Primary"" Value=""BitColorKind.Primary"" />
263+
<BitChoiceGroupOption Text=""Secondary"" Value=""BitColorKind.Secondary"" />
264+
<BitChoiceGroupOption Text=""Tertiary"" Value=""BitColorKind.Tertiary"" />
265+
<BitChoiceGroupOption Text=""Transparent"" Value=""BitColorKind.Transparent"" />
266+
</BitChoiceGroup>
267+
268+
<div style=""padding:2rem;background:gray"">
269+
<BitAccordion Title=""Accordion"" Background=""backgroundColorKind"">
270+
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
271+
These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
272+
Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
273+
inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
274+
spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
275+
in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
276+
are boundless. This space is yours to craft, yours to shape, yours to bring to life.
277+
</BitAccordion>
278+
</div>";
279+
private readonly string example3CsharpCode = @"
280+
private BitColorKind backgroundColorKind = BitColorKind.Primary;";
281+
282+
private readonly string example4RazorCode = @"
283+
<BitChoiceGroup @bind-Value=""borderColorKind"" Horizontal
284+
TItem=""BitChoiceGroupOption<BitColorKind>"" TValue=""BitColorKind"">
285+
<BitChoiceGroupOption Text=""Primary"" Value=""BitColorKind.Primary"" />
286+
<BitChoiceGroupOption Text=""Secondary"" Value=""BitColorKind.Secondary"" />
287+
<BitChoiceGroupOption Text=""Tertiary"" Value=""BitColorKind.Tertiary"" />
288+
<BitChoiceGroupOption Text=""Transparent"" Value=""BitColorKind.Transparent"" />
289+
</BitChoiceGroup>
290+
291+
<BitAccordion Title=""Accordion"" Border=""borderColorKind"">
292+
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
293+
These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
294+
Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and
295+
inspirations will be built. Soon, these lines will transform into narratives that provoke thought,
296+
spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty
297+
in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
298+
are boundless. This space is yours to craft, yours to shape, yours to bring to life.
299+
</BitAccordion>";
300+
private readonly string example4CsharpCode = @"
301+
private BitColorKind borderColorKind = BitColorKind.Primary;";
302+
303+
private readonly string example5RazorCode = @"
202304
<BitAccordion Title=""Accordion 1"">
203305
Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams.
204306
Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment
@@ -228,7 +330,7 @@ each word has the power to transform into something extraordinary. Here lies the
228330
begins here, in this quiet moment where everything is possible.
229331
</BitAccordion>";
230332

231-
private readonly string example4RazorCode = @"
333+
private readonly string example6RazorCode = @"
232334
<BitAccordion Title=""General settings"" Description=""The general settings of the application"">
233335
Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams.
234336
These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape.
@@ -239,7 +341,7 @@ These placeholder words symbolize the beginning—a moment of possibility where
239341
are boundless. This space is yours to craft, yours to shape, yours to bring to life.
240342
</BitAccordion>";
241343

242-
private readonly string example5RazorCode = @"
344+
private readonly string example7RazorCode = @"
243345
<BitAccordion Title=""General settings""
244346
Description=""I am an accordion""
245347
OnClick=""() => controlledAccordionExpandedItem = 1""
@@ -277,10 +379,10 @@ each word has the power to transform into something extraordinary. Here lies the
277379
idea that sparks change, these lines are yours to fill, to shape, and to make uniquely yours. The journey
278380
begins here, in this quiet moment where everything is possible.
279381
</BitAccordion>";
280-
private readonly string example5CsharpCode = @"
382+
private readonly string example7CsharpCode = @"
281383
private byte controlledAccordionExpandedItem = 1;";
282384

283-
private readonly string example6RazorCode = @"
385+
private readonly string example8RazorCode = @"
284386
<BitToggle @bind-Value=""AccordionToggleIsEnabled"" OnText=""Enabled"" OffText=""Disabled"" />
285387
<BitToggle @bind-Value=""AccordionToggleIsExpanded"" OnText=""Expanded"" OffText=""Collapsed"" />
286388
@@ -296,11 +398,11 @@ These placeholder words symbolize the beginning—a moment of possibility where
296398
in potential the quiet magic of beginnings, where everything is still to come, and the possibilities
297399
are boundless. This space is yours to craft, yours to shape, yours to bring to life.
298400
</BitAccordion>";
299-
private readonly string example6CsharpCode = @"
401+
private readonly string example8CsharpCode = @"
300402
private bool AccordionToggleIsEnabled;
301403
private bool AccordionToggleIsExpanded;";
302404

303-
private readonly string example7RazorCode = @"
405+
private readonly string example9RazorCode = @"
304406
<style>
305407
.custom-header {
306408
gap: 1rem;
@@ -355,7 +457,7 @@ These placeholder words symbolize the beginning—a moment of possibility where
355457
</BitCarousel>
356458
</BitAccordion>";
357459

358-
private readonly string example8RazorCode = @"
460+
private readonly string example10RazorCode = @"
359461
<BitAccordion Dir=""BitDir.Rtl""
360462
Title=""تنظیمات""
361463
Description=""من یک آکاردئون هستم!"">

0 commit comments

Comments
 (0)