Skip to content

Commit

Permalink
[HxButton] To be able to set different icon color than Button text #466
Browse files Browse the repository at this point in the history
  • Loading branch information
@Harvey1214
Harvey1214 committed Feb 17, 2023
1 parent 34b987b commit e33210a
Show file tree
Hide file tree
Showing 4 changed files with 66 additions and 52 deletions.
111 changes: 60 additions & 51 deletions ...nts.Web.Bootstrap.Documentation/Pages/Components/HxButtonDoc/HxButton_Documentation.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,67 +2,76 @@
@attribute [Route("/components/" + nameof(HxSubmit))]

<ComponentApiDoc Type="typeof(HxButton)">
<DocHeading Title="Basic usage" />
<Demo Type="typeof(HxButton_Demo_Basic)" Tabs="false" />
<MainContent>
<DocHeading Title="Basic usage" />
<Demo Type="typeof(HxButton_Demo_Basic)" Tabs="false" />

<p>Several predefined button styles are included, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
<Demo Type="typeof(HxButton_Demo_Colors)" />
<p>Several predefined button styles are included, each serving its own semantic purpose, with a few extras thrown in for more control.</p>
<Demo Type="typeof(HxButton_Demo_Colors)" />

<DocHeading Title="Outline buttons" />
<p>You can remove the background with <code>Outline="true"</code>:</p>
<Demo Type="typeof(HxButton_Demo_Outline)" />
<DocHeading Title="Outline buttons" />
<p>You can remove the background with <code>Outline="true"</code>:</p>
<Demo Type="typeof(HxButton_Demo_Outline)" />

<DocHeading Title="Sizes" />
<Demo Type="typeof(HxButton_Demo_Sizes)" Tabs="false" />
<Demo Type="typeof(HxButton_Demo_Sizes_Small)" Tabs="false" />
<DocHeading Title="Sizes" />
<Demo Type="typeof(HxButton_Demo_Sizes)" Tabs="false" />
<Demo Type="typeof(HxButton_Demo_Sizes_Small)" Tabs="false" />

<DocHeading Title="Icons" />
<p>You can add an icon to the button by using the <code>Icon</code> parameter. The position of the icon can be changed with <code>IconPlacement</code>.</p>
<Demo Type="typeof(HxButton_Demo_Icons)" />
<DocHeading Title="Icons" />
<p>You can add an icon to the button by using the <code>Icon</code> parameter. The position of the icon can be changed with <code>IconPlacement</code>.</p>
<Demo Type="typeof(HxButton_Demo_Icons)" />

<DocHeading Title="Spinners" />
<p>Button will show a spinner whenever the <code>OnClick</code> handler returns an incomplete awaitable <code>Task</code>.</p>
<Demo Type="typeof(HxButton_Demo_BasicSpinner)" Tabs="false" />
<DocHeading Title="Spinners" />
<p>Button will show a spinner whenever the <code>OnClick</code> handler returns an incomplete awaitable <code>Task</code>.</p>
<Demo Type="typeof(HxButton_Demo_BasicSpinner)" Tabs="false" />

<DocHeading Title="OnValidClick with spinner" Level="3" />
<Demo Type="typeof(HxButton_Demo_OnValidClickWithSpinner)" />
<DocHeading Title="OnValidClick with spinner" Level="3" />
<Demo Type="typeof(HxButton_Demo_OnValidClickWithSpinner)" />

<DocHeading Title="Manual spinner" Level="3" />
<Demo Type="typeof(HxButton_Demo_ManualSpinner)" />
<DocHeading Title="Manual spinner" Level="3" />
<Demo Type="typeof(HxButton_Demo_ManualSpinner)" />

<DocHeading Title="Spinner &amp; Single click protection" Id="spinner-and-single-click-protection" Level="3" />
<DocAlert Type="DocAlertType.Warning">
EditForm's <code>OnSubmit</code> events are not captured for spinner automation. Use HxButton's <code>OnClick</code>, <code>OnValidClick</code> and <code>OnInvalidClick</code> instead.
</DocAlert>
<DocAlert Type="DocAlertType.Info">
If (and only if) there is any of the <code>OnClick</code> handlers set, the single click protection sets the button to <code>disabled</code> during the callback (usually together with the Spinner).
It is intentionally not set, if there is no <code>OnClick</code> handler, as there might be an <code>OnSubmit</code> handler of the containing <code>EditForm</code>
set which would have been blocked if the button is disabled (see above).
</DocAlert>
<DocHeading Title="Spinner &amp; Single click protection" Id="spinner-and-single-click-protection" Level="3" />
<DocAlert Type="DocAlertType.Warning">
EditForm's <code>OnSubmit</code> events are not captured for spinner automation. Use HxButton's <code>OnClick</code>, <code>OnValidClick</code> and <code>OnInvalidClick</code> instead.
</DocAlert>
<DocAlert Type="DocAlertType.Info">
If (and only if) there is any of the <code>OnClick</code> handlers set, the single click protection sets the button to <code>disabled</code> during the callback (usually together with the Spinner).
It is intentionally not set, if there is no <code>OnClick</code> handler, as there might be an <code>OnSubmit</code> handler of the containing <code>EditForm</code>
set which would have been blocked if the button is disabled (see above).
</DocAlert>

