Merge pull request #4372 from kiranpatel11/master

feat(CatalogTable): truncate long description with ellipsis and tooltip

packages/core/package.json

@@ -37,20 +37,21 @@
     "@material-ui/lab": "4.0.0-alpha.45",
     "@testing-library/react-hooks": "^3.4.2",
     "@types/dagre": "^0.7.44",
+    "@types/prop-types": "^15.7.3",
     "@types/react": "^16.9",
     "@types/react-sparklines": "^1.7.0",
-    "@types/prop-types": "^15.7.3",
+    "@types/react-text-truncate": "^0.14.0",
     "classnames": "^2.2.6",
     "clsx": "^1.1.0",
     "d3-selection": "^2.0.0",
     "d3-shape": "^2.0.0",
     "d3-zoom": "^2.0.0",
     "dagre": "^0.8.5",
-    "qs": "^6.9.4",
     "immer": "^8.0.1",
     "lodash": "^4.17.15",
     "material-table": "^1.69.1",
     "prop-types": "^15.7.2",
+    "qs": "^6.9.4",
     "rc-progress": "^3.0.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
@@ -61,6 +62,7 @@
     "react-router-dom": "6.0.0-beta.0",
     "react-sparklines": "^1.7.0",
     "react-syntax-highlighter": "^13.5.1",
+    "react-text-truncate": "^0.16.0",
     "react-use": "^15.3.3",
     "remark-gfm": "^1.0.0",
     "zen-observable": "^0.8.15"

packages/core/src/components/OverflowTooltip/OverflowTooltip.stories.tsx

@@ -0,0 +1,48 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Box } from '@material-ui/core';
+import React from 'react';
+import { OverflowTooltip } from './OverflowTooltip';
+
+export default {
+  title: 'Data Display/OverflowTooltip',
+  component: OverflowTooltip,
+};
+
+const text =
+  'Lorem Ipsum is simply dummy text of the printing and typesetting industry.';
+
+export const Default = () => (
+  <Box maxWidth="200px">
+    <OverflowTooltip text={text} />
+  </Box>
+);
+
+export const MultiLine = () => (
+  <Box maxWidth="200px">
+    <OverflowTooltip text={text} line={2} />
+  </Box>
+);
+
+export const DifferentTitle = () => (
+  <Box maxWidth="200px">
+    <OverflowTooltip
+      title="Visit loremipsum.io for more info"
+      text={text}
+      line={2}
+    />
+  </Box>
+);

packages/core/src/components/OverflowTooltip/OverflowTooltip.tsx

@@ -0,0 +1,49 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Tooltip, TooltipProps } from '@material-ui/core';
+import React, { useState } from 'react';
+import TextTruncate, { TextTruncateProps } from 'react-text-truncate';
+
+type Props = {
+  text: TextTruncateProps['text'];
+  line?: TextTruncateProps['line'];
+  element?: TextTruncateProps['element'];
+  title?: TooltipProps['title'];
+  placement?: TooltipProps['placement'];
+};
+
+export const OverflowTooltip = (props: Props) => {
+  const [hover, setHover] = useState(false);
+
+  const handleToggled = (truncated: boolean) => {
+    setHover(truncated);
+  };
+
+  return (
+    <Tooltip
+      title={props.title ?? props.text!}
+      placement={props.placement}
+      disableHoverListener={!hover}
+    >
+      <TextTruncate
+        text={props.text}
+        line={props.line}
+        onToggled={handleToggled}
+      />
+    </Tooltip>
+  );
+};

packages/core/src/components/OverflowTooltip/index.ts

@@ -0,0 +1,16 @@
+/*
+ * Copyright 2020 Spotify AB
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { OverflowTooltip } from './OverflowTooltip';

packages/core/src/components/index.ts

@@ -29,6 +29,7 @@ export * from './Lifecycle';
 export * from './Link';
 export * from './MarkdownContent';
 export * from './OAuthRequestDialog';
+export * from './OverflowTooltip';
 export * from './Progress';
 export * from './ProgressBars';
 export * from './Select';