@elastic/eui 61.0.0 → 62.0.2

package/test-env/test/rtl/data_test_subj_queries.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.queryByTestSubject = exports.queryAllByTestSubject = exports.getByTestSubject = exports.getAllByTestSubject = exports.findByTestSubject = exports.findAllByTestSubject = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("@testing-library/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 queryAllByTestSubject = function queryAllByTestSubject() {
+  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+    args[_key] = arguments[_key];
+  }
+
+  return _react.queryHelpers.queryAllByAttribute.apply(_react.queryHelpers, ['data-test-subj'].concat(args));
+};
+
+exports.queryAllByTestSubject = queryAllByTestSubject;
+
+var getMultipleError = function getMultipleError(_, TestSubjectValue) {
+  return "Found multiple elements with the data-test-subj attribute of: ".concat(TestSubjectValue);
+};
+
+var getMissingError = function getMissingError(_, TestSubjectValue) {
+  return "Unable to find an element with the data-test-subj attribute of: ".concat(TestSubjectValue);
+};
+
+var _buildQueries = (0, _react.buildQueries)(queryAllByTestSubject, getMultipleError, getMissingError),
+    _buildQueries2 = (0, _slicedToArray2.default)(_buildQueries, 5),
+    queryByTestSubject = _buildQueries2[0],
+    getAllByTestSubject = _buildQueries2[1],
+    getByTestSubject = _buildQueries2[2],
+    findAllByTestSubject = _buildQueries2[3],
+    findByTestSubject = _buildQueries2[4];
+
+exports.findByTestSubject = findByTestSubject;
+exports.findAllByTestSubject = findAllByTestSubject;
+exports.getByTestSubject = getByTestSubject;
+exports.getAllByTestSubject = getAllByTestSubject;
+exports.queryByTestSubject = queryByTestSubject;

package/test-env/test/rtl/index.js

@@ -0,0 +1,81 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  queryByTestSubject: true,
+  queryAllByTestSubject: true,
+  getByTestSubject: true,
+  getAllByTestSubject: true,
+  findAllByTestSubject: true,
+  findByTestSubject: true,
+  render: true,
+  screen: true
+};
+Object.defineProperty(exports, "findAllByTestSubject", {
+  enumerable: true,
+  get: function get() {
+    return _data_test_subj_queries.findAllByTestSubject;
+  }
+});
+Object.defineProperty(exports, "findByTestSubject", {
+  enumerable: true,
+  get: function get() {
+    return _data_test_subj_queries.findByTestSubject;
+  }
+});
+Object.defineProperty(exports, "getAllByTestSubject", {
+  enumerable: true,
+  get: function get() {
+    return _data_test_subj_queries.getAllByTestSubject;
+  }
+});
+Object.defineProperty(exports, "getByTestSubject", {
+  enumerable: true,
+  get: function get() {
+    return _data_test_subj_queries.getByTestSubject;
+  }
+});
+Object.defineProperty(exports, "queryAllByTestSubject", {
+  enumerable: true,
+  get: function get() {
+    return _data_test_subj_queries.queryAllByTestSubject;
+  }
+});
+Object.defineProperty(exports, "queryByTestSubject", {
+  enumerable: true,
+  get: function get() {
+    return _data_test_subj_queries.queryByTestSubject;
+  }
+});
+Object.defineProperty(exports, "render", {
+  enumerable: true,
+  get: function get() {
+    return _custom_render.render;
+  }
+});
+Object.defineProperty(exports, "screen", {
+  enumerable: true,
+  get: function get() {
+    return _custom_render.screen;
+  }
+});
+
+var _component_helpers = require("./component_helpers");
+
+Object.keys(_component_helpers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _component_helpers[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _component_helpers[key];
+    }
+  });
+});
+
+var _data_test_subj_queries = require("./data_test_subj_queries");
+
+var _custom_render = require("./custom_render");

package/test-env/themes/amsterdam/global_styling/functions/shadows.js

@@ -22,7 +22,7 @@ var _types = require("../../../../services/theme/types");
 // on either a light or dark theme. We use a multiplier
 // of 1 for light themes and 2.5 for dark themes
 var getShadowColor = function getShadowColor(color, opacity, colorMode) {
-  var themeOpacity = colorMode === _types.COLOR_MODES_STANDARD.dark ? opacity * 2.5 : opacity * 1;
+  var themeOpacity = colorMode === _types.COLOR_MODES_STANDARD.dark ? opacity * 3.5 : opacity * 1;
   return (0, _chromaJs.default)(color).alpha(themeOpacity).css();
 };
 

