From 75cda39ad954478ccb5b6db1b871a35a765b5283 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mladen=20Macanovi=C4=87?= Date: Tue, 12 Mar 2024 13:10:13 +0100 Subject: [PATCH] AntDesign: upgrade to latest 4.24.15 version (#5354) * Added new css antDesign version * fixed bugs with alert The problem with the button: in other providers, the button is inside Alert.razor, here the problem arises when we talk about ant design, in short, ant design has one div more than the others, and the alert descrtiption and alert message must be passed to that div, but not the button because otherwise the wrong positioning of the close button occurs * returned original alert demo * added breadcrumb.scss * fixed breadcrumb * removed unnecessary scss * fixed breadcrum html * fixed accordion * Remove duplicate key * Fix Switch styles * Remove script file * Fix Bar item width * Release notes * Update AntDesign guide * fic select size * Fix select close styles * Fix alert close * Fix card link * Tabs WIP * Fix tabs content * Fix row columns * Fix validation styles * Fix rows and cols gutters * Fix table resizer --------- Co-authored-by: steal4life --- .../wwwroot/index.html | 3 +- Demos/Blazorise.Demo/wwwroot/demo.css | 4 + .../Models/Snippets.generated.cs | 2 +- .../AntDesignGuideSourceFilesExampleCode.html | 2 +- .../AntDesignGuideSourceFilesExample.snippet | 2 +- .../News/2024-02-15-release-notes-150.razor | 15 +- Source/Blazorise.AntDesign/Alert.razor | 10 + .../AlertDescription.razor | 4 +- Source/Blazorise.AntDesign/AlertMessage.razor | 4 +- .../AntDesignClassProvider.cs | 20 +- Source/Blazorise.AntDesign/Breadcrumb.razor | 8 +- .../Blazorise.AntDesign/BreadcrumbItem.razor | 4 +- Source/Blazorise.AntDesign/CardLink.razor | 8 +- Source/Blazorise.AntDesign/CloseButton.razor | 2 - Source/Blazorise.AntDesign/Config.cs | 2 + Source/Blazorise.AntDesign/Select.razor | 2 +- Source/Blazorise.AntDesign/Select.razor.cs | 4 +- Source/Blazorise.AntDesign/SelectItem.razor | 2 +- .../Blazorise.AntDesign/SelectItem.razor.cs | 2 + .../Styles/_variables.scss | 2 +- .../Styles/components/_alert.scss | 6 + .../Styles/components/_bar.scss | 12 ++ .../Styles/components/_card.scss | 4 + .../Styles/components/_form.scss | 6 +- .../Styles/components/_switch.scss | 16 +- .../Styles/components/_table.scss | 27 ++- .../Styles/utilities/_grid.scss | 20 +- .../Styles/utilities/_typography.scss | 16 ++ Source/Blazorise.AntDesign/Switch.razor | 1 + Source/Blazorise.AntDesign/Tab.razor | 13 +- Source/Blazorise.AntDesign/TabPanel.razor | 9 +- Source/Blazorise.AntDesign/Tabs.razor | 25 +-- Source/Blazorise.AntDesign/Tabs.razor.cs | 26 +-- Source/Blazorise.AntDesign/TabsContent.razor | 6 +- .../Blazorise.AntDesign/ValidationError.razor | 28 +++ .../wwwroot/blazorise.antdesign.css | 194 +++++++++++++----- .../wwwroot/blazorise.antdesign.min.css | 2 +- 37 files changed, 370 insertions(+), 143 deletions(-) create mode 100644 Source/Blazorise.AntDesign/Alert.razor create mode 100644 Source/Blazorise.AntDesign/ValidationError.razor diff --git a/Demos/Blazorise.Demo.AntDesign/wwwroot/index.html b/Demos/Blazorise.Demo.AntDesign/wwwroot/index.html index 0c9895008b..54fefaa936 100644 --- a/Demos/Blazorise.Demo.AntDesign/wwwroot/index.html +++ b/Demos/Blazorise.Demo.AntDesign/wwwroot/index.html @@ -11,7 +11,7 @@ - + @@ -35,7 +35,6 @@ - diff --git a/Demos/Blazorise.Demo/wwwroot/demo.css b/Demos/Blazorise.Demo/wwwroot/demo.css index 7c1714d508..98ddb26721 100644 --- a/Demos/Blazorise.Demo/wwwroot/demo.css +++ b/Demos/Blazorise.Demo/wwwroot/demo.css @@ -115,11 +115,13 @@ code { } .grid.b-demo-cssgrid-columns:not(:first-child), +.ant-grid.b-demo-cssgrid-columns:not(:first-child) .fui-Grid.b-demo-cssgrid-columns:not(:first-child) { margin-top: 1rem; } .grid.b-demo-cssgrid-columns > div > div:first-child, +.ant-grid.b-demo-cssgrid-columns > div > div:first-child, .fui-Grid.b-demo-cssgrid-columns > div > div:first-child { padding: 0.75rem; background-color: rgba(var(--b-theme-primary-r, 112), var(--b-theme-primary-g, 44), var(--b-theme-primary-b, 248), 0.15); @@ -127,6 +129,7 @@ code { } .grid.b-demo-cssgrid-columns + .grid.b-demo-cssgrid-columns > div:last-child > div, +.ant-grid.b-demo-cssgrid-columns + .ant-grid.b-demo-cssgrid-columns > div:last-child > div, .fui-Grid.b-demo-cssgrid-columns + .fui-Grid.b-demo-cssgrid-columns > div:last-child > div { padding: 0.75rem; background-color: rgba(var(--b-theme-secondary-r, 128), var(--b-theme-secondary-g, 128), var(--b-theme-secondary-b, 128), 0.15); @@ -134,6 +137,7 @@ code { } .grid.b-demo-cssgrid-divs > div, +.ant-grid.b-demo-cssgrid-divs > div, .fui-Grid.b-demo-cssgrid-divs > div { padding: 0.75rem; background-color: rgba(var(--b-theme-primary-r, 112), var(--b-theme-primary-g, 44), var(--b-theme-primary-b, 248), 0.15); diff --git a/Documentation/Blazorise.Docs/Models/Snippets.generated.cs b/Documentation/Blazorise.Docs/Models/Snippets.generated.cs index 579a1f262a..be14669340 100644 --- a/Documentation/Blazorise.Docs/Models/Snippets.generated.cs +++ b/Documentation/Blazorise.Docs/Models/Snippets.generated.cs @@ -9898,7 +9898,7 @@ public class Item .AddAntDesignProviders() .AddFontAwesomeIcons();"; - public const string AntDesignGuideSourceFilesExample = @" + public const string AntDesignGuideSourceFilesExample = @" diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Guides/AntDesign/Code/AntDesignGuideSourceFilesExampleCode.html b/Documentation/Blazorise.Docs/Pages/Docs/Guides/AntDesign/Code/AntDesignGuideSourceFilesExampleCode.html index 150441dba7..96aedc1048 100644 --- a/Documentation/Blazorise.Docs/Pages/Docs/Guides/AntDesign/Code/AntDesignGuideSourceFilesExampleCode.html +++ b/Documentation/Blazorise.Docs/Pages/Docs/Guides/AntDesign/Code/AntDesignGuideSourceFilesExampleCode.html @@ -1,6 +1,6 @@ 
-<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.0.0/antd.css" integrity="sha256-nzhI/tsi9npc5ir08wCgBpg43SEIrc7crRJLsHE0/60=" crossorigin="anonymous" />
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/4.24.15/antd.min.css" integrity="sha512-Ac6zlwN6S+uQSinFAcV27Gd/TtKEDt7XWXn2xWO4Xi9dTbbpT9/vJb+VT5af6nZywrgBD3qUFTb5y1VN4YD94Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 <link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet">
 
 <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Guides/AntDesign/Examples/AntDesignGuideSourceFilesExample.snippet b/Documentation/Blazorise.Docs/Pages/Docs/Guides/AntDesign/Examples/AntDesignGuideSourceFilesExample.snippet
index 82d8c2bdaf..1cbf29a243 100644
--- a/Documentation/Blazorise.Docs/Pages/Docs/Guides/AntDesign/Examples/AntDesignGuideSourceFilesExample.snippet
+++ b/Documentation/Blazorise.Docs/Pages/Docs/Guides/AntDesign/Examples/AntDesignGuideSourceFilesExample.snippet
@@ -1,4 +1,4 @@
-
+
 
 
 
diff --git a/Documentation/Blazorise.Docs/Pages/News/2024-02-15-release-notes-150.razor b/Documentation/Blazorise.Docs/Pages/News/2024-02-15-release-notes-150.razor
index 36e4893aa5..2b84e025a4 100644
--- a/Documentation/Blazorise.Docs/Pages/News/2024-02-15-release-notes-150.razor
+++ b/Documentation/Blazorise.Docs/Pages/News/2024-02-15-release-notes-150.razor
@@ -47,6 +47,11 @@
             Breakpoints: introduced new XXL, or QuadHD size.
         
     
+    
+        
+            AntDesign: upgrade to latest 4.x version
+        
+    
 
 
 
@@ -229,7 +234,7 @@
 
 
 
-    Introduced a new BarMenuToggleBehavior. 
+    Introduced a new BarMenuToggleBehavior.
     By default, it is set to BarMenuToggleBehavior.AllowMultipleMenus which will keep all the menus you toggle open.
     You can also set it to BarMenuToggleBehavior.AllowSingleMenu to only keep a menu open at a time.
 
@@ -242,4 +247,12 @@
     As with many other features in this release we have updated internals of RichTextEdit to work with the latest version of Quill JS library. This update means there will be less security risks that were reported by using an older version.
 
 
+
+    AntDesign upgrade to latest 4.x version
+
+
+
+    In this release, we've updated our AntDesign provider. Previously, we were using the older 4.0 version of AntDesign, which didn't do justice to this exceptional framework. Although we aim to upgrade to the latest AntDesign 5.1 version in the upcoming Blazorise milestone, this update addresses several issues identified while developing Blazorise 1.5.
+
+
 
\ No newline at end of file
diff --git a/Source/Blazorise.AntDesign/Alert.razor b/Source/Blazorise.AntDesign/Alert.razor
new file mode 100644
index 0000000000..ac2120f4ef
--- /dev/null
+++ b/Source/Blazorise.AntDesign/Alert.razor
@@ -0,0 +1,10 @@
+@inherits Blazorise.Alert
+
+    
+        
+    
+
\ No newline at end of file
diff --git a/Source/Blazorise.AntDesign/AlertDescription.razor b/Source/Blazorise.AntDesign/AlertDescription.razor
index 938b96f562..7a6f461d2e 100644
--- a/Source/Blazorise.AntDesign/AlertDescription.razor
+++ b/Source/Blazorise.AntDesign/AlertDescription.razor
@@ -1,4 +1,4 @@
 @inherits Blazorise.AlertDescription
-
+

     @ChildContent
-
\ No newline at end of file
+

\ No newline at end of file
diff --git a/Source/Blazorise.AntDesign/AlertMessage.razor b/Source/Blazorise.AntDesign/AlertMessage.razor
index 2ca68ca964..15d8d0c668 100644
--- a/Source/Blazorise.AntDesign/AlertMessage.razor
+++ b/Source/Blazorise.AntDesign/AlertMessage.razor
@@ -1,4 +1,4 @@
 @inherits Blazorise.AlertMessage
-
+

     @ChildContent
-
\ No newline at end of file
+

\ No newline at end of file
diff --git a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs
index df585057bf..91fc326c15 100644
--- a/Source/Blazorise.AntDesign/AntDesignClassProvider.cs
+++ b/Source/Blazorise.AntDesign/AntDesignClassProvider.cs
@@ -312,7 +312,7 @@ public override string FieldValidation( ValidationStatus validationStatus )
 
     public override string FieldLabelRequiredIndicator( bool requiredIndicator )
         => requiredIndicator
-            ? "ant-form-item-label-required"
+            ? "ant-form-item-required"
             : null;
 
     #endregion
@@ -520,7 +520,7 @@ public override string DropdownToggleSize( Size size, bool outline )
 
     public override string TabPanel() => "ant-tabs-tabpane";
 
-    public override string TabPanelActive( bool active ) => active ? "ant-tabs-tabpane-active" : "ant-tabs-tabpane-inactive";
+    public override string TabPanelActive( bool active ) => active ? "ant-tabs-tabpane-active" : "ant-tabs-tabpane-hidden";
 
     #endregion
 
@@ -624,7 +624,7 @@ public override string DropdownToggleSize( Size size, bool outline )
 
     public override string CardText() => "ant-card-text";
 
-    public override string CardLink() => "ant-card-extra";
+    public override string CardLink() => "ant-card-link";
 
     public override string CardLinkUnstyled( bool unstyled ) => unstyled ? "ant-link-unstyled" : null;
 
@@ -748,7 +748,7 @@ public override string BarToggler( BarMode mode, BarTogglerMode togglerMode ) =>
 
     public override string AccordionBody() => "ant-collapse-content";
 
-    public override string AccordionBodyActive( bool active ) => active ? "ant-collapse-content-active" : "ant-collapse-content-inactive";
+    public override string AccordionBodyActive( bool active ) => active ? "ant-collapse-content-active" : "ant-collapse-content-inactive ant-collapse-content-hidden";
 
     public override string AccordionBodyContent( bool firstInAccordion, bool lastInAccordion ) => "ant-collapse-content-box";
 
@@ -1181,7 +1181,7 @@ public override string TextSize( TextSizeType textSizeType, TextSizeDefinition t
         return $"ant-font-size-{ToTextSizeType( textSizeType )}";
     }
 
-    public override string TextItalic() => "font-italic";
+    public override string TextItalic() => "ant-typography-italic";
 
     #endregion
 
@@ -1654,6 +1654,16 @@ public override string ToAlignContent( FlexAlignContent alignContent )
         };
     }
 
