diff --git a/CHANGELOG.md b/CHANGELOG.md index e13e3d83a9..3df0004304 100644 --- 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 index cad7dd34fa..1e507389ab 100644 --- 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" /> + + {}} + wrapText + label="Fifth very long item with wrapping enabled and icon included" + /> ); diff --git a/src/components/list_group/_list_group_item.scss b/src/components/list_group/_list_group_item.scss index 981476a261..ebec378f46 100644 --- 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,6 +145,10 @@ .ouiListGroupItem__text { line-height: $ouiSize; } + + .ouiListGroupItem__icon { + height: $ouiSize; + } } .ouiListGroupItem--large { @@ -147,6 +156,10 @@ .ouiListGroupItem__text { line-height: $ouiSizeXL; } + + .ouiListGroupItem__icon { + height: $ouiSizeXL; + } } .ouiListGroupItem--wrapText {