Merge branch 'master' into enrico-576-floatingmenu

carbon-design-system · Feb 12, 2020 · c2470e2 · c2470e2
2 parents faf86d1 + 7d3f4df
commit c2470e2
Show file tree

Hide file tree

Showing 62 changed files with 88,523 additions and 9,265 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -9,13 +9,33 @@ module.exports = {
       functions: 80,
       lines: 80,
     },
-    './src/components/**/!(ColumnHeaderSelect|FilterHeaderRow|TableToolbar|RowActionsCell|RowActionsError|StatefulTable|StatefulTableDetailWizard|CatalogContent|FileDrop|HeaderMenu|Dashboard|CardRenderer|Attribute|UnitRenderer|ImageHotspots|ImageControls|TimeSeriesCard|PageHero|PageTitle|EditPage|AsyncTable|ImageCard|WizardHeader).jsx': {
+    './src/components/**/!(ColumnHeaderSelect|FilterHeaderRow|TableToolbar|RowActionsCell|RowActionsError|StatefulTable|StatefulTableDetailWizard|CatalogContent|FileDrop|HeaderMenu|Dashboard|CardRenderer|Attribute|UnitRenderer|ImageHotspots|ImageControls|TimeSeriesCard|PageHero|PageTitle|EditPage|AsyncTable|ImageCard|WizardHeader|HierarchyList|TableHead|ColumnResize).jsx': {
       statements: 80,
       branches: 80,
       functions: 80,
       lines: 80,
     },
+    './src/components/Table/TableHead/TableHead.jsx': {
+      statements: 73,
+      branches: 77,
+      lines: 73,
+      functions: 57,
+    },
+
+    './src/components/Table/TableHead/ColumnResize.jsx': {
+      statements: 36,
+      branches: 11,
+      lines: 36,
+      functions: 20,
+    },
+
     // The overrides below are to be fixed/deleted via https://github.com/IBM/carbon-addons-iot-react/issues/707
+    './src/components/List/HierarchyList/HierarchyList.jsx': {
+      statements: 69.62,
+      branches: 65,
+      lines: 73.33,
+      functions: 56.25,
+    },
     './src/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.jsx': { branches: 70 },
     './src/components/Table/TableToolbar/TableToolbar.jsx': { functions: 66 },
     './src/components/Table/TableBody/RowActionsCell/RowActionsCell.jsx': {

diff --git a/package.json b/package.json
@@ -65,14 +65,13 @@
     ]
   },
   "dependencies": {
-    "@carbon/charts": "https://github.com/scottdickerson/carbon-charts#carbon-charts-v0.16.28-gitpkg",
-    "@carbon/charts-react": "^0.16.25",
+    "@carbon/charts": "^0.29.0",
+    "@carbon/charts-react": "^0.29.0",
     "@carbon/colors": "^10.7.0",
     "@carbon/icons": "10.6.1",
     "@carbon/icons-react": "10.6.1",
     "@carbon/layout": "^10.7.1",
     "@carbon/themes": "^10.9.1",
-    "c3": "^0.7.1",
     "carbon-components": "^10.9.1",
     "carbon-components-react": "^7.9.1",
     "carbon-icons": "7.0.7",
@@ -84,7 +83,6 @@
     "moment": "^2.24.0",
     "polished": "^2.3.3",
     "prop-types": "^15.7.2",
-    "react-c3js": "^0.1.20",
     "react-dnd": "7.0.2",
     "react-dnd-html5-backend": "2.5.1",
     "react-dnd-test-backend": "^7.2.0",
@@ -100,7 +98,7 @@
     "warning": "^4.0.3"
   },
   "peerDependencies": {
-    "d3": "^4.12.0",
+    "d3": "5.14.2",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"
   },
@@ -154,6 +152,7 @@
     "coveralls": "^3.0.2",
     "cross-env": "^6.0.3",
     "css-loader": "^2.1.0",
+    "d3": "5.14.2",
     "deepdash": "^4.4.2",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.14.0",
@@ -183,10 +182,10 @@
     "postcss-loader": "^3.0.0",
     "prettier": "^1.15.3",
     "promise": "^8.0.2",
-    "react": "^16.8.3",
-    "react-dom": "^16.8.3",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
     "react-lorem-component": "^0.13.0",
