npm - @elastic/eui - Versions diffs - 62.0.0 → 62.1.0 - Mend

@elastic/eui 62.0.0 → 62.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (355) hide show

package/test-env/components/collapsible_nav/collapsible_nav.js CHANGED Viewed

@@ -263,7 +263,7 @@ EuiCollapsibleNav.propTypes = {
   /**
      * Named breakpoint or pixel value for customizing the minimum window width to enable docking
      */
-  pushMinBreakpoint: _propTypes.default.oneOfType([_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired, _propTypes.default.number.isRequired]),
+  pushMinBreakpoint: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.number.isRequired]),
   style: _propTypes.default.any,
   /**
@@ -287,7 +287,7 @@ EuiCollapsibleNav.propTypes = {
      * Keeps navigation flyout visible and push `<body>` content via padding
      */
   isDocked: _propTypes.default.bool,
-  dockedBreakpoint: _propTypes.default.oneOfType([_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired, _propTypes.default.number.isRequired]),
+  dockedBreakpoint: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.number.isRequired]),
   /**
      * Button for controlling visible state of the nav

package/test-env/components/comment_list/comment_event.js CHANGED Viewed

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiCommentEvent = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -62,14 +60,6 @@ var EuiCommentEvent = function EuiCommentEvent(_ref) {
   var cssStyles = [styles.euiCommentEvent, styles[type]];
   var headerStyles = (0, _comment_event.euiCommentEventHeaderStyles)(euiTheme);
   var cssHeaderStyles = [headerStyles.euiCommentEvent__header, eventColor && headerStyles.hasEventColor, isTypeRegular && headerStyles.regular];
-  var cssHeaderPanelStyles = headerStyles.euiCommentEvent__headerPanel;
-  var cssHeaderEventIconStyles = headerStyles.euiCommentEvent__headerEventIcon;
-  var cssHeaderUsernameStyles = headerStyles.euiCommentEvent__headerUsername;
-  var cssHeaderEventStyles = headerStyles.euiCommentEvent__headerEvent;
-  var cssHeaderTimestampStyles = headerStyles.euiCommentEvent__headerTimestamp;
-  var cssHeaderMainStyles = headerStyles.euiCommentEvent__headerMain;
-  var cssHeaderDataStyles = headerStyles.euiCommentEvent__headerData;
-  var cssHeaderActionsStyles = headerStyles.euiCommentEvent__headerActions;
   var bodyStyles = (0, _comment_event.euiCommentEventBodyStyles)(euiTheme);
   var cssBodyStyles = [bodyStyles.euiCommentEvent__body, bodyStyles[type]];
   var isFigure = isTypeRegular;
@@ -85,34 +75,40 @@ var EuiCommentEvent = function EuiCommentEvent(_ref) {
     color: 'transparent',
     paddingSize: 'none'
   };
-  var eventHeader = (0, _react2.jsx)(HeaderElement, {
+  return (0, _react2.jsx)(Element, {
+    className: classes,
+    css: cssStyles,
+    "data-type": type
+  }, hasEventElements && (0, _react2.jsx)(HeaderElement, {
+    className: "euiCommentEvent__header",
     css: cssHeaderStyles
-  }, (0, _react2.jsx)(_panel.EuiPanel, (0, _extends2.default)({}, panelProps, {
-    css: cssHeaderPanelStyles
-  }), (0, _react2.jsx)("div", {
-    css: cssHeaderMainStyles
+  }, (0, _react2.jsx)(_panel.EuiPanel, panelProps, (0, _react2.jsx)("div", {
+    className: "euiCommentEvent__headerMain",
+    css: headerStyles.euiCommentEvent__headerMain
   }, (0, _react2.jsx)("div", {
-    css: cssHeaderDataStyles
+    className: "euiCommentEvent__headerData",
+    css: headerStyles.euiCommentEvent__headerData
   }, eventIcon && (0, _react2.jsx)(_avatar.EuiAvatar, {
-    css: cssHeaderEventIconStyles,
+    className: "euiCommentEvent__headerEventIcon",
+    css: headerStyles.euiCommentEvent__headerEventIcon,
     size: "s",
     iconType: eventIcon,
     name: eventIconAriaLabel ? eventIconAriaLabel : '',
     color: "subdued",
     "aria-hidden": !eventIconAriaLabel
   }), username && (0, _react2.jsx)("div", {
-    css: cssHeaderUsernameStyles
+    className: "euiCommentEvent__headerUsername",
+    css: headerStyles.euiCommentEvent__headerUsername
   }, username), event && (0, _react2.jsx)("div", {
-    css: cssHeaderEventStyles
+    className: "euiCommentEvent__headerEvent",
+    css: headerStyles.euiCommentEvent__headerEvent
   }, event), timestamp && (0, _react2.jsx)("div", {
-    css: cssHeaderTimestampStyles
+    className: "euiCommentEvent__headerTimestamp"
   }, (0, _react2.jsx)("time", null, timestamp))), actions && (0, _react2.jsx)("div", {
-    css: cssHeaderActionsStyles
-  }, actions))));
-  return (0, _react2.jsx)(Element, {
-    className: classes,
-    css: cssStyles
-  }, hasEventElements && eventHeader, children && (0, _react2.jsx)("div", {
+    className: "euiCommentEvent__headerActions",
+    css: headerStyles.euiCommentEvent__headerActions
+  }, actions)))), children && (0, _react2.jsx)("div", {
+    className: "euiCommentEvent__body",
     css: cssBodyStyles
   }, children));
 };

package/test-env/components/comment_list/comment_event.styles.js CHANGED Viewed

@@ -34,20 +34,20 @@ var euiCommentEventStyles = function euiCommentEventStyles(_ref4) {
 exports.euiCommentEventStyles = euiCommentEventStyles;
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "bqgcpj-hasEventColor",
-  styles: "padding:0;label:hasEventColor;"
+  name: "ui5tce-euiCommentEvent__headerEvent",
+  styles: "align-items:center;display:inline-flex;white-space:pre-wrap;flex-wrap:wrap;label:euiCommentEvent__headerEvent;"
 } : {
-  name: "bqgcpj-hasEventColor",
-  styles: "padding:0;label:hasEventColor;",
+  name: "ui5tce-euiCommentEvent__headerEvent",
+  styles: "align-items:center;display:inline-flex;white-space:pre-wrap;flex-wrap:wrap;label:euiCommentEvent__headerEvent;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "ui5tce-euiCommentEvent__headerEvent",
-  styles: "align-items:center;display:inline-flex;white-space:pre-wrap;flex-wrap:wrap;label:euiCommentEvent__headerEvent;"
+  name: "bqgcpj-hasEventColor",
+  styles: "padding:0;label:hasEventColor;"
 } : {
-  name: "ui5tce-euiCommentEvent__headerEvent",
-  styles: "align-items:center;display:inline-flex;white-space:pre-wrap;flex-wrap:wrap;label:euiCommentEvent__headerEvent;",
+  name: "bqgcpj-hasEventColor",
+  styles: "padding:0;label:hasEventColor;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
@@ -55,18 +55,17 @@ var euiCommentEventHeaderStyles = function euiCommentEventHeaderStyles(_ref5) {
   var euiTheme = _ref5.euiTheme;
   return {
     euiCommentEvent__header: /*#__PURE__*/(0, _react.css)(";label:euiCommentEvent__header;"),
