carbon-addons-iot-react 5.13.1 → 5.15.0

package/lib/scss/components/Button/_button.scss

@@ -5,6 +5,7 @@
 @use '@carbon/react/scss/components/button' as *;
 @use '@carbon/react/scss/utilities/convert';
 @use '../../globals/vars' as *;
+@use '@carbon/styles/scss/components/button/mixins' as *;
 
 .#{$iot-prefix}--btn {
   .#{$prefix}--loading {
@@ -95,3 +96,20 @@
     box-shadow: convert.to-rem(1px) 0 0 0 $button-separator;
   }
 }
+
+// light colored button, to be used on dark backgrounds
+.cds--btn--tertiary--light {
+  @include button-theme(transparent, $white, $white, $background-hover, $white, $background-active);
+
+  &:focus {
+    border-color: $white;
+    box-shadow: inset 0 0 0 $button-outline-width $white,
+      inset 0 0 0 $button-border-width $background-active;
+  }
+
+  &:hover,
+  &:active {
+    background-color: $background-active;
+    border-color: $white;
+  }
+}

package/lib/scss/components/Card/_card-title.scss

@@ -111,3 +111,14 @@ p.#{$iot-prefix}--card-title__title-text-tooltip-full-title {
 .#{$iot-prefix}--card-heading-clickable {
   cursor: pointer;
 }
+
+// Dark mode styles - make title and subtitle white
+.#{$iot-prefix}--card--dark {
+  .#{$iot-prefix}--card--title--text {
+    color: $text-on-color;
+  }
+
+  .#{$iot-prefix}--card--subtitle--text {
+    color: $text-on-color;
+  }
+}

package/lib/scss/components/Card/_card-toolbar.scss

@@ -88,3 +88,15 @@
     outline-offset: -2px;
   }
 }
+
+.#{$iot-prefix}--card--dark .#{$iot-prefix}--card--toolbar button.#{$prefix}--overflow-menu svg {
+  fill: white;
+}
+
+// When overflow menu is open in dark mode, icon should be black (background becomes white)
+.#{$iot-prefix}--card--dark
+  .#{$iot-prefix}--card--toolbar
+  button.#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open
+  svg {
+  fill: $icon-primary;
+}

package/package.json

@@ -353,7 +353,7 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "5.13.1",
+  "version": "5.15.0",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2",

package/scss/components/Button/_button.scss

@@ -5,6 +5,7 @@
 @use '@carbon/react/scss/components/button' as *;
 @use '@carbon/react/scss/utilities/convert';
 @use '../../globals/vars' as *;
+@use '@carbon/styles/scss/components/button/mixins' as *;
 
 .#{$iot-prefix}--btn {
   .#{$prefix}--loading {
@@ -95,3 +96,20 @@
     box-shadow: convert.to-rem(1px) 0 0 0 $button-separator;
   }
 }
+
+// light colored button, to be used on dark backgrounds
+.cds--btn--tertiary--light {
+  @include button-theme(transparent, $white, $white, $background-hover, $white, $background-active);
+
+  &:focus {
+    border-color: $white;
+    box-shadow: inset 0 0 0 $button-outline-width $white,
+      inset 0 0 0 $button-border-width $background-active;
+  }
+
+  &:hover,
+  &:active {
+    background-color: $background-active;
+    border-color: $white;
+  }
+}

package/scss/components/Card/_card-title.scss

@@ -111,3 +111,14 @@ p.#{$iot-prefix}--card-title__title-text-tooltip-full-title {
 .#{$iot-prefix}--card-heading-clickable {
   cursor: pointer;
 }
+
+// Dark mode styles - make title and subtitle white
+.#{$iot-prefix}--card--dark {
+  .#{$iot-prefix}--card--title--text {
+    color: $text-on-color;
+  }
+
+  .#{$iot-prefix}--card--subtitle--text {
+    color: $text-on-color;
+  }
+}

package/scss/components/Card/_card-toolbar.scss

@@ -88,3 +88,15 @@
     outline-offset: -2px;
   }
 }
+
+.#{$iot-prefix}--card--dark .#{$iot-prefix}--card--toolbar button.#{$prefix}--overflow-menu svg {
+  fill: white;
+}
+
+// When overflow menu is open in dark mode, icon should be black (background becomes white)
+.#{$iot-prefix}--card--dark
+  .#{$iot-prefix}--card--toolbar
+  button.#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open
+  svg {
+  fill: $icon-primary;
+}

package/umd/carbon-addons-iot-react.js

@@ -2139,7 +2139,7 @@
   }
 
   var _excluded$15 = ["children", "loading", "disabled", "className", "onClick", "kind", "recommended", "hasIconOnly", "selected", "testID", "testId"];
-  var ButtonKinds$1 = ['primary', 'secondary', 'tertiary', 'ghost', 'danger', 'danger--primary', 'danger--ghost', 'danger--tertiary'];
+  var ButtonKinds$1 = ['primary', 'secondary', 'tertiary', 'tertiary--light', 'ghost', 'danger', 'danger--primary', 'danger--ghost', 'danger--tertiary'];
   var iotPrefix$2t = settings.iotPrefix;
   var propTypes$2q = {
     /** Show loading spinner, only new prop */
@@ -2264,6 +2264,9 @@
           }, {
             "value": "'tertiary'",
             "computed": false
+          }, {
+            "value": "'tertiary--light'",
+            "computed": false
           }, {
             "value": "'ghost'",
             "computed": false
@@ -281242,7 +281245,11 @@ ${formatRule(Codicon.menuSubmenu)}
     }),
     /** If set to true it will render outside of the current DOM in a portal, otherwise render as a child */
     renderDateDropdownInPortal: PropTypes.bool,
