Skins removal (HxButton, HxContextMenuItem), consolidation of HxButto…

…n.Defaults + release 1.3.0
havit · Sep 20, 2021 · bdf7a0c · bdf7a0c
1 parent 481012c
commit bdf7a0c
Show file tree

Hide file tree

Showing 36 changed files with 159 additions and 860 deletions.
diff --git a/BlazorAppTest/Pages/HxButtonTest.razor b/BlazorAppTest/Pages/HxButtonTest.razor
@@ -2,10 +2,10 @@
 
 <h1>HxButton</h1>
 
-<HxButton Skin="@ButtonSkins.OK" Icon="BootstrapIcon.Bicycle" OnClick="HandleOKClick" />
-<HxButton Skin="@ButtonSkins.Cancel" Size="ButtonSize.Large" OnClick="HandleCancelClick" />
-<HxButton Icon="BootstrapIcon.X" Skin="@ButtonSkins.Save" />
-<HxButton Skin="@ButtonSkins.Filter" />
+<HxButton Text="OK" Color="ThemeColor.Primary" Icon="BootstrapIcon.Bicycle" OnClick="HandleOKClick" />
+<HxButton Text="Cancel" Color="ThemeColor.Secondary" Size="ButtonSize.Large" OnClick="HandleCancelClick" />
+<HxButton Icon="BootstrapIcon.X" Text="Save" Color="ThemeColor.Primary" />
+<HxButton Icon="BootstrapIcon.Filter" Color="ThemeColor.Light" />
 
 <HxButton Text="Click me..." Color="ThemeColor.Warning" />
 <HxButton Text="Outline..." Color="ThemeColor.Danger" Outline="true" />

diff --git a/BlazorAppTest/Pages/HxDialogBaseComponents/MyDialog.razor b/BlazorAppTest/Pages/HxDialogBaseComponents/MyDialog.razor
@@ -2,14 +2,14 @@
 
 <HxModal Title="What is on your dice?" @ref="modal">
 	<BodyTemplate>
-		<HxButton Text="1" Color="ThemeColor.Secondary" OnClick="async () => await HideAsync(1)" />
-		<HxButton Text="2" Color="ThemeColor.Secondary" OnClick="async () => await HideAsync(2)" />
-		<HxButton Text="3" Color="ThemeColor.Secondary" OnClick="async () => await HideAsync(3)" />
-		<HxButton Text="4" Color="ThemeColor.Secondary" OnClick="async () => await HideAsync(4)" />
-		<HxButton Text="5" Color="ThemeColor.Secondary" OnClick="async () => await HideAsync(5)" />
-		<HxButton Text="6" Color="ThemeColor.Secondary" OnClick="async () => await HideAsync(6)" />
+		<HxButton Text="1" Color="ThemeColor.Primary" OnClick="async () => await HideAsync(1)" />
+		<HxButton Text="2" Color="ThemeColor.Primary" OnClick="async () => await HideAsync(2)" />
+		<HxButton Text="3" Color="ThemeColor.Primary" OnClick="async () => await HideAsync(3)" />
+		<HxButton Text="4" Color="ThemeColor.Primary" OnClick="async () => await HideAsync(4)" />
+		<HxButton Text="5" Color="ThemeColor.Primary" OnClick="async () => await HideAsync(5)" />
+		<HxButton Text="6" Color="ThemeColor.Primary" OnClick="async () => await HideAsync(6)" />
 	</BodyTemplate>
 	<FooterTemplate>
-		<HxButton Skin="ButtonSkins.Close" Color="ThemeColor.Secondary" OnClick="async () => await HideAsCancelledAsync()" />
+		<HxButton Text="Close" Color="ThemeColor.Secondary" OnClick="async () => await HideAsCancelledAsync()" />
 	</FooterTemplate>
 </HxModal>
diff --git a/BlazorAppTest/Pages/HxFilterFormTest.razor b/BlazorAppTest/Pages/HxFilterFormTest.razor
@@ -17,7 +17,7 @@
 	</HxInputText>
 	<HxInputNumber Label="Number 1" @bind-Value="@context.Number1" />
 
