From c64888ad2357742c2cc3cdbf53c95fd6abb03058 Mon Sep 17 00:00:00 2001
From: Osipov Vladimir <zouxuoz@gmail.com>
Date: Thu, 28 Feb 2019 16:11:00 +0300
Subject: [PATCH] fix(SecondaryNavigation): text ellipsis

---
 .../SecondaryNavigation/SecondaryNavigationItem.js  |  3 +--
 .../SecondaryNavigationItem.theme.js                | 13 +++++++++----
 .../__snapshots__/SecondaryNavigation.test.js.snap  |  2 +-
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/SecondaryNavigation/SecondaryNavigationItem.js b/src/components/SecondaryNavigation/SecondaryNavigationItem.js
index 603a8a6a..483e9623 100644
--- a/src/components/SecondaryNavigation/SecondaryNavigationItem.js
+++ b/src/components/SecondaryNavigation/SecondaryNavigationItem.js
@@ -2,7 +2,6 @@
 
 import React from 'react';
 
-import { Text } from '../Text';
 import { Dropdown } from '../Dropdown';
 import { Menu } from '../Menu';
 import { Icon } from '../Icon';
@@ -68,7 +67,7 @@ class SecondaryNavigationItem extends React.PureComponent<SecondaryNavigationIte
 
     return (
       <SecondaryNavigationItemTag { ...rest } hovered={ hovered } onMouseLeave={ this.onMouseLeave } onMouseEnter={ this.onMouseEnter } >
-        <SecondaryNavigationItemLabelTag tagName={ Text } modifiers={ rest } >
+        <SecondaryNavigationItemLabelTag tagName="span" modifiers={ rest } >
           { label }
         </SecondaryNavigationItemLabelTag>
         {
diff --git a/src/components/SecondaryNavigation/SecondaryNavigationItem.theme.js b/src/components/SecondaryNavigation/SecondaryNavigationItem.theme.js
index fc9da680..b8484fb9 100644
--- a/src/components/SecondaryNavigation/SecondaryNavigationItem.theme.js
+++ b/src/components/SecondaryNavigation/SecondaryNavigationItem.theme.js
@@ -14,6 +14,7 @@ const [SecondaryNavigationItemTag, rootTheme] = createThemeTag(name, ({ COLORS }
     paddingLeft: 4,
     paddingRight: 20,
     justifyContent: 'space-between',
+    alignItems: 'center',
 
     [`&.active ${SecondaryNavigationItemActionsTag}`]: {
       visibility: 'visible',
@@ -36,13 +37,18 @@ const [SecondaryNavigationItemTag, rootTheme] = createThemeTag(name, ({ COLORS }
   },
 }));
 
-const [SecondaryNavigationItemLabelTag, labelTheme] = createThemeTag(`${name}Label`, () => ({
+const [SecondaryNavigationItemLabelTag, labelTheme] = createThemeTag(`${name}Label`, ({ COLORS, SIZES }: *) => ({
   root: {
-    display: 'flex',
-    alignItems: 'center',
     paddingLeft: '20px',
     backgroundColor: 'inherit',
     opacity: '0.9',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    minWidth: 0,
+    marginRight: 8,
+    color: COLORS.PRIMARY_TEXT_COLOR,
+    fontSize: SIZES.BODY_TEXT,
   },
 }));
 
@@ -61,7 +67,6 @@ const theme = {
   ...actionsTheme,
 };
 
-
 export {
   theme,
   SecondaryNavigationItemTag,
diff --git a/src/components/SecondaryNavigation/__snapshots__/SecondaryNavigation.test.js.snap b/src/components/SecondaryNavigation/__snapshots__/SecondaryNavigation.test.js.snap
index df48d647..f00c0e78 100644
--- a/src/components/SecondaryNavigation/__snapshots__/SecondaryNavigation.test.js.snap
+++ b/src/components/SecondaryNavigation/__snapshots__/SecondaryNavigation.test.js.snap
@@ -18,7 +18,7 @@ exports[`<SecondaryNavigation /> should shallow SecondaryNavigation item 1`] = `
 >
   <Boost(secondaryNavigationItemLabel)
     modifiers={Object {}}
-    tagName={[Function]}
+    tagName="span"
   >
     First item
   </Boost(secondaryNavigationItemLabel)>