+    public override string ToValidationStatus( ValidationStatus validationStatus )
+    {
+        return validationStatus switch
+        {
+            Blazorise.ValidationStatus.Success => "ant-input-status-success",
+            Blazorise.ValidationStatus.Error => "ant-input-status-error",
+            _ => null,
+        };
+    }
+
     #endregion
 
     public override bool UseCustomInputStyles { get; set; } = true;
diff --git a/Source/Blazorise.AntDesign/Breadcrumb.razor b/Source/Blazorise.AntDesign/Breadcrumb.razor
index 59d32a0fa4..707767df64 100644
--- a/Source/Blazorise.AntDesign/Breadcrumb.razor
+++ b/Source/Blazorise.AntDesign/Breadcrumb.razor
@@ -1,6 +1,8 @@
 @inherits Blazorise.Breadcrumb
 
-    

-        @ChildContent
-    

+    
 
\ No newline at end of file
diff --git a/Source/Blazorise.AntDesign/BreadcrumbItem.razor b/Source/Blazorise.AntDesign/BreadcrumbItem.razor
index f580bb1f5c..5f587faeeb 100644
--- a/Source/Blazorise.AntDesign/BreadcrumbItem.razor
+++ b/Source/Blazorise.AntDesign/BreadcrumbItem.razor
@@ -1,6 +1,6 @@
 @inherits Blazorise.BreadcrumbItem
 