-	<HxSubmit Skin="ButtonSkins.Apply" />
+	<HxSubmit Text="Apply" Color="ThemeColor.Primary" />
 
 	<h2>Values</h2>
 

diff --git a/BlazorAppTest/Pages/HxGridTest.razor b/BlazorAppTest/Pages/HxGridTest.razor
@@ -12,12 +12,6 @@
 			</HeaderTemplate>
 		</HxGridColumn>
 		<HxGridColumn TItem="CultureInfo" HeaderText="Name" ItemTextSelector="@(item => item.Name)" SortKeySelector="@(item => item.Name)" ItemCssClassSelector="@(item => item.Name.Contains('Z') ? "text-end" : null)" />
-		<HxGridColumn TItem="CultureInfo" HeaderText="Order">
-			<ItemTemplate Context="item">
-				<HxButton Skin="ButtonSkins.Up" />
-				<HxButton Skin="ButtonSkins.Down" />
-			</ItemTemplate>
-		</HxGridColumn>
 		<HxGridColumn TItem="CultureInfo" HeaderText="Link">
 			<ItemTemplate>
 				<a href="https://www.havit.cz" @onclick:stopPropagation>link to a page</a> @* TODO HxLink, který bude mít default stopPropagation ??? *@
@@ -31,8 +25,6 @@
 			<HxContextMenuItem ConfirmationQuestion="Jako fakt?" OnClick="async () => await AlarmClicked(item)">
 				<HxIcon Icon="BootstrapIcon.Alarm" /> Bacha na to!
 			</HxContextMenuItem>
-			<HxContextMenuItem Skin="ContextMenuItemSkins.Delete" />
-
 			<HxContextMenuItem Enabled="false" Text="Disabled" OnClick="async () => await AlarmClicked(item)" />
 			<HxContextMenuItem Enabled="false" ConfirmationQuestion="Jako fakt na disabled prvku?" OnClick="async () => await AlarmClicked(item)">
 				<HxIcon Icon="BootstrapIcon.Alarm" /> Disabled with icon
@@ -62,7 +54,7 @@
 		<HxGridColumn TItem="CultureInfo" HeaderText="Name" ItemTextSelector="@(item => item.Name)" />
 	</Columns>
 	<EmptyDataTemplate>
-		<HxButton Skin="ButtonSkins.New" />
+		<HxButton Text="Create new item... " Color="ThemeColor.Primary" />
 	</EmptyDataTemplate>
 </HxGrid>
 

diff --git a/BlazorAppTest/Pages/HxGrid_InfiniteScroll_Test.razor b/BlazorAppTest/Pages/HxGrid_InfiniteScroll_Test.razor
@@ -15,7 +15,7 @@
 	</Columns>
 	<ContextMenu Context="item">
 		<HxContextMenu>
-			<HxContextMenuItem Skin="ContextMenuItemSkins.Delete" />
+			<HxContextMenuItem Text="Delete" Icon="BootstrapIcon.Trash" />
 		</HxContextMenu>
 	</ContextMenu>
 </HxGrid>

diff --git a/BlazorAppTest/Pages/HxListLayoutTest.razor b/BlazorAppTest/Pages/HxListLayoutTest.razor
@@ -2,7 +2,7 @@
 
 <h1>HxListLayout</h1>
 
-<HxListLayout Title="Nadpis" TFilterModel="FilterModelDto" FilterModel="filterModel" FilterModelChanged="HandleFilterModelChanged">
+<HxListLayout Title="Title" TFilterModel="FilterModelDto" FilterModel="filterModel" FilterModelChanged="HandleFilterModelChanged">
 	<NamedViewsTemplate>
 		<HxNamedViewList TFilterModel="FilterModelDto" FilterModel="filterModel" FilterModelChanged="HandleFilterModelChanged" NamedViews="namedViews" OnNamedViewSelected="NamedViewSelected" /> @* TODO *@
 	</NamedViewsTemplate>
@@ -16,7 +16,7 @@
         <HxInputNumber Label="Maximum Age" @bind-Value="filterContext.MaximumAge" />
     </FilterTemplate>
 	<CommandsTemplate>
