diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 581c0e9977..72dfda5a87 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -6,7 +6,7 @@ You can contribute to bit platform with issues and PRs. Simply filing issues for We always welcome bug reports, API proposals and overall feedback. Here are a few tips on how you can make reporting your issue as effective as possible. -The bit platform codebase is consisted of multiple projects/products in a monorepo structure. Depending on the feedback you might want to file the issue with enough information to distinguish it among these projects/products. +The bit platform codebase consists of multiple projects/products in a monorepo structure. Depending on the feedback you might want to file the issue with enough information to distinguish it among these projects/products. ### Finding Existing Issues @@ -32,7 +32,7 @@ When ready to submit a bug report, please use the [Bug Report issue template](ht #### Are Minimal Reproductions Required? -In certain cases, creating a minimal reproduction might not be practical (e.g. due to nondeterministic factors, external dependencies). In such cases you would be asked to provide as much information as possible. If maintainers are unable to root cause the problem, they might still close the issue as not actionable. While not required, minimal reproductions are strongly encouraged and will significantly improve the chances of your issue being prioritized and fixed by the maintainers. +In certain cases, creating a minimal reproduction might not be practical (e.g. due to nondeterministic factors, external dependencies). In such cases you would be asked to provide as much information as possible. If maintainers are unable to root cause of the problem, they might still close the issue as not actionable. While not required, minimal reproductions are strongly encouraged and will significantly improve the chances of your issue being prioritized and fixed by the maintainers. #### How to Create a Minimal Reproduction diff --git a/README.md b/README.md index e570660c4b..4a62c1d764 100644 --- a/README.md +++ b/README.md @@ -6,14 +6,14 @@ ![Code size](https://img.shields.io/github/languages/code-size/bitfoundation/bitplatform.svg?logo=github) ![CI Status](https://github.com/bitfoundation/bitplatform/actions/workflows/bit.ci.yml/badge.svg) ![NuGet version](https://img.shields.io/nuget/v/bit.blazorui.svg?logo=nuget) -[![Nuget downloads](https://img.shields.io/badge/packages_download-3.6M-blue.svg?logo=nuget)](https://www.nuget.org/profiles/bit-foundation) +[![Nuget downloads](https://img.shields.io/badge/packages_download-3.7M-blue.svg?logo=nuget)](https://www.nuget.org/profiles/bit-foundation)
![image](https://user-images.githubusercontent.com/6169846/271820882-0d816266-ebd1-4c2b-a3b7-296b35248536.png)
-Join us and start contributing to bit platform in [hacktoberfest](https://hacktoberfest.com/). you can find the up-for-grabs issues [here](https://github.com/bitfoundation/bitplatform/labels/up%20for%20grabs). +Join us and start contributing to bit platform in [hacktoberfest](https://hacktoberfest.com/). you can find the the `good first issues` [here](https://github.com/bitfoundation/bitplatform/labels/good%20first%20issue).

diff --git a/docs/how-to-build.md b/docs/how-to-build.md index e156d481b7..f6af667588 100644 --- a/docs/how-to-build.md +++ b/docs/how-to-build.md @@ -8,7 +8,7 @@ ## Projects -bit platform consists of multiple different projects/prodcuts with the following being the most important ones: +bit platform consists of multiple different projects/products with the following being the most important ones: - [bit platform website](../src/Websites/Platform/) - [bit BlazorUI (Blazor components)](../src/BlazorUI/) @@ -34,7 +34,7 @@ Building each bit platform project requires specific steps that are explained pe
### bit platform Website -This website only requires the basic requirements and can be simply built by runnning the following command in the `Bit.Websites.Platform.Web` project folder: +This website only requires the basic requirements and can be simply built by running the following command in the `Bit.Websites.Platform.Web` project folder: ```bash dotnet build @@ -92,7 +92,7 @@ dotnet build ### bit Project Templates Like the bit BlazorUI Demo project, the project templates (located in the `src/Templates` folder) have two different projects (Web & App) with different requirements to build. -For exmaple for the `AdminPanel` porject template in the `AdminPanel/Bit.AdminPanel` folder: +For example for the `AdminPanel` project template in the `AdminPanel/Bit.AdminPanel` folder: The `Web` project just like the bit platform website only needs the basic requirements and can be simply built by running the following command in the `AdminPanel.Client.Web` project folder (`src/Client/Web`): @@ -117,4 +117,4 @@ To build the App project run the following command in the `AdminPanel.Client.App ```bash dotnet build -``` \ No newline at end of file +``` diff --git a/src/Bit.Build.props b/src/Bit.Build.props index 53d56301ac..e5bca0698e 100644 --- a/src/Bit.Build.props +++ b/src/Bit.Build.props @@ -25,7 +25,7 @@ https://github.com/bitfoundation/bitplatform https://avatars.githubusercontent.com/u/22663390 - 7.0.0 + 7.1.0 https://github.com/bitfoundation/bitplatform/releases/tag/v-$(ReleaseVersion) $(ReleaseVersion) diff --git a/src/BlazorUI/Bit.BlazorUI.Assets/Bit.BlazorUI.Assets.csproj b/src/BlazorUI/Bit.BlazorUI.Assets/Bit.BlazorUI.Assets.csproj index e28c82aab0..7a9c3a860f 100644 --- a/src/BlazorUI/Bit.BlazorUI.Assets/Bit.BlazorUI.Assets.csproj +++ b/src/BlazorUI/Bit.BlazorUI.Assets/Bit.BlazorUI.Assets.csproj @@ -25,4 +25,15 @@ + + + True + \ + + + True + \ + + + \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI.Extras/Bit.BlazorUI.Extras.csproj b/src/BlazorUI/Bit.BlazorUI.Extras/Bit.BlazorUI.Extras.csproj index 7a43e13ccc..43230e1f1d 100644 --- a/src/BlazorUI/Bit.BlazorUI.Extras/Bit.BlazorUI.Extras.csproj +++ b/src/BlazorUI/Bit.BlazorUI.Extras/Bit.BlazorUI.Extras.csproj @@ -58,4 +58,15 @@ + + + True + \ + + + True + \ + + + \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI.Icons/Bit.BlazorUI.Icons.csproj b/src/BlazorUI/Bit.BlazorUI.Icons/Bit.BlazorUI.Icons.csproj index ea9a6fab50..aa08e8cc70 100644 --- a/src/BlazorUI/Bit.BlazorUI.Icons/Bit.BlazorUI.Icons.csproj +++ b/src/BlazorUI/Bit.BlazorUI.Icons/Bit.BlazorUI.Icons.csproj @@ -25,4 +25,15 @@ + + + True + \ + + + True + \ + + + \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI.SourceGenerators/Bit.BlazorUI.SourceGenerators.csproj b/src/BlazorUI/Bit.BlazorUI.SourceGenerators/Bit.BlazorUI.SourceGenerators.csproj index d6e1dcc28f..97ee9a8ef5 100644 --- a/src/BlazorUI/Bit.BlazorUI.SourceGenerators/Bit.BlazorUI.SourceGenerators.csproj +++ b/src/BlazorUI/Bit.BlazorUI.SourceGenerators/Bit.BlazorUI.SourceGenerators.csproj @@ -11,4 +11,15 @@ + + + True + \ + + + True + \ + + + diff --git a/src/BlazorUI/Bit.BlazorUI.SourceGenerators/README.md b/src/BlazorUI/Bit.BlazorUI.SourceGenerators/README.md new file mode 100644 index 0000000000..f79a02c3fc --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.SourceGenerators/README.md @@ -0,0 +1 @@ +### bit Source Generators \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj b/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj index cdfad7a7eb..b5a924cce7 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Bit.BlazorUI.Tests.csproj @@ -7,7 +7,7 @@ - + diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Buttons/BitButtonTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Buttons/BitButtonTests.cs index 3b6d37528e..209feda1f1 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Buttons/BitButtonTests.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Buttons/BitButtonTests.cs @@ -204,4 +204,82 @@ public void BitButtonButtonStateNotOverriddenInEditContextTest() Assert.AreEqual("button", bitButton.GetAttribute("type")); } + + [DataTestMethod, + DataRow(BitButtonColor.Info), + DataRow(BitButtonColor.Success), + DataRow(BitButtonColor.Warning), + DataRow(BitButtonColor.SevereWarning), + DataRow(BitButtonColor.Error), + DataRow(null), + ] + [TestMethod] + public void BitButtonColorOfButtonTest(BitButtonColor? color) + { + var com = RenderComponent(parameters => + { + if (color.HasValue) + { + parameters.Add(p => p.Color, color.Value); + } + }); + + var bitButton = com.Find(".bit-btn"); + + var colorClassName = color switch + { + BitButtonColor.Info => "bit-btn-inf", + BitButtonColor.Success => "bit-btn-suc", + BitButtonColor.Warning => "bit-btn-wrn", + BitButtonColor.SevereWarning => "bit-btn-swr", + BitButtonColor.Error => "bit-btn-err", + _ => String.Empty + }; + + if (color.HasValue) + { + Assert.IsTrue(bitButton.ClassList.Contains(colorClassName)); + } + else + { + Assert.AreEqual(2, bitButton.ClassList.Length); + } + } + + [DataTestMethod, + DataRow(BitButtonSize.Small), + DataRow(BitButtonSize.Medium), + DataRow(BitButtonSize.Large), + DataRow(null) + ] + [TestMethod] + public void BitButtonSizeOfButtonTest(BitButtonSize? size) + { + var com = RenderComponent(parameters => + { + if (size.HasValue) + { + parameters.Add(p => p.Size, size.Value); + } + }); + + var bitButton = com.Find(".bit-btn"); + + var sizeClassName = size switch + { + BitButtonSize.Small => "bit-btn-sm", + BitButtonSize.Medium => "bit-btn-md", + BitButtonSize.Large => "bit-btn-lg", + _ => String.Empty + }; + + if (size.HasValue) + { + Assert.IsTrue(bitButton.ClassList.Contains(sizeClassName)); + } + else + { + Assert.AreEqual(2, bitButton.ClassList.Length); + } + } } diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Pickers/BitDatePickerTestModel.cs b/src/BlazorUI/Bit.BlazorUI.Tests/DatePicker/BitDatePickerTestModel.cs similarity index 80% rename from src/BlazorUI/Bit.BlazorUI.Tests/Pickers/BitDatePickerTestModel.cs rename to src/BlazorUI/Bit.BlazorUI.Tests/DatePicker/BitDatePickerTestModel.cs index b8fdce48d2..1e7b117f4c 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Pickers/BitDatePickerTestModel.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/DatePicker/BitDatePickerTestModel.cs @@ -1,7 +1,7 @@ using System; using System.ComponentModel.DataAnnotations; -namespace Bit.BlazorUI.Tests.Pickers; +namespace Bit.BlazorUI.Tests.DatePicker; public class BitDatePickerTestModel { diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Pickers/BitDatePickerTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/DatePicker/BitDatePickerTests.cs similarity index 79% rename from src/BlazorUI/Bit.BlazorUI.Tests/Pickers/BitDatePickerTests.cs rename to src/BlazorUI/Bit.BlazorUI.Tests/DatePicker/BitDatePickerTests.cs index d136648a1f..f12bb545ab 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Pickers/BitDatePickerTests.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/DatePicker/BitDatePickerTests.cs @@ -3,7 +3,7 @@ using Bunit; using Microsoft.VisualStudio.TestTools.UnitTesting; -namespace Bit.BlazorUI.Tests.Pickers; +namespace Bit.BlazorUI.Tests.DatePicker; [TestClass] public class BitDatePickerTests : BunitTestContext @@ -48,7 +48,7 @@ public void BitDatePickerShouldGiveValueToGoToToday(string goToToday) { var component = RenderComponent(parameters => { - parameters.Add(p => p.GoToToday, goToToday); + parameters.Add(p => p.GoToTodayTitle, goToToday); parameters.Add(p => p.IsOpen, true); }); @@ -83,16 +83,17 @@ public void BitDatePickerShouldHandleOnClickEvent(bool isEnabled, int count) ] public void BitDatePickerCalendarItemsShouldRespectIsEnabled(bool isEnabled, int count) { - int selectedDateValue = 0; + var selectedDateValue = 0; + var isOpen = true; Context.JSInterop.Mode = JSRuntimeMode.Loose; var component = RenderComponent(parameters => { - parameters.Add(p => p.IsOpen, true); + parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v); parameters.Add(p => p.IsEnabled, isEnabled); parameters.Add(p => p.OnSelectDate, () => selectedDateValue++); }); - var dateItems = component.FindAll(".bit-dtp-dbtn"); + var dateItems = component.FindAll(".bit-dtp-dbt"); Random random = new(); int randomNumber = random.Next(0, dateItems.Count - 1); @@ -104,15 +105,16 @@ public void BitDatePickerCalendarItemsShouldRespectIsEnabled(bool isEnabled, int public void BitDatePickerCalendarSelectTodayDate() { Context.JSInterop.Mode = JSRuntimeMode.Loose; + var isOpen = true; var component = RenderComponent(parameters => { - parameters.Add(p => p.IsOpen, true); + parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v); parameters.Add(p => p.IsEnabled, true); }); Assert.IsNull(component.Instance.Value); - var today = component.Find(".bit-dtp-dc-tdy button.bit-dtp-dbtn"); + var today = component.Find(".bit-dtp-dtd"); today.Click(); Assert.IsNotNull(component.Instance.Value); @@ -120,27 +122,6 @@ public void BitDatePickerCalendarSelectTodayDate() Assert.AreEqual(component.Instance.Value.Value.Offset, DateTimeOffset.Now.Offset); } - [DataTestMethod] - public void BitDatePickerCalendarWithCustomCultureInfo() - { - Context.JSInterop.Mode = JSRuntimeMode.Loose; - var component = RenderComponent(parameters => - { - parameters.Add(p => p.IsOpen, true); - parameters.Add(p => p.Culture, CultureInfoHelper.GetFaIrCultureByFingilishNames()); - }); - - var monthButtons = component.FindAll(".bit-dtp-mwp .bit-dtp-gctn .bit-dtp-btn-row button"); - Assert.IsTrue(monthButtons.Count > 0); - Assert.AreEqual(12, monthButtons.Count); - - var index = 0; - foreach (var button in monthButtons) - { - Assert.AreEqual(button.FirstElementChild.TextContent, component.Instance.Culture.DateTimeFormat.AbbreviatedMonthNames[index++]); - } - } - [DataTestMethod] public void BitDatePickerValidationFormTest() { @@ -162,7 +143,7 @@ public void BitDatePickerValidationFormTest() datePicker.Click(); //select today - var today = component.Find(".bit-dtp-dc-tdy button.bit-dtp-dbtn"); + var today = component.Find(".bit-dtp-dtd"); today.Click(); form.Submit(); @@ -196,7 +177,7 @@ public void BitDatePickerValidationInvalidHtmlAttributeTest() datePicker.Click(); //select today - var today = component.Find(".bit-dtp-dc-tdy button.bit-dtp-dbtn"); + var today = component.Find(".bit-dtp-dtd"); today.Click(); form.Submit(); @@ -228,7 +209,7 @@ public void BitDatePickerValidationInvalidCssClassTest() datePicker.Click(); //select today - var today = component.Find(".bit-dtp-dc-tdy button.bit-dtp-dbtn"); + var today = component.Find(".bit-dtp-dtd"); today.Click(); Assert.IsFalse(bitDatePicker.ClassList.Contains("bit-inv")); @@ -240,10 +221,10 @@ public void BitDatePickerAriaLabelTest(string pickerAriaLabel) Context.JSInterop.Mode = JSRuntimeMode.Loose; var component = RenderComponent(parameters => { - parameters.Add(p => p.PickerAriaLabel, pickerAriaLabel); + parameters.Add(p => p.CalloutAriaLabel, pickerAriaLabel); }); - var bitDatePickerCallout = component.Find(".bit-dtp-mcal"); + var bitDatePickerCallout = component.Find(".bit-dtp-cac"); var calloutAriaLabel = bitDatePickerCallout.GetAttribute("aria-label"); Assert.AreEqual(pickerAriaLabel, calloutAriaLabel); @@ -273,29 +254,29 @@ public void BitDatePickerShowGoToTodayTest(bool showGoToToday) } } - [DataTestMethod, - DataRow(false), - DataRow(true) - ] - public void BitDatePickerShowCloseButtonTest(bool showCloseButton) - { - Context.JSInterop.Mode = JSRuntimeMode.Loose; - var component = RenderComponent(parameters => - { - parameters.Add(p => p.ShowCloseButton, showCloseButton); - }); - - var closeBtnElms = component.FindAll(".bit-dtp-cbtn"); - - if (showCloseButton) - { - Assert.AreEqual(1, closeBtnElms.Count); - } - else - { - Assert.AreEqual(0, closeBtnElms.Count); - } - } + //[DataTestMethod, + // DataRow(false), + // DataRow(true) + //] + //public void BitDatePickerShowCloseButtonTest(bool showCloseButton) + //{ + // Context.JSInterop.Mode = JSRuntimeMode.Loose; + // var component = RenderComponent(parameters => + // { + // parameters.Add(p => p.ShowCloseButton, showCloseButton); + // }); + + // var closeBtnElms = component.FindAll(".bit-dtp-cbtn"); + + // if (showCloseButton) + // { + // Assert.AreEqual(1, closeBtnElms.Count); + // } + // else + // { + // Assert.AreEqual(0, closeBtnElms.Count); + // } + //} [DataTestMethod, DataRow(false), @@ -309,7 +290,7 @@ public void BitDatePickerHighlightCurrentMonthTest(bool highlightCurrentMonth) parameters.Add(p => p.HighlightCurrentMonth, highlightCurrentMonth); }); - var currentMonthCells = component.FindAll(".bit-dtp-crtm"); + var currentMonthCells = component.FindAll(".bit-dtp-pcm"); if (highlightCurrentMonth) { @@ -334,7 +315,7 @@ public void BitDatePickerHighlightSelectedMonthTest(bool highlightSelectedMonth) }); - var selectedMonthCells = component.FindAll(".bit-dtp-selm"); + var selectedMonthCells = component.FindAll(".bit-dtp-psm"); if (highlightSelectedMonth) { @@ -360,7 +341,7 @@ public void BitDatePickerCalloutHtmlAttributesTest() parameters.Add(p => p.CalloutHtmlAttributes, calloutHtmlAttributes); }); - var bitDatePickerCallout = component.Find(".bit-dtp-mcal"); + var bitDatePickerCallout = component.Find(".bit-dtp-cac"); var calloutStyle = bitDatePickerCallout.GetAttribute("style"); Assert.AreEqual("color: blue", calloutStyle); diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Pickers/BitDatePickerValidationTest.razor b/src/BlazorUI/Bit.BlazorUI.Tests/DatePicker/BitDatePickerValidationTest.razor similarity index 94% rename from src/BlazorUI/Bit.BlazorUI.Tests/Pickers/BitDatePickerValidationTest.razor rename to src/BlazorUI/Bit.BlazorUI.Tests/DatePicker/BitDatePickerValidationTest.razor index d824fe50b2..106e79041e 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Pickers/BitDatePickerValidationTest.razor +++ b/src/BlazorUI/Bit.BlazorUI.Tests/DatePicker/BitDatePickerValidationTest.razor @@ -7,8 +7,8 @@ Culture="Culture" @bind-Value="@TestModel.Value" Placeholder="@Placeholder" - GoToToday="@GoToToday" - IsOpen="IsOpen" + GoToTodayTitle="@GoToToday" + @bind-IsOpen="IsOpen" OnClick="HandleOnClick" OnSelectDate="HandleSelectDate"> diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/DateRangePicker/BitDateRangePickerTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/DateRangePicker/BitDateRangePickerTests.cs index 1104fec908..df3cc5dd45 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/DateRangePicker/BitDateRangePickerTests.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/DateRangePicker/BitDateRangePickerTests.cs @@ -39,7 +39,7 @@ public void BitDateRangePickerShouldRenderLabelFragment(string labelTemplate) parameters.Add(p => p.LabelTemplate, labelTemplate); }); - var bitDateRangePickerLabelChild = component.Find(".bit-dtrp > label.bit-dtrp-lbl").ChildNodes; + var bitDateRangePickerLabelChild = component.Find(".bit-dtrp > label").ChildNodes; bitDateRangePickerLabelChild.MarkupMatches(labelTemplate); } @@ -48,7 +48,7 @@ public void BitDateRangePickerShouldGiveValueToGoToToday(string goToToday) { var component = RenderComponent(parameters => { - parameters.Add(p => p.GoToToday, goToToday); + parameters.Add(p => p.GoToTodayTitle, goToToday); parameters.Add(p => p.IsOpen, true); }); @@ -78,42 +78,44 @@ public void BitDateRangePickerShouldHandleOnClickEvent(bool isEnabled, int count } [DataTestMethod, - DataRow(true, 1), - DataRow(false, 0) + DataRow(true), + DataRow(false) ] - public void BitDateRangePickerCalendarItemsShouldRespectIsEnabled(bool isEnabled, int count) + public void BitDateRangePickerCalendarItemsShouldRespectIsEnabled(bool isEnabled) { - Context.JSInterop.Mode = JSRuntimeMode.Loose; + var isOpen = true; var selectedDateValue = 0; + Context.JSInterop.Mode = JSRuntimeMode.Loose; var component = RenderComponent(parameters => { - parameters.Add(p => p.IsOpen, true); + parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v); parameters.Add(p => p.IsEnabled, isEnabled); parameters.Add(p => p.OnSelectDate, () => selectedDateValue++); }); - var dateItems = component.FindAll(".bit-dtrp-dbtn"); + var dateItems = component.FindAll(".bit-dtrp-dbt"); Random random = new(); int randomNumber = random.Next(0, dateItems.Count - 1); dateItems[randomNumber].Click(); - Assert.AreEqual(count, selectedDateValue); + Assert.AreEqual(isEnabled ? 1 : 0, selectedDateValue); } [DataTestMethod] public void BitDateRangePickerCalendarSelectTodayDate() { + var isOpen = true; Context.JSInterop.Mode = JSRuntimeMode.Loose; var component = RenderComponent(parameters => { - parameters.Add(p => p.IsOpen, true); + parameters.Bind(p => p.IsOpen, isOpen, v => isOpen = v); parameters.Add(p => p.IsEnabled, true); }); Assert.IsNull(component.Instance.Value.StartDate); Assert.IsNull(component.Instance.Value.EndDate); - var today = component.Find(".bit-dtrp-dc-tdy button.bit-dtrp-dbtn"); + var today = component.Find(".bit-dtrp-dtd"); today.Click(); Assert.IsNotNull(component.Instance.Value.StartDate); @@ -131,27 +133,6 @@ public void BitDateRangePickerCalendarSelectTodayDate() Assert.AreEqual(component.Instance.Value.EndDate.Value.Offset, DateTimeOffset.Now.Offset); } - [DataTestMethod] - public void BitDateRangePickerCalendarWithCustomCultureInfo() - { - Context.JSInterop.Mode = JSRuntimeMode.Loose; - var component = RenderComponent(parameters => - { - parameters.Add(p => p.IsOpen, true); - parameters.Add(p => p.Culture, CultureInfoHelper.GetFaIrCultureByFingilishNames()); - }); - - var monthButtons = component.FindAll("button.bit-dtrp-rbtn"); - Assert.IsTrue(monthButtons.Count > 0); - Assert.AreEqual(12, monthButtons.Count); - - var index = 0; - foreach (var button in monthButtons) - { - Assert.AreEqual(button.FirstElementChild.TextContent, component.Instance.Culture.DateTimeFormat.AbbreviatedMonthNames[index++]); - } - } - [DataTestMethod, DataRow("DateRangePicker") ] @@ -160,10 +141,10 @@ public void BitDateRangePickerAriaLabelTest(string pickerAriaLabel) Context.JSInterop.Mode = JSRuntimeMode.Loose; var component = RenderComponent(parameters => { - parameters.Add(p => p.PickerAriaLabel, pickerAriaLabel); + parameters.Add(p => p.CalloutAriaLabel, pickerAriaLabel); }); - var bitDateRangePickerCallout = component.Find(".bit-dtrp-mcal"); + var bitDateRangePickerCallout = component.Find(".bit-dtrp-cac"); var calloutAriaLabel = bitDateRangePickerCallout.GetAttribute("aria-label"); Assert.AreEqual(pickerAriaLabel, calloutAriaLabel); @@ -193,29 +174,29 @@ public void BitDateRangePickerShowGoToTodayTest(bool showGoToToday) } } - [DataTestMethod, - DataRow(false), - DataRow(true) - ] - public void BitDateRangePickerShowCloseButtonTest(bool showCloseButton) - { - Context.JSInterop.Mode = JSRuntimeMode.Loose; - var component = RenderComponent(parameters => - { - parameters.Add(p => p.ShowCloseButton, showCloseButton); - }); - - var closeBtnElms = component.FindAll(".bit-dtrp-cbtn"); - - if (showCloseButton) - { - Assert.AreEqual(1, closeBtnElms.Count); - } - else - { - Assert.AreEqual(0, closeBtnElms.Count); - } - } + //[DataTestMethod, + // DataRow(false), + // DataRow(true) + //] + //public void BitDateRangePickerShowCloseButtonTest(bool showCloseButton) + //{ + // Context.JSInterop.Mode = JSRuntimeMode.Loose; + // var component = RenderComponent(parameters => + // { + // parameters.Add(p => p.ShowCloseButton, showCloseButton); + // }); + + // var closeBtnElms = component.FindAll(".bit-dtrp-cbtn"); + + // if (showCloseButton) + // { + // Assert.AreEqual(1, closeBtnElms.Count); + // } + // else + // { + // Assert.AreEqual(0, closeBtnElms.Count); + // } + //} [DataTestMethod, DataRow(false), @@ -229,7 +210,7 @@ public void BitDateRangePickerHighlightCurrentMonthTest(bool highlightCurrentMon parameters.Add(p => p.HighlightCurrentMonth, highlightCurrentMonth); }); - var currentMonthCells = component.FindAll(".bit-dtrp-crtm"); + var currentMonthCells = component.FindAll(".bit-dtrp-pcm"); if (highlightCurrentMonth) { @@ -254,7 +235,7 @@ public void BitDateRangePickerHighlightSelectedMonthTest(bool highlightSelectedM }); - var selectedMonthCells = component.FindAll(".bit-dtrp-selm"); + var selectedMonthCells = component.FindAll(".bit-dtrp-psm"); if (highlightSelectedMonth) { @@ -280,7 +261,7 @@ public void BitDateRangePickerCalloutHtmlAttributesTest() parameters.Add(p => p.CalloutHtmlAttributes, calloutHtmlAttributes); }); - var bitDateRangePickerCallout = component.Find(".bit-dtrp-mcal"); + var bitDateRangePickerCallout = component.Find(".bit-dtrp-cac"); var calloutStyle = bitDateRangePickerCallout.GetAttribute("style"); Assert.AreEqual("color: blue", calloutStyle); diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Dropdown/BitDropdownTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Dropdown/BitDropdownTests.cs index 980c36cd32..139184d6f8 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Dropdown/BitDropdownTests.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Dropdown/BitDropdownTests.cs @@ -44,26 +44,28 @@ public void BitDropdownTest(bool isEnabled) ] public void ResponsiveDropdownShouldTakeCorrectClassNameAndRenderElements(bool isResponsiveModeEnabled) { - Context.JSInterop.Mode = JSRuntimeMode.Loose; + //// since it's now handled in the JS this test needs to be changed! - var component = RenderComponent, string>>(parameters => - { - parameters.Add(p => p.IsResponsive, isResponsiveModeEnabled); - }); + //Context.JSInterop.Mode = JSRuntimeMode.Loose; - var bitDropdown = component.Find(".bit-drp"); + //var component = RenderComponent, string>>(parameters => + //{ + // parameters.Add(p => p.IsResponsive, isResponsiveModeEnabled); + //}); - if (isResponsiveModeEnabled) - { - Assert.IsTrue(bitDropdown.ClassList.Contains("bit-drp-rsp")); + //var callout = component.Find(".bit-drp-cal"); - var lblContainer = component.Find(".bit-drp-rlc"); - Assert.IsNotNull(lblContainer); - } - else - { - Assert.ThrowsException(() => component.Find(".bit-drp-rlc")); - } + //if (isResponsiveModeEnabled) + //{ + // Assert.IsTrue(callout.ClassList.Contains("bit-drp-rsp")); + + // var lblContainer = component.Find(".bit-drp-rlc"); + // Assert.IsNotNull(lblContainer); + //} + //else + //{ + // Assert.ThrowsException(() => component.Find(".bit-drp-rlc")); + //} } [DataTestMethod, diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Modal/BitModalTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Modal/BitModalTests.cs index 5b4094896c..08599d0107 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Modal/BitModalTests.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Modal/BitModalTests.cs @@ -21,7 +21,7 @@ public void BitModalIsAlertTest(bool? isAlert) parameters.Add(p => p.IsOpen, true); }); - var element = com.Find(".bit-mdl > div"); + var element = com.Find(".bit-mdl"); Assert.AreEqual(element.Attributes["role"].Value, isAlert.HasValue && isAlert.Value ? "alertdialog" : "dialog"); } @@ -60,7 +60,7 @@ public void BitModalIsModelessTest(bool isModeless) parameters.Add(p => p.IsOpen, true); }); - var element = com.Find(".bit-mdl > div"); + var element = com.Find(".bit-mdl"); Assert.AreEqual(element.Attributes["aria-modal"].Value, (isModeless is false).ToString()); var elementOverlay = com.FindAll(".bit-mdl-ovl"); @@ -95,7 +95,7 @@ public void BitModalSubtitleAriaIdTest(string subtitleAriaId) parameters.Add(p => p.IsOpen, true); }); - var element = com.Find(".bit-mdl > div"); + var element = com.Find(".bit-mdl"); if (subtitleAriaId == null) { @@ -124,7 +124,7 @@ public void BitModalTitleAriaIdTest(string titleAriaId) parameters.Add(p => p.IsOpen, true); }); - var element = com.Find(".bit-mdl > div"); + var element = com.Find(".bit-mdl"); if (titleAriaId == null) { @@ -149,9 +149,9 @@ public void BitModalContentTest() parameters.AddChildContent("
Test Content
"); }); - var elementContent = com.Find(".bit-mdl-scr-cnt"); + var elementContent = com.Find(".bit-mdl-scn"); - elementContent.MarkupMatches("
Test Content
"); + elementContent.MarkupMatches("
Test Content
"); } [TestMethod] diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Panel/BitPanelTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Panel/BitPanelTests.cs index 3abc865983..390674d771 100644 --- a/src/BlazorUI/Bit.BlazorUI.Tests/Panel/BitPanelTests.cs +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Panel/BitPanelTests.cs @@ -43,7 +43,7 @@ public void BitPanelIsModelessTest(bool isModeless) parameters.Add(p => p.IsOpen, true); }); - var element = com.Find(".bit-pnl > div"); + var element = com.Find(".bit-pnl"); Assert.AreEqual(element.Attributes["aria-modal"].Value, (isModeless is false).ToString()); var elementOverlay = com.FindAll(".bit-pnl-ovl"); @@ -78,7 +78,7 @@ public void BitPanelSubtitleAriaIdTest(string subtitleAriaId) parameters.Add(p => p.IsOpen, true); }); - var element = com.Find(".bit-pnl > div"); + var element = com.Find(".bit-pnl"); if (subtitleAriaId == null) { @@ -107,7 +107,7 @@ public void BitPanelTitleAriaIdTest(string titleAriaId) parameters.Add(p => p.IsOpen, true); }); - var element = com.Find(".bit-pnl > div"); + var element = com.Find(".bit-pnl"); if (titleAriaId == null) { diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/SnackBar/BitSnackBarTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/SnackBar/BitSnackBarTests.cs new file mode 100644 index 0000000000..fbce056d5e --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Tests/SnackBar/BitSnackBarTests.cs @@ -0,0 +1,230 @@ +using System; +using System.Threading.Tasks; +using Bunit; +using Bunit.Extensions; +using Microsoft.AspNetCore.Components; +using Microsoft.VisualStudio.TestTools.UnitTesting; + +namespace Bit.BlazorUI.Tests.SnackBar; + +[TestClass] +public class BitSnackBarTests : BunitTestContext +{ + [DataTestMethod, + DataRow(BitSnackBarPosition.TopLeft), + DataRow(BitSnackBarPosition.TopCenter), + DataRow(BitSnackBarPosition.TopRight), + DataRow(BitSnackBarPosition.BottomLeft), + DataRow(BitSnackBarPosition.BottomCenter), + DataRow(BitSnackBarPosition.BottomRight), + DataRow(null) + ] + [TestMethod] + public void BitSnackBarPositionTest(BitSnackBarPosition? position) + { + var com = RenderComponent(parameters => + { + if (position.HasValue) parameters.Add(p => p.Position, position.Value); + }); + + var element = com.Find(".bit-snb"); + + var positionClass = position switch + { + BitSnackBarPosition.TopLeft => "bit-snb-tlf", + BitSnackBarPosition.TopCenter => "bit-snb-tcn", + BitSnackBarPosition.TopRight => "bit-snb-trt", + + BitSnackBarPosition.BottomLeft => "bit-snb-blf", + BitSnackBarPosition.BottomCenter => "bit-snb-bcn", + BitSnackBarPosition.BottomRight => "bit-snb-brt", + + _ => "bit-snb-brt", + }; + + Assert.IsTrue(element.ClassList.Contains(positionClass)); + } + + [DataTestMethod, + DataRow("title", "body"), + DataRow("title", "") + ] + [TestMethod] + public async Task BitSnackBarShowTest(string title, string body) + { + var com = RenderComponent(); + + await com.Instance.Show(title, body); + + var item = com.Find(".bit-snb-itm"); + Assert.IsNotNull(item); + + var titleElement = com.Find(".bit-snb-ttl"); + Assert.AreEqual(title, titleElement.InnerHtml); + + if (body.IsNullOrEmpty() is false) + { + var bodyElement = com.Find(".bit-snb-bdy"); + Assert.AreEqual(body, bodyElement.InnerHtml); + } + } + + [DataTestMethod, + DataRow(true), + DataRow(false) + ] + [TestMethod] + public async Task BitSnackBarAutoDismissTest(bool autoDismiss) + { + var com = RenderComponent( + parameters => + { + parameters.Add(p => p.AutoDismiss, autoDismiss); + } + ); + + await com.Instance.Show("title"); + + //Added a sec delay to be sure we are asserting after AutoDismissTime passed + await Task.Delay(com.Instance.AutoDismissTime + TimeSpan.FromSeconds(1)); + + var items = com.FindAll(".bit-snb-itm"); + + Assert.AreEqual(autoDismiss ? 0 : 1, items.Count); + } + + [DataTestMethod, + DataRow("title", BitSnackBarType.Info), + DataRow("title", BitSnackBarType.Warning), + DataRow("title", BitSnackBarType.Success), + DataRow("title", BitSnackBarType.Error), + DataRow("title", BitSnackBarType.SevereWarning), + DataRow("title", null) + ] + [TestMethod] + public async Task BitSnackBarTypeTest(string title, BitSnackBarType? type) + { + var com = RenderComponent(); + + if (type.HasValue) + { + await com.Instance.Show(title, type: type.Value); + } + else + { + await com.Instance.Show(title); + } + + var element = com.Find(".bit-snb-itm"); + + var typeClass = type switch + { + BitSnackBarType.Info => $"bit-snb-info", + BitSnackBarType.Warning => $"bit-snb-warning", + BitSnackBarType.Success => $"bit-snb-success", + BitSnackBarType.Error => $"bit-snb-error", + BitSnackBarType.SevereWarning => $"bit-snb-severe-warning", + _ => String.Empty + }; + + if (typeClass.IsNullOrEmpty()) + { + Assert.AreEqual(1, element.ClassList.Length); + } + else + { + Assert.IsTrue(element.ClassList.Contains(typeClass)); + } + } + + [DataTestMethod, + DataRow("title") + ] + [TestMethod] + public async Task BitSnackBarCloseButtonTest(string title) + { + var com = RenderComponent(); + + await com.Instance.Show(title); + + var closeButton = com.Find(".bit-snb-cbt"); + + var itemsBeforeClose = com.FindAll(".bit-snb-itm"); + Assert.AreEqual(1, itemsBeforeClose.Count); + + closeButton.Click(); + + var itemsAfterClose = com.FindAll(".bit-snb-itm"); + Assert.AreEqual(0, itemsAfterClose.Count); + } + + [DataTestMethod, + DataRow("title", "Go"), + DataRow("title", "Cancel") + ] + [TestMethod] + public async Task BitSnackBarDismissIconNameTest(string title, string iconName) + { + var com = RenderComponent( + parameters => + { + parameters.Add(x => x.DismissIconName, iconName); + } + ); + + await com.Instance.Show(title); + + var closeButtonIcon = com.Find(".bit-snb-cbt > .bit-icon"); + + Assert.IsTrue(closeButtonIcon.ClassList.Contains($"bit-icon--{iconName}")); + } + + [DataTestMethod, + DataRow("title") + ] + [TestMethod] + public async Task BitSnackBarTitleTemplateTest(string title) + { + RenderFragment titleTemplate = (string text) => (builder) => + { + builder.AddMarkupContent(0, $"{text}"); + }; + var com = RenderComponent(parameters => parameters + .Add(p => p.TitleTemplate, titleTemplate) + ); + + await com.Instance.Show(title); + + var titleTemplateElement = com.Find(".bit-snb-hdr"); + + var expectedHtml = $@" + {title}"; + + titleTemplateElement.InnerHtml.MarkupMatches(expectedHtml); + } + + [DataTestMethod, + DataRow("title", "body") + ] + [TestMethod] + public async Task BitSnackBarBodyTemplateTest(string title, string body) + { + RenderFragment bodyTemplate = (string text) => (builder) => + { + builder.AddMarkupContent(0, $"

{text}

"); + }; + var com = RenderComponent(parameters => parameters + .Add(p => p.BodyTemplate, bodyTemplate) + ); + + await com.Instance.Show(title, body); + + var itemTemplateElement = com.Find(".bit-snb-itm"); + + var expectedHtml = $@"
+

{body}

+ "; + + itemTemplateElement.InnerHtml.MarkupMatches(expectedHtml); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI.Tests/Typography/BitTypographyTests.cs b/src/BlazorUI/Bit.BlazorUI.Tests/Typography/BitTypographyTests.cs new file mode 100644 index 0000000000..a902c0cd8c --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI.Tests/Typography/BitTypographyTests.cs @@ -0,0 +1,130 @@ +using System.Collections.Generic; +using System.Globalization; +using AngleSharp.Text; +using Bunit; +using Microsoft.VisualStudio.TestTools.UnitTesting; + +namespace Bit.BlazorUI.Tests.Typography; + +[TestClass] +public class BitTypographyTests : BunitTestContext +{ + private static readonly Dictionary VariantMapping = new() + { + { BitTypographyVariant.Body1, "p" }, + { BitTypographyVariant.Body2, "p" }, + { BitTypographyVariant.Button, "span" }, + { BitTypographyVariant.Caption, "span" }, + { BitTypographyVariant.H1, "h1" }, + { BitTypographyVariant.H2, "h2" }, + { BitTypographyVariant.H3, "h3" }, + { BitTypographyVariant.H4, "h4" }, + { BitTypographyVariant.H5, "h5" }, + { BitTypographyVariant.H6, "h6" }, + { BitTypographyVariant.Inherit, "p" }, + { BitTypographyVariant.Overline, "span" }, + { BitTypographyVariant.Subtitle1, "h6" }, + { BitTypographyVariant.Subtitle2, "h6" } + }; + + [DataTestMethod, + DataRow(BitTypographyVariant.Body1), + DataRow(BitTypographyVariant.Body2), + DataRow(BitTypographyVariant.Button), + DataRow(BitTypographyVariant.Caption), + DataRow(BitTypographyVariant.H1), + DataRow(BitTypographyVariant.H2), + DataRow(BitTypographyVariant.H3), + DataRow(BitTypographyVariant.H4), + DataRow(BitTypographyVariant.H5), + DataRow(BitTypographyVariant.H6), + DataRow(BitTypographyVariant.Inherit), + DataRow(BitTypographyVariant.Overline), + DataRow(BitTypographyVariant.Subtitle1), + DataRow(BitTypographyVariant.Subtitle2), + DataRow(null) + ] + [TestMethod] + public void BitTypographyVariantTest(BitTypographyVariant? variant) + { + var com = RenderComponent(parameters => + { + if (variant.HasValue) + { + parameters.Add(p => p.Variant, variant.Value); + } + }); + + var expectedVariant = variant ?? BitTypographyVariant.Subtitle1; + var expectedElement = VariantMapping[expectedVariant]; + + var expectedHtml = $"<{expectedElement} diff:ignore>"; + + com.MarkupMatches(expectedHtml); + + var element = com.Find(expectedElement); + + Assert.IsTrue( + element.ClassList.Contains($"bit-tpg-{expectedVariant.ToString().ToLower(CultureInfo.InvariantCulture)}")); + } + + [ + DataRow(true), + DataRow(false) + ] + [TestMethod] + public void BitTypographyNoWrapTest(bool hasNoWrap) + { + var com = RenderComponent(parameters => + { + parameters.Add(p => p.NoWrap, hasNoWrap); + }); + + var defaultVariant = BitTypographyVariant.Subtitle1; + var defaultElement = VariantMapping[defaultVariant]; + + var element = com.Find(defaultElement); + + Assert.AreEqual(hasNoWrap, element.ClassList.Contains("bit-tpg-nowrap")); + } + + [ + DataRow(true), + DataRow(false) + ] + [TestMethod] + public void BitTypographyGutterTest(bool hasGutter) + { + var com = RenderComponent(parameters => + { + parameters.Add(p => p.Gutter, hasGutter); + }); + + var defaultVariant = BitTypographyVariant.Subtitle1; + var defaultElement = VariantMapping[defaultVariant]; + + var element = com.Find(defaultElement); + + Assert.AreEqual(hasGutter, element.ClassList.Contains("bit-tpg-gutter")); + } + + [ + DataRow("div"), + DataRow(null) + ] + [TestMethod] + public void BitTypographyComponentTest(string component) + { + var com = RenderComponent(parameters => + { + parameters.Add(p => p.Component, component); + }); + + var defaultVariant = BitTypographyVariant.Subtitle1; + var defaultElement = VariantMapping[defaultVariant]; + + var element = com.Find(component ?? defaultElement); + + Assert.IsTrue(element.ClassList.Contains("bit-tpg")); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Bit.BlazorUI.csproj b/src/BlazorUI/Bit.BlazorUI/Bit.BlazorUI.csproj index 15b2cfd672..5e652556f9 100644 --- a/src/BlazorUI/Bit.BlazorUI/Bit.BlazorUI.csproj +++ b/src/BlazorUI/Bit.BlazorUI/Bit.BlazorUI.csproj @@ -55,4 +55,15 @@ + + + True + \ + + + True + \ + + + \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI/Components/BitClassStylePair.cs b/src/BlazorUI/Bit.BlazorUI/Components/BitClassStylePair.cs deleted file mode 100644 index 3180ae5520..0000000000 --- a/src/BlazorUI/Bit.BlazorUI/Components/BitClassStylePair.cs +++ /dev/null @@ -1,14 +0,0 @@ -namespace Bit.BlazorUI; - -public class BitClassStylePair -{ - /// - /// Custom css class. - /// - public string? Class { get; set; } - - /// - /// Custom css style. - /// - public string? Style { get; set; } -} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/BitResponsiveMode.cs b/src/BlazorUI/Bit.BlazorUI/Components/BitResponsiveMode.cs new file mode 100644 index 0000000000..43e09c4440 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/BitResponsiveMode.cs @@ -0,0 +1,8 @@ +namespace Bit.BlazorUI; + +internal enum BitResponsiveMode +{ + None, + Panel, + Top +} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs index 404e7017c6..5d27bf0252 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.razor.cs @@ -5,6 +5,8 @@ namespace Bit.BlazorUI; public partial class BitButton { private BitButtonStyle buttonStyle = BitButtonStyle.Primary; + private BitButtonColor? color; + private BitButtonSize? size; private int? _tabIndex; private BitButtonType _buttonType; @@ -32,7 +34,7 @@ public partial class BitButton [Parameter] public bool AriaHidden { get; set; } /// - /// The style of button, Possible values: Primary | Standard + /// The style of button, Possible values: Primary | Standard | Text /// [Parameter] public BitButtonStyle ButtonStyle @@ -40,11 +42,45 @@ public BitButtonStyle ButtonStyle get => buttonStyle; set { + if (buttonStyle == value) return; + buttonStyle = value; ClassBuilder.Reset(); } } + /// + /// The color of button + /// + [Parameter] + public BitButtonColor? Color + { + get => color; + set + { + if (color == value) return; + + color = value; + ClassBuilder.Reset(); + } + } + + /// + /// The size of button, Possible values: Small | Medium | Large + /// + [Parameter] + public BitButtonSize? Size + { + get => size; + set + { + if (size == value) return; + + size = value; + ClassBuilder.Reset(); + } + } + /// /// The type of the button /// @@ -80,9 +116,31 @@ public BitButtonStyle ButtonStyle protected override void RegisterCssClasses() { - ClassBuilder.Register(() => ButtonStyle == BitButtonStyle.Primary - ? $"{RootElementClass}-pri" - : $"{RootElementClass}-std"); + ClassBuilder.Register(() => ButtonStyle switch + { + BitButtonStyle.Primary => "bit-btn-pri", + BitButtonStyle.Standard => "bit-btn-std", + BitButtonStyle.Text => "bit-btn-txt", + _ => "bit-btn-pri" + }); + + ClassBuilder.Register(() => Color switch + { + BitButtonColor.Info => "bit-btn-inf", + BitButtonColor.Success => "bit-btn-suc", + BitButtonColor.Warning => "bit-btn-wrn", + BitButtonColor.SevereWarning => "bit-btn-swr", + BitButtonColor.Error => "bit-btn-err", + _ => string.Empty + }); + + ClassBuilder.Register(() => Size switch + { + BitButtonSize.Small => "bit-btn-sm", + BitButtonSize.Medium => "bit-btn-md", + BitButtonSize.Large => "bit-btn-lg", + _ => string.Empty + }); } protected override void OnParametersSet() diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.scss index 1c1f4f14c3..f4f6e8ab4c 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButton/BitButton.scss @@ -2,6 +2,8 @@ .bit-btn { cursor: pointer; + align-items: center; + display: inline-flex; text-decoration: none; min-width: spacing(8); min-height: spacing(4); @@ -18,41 +20,150 @@ cursor: default; pointer-events: none; color: $color-foreground-disabled; - border-color: $color-border-disabled; - background-color: $color-background-disabled; } } .bit-btn-pri { - color: $color-primary-text; - border-color: $color-primary-main; - background-color: $color-primary-main; + color: var(--bit-btn-pri-clr); + background-color: var(--bit-btn-bg-clr); + border-color: var(--bit-btn-pri-brd-clr); + --bit-btn-bg-clr: #{$color-primary-main}; + --bit-btn-pri-clr: #{$color-primary-text}; + --bit-btn-pri-brd-clr: #{$color-primary-main}; + --bit-btn-pri-hover-bg-clr: #{$color-action-hover-primary}; + --bit-btn-pri-active-bg-clr: #{$color-action-active-primary}; @media (hover: hover) { &:hover { - border-color: $color-action-hover-primary; - background-color: $color-action-hover-primary; + border-color: var(--bit-btn-pri-hover-bg-clr); + background-color: var(--bit-btn-pri-hover-bg-clr); } } &:active { - border-color: $color-action-active-primary; - background-color: $color-action-active-primary; + border-color: var(--bit-btn-pri-active-bg-clr); + background-color: var(--bit-btn-pri-active-bg-clr); + } + + &.bit-dis { + border-color: $color-border-disabled; + background-color: $color-background-disabled; } } .bit-btn-std { - color: $color-secondary-text; - border-color: $color-border-primary; + color: var(--bit-btn-sec-clr); background-color: $color-secondary-main; + border-color: var(--bit-btn-sec-brd-clr); + --bit-btn-sec-clr: #{$color-secondary-text}; + --bit-btn-sec-brd-clr: #{$color-secondary-text}; + --bit-btn-sec-hover-bg-clr: #{$color-action-hover-secondary}; + --bit-btn-sec-active-bg-clr: #{$color-action-active-secondary}; @media (hover: hover) { &:hover { - background-color: $color-action-hover-secondary; + background-color: var(--bit-btn-sec-hover-bg-clr); } } &:active { - background-color: $color-action-active-secondary; + background-color: var(--bit-btn-sec-active-bg-clr); + } + + &.bit-dis { + border-color: $color-border-disabled; + } +} + +.bit-btn-txt { + border-color: transparent; + color: var(--bit-btn-sec-clr); + background-color: transparent; + --bit-btn-sec-clr: #{$color-secondary-text}; + --bit-btn-sec-hover-bg-clr: #{$color-action-hover-secondary}; + --bit-btn-sec-active-bg-clr: #{$color-action-active-secondary}; + + @media (hover: hover) { + &:hover { + background-color: var(--bit-btn-sec-hover-bg-clr); + } } + + &:active { + background-color: var(--bit-btn-sec-active-bg-clr); + } +} + +.bit-btn-inf { + --bit-btn-bg-clr: #{$color-state-info-bg}; + --bit-btn-pri-clr: #{$color-foreground-primary}; + --bit-btn-pri-brd-clr: #{$color-state-info-bg}; + --bit-btn-pri-hover-bg-clr: #{$color-action-hover-state-info-bg}; + --bit-btn-pri-active-bg-clr: #{$color-action-active-state-info-bg}; + --bit-btn-sec-clr: #{$color-state-info}; + --bit-btn-sec-brd-clr: #{$color-state-info}; + --bit-btn-sec-hover-bg-clr: #{$color-action-hover-state-info-bg}; + --bit-btn-sec-active-bg-clr: #{$color-action-active-state-info-bg}; +} + +.bit-btn-suc { + --bit-btn-bg-clr: #{$color-state-success-bg}; + --bit-btn-pri-clr: #{$color-foreground-primary}; + --bit-btn-pri-brd-clr: #{$color-state-success-bg}; + --bit-btn-pri-hover-bg-clr: #{$color-action-hover-state-success-bg}; + --bit-btn-pri-active-bg-clr: #{$color-action-active-state-success-bg}; + --bit-btn-sec-clr: #{$color-state-success}; + --bit-btn-sec-brd-clr: #{$color-state-success}; + --bit-btn-sec-hover-bg-clr: #{$color-action-hover-state-success-bg}; + --bit-btn-sec-active-bg-clr: #{$color-action-active-state-success-bg}; +} + +.bit-btn-wrn { + --bit-btn-bg-clr: #{$color-state-warning-bg}; + --bit-btn-pri-clr: #{$color-foreground-primary}; + --bit-btn-pri-brd-clr: #{$color-state-warning-bg}; + --bit-btn-pri-hover-bg-clr: #{$color-action-hover-state-warning-bg}; + --bit-btn-pri-active-bg-clr: #{$color-action-active-state-warning-bg}; + --bit-btn-sec-clr: #{$color-state-warning}; + --bit-btn-sec-brd-clr: #{$color-state-warning}; + --bit-btn-sec-hover-bg-clr: #{$color-action-hover-state-warning-bg}; + --bit-btn-sec-active-bg-clr: #{$color-action-active-state-warning-bg}; +} + +.bit-btn-swr { + --bit-btn-bg-clr: #{$color-state-severe-warning-bg}; + --bit-btn-pri-clr: #{$color-foreground-primary}; + --bit-btn-pri-brd-clr: #{$color-state-severe-warning-bg}; + --bit-btn-pri-hover-bg-clr: #{$color-action-hover-state-severe-warning-bg}; + --bit-btn-pri-active-bg-clr: #{$color-action-active-state-severe-warning-bg}; + --bit-btn-sec-clr: #{$color-state-severe-warning}; + --bit-btn-sec-brd-clr: #{$color-state-severe-warning}; + --bit-btn-sec-hover-bg-clr: #{$color-action-hover-state-severe-warning-bg}; + --bit-btn-sec-active-bg-clr: #{$color-action-active-state-severe-warning-bg}; +} + +.bit-btn-err { + --bit-btn-bg-clr: #{$color-state-error-bg}; + --bit-btn-pri-clr: #{$color-foreground-primary}; + --bit-btn-pri-brd-clr: #{$color-state-error-bg}; + --bit-btn-pri-hover-bg-clr: #{$color-action-hover-state-error-bg}; + --bit-btn-pri-active-bg-clr: #{$color-action-active-state-error-bg}; + --bit-btn-sec-clr: #{$color-state-error}; + --bit-btn-sec-brd-clr: #{$color-state-error}; + --bit-btn-sec-hover-bg-clr: #{$color-action-hover-state-error-bg}; + --bit-btn-sec-active-bg-clr: #{$color-action-active-state-error-bg}; +} + +.bit-btn-sm { + min-width: spacing(6); + min-height: spacing(3); + font-size: spacing(1.5); + padding: spacing(0.3) spacing(1.5); +} + +.bit-btn-lg { + min-width: spacing(10); + min-height: spacing(5); + font-size: spacing(2); + padding: spacing(0.7) spacing(2.5); } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonColor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonColor.cs new file mode 100644 index 0000000000..d289af90bf --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonColor.cs @@ -0,0 +1,29 @@ +namespace Bit.BlazorUI; + +public enum BitButtonColor +{ + /// + /// Info styled Button + /// + Info, + + /// + /// Success styled Button + /// + Success, + + /// + /// Warning styled Button + /// + Warning, + + /// + /// Severe Warning styled Button + /// + SevereWarning, + + /// + /// Error styled Button + /// + Error, +} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor new file mode 100644 index 0000000000..dc7e3f5189 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor @@ -0,0 +1,44 @@ +@namespace Bit.BlazorUI +@inherits BitComponentBase +@typeparam TItem + + + + + +
+ @for (int i = 0; i < _items.Count; i++) + { + var item = _items[i]; + var isEnabled = IsEnabled && GetIsEnabled(item); + var template = GetTemplate(item); + + } +
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs new file mode 100644 index 0000000000..1694d3563f --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.razor.cs @@ -0,0 +1,403 @@ +using System.Text; +using Microsoft.AspNetCore.Components.Forms; + +namespace Bit.BlazorUI; + +public partial class BitButtonGroup where TItem : class +{ + private bool vertical; + private BitButtonSize? size; + private BitButtonColor? color; + private BitButtonStyle buttonStyle = BitButtonStyle.Primary; + + private List _items = new(); + private IEnumerable _oldItems = default!; + + + + /// + /// The EditContext, which is set if the button is inside an + /// + [CascadingParameter] private EditContext? _editContext { get; set; } + + + + /// + /// The style of button, Possible values: Primary | Standard + /// + [Parameter] + public BitButtonStyle ButtonStyle + { + get => buttonStyle; + set + { + if (buttonStyle == value) return; + + buttonStyle = value; + ClassBuilder.Reset(); + } + } + + /// + /// The content of the BitButtonGroup, that are BitButtonGroupOption components. + /// + [Parameter] public RenderFragment? ChildContent { get; set; } + + /// + /// The color of button + /// + [Parameter] + public BitButtonColor? Color + { + get => color; + set + { + if (color == value) return; + + color = value; + ClassBuilder.Reset(); + } + } + + /// + /// List of Item, each of which can be a button with different action in the ButtonGroup. + /// + [Parameter] public IEnumerable Items { get; set; } = new List(); + + /// + /// The content inside the item can be customized. + /// + [Parameter] public RenderFragment? ItemTemplate { get; set; } + + /// + /// Defines whether to render ButtonGroup children vertically. + /// + [Parameter] + public bool Vertical + { + get => vertical; + set + { + if (vertical == value) return; + + vertical = value; + StyleBuilder.Reset(); + } + } + + /// + /// Names and selectors of the custom input type properties. + /// + [Parameter] public BitButtonGroupNameSelectors? NameSelectors { get; set; } + + /// + /// The callback that is called when a button is clicked. + /// + [Parameter] public EventCallback OnItemClick { get; set; } + + /// + /// Alias of ChildContent. + /// + [Parameter] public RenderFragment? Options { get; set; } + + /// + /// The size of button, Possible values: Small | Medium | Large + /// + [Parameter] + public BitButtonSize? Size + { + get => size; + set + { + if (size == value) return; + + size = value; + ClassBuilder.Reset(); + } + } + + + internal void RegisterOption(BitButtonGroupOption option) + { + var item = (option as TItem)!; + + _items.Add(item); + + StateHasChanged(); + } + + internal void UnregisterOption(BitButtonGroupOption option) + { + _items.Remove((option as TItem)!); + StateHasChanged(); + } + + + protected override string RootElementClass => "bit-btg"; + + protected override void RegisterCssClasses() + { + ClassBuilder.Register(() => ButtonStyle switch + { + BitButtonStyle.Primary => "bit-btg-pri", + BitButtonStyle.Standard => "bit-btg-std", + BitButtonStyle.Text => "bit-btg-txt", + _ => "bit-btg-pri" + }); + + ClassBuilder.Register(() => Color switch + { + BitButtonColor.Info => "bit-btg-inf", + BitButtonColor.Success => "bit-btg-suc", + BitButtonColor.Warning => "bit-btg-war", + BitButtonColor.SevereWarning => "bit-btg-swa", + BitButtonColor.Error => "bit-btg-err", + _ => string.Empty + }); + + ClassBuilder.Register(() => Size switch + { + BitButtonSize.Small => "bit-btg-sm", + BitButtonSize.Medium => "bit-btg-md", + BitButtonSize.Large => "bit-btg-lg", + _ => string.Empty + }); + + ClassBuilder.Register(() => Vertical ? "bit-btg-vrt" : ""); + } + + protected override Task OnParametersSetAsync() + { + if (ChildContent is null && Items.Any() && Items != _oldItems) + { + _oldItems = Items; + _items = Items.ToList(); + } + + return base.OnParametersSetAsync(); + } + + + + private string? GetItemClass(int index, bool isEnabled) + { + StringBuilder className = new StringBuilder(); + + className.Append(ButtonStyle switch + { + BitButtonStyle.Primary => " bit-btg-ipr", + BitButtonStyle.Standard => " bit-btg-ist", + BitButtonStyle.Text => " bit-btg-itx", + _ => " bit-btg-ipr" + }); + + className.Append(Color switch + { + BitButtonColor.Info => " bit-btg-iin", + BitButtonColor.Success => " bit-btg-isu", + BitButtonColor.Warning => " bit-btg-iwa", + BitButtonColor.SevereWarning => " bit-btg-isw", + BitButtonColor.Error => " bit-btg-ier", + _ => string.Empty + }); + + className.Append(Size switch + { + BitButtonSize.Small => " bit-btg-ism", + BitButtonSize.Medium => " bit-btg-imd", + BitButtonSize.Large => " bit-btg-ilg", + _ => string.Empty + }); + + if (index == 0) + { + className.Append(" bit-btg-ift"); + } + + if (index == (_items.Count - 1)) + { + className.Append(" bit-btg-ilt"); + } + + if(isEnabled is false) + { + className.Append(" bit-btg-ids"); + } + + return className.ToString(); + } + + private async Task HandleOnItemClick(TItem item) + { + if (GetIsEnabled(item) is false) return; + + await OnItemClick.InvokeAsync(item); + + if (item is BitButtonGroupItem buttonGroupItem) + { + buttonGroupItem.OnClick?.Invoke(buttonGroupItem); + } + else if (item is BitButtonGroupOption buttonGroupOption) + { + await buttonGroupOption.OnClick.InvokeAsync(buttonGroupOption); + } + else + { + if (NameSelectors is null) return; + + if (NameSelectors.OnClick.Selector is not null) + { + NameSelectors.OnClick.Selector!(item)?.Invoke(item); + } + else + { + item.GetValueFromProperty?>(NameSelectors.OnClick.Name)?.Invoke(item); + } + } + } + + + private string? GetClass(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.Class; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.Class; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.Class.Selector is not null) + { + return NameSelectors.Class.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.Class.Name); + } + + private string? GetIconName(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.IconName; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.IconName; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.IconName.Selector is not null) + { + return NameSelectors.IconName.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.IconName.Name); + } + + private bool GetIsEnabled(TItem? item) + { + if (item is null) return false; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.IsEnabled; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.IsEnabled; + } + + if (NameSelectors is null) return true; + + if (NameSelectors.IsEnabled.Selector is not null) + { + return NameSelectors.IsEnabled.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.IsEnabled.Name, true); + } + + private string? GetStyle(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.Style; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.Style; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.Style.Selector is not null) + { + return NameSelectors.Style.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.Style.Name); + } + + private RenderFragment? GetTemplate(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.Template as RenderFragment; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.Template as RenderFragment; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.Template.Selector is not null) + { + return NameSelectors.Template.Selector!(item); + } + + return item.GetValueFromProperty?>(NameSelectors.Template.Name); + } + + private string? GetText(TItem? item) + { + if (item is null) return null; + + if (item is BitButtonGroupItem buttonGroupItem) + { + return buttonGroupItem.Text; + } + + if (item is BitButtonGroupOption buttonGroupOption) + { + return buttonGroupOption.Text; + } + + if (NameSelectors is null) return null; + + if (NameSelectors.Text.Selector is not null) + { + return NameSelectors.Text.Selector!(item); + } + + return item.GetValueFromProperty(NameSelectors.Text.Name); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.scss new file mode 100644 index 0000000000..49d5ecb80a --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroup.scss @@ -0,0 +1,262 @@ +@import "../../../Styles/functions.scss"; + +.bit-btg { + flex-direction: row; + display: inline-flex; + max-width: fit-content; + border-width: $shape-border-width; + border-style: $shape-border-style; + border-radius: $shape-border-radius; + + &.bit-dis { + border-color: $color-border-disabled; + + .bit-btg-itm { + border-color: $color-border-disabled; + } + } +} + +.bit-btg-pri { + border-color: var(--bit-btg-pri-brd-clr); + --bit-btg-pri-brd-clr: #{$color-primary-main}; + --bit-btg-clr-bg-dis: #{$color-background-disabled}; +} + +.bit-btg-std { + border-color: var(--bit-btg-sec-brd-clr); + --bit-btg-sec-brd-clr: #{$color-secondary-text}; + --bit-btg-clr-bg-dis: #{$color-background-primary}; +} + +.bit-btg-txt { + border-color: transparent; + --bit-btg-clr-bg-dis: transparent; + + &.bit-dis { + border-color: transparent; + } +} + +.bit-btg-itm { + display: flex; + gap: spacing(1); + cursor: pointer; + text-align: left; + align-items: center; + line-height: inherit; + text-decoration: none; + box-sizing: border-box; + font-size: spacing(1.75); + border-style: $shape-border-style; + border-width: $shape-border-width; + padding: spacing(0.7) spacing(2); + font-family: $typography-font-family; + font-weight: $typography-font-weight; + border-top-width: 0; + border-left-width: 0; + border-bottom-width: 0; +} + +.bit-btg-ift { + border-top-left-radius: $shape-border-radius; + border-bottom-left-radius: $shape-border-radius; +} + +.bit-btg-ilt { + border-right-width: 0; + border-top-right-radius: $shape-border-radius; + border-bottom-right-radius: $shape-border-radius; +} + +.bit-btg-ipr { + color: var(--bit-btg-itm-pri-clr); + background-color: var(--bit-btg-itm-bg-clr); + border-color: var(--bit-btg-itm-pri-brd-clr); + --bit-btg-itm-bg-clr: #{$color-primary-main}; + --bit-btg-itm-pri-clr: #{$color-primary-text}; + --bit-btg-itm-pri-brd-clr: #{$color-primary-dark}; + --bit-btg-itm-pri-hover-bg-clr: #{$color-action-hover-primary}; + --bit-btg-itm-pri-active-bg-clr: #{$color-action-active-primary}; + + @media (hover: hover) { + &:hover { + background-color: var(--bit-btg-itm-pri-hover-bg-clr); + } + } + + &:active { + background-color: var(--bit-btg-itm-pri-active-bg-clr); + } +} + +.bit-btg-ist { + color: var(--bit-btg-itm-sec-clr); + background-color: $color-secondary-main; + border-color: var(--bit-btg-itm-sec-brd-clr); + --bit-btg-itm-sec-clr: #{$color-secondary-text}; + --bit-btg-itm-sec-brd-clr: #{$color-secondary-text}; + --bit-btg-itm-sec-hover-bg-clr: #{$color-action-hover-secondary}; + --bit-btg-itm-sec-active-bg-clr: #{$color-action-active-secondary}; + + @media (hover: hover) { + &:hover { + background-color: var(--bit-btg-itm-sec-hover-bg-clr); + } + } + + &:active { + background-color: var(--bit-btg-itm-sec-active-bg-clr); + } +} + +.bit-btg-itx { + color: var(--bit-btg-itm-sec-clr); + background-color: transparent; + border-color: var(--bit-btg-itm-sec-brd-clr); + --bit-btg-itm-sec-clr: #{$color-secondary-text}; + --bit-btg-itm-sec-brd-clr: #{$color-secondary-text}; + --bit-btg-itm-sec-hover-bg-clr: #{$color-action-hover-secondary}; + --bit-btg-itm-sec-active-bg-clr: #{$color-action-active-secondary}; + + @media (hover: hover) { + &:hover { + background-color: var(--bit-btg-itm-sec-hover-bg-clr); + } + } + + &:active { + background-color: var(--bit-btg-itm-sec-active-bg-clr); + } +} + +.bit-btg-inf { + --bit-btg-pri-brd-clr: #{$color-state-info-bg}; + --bit-btg-sec-brd-clr: #{$color-state-info}; +} + +.bit-btg-iin { + --bit-btg-itm-bg-clr: #{$color-state-info-bg}; + --bit-btg-itm-pri-clr: #{$color-foreground-primary}; + --bit-btg-itm-pri-brd-clr: #{$color-state-info-brd}; + --bit-btg-itm-pri-hover-bg-clr: #{$color-action-hover-state-info-bg}; + --bit-btg-itm-pri-active-bg-clr: #{$color-action-active-state-info-bg}; + --bit-btg-itm-sec-clr: #{$color-state-info}; + --bit-btg-itm-sec-brd-clr: #{$color-state-info}; + --bit-btg-itm-sec-hover-bg-clr: #{$color-action-hover-state-info-bg}; + --bit-btg-itm-sec-active-bg-clr: #{$color-action-active-state-info-bg}; +} + +.bit-btg-suc { + --bit-btg-pri-brd-clr: #{$color-state-success-bg}; + --bit-btg-sec-brd-clr: #{$color-state-success}; +} + +.bit-btg-isu { + --bit-btg-itm-bg-clr: #{$color-state-success-bg}; + --bit-btg-itm-pri-clr: #{$color-foreground-primary}; + --bit-btg-itm-pri-brd-clr: #{$color-state-success-brd}; + --bit-btg-itm-pri-hover-bg-clr: #{$color-action-hover-state-success-bg}; + --bit-btg-itm-pri-active-bg-clr: #{$color-action-active-state-success-bg}; + --bit-btg-itm-sec-clr: #{$color-state-success}; + --bit-btg-itm-sec-brd-clr: #{$color-state-success}; + --bit-btg-itm-sec-hover-bg-clr: #{$color-action-hover-state-success-bg}; + --bit-btg-itm-sec-active-bg-clr: #{$color-action-active-state-success-bg}; +} + +.bit-btg-war { + --bit-btg-pri-brd-clr: #{$color-state-warning-bg}; + --bit-btg-sec-brd-clr: #{$color-state-warning}; +} + +.bit-btg-iwa { + --bit-btg-itm-bg-clr: #{$color-state-warning-bg}; + --bit-btg-itm-pri-clr: #{$color-foreground-primary}; + --bit-btg-itm-pri-brd-clr: #{$color-state-warning-brd}; + --bit-btg-itm-pri-hover-bg-clr: #{$color-action-hover-state-warning-bg}; + --bit-btg-itm-pri-active-bg-clr: #{$color-action-active-state-warning-bg}; + --bit-btg-itm-sec-clr: #{$color-state-warning}; + --bit-btg-itm-sec-brd-clr: #{$color-state-warning}; + --bit-btg-itm-sec-hover-bg-clr: #{$color-action-hover-state-warning-bg}; + --bit-btg-itm-sec-active-bg-clr: #{$color-action-active-state-warning-bg}; +} + +.bit-btg-swa { + --bit-btg-pri-brd-clr: #{$color-state-severe-warning-bg}; + --bit-btg-sec-brd-clr: #{$color-state-severe-warning}; +} + +.bit-btg-isw { + --bit-btg-itm-bg-clr: #{$color-state-severe-warning-bg}; + --bit-btg-itm-pri-clr: #{$color-foreground-primary}; + --bit-btg-itm-pri-brd-clr: #{$color-state-severe-warning-brd}; + --bit-btg-itm-pri-hover-bg-clr: #{$color-action-hover-state-severe-warning-bg}; + --bit-btg-itm-pri-active-bg-clr: #{$color-action-active-state-severe-warning-bg}; + --bit-btg-itm-sec-clr: #{$color-state-severe-warning}; + --bit-btg-itm-sec-brd-clr: #{$color-state-severe-warning}; + --bit-btg-itm-sec-hover-bg-clr: #{$color-action-hover-state-severe-warning-bg}; + --bit-btg-itm-sec-active-bg-clr: #{$color-action-active-state-severe-warning-bg}; +} + +.bit-btg-err { + --bit-btg-pri-brd-clr: #{$color-state-error-bg}; + --bit-btg-sec-brd-clr: #{$color-state-error}; +} + +.bit-btg-ier { + --bit-btg-itm-bg-clr: #{$color-state-error-bg}; + --bit-btg-itm-pri-clr: #{$color-foreground-primary}; + --bit-btg-itm-pri-brd-clr: #{$color-state-error-brd}; + --bit-btg-itm-pri-hover-bg-clr: #{$color-action-hover-state-error-bg}; + --bit-btg-itm-pri-active-bg-clr: #{$color-action-active-state-error-bg}; + --bit-btg-itm-sec-clr: #{$color-state-error}; + --bit-btg-itm-sec-brd-clr: #{$color-state-error}; + --bit-btg-itm-sec-hover-bg-clr: #{$color-action-hover-state-error-bg}; + --bit-btg-itm-sec-active-bg-clr: #{$color-action-active-state-error-bg}; +} + +.bit-btg-vrt { + flex-direction: column; + + .bit-btg-itm { + border-width: $shape-border-width; + border-top-width: 0; + border-left-width: 0; + border-right-width: 0; + } + + .bit-btg-ift { + border-top-left-radius: $shape-border-radius; + border-top-right-radius: $shape-border-radius; + } + + .bit-btg-ilt { + border-bottom-width: 0; + border-bottom-left-radius: $shape-border-radius; + border-bottom-right-radius: $shape-border-radius; + } +} + +.bit-btg-ism { + font-size: spacing(1.5); + padding: spacing(0.5) spacing(1.5); +} + +.bit-btg-ilg { + font-size: spacing(2); + padding: spacing(0.9) spacing(2.5); +} + +.bit-btg-btx { + white-space: nowrap; + text-overflow: ellipsis; +} + +.bit-btg-ids { + cursor: default; + user-select: none; + pointer-events: none; + -webkit-user-select: none; + color: $color-foreground-disabled; + background-color: var(--bit-btg-clr-bg-dis); +} \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupItem.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupItem.cs new file mode 100644 index 0000000000..afa3ee18bd --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupItem.cs @@ -0,0 +1,45 @@ + +namespace Bit.BlazorUI; + +public class BitButtonGroupItem +{ + /// + /// The custom CSS classes of the item. + /// + public string? Class { get; set; } + + /// + /// Name of an icon to render next to the item text. + /// + public string? IconName { get; set; } + + /// + /// Whether or not the item is enabled. + /// + public bool IsEnabled { get; set; } = true; + + /// + /// A unique value to use as a key of the item. + /// + public string? Key { get; set; } + + /// + /// Click event handler of the item. + /// + public Action? OnClick { get; set; } + + /// + /// The custom value for the style attribute of the item. + /// + public string? Style { get; set; } + + /// + /// The custom template for the item. + /// + public RenderFragment? Template { get; set; } + + /// + /// Text to render in the item. + /// + public string? Text { get; set; } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupNameSelectors.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupNameSelectors.cs new file mode 100644 index 0000000000..fe1caf82d6 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupNameSelectors.cs @@ -0,0 +1,44 @@ +namespace Bit.BlazorUI; + +public class BitButtonGroupNameSelectors +{ + /// + /// The CSS Class field name and selector of the custom input class. + /// + public BitNameSelectorPair Class { get; set; } = new(nameof(BitButtonGroupItem.Class)); + + /// + /// IconName field name and selector of the custom input class. + /// + public BitNameSelectorPair IconName { get; set; } = new(nameof(BitButtonGroupItem.IconName)); + + /// + /// IsEnabled field name and selector of the custom input class. + /// + public BitNameSelectorPair IsEnabled { get; set; } = new(nameof(BitButtonGroupItem.IsEnabled)); + + /// + /// Key field name and selector of the custom input class. + /// + public BitNameSelectorPair Key { get; set; } = new(nameof(BitButtonGroupItem.Key)); + + /// + /// OnClick field name and selector of the custom input class. + /// + public BitNameSelectorPair?> OnClick { get; set; } = new(nameof(BitButtonGroupItem.OnClick)); + + /// + /// The CSS Style field name and selector of the custom input class. + /// + public BitNameSelectorPair Style { get; set; } = new(nameof(BitButtonGroupItem.Style)); + + /// + /// Template field name and selector of the custom input class. + /// + public BitNameSelectorPair?> Template { get; set; } = new(nameof(BitButtonGroupItem.Template)); + + /// + /// Text field name and selector of the custom input class. + /// + public BitNameSelectorPair Text { get; set; } = new(nameof(BitButtonGroupItem.Text)); +} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupOption.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupOption.cs new file mode 100644 index 0000000000..ce48fed62f --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonGroup/BitButtonGroupOption.cs @@ -0,0 +1,74 @@ +namespace Bit.BlazorUI; + +public partial class BitButtonGroupOption : ComponentBase, IDisposable +{ + private bool _disposed; + + + [CascadingParameter] protected BitButtonGroup Parent { get; set; } = default!; + + + /// + /// The custom CSS classes of the option. + /// + [Parameter] public string? Class { get; set; } + + /// + /// Name of an icon to render next to the option text + /// + [Parameter] public string? IconName { get; set; } + + /// + /// Whether or not the option is enabled. + /// + [Parameter] public bool IsEnabled { get; set; } = true; + + /// + /// A unique value to use as a key of the option + /// + [Parameter] public string? Key { get; set; } + + /// + /// Click event handler of the option. + /// + [Parameter] public EventCallback OnClick { get; set; } + + /// + /// The custom value for the style attribute of the option. + /// + [Parameter] public string? Style { get; set; } + + /// + /// The custom template for the option. + /// + [Parameter] public RenderFragment? Template { get; set; } + + /// + /// Text to render in the option + /// + [Parameter] public string? Text { get; set; } + + + + protected override async Task OnInitializedAsync() + { + Parent.RegisterOption(this); + + await base.OnInitializedAsync(); + } + + public void Dispose() + { + Dispose(true); + GC.SuppressFinalize(this); + } + + protected virtual void Dispose(bool disposing) + { + if (disposing is false || _disposed) return; + + Parent.UnregisterOption(this); + + _disposed = true; + } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonSize.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonSize.cs new file mode 100644 index 0000000000..7d7d09ff4d --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonSize.cs @@ -0,0 +1,19 @@ +namespace Bit.BlazorUI; + +public enum BitButtonSize +{ + /// + /// The small size button + /// + Small, + + /// + /// The medium size button + /// + Medium, + + /// + /// The large size button + /// + Large +} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonStyle.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonStyle.cs index 39f83aefb9..f926b047b9 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonStyle.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitButtonStyle.cs @@ -3,12 +3,17 @@ public enum BitButtonStyle { /// - /// The button with white text on a blue background + /// The button for primary actions that are high-emphasis /// Primary, /// - /// The button with black text on a white background + /// The button for important actions that are medium-emphasis /// - Standard + Standard, + + /// + /// The button for less-pronounced actions + /// + Text } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.razor index eb0f34d68c..2b5cc9fbcc 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.razor @@ -14,17 +14,15 @@ aria-label="@AriaLabel" aria-hidden="@AriaHidden" aria-describedby="@AriaDescription"> - - - @(PrimaryTemplate ?? ChildContent) - + + @(PrimaryTemplate ?? ChildContent) @if (SecondaryTemplate is not null) { @SecondaryTemplate } else { - @SecondaryText + @SecondaryText } @@ -41,15 +39,15 @@ else aria-label="@AriaLabel" aria-hidden="@AriaHidden" aria-describedby="@AriaDescription"> - - @(PrimaryTemplate ?? ChildContent) + + @(PrimaryTemplate ?? ChildContent) @if (SecondaryTemplate is not null) { @SecondaryTemplate } else { - @SecondaryText + @SecondaryText } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.razor.cs index 4efa701871..ed7c53e30d 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButton.razor.cs @@ -56,9 +56,9 @@ public BitButtonStyle ButtonStyle [Parameter] public RenderFragment? ChildContent { get; set; } /// - /// Custom CSS classes/styles for different parts of the BitCompoundButton. + /// Custom CSS classes for different parts of the BitCompoundButton. /// - [Parameter] public BitCompoundButtonClassStyles? ClassStyles { get; set; } + [Parameter] public BitCompoundButtonClassStyles? Classes { get; set; } /// /// The value of the href attribute of the link rendered by the BitCompoundButton. If provided, the component will be rendered as an anchor. @@ -85,6 +85,11 @@ public BitButtonStyle ButtonStyle /// [Parameter] public RenderFragment? SecondaryTemplate { get; set; } + /// + /// Custom CSS styles for different parts of the BitCompoundButton. + /// + [Parameter] public BitCompoundButtonClassStyles? Styles { get; set; } + /// /// Specifies target attribute of the link when the BitComponentButton renders as an anchor. /// @@ -100,11 +105,18 @@ public BitButtonStyle ButtonStyle protected override void RegisterCssClasses() { + ClassBuilder.Register(() => Classes?.Root); + ClassBuilder.Register(() => ButtonStyle == BitButtonStyle.Primary ? $"{RootElementClass}-pri" : $"{RootElementClass}-std"); } + protected override void RegisterCssStyles() + { + StyleBuilder.Register(() => Styles?.Root); + } + protected override void OnParametersSet() { if (IsEnabled is false) @@ -117,6 +129,7 @@ protected override void OnParametersSet() base.OnParametersSet(); } + protected virtual async Task HandleOnClick(MouseEventArgs e) { if (IsEnabled) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButtonClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButtonClassStyles.cs index 53ce867e3c..0e88f3bcbe 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButtonClassStyles.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitCompoundButton/BitCompoundButtonClassStyles.cs @@ -2,18 +2,23 @@ public class BitCompoundButtonClassStyles { + /// + /// Custom CSS classes/styles for the root element of the BitCompoundButton. + /// + public string? Root { get; set; } + /// /// Custom CSS classes/styles for the internal container of the BitCompoundButton. /// - public BitClassStylePair? Container { get; set; } + public string? Container { get; set; } /// /// Custom CSS classes/styles for the primary section of the BitCompoundButton. /// - public BitClassStylePair? Primary { get; set; } + public string? Primary { get; set; } /// /// Custom CSS classes/styles for the secondary section of the BitCompoundButton. /// - public BitClassStylePair? Secondary { get; set; } + public string? Secondary { get; set; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitIconButton/BitIconButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitIconButton/BitIconButton.razor index aa411dcd0f..50f6c1dce9 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitIconButton/BitIconButton.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitIconButton/BitIconButton.razor @@ -14,8 +14,8 @@ style="@StyleBuilder.Value" class="@ClassBuilder.Value" aria-describedby="@AriaDescription"> - - + + } @@ -31,8 +31,8 @@ else class="@ClassBuilder.Value" type="@_buttonType.GetValue()" aria-describedby="@AriaDescription"> - - + + } \ No newline at end of file diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitIconButton/BitIconButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitIconButton/BitIconButton.razor.cs index c30edc2cfd..01a1bf9cb9 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitIconButton/BitIconButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitIconButton/BitIconButton.razor.cs @@ -35,9 +35,9 @@ public partial class BitIconButton [Parameter] public BitButtonType? ButtonType { get; set; } /// - /// Custom CSS classes/styles for different parts of the BitIconButton component. + /// Custom CSS classes for different parts of the BitIconButton component. /// - [Parameter] public BitIconButtonClassStyles? ClassStyles { get; set; } + [Parameter] public BitIconButtonClassStyles? Classes { get; set; } /// /// URL the link points to, if provided, button renders as an anchor @@ -54,6 +54,11 @@ public partial class BitIconButton /// [Parameter] public EventCallback OnClick { get; set; } + /// + /// Custom CSS styles for different parts of the BitIconButton component. + /// + [Parameter] public BitIconButtonClassStyles? Styles { get; set; } + /// /// The tooltip to show when the mouse is placed on the icon button /// @@ -64,8 +69,19 @@ public partial class BitIconButton /// [Parameter] public string? Target { get; set; } + protected override string RootElementClass => "bit-icb"; + protected override void RegisterCssClasses() + { + ClassBuilder.Register(() => Classes?.Root); + } + + protected override void RegisterCssStyles() + { + StyleBuilder.Register(() => Styles?.Root); + } + protected override void OnParametersSet() { if (IsEnabled is false) @@ -78,6 +94,7 @@ protected override void OnParametersSet() base.OnParametersSet(); } + protected virtual async Task HandleOnClick(MouseEventArgs e) { if (IsEnabled) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitIconButton/BitIconButtonClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitIconButton/BitIconButtonClassStyles.cs index 417264d8d2..27facc440b 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitIconButton/BitIconButtonClassStyles.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitIconButton/BitIconButtonClassStyles.cs @@ -3,12 +3,17 @@ public class BitIconButtonClassStyles { /// - /// Custom CSS classes/styles for the icon element. + /// Custom CSS classes/styles for the root element of the BitIconButton. /// - public BitClassStylePair? Icon { get; set; } + public string? Root { get; set; } /// - /// Custom CSS classes/styles for the icon container. + /// Custom CSS classes/styles for the main container of the BitIconButton. /// - public BitClassStylePair? Container { get; set; } + public string? Container { get; set; } + + /// + /// Custom CSS classes/styles for the Icon of the BitIconButton. + /// + public string? Icon { get; set; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.razor b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.razor index b3c0186f9f..0959dd4382 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.razor @@ -19,11 +19,11 @@ } else { -
-
+
+
@if (LoadingLabel.HasValue()) { -
+
@LoadingLabel
} diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.razor.cs index 8f648cfba5..db6f98bbb6 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButton.razor.cs @@ -56,9 +56,9 @@ public BitButtonStyle ButtonStyle [Parameter] public RenderFragment? ChildContent { get; set; } /// - /// Custom CSS classes/styles for different parts of the BitLoadingButton. + /// Custom CSS classes for different parts of the BitLoadingButton. /// - [Parameter] public BitLoadingButtonClassStyles? ClassStyles { get; set; } + [Parameter] public BitLoadingButtonClassStyles? Classes { get; set; } /// /// Determine whether the button is in loading mode or not. @@ -85,6 +85,11 @@ public BitButtonStyle ButtonStyle /// [Parameter] public EventCallback OnClick { get; set; } + /// + /// Custom CSS styles for different parts of the BitLoadingButton. + /// + [Parameter] public BitLoadingButtonClassStyles? Styles { get; set; } + /// /// The tooltip to show when the mouse is placed on the icon button. /// @@ -93,6 +98,20 @@ public BitButtonStyle ButtonStyle protected override string RootElementClass => "bit-ldb"; + protected override void RegisterCssClasses() + { + ClassBuilder.Register(() => Classes?.Root); + + ClassBuilder.Register(() => ButtonStyle == BitButtonStyle.Primary + ? $"{RootElementClass}-pri" + : $"{RootElementClass}-std"); + } + + protected override void RegisterCssStyles() + { + StyleBuilder.Register(() => Styles?.Root); + } + protected override void OnParametersSet() { if (IsEnabled is false) @@ -105,13 +124,6 @@ protected override void OnParametersSet() base.OnParametersSet(); } - protected override void RegisterCssClasses() - { - ClassBuilder.Register(() => ButtonStyle == BitButtonStyle.Primary - ? $"{RootElementClass}-pri" - : $"{RootElementClass}-std"); - } - private string GetLabelPositionClass() => LoadingLabelPosition switch diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButtonClassStyles.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButtonClassStyles.cs index 0e03a121bf..dafa1c9d5f 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButtonClassStyles.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitLoadingButton/BitLoadingButtonClassStyles.cs @@ -2,18 +2,23 @@ public class BitLoadingButtonClassStyles { + /// + /// Custom CSS classes/styles for the root element of the BitLoadingButton. + /// + public string? Root { get; set; } + /// /// Custom CSS classes/styles for the internal container of the BitLoadingButton. /// - public BitClassStylePair? LoadingContainer { get; set; } + public string? LoadingContainer { get; set; } /// - /// Custom CSS classes/styles for the Spinner of the BitLoadingButton. + /// Custom CSS classes/styles for the spinner of the BitLoadingButton. /// - public BitClassStylePair? Spinner { get; set; } + public string? Spinner { get; set; } /// - /// Custom CSS classes/styles for the Label of the BitLoadingButton. + /// Custom CSS classes/styles for the label of the BitLoadingButton. /// - public BitClassStylePair? LoadingLabel { get; set; } + public string? LoadingLabel { get; set; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitMenuButton/BitMenuButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitMenuButton/BitMenuButton.razor.cs index 7d602c7b35..567a74ee36 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitMenuButton/BitMenuButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitMenuButton/BitMenuButton.razor.cs @@ -417,7 +417,19 @@ private async Task ToggleCallout() { if (IsEnabled is false) return; - await _js.ToggleCallout(_dotnetObj, _Id, _calloutId, _isCalloutOpen, false, BitDropDirection.TopAndBottom, false, "", 0, "", ""); + await _js.ToggleCallout(_dotnetObj, + _Id, + _calloutId, + _isCalloutOpen, + BitResponsiveMode.None, + BitDropDirection.TopAndBottom, + false, + "", + 0, + "", + "", + false, + RootElementClass); } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitSplitButton/BitSplitButton.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitSplitButton/BitSplitButton.razor.cs index b678ef0db1..00105059c7 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitSplitButton/BitSplitButton.razor.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/BitSplitButton/BitSplitButton.razor.cs @@ -508,7 +508,19 @@ private async Task ToggleCallout() { if (IsEnabled is false) return; - await _js.ToggleCallout(_dotnetObj, _Id, _calloutId, _isCalloutOpen, false, BitDropDirection.TopAndBottom, false, "", 0, "", ""); + await _js.ToggleCallout(_dotnetObj, + _Id, + _calloutId, + _isCalloutOpen, + BitResponsiveMode.None, + BitDropDirection.TopAndBottom, + false, + "", + 0, + "", + "", + false, + RootElementClass); } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileInfo.cs b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileInfo.cs index e8f18c734e..cad4811b20 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileInfo.cs +++ b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileInfo.cs @@ -9,7 +9,7 @@ public class BitFileInfo [JsonPropertyName("size")] public long Size { get; set; } - public long TotalSizeOfUploaded { get; set; } + public long TotalSizeOfUploaded { get; internal set; } internal bool PauseUploadRequested { get; set; } @@ -17,7 +17,8 @@ public class BitFileInfo internal long SizeOfLastChunkUploaded { get; set; } - [JsonIgnore] public string? Message { get; set; } - [JsonIgnore] public BitFileUploadStatus Status { get; set; } + [JsonIgnore] public int Index { get; internal set; } + [JsonIgnore] public string? Message { get; internal set; } + [JsonIgnore] public BitFileUploadStatus Status { get; internal set; } [JsonIgnore] internal DateTime? StartTimeUpload { get; set; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.razor b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.razor index adc84ca1a4..f3ecccac68 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.razor +++ b/src/BlazorUI/Bit.BlazorUI/Components/FileUpload/BitFileUpload.razor @@ -5,22 +5,23 @@ id="@_Id" style="@StyleBuilder.Value" class="@ClassBuilder.Value"> + @if (LabelTemplate is not null) { -