<DocHeading Title="Button with a badge" Id="badge" />
<Demo Type="typeof(HxButton_Demo_Badge)" Tabs="false" />

<DocHeading Title="Button with a tooltip" Id="tooltip" />
<p>You can use <code>Tooltip</code> parameter to set button's tooltip:</p>
<Demo Type="typeof(HxButton_Demo_Tooltip)" Tabs="false" />
<DocHeading Title="Tooltip, wrapper and CSS classes" Level="3" />
<DocAlert Type="DocAlertType.Warning">
<p>
The <code>&lt;button /&gt;</code> is wrapped with a <code>&lt;span&gt;...&lt;/span&gt;</code> wrapper whenever a <code>Tooltip</code> (or <code>TooltipWrapperCssClass</code>) is set.
For most scenarios you will then use <code>TooltipWrapperCssClass</code> for your layout classes no matter there is a chance the tooltip text remains unset (e.g. in dynamic scenarios).>
</p>
<p>
The wrapping <code>&lt;span&gt;...&lt;/span&gt;</code> is always decorated with <code>.d-inline-block</code> class (combined with <code>TooltipWrapperCssClass</code>) to align the behavior with plain <code>.btn</code>.
Feel free to override the behavior by setting <code>TooltipWrapperCssClass</code> to any other <a href="https://getbootstrap.com/docs/5.2/utilities/display/">display utility class</a> of your choice.
</p>
<p>
Sometimes the wrapping <code>&lt;span&gt;...&lt;/span&gt;</code> breaks the HTML structure anticipated by some Bootstrap components,
i.e. <a href="/components/HxButtonGroup">button-groups (<code>HxButtonGroup</code>)</a>. Combining button tooltips with button-groups is not supported.
</p>
</DocAlert>
<Demo Type="typeof(HxButton_Demo_TooltipCssClasses)" Tabs="false" />
<DocHeading Title="Button with a badge" Id="badge" />
<Demo Type="typeof(HxButton_Demo_Badge)" Tabs="false" />

<DocHeading Title="Button with a tooltip" Id="tooltip" />
<p>You can use <code>Tooltip</code> parameter to set button's tooltip:</p>
<Demo Type="typeof(HxButton_Demo_Tooltip)" Tabs="false" />
<DocHeading Title="Tooltip, wrapper and CSS classes" Level="3" />
<DocAlert Type="DocAlertType.Warning">
<p>
The <code>&lt;button /&gt;</code> is wrapped with a <code>&lt;span&gt;...&lt;/span&gt;</code> wrapper whenever a <code>Tooltip</code> (or <code>TooltipWrapperCssClass</code>) is set.
For most scenarios you will then use <code>TooltipWrapperCssClass</code> for your layout classes no matter there is a chance the tooltip text remains unset (e.g. in dynamic scenarios).>
</p>
<p>
The wrapping <code>&lt;span&gt;...&lt;/span&gt;</code> is always decorated with <code>.d-inline-block</code> class (combined with <code>TooltipWrapperCssClass</code>) to align the behavior with plain <code>.btn</code>.
Feel free to override the behavior by setting <code>TooltipWrapperCssClass</code> to any other <a href="https://getbootstrap.com/docs/5.2/utilities/display/">display utility class</a> of your choice.
</p>
<p>
Sometimes the wrapping <code>&lt;span&gt;...&lt;/span&gt;</code> breaks the HTML structure anticipated by some Bootstrap components,
i.e. <a href="/components/HxButtonGroup">button-groups (<code>HxButtonGroup</code>)</a>. Combining button tooltips with button-groups is not supported.
</p>
</DocAlert>
<Demo Type="typeof(HxButton_Demo_TooltipCssClasses)" Tabs="false" />
</MainContent>
<CssVariables>
<ComponentApiDocCssVariable Name="--hx-button-space-between-text-icon" Default="0.25rem">
Space between the text and the icon.
</ComponentApiDocCssVariable>
<ComponentApiDocCssVariable Name="--hx-button-icon-color" Default="unset">
Color of the icon. By default, icon color is the same as text color.
</ComponentApiDocCssVariable>
</CssVariables>
</ComponentApiDoc>

<ComponentApiDoc Type="typeof(HxSubmit)" />
2 changes: 1 addition & 1 deletion Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
}
else if (this.IconEffective is not null)
{
<HxIcon Icon="this.IconEffective" />
<HxIcon Icon="this.IconEffective" CssClass="hx-button-icon" />
}

@if (!String.IsNullOrEmpty(this.Text) || (ChildContent != null))
Expand Down
4 changes: 4 additions & 0 deletions Havit.Blazor.Components.Web.Bootstrap/Buttons/HxButton.razor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
1 change: 1 addition & 0 deletions Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit e33210a

Please sign in to comment.