-		<HxButton Text="Add" Skin="ButtonSkins.New" Icon="BootstrapIcon.Plus" OnClick="NewItemClicked" />
+		<HxButton Text="Add" Icon="BootstrapIcon.Plus" Color="ThemeColor.Secondary" OnClick="NewItemClicked" />
 	</CommandsTemplate>
 	<DataTemplate>
 		<HxGrid @ref="gridComponent" TItem="DataItemDto" PageSize="20" DataProvider="LoadDataItems" SelectedDataItem="currentItem" SelectedDataItemChanged="HandleSelectedDataItemChanged">
@@ -29,7 +29,7 @@
             </Columns>
 			<ContextMenu Context="item">
 				<HxContextMenu>
-					<HxContextMenuItem Text="Smazat" OnClick="async () => await DeleteItemClicked(item)" ConfirmationQuestion="@($"Do you realy want to delete {item.Name}?")" />
+					<HxContextMenuItem Text="Delete" OnClick="async () => await DeleteItemClicked(item)" ConfirmationQuestion="@($"Do you realy want to delete {item.Name}?")" />
 				</HxContextMenu>
 			</ContextMenu>
 		</HxGrid>

diff --git a/BlazorAppTest/Pages/HxListLayoutWithoutFilterTest.razor b/BlazorAppTest/Pages/HxListLayoutWithoutFilterTest.razor
@@ -4,7 +4,7 @@
 
 <HxListLayout Title="Title" TFilterModel="HxListLayout.NoFilter">
 	<CommandsTemplate>
-		<HxButton Text="New invoice" Skin="ButtonSkins.New" CssClass="ms-1" OnClick="@HandleNewItemClicked" />
+		<HxButton Text="New invoice" Color="ThemeColor.Secondary" CssClass="ms-1" OnClick="@HandleNewItemClicked" />
 	</CommandsTemplate>
 	<DataTemplate>
 		<HxGrid @ref="gridComponent" TItem="DataItemDto" PageSize="20" DataProvider="LoadDataItems">

diff --git a/BlazorAppTest/Pages/HxModalTest.razor b/BlazorAppTest/Pages/HxModalTest.razor
@@ -11,7 +11,9 @@
 
 		<HxModal @ref="myNestedModal" />
 	</BodyTemplate>
-	<FooterTemplate><HxButton Skin="ButtonSkins.Close" OnClick="HandleHideClick" Color="ThemeColor.Primary" /></FooterTemplate>
+	<FooterTemplate>
+		<HxButton Text="Close" OnClick="HandleHideClick" Color="ThemeColor.Secondary" />
+	</FooterTemplate>
 </HxModal>
 
 @code

diff --git a/...r.Components.Web.Bootstrap.Documentation/Pages/Components/HxButtonDoc/HxButton_Demo.razor b/...r.Components.Web.Bootstrap.Documentation/Pages/Components/HxButtonDoc/HxButton_Demo.razor
diff --git a/....Web.Bootstrap.Documentation/Pages/Components/HxButtonDoc/HxButton_Demo_CustomSkins.razor b/....Web.Bootstrap.Documentation/Pages/Components/HxButtonDoc/HxButton_Demo_CustomSkins.razor
diff --git a/...onents.Web.Bootstrap.Documentation/Pages/Components/HxButtonDoc/HxButton_Demo_Skins.razor b/...onents.Web.Bootstrap.Documentation/Pages/Components/HxButtonDoc/HxButton_Demo_Skins.razor
diff --git a/...nts.Web.Bootstrap.Documentation/Pages/Components/HxButtonDoc/HxButton_Documentation.razor b/...nts.Web.Bootstrap.Documentation/Pages/Components/HxButtonDoc/HxButton_Documentation.razor
@@ -15,26 +15,16 @@
     <Demo Type="typeof(HxButton_Demo_Sizes)" Tabs="false" />
     <Demo Type="typeof(HxButton_Demo_Sizes_Small)" Tabs="false" />
 
