From 2c8d7d2c3e23da827223bc9078ecc144dbc123bc Mon Sep 17 00:00:00 2001
From: Mohammad Aminsafaei <m.aminsafaei@outlook.com>
Date: Thu, 9 Jan 2025 14:00:47 +0330
Subject: [PATCH 1/2] Add Classes/Styles parameters in the BitMessageBox
 (#9637)

---
 .../Components/MessageBox/BitMessageBox.razor |  28 ++--
 .../MessageBox/BitMessageBox.razor.cs         |  10 ++
 .../MessageBox/BitMessageBoxClassStyles.cs    |  49 ++++++
 .../Extras/MessageBox/BitMessageBoxDemo.razor |  23 ++-
 .../MessageBox/BitMessageBoxDemo.razor.cs     | 139 ++++++++++++------
 .../BitMessageBoxDemo.razor.samples.cs        |  79 ++++++++++
 .../MessageBox/BitMessageBoxDemo.razor.scss   |  21 +++
 7 files changed, 297 insertions(+), 52 deletions(-)
 create mode 100644 src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxClassStyles.cs
 create mode 100644 src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.samples.cs

diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor
index 8b739f2adc..08a038ff75 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor
@@ -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?.Content" class="bit-msb-con @Classes?.Content">
+        <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>
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor.cs
index ff27a97a4e..018cff5288 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor.cs
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor.cs
@@ -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>
@@ -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>
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxClassStyles.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxClassStyles.cs
new file mode 100644
index 0000000000..8d355632bf
--- /dev/null
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxClassStyles.cs
@@ -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 content of the BitMessageBox.
+    /// </summary>
+    public string? Content { 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; }
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor
index 407032fc8e..ce77901e39 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor
@@ -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">
@@ -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>
\ No newline at end of file
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs
index 1e03830cb5..b7e6692a1d 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs
@@ -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",
@@ -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?",
@@ -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 = "Content",
+                    Type = "string?",
+                    DefaultValue = "null",
+                    Description = "Custom CSS classes/styles for the content 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;
 
@@ -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"");
-}";
 }
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.samples.cs
new file mode 100644
index 0000000000..99d139bcd3
--- /dev/null
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.samples.cs
@@ -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>";
+}
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.scss
index e69de29bb2..aafd8697ea 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.scss
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.scss
@@ -0,0 +1,21 @@
+::deep {
+    .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;
+    }
+}

From 057e9a25114289120afe24984bdc3356a9bb55d3 Mon Sep 17 00:00:00 2001
From: Mohammad Aminsafaei <m.aminsafaei@outlook.com>
Date: Thu, 9 Jan 2025 15:17:13 +0330
Subject: [PATCH 2/2] Resolve comment

---
 .../Components/MessageBox/BitMessageBox.razor                 | 2 +-
 .../Components/MessageBox/BitMessageBoxClassStyles.cs         | 4 ++--
 .../Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs   | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor
index 08a038ff75..b36adb8b27 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBox.razor
@@ -1,7 +1,7 @@
 @namespace Bit.BlazorUI
 
 <div style="@Styles?.Root" class="bit-msb @Classes?.Root">
-    <div style="@Styles?.Content" class="bit-msb-con @Classes?.Content">
+    <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"
diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxClassStyles.cs b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxClassStyles.cs
index 8d355632bf..3e13b499e3 100644
--- a/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxClassStyles.cs
+++ b/src/BlazorUI/Bit.BlazorUI.Extras/Components/MessageBox/BitMessageBoxClassStyles.cs
@@ -8,9 +8,9 @@ public class BitMessageBoxClassStyles
     public string? Root { get; set; }
 
     /// <summary>
-    /// Custom CSS classes/styles for the content of the BitMessageBox.
+    /// Custom CSS classes/styles for the container of the BitMessageBox.
     /// </summary>
-    public string? Content { get; set; }
+    public string? Container { get; set; }
 
     /// <summary>
     /// Custom CSS classes/styles for the header of the BitMessageBox.
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs
index b7e6692a1d..fe7b10e9c4 100644
--- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs
+++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Extras/MessageBox/BitMessageBoxDemo.razor.cs
@@ -69,10 +69,10 @@ public partial class BitMessageBoxDemo
                 },
                 new()
                 {
-                    Name = "Content",
+                    Name = "Container",
                     Type = "string?",
                     DefaultValue = "null",
-                    Description = "Custom CSS classes/styles for the content of the BitMessageBox."
+                    Description = "Custom CSS classes/styles for the container of the BitMessageBox."
                 },
                 new()
                 {