-    euiCommentEvent__headerPanel: /*#__PURE__*/(0, _react.css)(";label:euiCommentEvent__headerPanel;"),
+    // types
+    regular: /*#__PURE__*/(0, _react.css)("background:", euiTheme.colors.lightestShade, ";border-bottom:", euiTheme.border.thin, ";padding:", euiTheme.size.s, ";;label:regular;"),
+    // variants
+    hasEventColor: _ref2,
+    // Children
     euiCommentEvent__headerMain: /*#__PURE__*/(0, _react.css)("display:flex;flex:1;gap:", euiTheme.size.s, ";;label:euiCommentEvent__headerMain;"),
     euiCommentEvent__headerData: /*#__PURE__*/(0, _react.css)("display:flex;flex:1;align-items:center;flex-wrap:wrap;gap:", euiTheme.size.xs, ";;label:euiCommentEvent__headerData;"),
     euiCommentEvent__headerEventIcon: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), ";;label:euiCommentEvent__headerEventIcon;"),
     euiCommentEvent__headerUsername: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.semiBold, ";;label:euiCommentEvent__headerUsername;"),
-    euiCommentEvent__headerEvent: _ref2,
-    euiCommentEvent__headerTimestamp: /*#__PURE__*/(0, _react.css)(";label:euiCommentEvent__headerTimestamp;"),
-    euiCommentEvent__headerActions: /*#__PURE__*/(0, _react.css)("display:flex;flex-wrap:wrap;gap:", euiTheme.size.xs, ";;label:euiCommentEvent__headerActions;"),
-    // types
-    regular: /*#__PURE__*/(0, _react.css)("background:", euiTheme.colors.lightestShade, ";border-bottom:", euiTheme.border.thin, ";padding:", euiTheme.size.s, ";;label:regular;"),
-    // variants
-    hasEventColor: _ref
+    euiCommentEvent__headerEvent: _ref,
+    euiCommentEvent__headerActions: /*#__PURE__*/(0, _react.css)("display:flex;flex-wrap:wrap;gap:", euiTheme.size.xs, ";;label:euiCommentEvent__headerActions;")
   };
 };