-    <h3>Skins</h3>
-    <p>Common buttons (OK, Save, Apply, Export, ...) can be defined using a skin. Skin is a shared configuration of a button defined in this library or in a custom code. Skins are localizable, embedded skins are localized (English, Czech).</p>
-    <p>Skins are used as readonly instances (strong-type), no string identifiers (such as SkinID in WebForms) are used.</p>
-    <p>See the demo on how to define custom skins. To make a skin localizable, use <code>ResourceType</code> property to set where to find the translations.</p>
-    <p>See <TypeLink Type="typeof(ButtonSkins)">available skins</TypeLink>.</p>
-    <Demo Type="typeof(HxButton_Demo_Skins)" Tabs="false" />
-
-    <h3>Custom Skins</h3>
-    <p>Create custom reusable skins for the button configurations you use the most often.</p>
-    <Demo Type="typeof(HxButton_Demo_CustomSkins)" Tabs="false" />
-
     <h3>Spinners</h3>
     <Demo Type="typeof(HxButton_Demo_BasicSpinner)" Tabs="false" />
 
-    <h5>OnValidClick with spinner</h5>
+    <h4>OnValidClick with spinner</h4>
     <Demo Type="typeof(HxButton_Demo_OnValidClickWithSpinner)" />
-    <h5>Manual Spinner</h5>
+
+    <h4>Manual Spinner</h4>
     <Demo Type="typeof(HxButton_Demo_ManualSpinner)" />
 
-    <h3>Spinner &amp; Single click protection</h3>
+    <h4>Spinner &amp; Single click protection</h4>
     <HxAlert Color="ThemeColor.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.
     </HxAlert>
@@ -44,9 +34,6 @@
         set which would have been blocked if the button is disabled (see above).
     </HxAlert>
 
-    <h3>HxSubmit</h3>
-    <p>There is a <code>HxSubmit</code> component (as direct ancestor of <code>HxButton</code>) which renders as <code>&lt;button type="submit"&gt;</code>. The API is the same.</p>
-
     <h3>Button with a badge</h3>
     <Demo Type="typeof(HxButton_Demo_Badge)" Tabs="false" />
 

diff --git a/...omponents.Web.Bootstrap.Documentation/Pages/Components/HxDialogBaseDoc/CustomDialog.razor b/...omponents.Web.Bootstrap.Documentation/Pages/Components/HxDialogBaseDoc/CustomDialog.razor
@@ -10,6 +10,6 @@
 		<HxButton Text="6" Color="ThemeColor.Secondary" OnClick="async () => await HideAsync(6)" />
 	</BodyTemplate>
 	<FooterTemplate>
-		<HxButton Skin="ButtonSkins.Close" Color="ThemeColor.Secondary" OnClick="async () => await HideAsCancelledAsync()" />
+		<HxButton Text="Close" Color="ThemeColor.Secondary" OnClick="async () => await HideAsCancelledAsync()" />
 	</FooterTemplate>
 </HxModal>
diff --git a/...ents.Web.Bootstrap.Documentation/Pages/Components/HxFilterFormDoc/HxFilterForm_Demo.razor b/...ents.Web.Bootstrap.Documentation/Pages/Components/HxFilterFormDoc/HxFilterForm_Demo.razor
@@ -12,7 +12,7 @@
     </HxInputText>
     <HxInputNumber Label="Number 1" @bind-Value="@context.Number1" />
 
-    <HxSubmit Skin="ButtonSkins.Apply" />
+    <HxSubmit Text="Apply" Color="ThemeColor.Primary" />
 
     <h2>Values</h2>
 

diff --git a/...Bootstrap.Documentation/Pages/Components/HxFilterFormDoc/HxFilterForm_Documentation.razor b/...Bootstrap.Documentation/Pages/Components/HxFilterFormDoc/HxFilterForm_Documentation.razor
@@ -1,5 +1,14 @@
 @attribute [Route("/components/" + nameof(HxFilterForm<string>))]
 
 <ComponentApiDoc Type="typeof(HxFilterForm<>)">
-    <Demo Type="typeof(HxFilterForm_Demo)" />
+
+	<h3>Used in @nameof(HxListLayout)</h3>
+	<p>
+		See <a href="/components/@nameof(HxListLayout)">@nameof(HxListLayout)</a> demo with its filter and chips
+		to see the real usage of the <code>HxFilterForm</code>.
+	</p>
+
+	<h3>Standalone demo</h3>
+	<Demo Type="typeof(HxFilterForm_Demo)" />
+
 </ComponentApiDoc>
