carbon-addons-iot-react 5.12.0 → 5.13.0

package/es/components/Card/CardToolbar.js

@@ -163,8 +163,8 @@ var CardToolbar = function CardToolbar(_ref) {
   var extraActionSlot = extraActions && Object.keys(extraActions).length !== 0 ? extraActions.children && extraActions.children.length ? /*#__PURE__*/React__default.createElement(OverflowMenu, _extends({
     menuOptionsClass: "".concat(iotPrefix, "--card--toolbar__overflow-menu"),
     flipped: overflowMenuPosition,
-    title: extraActions.iconDescription || mergedI18n.overflowMenuDescription,
-    iconDescription: extraActions.iconDescription || mergedI18n.overflowMenuDescription
+    iconDescription: extraActions.iconDescription || mergedI18n.overflowMenuDescription,
+    autoAlign: true
   }, extraActions.icon ? {
     renderIcon: extraActions.icon
   } : {}), extraActions.children.map(function (child, i) {
@@ -195,8 +195,8 @@ var CardToolbar = function CardToolbar(_ref) {
     className: classnames(className, "".concat(iotPrefix, "--card--toolbar"))
   }, (availableActions.clone || availableActions.delete) && /*#__PURE__*/React__default.createElement(OverflowMenu, {
     flipped: overflowMenuPosition,
-    title: mergedI18n.overflowMenuDescription,
-    iconDescription: mergedI18n.overflowMenuDescription
+    iconDescription: mergedI18n.overflowMenuDescription,
+    autoAlign: true
   }, availableActions.clone && /*#__PURE__*/React__default.createElement(OverflowMenuItem, {
     onClick: function onClick() {
       onCardAction(CARD_ACTIONS.CLONE_CARD);

package/es/components/PageWizard/PageWizard.js

@@ -161,9 +161,10 @@ var PageWizard = function PageWizard(_ref) {
         description = _ref2.description,
         subStep = _ref2.subStep,
         disabled = _ref2.disabled,
-        invalid = _ref2.invalid;
+        invalid = _ref2.invalid,
+        pictogramName = _ref2.pictogramName;
       if (!subStep) {
-        array.push(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, id && {
+        array.push(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, id && {
           id: id
         }), label && {
           label: label
@@ -175,13 +176,15 @@ var PageWizard = function PageWizard(_ref) {
           disabled: disabled
         }), invalid && {
           invalid: invalid
+        }), pictogramName && {
+          pictogramName: pictogramName
         }));
       } else {
         var lastMainStep = array[array.length - 1];
         if (!('children' in lastMainStep)) {
           lastMainStep.children = [];
         }
-        lastMainStep.children.push(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, id && {
+        lastMainStep.children.push(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, id && {
           id: id
         }), label && {
           label: label
@@ -193,6 +196,8 @@ var PageWizard = function PageWizard(_ref) {
           disabled: disabled
         }), invalid && {
           invalid: invalid
+        }), pictogramName && {
+          pictogramName: pictogramName
         }));
       }
     });

package/es/components/ProgressIndicator/ProgressIndicator.js

@@ -15,6 +15,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import { Enter, Space } from '../../node_modules/@carbon/react/es/internal/keyboard/keys.js';
 import { matches } from '../../node_modules/@carbon/react/es/internal/keyboard/match.js';
+import * as Pictograms from '@carbon/pictograms-react';
 import { settings } from '../../constants/Settings.js';
 import { CheckmarkOutline, Warning, CircleFilled, RadioButton } from '@carbon/icons-react';
 
@@ -39,7 +40,9 @@ var ProgressStep = function ProgressStep(_ref) {
     incomplete = _ref.incomplete,
     mainStep = _ref.mainStep,
     subStep = _ref.subStep,
-    spaceEqually = _ref.spaceEqually;
+    spaceEqually = _ref.spaceEqually,
+    pictogramName = _ref.pictogramName,
+    hasPictogram = _ref.hasPictogram;
   var accessible = isClickable && !disabled && !current;
   var handleClick = function handleClick() {
     if (onClick) {
@@ -137,7 +140,14 @@ var ProgressStep = function ProgressStep(_ref) {
     // for testing purposes
     var dataTestIdLabel = label.replace(/\s/g, '-').toLowerCase();
     var type = mainStep ? 'main' : 'sub';
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
+
+    // get pictogram component from name passed in items array via pictogramName property
+    var PictogramComponent = pictogramName !== null && pictogramName !== void 0 && pictogramName.length ? Pictograms[pictogramName] : null;
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null,
+    // reserve space in all steps if even one pictogram is showing to align all the steps correctly
+    hasPictogram && /*#__PURE__*/React__default.createElement("div", {
+      className: "".concat(iotPrefix, "--progress-step--pictogram-item")
+    }, PictogramComponent && /*#__PURE__*/React__default.createElement(PictogramComponent, null)), /*#__PURE__*/React__default.createElement("button", {
       className: buttonClasses,
       type: "button",
       "aria-disabled": disabled,
@@ -150,7 +160,7 @@ var ProgressStep = function ProgressStep(_ref) {
       className: textClasses
     }, /*#__PURE__*/React__default.createElement(StepLabel, null), /*#__PURE__*/React__default.createElement(StepSecondaryLabel, null))));
   };
-  var classes = classnames(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--progress-step"), true), "".concat(iotPrefix, "--progress-step--current"), current && !disabled), "".concat(iotPrefix, "--progress-step--complete"), complete && !disabled && !invalid), "".concat(iotPrefix, "--progress-step--incomplete"), incomplete && !current && !disabled && !invalid), "".concat(iotPrefix, "--progress-step--disabled"), disabled), "".concat(iotPrefix, "--progress-step--invalid"), invalid));
+  var classes = classnames(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--progress-step"), true), "".concat(iotPrefix, "--progress-step--current"), current && !disabled), "".concat(iotPrefix, "--progress-step--complete"), complete && !disabled && !invalid), "".concat(iotPrefix, "--progress-step--incomplete"), incomplete && !current && !disabled && !invalid), "".concat(iotPrefix, "--progress-step--disabled"), disabled), "".concat(iotPrefix, "--progress-step--invalid"), invalid), "".concat(iotPrefix, "--progress-step--pictogram"), hasPictogram));
   return /*#__PURE__*/React__default.createElement("li", {
     className: classes,
     style: getStepWidth()
@@ -175,7 +185,9 @@ ProgressStep.propTypes = {
   mainStep: PropTypes.bool,
   subStep: PropTypes.bool,
   onClick: PropTypes.func,
-  spaceEqually: PropTypes.bool
+  spaceEqually: PropTypes.bool,
+  pictogramName: PropTypes.string,
+  hasPictogram: PropTypes.bool
 };
 ProgressStep.defaultProps = {
   label: null,
@@ -195,7 +207,9 @@ ProgressStep.defaultProps = {
   mainStep: false,
   subStep: false,
   onClick: null,
-  spaceEqually: false
+  spaceEqually: false,
+  pictogramName: null,
+  hasPictogram: false
 };
 var ProgressIndicator = function ProgressIndicator(_ref2) {
   var className = _ref2.className,
@@ -262,18 +276,25 @@ var ProgressIndicator = function ProgressIndicator(_ref2) {
     return setCurrentStep(currentItemId);
   }, [currentItemId]);
   var classes = classnames(_defineProperty(_defineProperty(_defineProperty({}, "".concat(iotPrefix, "--progress-indicator"), true), "".concat(iotPrefix, "--progress-indicator--vertical"), isVerticalMode), className, className));
+
+  // check if any pictogram is to be shown, this will modify styling of all the steps
+  var hasPictogram = newItems.some(function (_ref3) {
+    var pictogramName = _ref3.pictogramName;
+    return (pictogramName === null || pictogramName === void 0 ? void 0 : pictogramName.length) && typeof Pictograms[pictogramName] !== 'undefined';
+  });
   return newItems.length > 1 ? /*#__PURE__*/React__default.createElement("ul", {
     className: classes,
     "data-testid": testId
-  }, newItems.map(function (_ref3, index) {
-    var id = _ref3.id,
-      label = _ref3.label,
-      secondaryLabel = _ref3.secondaryLabel,
-      description = _ref3.description,
-      disabled = _ref3.disabled,
-      invalid = _ref3.invalid,
-      stepNumber = _ref3.stepNumber,
-      level = _ref3.level;
+  }, newItems.map(function (_ref4, index) {
+    var id = _ref4.id,
+      label = _ref4.label,
+      secondaryLabel = _ref4.secondaryLabel,
+      description = _ref4.description,
+      disabled = _ref4.disabled,
+      invalid = _ref4.invalid,
+      stepNumber = _ref4.stepNumber,
+      level = _ref4.level,
+      pictogramName = _ref4.pictogramName;
     return /*#__PURE__*/React__default.createElement(ProgressStep, {
       id: id,
       key: id,
@@ -294,7 +315,9 @@ var ProgressIndicator = function ProgressIndicator(_ref2) {
       disabled: disabled,
       invalid: invalid,
       isClickable: isClickable,
-      spaceEqually: spaceEqually
+      spaceEqually: spaceEqually,
+      pictogramName: pictogramName,
+      hasPictogram: hasPictogram
     });
   })) : null;
 };
@@ -306,7 +329,8 @@ ProgressIndicator.propTypes = {
     secondaryLabel: PropTypes.string,
     description: PropTypes.string,
     disabled: PropTypes.bool,
-    invalid: PropTypes.bool
+    invalid: PropTypes.bool,
+    pictogramName: PropTypes.string
   })),
   currentItemId: IDPropTypes,
   showLabels: PropTypes.bool,
@@ -381,6 +405,10 @@ ProgressIndicator.__docgenInfo = {
             "invalid": {
               "name": "bool",
               "required": false
+            },
+            "pictogramName": {
+              "name": "string",
+              "required": false
             }
           }
         }

package/lib/components/Card/CardToolbar.js

@@ -176,8 +176,8 @@ var CardToolbar = function CardToolbar(_ref) {
   var extraActionSlot = extraActions && Object.keys(extraActions).length !== 0 ? extraActions.children && extraActions.children.length ? /*#__PURE__*/React__default.default.createElement(react.OverflowMenu, _extends__default.default({
     menuOptionsClass: "".concat(iotPrefix, "--card--toolbar__overflow-menu"),
     flipped: overflowMenuPosition,
-    title: extraActions.iconDescription || mergedI18n.overflowMenuDescription,
-    iconDescription: extraActions.iconDescription || mergedI18n.overflowMenuDescription
+    iconDescription: extraActions.iconDescription || mergedI18n.overflowMenuDescription,
+    autoAlign: true
   }, extraActions.icon ? {
     renderIcon: extraActions.icon
   } : {}), extraActions.children.map(function (child, i) {
@@ -208,8 +208,8 @@ var CardToolbar = function CardToolbar(_ref) {
     className: classnames__default.default(className, "".concat(iotPrefix, "--card--toolbar"))
   }, (availableActions.clone || availableActions.delete) && /*#__PURE__*/React__default.default.createElement(react.OverflowMenu, {
     flipped: overflowMenuPosition,
-    title: mergedI18n.overflowMenuDescription,
-    iconDescription: mergedI18n.overflowMenuDescription
+    iconDescription: mergedI18n.overflowMenuDescription,
+    autoAlign: true
   }, availableActions.clone && /*#__PURE__*/React__default.default.createElement(react.OverflowMenuItem, {
     onClick: function onClick() {
       onCardAction(LayoutConstants.CARD_ACTIONS.CLONE_CARD);

package/lib/components/PageWizard/PageWizard.js

@@ -172,9 +172,10 @@ var PageWizard = function PageWizard(_ref) {
         description = _ref2.description,
         subStep = _ref2.subStep,
         disabled = _ref2.disabled,
-        invalid = _ref2.invalid;
+        invalid = _ref2.invalid,
+        pictogramName = _ref2.pictogramName;
       if (!subStep) {
-        array.push(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, id && {
+        array.push(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, id && {
           id: id
         }), label && {
           label: label
@@ -186,13 +187,15 @@ var PageWizard = function PageWizard(_ref) {
           disabled: disabled
         }), invalid && {
           invalid: invalid
+        }), pictogramName && {
+          pictogramName: pictogramName
         }));
       } else {
         var lastMainStep = array[array.length - 1];
         if (!('children' in lastMainStep)) {
           lastMainStep.children = [];
         }
-        lastMainStep.children.push(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, id && {
+        lastMainStep.children.push(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, id && {
           id: id
         }), label && {
           label: label
@@ -204,6 +207,8 @@ var PageWizard = function PageWizard(_ref) {
           disabled: disabled
         }), invalid && {
           invalid: invalid
+        }), pictogramName && {
+          pictogramName: pictogramName
         }));
       }
     });

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -17,16 +17,36 @@ var PropTypes = require('prop-types');
 var classnames = require('classnames');
 var keys = require('../../node_modules/@carbon/react/es/internal/keyboard/keys.js');
 var match = require('../../node_modules/@carbon/react/es/internal/keyboard/match.js');
+var Pictograms = require('@carbon/pictograms-react');
 var Settings = require('../../constants/Settings.js');
 var iconsReact = require('@carbon/icons-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
 var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 var classnames__default = /*#__PURE__*/_interopDefault(classnames);
+var Pictograms__namespace = /*#__PURE__*/_interopNamespace(Pictograms);
 
 var iotPrefix = Settings.settings.iotPrefix;
 var IDPropTypes = PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.number]);
@@ -49,7 +69,9 @@ var ProgressStep = function ProgressStep(_ref) {
     incomplete = _ref.incomplete,
     mainStep = _ref.mainStep,
     subStep = _ref.subStep,
-    spaceEqually = _ref.spaceEqually;
+    spaceEqually = _ref.spaceEqually,
+    pictogramName = _ref.pictogramName,
+    hasPictogram = _ref.hasPictogram;
   var accessible = isClickable && !disabled && !current;
   var handleClick = function handleClick() {
     if (onClick) {
@@ -147,7 +169,14 @@ var ProgressStep = function ProgressStep(_ref) {
     // for testing purposes
     var dataTestIdLabel = label.replace(/\s/g, '-').toLowerCase();
     var type = mainStep ? 'main' : 'sub';
-    return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("button", {
+
+    // get pictogram component from name passed in items array via pictogramName property
+    var PictogramComponent = pictogramName !== null && pictogramName !== void 0 && pictogramName.length ? Pictograms__namespace[pictogramName] : null;
+    return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null,
+    // reserve space in all steps if even one pictogram is showing to align all the steps correctly
+    hasPictogram && /*#__PURE__*/React__default.default.createElement("div", {
+      className: "".concat(iotPrefix, "--progress-step--pictogram-item")
+    }, PictogramComponent && /*#__PURE__*/React__default.default.createElement(PictogramComponent, null)), /*#__PURE__*/React__default.default.createElement("button", {
       className: buttonClasses,
       type: "button",
       "aria-disabled": disabled,
@@ -160,7 +189,7 @@ var ProgressStep = function ProgressStep(_ref) {
       className: textClasses
     }, /*#__PURE__*/React__default.default.createElement(StepLabel, null), /*#__PURE__*/React__default.default.createElement(StepSecondaryLabel, null))));
   };
-  var classes = classnames__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, "".concat(iotPrefix, "--progress-step"), true), "".concat(iotPrefix, "--progress-step--current"), current && !disabled), "".concat(iotPrefix, "--progress-step--complete"), complete && !disabled && !invalid), "".concat(iotPrefix, "--progress-step--incomplete"), incomplete && !current && !disabled && !invalid), "".concat(iotPrefix, "--progress-step--disabled"), disabled), "".concat(iotPrefix, "--progress-step--invalid"), invalid));
+  var classes = classnames__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, "".concat(iotPrefix, "--progress-step"), true), "".concat(iotPrefix, "--progress-step--current"), current && !disabled), "".concat(iotPrefix, "--progress-step--complete"), complete && !disabled && !invalid), "".concat(iotPrefix, "--progress-step--incomplete"), incomplete && !current && !disabled && !invalid), "".concat(iotPrefix, "--progress-step--disabled"), disabled), "".concat(iotPrefix, "--progress-step--invalid"), invalid), "".concat(iotPrefix, "--progress-step--pictogram"), hasPictogram));
   return /*#__PURE__*/React__default.default.createElement("li", {
     className: classes,
     style: getStepWidth()
@@ -185,7 +214,9 @@ ProgressStep.propTypes = {
   mainStep: PropTypes__default.default.bool,
   subStep: PropTypes__default.default.bool,
   onClick: PropTypes__default.default.func,
-  spaceEqually: PropTypes__default.default.bool
+  spaceEqually: PropTypes__default.default.bool,
+  pictogramName: PropTypes__default.default.string,
+  hasPictogram: PropTypes__default.default.bool
 };
 ProgressStep.defaultProps = {
   label: null,
@@ -205,7 +236,9 @@ ProgressStep.defaultProps = {
   mainStep: false,
   subStep: false,
   onClick: null,
-  spaceEqually: false
+  spaceEqually: false,
+  pictogramName: null,
+  hasPictogram: false
 };
 var ProgressIndicator = function ProgressIndicator(_ref2) {
   var className = _ref2.className,
@@ -272,18 +305,25 @@ var ProgressIndicator = function ProgressIndicator(_ref2) {
     return setCurrentStep(currentItemId);
   }, [currentItemId]);
   var classes = classnames__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, "".concat(iotPrefix, "--progress-indicator"), true), "".concat(iotPrefix, "--progress-indicator--vertical"), isVerticalMode), className, className));
+
+  // check if any pictogram is to be shown, this will modify styling of all the steps
+  var hasPictogram = newItems.some(function (_ref3) {
+    var pictogramName = _ref3.pictogramName;
+    return (pictogramName === null || pictogramName === void 0 ? void 0 : pictogramName.length) && typeof Pictograms__namespace[pictogramName] !== 'undefined';
+  });
   return newItems.length > 1 ? /*#__PURE__*/React__default.default.createElement("ul", {
     className: classes,
     "data-testid": testId
-  }, newItems.map(function (_ref3, index) {
-    var id = _ref3.id,
-      label = _ref3.label,
-      secondaryLabel = _ref3.secondaryLabel,
-      description = _ref3.description,
-      disabled = _ref3.disabled,
-      invalid = _ref3.invalid,
-      stepNumber = _ref3.stepNumber,
-      level = _ref3.level;
+  }, newItems.map(function (_ref4, index) {
+    var id = _ref4.id,
+      label = _ref4.label,
+      secondaryLabel = _ref4.secondaryLabel,
+      description = _ref4.description,
+      disabled = _ref4.disabled,
+      invalid = _ref4.invalid,
+      stepNumber = _ref4.stepNumber,
+      level = _ref4.level,
+      pictogramName = _ref4.pictogramName;
     return /*#__PURE__*/React__default.default.createElement(ProgressStep, {
       id: id,
       key: id,
@@ -304,7 +344,9 @@ var ProgressIndicator = function ProgressIndicator(_ref2) {
       disabled: disabled,
       invalid: invalid,
       isClickable: isClickable,
-      spaceEqually: spaceEqually
+      spaceEqually: spaceEqually,
+      pictogramName: pictogramName,
+      hasPictogram: hasPictogram
     });
   })) : null;
 };
@@ -316,7 +358,8 @@ ProgressIndicator.propTypes = {
     secondaryLabel: PropTypes__default.default.string,
     description: PropTypes__default.default.string,
     disabled: PropTypes__default.default.bool,
-    invalid: PropTypes__default.default.bool
+    invalid: PropTypes__default.default.bool,
+    pictogramName: PropTypes__default.default.string
   })),
   currentItemId: IDPropTypes,
   showLabels: PropTypes__default.default.bool,
@@ -391,6 +434,10 @@ ProgressIndicator.__docgenInfo = {
             "invalid": {
               "name": "bool",
               "required": false
+            },
+            "pictogramName": {
+              "name": "string",
+              "required": false
             }
           }
         }

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

