XWIKI-21452: Macros info, success, warning and error are only disting…

…uished by colors

  * Encapsulate the icon with a format block for having a dedicated css
    class "icon-block"
  * Provide some CSS rules to that new block: the idea being to get rid
    of the flex and gap properties which are causing visual problems on
some elements
  * Fix unit tests

xwiki-platform-core/xwiki-platform-flamingo/xwiki-platform-flamingo-skin/xwiki-platform-flamingo-skin-resources/src/main/resources/flamingo/less/messages.less

@@ -24,15 +24,19 @@ span.box, span.successmessage, span.errormessage, span.warningmessage, span.info
 
 // Used by: message boxes
 div.successmessage, div.errormessage, div.warningmessage, div.infomessage {
-  display: flex;
-  gap: 2rem;
-  justify-content: left;
-  align-items: baseline;
   padding: 2rem;
   border: none;
   border-left: 4px solid;
   box-shadow: none;
 
+  & > .icon-block {
+    // Ensure to let some space between the icon of the message and the content.
+    padding-right: 2rem;
+    // We want the icon to remain on the left. Note that we don't use display: flex for now since it's causing issues
+    // when the box contains some specific content such as em
+    float: left;
+  }
+
   & > img {
     // Improve alignment for silk icons
     align-self: flex-start;

xwiki-platform-core/xwiki-platform-rendering/xwiki-platform-rendering-xwiki/src/main/java/org/xwiki/rendering/internal/util/XWikiIconProvider.java

@@ -19,6 +19,8 @@
  */
 package org.xwiki.rendering.internal.util;
 
+import java.util.List;
+
 import javax.inject.Inject;
 import javax.inject.Singleton;
 import org.xwiki.component.annotation.Component;
@@ -27,7 +29,9 @@
 import org.xwiki.icon.IconSet;
 import org.xwiki.icon.IconSetManager;
 import org.xwiki.rendering.block.Block;
+import org.xwiki.rendering.block.FormatBlock;
 import org.xwiki.rendering.block.RawBlock;
+import org.xwiki.rendering.listener.Format;
 import org.xwiki.rendering.syntax.Syntax;
 
 /**
@@ -56,7 +60,9 @@ public Block get(String iconName)
         try {
             IconSet iconSet = getIconSet(iconName);
             String iconContent = this.iconRenderer.renderHTML(iconName, iconSet);
-            return new RawBlock(iconContent, Syntax.HTML_5_0);
+            FormatBlock formatBlock = new FormatBlock(List.of(new RawBlock(iconContent, Syntax.HTML_5_0)), Format.NONE);
+            formatBlock.setParameter("class", "icon-block");
+            return formatBlock;
         } catch (IconException e) {
             return super.get(iconName);
         }

xwiki-platform-core/xwiki-platform-rendering/xwiki-platform-rendering-xwiki/src/test/java/org/xwiki/rendering/internal/util/XWikiIconProviderTest.java

@@ -19,6 +19,8 @@
  */
 package org.xwiki.rendering.internal.util;
 
+import java.util.List;
+
 import org.junit.jupiter.api.Test;
 import org.mockito.Mock;
 import org.xwiki.icon.Icon;
@@ -29,6 +31,7 @@
 import org.xwiki.localization.Translation;
 import org.xwiki.rendering.block.Block;
 import org.xwiki.rendering.block.CompositeBlock;
+import org.xwiki.rendering.block.FormatBlock;
 import org.xwiki.rendering.block.RawBlock;
 import org.xwiki.rendering.block.WordBlock;
 import org.xwiki.test.junit5.mockito.ComponentTest;
@@ -86,10 +89,13 @@ void get() throws Exception
 
         // Test
         Block result = iconProvider.get("test");
-        // We want to make sure that the returned result is a raw block
-        assertEquals(RawBlock.class, result.getClass());
+        assertEquals(FormatBlock.class, result.getClass());
+        assertEquals("icon-block", result.getParameter("class"));
+        List<Block> children = result.getChildren();
+        assertEquals(1, children.size());
+        assertEquals(RawBlock.class, children.get(0).getClass());
         // We check the icon itself
-        assertEquals(testIconFA, ((RawBlock) result).getRawContent());
+        assertEquals(testIconFA, ((RawBlock) children.get(0)).getRawContent());
     }
 
     @Test
@@ -114,10 +120,13 @@ void getNoTranslation() throws Exception
 
         // Test
         Block result = iconProvider.get("test");
-        // We want to make sure that the returned result is a raw block
-        assertEquals(RawBlock.class, result.getClass());
+        assertEquals(FormatBlock.class, result.getClass());
+        assertEquals("icon-block", result.getParameter("class"));
+        List<Block> children = result.getChildren();
+        assertEquals(1, children.size());
+        assertEquals(RawBlock.class, children.get(0).getClass());
         // We check the icon itself
-        assertEquals(testIconFA, ((RawBlock) result).getRawContent());
+        assertEquals(testIconFA, ((RawBlock) children.get(0)).getRawContent());
     }
 
     @Test
@@ -145,7 +154,12 @@ void getDefaultIconsetFallback() throws Exception
 
         // Test
         Block result = iconProvider.get("test");
-        // We check that the icon provider fell back on the default icon theme when needed
-        assertEquals(testIconSilk, ((RawBlock) result).getRawContent());
+        assertEquals(FormatBlock.class, result.getClass());
+        assertEquals("icon-block", result.getParameter("class"));
+        List<Block> children = result.getChildren();
+        assertEquals(1, children.size());
+        assertEquals(RawBlock.class, children.get(0).getClass());
+        // We check the icon itself
+        assertEquals(testIconSilk, ((RawBlock) children.get(0)).getRawContent());
     }
 }