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 {