@@ -32484,6 +32484,9 @@ span.cds--pagination__text.cds--pagination__items-count {
   width: 8rem;
   height: 4.25rem;
 }
+.iot--progress-indicator .iot--progress-step.iot--progress-step--pictogram {
+  height: 7.25rem;
+}
 .iot--progress-indicator .iot--progress-step-line, .iot--progress-indicator .iot--progress-step-line--sub, .iot--progress-indicator .iot--progress-step-line--sub-complete, .iot--progress-indicator .iot--progress-step-line--complete {
   position: absolute;
   width: calc(100% - 1.5rem);
@@ -32669,6 +32672,18 @@ html[dir=rtl] .iot--progress-indicator .iot--progress-text {
 .iot--progress-indicator--vertical {
   display: unset;
 }
+.iot--progress-indicator--vertical .iot--progress-step {
+  display: flex;
+  gap: 0.5rem;
+}
+.iot--progress-indicator--vertical .iot--progress-step .iot--progress-step--pictogram-item {
+  margin-top: -6px;
+  margin-bottom: 0;
+}
+.iot--progress-indicator--vertical .iot--progress-step.iot--progress-step--pictogram {
+  width: 11rem;
+  height: 4.25rem;
+}
 .iot--progress-indicator--vertical .iot--progress-step-button .iot--progress-text {
   left: 2rem;
   top: 0.1875rem;
@@ -32716,6 +32731,15 @@ html[dir=rtl] .iot--progress-indicator--vertical .cds--skeleton .cds--progress-s
 .iot--progress-indicator .cds--skeleton .cds--progress-step {
   flex: unset;
 }
+.iot--progress-indicator .iot--progress-step--pictogram-item {
+  width: 3rem;
+  height: 3rem;
+  margin-bottom: 0.5rem;
+}
+.iot--progress-indicator .iot--progress-step--pictogram-item svg {
+  width: 100%;
+  height: 100%;
+}
 
 .iot--rule-builder-header {
   display: flex;