-    
+    
  • 
         @ChildContent
-    
+    
    • 
     
\ No newline at end of file
diff --git a/Source/Blazorise.AntDesign/CardLink.razor b/Source/Blazorise.AntDesign/CardLink.razor
index 3a83bbdf65..67369b6ec7 100644
--- a/Source/Blazorise.AntDesign/CardLink.razor
+++ b/Source/Blazorise.AntDesign/CardLink.razor
@@ -1,6 +1,4 @@
 @inherits Blazorise.CardLink
-
\ No newline at end of file
+
+    @ChildContent
+
\ No newline at end of file
diff --git a/Source/Blazorise.AntDesign/CloseButton.razor b/Source/Blazorise.AntDesign/CloseButton.razor
index 76f1b460b6..a5044cd64d 100644
--- a/Source/Blazorise.AntDesign/CloseButton.razor
+++ b/Source/Blazorise.AntDesign/CloseButton.razor
@@ -26,6 +26,4 @@
 
 @code {
     [CascadingParameter] protected Offcanvas ParentOffcanvas { get; set; }
-
-    [CascadingParameter] protected Toast ParentToast { get; set; }
 }
\ No newline at end of file
diff --git a/Source/Blazorise.AntDesign/Config.cs b/Source/Blazorise.AntDesign/Config.cs
index 9e995b878e..b184acaeee 100644
--- a/Source/Blazorise.AntDesign/Config.cs
+++ b/Source/Blazorise.AntDesign/Config.cs
@@ -42,6 +42,7 @@ public static IServiceCollection AddAntDesignProviders( this IServiceCollection
         { typeof( Blazorise.Addon ), typeof( AntDesign.Addon ) },
         { typeof( Blazorise.AddonLabel ), typeof( AntDesign.AddonLabel ) },
         { typeof( Blazorise.Addons ), typeof( AntDesign.Addons ) },
+        { typeof( Blazorise.Alert ), typeof( AntDesign.Alert ) },
         { typeof( Blazorise.AlertDescription ), typeof( AntDesign.AlertDescription ) },
         { typeof( Blazorise.AlertMessage ), typeof( AntDesign.AlertMessage ) },
         { typeof( Blazorise.Badge ), typeof( AntDesign.Badge ) },
@@ -100,5 +101,6 @@ public static IServiceCollection AddAntDesignProviders( this IServiceCollection
         { typeof( Blazorise.TabsContent ), typeof( AntDesign.TabsContent ) },
         { typeof( Blazorise.TextEdit ), typeof( AntDesign.TextEdit ) },
         { typeof( Blazorise.Toast ), typeof( AntDesign.Toast ) },
+        { typeof( Blazorise.ValidationError ), typeof( AntDesign.ValidationError ) },
     };
 }
