#1602 Category label in palette category misaligned with no category …

…image and long label (#1603)
elyra-ai · Oct 17, 2023 · d9f15a5 · d9f15a5
1 parent e6445fd
commit d9f15a5
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 5 deletions.
diff --git a/canvas_modules/common-canvas/src/palette/palette.scss b/canvas_modules/common-canvas/src/palette/palette.scss
@@ -275,18 +275,18 @@ $palette-search-container-height: 41px;
 }
 
 .palette-flyout-category-text-abbr {
-	line-height: 46px;  /* Must be same as containing div height */
+	line-height: 1.2;
 	margin-left: 0;
 }
 
 .palette-flyout-category-text-no-image {
-	line-height: 46px;  /* Must be same as containing div height */
+	line-height: 1.2;
 	margin-left: 10px;
 	width: 170px;
 }
 
 .palette-flyout-category-count {
-	line-height: 46px;  /* Must be same as containing div height */
+	line-height: 1.2;
 	padding-left: 5px;
 }
 

diff --git a/canvas_modules/harness/test_resources/palettes/longDescPalette.json b/canvas_modules/harness/test_resources/palettes/longDescPalette.json
@@ -2,10 +2,10 @@
       "version": "3.0",
       "categories": [
         {
-          "label": "Import some data for using in your pipeline where data is required",
+          "label": "With Image",
           "description": "Description for Import",
           "image": "/images/palette-categories/sources_open.svg",
-          "id": "import",
+          "id": "iwith_image_id",
           "node_types": [
             {
               "id": "",
@@ -95,6 +95,45 @@
               }
             }
           ]
+        },
+        {
+          "label": "With Image - with label on two lines",
+          "description": "With Image - with longish label on two lines",
+          "image": "/images/palette-categories/sources_open.svg",
+          "id": "with_image_longer_id",
+          "node_types": [
+          ]
+        },
+        {
+          "label": "With Image - with longer label that wraps onto three lines",
+          "description": "With Image - with longish label on two lines",
+          "image": "/images/palette-categories/sources_open.svg",
+          "id": "with_image_longest_id",
+          "node_types": [
+          ]
+        },
+        {
+          "label": "No image",
+          "description": "Description for Import",
+          "image": "",
+          "id": "no_image_id",
+          "node_types": [
+          ]
+        },
+        {
+          "label": "No image - longer label with more words",
+          "description": "Description for Import",
+          "image": "",
+          "id": "no_image_longer_id",
+          "node_types": [
+          ]
+        },
+        {
+          "label": "No image - longer label with more words that stretch onto a third line",
+          "image": "",
+          "id": "no_image_longest_id",
+          "node_types": [
+          ]
         }
       ]
     }