Rename ReversedIcon to IconPosition in BitActionButton (#11783)

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

@@ -0,0 +1,17 @@
+namespace Bit.BlazorUI;
+
+/// <summary>
+/// Describes the placement of an icon relative to other content.
+/// </summary>
+public enum BitIconPosition
+{
+    /// <summary>
+    /// Icon renders before the content (default).
+    /// </summary>
+    Start,
+
+    /// <summary>
+    /// Icon renders after the content.
+    /// </summary>
+    End
+}

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

@@ -82,6 +82,12 @@ public partial class BitActionButton : BitComponentBase
     /// </summary>
     [Parameter] public bool IconOnly { get; set; }
 
+    /// <summary>
+    /// Determines where the icon is rendered relative to the content.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public BitIconPosition? IconPosition { get; set; }
+
     /// <summary>
     /// Raised when the action button is clicked (only when <see cref="BitComponentBase.IsEnabled"/> is true); receives <see cref="MouseEventArgs"/>.
     /// </summary>
@@ -92,12 +98,6 @@ public partial class BitActionButton : BitComponentBase
     /// </summary>
     [Parameter] public BitActionButtonClassStyles? Styles { get; set; }
 
-    /// <summary>
-    /// Swaps the order of the icon and content so the icon appears after the text.
-    /// </summary>
-    [Parameter, ResetClassBuilder]
-    public bool ReversedIcon { get; set; }
-
     /// <summary>
     /// 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.
     /// The <c>rel</c> attribute specifies the relationship between the current document and the linked document.
@@ -162,7 +162,7 @@ protected override void RegisterCssClasses()
             _ => "bit-acb-md"
         });
 
-        ClassBuilder.Register(() => ReversedIcon ? "bit-acb-rvi" : string.Empty);
+        ClassBuilder.Register(() => IconPosition is BitIconPosition.End ? "bit-acb-eni" : string.Empty);
     }
 
     protected override void RegisterCssStyles()

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

@@ -51,7 +51,7 @@
     display: flex;
 }
 