\ No newline at end of file
diff --git a/Source/Blazorise.AntDesign/Select.razor b/Source/Blazorise.AntDesign/Select.razor
index e81f596f8f..27bda6aeab 100644
--- a/Source/Blazorise.AntDesign/Select.razor
+++ b/Source/Blazorise.AntDesign/Select.razor
@@ -29,7 +29,7 @@
             else
             {
                 
-                    
+                    
                 
                 
                     @SelectedItem
diff --git a/Source/Blazorise.AntDesign/Select.razor.cs b/Source/Blazorise.AntDesign/Select.razor.cs
index c101cf9b5d..90e3b22f53 100644
--- a/Source/Blazorise.AntDesign/Select.razor.cs
+++ b/Source/Blazorise.AntDesign/Select.razor.cs
@@ -308,7 +308,7 @@ string DropdownClassNames
             if ( Expanded )
                 sb.Append( " slide-up-enter slide-up-enter-active slide-up" );
             else
-                sb.Append( " slide-up-leave slide-up-leave-active slide-up" );
+                sb.Append( " ant-select-dropdown-hidden slide-up-leave slide-up-leave-active slide-up" );
 
             return sb.ToString();
         }
@@ -320,6 +320,8 @@ string DropdownClassNames
     string DropdownInnerStyleNames
         => $"max-height: {( MaxVisibleItems == null ? 256 : MaxVisibleItems * 32 )}px; overflow-y: auto; overflow-anchor: none;";
 
+    string InputAriaExpanded => Expanded ? "true" : "false";
+
     [Inject] public IJSClosableModule JSClosableModule { get; set; }
 
     #endregion
diff --git a/Source/Blazorise.AntDesign/SelectItem.razor b/Source/Blazorise.AntDesign/SelectItem.razor
index d112825ce8..3d0ad35020 100644
--- a/Source/Blazorise.AntDesign/SelectItem.razor
+++ b/Source/Blazorise.AntDesign/SelectItem.razor
@@ -1,6 +1,6 @@
 @typeparam TValue
 @inherits Blazorise.SelectItem
-