From e33210a5cc0a6906c6b2e6fefeb7d68d62c6882f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mikul=C3=A1=C5=A1=20Hobl=C3=ADk?= Date: Fri, 17 Feb 2023 16:23:50 +0100 Subject: [PATCH] [HxButton] To be able to set different icon color than Button text #466 --- .../HxButtonDoc/HxButton_Documentation.razor | 111 ++++++++++-------- .../Buttons/HxButton.razor | 2 +- .../Buttons/HxButton.razor.css | 4 + .../wwwroot/defaults.css | 1 + 4 files changed, 66 insertions(+), 52 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxButtonDoc/HxButton_Documentation.razor b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxButtonDoc/HxButton_Documentation.razor index e3707eb3..29237c4c 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxButtonDoc/HxButton_Documentation.razor +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxButtonDoc/HxButton_Documentation.razor @@ -2,67 +2,76 @@ @attribute [Route("/components/" + nameof(HxSubmit))] - - + + + -

Several predefined button styles are included, each serving its own semantic purpose, with a few extras thrown in for more control.

- +

Several predefined button styles are included, each serving its own semantic purpose, with a few extras thrown in for more control.

+ - -

You can remove the background with Outline="true":

- + +

You can remove the background with Outline="true":

+ - - - + + + - -

You can add an icon to the button by using the Icon parameter. The position of the icon can be changed with IconPlacement.

- + +

You can add an icon to the button by using the Icon parameter. The position of the icon can be changed with IconPlacement.

+ - -

Button will show a spinner whenever the OnClick handler returns an incomplete awaitable Task.

- + +

Button will show a spinner whenever the OnClick handler returns an incomplete awaitable Task.

+ - - + + - - + + - - - EditForm's OnSubmit events are not captured for spinner automation. Use HxButton's OnClick, OnValidClick and OnInvalidClick instead. - - - If (and only if) there is any of the OnClick handlers set, the single click protection sets the button to disabled during the callback (usually together with the Spinner). - It is intentionally not set, if there is no OnClick handler, as there might be an OnSubmit handler of the containing EditForm - set which would have been blocked if the button is disabled (see above). - + + + EditForm's OnSubmit events are not captured for spinner automation. Use HxButton's OnClick, OnValidClick and OnInvalidClick instead. + + + If (and only if) there is any of the OnClick handlers set, the single click protection sets the button to disabled during the callback (usually together with the Spinner). + It is intentionally not set, if there is no OnClick handler, as there might be an OnSubmit handler of the containing EditForm + set which would have been blocked if the button is disabled (see above). + - - - - -

You can use Tooltip parameter to set button's tooltip:

- - - -

- The <button /> is wrapped with a <span>...</span> wrapper whenever a Tooltip (or TooltipWrapperCssClass) is set. - For most scenarios you will then use TooltipWrapperCssClass for your layout classes no matter there is a chance the tooltip text remains unset (e.g. in dynamic scenarios).> -

-

- The wrapping <span>...</span> is always decorated with .d-inline-block class (combined with TooltipWrapperCssClass) to align the behavior with plain .btn. - Feel free to override the behavior by setting TooltipWrapperCssClass to any other display utility class of your choice. -

-

- Sometimes the wrapping <span>...</span> breaks the HTML structure anticipated by some Bootstrap components, - i.e. button-groups (HxButtonGroup). Combining button tooltips with button-groups is not supported. -

- - + + + +

You can use Tooltip parameter to set button's tooltip:

+ + + +

+ The <button /> is wrapped with a <span>...</span> wrapper whenever a Tooltip (or TooltipWrapperCssClass) is set. + For most scenarios you will then use TooltipWrapperCssClass for your layout classes no matter there is a chance the tooltip text remains unset (e.g. in dynamic scenarios).> +

+

+ The wrapping <span>...</span> is always decorated with .d-inline-block class (combined with TooltipWrapperCssClass) to align the behavior with plain .btn. + Feel free to override the behavior by setting TooltipWrapperCssClass to any other display utility class of your choice. +

+

+ Sometimes the wrapping <span>...</span> breaks the HTML structure anticipated by some Bootstrap components, + i.e. button-groups (HxButtonGroup). Combining button tooltips with button-groups is not supported. +

+ + + + + + Space between the text and the icon. + + + Color of the icon. By default, icon color is the same as text color. + + diff --git a/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor b/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor index f7e368be..5058121b 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor @@ -23,7 +23,7 @@ } else if (this.IconEffective is not null) { - + } @if (!String.IsNullOrEmpty(this.Text) || (ChildContent != null)) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor.css index 47e8efdb..38fbe5d0 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor.css +++ b/Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor.css @@ -5,3 +5,7 @@ ::deep .hx-button-text-icon-spacer { margin-left: var(--hx-button-space-between-text-icon); } + +::deep .hx-button-icon { + color: var(--hx-button-icon-color); +} diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css index 972da219..c6eea6df 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css +++ b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css @@ -8,6 +8,7 @@ --hx-autosuggest-dropdown-menu-height: 300px; /* HxButton */ --hx-button-space-between-text-icon: 0.25rem; + --hx-button-icon-color: unset; /* HxSidebar */ --hx-sidebar-background-color: transparent; --hx-sidebar-collapsed-width: 72px;