@elastic/eui 65.0.2 → 66.0.0

package/lib/components/basic_table/in_memory_table.js

@@ -672,6 +672,11 @@ EuiInMemoryTable.propTypes = {
        */
     sortable: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.func.isRequired]),
     isExpander: _propTypes.default.bool,
+
+    /**
+       * Creates a text wrapper around cell content that helps word break or truncate
+       * long text correctly.
+       */
     textOnly: _propTypes.default.bool,
 
     /**
@@ -945,11 +950,17 @@ EuiInMemoryTable.propTypes = {
   tableLayout: _propTypes.default.oneOf(["fixed", "auto"]),
 
   /**
-     * Applied to table cells => Any cell using render function will set this to be false, leading to unnecessary word breaks. Apply textOnly: true in order to ensure it breaks properly
+     * Applied to table cells. Any cell using a render function will set this to be false.
+     *
+     * Creates a text wrapper around cell content that helps word break or truncate
+     * long text correctly.
      */
 
   /**
-     * Applied to table cells => Any cell using render function will set this to be false, leading to unnecessary word breaks. Apply textOnly: true in order to ensure it breaks properly
+     * Applied to table cells. Any cell using a render function will set this to be false.
+     *
+     * Creates a text wrapper around cell content that helps word break or truncate
+     * long text correctly.
      */
   textOnly: _propTypes.default.bool,
   message: _propTypes.default.node,

package/lib/components/card/card.styles.js

@@ -87,14 +87,14 @@ var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize, color)
     euiCard__description: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', halfSpacing), ";;label:euiCard__description;"),
     euiCard__footer: /*#__PURE__*/(0, _react.css)("flex-grow:0;", (0, _global_styling.logicalCSS)('width', '100%'), ";", (0, _global_styling.logicalCSS)('margin-top', spacing), ";;label:euiCard__footer;"),
     top: {
-      euiCard__top: /*#__PURE__*/(0, _react.css)("flex-grow:0;font-size:0;position:relative;", (0, _global_styling.logicalCSS)('min-height', '1px'), ";", (0, _global_styling.logicalCSS)('margin-bottom', spacing), ";;label:euiCard__top;"),
+      euiCard__top: /*#__PURE__*/(0, _react.css)("flex-grow:0;font-size:0;position:relative;", (0, _global_styling.logicalCSS)('margin-bottom', spacing), ";;label:euiCard__top;"),
       layout: {
         vertical: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:vertical;"),
         horizontal: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', 'auto'), ";;label:horizontal;")
       },
       disabled: _ref2
     },
