Skip to content

Commit f131c6f

Browse files
msynkmsynk
authored
feat(blazorui): rename ReversedIcon to IconPosition in BitActionButton #11783 (#11784)
1 parent ba95b82 commit f131c6f

File tree

6 files changed

+105
-42
lines changed

6 files changed

+105
-42
lines changed

‎src/BlazorUI/Bit.BlazorUI/Components/BitIconPosition.cs‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
namespace Bit.BlazorUI;
2+
3+
/// <summary>
4+
/// Describes the placement of an icon relative to other content.
5+
/// </summary>
6+
public enum BitIconPosition
7+
{
8+
/// <summary>
9+
/// Icon renders before the content (default).
10+
/// </summary>
11+
Start,
12+
13+
/// <summary>
14+
/// Icon renders after the content.
15+
/// </summary>
16+
End
17+
}

‎src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.razor.cs‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,12 @@ public partial class BitActionButton : BitComponentBase
8282
/// </summary>
8383
[Parameter] public bool IconOnly { get; set; }
8484

85+
/// <summary>
86+
/// Determines where the icon is rendered relative to the content.
87+
/// </summary>
88+
[Parameter, ResetClassBuilder]
89+
public BitIconPosition? IconPosition { get; set; }
90+
8591
/// <summary>
8692
/// Raised when the action button is clicked (only when <see cref="BitComponentBase.IsEnabled"/> is true); receives <see cref="MouseEventArgs"/>.
8793
/// </summary>
@@ -92,12 +98,6 @@ public partial class BitActionButton : BitComponentBase
9298
/// </summary>
9399
[Parameter] public BitActionButtonClassStyles? Styles { get; set; }
94100

95-
/// <summary>
96-
/// Swaps the order of the icon and content so the icon appears after the text.
97-
/// </summary>
98-
[Parameter, ResetClassBuilder]
99-
public bool ReversedIcon { get; set; }
100-
101101
/// <summary>
102102
/// Sets the <c>rel</c> attribute for link-rendered buttons when <see cref="Href"/> is a non-anchor URL; ignored for empty or hash-only hrefs.
103103
/// The <c>rel</c> attribute specifies the relationship between the current document and the linked document.
@@ -162,7 +162,7 @@ protected override void RegisterCssClasses()
162162
_ => "bit-acb-md"
163163
});
164164

165-
ClassBuilder.Register(() => ReversedIcon ? "bit-acb-rvi" : string.Empty);
165+
ClassBuilder.Register(() => IconPosition is BitIconPosition.End ? "bit-acb-eni" : string.Empty);
166166
}
167167

168168
protected override void RegisterCssStyles()

‎src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@
5151
display: flex;
5252
}
5353

