From 1e9a5db9c9403a84c6bf1bb3a8db338cd25e05bc Mon Sep 17 00:00:00 2001 From: Mohammad Aminsafaei Date: Fri, 15 Nov 2024 17:38:11 +0330 Subject: [PATCH] feat(blazorui): add missing Rel and FullWidth parameters in BitButton #9233 (#9242) --- .../Buttons/BitButton/BitButton.razor | 1 + .../Buttons/BitButton/BitButton.razor.cs | 31 +++++- .../Buttons/BitButton/BitButton.scss | 3 + .../Components/Buttons/BitButtonDemo.razor | 40 +++++-- .../Components/Buttons/BitButtonDemo.razor.cs | 103 ++++++++++++++++++ .../Buttons/BitButtonDemo.razor.samples.cs | 32 ++++-- 6 files changed, 192 insertions(+), 18 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor index 8ee398dd36..1b488d8975 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor @@ -78,6 +78,7 @@ else { + /// Expand the button width to 100% of the available width. + /// + [Parameter, ResetClassBuilder] + public bool FullWidth { get; set; } + /// /// 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. /// - [Parameter] public string? Href { get; set; } + [Parameter] + [CallOnSet(nameof(OnSetHrefAndRel))] + public string? Href { get; set; } /// /// 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; } + /// + /// If Href provided, specifies the relationship between the current document and the linked document. + /// + [Parameter] + [CallOnSet(nameof(OnSetHrefAndRel))] + public BitAnchorRel? Rel { get; set; } + /// /// The text of the secondary section of the button. /// @@ -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().Where(r => Rel.Value.HasFlag(r)).Select(r => r.ToString().ToLower())); + } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.scss index 677347da00..abbf42f882 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.scss +++ b/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}; diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor index dd127e7bcb..6bb5de166e 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor @@ -193,7 +193,23 @@ - + + +
Use BitButton as a hyperlink to external URLs, with a rel attribute.
+
+
+ + Open bitplatform.dev with a rel attribute (nofollow) + + + + Open bitplatform.dev with a rel attribute (nofollow & noreferrer) + +
+ + + +
BitButton supports three different types, 'Submit' for sending form data, 'Reset' to clear form inputs, and 'Button' to provide flexibility for different interaction purposes.

@@ -225,7 +241,7 @@ - +
Here are some examples of customizing the button content.

@@ -275,7 +291,7 @@ - +
Managing button click event (OnClick). @@ -287,7 +303,7 @@ - +
Varying sizes for buttons tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.

@@ -329,7 +345,17 @@ - + + +
Setting the FullWidth makes the button occupy 100% of its container's width.
+
+
+ Full Width Button +
+ + + +
Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.

@@ -443,7 +469,7 @@ - +
Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.


@@ -486,7 +512,7 @@ - +
Use BitButton in right-to-left (RTL).

diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs index 3b8b054bd2..30c5e214bf 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.cs +++ b/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." + } + ] } ]; diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.samples.cs index 9641719c35..5fe98ae731 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/BitButtonDemo.razor.samples.cs @@ -152,6 +152,15 @@ Go to bitplatform GitHub "; private readonly string example8RazorCode = @" + + Open bitplatform.dev with a rel attribute (nofollow) + + + + Open bitplatform.dev with a rel attribute (nofollow & noreferrer) +"; + + private readonly string example9RazorCode = @" @@ -163,7 +172,7 @@ Go to bitplatform GitHub Button
"; - 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 = @"