package/test-env/components/control_bar/control_bar.js CHANGED Viewed

@@ -371,6 +371,7 @@ EuiControlBar.propTypes = {
       "aria-label": _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
       href: _propTypes.default.string,
+      rel: _propTypes.default.string,
       onClick: _propTypes.default.func,
       /**
@@ -393,6 +394,18 @@ EuiControlBar.propTypes = {
            */
       "aria-current": _propTypes.default.any
     }).isRequired),
+    /**
+       * Determines breadcrumbs appearance, with `page` being the default styling.
+       * Application breadcrumbs should only be once per page, in (e.g.) EuiHeader
+       */
+    type: _propTypes.default.oneOf(["page", "application"]),
+    /**
+       * Whether the last breadcrumb should visually (and accessibly, to screen readers)
+       * be highlighted as the current page. Defaults to true.
+       */
+    lastBreadcrumbIsCurrentPage: _propTypes.default.bool,
     text: _propTypes.default.node,
     iconType: _propTypes.default.string
   }).isRequired).isRequired,

package/test-env/components/datagrid/body/data_grid_body.js CHANGED Viewed

@@ -947,7 +947,7 @@ EuiDataGridBody.propTypes = {
     /**
        * The color associated with this data type; it's used to color the icon token
        */
-    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.oneOf(["euiColorVis0", "euiColorVis1", "euiColorVis2", "euiColorVis3", "euiColorVis4", "euiColorVis5", "euiColorVis6", "euiColorVis7", "euiColorVis8", "euiColorVis9", "gray"]).isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
+    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
     /**
        * Text for how to represent an ascending sort of this data type, e.g. 'A -> Z'

package/test-env/components/datagrid/body/header/data_grid_header_row.js CHANGED Viewed

@@ -571,7 +571,7 @@ EuiDataGridHeaderRow.propTypes = {
     /**
        * The color associated with this data type; it's used to color the icon token
        */
-    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.oneOf(["euiColorVis0", "euiColorVis1", "euiColorVis2", "euiColorVis3", "euiColorVis4", "euiColorVis5", "euiColorVis6", "euiColorVis7", "euiColorVis8", "euiColorVis9", "gray"]).isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
+    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
     /**
        * Text for how to represent an ascending sort of this data type, e.g. 'A -> Z'

package/test-env/components/datagrid/controls/column_sorting_draggable.js CHANGED Viewed

@@ -210,7 +210,7 @@ EuiDataGridColumnSortingDraggable.propTypes = {
     /**
        * The color associated with this data type; it's used to color the icon token
        */
-    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.oneOf(["euiColorVis0", "euiColorVis1", "euiColorVis2", "euiColorVis3", "euiColorVis4", "euiColorVis5", "euiColorVis6", "euiColorVis7", "euiColorVis8", "euiColorVis9", "gray"]).isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
+    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
     /**
        * Text for how to represent an ascending sort of this data type, e.g. 'A -> Z'

package/test-env/components/datagrid/data_grid.js CHANGED Viewed

@@ -932,7 +932,7 @@ EuiDataGrid.propTypes = {
     /**
        * The color associated with this data type; it's used to color the icon token
        */
-    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.oneOf(["euiColorVis0", "euiColorVis1", "euiColorVis2", "euiColorVis3", "euiColorVis4", "euiColorVis5", "euiColorVis6", "euiColorVis7", "euiColorVis8", "euiColorVis9", "gray"]).isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
+    color: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.string.isRequired]).isRequired, _propTypes.default.string.isRequired]),
     /**
        * Text for how to represent an ascending sort of this data type, e.g. 'A -> Z'

package/test-env/components/date_picker/super_date_picker/super_date_picker.js CHANGED Viewed

@@ -669,7 +669,7 @@ EuiSuperDatePickerInternal.propTypes = {
        * Forces state to be `iconOnly` when within provided breakpoints.
        * Remove completely with `false` or provide your own list of breakpoints.
        */
