fix: link icon in pointer cell not visible when cell is too narrow (#1856)

Author: sadakchap

src/components/BrowserCell/BrowserCell.react.js

@@ -85,7 +85,7 @@ export default class BrowserCell extends Component {
       }
 
       content = this.props.onPointerClick ? (
-        <Pill value={ dataValue } onClick={this.props.onPointerClick.bind(undefined, this.props.value)} followClick={true} />
+        <Pill value={ dataValue } onClick={this.props.onPointerClick.bind(undefined, this.props.value)} followClick={true} shrinkablePill />
       ) : (
         dataValue
       );
@@ -102,7 +102,7 @@ export default class BrowserCell extends Component {
           const object = new Parse.Object(v.className);
           object.id = v.objectId;
           array.push(
-              <Pill key={i} value={v.objectId} onClick={this.props.onPointerClick.bind(undefined, object)} followClick={true} />
+              <Pill key={i} value={v.objectId} onClick={this.props.onPointerClick.bind(undefined, object)} followClick={true} shrinkablePill />
             );
         });
         this.copyableValue = content = <ul>
@@ -129,7 +129,7 @@ export default class BrowserCell extends Component {
       this.copyableValue = content = JSON.stringify(this.props.value);
     } else if (this.props.type === 'File') {
       const fileName = this.props.value.url() ? getFileName(this.props.value) : 'Uploading\u2026';
-      content = <Pill value={fileName} fileDownloadLink={this.props.value.url()} />;
+      content = <Pill value={fileName} fileDownloadLink={this.props.value.url()} shrinkablePill />;
       this.copyableValue = fileName;
     } else if (this.props.type === 'ACL') {
       let pieces = [];
@@ -159,7 +159,7 @@ export default class BrowserCell extends Component {
     } else if (this.props.type === 'Relation') {
       content = this.props.setRelation ? (
         <div style={{ textAlign: 'center' }}>
-          <Pill onClick={() => this.props.setRelation(this.props.value)} value='View relation' followClick={true} />
+          <Pill onClick={() => this.props.setRelation(this.props.value)} value='View relation' followClick={true} shrinkablePill />
         </div>
       ) : (
           'Relation'

src/components/Pill/Pill.react.js

@@ -10,15 +10,15 @@ import styles from 'components/Pill/Pill.scss';
 import Icon from "components/Icon/Icon.react";
 
 //TODO: refactor, may want to move onClick outside or need to make onClick able to handle link/button a11y
-let Pill = ({ value, onClick, fileDownloadLink, followClick = false }) => (
+let Pill = ({ value, onClick, fileDownloadLink, followClick = false, shrinkablePill = false }) => (
   <span
     className={[
       styles.pill,
       !followClick && onClick ? styles.action : void 0
     ].join(" ")}
     onClick={!followClick && onClick ? onClick : null}
   >
-    <span className={!followClick && fileDownloadLink ? styles.content : ''}>{value}</span>
+    <span className={!followClick && fileDownloadLink ? styles.content : shrinkablePill ? styles.pillText : ''}>{value}</span>
     {followClick && (
       <a onClick={e => !e.metaKey && onClick()}>
         <Icon name="right-outline" width={20} height={20} fill="#1669a1" />

src/components/Pill/Pill.scss

@@ -9,9 +9,8 @@
 
 .pill {
   @include MonospaceFont;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  position: relative;
+  display: inline-block;
   color: #0E69A1;
   height: 20px;
   line-height: 20px;
@@ -22,6 +21,8 @@
   text-overflow: ellipsis;
   white-space: nowrap;
   & a {
+    position: absolute;
+    right: 0;
     height: 20px;
     width: 20px;
     background: #d6e5f2;
@@ -31,6 +32,14 @@
       transform: rotate(316deg);
     }
   }
+  & .pillText {
+    position: absolute;
+    left: 0;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 75%;
+  }
 }
 
 .content {