feat(blazorui): add missing Rel and FullWidth parameters in BitButton #…

…9233 (#9242)

src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor

@@ -78,6 +78,7 @@ else
 {
     <a @ref="RootElement" @attributes="HtmlAttributes"
        id="@_Id"
+       rel="@_rel"
        style="@StyleBuilder.Value"
        class="@ClassBuilder.Value"
        dir="@Dir?.ToString().ToLower()"

src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs

@@ -4,6 +4,7 @@ namespace Bit.BlazorUI;
 
 public partial class BitButton : BitComponentBase
 {
+    private string? _rel;
     private int? _tabIndex;
     private BitButtonType _buttonType;
 
@@ -64,10 +65,18 @@ public partial class BitButton : BitComponentBase
     [Parameter, ResetClassBuilder]
     public bool FixedColor { get; set; }
 
+    /// <summary>
+    /// Expand the button width to 100% of the available width.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public bool FullWidth { get; set; }
+
     /// <summary>
     /// The value of the href attribute of the link rendered by the button. If provided, the component will be rendered as an anchor tag instead of button.
     /// </summary>
-    [Parameter] public string? Href { get; set; }
+    [Parameter]
+    [CallOnSet(nameof(OnSetHrefAndRel))]
+    public string? Href { get; set; }
 
     /// <summary>
     /// The name of the icon to render inside the button.
@@ -117,6 +126,13 @@ public partial class BitButton : BitComponentBase
     [Parameter, ResetClassBuilder]
     public bool ReversedIcon { get; set; }
 
+    /// <summary>
+    /// If Href provided, specifies the relationship between the current document and the linked document.
+    /// </summary>
+    [Parameter]
+    [CallOnSet(nameof(OnSetHrefAndRel))]
+    public BitAnchorRel? Rel { get; set; }
+
     /// <summary>
     /// The text of the secondary section of the button.
     /// </summary>
@@ -211,6 +227,8 @@ protected override void RegisterCssClasses()
         ClassBuilder.Register(() => ReversedIcon ? "bit-btn-rvi" : string.Empty);
 
         ClassBuilder.Register(() => FixedColor ? "bit-btn-ftc" : string.Empty);
+
+        ClassBuilder.Register(() => FullWidth ? "bit-btn-flw" : string.Empty);
     }
 
     protected override void RegisterCssStyles()
@@ -255,4 +273,15 @@ private async Task HandleOnClick(MouseEventArgs e)
 
         await AssignIsLoading(false);
     }
+
+    private void OnSetHrefAndRel()
+    {
+        if (Rel.HasValue is false || Href.HasNoValue() || Href!.StartsWith('#'))
+        {
+            _rel = null;
+            return;
+        }
+
+        _rel = string.Join(" ", Enum.GetValues(typeof(BitAnchorRel)).Cast<BitAnchorRel>().Where(r => Rel.Value.HasFlag(r)).Select(r => r.ToString().ToLower()));
+    }
 }

src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.scss

@@ -155,6 +155,9 @@
     color: var(--bit-btn-clr-txt);
 }
 
+.bit-btn-flw {
+    width: 100%;
+}
 
 .bit-btn-pri {
     --bit-btn-clr: #{$clr-pri};

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

@@ -193,7 +193,23 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Button Type" RazorCode="@example8RazorCode" CsharpCode="@example8CsharpCode" Id="example8">
+    <ComponentExampleBox Title="Rel" RazorCode="@example8RazorCode" Id="example8">
+        <ExamplePreview>
+            <div>Use BitButton as a hyperlink to external URLs, with a rel attribute.</div>
+            <br />
+            <div class="example-content">
+                <BitButton Rel="BitAnchorRel.NoFollow" Href="https://bitplatform.dev" Target="_blank" IconName="@BitIconName.Globe" Variant="BitVariant.Outline">
+                    Open bitplatform.dev with a rel attribute (nofollow)
+                </BitButton>
+
+                <BitButton Rel="BitAnchorRel.NoFollow | BitAnchorRel.NoReferrer" Href="https://bitplatform.dev" Target="_blank" IconName="@BitIconName.Globe" Variant="BitVariant.Outline">
+                    Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
+                </BitButton>
+            </div>
+        </ExamplePreview>
+    </ComponentExampleBox>
+
+    <ComponentExampleBox Title="Button Type" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
         <ExamplePreview>
             <div>BitButton supports three different types, 'Submit' for sending form data, 'Reset' to clear form inputs, and 'Button' to provide flexibility for different interaction purposes.</div>
             <br />
@@ -225,7 +241,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Templates" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
+    <ComponentExampleBox Title="Templates" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
         <ExamplePreview>
             <div>Here are some examples of customizing the button content.</div>
             <br />
@@ -275,7 +291,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Events" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
+    <ComponentExampleBox Title="Events" RazorCode="@example11RazorCode" CsharpCode="@example11CsharpCode" Id="example11">
         <ExamplePreview>
             <div>
                 Managing button click event (OnClick).
@@ -287,7 +303,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Size" RazorCode="@example11RazorCode" Id="example11">
+    <ComponentExampleBox Title="Size" RazorCode="@example12RazorCode" Id="example12">
         <ExamplePreview>
             <div>Varying sizes for buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.</div>
             <br />
@@ -329,7 +345,17 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Color" RazorCode="@example12RazorCode" Id="example12">
+    <ComponentExampleBox Title="FullWidth" RazorCode="@example13RazorCode" Id="example13">
+        <ExamplePreview>
+            <div>Setting the FullWidth makes the button occupy 100% of its container's width.</div>
+            <br />
+            <div>
+                <BitButton FullWidth IconName="@BitIconName.Emoji2" Variant="BitVariant.Fill">Full Width Button</BitButton>
+            </div>
+        </ExamplePreview>
+    </ComponentExampleBox>
+
+    <ComponentExampleBox Title="Color" RazorCode="@example14RazorCode" Id="example14">
         <ExamplePreview>
             <div>Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.</div>
             <br />
@@ -443,7 +469,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Style & Class" RazorCode="@example13RazorCode" CsharpCode="@example13CsharpCode" Id="example13">
+    <ComponentExampleBox Title="Style & Class" RazorCode="@example15RazorCode" CsharpCode="@example15CsharpCode" Id="example15">
         <ExamplePreview>
             <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
             <br /><br />
@@ -486,7 +512,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="RTL" RazorCode="@example14RazorCode" Id="example14">
+    <ComponentExampleBox Title="RTL" RazorCode="@example16RazorCode" Id="example16">
         <ExamplePreview>
             <div>Use BitButton in right-to-left (RTL).</div>
             <br />

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

@@ -74,6 +74,13 @@ public partial class BitButtonDemo
             Description = "Preserves the foreground color of the button through hover and focus.",
         },
         new()
