refactor(ListItem): Moved Truncate within Text for proper styling (#2070)

* ListItem - Moved Truncate within Text element

* Removed Truncate style override
- Not necessary since we inverted truncate + text wrapper relationship

Author: Elliot

packages/components/src/List/ListItem.tsx

@@ -57,11 +57,9 @@ const TruncateWrapper: FC<{
   fontSize?: FontSizes
   lineHeight?: FontSizes
 }> = ({ children, color, fontSize, lineHeight }) => (
-  <Truncate>
-    <Text color={color} fontSize={fontSize} lineHeight={lineHeight}>
-      {children}
-    </Text>
-  </Truncate>
+  <Text color={color} fontSize={fontSize} lineHeight={lineHeight}>
+    <Truncate>{children}</Truncate>
+  </Text>
 )
 
 export interface ListItemProps

packages/components/src/List/ListItemWrapper.tsx

@@ -29,7 +29,6 @@ import omit from 'lodash/omit'
 import React, { forwardRef, ReactNode, Ref } from 'react'
 import styled from 'styled-components'
 import { Icon } from '../Icon'
-import { Truncate } from '../Truncate'
 import {
   ListItemStatefulWithHoveredProps,
   ListItemDimensions,
@@ -130,10 +129,6 @@ export const ListItemWrapper = styled(ListItemWrapperInternal)`
       ${({ theme }) => `${theme.transitions.quick}ms ${theme.easings.ease}`};
   }
 
-  ${Truncate} {
-    line-height: 1;
-  }
-
   &[aria-current='true'] {
     background: ${({ theme: { colors } }) => colors.ui2};
     font-weight: ${({ theme: { fontWeights } }) => fontWeights.semiBold};

packages/components/src/Truncate/Truncate.tsx

@@ -87,7 +87,7 @@ const TruncateLayout: FC<TruncateProps> = ({
 
 const TextStyle = styled.span<WidthProps>`
   display: block;
-  overflow: hidden;
+  overflow-x: hidden;
   text-overflow: ellipsis;
   ${widthHelper}
   white-space: nowrap;