carbon-addons-iot-react 2.149.0-next.32 → 2.149.0-next.35

package/lib/components/ValueCard/ValueRenderer.js

@@ -39,7 +39,8 @@ var propTypes = {
 
   /** callback to trigger further action when clicking the value */
   onClick: PropTypes__default['default'].func,
-  dataSourceId: PropTypes__default['default'].string.isRequired
+  dataSourceId: PropTypes__default['default'].string.isRequired,
+  measurementUnitLabel: PropTypes__default['default'].string
 };
 var defaultProps = {
   layout: LayoutConstants.CARD_LAYOUTS.HORIZONTAL,
@@ -48,7 +49,8 @@ var defaultProps = {
   locale: 'en',
   customFormatter: null,
   testId: 'value',
-  onClick: null
+  onClick: null,
+  measurementUnitLabel: null
 };
 /**
  * This components job is determining how to render different kinds of card values.
@@ -67,7 +69,8 @@ var ValueRenderer = function ValueRenderer(_ref) {
       isNumberValueCompact = _ref.isNumberValueCompact,
       testId = _ref.testId,
       _onClick = _ref.onClick,
-      dataSourceId = _ref.dataSourceId;
+      dataSourceId = _ref.dataSourceId,
+      measurementUnitLabel = _ref.measurementUnitLabel;
   var renderValue = value;
 
   if (typeof value === 'boolean') {
@@ -92,7 +95,7 @@ var ValueRenderer = function ValueRenderer(_ref) {
       // otherwise, trucate the first line
       '--value-renderer-max-lines': fontSize < 20 ? 2 : 1
     },
-    title: renderValue
+    title: measurementUnitLabel ? /*#__PURE__*/React__default['default'].createElement("div", null, renderValue, " ", measurementUnitLabel) : renderValue
   };
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(valueCardUtils.BASE_CLASS_NAME, "__value-renderer--wrapper")
@@ -104,7 +107,11 @@ var ValueRenderer = function ValueRenderer(_ref) {
       });
     },
     kind: "ghost"
-  }), renderValue) : /*#__PURE__*/React__default['default'].createElement("span", commonProps, renderValue));
+  }), measurementUnitLabel ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, renderValue, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "".concat(valueCardUtils.BASE_CLASS_NAME, "__value-renderer--value--measurement-unit")
+  }, measurementUnitLabel)) : renderValue) : /*#__PURE__*/React__default['default'].createElement("span", commonProps, measurementUnitLabel ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, renderValue, /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "".concat(valueCardUtils.BASE_CLASS_NAME, "__value-renderer--value--measurement-unit")
+  }, measurementUnitLabel)) : renderValue));
 };
 
 ValueRenderer.propTypes = propTypes;
@@ -193,6 +200,17 @@ ValueRenderer.__docgenInfo = {
       "required": false,
       "description": "callback to trigger further action when clicking the value"
     },
+    "measurementUnitLabel": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
     "value": {
       "type": {
         "name": "any"

package/lib/constants/CardPropTypes.js

@@ -66,7 +66,7 @@ var DashboardColumnsPropTypes = PropTypes__default['default'].shape({
   sm: PropTypes__default['default'].number,
   xs: PropTypes__default['default'].number
 });
-var ValueCardPropTypes = {
+var ValueContentPropTypes = {
   content: PropTypes__default['default'].shape({
     attributes: PropTypes__default['default'].arrayOf(AttributePropTypes).isRequired
   }),
@@ -857,5 +857,5 @@ exports.RowHeightPropTypes = RowHeightPropTypes;
 exports.TableCardPropTypes = TableCardPropTypes;
 exports.TimeRangeOptionsPropTypes = TimeRangeOptionsPropTypes;
 exports.TruncationPropTypes = TruncationPropTypes;
-exports.ValueCardPropTypes = ValueCardPropTypes;
+exports.ValueContentPropTypes = ValueContentPropTypes;
 exports.ZoomBarPropTypes = ZoomBarPropTypes;

package/lib/css/carbon-addons-iot-react.css

@@ -29865,7 +29865,7 @@ html[dir=rtl] .iot--data-state-grid > *:first-child {
   display: flex;
   flex-wrap: wrap;
   min-width: 0;
-  margin-top: 0.75rem;
+  margin-top: calc(0.75rem + 1px);
   padding-right: 1rem;
   width: 100%;
 }
@@ -38605,6 +38605,9 @@ html[dir=rtl] .iot--time-picker__wrapper .iot--time-picker__controls {
   margin-bottom: 0.25rem;
   color: var(--secondary-value-color);
 }
+.iot--value-card__attribute-secondary-value--link {
+  cursor: pointer;
+}
 
 html[dir=rtl] .iot--value-card__attribute {
   padding-right: 0;
@@ -38660,6 +38663,13 @@ html[dir=rtl] .iot--value-card__attribute {
 .iot--value-card__value-renderer--value--vertical {
   text-align: left;
 }
+.iot--value-card__value-renderer--value--measurement-unit {
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.4;
+  letter-spacing: 0;
+  margin-left: 0.75rem;
+}
 .iot--value-card__value-renderer--boolean {
   text-transform: capitalize;
 }