-.bit-acb-rvi {
+.bit-acb-eni {
     flex-direction: row-reverse;
 }
 

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

@@ -19,8 +19,8 @@
             Create account
         </BitActionButton>
         <br />
-        <BitActionButton ReversedIcon IconName="@BitIconName.AddFriend">
-            Reversed Icon
+        <BitActionButton IconPosition="BitIconPosition.End" IconName="@BitIconName.AddFriend">
+            End Icon
         </BitActionButton>
         <br />
         <BitActionButton IconName="@BitIconName.AddFriend" IsEnabled="false">
@@ -39,7 +39,21 @@
         </BitActionButton>
     </DemoExample>
 
-    <DemoExample Title="Href" RazorCode="@example2RazorCode" Id="example2">
+    <DemoExample Title="IconPosition" RazorCode="@example2RazorCode" Id="example2">
+        <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>
+        <br />
+        <div class="example-content">
+            <BitActionButton IconPosition="BitIconPosition.Start" IconName="@BitIconName.AddFriend">
+                Start (default)
+            </BitActionButton>
+
+            <BitActionButton IconPosition="BitIconPosition.End" IconName="@BitIconName.AddFriend">
+                End
+            </BitActionButton>
+        </div>
+    </DemoExample>
+
+    <DemoExample Title="Href" RazorCode="@example3RazorCode" Id="example3">
         <div>Turn ActionButton into a link and choose whether it opens in the current tab or a new one.</div>
         <br />
         <div class="example-content">
@@ -53,7 +67,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Rel" RazorCode="@example3RazorCode" Id="example3">
+    <DemoExample Title="Rel" RazorCode="@example4RazorCode" Id="example4">
         <div>Attach rel attribute values (e.g., nofollow, noreferrer) when using ActionButton as an external link.</div>
         <br />
         <div class="example-content">
@@ -67,7 +81,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Template" RazorCode="@example4RazorCode" Id="example4">
+    <DemoExample Title="Template" RazorCode="@example5RazorCode" Id="example5">
         <div>Drop richer content inside ActionButton with a custom template (text plus spinner in this example).</div><br />
         <div class="example-content">
             <BitActionButton IconName="@BitIconName.AddFriend">
@@ -79,7 +93,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="ButtonType" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
+    <DemoExample Title="ButtonType" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
         <div>See submit/reset/button types in action inside a validated form.</div>
         <br />
         <div class="form-container">
@@ -115,19 +129,19 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="FullWidth" RazorCode="@example6RazorCode" Id="example6">
-        <div>Stretch buttons or align content by combining FullWidth and ReversedIcon.</div>
+    <DemoExample Title="FullWidth" RazorCode="@example7RazorCode" Id="example7">
+        <div>Stretch buttons or align content by combining FullWidth and an end-positioned icon.</div>
         <br />
         <BitActionButton FullWidth IconName="@BitIconName.NavigationFlipper">
             FullWidth
         </BitActionButton>
         <br />
-        <BitActionButton FullWidth ReversedIcon IconName="@BitIconName.Forward">
-            FullWidth with reversed icon
+        <BitActionButton FullWidth IconPosition="BitIconPosition.End" IconName="@BitIconName.Forward">
+            FullWidth with end icon
         </BitActionButton>
     </DemoExample>
 
-    <DemoExample Title="Color" RazorCode="@example7RazorCode" Id="example7">
+    <DemoExample Title="Color" RazorCode="@example8RazorCode" Id="example8">
         <div>Preview the predefined colors of the BitActionButton for icon and text, from primary through warning/error, and the background/foreground/border sets.</div>
         <br />
         <div>
@@ -288,7 +302,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Size" RazorCode="@example8RazorCode" Id="example8">
+    <DemoExample Title="Size" RazorCode="@example9RazorCode" Id="example9">
         <div>Compare the Small, Medium, and Large presets to gauge typography and padding differences.</div>
         <br />
         <div class="example-content">
@@ -304,7 +318,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="Style & Class" RazorCode="@example9RazorCode" Id="example9">
+    <DemoExample Title="Style & Class" RazorCode="@example10RazorCode" Id="example10">
         <div>Override look-and-feel with inline styles or custom CSS classes applied to the root, icon, and content.</div>
         <br />
         <div class="example-content column">
@@ -324,7 +338,7 @@
         </div>
     </DemoExample>
 
-    <DemoExample Title="RTL" RazorCode="@example10RazorCode" Id="example10">
+    <DemoExample Title="RTL" RazorCode="@example11RazorCode" Id="example11">
         <div>View ActionButton inside a right-to-left layout, respecting RTL direction and icon/text ordering.</div>
         <br />
         <div dir="rtl">

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

@@ -97,6 +97,15 @@ public partial class BitActionButtonDemo
             Description = "Removes the container of the text and only renders the icon.",
         },
         new()
+        {
+            Name = "IconPosition",
+            Type = "BitIconPosition?",
+            DefaultValue = "null",
+            Description = "Sets whether the icon renders before or after the content.",
+            LinkType = LinkType.Link,
+            Href = "#icon-position-enum",
+        },
+        new()
         {
             Name = "OnClick",
             Type = "EventCallback<MouseEventArgs>",
@@ -112,13 +121,6 @@ public partial class BitActionButtonDemo
             Href = "#class-styles",
         },
         new()
-        {
-            Name = "ReversedIcon",
-            Type = "bool",
-            DefaultValue = "false",
-            Description = "Swaps the order of the icon and content so the icon appears after the text.",
-        },
-        new()
         {
             Name = "Rel",
             Type = "BitLinkRel?",
@@ -354,6 +356,27 @@ public partial class BitActionButtonDemo
             ]
         },
         new()