package/test-env/themes/amsterdam/global_styling/mixins/shadow.js

@@ -59,10 +59,21 @@ var euiShadowMedium = function euiShadowMedium(_ref5) {
       colorMode = _ref5.colorMode;
 
   var _ref6 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _color = _ref6.color;
+      _color = _ref6.color,
+      property = _ref6.property;
 
   var color = _color || euiTheme.colors.shadow;
-  return "\nbox-shadow:\n  0 .9px 4px -1px ".concat((0, _functions.getShadowColor)(color, 0.08, colorMode), ",\n  0 2.6px 8px -1px ").concat((0, _functions.getShadowColor)(color, 0.06, colorMode), ",\n  0 5.7px 12px -1px ").concat((0, _functions.getShadowColor)(color, 0.05, colorMode), ",\n  0 15px 15px -1px ").concat((0, _functions.getShadowColor)(color, 0.04, colorMode), ";\n");
+  var array = ["0 .9px 4px ".concat((0, _functions.getShadowColor)(color, 0.08, colorMode)), "0 2.6px 8px ".concat((0, _functions.getShadowColor)(color, 0.06, colorMode)), "0 5.7px 12px ".concat((0, _functions.getShadowColor)(color, 0.05, colorMode)), "0 15px 15px ".concat((0, _functions.getShadowColor)(color, 0.04, colorMode))];
+
+  if (property === 'filter') {
+    return "filter: ".concat(array.reduce(function (v, i) {
+      return "".concat(v, " drop-shadow(").concat(i, ")");
+    }, ''), ";");
+  } else {
+    return "box-shadow: ".concat(array.map(function (v) {
+      return v;
+    }), ";");
+  }
 };
 /**
  * bottomShadow

package/src/components/error_boundary/_error_boundary.scss

@@ -1,13 +0,0 @@
-.euiErrorBoundary {
-  $color1: transparentize($euiColorDanger, .75);
-  $color2: transparentize($euiColorDanger, .95);
-
-  background: repeating-linear-gradient(
-    45deg,
-    $color1,
-    $color1 1px,
-    $color2 1px,
-    $color2 20px
-  );
-  padding: $euiSize;
-}

package/src/components/error_boundary/_index.scss

@@ -1 +0,0 @@
-@import 'error_boundary';

package/src/components/image/_image.scss

@@ -1,212 +0,0 @@
-/**
- * 1. Fix for IE where the image correctly resizes in width but doesn't collapse its height
-      (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421)
- */
-
-// Main <figure> that wraps images.
-.euiImage {
-  display: inline-block;
-  max-width: 100%;
-  position: relative;
-  min-height: 1px; /* 1 */
-  line-height: 0; // Fixes cropping when image is resized by forcing its height to be determined by the image not line-height
-  flex-shrink: 0; // Don't ever let this shrink in height if direct descendent of flex
-
-  // Required for common usage of nesting within EuiText
-  .euiImage__img {
-    margin-bottom: 0;
-    max-width: 100%;
-  }
-
-  &.euiImage--hasShadow {
-    .euiImage__img {
-      @include euiBottomShadowMedium;
-    }
-  }
-
-  .euiImage__button {
-    position: relative;
-    cursor: pointer;
-
-    // transition the shadow
-    transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
-
-    &:focus  {
-      outline: 2px solid $euiFocusRingColor;
-    }
-
-    &:hover .euiImage__icon {
-      visibility: visible;
-      fill-opacity: 1;
-    }
-
-    &--fullWidth {
-      width: 100%;
-    }
-  }
-
-  &.euiImage--allowFullScreen {
-    &:hover .euiImage__caption {
-      text-decoration: underline;
-    }
-
-    &:not(.euiImage--hasShadow) .euiImage__button:hover,
-    &:not(.euiImage--hasShadow) .euiImage__button:focus {
-      @include euiBottomShadowMedium;
-    }
-
-    &.euiImage--hasShadow .euiImage__button:hover,
-    &.euiImage--hasShadow .euiImage__button:focus {
-      @include euiBottomShadow;
-    }
-  }
-
-  // These sizes are mostly suggestions. Don't look too hard for meaning in their values.
-  // Size is applied to the image, rather than the figure to work better with floats
-  &.euiImage--small .euiImage__img {
-    width: convertToRem(120px);
-  }
-
-  &.euiImage--medium .euiImage__img {
-    width: convertToRem(200px);
-  }
-
-  &.euiImage--large .euiImage__img {
-    width: convertToRem(360px);
-  }
-
-  &.euiImage--xlarge .euiImage__img {
-    width: convertToRem(600px);
-  }
-
-  &.euiImage--fullWidth {
-    width: 100%;
-  }
-
-  &.euiImage--original {
-    .euiImage__img {
-      width: auto;
-      max-width: 100%;
-    }
-  }
-
-  &.euiImage--floatLeft {
-    float: left;
-
-    &[class*='euiImage--margin']  {
-      margin-left: 0;
-      margin-top: 0;
-    }
-  }
-
-  &.euiImage--floatRight {
-    float: right;
-
-    &[class*='euiImage--margin']  {
-      margin-right: 0;
-      margin-top: 0;
-    }
-  }
-
-  &.euiImage--marginSmall {
-    margin: $euiSizeS;
-  }
-
-  &.euiImage--marginMedium {
-    margin: $euiSize;
-  }
-
-  &.euiImage--marginLarge {
-    margin: $euiSizeL;
-  }
-
-  &.euiImage--marginXlarge {
-    margin: $euiSizeXL;
-  }
-}
-
-// The image itself is full width within the container.
-.euiImage__img {
-  width: 100%;
-  vertical-align: middle;
-}
-
-.euiImage__caption {
-  @include euiFontSizeS;
-  margin-top: $euiSizeXS;
-  text-align: center;
-}
-
-.euiImage__icon {
-  visibility: hidden;
-  fill-opacity: 0;
-  position: absolute;
-  right: $euiSize;
-  top: $euiSize;
-  transition: fill-opacity $euiAnimSpeedSlow $euiAnimSlightResistance;
-  cursor: pointer;
-}
-
-// The FullScreen image that optionally pops up on click.
-.euiImage-isFullScreen {
-  position: relative;
-  max-height: 80vh;
-  max-width: 80vw;
-  animation: euiImageFullScreen $euiAnimSpeedExtraSlow $euiAnimSlightBounce;
-
-  &:hover {
-    .euiImage__button {
-      @include euiBottomShadow;
-    }
-
-    .euiImage__caption {
-      text-decoration: underline;
-    }
-  }
-
-  &__img {
-    max-height: 80vh;
-    max-width: 80vw;
-    vertical-align: middle;
-    cursor: pointer;
-    transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
-  }
-}
-
-.euiImage-isFullScreenCloseIcon {
-  position: absolute;
-  right: $euiSize;
-  top: $euiSize;
-  pointer-events: none;
-}
-
-@keyframes euiImageFullScreen {
-  0% {
-    opacity: 0;
-    transform: translateY($euiSizeXL * 2);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@include euiBreakpoint('xs', 's', 'm') {
-
-  .euiImage {
-
-    &.euiImage--floatLeft,
-    &.euiImage--floatRight {
-      float: none;
-
-      // Return back to whatever margin settings were set without the float
-      &[class*='euiImage--margin']  {
-        margin-top: inherit;
-        margin-right: inherit;
-        margin-bottom: inherit;
-        margin-left: inherit;
-      }
-    }
-  }
-}

package/src/components/image/_index.scss

@@ -1 +0,0 @@
-@import 'image';

package/src/components/popover/_index.scss

@@ -1,5 +0,0 @@
-@import 'variables';
-@import 'popover';
-@import 'popover_title';
-@import 'popover_footer';
-@import 'input_popover';

package/src/components/popover/_input_popover.scss

@@ -1,7 +0,0 @@
-.euiInputPopover {
-  max-width: $euiFormMaxWidth;
-
-  &.euiInputPopover--fullWidth {
-    max-width: 100%;
-  }
-}

package/src/components/popover/_popover.scss

@@ -1,182 +0,0 @@
-// Because of the animations and positioning involved, this code gets pretty
-// repetitive. What you generally need to know if you work in here is that
-// the positioning of the popovers (and the arrows attached to them)
-// is handled through absolute positioning and then animated through the use
-// of transforms.
-
-.euiPopover {
-  display: inline-block;
-  position: relative;
-  vertical-align: middle;
-  max-width: 100%;
-}
-
-.euiPopover__anchor {
-  display: inline-block;
-}
-
-.euiPopover--displayBlock {
-  display: block;
-
-  .euiPopover__anchor {
-    display: block;
-  }
-}
-
-/**
- * 1. Can expand further, but it looks weird if it's smaller than the originating button.
- * 2. Animation happens on the panel. But don't animate when using the attached mode like for inputs
- * 3. Make sure the panel stays within the window.
- */
-.euiPopover__panel {
-  // Ignore linting for legibility of transition property, and the mixin performs an overwrite
-  // sass-lint:disable-block indentation
-  @include euiBottomShadow;
-  position: absolute;
-  min-width: $euiButtonMinWidth; /* 1 */
-  max-width: calc(100vw - #{$euiSizeXL}); /* 3 */
-  backface-visibility: hidden;
-  pointer-events: none;
-  opacity: 0; /* 2 */
-  transition: opacity $euiAnimSlightBounce $euiAnimSpeedSlow; /* 2 */
-
-  // Don't animate when using the attached mode like for inputs
-  &:not(.euiPopover__panel-isAttached) {
-    transform: translateY(0) translateX(0) translateZ(0); /* 2 */
-    transition: /* 2 */
-      opacity $euiAnimSlightBounce $euiAnimSpeedSlow,
-      transform $euiAnimSlightBounce ($euiAnimSpeedSlow + 100ms);
-  }
-
-  &.euiPopover__panel-isOpen {
-    opacity: 1;
-    pointer-events: auto;
-  }
-
-  .euiPopover__panelArrow {
-    position: absolute;
-    width: 0;
-    height: 0;
-
-    // This fakes a border on the arrow.
-    &:before {
-      position: absolute;
-      content: '';
-      height: 0;
-      width: 0;
-    }
-
-    // This part of the arrow matches the panel.
-    &:after {
-      position: absolute;
-      content: '';
-      height: 0;
-      width: 0;
-    }
-
-    &.euiPopover__panelArrow--top {
-      &:before {
-        bottom: -$euiPopoverArrowSize + 2;
-        border-left: $euiPopoverArrowSize solid transparent;
-        border-right: $euiPopoverArrowSize solid transparent;
-        border-top: $euiPopoverArrowSize solid $euiBorderColor;
-      }
-
-      &:after {
-        bottom: -$euiPopoverArrowSize + 3;
-        border-left: $euiPopoverArrowSize solid transparent;
-        border-right: $euiPopoverArrowSize solid transparent;
-        border-top: $euiPopoverArrowSize solid $euiColorEmptyShade;
-      }
-    }
-
-    &.euiPopover__panelArrow--right {
-      &:before {
-        left: -$euiPopoverArrowSize;
-        top: 50%;
-        border-top: $euiPopoverArrowSize solid transparent;
-        border-bottom: $euiPopoverArrowSize solid transparent;
-        border-right: $euiPopoverArrowSize solid $euiBorderColor;
-      }
-
-      &:after {
-        left: -$euiPopoverArrowSize + 1;
-        top: 50%;
-        border-top: $euiPopoverArrowSize solid transparent;
-        border-bottom: $euiPopoverArrowSize solid transparent;
-        border-right: $euiPopoverArrowSize solid $euiColorEmptyShade;
-      }
-    }
-
-    &.euiPopover__panelArrow--bottom {
-      &:before {
-        top: -$euiPopoverArrowSize;
-        border-left: $euiPopoverArrowSize solid transparent;
-        border-right: $euiPopoverArrowSize solid transparent;
-        border-bottom: $euiPopoverArrowSize solid $euiBorderColor;
-      }
-
-      &:after {
-        top: -$euiPopoverArrowSize + 1;
-        border-left: $euiPopoverArrowSize solid transparent;
-        border-right: $euiPopoverArrowSize solid transparent;
-        border-bottom: $euiPopoverArrowSize solid $euiColorEmptyShade;
-      }
-    }
-
-    &.euiPopover__panelArrow--left {
-      &:before {
-        right: -$euiPopoverArrowSize + 1;
-        top: 50%;
-        border-top: $euiPopoverArrowSize solid transparent;
-        border-bottom: $euiPopoverArrowSize solid transparent;
-        border-left: $euiPopoverArrowSize solid $euiBorderColor;
-      }
-
-      &:after {
-        right: -$euiPopoverArrowSize + 2;
-        top: 50%;
-        border-top: $euiPopoverArrowSize solid transparent;
-        border-bottom: $euiPopoverArrowSize solid transparent;
-        border-left: $euiPopoverArrowSize solid $euiColorEmptyShade;
-      }
-    }
-  }
-
-
-  &.euiPopover__panel-noArrow .euiPopover__panelArrow {
-    display: none;
-  }
-
-  &.euiPopover__panel-isAttached.euiPopover__panel--bottom {
-    border-top-color: transparentize($euiBorderColor, .2);
-    border-top-right-radius: 0;
-    border-top-left-radius: 0;
-  }
-
-  &.euiPopover__panel-isAttached.euiPopover__panel--top {
-    @include euiBottomShadowFlat;
-
-    border-bottom-color: transparentize($euiBorderColor, .2);
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-}
-
-.euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--top,  /* 2 */
-.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--top {
-  transform: translateY($euiPopoverTranslateDistance) translateZ(0);
-}
-
-.euiPopover__panel.euiPopover__panel-isAttached.euiPopover__panel--bottom,  /* 2 */
-.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--bottom {
-  transform: translateY(-$euiPopoverTranslateDistance) translateZ(0);
-}
-
-.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--left {
-  transform: translateX($euiPopoverTranslateDistance) translateZ(0);
-}
-
-.euiPopover__panel.euiPopover__panel-isOpen.euiPopover__panel--right {
-  transform: translateX(-$euiPopoverTranslateDistance) translateZ(0);
-}

package/src/components/popover/_popover_footer.scss

@@ -1,27 +0,0 @@
-.euiPopoverFooter {
-  @include euiPopoverFooter;
-}
-
-.euiPopoverFooter--paddingNone {
-  padding: 0;
-}
-
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPopoverFooter--#{$modifier} {
-    padding: $amount;
-  }
-}
-
-// If the popover's containing panel has padding applied,
-// ensure the title expands to cover that padding and
-// take on the same amount of padding horizontally
-
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPopover__panel.euiPanel--#{$modifier} .euiPopoverFooter {
-    margin: $amount ($amount * -1) ($amount * -1);
-
-    &:not([class*='euiPopoverFooter--padding']) {
-      padding: $euiSizeM $amount;
-    }
-  }
-}