-    euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), ";", _global_styling.logicals['border-top-left-radius'], ":calc(", euiTheme.border.radius.medium, " - 1px);", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - 1px);", color === 'transparent' ? "border-radius: ".concat(euiTheme.border.radius.medium, ";") : undefined, " img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
+    euiCard__image: /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;", (0, _global_styling.logicalCSS)('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", (0, _global_styling.logicalCSS)('left', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('top', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('margin-bottom', "-".concat(paddingAmount)), ";", (0, _global_styling.logicalCSS)('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", _global_styling.logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");", color === 'transparent' ? "border-radius: ".concat(euiTheme.border.radius.medium, ";") : undefined, " img{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiCard__image;"),
     icon: {
       euiCard__icon: /*#__PURE__*/(0, _react.css)(";label:euiCard__icon;"),
       withImage: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('top', '50%'), ";", (0, _global_styling.logicalCSS)('left', '50%'), ";transform:translate(-50%, calc(-50% + -", paddingAmount, "))!important;;label:withImage;"),

package/lib/components/combo_box/combo_box.js

@@ -106,17 +106,9 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "comboBoxRefInstance", null);
 
     _defineProperty(_assertThisInitialized(_this), "comboBoxRefCallback", function (ref) {
-      // IE11 doesn't support the `relatedTarget` event property for blur events
-      // but does add it for focusout. React doesn't support `onFocusOut` so here we are.
-      if (_this.comboBoxRefInstance) {
-        _this.comboBoxRefInstance.removeEventListener('focusout', _this.onContainerBlur);
-      }
-
       _this.comboBoxRefInstance = ref;
 
       if (_this.comboBoxRefInstance) {
-        _this.comboBoxRefInstance.addEventListener('focusout', _this.onContainerBlur);
-
         var comboBoxBounds = _this.comboBoxRefInstance.getBoundingClientRect();
 
         _this.setState({
@@ -425,13 +417,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "onContainerBlur", function (event) {
       // close the options list, unless the user clicked on an option
-
-      /**
-       * FireFox returns `relatedTarget` as `null` for security reasons, but provides a proprietary `explicitOriginalTarget`.
-       * @see https://developer.mozilla.org/en-US/docs/Web/API/Event/explicitOriginalTarget
-       */
-      var focusEvent = event;
-      var relatedTarget = focusEvent.relatedTarget || focusEvent.explicitOriginalTarget;
+      var relatedTarget = event.relatedTarget;
 
       var focusedInOptionsList = relatedTarget && _this.listRefInstance && _this.listRefInstance.contains(relatedTarget);
 
@@ -876,6 +862,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
           className: classes,
           "data-test-subj": dataTestSubj,
           onKeyDown: this.onKeyDown,
+          onBlur: this.onContainerBlur,
           ref: this.comboBoxRefCallback
         }), (0, _react2.jsx)(_combo_box_input.EuiComboBoxInput, {
           autoSizeInputRef: this.autoSizeInputRefCallback,

package/lib/components/datagrid/body/data_grid_body.js

@@ -712,7 +712,13 @@ EuiDataGridBody.propTypes = {
              * Pass-through ref reference specifically for targeting
              * instances where the item content is rendered as a `button`
              */
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+
+        /**
+             * Text to be displayed in the tooltip when `showToolTip` is true.
+             * By default the text will be same as the label text.
+             */
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -756,7 +762,8 @@ EuiDataGridBody.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -800,7 +807,8 @@ EuiDataGridBody.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -844,7 +852,8 @@ EuiDataGridBody.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -888,7 +897,8 @@ EuiDataGridBody.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -932,7 +942,8 @@ EuiDataGridBody.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired)
     }).isRequired]),
 

package/lib/components/datagrid/body/data_grid_cell.js

@@ -307,7 +307,13 @@ EuiDataGridCellContent.propTypes = {
              * Pass-through ref reference specifically for targeting
              * instances where the item content is rendered as a `button`
              */
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+
+        /**
+             * Text to be displayed in the tooltip when `showToolTip` is true.
+             * By default the text will be same as the label text.
+             */
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -351,7 +357,8 @@ EuiDataGridCellContent.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -395,7 +402,8 @@ EuiDataGridCellContent.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -439,7 +447,8 @@ EuiDataGridCellContent.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -483,7 +492,8 @@ EuiDataGridCellContent.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -527,7 +537,8 @@ EuiDataGridCellContent.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired)
     }).isRequired]),
 
@@ -1352,7 +1363,8 @@ EuiDataGridCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -1396,7 +1408,8 @@ EuiDataGridCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -1440,7 +1453,8 @@ EuiDataGridCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -1484,7 +1498,8 @@ EuiDataGridCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -1528,7 +1543,8 @@ EuiDataGridCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -1572,7 +1588,8 @@ EuiDataGridCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired)
     }).isRequired]),
 

package/lib/components/datagrid/body/header/data_grid_header_cell.js

@@ -379,7 +379,13 @@ EuiDataGridHeaderCell.propTypes = {
              * Pass-through ref reference specifically for targeting
              * instances where the item content is rendered as a `button`
              */
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+
+        /**
+             * Text to be displayed in the tooltip when `showToolTip` is true.
+             * By default the text will be same as the label text.
+             */
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -423,7 +429,8 @@ EuiDataGridHeaderCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -467,7 +474,8 @@ EuiDataGridHeaderCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -511,7 +519,8 @@ EuiDataGridHeaderCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -555,7 +564,8 @@ EuiDataGridHeaderCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -599,7 +609,8 @@ EuiDataGridHeaderCell.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired)
     }).isRequired]),
 

