fix(Grid): adds ellipsis in Grid Cell

Closes #236
innovaccer · Jul 25, 2020 · 51d9736 · 51d9736
1 parent 1aedefb
commit 51d9736
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 25 deletions.
diff --git a/core/components/organisms/grid/Cell.tsx b/core/components/organisms/grid/Cell.tsx
@@ -116,7 +116,7 @@ const HeaderCell = (props: HeaderCellProps) => {
           </Placeholder>
         ) : (
             <>
-              <Heading size="s">{schema.displayName}</Heading>
+              <Heading size="s" className="ellipsis--noWrap">{schema.displayName}</Heading>
               {sorting && (
                 <div className="Grid-sortingIcons">
                   {sorted ? sorted === 'asc' ? (

diff --git a/core/components/organisms/grid/GridCell.tsx b/core/components/organisms/grid/GridCell.tsx
@@ -91,13 +91,13 @@ const renderTitle = (props: CellProps) => {
   if (children) {
     if (tooltip) {
       return (
-        <Tooltip tooltip={children} position={'top-start'}>
-          <Text>{children}</Text>
+        <Tooltip tooltip={children} position={'top-start'} triggerClass="overflow-hidden">
+          <Text className="w-100 ellipsis">{children}</Text>
         </Tooltip>
       );
     }
     return (
-      <Text>{children}</Text>
+      <Text className="w-100 ellipsis">{children}</Text>
     );
   }
 
@@ -117,7 +117,7 @@ const renderMetaList = (props: CellProps) => {
     return (
       <div className="GridCell-metaList">
         {metaList.map((list, index) => (
-          <Text key={index} appearance={'subtle'} small={true}>{list}</Text>
+          <Text key={index} className="ellipsis" appearance={'subtle'} small={true}>{list}</Text>
         ))}
       </div>
     );
@@ -135,7 +135,7 @@ const renderAvatar = (props: CellProps) => {
 
   if (firstName || lastName) {
     return (
-      <Avatar firstName={firstName} lastName={lastName} />
+      <Avatar className="mr-5" firstName={firstName} lastName={lastName} />
     );
   }
   if (title) {
@@ -237,10 +237,8 @@ export const GridCell = (props: GridCellProps) => {
       }
       return (
         <div className={`${cellClass} GridCell--align-${align} GridCell--metaList`} >
-          <div className="GridCell-metaListWrapper">
-            {renderTitle({ tooltip, cellData })}
-            {renderMetaList({ cellData })}
-          </div>
+          {renderTitle({ tooltip, cellData })}
+          {renderMetaList({ cellData })}
         </div>
       );
 

diff --git a/css/src/components/grid.css b/css/src/components/grid.css
@@ -218,6 +218,7 @@
     flex-grow: 1;
     height: 100%;
     box-sizing: border-box;
+    overflow: hidden;
 }
 
 .Grid-cellResize {
@@ -281,26 +282,14 @@
     margin-right: 0;
 }
 
-.Grid .Avatar {
-    margin-right: var(--spacing-l);
-}
-
-.Grid .Placeholder {
-    display: flex;
-    flex-shrink: 0;
-}
-
-.Grid .Placeholder-image {
-    flex-shrink: 0;
-}
-
 /** Grid Cell **/
 .GridCell {
     display: flex;
     align-items: center;
     height: 100%;
     width: 100%;
     box-sizing: border-box;
+    overflow: hidden;
 }
 
 .GridCell--align-left {
@@ -316,7 +305,12 @@
 }
 
 .GridCell--default {}
-.GridCell--metaList {}
+.GridCell--metaList {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+}
 
 .GridCell--avatar .Avatar {
     margin: 0;
@@ -326,6 +320,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
+    overflow: hidden;
 }
 
 .GridCell-metaList {

diff --git a/css/src/components/tooltip.css b/css/src/components/tooltip.css
@@ -11,4 +11,3 @@
   word-break: break-word;
   hyphens: auto;
 }
-
Original file line number	Diff line number	Diff line change
Expand Up		@@ -11,4 +11,3 @@
		word-break: break-word;
		hyphens: auto;
		}