@elastic/eui 63.0.3 → 65.0.0

package/es/components/button/button_group/button_group_button.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "id", "isDisabled", "isIconOnly", "isSelected", "label", "name", "onChange", "size", "value", "element", "type"];
+var _excluded = ["className", "id", "isDisabled", "isIconOnly", "isSelected", "label", "name", "onChange", "size", "value", "color", "element", "type"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -37,6 +37,7 @@ import React from 'react';
 import { EuiButtonDisplayDeprecated as EuiButtonDisplay } from '../button';
 import { useInnerText } from '../../inner_text';
 import { useGeneratedHtmlId } from '../../../services';
+import { useEuiButtonColorCSS } from '../../../themes/amsterdam/global_styling/mixins/button';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
   var className = _ref.className,
@@ -50,6 +51,8 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
       _onChange = _ref.onChange,
       size = _ref.size,
       value = _ref.value,
+      _ref$color = _ref.color,
+      _color = _ref$color === void 0 ? 'primary' : _ref$color,
       _ref$element = _ref.element,
       element = _ref$element === void 0 ? 'button' : _ref$element,
       _ref$type = _ref.type,
@@ -89,8 +92,15 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
         return _onChange(id);
       }
     });
-  }
+  } // eslint-disable-next-line no-nested-ternary
 
