@elastic/eui 70.2.4 → 70.4.0

package/test-env/components/tree_view/tree_view.a11y.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _tree_view = require("./tree_view");
+
+var _react2 = require("@emotion/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.
+ */
+/// <reference types="../../../cypress/support"/>
+var TreeView = function TreeView() {
+  var items = [{
+    label: 'Item One',
+    id: 'item_one',
+    isExpanded: true,
+    children: [{
+      label: 'Item A',
+      id: 'item_a'
+    }, {
+      label: 'Item B',
+      id: 'item_b',
+      children: [{
+        label: 'A Cloud',
+        id: 'item_cloud'
+      }, {
+        label: "I'm a Bug",
+        id: 'item_bug',
+        className: 'classForBug'
+      }]
+    }, {
+      label: 'Item C',
+      id: 'item_c',
+      children: [{
+        label: 'Another Cloud',
+        id: 'item_cloud2'
+      }, {
+        label: 'Another Bug',
+        id: 'item_bug2'
+      }]
+    }]
+  }, {
+    label: 'Item Two',
+    id: 'item_two'
+  }];
+  var defaultTreeViewProps = {
+    items: items,
+    'aria-label': 'Sample folder tree'
+  };
+  return (0, _react2.jsx)("div", {
+    style: {
+      width: '20rem'
+    }
+  }, (0, _react2.jsx)(_tree_view.EuiTreeView, defaultTreeViewProps));
+};
+
+describe('EuiTreeView', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.mount((0, _react2.jsx)(TreeView, null));
+      cy.get('div.euiTreeView__wrapper').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with a nested child expanded', function () {
+      cy.mount((0, _react2.jsx)(TreeView, null));
+      cy.get('div.euiTreeView__wrapper').should('exist');
+      cy.get('button#item_b').realClick();
+      cy.get('button#item_b').should('have.attr', 'aria-expanded', 'true');
+      cy.get('li.euiTreeView__node').contains('A Cloud').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

package/test-env/global_styling/mixins/_responsive.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiBreakpoint = exports.euiBreakpoint = void 0;
+exports.useEuiMinBreakpoint = exports.useEuiMaxBreakpoint = exports.useEuiBreakpoint = exports.euiMinBreakpoint = exports.euiMaxBreakpoint = exports.euiBreakpoint = void 0;
 
 var _sorting = require("../../services/breakpoint/_sorting");
 
@@ -18,7 +18,7 @@ var _hooks = require("../../services/theme/hooks");
  */
 
 /**
- * Generates a CSS media query rule string based on the input breakpoint ranges.
+ * Generates a CSS media query rule string based on the input breakpoint *ranges*.
  * Examples with default theme breakpoints:
  *
  * euiBreakpoint(['s']) becomes `@media only screen and (min-width: 575px) and (max-width: 767px)`
@@ -60,5 +60,62 @@ var useEuiBreakpoint = function useEuiBreakpoint(sizes) {
   var euiTheme = (0, _hooks.useEuiTheme)();
   return euiBreakpoint(euiTheme, sizes);
 };
+/**
+ * Min/Max width breakpoint utilities that generate only a single min/max query/bound
+ *
+ * *Unlike the above euiBreakpoint utility*, these utilities treat breakpoint
+ * sizes as a one-dimensional point, rather than a two-dimensional *screen range*.
+ * Examples with default theme breakpoints:
+ *
+ * euiMaxBreakpoint('m') becomes `@media only screen and (max-width: 767px)`
+ * euiMinBreakpoint('m') becomes `@media only screen and (min-width: 768px)`
+ *
+ * This is safer and more intentional to use than euiBreakpoint(['xs', 's']) / euiBreakpoint(['m', 'xl'])
+ * in the event that consumers add larger or smaller custom breakpoints (e.g 'xxs' or `xxl`)
+ * and if the intention of the media query is actually "m and below/above" vs. "only screens m/l/xl".
+ */
+
+
+exports.useEuiBreakpoint = useEuiBreakpoint;
+
+var euiMinBreakpoint = function euiMinBreakpoint(_ref2, size) {
+  var euiTheme = _ref2.euiTheme;
+  var minBreakpointSize = euiTheme.breakpoint[size];
+
+  if (minBreakpointSize) {
+    return "@media only screen and (min-width: ".concat(minBreakpointSize, "px)");
+  } else {
+    console.warn("Invalid min breakpoint size: ".concat(size));
+    return '@media only screen';
+  }
+};
+
+exports.euiMinBreakpoint = euiMinBreakpoint;
+
+var useEuiMinBreakpoint = function useEuiMinBreakpoint(size) {
+  var euiTheme = (0, _hooks.useEuiTheme)();
+  return euiMinBreakpoint(euiTheme, size);
+};
+
+exports.useEuiMinBreakpoint = useEuiMinBreakpoint;
+
+var euiMaxBreakpoint = function euiMaxBreakpoint(_ref3, size) {
+  var euiTheme = _ref3.euiTheme;
+  var maxBreakpointSize = euiTheme.breakpoint[size];
+
+  if (maxBreakpointSize) {
+    return "@media only screen and (max-width: ".concat(maxBreakpointSize - 1, "px)");
+  } else {
+    console.warn("Invalid max breakpoint size: ".concat(size));
+    return '@media only screen';
+  }
+};
+
+exports.euiMaxBreakpoint = euiMaxBreakpoint;
+
+var useEuiMaxBreakpoint = function useEuiMaxBreakpoint(size) {
+  var euiTheme = (0, _hooks.useEuiTheme)();
+  return euiMaxBreakpoint(euiTheme, size);
+};
 
-exports.useEuiBreakpoint = useEuiBreakpoint;
+exports.useEuiMaxBreakpoint = useEuiMaxBreakpoint;

package/test-env/global_styling/utility/animations.js

@@ -5,13 +5,19 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiAnimFadeIn = void 0;
+exports.euiAnimSlideInUp = exports.euiAnimFadeIn = void 0;
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
 var _react = require("@emotion/react");
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 var euiAnimFadeIn = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])));
-exports.euiAnimFadeIn = euiAnimFadeIn;
+exports.euiAnimFadeIn = euiAnimFadeIn;
+
+var euiAnimSlideInUp = function euiAnimSlideInUp(size) {
+  return (0, _react.keyframes)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n   0% {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])), size);
+};
+
+exports.euiAnimSlideInUp = euiAnimSlideInUp;