-    responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired).isRequired])
+    responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired])
   }),
   timeOptions: _propTypes.default.shape({
     timeTenseOptions: _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired,
@@ -808,6 +808,6 @@ EuiSuperDatePicker.propTypes = {
       onMouseOut: _propTypes.default.func
     }),
     iconOnly: _propTypes.default.bool,
-    responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired).isRequired])
+    responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired])
   })
 };

package/test-env/components/date_picker/super_date_picker/super_update_button.js CHANGED Viewed

@@ -285,5 +285,5 @@ EuiSuperUpdateButton.propTypes = {
      * Forces state to be `iconOnly` when within provided breakpoints.
      * Remove completely with `false` or provide your own list of breakpoints.
      */
-  responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired).isRequired])
+  responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired])
 };

package/test-env/components/description_list/description_list.js CHANGED Viewed

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TYPES = exports.TEXT_STYLES = exports.EuiDescriptionList = exports.ALIGNMENTS = void 0;
+exports.EuiDescriptionList = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -21,31 +21,15 @@ var _description_list_title = require("./description_list_title");
 var _description_list_description = require("./description_list_description");
-var _common = require("../common");
+var _services = require("../../services");
+var _description_list = require("./description_list.styles");
+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 typesToClassNameMap = {
-  row: 'euiDescriptionList--row',
-  inline: 'euiDescriptionList--inline',
-  column: 'euiDescriptionList--column',
-  responsiveColumn: 'euiDescriptionList--responsiveColumn'
-};
-var TYPES = (0, _common.keysOf)(typesToClassNameMap);
-exports.TYPES = TYPES;
-var alignmentsToClassNameMap = {
-  center: 'euiDescriptionList--center',
-  left: ''
-};
-var ALIGNMENTS = (0, _common.keysOf)(alignmentsToClassNameMap);
-exports.ALIGNMENTS = ALIGNMENTS;
-var textStylesToClassNameMap = {
-  normal: '',
-  reverse: 'euiDescriptionList--reverse'
-};
-var TEXT_STYLES = (0, _common.keysOf)(textStylesToClassNameMap);
-exports.TEXT_STYLES = TEXT_STYLES;
 var EuiDescriptionList = function EuiDescriptionList(_ref) {
   var _ref$align = _ref.align,
@@ -62,9 +46,10 @@ var EuiDescriptionList = function EuiDescriptionList(_ref) {
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'row' : _ref$type,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiDescriptionList', type ? typesToClassNameMap[type] : undefined, align ? alignmentsToClassNameMap[align] : undefined, textStyle ? textStylesToClassNameMap[textStyle] : undefined, {
-    'euiDescriptionList--compressed': compressed
-  }, className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _description_list.euiDescriptionListStyles)(euiTheme);
+  var cssStyles = [styles.euiDescriptionList, styles[type], styles[align]];
+  var classes = (0, _classnames.default)('euiDescriptionList', className);
   var childrenOrListItems = null;
   if (listItems) {
@@ -79,9 +64,19 @@ var EuiDescriptionList = function EuiDescriptionList(_ref) {
     childrenOrListItems = children;
   }
-  return (0, _react2.jsx)("dl", (0, _extends2.default)({
-    className: classes
-  }, rest), childrenOrListItems);
+  return (0, _react2.jsx)(_description_list_context.EuiDescriptionListContext.Provider, {
+    value: {
+      type: type,
+      compressed: compressed,
+      textStyle: textStyle,
+      align: align
+    }
+  }, (0, _react2.jsx)("dl", (0, _extends2.default)({
+    className: classes,
+    css: cssStyles
+  }, rest, {
+    "data-type": type
+  }), childrenOrListItems));
 };
 exports.EuiDescriptionList = EuiDescriptionList;
