Sw-4530 Use fixed height with scroll on TextTruncated popper (#444)

- for large lists, the popper can get very large and out of the fold
- separate story for large list of values

Author: Karthik B

src/components/TextTruncated/index.tsx

@@ -9,6 +9,10 @@ const useStyles = makeStyles((theme: Theme) => ({
       border: `1px solid ${theme.palette.TwClrBrdrTertiary}`,
     },
   },
+  popper: {
+    maxHeight: '200px',
+    overflow: 'auto',
+  },
   tooltip: {
     backgroundColor: `${theme.palette.TwClrBg} !important`,
     color: `${theme.palette.TwClrTxt} !important`,
@@ -136,6 +140,7 @@ export default function TextTruncated(props: Props): JSX.Element {
           arrow={true}
           classes={{
             arrow: classes.arrow,
+            popper: classes.popper,
             tooltip: classes.tooltip,
           }}
           open={showAllOpen}

src/stories/TextTruncated.stories.tsx

@@ -13,10 +13,19 @@ const Template: Story<TextTruncatedProps> = (args) => {
   return <TextTruncated {...args} />;
 };
 
+const stringList = ['elephant', 'foo', 'bar', 'baz', 'spam', 'bacon', 'eggs'];
+
+let largeList = stringList;
+
+for (let i = 0; i < 5; i++) {
+  largeList = [...largeList, ...largeList];
+}
+
+
 export const Default = Template.bind({});
 
 Default.args = {
-  stringList: ['elephant', 'foo', 'bar', 'baz', 'spam', 'bacon', 'eggs'],
+  stringList,
   maxLengthPx: 200,
   showAllStyle: {fontSize: 14},
   textStyle: {fontSize: 14},
@@ -25,6 +34,13 @@ Default.args = {
   placeHolder: undefined,
 };
 
+export const LargeList = Template.bind({});
+
+LargeList.args = {
+  ...Default.args,
+  stringList: largeList,
+};
+
 export const WithPlaceholder = Template.bind({});
 
 WithPlaceholder.args = {