diff --git a/CHANGELOG.md b/CHANGELOG.md index c7d2cbb9aed..430137a6cf4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `13.8.0`. +- Fixed alignment of icons and label in `EuiSideNavItem` ([#2297](https://github.com/elastic/eui/pull/2297)) ## [`13.8.0`](https://github.com/elastic/eui/tree/v13.8.0) diff --git a/src-docs/src/views/side_nav/side_nav_complex.js b/src-docs/src/views/side_nav/side_nav_complex.js index 3aeeaeb26b9..d0f621b72e3 100644 --- a/src-docs/src/views/side_nav/side_nav_complex.js +++ b/src-docs/src/views/side_nav/side_nav_complex.js @@ -57,8 +57,12 @@ export default class extends Component { this.createItem('General'), this.createItem('Timelion', { items: [ - this.createItem('Time stuff'), - this.createItem('Lion stuff'), + this.createItem('Time stuff', { + icon: , + }), + this.createItem('Lion stuff', { + icon: , + }), ], }), this.createItem('Visualizations'), diff --git a/src/components/side_nav/_side_nav_item.scss b/src/components/side_nav/_side_nav_item.scss index 437a8325d14..59a4f58c9db 100644 --- a/src/components/side_nav/_side_nav_item.scss +++ b/src/components/side_nav/_side_nav_item.scss @@ -34,7 +34,6 @@ .euiSideNavItemButton__content { display: flex; align-items: center; - justify-content: space-between; } .euiSideNavItemButton__icon { @@ -53,6 +52,7 @@ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + flex-grow: 1; } /** @@ -79,7 +79,6 @@ /** * 1. Create padding around focus area without indenting the item itself. - * 2. Align icon and label to the left. */ & > .euiSideNavItemButton { margin-bottom: $euiSizeS; @@ -89,10 +88,6 @@ margin-left: -$euiSizeS; /* 1 */ width: calc(100% + #{$euiSizeS * 2}); /* 1 */ - .euiSideNavItemButton__content { - justify-content: flex-start; /* 2 */ - } - .euiSideNavItemButton__label { @include euiTitle('xs'); }