package/lib/components/datagrid/body/header/data_grid_header_row.js

@@ -326,7 +326,13 @@ EuiDataGridHeaderRow.propTypes = {
              * Pass-through ref reference specifically for targeting
              * instances where the item content is rendered as a `button`
              */
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+
+        /**
+             * Text to be displayed in the tooltip when `showToolTip` is true.
+             * By default the text will be same as the label text.
+             */
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -370,7 +376,8 @@ EuiDataGridHeaderRow.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -414,7 +421,8 @@ EuiDataGridHeaderRow.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -458,7 +466,8 @@ EuiDataGridHeaderRow.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -502,7 +511,8 @@ EuiDataGridHeaderRow.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -546,7 +556,8 @@ EuiDataGridHeaderRow.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired)
     }).isRequired]),
 

package/lib/components/datagrid/data_grid.js

@@ -632,7 +632,13 @@ EuiDataGrid.propTypes = {
              * Pass-through ref reference specifically for targeting
              * instances where the item content is rendered as a `button`
              */
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+
+        /**
+             * Text to be displayed in the tooltip when `showToolTip` is true.
+             * By default the text will be same as the label text.
+             */
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -676,7 +682,8 @@ EuiDataGrid.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -720,7 +727,8 @@ EuiDataGrid.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -764,7 +772,8 @@ EuiDataGrid.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -808,7 +817,8 @@ EuiDataGrid.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -852,7 +862,8 @@ EuiDataGrid.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired)
     }).isRequired]),
 

package/lib/components/datagrid/utils/in_memory.js

@@ -426,7 +426,13 @@ EuiDataGridInMemoryRenderer.propTypes = {
              * Pass-through ref reference specifically for targeting
              * instances where the item content is rendered as a `button`
              */
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+
+        /**
+             * Text to be displayed in the tooltip when `showToolTip` is true.
+             * By default the text will be same as the label text.
+             */
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -470,7 +476,8 @@ EuiDataGridInMemoryRenderer.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -514,7 +521,8 @@ EuiDataGridInMemoryRenderer.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -558,7 +566,8 @@ EuiDataGridInMemoryRenderer.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -602,7 +611,8 @@ EuiDataGridInMemoryRenderer.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired]),
 
       /**
@@ -646,7 +656,8 @@ EuiDataGridInMemoryRenderer.propTypes = {
         }),
         onClick: _propTypes.default.func,
         wrapText: _propTypes.default.bool,
-        buttonRef: _propTypes.default.any
+        buttonRef: _propTypes.default.any,
+        toolTipText: _propTypes.default.string
       }).isRequired)
     }).isRequired]),
 

package/lib/components/description_list/description_list.js

@@ -23,7 +23,7 @@ var _description_list_context = require("./description_list_context");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["align", "children", "className", "compressed", "descriptionProps", "listItems", "textStyle", "titleProps", "type"];
+var _excluded = ["align", "children", "className", "compressed", "descriptionProps", "listItems", "textStyle", "titleProps", "type", "gutterSize"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -47,6 +47,8 @@ var EuiDescriptionList = function EuiDescriptionList(_ref) {
       titleProps = _ref.titleProps,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'row' : _ref$type,
+      _ref$gutterSize = _ref.gutterSize,
+      gutterSize = _ref$gutterSize === void 0 ? 'm' : _ref$gutterSize,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var euiTheme = (0, _services.useEuiTheme)();
@@ -72,7 +74,8 @@ var EuiDescriptionList = function EuiDescriptionList(_ref) {
       type: type,
       compressed: compressed,
       textStyle: textStyle,
-      align: align
+      align: align,
+      gutterSize: gutterSize
     }
   }, (0, _react2.jsx)("dl", _extends({
     className: classes,
@@ -132,5 +135,10 @@ EuiDescriptionList.propTypes = {
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
     css: _propTypes.default.any
-  })
+  }),
+
+  /**
+     * Vertical spacing added between `EuiDescriptionList` elements
+     */
+  gutterSize: _propTypes.default.any
 };