54-
.bit-acb-rvi {
54+
.bit-acb-eni {
5555
flex-direction: row-reverse;
5656
}
5757

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor‎

Lines changed: 28 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
Create account
2020
</BitActionButton>
2121
<br />
22-
<BitActionButton ReversedIcon IconName="@BitIconName.AddFriend">
23-
Reversed Icon
22+
<BitActionButton IconPosition="BitIconPosition.End" IconName="@BitIconName.AddFriend">
23+
End Icon
2424
</BitActionButton>
2525
<br />
2626
<BitActionButton IconName="@BitIconName.AddFriend" IsEnabled="false">
@@ -39,7 +39,21 @@
3939
</BitActionButton>
4040
</DemoExample>
4141

42-
<DemoExample Title="Href" RazorCode="@example2RazorCode" Id="example2">
42+
<DemoExample Title="IconPosition" RazorCode="@example2RazorCode" Id="example2">
43+
<div>Pick where the icon sits relative to the content: leave it at the start (default) or move it to the end without changing your content order.</div>
44+
<br />
45+
<div class="example-content">
46+
<BitActionButton IconPosition="BitIconPosition.Start" IconName="@BitIconName.AddFriend">
47+
Start (default)
48+
</BitActionButton>
49+
50+
<BitActionButton IconPosition="BitIconPosition.End" IconName="@BitIconName.AddFriend">
51+
End
52+
</BitActionButton>
53+
</div>
54+
</DemoExample>
55+
56+
<DemoExample Title="Href" RazorCode="@example3RazorCode" Id="example3">
4357
<div>Turn ActionButton into a link and choose whether it opens in the current tab or a new one.</div>
4458
<br />
4559
<div class="example-content">
@@ -53,7 +67,7 @@
5367
</div>
5468
</DemoExample>
5569

56-
<DemoExample Title="Rel" RazorCode="@example3RazorCode" Id="example3">
70+
<DemoExample Title="Rel" RazorCode="@example4RazorCode" Id="example4">
5771
<div>Attach rel attribute values (e.g., nofollow, noreferrer) when using ActionButton as an external link.</div>
5872
<br />
5973
<div class="example-content">
@@ -67,7 +81,7 @@
6781
</div>
6882
</DemoExample>
6983

70-
<DemoExample Title="Template" RazorCode="@example4RazorCode" Id="example4">
84+
<DemoExample Title="Template" RazorCode="@example5RazorCode" Id="example5">
7185
<div>Drop richer content inside ActionButton with a custom template (text plus spinner in this example).</div><br />
7286
<div class="example-content">
7387
<BitActionButton IconName="@BitIconName.AddFriend">
@@ -79,7 +93,7 @@
7993
</div>
8094
</DemoExample>
8195

82-
<DemoExample Title="ButtonType" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
96+
<DemoExample Title="ButtonType" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
8397
<div>See submit/reset/button types in action inside a validated form.</div>
8498
<br />
8599
<div class="form-container">
@@ -115,19 +129,19 @@
115129
</div>
116130
</DemoExample>
117131

118-
<DemoExample Title="FullWidth" RazorCode="@example6RazorCode" Id="example6">
119-
<div>Stretch buttons or align content by combining FullWidth and ReversedIcon.</div>
132+
<DemoExample Title="FullWidth" RazorCode="@example7RazorCode" Id="example7">
133+
<div>Stretch buttons or align content by combining FullWidth and an end-positioned icon.</div>
120134
<br />
121135
<BitActionButton FullWidth IconName="@BitIconName.NavigationFlipper">
122136
FullWidth
123137
</BitActionButton>
124138
<br />
125-
<BitActionButton FullWidth ReversedIcon IconName="@BitIconName.Forward">
126-
FullWidth with reversed icon
139+
<BitActionButton FullWidth IconPosition="BitIconPosition.End" IconName="@BitIconName.Forward">
140+
FullWidth with end icon
127141
</BitActionButton>
128142
</DemoExample>
129143

130-
<DemoExample Title="Color" RazorCode="@example7RazorCode" Id="example7">
144+
<DemoExample Title="Color" RazorCode="@example8RazorCode" Id="example8">
131145
<div>Preview the predefined colors of the BitActionButton for icon and text, from primary through warning/error, and the background/foreground/border sets.</div>
132146
<br />
133147
<div>
@@ -288,7 +302,7 @@
288302
</div>
289303
</DemoExample>
290304

291-
<DemoExample Title="Size" RazorCode="@example8RazorCode" Id="example8">
305+
<DemoExample Title="Size" RazorCode="@example9RazorCode" Id="example9">
292306
<div>Compare the Small, Medium, and Large presets to gauge typography and padding differences.</div>
293307
<br />
294308
<div class="example-content">
@@ -304,7 +318,7 @@
304318
</div>
305319
</DemoExample>
306320

307-
<DemoExample Title="Style & Class" RazorCode="@example9RazorCode" Id="example9">
321+
<DemoExample Title="Style & Class" RazorCode="@example10RazorCode" Id="example10">
308322
<div>Override look-and-feel with inline styles or custom CSS classes applied to the root, icon, and content.</div>
309323
<br />
310324
<div class="example-content column">
@@ -324,7 +338,7 @@
324338
</div>
325339
</DemoExample>
326340

327-
<DemoExample Title="RTL" RazorCode="@example10RazorCode" Id="example10">
341+
<DemoExample Title="RTL" RazorCode="@example11RazorCode" Id="example11">
328342
<div>View ActionButton inside a right-to-left layout, respecting RTL direction and icon/text ordering.</div>
329343
<br />
330344
<div dir="rtl">

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.cs‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,15 @@ public partial class BitActionButtonDemo
9797
Description = "Removes the container of the text and only renders the icon.",
9898
},
9999
new()
100+
{
101+
Name = "IconPosition",
102+
Type = "BitIconPosition?",
103+
DefaultValue = "null",
104+
Description = "Sets whether the icon renders before or after the content.",
105+
LinkType = LinkType.Link,
106+
Href = "#icon-position-enum",
107+
},
108+
new()
100109
{
101110
Name = "OnClick",
102111
Type = "EventCallback<MouseEventArgs>",
@@ -112,13 +121,6 @@ public partial class BitActionButtonDemo
112121
Href = "#class-styles",
113122
},
114123
new()
115-
{
116-
Name = "ReversedIcon",
117-
Type = "bool",
118-
DefaultValue = "false",
119-
Description = "Swaps the order of the icon and content so the icon appears after the text.",
120-
},
121-
new()
122124
{
123125
Name = "Rel",
124126
Type = "BitLinkRel?",
@@ -354,6 +356,27 @@ public partial class BitActionButtonDemo
354356
]
355357
},
356358
new()
359+
{
360+
Id = "icon-position-enum",
361+
Name = "BitIconPosition",
362+
Description = "Describes the placement of an icon relative to other content.",
363+
Items =
364+
[
365+
new()
366+
{
367+
Name = "Start",
368+
Description = "Icon renders before the content (default).",
369+
Value = "0",
370+
},
371+
new()
372+
{
373+
Name = "End",
374+
Description = "Icon renders after the content.",
375+
Value = "1",
376+
}
377+
]
378+
},
379+
new()
357380
{
358381
Id = "button-rel",
359382
Name = "BitLinkRel",

‎src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cs‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ public partial class BitActionButtonDemo
77
Create account
88
</BitActionButton>
99
10-
<BitActionButton ReversedIcon IconName=""@BitIconName.AddFriend"">
11-
Reversed Icon
10+
<BitActionButton IconPosition=""BitIconPosition.End"" IconName=""@BitIconName.AddFriend"">
11+
End Icon
1212
</BitActionButton>
1313
1414
<BitActionButton IconName=""@BitIconName.AddFriend"" IsEnabled=""false"">
@@ -27,6 +27,15 @@ No Icon
2727
</BitActionButton>";
2828

2929
private readonly string example2RazorCode = @"
30+
<BitActionButton IconPosition=""BitIconPosition.Start"" IconName=""@BitIconName.AddFriend"">
31+
Start (default)
32+
</BitActionButton>
33+
34+
<BitActionButton IconPosition=""BitIconPosition.End"" IconName=""@BitIconName.AddFriend"">
35+
End
36+
</BitActionButton>";
37+
38+
private readonly string example3RazorCode = @"
3039
<BitActionButton IconName=""@BitIconName.Globe"" Href=""https://bitplatform.dev"" Target=""_blank"">
3140
Open bitplatform.dev in a new tab
3241
</BitActionButton>
@@ -35,7 +44,7 @@ No Icon
3544
Go to bitplatform GitHub
3645
</BitActionButton>";
3746

38-
private readonly string example3RazorCode = @"
47+
private readonly string example4RazorCode = @"
3948
<BitActionButton Rel=""BitLinkRel.NoFollow"" Href=""https://bitplatform.dev"" Target=""_blank"" IconName=""@BitIconName.Globe"">
4049
Open bitplatform.dev with a rel attribute (nofollow)
4150
</BitActionButton>
@@ -44,15 +53,15 @@ Open bitplatform.dev with a rel attribute (nofollow)
4453
Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
4554
</BitActionButton>";
4655

47-
private readonly string example4RazorCode = @"
56+
private readonly string example5RazorCode = @"
4857
<BitActionButton IconName=""@BitIconName.AddFriend"">
4958
<div style=""display:flex;gap:0.5rem;"">
5059
<b>This is a custom template</b>
5160
<BitSpinnerLoading CustomSize=""20"" />
5261
</div>
5362
</BitActionButton>";
5463

55-
private readonly string example5RazorCode = @"
64+
private readonly string example6RazorCode = @"
5665
<EditForm Model=""validationButtonModel"" OnValidSubmit=""HandleValidSubmit"">
5766
<DataAnnotationsValidator />
5867
@@ -75,7 +84,7 @@ Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
7584
</BitActionButton>
7685
</div>
7786
</EditForm>";
78-
private readonly string example5CsharpCode = @"
87+
private readonly string example6CsharpCode = @"
7988
public class ButtonValidationModel
8089
{
8190
[Required]
@@ -95,16 +104,16 @@ private async Task HandleValidSubmit()
95104
StateHasChanged();
96105
}";
97106

98-
private readonly string example6RazorCode = @"
107+
private readonly string example7RazorCode = @"
99108
<BitActionButton FullWidth IconName=""@BitIconName.NavigationFlipper"">
100109
FullWidth
101110
</BitActionButton>
102111
103-
<BitActionButton FullWidth ReversedIcon IconName=""@BitIconName.Forward"">
104-
FullWidth with reversed icon
112+
<BitActionButton FullWidth IconPosition=""BitIconPosition.End"" IconName=""@BitIconName.Forward"">
113+
FullWidth with end icon
105114
</BitActionButton>";
106115

107-
private readonly string example7RazorCode = @"
116+
private readonly string example8RazorCode = @"
108117
<BitActionButton Color=""BitColor.Primary"" IconName=""@BitIconName.ColorSolid"">
109118
Primary
110119
</BitActionButton>
@@ -224,7 +233,7 @@ FullWidth with reversed icon
224233
TertiaryBorder
225234
</BitActionButton>";
226235

227-
private readonly string example8RazorCode = @"
236+
private readonly string example9RazorCode = @"
228237
<BitActionButton Size=""BitSize.Small"" IconName=""@BitIconName.FontSize"">
229238
Small
230239
</BitActionButton>
@@ -237,7 +246,7 @@ FullWidth with reversed icon
237246
Large
238247
</BitActionButton>";
239248

240-
private readonly string example9RazorCode = @"
249+
private readonly string example10RazorCode = @"
241250
<style>
242251
.custom-icon {
243252
color: hotpink;
@@ -282,7 +291,7 @@ Action Button Styles
282291
Action Button Classes (Hover me)
283292
</BitActionButton>";
284293

285-
private readonly string example10RazorCode = @"
294+
private readonly string example11RazorCode = @"
286295
<BitActionButton Dir=""BitDir.Rtl"" IconName=""@BitIconName.AddFriend"">
287296
ساخت حساب
288297
</BitActionButton>";

0 commit comments

Comments
 (0)