+        {
+            Id = "icon-position-enum",
+            Name = "BitIconPosition",
+            Description = "Describes the placement of an icon relative to other content.",
+            Items =
+            [
+                new()
+                {
+                    Name = "Start",
+                    Description = "Icon renders before the content (default).",
+                    Value = "0",
+                },
+                new()
+                {
+                    Name = "End",
+                    Description = "Icon renders after the content.",
+                    Value = "1",
+                }
+            ]
+        },
+        new()
         {
             Id = "button-rel",
             Name = "BitLinkRel",

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

@@ -7,8 +7,8 @@ public partial class BitActionButtonDemo
     Create account
 </BitActionButton>
 
-<BitActionButton ReversedIcon IconName=""@BitIconName.AddFriend"">
-    Reversed Icon
+<BitActionButton IconPosition=""BitIconPosition.End"" IconName=""@BitIconName.AddFriend"">
+    End Icon
 </BitActionButton>
 
 <BitActionButton IconName=""@BitIconName.AddFriend"" IsEnabled=""false"">
@@ -27,6 +27,15 @@ No Icon
 </BitActionButton>";
 
     private readonly string example2RazorCode = @"
+<BitActionButton IconPosition=""BitIconPosition.Start"" IconName=""@BitIconName.AddFriend"">
+    Start (default)
+</BitActionButton>
+
+<BitActionButton IconPosition=""BitIconPosition.End"" IconName=""@BitIconName.AddFriend"">
+    End
+</BitActionButton>";
+
+    private readonly string example3RazorCode = @"
 <BitActionButton IconName=""@BitIconName.Globe"" Href=""https://bitplatform.dev"" Target=""_blank"">
     Open bitplatform.dev in a new tab
 </BitActionButton>
@@ -35,7 +44,7 @@ No Icon
     Go to bitplatform GitHub
 </BitActionButton>";
 
-    private readonly string example3RazorCode = @"
+    private readonly string example4RazorCode = @"
 <BitActionButton Rel=""BitLinkRel.NoFollow"" Href=""https://bitplatform.dev"" Target=""_blank"" IconName=""@BitIconName.Globe"">
     Open bitplatform.dev with a rel attribute (nofollow)
 </BitActionButton>
@@ -44,15 +53,15 @@ Open bitplatform.dev with a rel attribute (nofollow)
     Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
 </BitActionButton>";
 
-    private readonly string example4RazorCode = @"
+    private readonly string example5RazorCode = @"
 <BitActionButton IconName=""@BitIconName.AddFriend"">
     <div style=""display:flex;gap:0.5rem;"">
         <b>This is a custom template</b>
         <BitSpinnerLoading CustomSize=""20"" />
     </div>
 </BitActionButton>";
 
-    private readonly string example5RazorCode = @"
+    private readonly string example6RazorCode = @"
 <EditForm Model=""validationButtonModel"" OnValidSubmit=""HandleValidSubmit"">
     <DataAnnotationsValidator />
 
@@ -75,7 +84,7 @@ Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
         </BitActionButton>
     </div>
 </EditForm>";
-    private readonly string example5CsharpCode = @"
+    private readonly string example6CsharpCode = @"
 public class ButtonValidationModel
 {
     [Required]
@@ -95,16 +104,16 @@ private async Task HandleValidSubmit()
     StateHasChanged();
 }";
 
-    private readonly string example6RazorCode = @"
+    private readonly string example7RazorCode = @"
 <BitActionButton FullWidth IconName=""@BitIconName.NavigationFlipper"">
     FullWidth
 </BitActionButton>
 
-<BitActionButton FullWidth ReversedIcon IconName=""@BitIconName.Forward"">
-    FullWidth with reversed icon
+<BitActionButton FullWidth IconPosition=""BitIconPosition.End"" IconName=""@BitIconName.Forward"">
+    FullWidth with end icon
 </BitActionButton>";
 
-    private readonly string example7RazorCode = @"
+    private readonly string example8RazorCode = @"
 <BitActionButton Color=""BitColor.Primary"" IconName=""@BitIconName.ColorSolid"">
     Primary
 </BitActionButton>
@@ -224,7 +233,7 @@ FullWidth with reversed icon
     TertiaryBorder
 </BitActionButton>";
 
-    private readonly string example8RazorCode = @"
+    private readonly string example9RazorCode = @"
 <BitActionButton Size=""BitSize.Small"" IconName=""@BitIconName.FontSize"">
     Small
 </BitActionButton>
@@ -237,7 +246,7 @@ FullWidth with reversed icon
     Large
 </BitActionButton>";
 
-    private readonly string example9RazorCode = @"
+    private readonly string example10RazorCode = @"
 <style>
     .custom-icon {
         color: hotpink;
@@ -282,7 +291,7 @@ Action Button Styles
     Action Button Classes (Hover me)
 </BitActionButton>";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example11RazorCode = @"
 <BitActionButton Dir=""BitDir.Rtl"" IconName=""@BitIconName.AddFriend"">
     ساخت حساب
 </BitActionButton>";