Merge pull request #2037 from LiFaytheGoblin/2016/add-to-studio-dialog-clip-studio-name

2016/add to studio dialog clip studio name

package.json

@@ -77,7 +77,6 @@
     "lodash.merge": "3.3.2",
     "lodash.omit": "3.1.0",
     "lodash.range": "3.0.1",
-    "lodash.truncate": "4.4.2",
     "minilog": "2.0.8",
     "node-dir": "0.1.16",
     "node-sass": "4.6.1",

src/components/modal/addtostudio/modal.scss

@@ -112,8 +112,11 @@
     */
     margin: .575rem 2.18375rem .175rem .6875rem;
     width: 13.3125rem;
-    height: 1rem; /* diff from spec, in case we ever do valign to middle */
+    height: 1.25rem; /* diff from spec, in case we ever do valign to middle; changed to match line-height because else with overflow hidden it cuts off some letters */
+    overflow: hidden;
+    text-overflow: ellipsis;
     line-height: 1.25rem;
+    white-space: nowrap;
     font-family: "Helvetica Neue";
     font-size: .875rem;
     font-weight: regular;

src/components/modal/addtostudio/studio-button.jsx

@@ -1,4 +1,3 @@
-const truncateAtWordBoundary = require('../../../lib/truncate').truncateAtWordBoundary;
 const PropTypes = require('prop-types');
 const React = require('react');
 const classNames = require('classnames');
@@ -44,8 +43,9 @@ const StudioButton = ({
                     {'studio-selector-button-text-selected': includesProject || hasRequestOutstanding},
                     {'studio-selector-button-text-unselected': !includesProject && !hasRequestOutstanding}
                 )}
+                title={title}
             >
-                {truncateAtWordBoundary(title, 25)}
+                {title}
             </div>
             <div
                 className={classNames(

src/lib/truncate.js

@@ -1,9 +0,0 @@
-const lodashTruncate = require('lodash.truncate');
-
-/*
-* Function that applies regex for word boundaries, replaces removed string
-* with indication of ellipsis (...)
-*/
-module.exports.truncateAtWordBoundary = (str, length) => (
-    lodashTruncate(str, {length: length, separator: /[.,:;]*\s+/})
-);