+        {
+            Name = "FullWidth",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Expand the button width to 100% of the available width.",
+        },
+        new()
         {
             Name = "Href",
             Type = "string?",
@@ -146,6 +153,15 @@ public partial class BitButtonDemo
             Description = "Reverses the positions of the icon and the main content of the button.",
         },
         new()
+        {
+            Name = "Rel",
+            Type = "BitAnchorRel?",
+            DefaultValue = "null",
+            Description = "If Href provided, specifies the relationship between the current document and the linked document.",
+            LinkType = LinkType.Link,
+            Href = "#button-rel",
+        },
+        new()
         {
             Name = "SecondaryText",
             Type = "string?",
@@ -496,6 +512,93 @@ public partial class BitButtonDemo
                     Value="3",
                 },
             ]
+        },
+        new()
+        {
+            Id = "button-rel",
+            Name = "BitAnchorRel",
+            Description = "",
+            Items =
+            [
+                new()
+                {
+                    Name = "Alternate",
+                    Value = "1",
+                    Description = "Provides a link to an alternate representation of the document. (i.e. print page, translated or mirror)"
+                },
+                new()
+                {
+                    Name = "Author",
+                    Value = "2",
+                    Description = "Provides a link to the author of the document."
+                },
+                new()
+                {
+                    Name = "Bookmark",
+                    Value = "4",
+                    Description = "Permanent URL used for bookmarking."
+                },
+                new()
+                {
+                    Name = "External",
+                    Value = "8",
+                    Description = "Indicates that the referenced document is not part of the same site as the current document."
+                },
+                new()
+                {
+                    Name = "Help",
+                    Value = "16",
+                    Description = "Provides a link to a help document."
+                },
+                new()
+                {
+                    Name = "License",
+                    Value = "32",
+                    Description = "Provides a link to licensing information for the document."
+                },
+                new()
+                {
+                    Name = "Next",
+                    Value = "64",
+                    Description = "Provides a link to the next document in the series."
+                },
+                new()
+                {
+                    Name = "NoFollow",
+                    Value = "128",
+                    Description = @"Links to an unendorsed document, like a paid link. (""NoFollow"" is used by Google, to specify that the Google search spider should not follow that link)"
+                },
+                new()
+                {
+                    Name = "NoOpener",
+                    Value = "256",
+                    Description = "Requires that any browsing context created by following the hyperlink must not have an opener browsing context."
+                },
+                new()
+                {
+                    Name = "NoReferrer",
+                    Value = "512",
+                    Description = "Makes the referrer unknown. No referrer header will be included when the user clicks the hyperlink."
+                },
+                new()
+                {
+                    Name = "Prev",
+                    Value = "1024",
+                    Description = "The previous document in a selection."
+                },
+                new()
+                {
+                    Name = "Search",
+                    Value = "2048",
+                    Description = "Links to a search tool for the document."
+                },
+                new()
+                {
+                    Name = "Tag",
+                    Value = "4096",
+                    Description = "A tag (keyword) for the current document."
+                }
+            ]
         }
     ];
 

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

@@ -152,6 +152,15 @@ Go to bitplatform GitHub
 </BitButton>";
 
     private readonly string example8RazorCode = @"
