fix(SecondaryNavigation): text ellipsis

8base · Feb 28, 2019 · c64888a · c64888a
1 parent 10c967d
commit c64888a
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git 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
@@ -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
@@ -18,7 +18,7 @@ exports[`<SecondaryNavigation /> should shallow SecondaryNavigation item 1`] = `
 >
   <Boost(secondaryNavigationItemLabel)
     modifiers={Object {}}
-    tagName={[Function]}
+    tagName="span"
   >
     First item
   </Boost(secondaryNavigationItemLabel)>