Fix alignment of left icon for OuiListGroupItem with multiline text (o…

…pensearch-project#1000) Signed-off-by: Danila Gulderov <[email protected]>
gulderov · Sep 8, 2023 · 8f97381 · 8f97381
1 parent 8531d2a
commit 8f97381
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,7 @@
 - Fix blurry text in breadcrumbs by avoiding skewing text ([#959](https://github.com/opensearch-project/oui/pull/959))
 - Remove `calc` usage from SchemaItem styles ([#990](https://github.com/opensearch-project/oui/pull/990))
 - Add support for null types when deriving JSON from Sass variables ([#1019](https://github.com/opensearch-project/oui/pull/1019))
+- Fix alignment of left icon for OuiListGroupItem with multiline text 
 
 ### 🚞 Infrastructure
 

diff --git a/src-docs/src/views/list_group/list_group_extra.js b/src-docs/src/views/list_group/list_group_extra.js
@@ -34,5 +34,12 @@ export default () => (
       wrapText
       label="Fourth very, very long item with wrapping enabled that will not force truncation"
     />
+
+    <OuiListGroupItem
+      iconType={'package'}
+      onClick={() => {}}
+      wrapText
+      label="Fifth very long item with wrapping enabled and icon included"
+    />
   </OuiListGroup>
 );
diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss
@@ -92,6 +92,10 @@
     }
   }
 
+  .ouiListGroupItem__icon {
+    height: $ouiSizeL;
+  }
+
   .ouiListGroupItem-isActive:not(.ouiListGroupItem--ghost) & {
     color: $ouiTextColor;
   }
@@ -117,6 +121,7 @@
 }
 
 .ouiListGroupItem__icon {
+  align-self: flex-start;
   margin-right: $ouiSizeM;
   flex-grow: 0;
   flex-shrink: 0;
@@ -140,13 +145,21 @@
   .ouiListGroupItem__text {
     line-height: $ouiSize;
   }
+
+  .ouiListGroupItem__icon {
+    height: $ouiSize;
+  }
 }
 
 .ouiListGroupItem--large {
   .ouiListGroupItem__button,
   .ouiListGroupItem__text {
     line-height: $ouiSizeXL;
   }
+
+  .ouiListGroupItem__icon {
+    height: $ouiSizeXL;
+  }
 }
 
 .ouiListGroupItem--wrapText {