+<BitButton Rel=""BitAnchorRel.NoFollow"" Href=""https://bitplatform.dev"" Target=""_blank"" IconName=""@BitIconName.Globe"" Variant=""BitVariant.Outline"">
+    Open bitplatform.dev with a rel attribute (nofollow)
+</BitButton>
+
+<BitButton Rel=""BitAnchorRel.NoFollow | BitAnchorRel.NoReferrer"" Href=""https://bitplatform.dev"" Target=""_blank"" IconName=""@BitIconName.Globe"" Variant=""BitVariant.Outline"">
+    Open bitplatform.dev with a rel attribute (nofollow & noreferrer)
+</BitButton>";
+
+    private readonly string example9RazorCode = @"
 <EditForm Model=""buttonValidationModel"" OnValidSubmit=""HandleValidSubmit"">
     <DataAnnotationsValidator />
     <BitTextField Label=""Required"" Required @bind-Value=""buttonValidationModel.RequiredText"" />
@@ -163,7 +172,7 @@ Go to bitplatform GitHub
         <BitButton ButtonType=""BitButtonType.Button"">Button</BitButton>
     </div>
 </EditForm>";
-    private readonly string example8CsharpCode = @"
+    private readonly string example9CsharpCode = @"
 public class ButtonValidationModel
 {
     [Required]
@@ -182,7 +191,7 @@ private async Task HandleValidSubmit()
     StateHasChanged();
 }";
 
-    private readonly string example9RazorCode = @"
+    private readonly string example10RazorCode = @"
 <style>
     .custom-content {
         gap: 0.5rem;
@@ -229,7 +238,7 @@ private async Task HandleValidSubmit()
         </div>
     </LoadingTemplate>
 </BitButton>";
-    private readonly string example9CsharpCode = @"
+    private readonly string example10CsharpCode = @"
 private bool templateIsLoading;
 
 private async Task LoadingTemplateClick()
@@ -239,12 +248,12 @@ private async Task LoadingTemplateClick()
     templateIsLoading = false;
 }";
 
-    private readonly string example10RazorCode = @"
+    private readonly string example11RazorCode = @"
 <BitButton OnClick=""() => clickCounter++"">Click me (@clickCounter)</BitButton>";
-    private readonly string example10CsharpCode = @"
+    private readonly string example11CsharpCode = @"
 private int clickCounter;";
 
-    private readonly string example11RazorCode = @"
+    private readonly string example12RazorCode = @"
 <BitButton Size=""BitSize.Small"" IconName=""@BitIconName.Emoji2"" Variant=""BitVariant.Fill"">Fill</BitButton>
 <BitButton Size=""BitSize.Small"" IconName=""@BitIconName.Emoji2"" Variant=""BitVariant.Outline"">Outline</BitButton>
 <BitButton Size=""BitSize.Small"" IconName=""@BitIconName.Emoji2"" Variant=""BitVariant.Text"">Text</BitButton>
@@ -271,7 +280,10 @@ private async Task LoadingTemplateClick()
 <BitButton Size=""BitSize.Large"" SecondaryText=""this is the secondary text"" IconName=""@BitIconName.Emoji2"" Variant=""BitVariant.Outline"">Outline</BitButton>
 <BitButton Size=""BitSize.Large"" SecondaryText=""this is the secondary text"" IconName=""@BitIconName.Emoji2"" Variant=""BitVariant.Text"">Text</BitButton>";
 
-    private readonly string example12RazorCode = @"
+    private readonly string example13RazorCode = @"
+<BitButton FullWidth IconName=""@BitIconName.Emoji2"" Variant=""BitVariant.Fill"">Full Width Button</BitButton>";
+
+    private readonly string example14RazorCode = @"
 <BitButton Color=""BitColor.Primary"">Primary</BitButton>
 <BitButton Color=""BitColor.Primary"" Variant=""BitVariant.Outline"">Primary</BitButton>
 <BitButton Color=""BitColor.Primary"" Variant=""BitVariant.Text"">Primary</BitButton>
@@ -343,7 +355,7 @@ private async Task LoadingTemplateClick()
 <BitButton Color=""BitColor.TertiaryBorder"" Variant=""BitVariant.Outline"">TertiaryBorder</BitButton>
 <BitButton Color=""BitColor.TertiaryBorder"" Variant=""BitVariant.Text"">TertiaryBorder</BitButton>";
 
-    private readonly string example13RazorCode = @"
+    private readonly string example15RazorCode = @"
 <style>
     .custom-class {
         border-radius: 1rem;
@@ -417,7 +429,7 @@ Click me
                               Spinner = ""custom-spinner"" })"">
     Click me
 </BitButton>";
-    private readonly string example13CsharpCode = @"
+    private readonly string example15CsharpCode = @"
 private bool stylesIsLoading;
 private bool classesIsLoading;
 
@@ -435,7 +447,7 @@ private async Task LoadingClassesClick()
     classesIsLoading = false;
 }";
 
-    private readonly string example14RazorCode = @"
+    private readonly string example16RazorCode = @"
 <BitButton Dir=""BitDir.Rtl"" IconName=""@BitIconName.Emoji"" Variant=""BitVariant.Fill"">
     دکمه با آیکن
 </BitButton>