@@ -97,7 +92,7 @@ EuiDescriptionList.propTypes = {
   /**
      * Text alignment
      */
-  align: _propTypes.default.oneOf(["center", "left"]),
+  align: _propTypes.default.any,
   /**
      * Smaller text and condensed spacing
@@ -113,7 +108,7 @@ EuiDescriptionList.propTypes = {
   /**
      * How each item should be laid out
      */
-  type: _propTypes.default.oneOf(["row", "inline", "column", "responsiveColumn"]),
+  type: _propTypes.default.any,
   /**
      * Props object to be passed to `EuiDescriptionListTitle`

package/test-env/components/description_list/description_list.styles.js ADDED Viewed

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDescriptionListStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var euiDescriptionListStyles = function euiDescriptionListStyles(euiThemeContext) {
+  // Flex display for column and responsive column
+  var columnDisplay = "\n    display: flex;\n    align-items: baseline;\n    flex-wrap: wrap;  \n  ";
+  return {
+    euiDescriptionList: /*#__PURE__*/(0, _react.css)(";label:euiDescriptionList;"),
+    // Types
+    row: /*#__PURE__*/(0, _react.css)(";label:row;"),
+    inline: /*#__PURE__*/(0, _react.css)(";label:inline;"),
+    column: /*#__PURE__*/(0, _react.css)(columnDisplay, ";;label:column;"),
+    // Responsive columns behave as a row on breakpoints xs-s
+    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    // Alignment
+    center: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('center'), ";;label:center;"),
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;")
+  };
+};
+exports.euiDescriptionListStyles = euiDescriptionListStyles;

package/test-env/components/description_list/description_list_context.js ADDED Viewed

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.contextDefaults = exports.EuiDescriptionListContext = void 0;
+var _react = require("react");
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var contextDefaults = {
+  type: 'row',
+  textStyle: 'normal',
+  align: 'left'
+};
+exports.contextDefaults = contextDefaults;
+var EuiDescriptionListContext = /*#__PURE__*/(0, _react.createContext)(contextDefaults);
+exports.EuiDescriptionListContext = EuiDescriptionListContext;

package/test-env/components/description_list/description_list_description.js CHANGED Viewed