+
+  var color = isDisabled ? 'disabled' : _color; // eslint-disable-next-line no-nested-ternary
+
+  var display = isSelected ? 'fill' : size === 'compressed' ? 'empty' : 'base';
+  var buttonColorStyles = useEuiButtonColorCSS({
+    display: display
+  })[color];
   var buttonClasses = classNames({
     'euiButtonGroupButton-isSelected': isSelected,
     'euiButtonGroupButton-isIconOnly': isIconOnly
@@ -107,10 +117,10 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
       innerText = _useInnerText2[1];
 
   return ___EmotionJSX(EuiButtonDisplay, _extends({
+    css: [buttonColorStyles, ";label:EuiButtonGroupButton;"],
     baseClassName: "euiButtonGroupButton",
     className: buttonClasses,
     element: el,
-    fill: size !== 'compressed' && isSelected,
     isDisabled: isDisabled,
     size: size === 'compressed' ? 's' : size,
     textProps: {
@@ -166,6 +176,7 @@ EuiButtonGroupButton.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
     ref: PropTypes.any,
     "data-text": PropTypes.string
   }),
@@ -173,6 +184,7 @@ EuiButtonGroupButton.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Element to display based on single or multi
@@ -192,7 +204,7 @@ EuiButtonGroupButton.propTypes = {
   /**
      * Inherit from EuiButtonGroup
      */
-  color: PropTypes.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]).isRequired,
+  color: PropTypes.any.isRequired,
 
   /**
      * Inherit from EuiButtonGroup

package/es/components/button/button_icon/button_icon.js

@@ -16,11 +16,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { getSecureRelForTarget } from '../../../services';
+import { EuiThemeProvider, getSecureRelForTarget, useEuiTheme } from '../../../services';
 import { keysOf } from '../../common';
 import { EuiIcon } from '../../icon';
 import { EuiLoadingSpinner } from '../../loading';
-import { validateHref } from '../../../services/security/href_validator';
+import { euiButtonEmptyColor, useEuiButtonColorCSS } from '../../../themes/amsterdam/global_styling/mixins/button';
+import { isButtonDisabled } from '../button_display/_button_display';
+import { css } from '@emotion/react';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var displayToClassNameMap = {
   base: null,
@@ -28,57 +30,66 @@ var displayToClassNameMap = {
   fill: 'euiButtonIcon--fill'
 };
 export var DISPLAYS = keysOf(displayToClassNameMap);
-var colorToClassNameMap = {
-  accent: 'euiButtonIcon--accent',
-  danger: 'euiButtonIcon--danger',
-  ghost: 'euiButtonIcon--ghost',
-  primary: 'euiButtonIcon--primary',
-  success: 'euiButtonIcon--success',
-  text: 'euiButtonIcon--text',
-  warning: 'euiButtonIcon--warning'
-};
-export var COLORS = keysOf(colorToClassNameMap);
 var sizeToClassNameMap = {
   xs: 'euiButtonIcon--xSmall',
   s: 'euiButtonIcon--small',
   m: 'euiButtonIcon--medium'
 };
 export var SIZES = keysOf(sizeToClassNameMap);
-export var EuiButtonIcon = function EuiButtonIcon(_ref) {
-  var className = _ref.className,
-      iconType = _ref.iconType,
-      _ref$iconSize = _ref.iconSize,
-      iconSize = _ref$iconSize === void 0 ? 'm' : _ref$iconSize,
-      _ref$color = _ref.color,
-      color = _ref$color === void 0 ? 'primary' : _ref$color,
-      _isDisabled = _ref.isDisabled,
-      disabled = _ref.disabled,
-      href = _ref.href,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'button' : _ref$type,
-      _ref$display = _ref.display,
-      display = _ref$display === void 0 ? 'empty' : _ref$display,
-      target = _ref.target,
-      rel = _ref.rel,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'xs' : _ref$size,
-      buttonRef = _ref.buttonRef,
-      isSelected = _ref.isSelected,
-      isLoading = _ref.isLoading,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
-  var isHrefValid = !href || validateHref(href);
-  var isDisabled = _isDisabled || disabled || !isHrefValid || isLoading;
+export var EuiButtonIcon = function EuiButtonIcon(props) {
+  var className = props.className,
+      iconType = props.iconType,
+      _props$iconSize = props.iconSize,
+      iconSize = _props$iconSize === void 0 ? 'm' : _props$iconSize,
+      _props$color = props.color,
+      _color = _props$color === void 0 ? 'primary' : _props$color,
+      _isDisabled = props.isDisabled,
+      disabled = props.disabled,
+      href = props.href,
+      _props$type = props.type,
+      type = _props$type === void 0 ? 'button' : _props$type,
+      _props$display = props.display,
+      display = _props$display === void 0 ? 'empty' : _props$display,
+      target = props.target,
+      rel = props.rel,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'xs' : _props$size,
+      buttonRef = props.buttonRef,
+      isSelected = props.isSelected,
+      isLoading = props.isLoading,
+      rest = _objectWithoutProperties(props, _excluded);
+
+  var euiThemeContext = useEuiTheme();
+  var isDisabled = isButtonDisabled({
+    isDisabled: _isDisabled || disabled,
+    href: href,
+    isLoading: isLoading
+  });
   var ariaHidden = rest['aria-hidden'];
   var isAriaHidden = ariaHidden === 'true' || ariaHidden === true;
 
   if (!rest['aria-label'] && !rest['aria-labelledby'] && !isAriaHidden) {
     console.warn("EuiButtonIcon requires aria-label or aria-labelledby to be specified because icon-only\n      buttons are screen-reader-inaccessible without them.");
-  }
+  } // eslint-disable-next-line no-nested-ternary
+
+
+  var color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
+  var buttonColorStyles = useEuiButtonColorCSS({
+    display: display
+  })[color]; // Temporary extra style for empty `:hover` state until we decide how to handle universally
+
+  var hoverStyles = display === 'empty' ? /*#__PURE__*/css("&:hover{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";};label:hoverStyles;") : /*#__PURE__*/css(";label:hoverStyles;");
+  var classes = classNames('euiButtonIcon', size && sizeToClassNameMap[size], className);
+
+  if (_color === 'ghost') {
+    // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
+    return ___EmotionJSX(EuiThemeProvider, {
+      colorMode: "dark"
+    }, ___EmotionJSX(EuiButtonIcon, _extends({}, props, {
+      color: "text"
+    })));
+  } // Add an icon to the button if one exists.
 
-  var classes = classNames('euiButtonIcon', {
-    'euiButtonIcon-isDisabled': isDisabled
-  }, colorToClassNameMap[color], display && displayToClassNameMap[display], size && sizeToClassNameMap[size], className); // Add an icon to the button if one exists.
 
   var buttonIcon;
 
@@ -113,6 +124,7 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
       rel: rel
     });
     return ___EmotionJSX("a", _extends({
+      css: [buttonColorStyles, hoverStyles, ";label:EuiButtonIcon;"],
       tabIndex: isAriaHidden ? -1 : undefined,
       className: classes,
       href: href,
@@ -124,6 +136,7 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
 
   var buttonType;
   return ___EmotionJSX("button", _extends({
+    css: [buttonColorStyles, hoverStyles, ";label:EuiButtonIcon;"],
     tabIndex: isAriaHidden ? -1 : undefined,
     disabled: isDisabled,
     className: classes,
@@ -140,8 +153,14 @@ EuiButtonIcon.propTypes = {
 
   /**
      * Any of the named color palette options.
+     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
+     */
+
+  /**
+     * Any of the named color palette options.
+     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
      */
-  color: PropTypes.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]),
+  color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]),
   "aria-label": PropTypes.string,
   "aria-labelledby": PropTypes.string,
   isDisabled: PropTypes.bool,
@@ -199,5 +218,6 @@ EuiButtonIcon.propTypes = {
   isLoading: PropTypes.bool,
   className: PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   buttonRef: PropTypes.any
 };

package/es/components/call_out/call_out.js

@@ -97,6 +97,7 @@ EuiCallOut.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   title: PropTypes.node,
   iconType: PropTypes.oneOfType([PropTypes.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInACircleFilled", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "document", "documentEdit", "documentation", "documents", "dot", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelionApp", "timeRefresh", "timeslider", "training", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, PropTypes.string.isRequired, PropTypes.elementType.isRequired]),
   color: PropTypes.any,

package/es/components/call_out/call_out.styles.js

@@ -18,7 +18,8 @@ export var euiCallOutStyles = function euiCallOutStyles(_ref) {
 export var euiCallOutHeadingStyles = function euiCallOutHeadingStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
   return {
-    euiCallOutHeader: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.medium, ";margin-bottom:0!important;;label:euiCallOutHeader;"),
+    euiCallOutHeader: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.medium, ";", logicalCSS('margin-bottom', '0 !important' // In case it's nested inside EuiText
+    ), ";;label:euiCallOutHeader;"),
     primary: /*#__PURE__*/css("color:", euiTheme.colors.primaryText, ";;label:primary;"),
     success: /*#__PURE__*/css("color:", euiTheme.colors.successText, ";;label:success;"),
     warning: /*#__PURE__*/css("color:", euiTheme.colors.warningText, ";;label:warning;"),