Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Classes/Styles parameters in the BitMessageBox (#9637) #9638

Merged
merged 2 commits into from
Jan 9, 2025
Merged

Add Classes/Styles parameters in the BitMessageBox (#9637) #9638

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c8d7d2
Add Classes/Styles parameters in the BitMessageBox (#9637)
Cyrus-Sushiant Jan 9, 2025
057e9a2
Resolve comment
Cyrus-Sushiant Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 19 additions & 9 deletions src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,34 @@
@namespace Bit.BlazorUI

<div class="bit-msb">
<div class="bit-msb-con">
<div class="bit-msb-hdr">
<BitText Typography="BitTypography.H5" Color="BitColor.Tertiary">@Title</BitText>
<div style="@Styles?.Root" class="bit-msb @Classes?.Root">
<div style="@Styles?.Container" class="bit-msb-con @Classes?.Container">
<div style="@Styles?.Header" class="bit-msb-hdr @Classes?.Header">
<BitText Typography="BitTypography.H5"
Color="BitColor.Tertiary"
Style="@(Styles?.Title)"
Class="@(Classes?.Title)">
@Title
</BitText>

<BitSpacer />
<BitSpacer Style="@(Styles?.Spacer)" Class="@(Classes?.Spacer)" />

<BitButton OnClick="CloseModal"
IconName="ChromeClose"
Color="BitColor.Tertiary"
Variant="BitVariant.Text" />
Variant="BitVariant.Text"
Styles="@Styles?.CloseButton"
Classes="@Classes?.CloseButton" />
</div>

<div class="bit-msb-bdy">
<div style="@Styles?.Body" class="bit-msb-bdy @Classes?.Body">
@Body
</div>

<div class="bit-msb-ftr">
<BitButton OnClick="OnOkClick" Color="BitColor.Tertiary">
<div style="@Styles?.Footer" class="bit-msb-ftr @Classes?.Footer">
<BitButton OnClick="OnOkClick"
Color="BitColor.Tertiary"
Styles="@Styles?.OkButton"
Classes="@Classes?.OkButton">
@(OkText ?? "Ok")
</BitButton>
</div>
Expand Down
10 changes: 10 additions & 0 deletions src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,11 @@ public partial class BitMessageBox
/// </summary>
[Parameter] public string? Body { get; set; }

/// <summary>
/// Custom CSS classes for different parts of the message box.
/// </summary>
[Parameter] public BitMessageBoxClassStyles? Classes { get; set; }

/// <summary>
/// The text of the Ok button.
/// </summary>
Expand All @@ -19,6 +24,11 @@ public partial class BitMessageBox
/// </summary>
[Parameter] public EventCallback OnClose { get; set; }

/// <summary>
/// Custom CSS styles for different parts of the message box.
/// </summary>
[Parameter] public BitMessageBoxClassStyles? Styles { get; set; }

/// <summary>
/// The title of the message box.
/// </summary>
Expand Down
49 changes: 49 additions & 0 deletions src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxClassStyles.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
namespace Bit.BlazorUI;

public class BitMessageBoxClassStyles
{
/// <summary>
/// Custom CSS classes/styles for the root element of the BitMessageBox.
/// </summary>
public string? Root { get; set; }

/// <summary>
/// Custom CSS classes/styles for the container of the BitMessageBox.
/// </summary>
public string? Container { get; set; }

/// <summary>
/// Custom CSS classes/styles for the header of the BitMessageBox.
/// </summary>
public string? Header { get; set; }

/// <summary>
/// Custom CSS classes/styles for the title of the BitMessageBox.
/// </summary>
public string? Title { get; set; }

/// <summary>
/// Custom CSS classes/styles for the BitSpacer of the BitMessageBox.
/// </summary>
public string? Spacer { get; set; }

/// <summary>
/// Custom CSS classes/styles for the CloseButton of the BitMessageBox.
/// </summary>
public BitButtonClassStyles? CloseButton { get; set; }

/// <summary>
/// Custom CSS classes/styles for the body of the BitMessageBox.
/// </summary>
public string? Body { get; set; }

/// <summary>
/// Custom CSS classes/styles for the footer of the BitMessageBox.
/// </summary>
public string? Footer { get; set; }

/// <summary>
/// Custom CSS classes/styles for the OkButton of the BitMessageBox.
/// </summary>
public BitButtonClassStyles? OkButton { get; set; }
}
23 changes: 22 additions & 1 deletion .../Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
<ComponentDemo ComponentName="MessageBox"
ComponentDescription="BitMessageBox is a pre-implemented box for showing messages with title and body."
Notes="To use this component, you need to install the `Bit.BlazorUI.Extras` nuget package, as described in the Optional steps of the Getting started page."
ComponentParameters="componentParameters">
ComponentParameters="componentParameters"
ComponentSubClasses="componentSubClasses">
<ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
<ExamplePreview>
<BitCard Style="padding:0">
Expand Down Expand Up @@ -36,4 +37,24 @@
<BitButton OnClick="ShowMessageBoxService">Show MessageBox</BitButton>
</ExamplePreview>
</ComponentExampleBox>

<ComponentExampleBox Title="Style & Class" RazorCode="@example5RazorCode" Id="example5">
<ExamplePreview>
<div>Customize the appearance of BitActionButton using styles and CSS classes.</div>
<br />
<div>
<BitCard Style="padding:0">
<BitMessageBox Title="It's a title"
Body="It's a body."
Styles="@(new() { Root = "background: linear-gradient(180deg, #222444, transparent) #000", OkButton = new() { Root = "border-radius:1rem" } })" />
</BitCard>
<br />
<BitCard Style="padding:0">
<BitMessageBox Title="It's a title"
Body="It's a body."
Classes="@(new() { Root = "custom-msg", OkButton = new() { Root = "custom-msg-btn" } })" />
</BitCard>
</div>
</ExamplePreview>
</ComponentExampleBox>
</ComponentDemo>
139 changes: 97 additions & 42 deletions ...t.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,15 @@ public partial class BitMessageBoxDemo
DefaultValue = "null",
Description = "The body of the message box.",
},
new()
{
Name = "Classes",
Type = "BitMessageBoxClassStyles?",
DefaultValue = "null",
Description = "Custom CSS classes for different parts of the message box.",
LinkType = LinkType.Link,
Href = "#class-styles",
},
new()
{
Name = "OkText",
Expand All @@ -26,6 +35,15 @@ public partial class BitMessageBoxDemo
Description = "The event callback for closing the message box.",
},
new()
{
Name = "Styles",
Type = "BitMessageBoxClassStyles?",
DefaultValue = "null",
Description = "Custom CSS styles for different parts of the message box.",
LinkType = LinkType.Link,
Href = "#class-styles",
},
new()
{
Name = "Title",
Type = "string?",
Expand All @@ -34,6 +52,85 @@ public partial class BitMessageBoxDemo
},
];

private readonly List<ComponentSubClass> componentSubClasses =
[
new()
{
Id = "class-styles",
Title = "BitMessageBoxClassStyles",
Parameters =
[
new()
{
Name = "Root",
Type = "string?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the root element of the BitMessageBox."
},
new()
{
Name = "Container",
Type = "string?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the container of the BitMessageBox."
},
new()
{
Name = "Header",
Type = "string?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the header of the BitMessageBox."
},
new()
{
Name = "Title",
Type = "string?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the title of the BitMessageBox."
},
new()
{
Name = "Spacer",
Type = "string?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the BitSpacer of the BitMessageBox."
},
new()
{
Name = "CloseButton",
Type = "BitButtonClassStyles?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the CloseButton of the BitMessageBox.",
LinkType = LinkType.Link,
Href = "/components/button/#class-styles"
},
new()
{
Name = "Body",
Type = "string?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the body of the BitMessageBox."
},
new()
{
Name = "Footer",
Type = "string?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the footer of the BitMessageBox."
},
new()
{
Name = "OkButton",
Type = "BitButtonClassStyles?",
DefaultValue = "null",
Description = "Custom CSS classes/styles for the OkButton of the BitMessageBox.",
LinkType = LinkType.Link,
Href = "/components/button/#class-styles"
}
]
}
];


private bool isModalOpen;

Expand All @@ -55,46 +152,4 @@ private async Task ShowMessageBoxService()
{
await messageBoxService.Show("TITLE", "BODY");
}



private readonly string example1RazorCode = @"
<BitCard Style=""padding:0"">
<BitMessageBox Title=""It's a title"" Body=""It's a body."" />
</BitCard>";

private readonly string example2RazorCode = @"
<BitButton OnClick=""() => isModalOpen = true"">Show</BitButton>
<BitModal @bind-IsOpen=""isModalOpen"">
<BitMessageBox OnClose=""() => isModalOpen = false"" Title=""This is the Title"" Body=""This is the Body!"" />
</BitModal>";
private readonly string example2CsharpCode = @"
private bool isModalOpen;";

private readonly string example3RazorCode = @"
<BitButton OnClick=""ShowMessageBox"">Show MessageBox</BitButton>

<BitModalContainer />";
private readonly string example3CsharpCode = @"
[AutoInject] private BitModalService modalService { get; set; } = default!;
private async Task ShowMessageBox()
{
BitModalReference modalRef = default!;
Dictionary<string, object> parameters = new()
{
{ nameof(BitMessageBox.Title), ""This is a title"" },
{ nameof(BitMessageBox.Body), ""This is a body."" },
{ nameof(BitMessageBox.OnClose), EventCallback.Factory.Create(this, () => modalRef.Close()) }
};
modalRef = await modalService.Show<BitMessageBox>(parameters);
}";

private readonly string example4RazorCode = @"
<BitButton OnClick=""ShowMessageBoxService"">Show MessageBox</BitButton>";
private readonly string example4CsharpCode = @"
[AutoInject] private BitMessageBoxService messageBoxService { get; set; } = default!;
private async Task ShowMessageBoxService()
{
await messageBoxService.Show(""TITLE"", ""BODY"");
}";
}
79 changes: 79 additions & 0 deletions ...UI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.samples.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Extras.MessageBox;

public partial class BitMessageBoxDemo
{
private readonly string example1RazorCode = @"
<BitCard Style=""padding:0"">
<BitMessageBox Title=""It's a title"" Body=""It's a body."" />
</BitCard>";

private readonly string example2RazorCode = @"
<BitButton OnClick=""() => isModalOpen = true"">Show</BitButton>
<BitModal @bind-IsOpen=""isModalOpen"">
<BitMessageBox OnClose=""() => isModalOpen = false"" Title=""This is the Title"" Body=""This is the Body!"" />
</BitModal>";
private readonly string example2CsharpCode = @"
private bool isModalOpen;";

private readonly string example3RazorCode = @"
<BitButton OnClick=""ShowMessageBox"">Show MessageBox</BitButton>

<BitModalContainer />";
private readonly string example3CsharpCode = @"
[AutoInject] private BitModalService modalService { get; set; } = default!;
private async Task ShowMessageBox()
{
BitModalReference modalRef = default!;
Dictionary<string, object> parameters = new()
{
{ nameof(BitMessageBox.Title), ""This is a title"" },
{ nameof(BitMessageBox.Body), ""This is a body."" },
{ nameof(BitMessageBox.OnClose), EventCallback.Factory.Create(this, () => modalRef.Close()) }
};
modalRef = await modalService.Show<BitMessageBox>(parameters);
}";

private readonly string example4RazorCode = @"
<BitButton OnClick=""ShowMessageBoxService"">Show MessageBox</BitButton>";
private readonly string example4CsharpCode = @"
[AutoInject] private BitMessageBoxService messageBoxService { get; set; } = default!;
private async Task ShowMessageBoxService()
{
await messageBoxService.Show(""TITLE"", ""BODY"");
}";

private readonly string example5RazorCode = @"
<style>
.custom-msg {
background: linear-gradient(180deg, #3e0f0f, transparent) #000;
}

.custom-msg-btn {
color: #fff;
font-weight: bold;
border-radius: 1rem;
border-color: #8f0101;
transition: background-color 1s;
background: linear-gradient(90deg, #d10000, transparent) #8f0101;
}

.custom-msg-btn:hover {
color: #fff;
font-weight: bold;
border-color: #8f0101;
background-color: #8f0101;
}
</style>

<BitCard Style=""padding:0"">
<BitMessageBox Title=""It's a title""
Body=""It's a body.""
Styles=""@(new() { Root = ""background: linear-gradient(180deg, #222444, transparent) #000"", OkButton = new() { Root = ""border-radius:1rem"" } })"" />
</BitCard>

<BitCard Style=""padding:0"">
<BitMessageBox Title=""It's a title""
Body=""It's a body.""
Classes=""@(new() { Root = ""custom-msg"", OkButton = new() { Root = ""custom-msg-btn"" } })"" />
</BitCard>";
}
Loading
Loading