@@ -2,6 +2,8 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,25 +11,64 @@ exports.EuiDescriptionListDescription = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
+var _description_list_description = require("./description_list_description.styles");
+var _description_list_context = require("./description_list_context");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var EuiDescriptionListDescription = function EuiDescriptionListDescription(_ref) {
   var children = _ref.children,
       className = _ref.className,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useContext = (0, _react.useContext)(_description_list_context.EuiDescriptionListContext),
+      type = _useContext.type,
+      textStyle = _useContext.textStyle,
+      compressed = _useContext.compressed,
+      align = _useContext.align;
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _description_list_description.euiDescriptionListDescriptionStyles)(theme);
+  var conditionalStyles = compressed && textStyle === 'reverse' ? [styles.fontStyles.compressed] : [styles.fontStyles[textStyle]];
+  switch (type) {
+    case 'inline':
+      conditionalStyles = compressed ? [styles.inlineStyles.compressed] : [styles.inlineStyles.normal];
+      break;
+    case 'responsiveColumn':
+    case 'column':
+      if (align === 'center') {
+        conditionalStyles.push(styles.left);
+      }
+      break;
+  }
+  var cssStyles = [styles.euiDescriptionList__description, styles[type]].concat((0, _toConsumableArray2.default)(conditionalStyles));
   var classes = (0, _classnames.default)('euiDescriptionList__description', className);
   return (0, _react2.jsx)("dd", (0, _extends2.default)({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), children);
 };

package/test-env/components/description_list/description_list_description.styles.js ADDED Viewed

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiDescriptionListDescriptionStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+var _title = require("../title/title.styles");
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1yn9gig-inline",
+  styles: "display:inline;label:inline;"
+} : {
+  name: "1yn9gig-inline",
+  styles: "display:inline;label:inline;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+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  ");
+  return {
+    euiDescriptionList__description: /*#__PURE__*/(0, _react.css)(";label:euiDescriptionList__description;"),
+    // Types
+    row: /*#__PURE__*/(0, _react.css)(";label:row;"),
+    column: /*#__PURE__*/(0, _react.css)(columnDisplay, ";;label:column;"),
+    responsiveColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{", (0, _global_styling.logicalCSS)('width', '100%'), " padding:0;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    inline: _ref,
+    // This nested block handles just the font styling based on compressed and reverse
+    fontStyles: {
+      normal: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";;label:normal;"),
+      reverse: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xs'), ";;label:reverse;"),
+      compressed: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), ";;label:compressed;")
+    },
+    // Nested inline styles for type and font
+    inlineStyles: {
+      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";;label:compressed;"),
+      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;")
+  };
+};
+exports.euiDescriptionListDescriptionStyles = euiDescriptionListDescriptionStyles;

package/test-env/components/description_list/description_list_title.js CHANGED Viewed

@@ -2,6 +2,8 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,25 +11,64 @@ exports.EuiDescriptionListTitle = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
+var _description_list_title = require("./description_list_title.styles");
+var _description_list_context = require("./description_list_context");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var EuiDescriptionListTitle = function EuiDescriptionListTitle(_ref) {
   var children = _ref.children,
       className = _ref.className,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useContext = (0, _react.useContext)(_description_list_context.EuiDescriptionListContext),
+      type = _useContext.type,
+      textStyle = _useContext.textStyle,
+      compressed = _useContext.compressed,
+      align = _useContext.align;
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _description_list_title.euiDescriptionListTitleStyles)(theme);
+  var conditionalStyles = compressed && textStyle === 'reverse' ? [styles.fontStyles.compressed] : [styles.fontStyles[textStyle]];
+  switch (type) {
+    case 'inline':
+      conditionalStyles = compressed ? [styles.inlineStyles.compressed] : [styles.inlineStyles.normal];
+      break;
+    case 'responsiveColumn':
+    case 'column':
+      if (align === 'center') {
+        conditionalStyles.push(styles.right);
+      }
+      break;
+  }
+  var cssStyles = [styles.euiDescriptionList__title, styles[type]].concat((0, _toConsumableArray2.default)(conditionalStyles));
   var classes = (0, _classnames.default)('euiDescriptionList__title', className);
   return (0, _react2.jsx)("dt", (0, _extends2.default)({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), children);
 };