package/src/components/popover/_popover_title.scss

@@ -1,27 +0,0 @@
-.euiPopoverTitle {
-  @include euiPopoverTitle;
-}
-
-.euiPopoverTitle--paddingNone {
-  padding: 0;
-}
-
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPopoverTitle--#{$modifier} {
-    padding: $amount;
-  }
-}
-
-// If the popover's containing panel has padding applied,
-// ensure the title expands to cover that padding and
-// take on the same amount of padding horizontally
-
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiPopover__panel.euiPanel--#{$modifier} .euiPopoverTitle {
-    margin: ($amount * -1) ($amount * -1) $amount;
-
-    &:not([class*='euiPopoverTitle--padding']) {
-      padding: $euiSizeM $amount;
-    }
-  }
-}

package/src/components/popover/_variables.scss

@@ -1,2 +0,0 @@
-$euiPopoverArrowSize: $euiSizeM !default;
-$euiPopoverTranslateDistance: $euiSizeS !default;

package/src/components/text_diff/_index.scss

@@ -1 +0,0 @@
-@import 'text_diff';

package/src/components/text_diff/_text_diff.scss

@@ -1,9 +0,0 @@
-.euiTextDiff {
-  del {
-    color: $euiColorDangerText;
-  }
-
-  ins {
-    color: $euiColorSuccessText;
-  }
-}

package/src/global_styling/mixins/_popover.scss

@@ -1,19 +0,0 @@
-@mixin euiPopoverTitle($size: 'm') {
-  @if ($size == 's') {
-    @include euiTitle('xxxs');
-  } @else if ($size == 'm') {
-    @include euiTitle('xxs');
-  } @else {
-    @warn 'euiPopoverTitle only accepts "s" or "m" sizes';
-  }
-
-  padding: $euiSizeM;
-  text-transform: uppercase;
-  border-bottom: $euiBorderThin;
-}
-
-@mixin euiPopoverFooter {
-  @include euiFontSizeS;
-  padding: $euiSizeM;
-  border-top: $euiBorderThin;
-}

package/src/themes/amsterdam/global_styling/mixins/_popover.scss

@@ -1,5 +0,0 @@
-@mixin euiPopoverTitle($size: null) {
-  @include euiTitle('xxs');
-  padding: $euiSizeM;
-  border-bottom: $euiBorderThin;
-}