-    "react-test-renderer": "^16.8.3",
+    "react-test-renderer": "^16.8.6",
     "rimraf": "^3.0.0",
     "rollup": "^1.1.0",
     "rollup-plugin-babel": "^4.3.0",
@@ -211,8 +210,5 @@
     "webpack": "^4.28.4",
     "whatwg-fetch": "^3.0.0"
   },
-  "resolutions": {
-    "@carbon/charts": "https://github.com/scottdickerson/carbon-charts#carbon-charts-v0.16.28-gitpkg"
-  },
   "version": "0.0.0-development"
 }
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback, useMemo, useEffect, useState } from 'react';
 import VisibilitySensor from 'react-visibility-sensor';
 import { Tooltip, SkeletonText } from 'carbon-components-react';
 import styled from 'styled-components';
@@ -34,6 +34,7 @@ const CardWrapper = styled.div`
   span#timeRange {
     display: ${props => (props.cardWidthSize < 230 ? `none` : `flex`)};
   }
+  overflow: hidden;
 `;
 
 /** Header components */
@@ -53,8 +54,8 @@ export const CardContent = styled.div`
   flex: 1;
   position: relative;
   height: ${props => props.dimensions.y - CARD_TITLE_HEIGHT}px;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow-x: visible;
+  overflow-y: ${props => (!props.isExpanded ? 'visible' : 'auto')};
 `;
 
 export const SkeletonWrapper = styled.div`
@@ -198,6 +199,17 @@ const Card = props => {
     return childSize;
   };
 
+  // Ensure the title text has a tooltip only if the title text is truncated
+  const titleRef = React.createRef();
+  const [hasTitleTooltip, setHasTitleTooltip] = useState(false);
+  useEffect(() => {
+    if (titleRef.current && titleRef.current.clientWidth < titleRef.current.scrollWidth) {
+      setHasTitleTooltip(true);
+    } else {
+      setHasTitleTooltip(false);
+    }
+  });
+
   const card = (
     <VisibilitySensor partialVisibility offset={{ top: 10 }}>
       {({ isVisible }) => (
@@ -231,7 +243,20 @@ const Card = props => {
                 {!hideHeader && (
                   <CardHeader>
                     <CardTitle title={title}>
-                      {title}&nbsp;
+                      {hasTitleTooltip ? (
+                        <Tooltip
+                          ref={titleRef}
+                          showIcon={false}
+                          triggerClassName="title--text"
+                          triggerText={title}
+                        >
+                          {title}
+                        </Tooltip>
+                      ) : (
+                        <div ref={titleRef} className="title--text">
+                          {title}
+                        </div>
+                      )}
                       {tooltip && (
                         <Tooltip
                           triggerId={`card-tooltip-trigger-${id}`}
@@ -245,7 +270,7 @@ const Card = props => {
                     {cardToolbar}
                   </CardHeader>
                 )}
-                <CardContent dimensions={dimensions}>
+                <CardContent dimensions={dimensions} isExpanded={isExpanded}>
                   {!isVisible && isLazyLoading ? ( // if not visible don't show anything
                     ''
                   ) : isLoading ? (

diff --git a/src/components/Card/Card.story.jsx b/src/components/Card/Card.story.jsx
@@ -29,6 +29,28 @@ storiesOf('Watson IoT|Card', module)
       </div>
     );
   })
+  .add('with ellipsed title and tooltip', () => {
+    const size = select('size', Object.keys(CARD_SIZES), CARD_SIZES.MEDIUM);
+    return (
+      <div style={{ width: `${getCardMinSize('lg', size).x}px`, margin: 20 }}>
+        <Card
+          title={text(
+            'title',
+            'Card Title that is really long and should be truncated and have a tooltip'
+          )}
+          id="facilitycard-basic"
+          size={size}
+          isLoading={boolean('isLoading', false)}
+          isEmpty={boolean('isEmpty', false)}
+          isEditable={boolean('isEditable', false)}
+          isExpanded={boolean('isExpanded', false)}
+          breakpoint="lg"
+          availableActions={{ range: true, expand: true }}
+          onCardAction={action('onCardAction')}
+        />
+      </div>
+    );
+  })
   .add('basic with render prop', () => {
     const size = select('size', Object.keys(CARD_SIZES), CARD_SIZES.MEDIUM);
     return (