package/lib/components/description_list/description_list_context.js

@@ -17,7 +17,8 @@ var _react = require("react");
 var contextDefaults = {
   type: 'row',
   textStyle: 'normal',
-  align: 'left'
+  align: 'left',
+  gutterSize: 'm'
 };
 exports.contextDefaults = contextDefaults;
 var EuiDescriptionListContext = /*#__PURE__*/(0, _react.createContext)(contextDefaults);

package/lib/components/description_list/description_list_description.js

@@ -56,7 +56,8 @@ var EuiDescriptionListDescription = function EuiDescriptionListDescription(_ref)
       type = _useContext.type,
       textStyle = _useContext.textStyle,
       compressed = _useContext.compressed,
-      align = _useContext.align;
+      align = _useContext.align,
+      gutterSize = _useContext.gutterSize;
 
   var theme = (0, _services.useEuiTheme)();
   var styles = (0, _description_list_description.euiDescriptionListDescriptionStyles)(theme);
@@ -73,6 +74,7 @@ var EuiDescriptionListDescription = function EuiDescriptionListDescription(_ref)
         conditionalStyles.push(styles.left);
       }
 
+      conditionalStyles.push(styles[gutterSize]);
       break;
   }
 

package/lib/components/description_list/description_list_description.styles.js

@@ -24,7 +24,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 
 var euiDescriptionListDescriptionStyles = function euiDescriptionListDescriptionStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var columnDisplay = "\n    ".concat((0, _global_styling.logicalCSS)('width', '50%'), " // Flex-basis doesn't work in IE with padding\n    ").concat((0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), "\n    &:not(:first-of-type) {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), "\n    }\n  ");
+  var columnDisplay = "\n    ".concat((0, _global_styling.logicalCSS)('width', '50%'), "\n    ").concat((0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), "\n  ");
   return {
     euiDescriptionList__description: /*#__PURE__*/(0, _react.css)(";label:euiDescriptionList__description;"),
     // Types
@@ -44,7 +44,10 @@ var euiDescriptionListDescriptionStyles = function euiDescriptionListDescription
       normal: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:normal;")
     },
     // Column types should align description text to the left when EuiDecriptionList is centered
-    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;")
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;"),
+    // Gutter
+    s: /*#__PURE__*/(0, _react.css)("&:not(:first-of-type){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), ";};label:s;"),
+    m: /*#__PURE__*/(0, _react.css)("&:not(:first-of-type){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), ";};label:m;")
   };
 };
 

package/lib/components/description_list/description_list_title.js

@@ -56,7 +56,8 @@ var EuiDescriptionListTitle = function EuiDescriptionListTitle(_ref) {
       type = _useContext.type,
       textStyle = _useContext.textStyle,
       compressed = _useContext.compressed,
-      align = _useContext.align;
+      align = _useContext.align,
+      gutterSize = _useContext.gutterSize;
 
   var theme = (0, _services.useEuiTheme)();
   var styles = (0, _description_list_title.euiDescriptionListTitleStyles)(theme);
@@ -76,7 +77,7 @@ var EuiDescriptionListTitle = function EuiDescriptionListTitle(_ref) {
       break;
   }
 
-  var cssStyles = [styles.euiDescriptionList__title, styles[type]].concat(_toConsumableArray(conditionalStyles));
+  var cssStyles = [styles.euiDescriptionList__title, styles[type], styles[gutterSize]].concat(_toConsumableArray(conditionalStyles));
   var classes = (0, _classnames.default)('euiDescriptionList__title', className);
   return (0, _react2.jsx)("dt", _extends({
     className: classes,