[sideNavItem] no need for justify-content: space-between (#2297)

* [sideNavItem] no need for justify-content: space-between

* add changelog entry

* group the icon and label so that they don't get spaced out

* remove unnecessary classname

* rather than negotiating spacing, grow the label so it takes up available space

* update and bump changelog entry to master

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)
 

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: <EuiIcon type="clock" />,
+                  }),
+                  this.createItem('Lion stuff', {
+                    icon: <EuiIcon type="stats" />,
+                  }),
                 ],
               }),
               this.createItem('Visualizations'),

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');
     }