-    extraHeaderContent: PropTypes.element
+    extraHeaderContent: PropTypes.element,
+    /** CSS gradient value to apply as the card background. */
+    backgroundGradient: PropTypes.string,
+    /** Theme for the card. Can be 'light' or 'dark' */
+    theme: PropTypes.oneOf(['light', 'dark'])
   };
 
   /**
@@ -284593,7 +284600,7 @@ ${formatRule(Codicon.menuSubmenu)}
   };
 
   var _excluded$F = ["isSelected", "children", "dimensions", "id", "style", "className", "onScroll", "onMouseDown", "onMouseUp", "onTouchEnd", "onTouchStart", "onFocus", "onBlur", "tabIndex", "testID", "testId"],
-    _excluded2$4 = ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "hideTitle", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content", "extraHeaderContent", "timeZone", "shouldUseTranslatedLabels"];
+    _excluded2$4 = ["size", "children", "title", "subtitle", "hasTitleWrap", "layout", "isLoading", "isEmpty", "isEditable", "isExpanded", "isLazyLoading", "isResizable", "resizeHandles", "error", "hideHeader", "hideTitle", "id", "tooltip", "titleTextTooltip", "timeRange", "timeRangeOptions", "onCardAction", "availableActions", "renderExpandIcon", "renderDateDropdownInPortal", "breakpoint", "i18n", "style", "className", "values", "testID", "testId", "contentClassName", "footerContent", "dateTimeMask", "extraActions", "padding", "overrides", "type", "data", "content", "extraHeaderContent", "timeZone", "shouldUseTranslatedLabels", "backgroundGradient", "theme"];
   function ownKeys$1p(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$1n(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1p(Object(t), !0).forEach(function (r) { _defineProperty$d(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1p(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var prefix$l = settings.prefix,
@@ -284743,6 +284750,7 @@ ${formatRule(Codicon.menuSubmenu)}
     isExpanded: false,
     /** performance option: only render the content of the card to the ReactDOM if the card is visible on screen */
     isLazyLoading: false,
+    theme: 'light',
     /** For now we will hide the per card actions when we're editing */
     availableActions: {
       edit: false,
@@ -284811,7 +284819,8 @@ ${formatRule(Codicon.menuSubmenu)}
     type: null,
     data: null,
     content: null,
-    shouldUseTranslatedLabels: false
+    shouldUseTranslatedLabels: false,
+    backgroundGradient: null
   };
 
   /** Dumb component that renders the card basics */
@@ -284861,6 +284870,8 @@ ${formatRule(Codicon.menuSubmenu)}
       extraHeaderContent = props.extraHeaderContent,
       timeZone = props.timeZone,
       shouldUseTranslatedLabels = props.shouldUseTranslatedLabels,
+      backgroundGradient = props.backgroundGradient,
+      theme = props.theme,
       others = _objectWithoutProperties$4(props, _excluded2$4);
     var effectiveTimezone = timeZone || dayjs$1.tz.guess();
     dayjs$1.tz.setDefault(effectiveTimezone);
@@ -284992,11 +285003,15 @@ ${formatRule(Codicon.menuSubmenu)}
       id: id,
       dimensions: dimensions,
       isExpanded: isExpanded,
-      style: !isExpanded ? style : {
+      style: !isExpanded ? _objectSpread$1n(_objectSpread$1n({}, style), backgroundGradient && {
+        background: backgroundGradient
+      }) : _objectSpread$1n({
         height: 'calc(100% - 50px)',
         width: 'calc(100% - 50px)'
-      },
-      className: classnames("".concat(iotPrefix$1k, "--card"), className, _defineProperty$d({}, "".concat(iotPrefix$1k, "--card--resizing"), isResizing))
+      }, backgroundGradient && {
+        background: backgroundGradient
+      }),
+      className: classnames("".concat(iotPrefix$1k, "--card"), "".concat(iotPrefix$1k, "--card--").concat(theme), className, _defineProperty$d({}, "".concat(iotPrefix$1k, "--card--resizing"), isResizing))
     }), !hideHeader && !hideTitle && /*#__PURE__*/React$1.createElement(CardHeader
     // TODO: remove deprecated testID prop in v3
     , {
@@ -285175,6 +285190,13 @@ ${formatRule(Codicon.menuSubmenu)}
         },
         "required": false
       },
+      "theme": {
+        "defaultValue": {
+          "value": "'light'",
+          "computed": false
+        },
+        "required": false
+      },
       "availableActions": {
         "defaultValue": {
           "value": "{\n  edit: false,\n  clone: false,\n  delete: false,\n  range: false,\n  expand: false,\n  settings: false,\n  extra: false,\n}",
@@ -285370,6 +285392,13 @@ ${formatRule(Codicon.menuSubmenu)}
           "computed": false
         },
         "required": false
+      },
+      "backgroundGradient": {
+        "defaultValue": {
+          "value": "null",
+          "computed": false
+        },
+        "required": false
       }
     },
     "composes": ["../../constants/CardPropTypes"]