package/src/components/modal/_index.scss

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

package/src/components/modal/_modal.scss

@@ -1,156 +0,0 @@
-.euiModal {
-  border: $euiBorderThin;
-  // This mixin overwrites some of the border above
-  @include euiBottomShadowLarge; // sass-lint:disable-line mixins-before-declarations
-  display: flex;
-  flex-direction: column;
-  max-height: 75vh; // We overflow the modal body based off this
-
-  // TODO: Consider restoring this once https://bugs.chromium.org/p/chromium/issues/detail?id=1229700 is resolved
-  // overflow: hidden; Ensure long, non-breaking text doesn't expand beyond the modal bounds
-
-  position: relative;
-  background-color: $euiColorEmptyShade;
-  border-radius: $euiBorderRadius;
-  z-index: $euiZModal;
-  min-width: $euiFormMaxWidth;
-  animation: euiModal $euiAnimSpeedSlow $euiAnimSlightBounce;
-  max-width: calc(100vw - #{$euiSize});
-
-  // Remove the outline from the focusable container
-  &:focus {
-    outline: none;
-  }
-}
-
-.euiModal--maxWidth-default {
-  // Sass and CSS's versions of `min` collide here, so we use all uppercase to ensure the CSS version is used
-  // https://css-tricks.com/when-sass-and-new-css-features-collide/#the-solution
-  // sass-lint:disable-block function-name-format
-  max-width: MIN(#{map-get($euiBreakpoints, 'm')}, calc(100vw - #{$euiSize}));
-}
-
-.euiModal--confirmation {
-  min-width: $euiFormMaxWidth;
-}
-
-.euiModalHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: $euiSizeL $euiSizeXXL $euiSize $euiSizeL;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.euiModalHeader__title {
-  @include euiTitle('m');
-}
-
-.euiModalBody {
-  flex-grow: 1;
-  overflow: hidden;
-  // The below fixes scroll on Chrome and Safari
-  display: flex;
-  flex-direction: column;
-
-  .euiModalBody__overflow {
-    @include euiYScrollWithShadows;
-    padding: $euiSizeS $euiSizeL;
-  }
-}
-
-.euiModalFooter {
-  display: flex;
-  justify-content: flex-end;
-  padding: $euiSize $euiSizeL $euiSizeL;
-  flex-grow: 0;
-  flex-shrink: 0; // ensure the height of the footer is based off its contents and doesn't squish
-
-  > * + * {
-    margin-left: $euiSize;
-  }
-}
-
-// If a body doesn't exist, remove some extra padding from footer
-.euiModalHeader + .euiModalFooter {
-  padding-top: $euiSizeS;
-}
-
-// If a footer doesn't exist (body is the last element) add padding to the bottom
-.euiModalBody:last-of-type .euiModalBody__overflow {
-  padding-bottom: $euiSizeL;
-}
-
-
-// The actual size of the X button in pixels is a bit fuzzy because of all the
-// button padding so there is some pixel pushing here.
-.euiModal__closeIcon {
-  background-color: transparentize($euiColorEmptyShade, .1);
-  position: absolute;
-  right: $euiSizeXS;
-  top: $euiSizeXS;
-  z-index: 3;
-}
-
-@keyframes euiModal {
-  0% {
-    opacity: 0;
-    transform: translateY($euiSizeXL);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-// On mobile we fix modals as a takeover.
-@include euiBreakpoint('xs', 's') {
-  .euiModal {
-    // sass-lint:disable-block no-important
-    position: fixed;
-    width: 100vw !important;
-    max-width: none !important;
-    min-width: 0 !important;
-    max-height: 100vh;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    border-radius: 0;
-    border: none;
-
-    &.euiModal--confirmation {
-      @include euiBottomShadowLarge($reverse: true);
-      top: auto;
-    }
-  }
-
-  .euiModalHeader {
-    width: 100%;
-  }
-
-  .euiModalFooter {
-    width: 100%;
-    background: $euiColorLightestShade;
-    padding: $euiSizeM $euiSizeL !important; // sass-lint:disable-line no-important
-    justify-content: stretch;
-
-    > * {
-      flex: 1;
-
-      + * {
-        margin-left: 0;
-      }
-    }
-  }
-
-  .euiModalBody {
-    width: 100%;
-
-    .euiModalBody__overflow {
-      padding-bottom: $euiSizeL;
-    }
-  }
-}

package/src/themes/amsterdam/overrides/_modal.scss

@@ -1,3 +0,0 @@
-.euiModal {
-  border: none;
-}