diff --git a/...ents.Web.Bootstrap.Documentation/Pages/Components/HxListLayoutDoc/HxListLayout_Demo.razor b/...ents.Web.Bootstrap.Documentation/Pages/Components/HxListLayoutDoc/HxListLayout_Demo.razor
@@ -9,7 +9,7 @@
         <HxInputNumber Label="MinimumItemId" @bind-Value="filterContext.MinimumItemId" />
     </FilterTemplate>
     <CommandsTemplate>
-        <HxButton Text="Add an invoice" Skin="ButtonSkins.New" Icon="BootstrapIcon.Plus" CssClass="ms-1" OnClick="NewItemClicked" />
+        <HxButton Text="Add an invoice" Color="ThemeColor.Light" Icon="BootstrapIcon.Plus" CssClass="ms-1" OnClick="NewItemClicked" />
     </CommandsTemplate>
     <DataTemplate>
         <HxGrid @ref="gridComponent" TItem="DataItemDto" PageSize="20" DataProvider="LoadDataItems" SelectedDataItem="currentItem" SelectedDataItemChanged="HandleSelectedDataItemChanged">

diff --git a/...zor.Components.Web.Bootstrap.Documentation/Pages/Components/HxModalDoc/HxModal_Demo.razor b/...zor.Components.Web.Bootstrap.Documentation/Pages/Components/HxModalDoc/HxModal_Demo.razor
@@ -5,7 +5,7 @@
 		Modal body
 	</BodyTemplate>
 	<FooterTemplate>
-		<HxButton Skin="ButtonSkins.Close" OnClick="HandleHideClick" Color="ThemeColor.Primary" />
+		<HxButton Text="Close" OnClick="HandleHideClick" Color="ThemeColor.Primary" />
 	</FooterTemplate>
 </HxModal>
 

diff --git a/...nents.Web.Bootstrap.Documentation/Pages/Components/HxModalDoc/HxModal_Demo_Backdrop.razor b/...nents.Web.Bootstrap.Documentation/Pages/Components/HxModalDoc/HxModal_Demo_Backdrop.razor
@@ -5,7 +5,7 @@
         Modal body
     </BodyTemplate>
     <FooterTemplate>
-        <HxButton Skin="ButtonSkins.Close" OnClick="HandleHideClick" Color="ThemeColor.Primary" />
+        <HxButton Text="Close" OnClick="HandleHideClick" Color="ThemeColor.Primary" />
     </FooterTemplate>
 </HxModal>
 

diff --git a/...ents.Web.Bootstrap.Documentation/Pages/Components/HxModalDoc/HxModal_Demo_Scrolling.razor b/...ents.Web.Bootstrap.Documentation/Pages/Components/HxModalDoc/HxModal_Demo_Scrolling.razor
@@ -8,7 +8,7 @@
 		<p>This content should appear at the bottom after you scroll.</p>
 	</BodyTemplate>
     <FooterTemplate>
-        <HxButton Skin="ButtonSkins.Close" OnClick="() => myModal.HideAsync()" Color="ThemeColor.Primary" />
+        <HxButton Text="Close" OnClick="() => myModal.HideAsync()" Color="ThemeColor.Primary" />
     </FooterTemplate>
 </HxModal>
 

diff --git a/...Bootstrap.Documentation/Pages/Components/HxModalDoc/HxModal_Demo_VerticallyCentered.razor b/...Bootstrap.Documentation/Pages/Components/HxModalDoc/HxModal_Demo_VerticallyCentered.razor
@@ -5,7 +5,7 @@
 		This is a vertically centered modal.
 	</BodyTemplate>
 	<FooterTemplate>
-		<HxButton Skin="ButtonSkins.Close" OnClick="() => myModal.HideAsync()" Color="ThemeColor.Primary" />
+		<HxButton Text="Close" OnClick="() => myModal.HideAsync()" Color="ThemeColor.Primary" />
 	</FooterTemplate>
 </HxModal>