@elastic/eui 70.3.0 → 71.0.0

package/optimize/es/components/loading/loading_spinner.styles.js

@@ -10,7 +10,7 @@ var _templateObject;
  * Side Public License, v 1.
  */
 import { css, keyframes } from '@emotion/react';
-import { euiCanAnimate, logicalSizeCSS } from '../../global_styling';
+import { euiCanAnimate, logicalSizeCSS, logicalShorthandCSS, mathWithUnits } from '../../global_styling';
 
 var _loadingSpinner = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(359deg);\n  }\n"])));
 
@@ -33,10 +33,14 @@ export var euiSpinnerBorderColorsCSS = function euiSpinnerBorderColorsCSS(_ref)
 export var euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiLoadingSpinner: /*#__PURE__*/css("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";border-color:", euiSpinnerBorderColorsCSS(euiThemeContext), ";", euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
+    euiLoadingSpinner: /*#__PURE__*/css("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";", logicalShorthandCSS('border-color', euiSpinnerBorderColorsCSS(euiThemeContext)), " ", euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
     // Sizes
-    s: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.s], euiTheme.size[spinnerSizes.s]), " border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:s;"),
-    m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.m], euiTheme.size[spinnerSizes.m]), " border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:m;"),
+    s: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.s], euiTheme.size[spinnerSizes.s]), " border-width:", mathWithUnits(euiTheme.border.width.thin, function (x) {
+      return x * 1.5;
+    }), ";;label:s;"),
+    m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.m], euiTheme.size[spinnerSizes.m]), " border-width:", mathWithUnits(euiTheme.border.width.thin, function (x) {
+      return x * 1.5;
+    }), ";;label:m;"),
     l: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.l], euiTheme.size[spinnerSizes.l]), ";;label:l;"),
     xl: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.xl], euiTheme.size[spinnerSizes.xl]), ";;label:xl;"),
     xxl: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size[spinnerSizes.xxl], euiTheme.size[spinnerSizes.xxl]), ";;label:xxl;")

package/optimize/es/components/markdown_editor/markdown_editor.js

@@ -25,7 +25,7 @@ import { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
 import { EuiMarkdownEditorTextArea } from './markdown_editor_text_area';
 import { EuiMarkdownFormat } from './markdown_format';
 import { EuiMarkdownEditorDropZone } from './markdown_editor_drop_zone';
-import { useGeneratedHtmlId } from '../../services/';
+import { useGeneratedHtmlId } from '../../services';
 import { MODE_EDITING, MODE_VIEWING } from './markdown_modes';
 import { EuiModal } from '../modal';
 import { EuiMarkdownContext } from './markdown_context';

package/optimize/es/components/markdown_editor/markdown_format.styles.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { logicalCSS, euiFontSize, mathWithUnits } from '../../global_styling';
+import { logicalCSS, logicalShorthandCSS, euiFontSize, mathWithUnits } from '../../global_styling';
 /**
  * Mixins
  */
@@ -29,7 +29,7 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
   var tablePaddingHorizontal = mathWithUnits(fontSize, function (x) {
     return x / 2;
   });
-  return "\n    .euiMarkdownFormat__blockquote {\n      padding: 0 ".concat(fontSize, ";\n      ").concat(logicalCSS('border-left-width', blockQuoteBorderWidth), "\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS\n      font-size: ").concat(fontSize, ";\n      ").concat(logicalCSS('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat(logicalCSS('padding-vertical', tablePaddingVertical), "\n      ").concat(logicalCSS('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
+  return "\n    .euiMarkdownFormat__blockquote {\n      ".concat(logicalShorthandCSS('padding', "0 ".concat(fontSize)), "\n      ").concat(logicalCSS('border-left-width', blockQuoteBorderWidth), "\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS\n      font-size: ").concat(fontSize, ";\n      ").concat(logicalCSS('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat(logicalCSS('padding-vertical', tablePaddingVertical), "\n      ").concat(logicalCSS('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
 };
 /**
  * Styles

package/optimize/es/components/modal/modal.a11y.js

@@ -43,7 +43,7 @@ var Modal = function Modal() {
 beforeEach(function () {
   cy.mount(___EmotionJSX(Modal, null));
   cy.get('div.euiModal').should('not.exist');
-  cy.get('button.euiButton').click();
+  cy.get('button.euiButton').realClick();
   cy.get('div.euiModal').should('exist');
 });
 describe('EuiModal', function () {

package/optimize/es/components/modal/modal.styles.js

@@ -7,15 +7,15 @@
  */
 import { css } from '@emotion/react';
 import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
-import { euiCanAnimate, euiBreakpoint, euiAnimSlideInUp } from '../../global_styling';
+import { euiCanAnimate, euiMaxBreakpoint, euiAnimSlideInUp } from '../../global_styling';
 import { euiFormVariables } from '../form/form.styles';
 export var euiModalStyles = function euiModalStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiModal: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");", euiCanAnimate, "{animation:", euiAnimSlideInUp(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
+    euiModal: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), " display:flex;flex-direction:column;max-block-size:75vh;position:relative;background-color:", euiTheme.colors.emptyShade, ";border-radius:", euiTheme.border.radius.medium, ";z-index:", euiTheme.levels.modal, ";min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";max-inline-size:calc(100vw - ", euiTheme.size.base, ");", euiCanAnimate, "{animation:", euiAnimSlideInUp(euiTheme.size.xxl), " ", euiTheme.animation.slow, " ", euiTheme.animation.bounce, ";}", euiMaxBreakpoint(euiThemeContext, 'm'), "{position:fixed;inset:0;border-radius:0;inline-size:100vw!important;min-inline-size:0!important;max-inline-size:none!important;max-block-size:100vh!important;}&:focus{outline:none;};label:euiModal;"),
     // Variants
     defaultMaxWidth: /*#__PURE__*/css("max-inline-size:min(\n        ", euiTheme.breakpoint.m, "px,\n        calc(100vw - ", euiTheme.size.base, ")\n      );;label:defaultMaxWidth;"),
-    confirmation: /*#__PURE__*/css("min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";", euiBreakpoint(euiThemeContext, ['xs', 's']), "{", euiShadowXLarge(euiThemeContext, {
+    confirmation: /*#__PURE__*/css("min-inline-size:", euiFormVariables(euiThemeContext).maxWidth, ";", euiMaxBreakpoint(euiThemeContext, 'm'), "{", euiShadowXLarge(euiThemeContext, {
       reverse: true
     }), " inset-block-start:auto;};label:confirmation;"),
     euiModal__closeIcon: /*#__PURE__*/css("position:absolute;inset-inline-end:", euiTheme.size.xs, ";inset-block-start:", euiTheme.size.xs, ";z-index:3;;label:euiModal__closeIcon;")

package/optimize/es/components/modal/modal_body.styles.js

@@ -6,11 +6,11 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiYScrollWithShadows, euiBreakpoint } from '../../global_styling';
+import { euiYScrollWithShadows, euiMaxBreakpoint } from '../../global_styling';
 export var euiModalBodyStyles = function euiModalBodyStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiModalBody: /*#__PURE__*/css("flex-grow:1;overflow:hidden;display:flex;flex-direction:column;&:last-of-type .euiModalBody__overflow{padding-block-end:", euiTheme.size.l, ";};label:euiModalBody;"),
-    euiModalBody__overflow: /*#__PURE__*/css(euiYScrollWithShadows(euiThemeContext), ";padding-inline:", euiTheme.size.l, ";padding-block:", euiTheme.size.s, ";", euiBreakpoint(euiThemeContext, ['xs', 's']), "{padding-block-end:", euiTheme.size.l, ";};label:euiModalBody__overflow;")
+    euiModalBody__overflow: /*#__PURE__*/css(euiYScrollWithShadows(euiThemeContext), ";padding-inline:", euiTheme.size.l, ";padding-block:", euiTheme.size.s, ";", euiMaxBreakpoint(euiThemeContext, 'm'), "{padding-block-end:", euiTheme.size.l, ";};label:euiModalBody__overflow;")
   };
 };

package/optimize/es/components/modal/modal_footer.styles.js

@@ -6,10 +6,10 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiBreakpoint } from '../../global_styling';
+import { euiMaxBreakpoint } from '../../global_styling';
 export var euiModalFooterStyles = function euiModalFooterStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiModalFooter: /*#__PURE__*/css("display:flex;justify-content:flex-end;padding-block:", euiTheme.size.base, " ", euiTheme.size.l, ";padding-inline:", euiTheme.size.l, ";flex-grow:0;flex-shrink:0;gap:", euiTheme.size.base, ";", euiBreakpoint(euiThemeContext, ['xs', 's']), "{background:", euiTheme.colors.lightestShade, ";padding-block:", euiTheme.size.m, ";padding-inline:", euiTheme.size.l, ";justify-content:stretch;gap:", euiTheme.size.s, ";>*{flex:1;}};label:euiModalFooter;")
+    euiModalFooter: /*#__PURE__*/css("display:flex;justify-content:flex-end;padding-block:", euiTheme.size.base, " ", euiTheme.size.l, ";padding-inline:", euiTheme.size.l, ";flex-grow:0;flex-shrink:0;gap:", euiTheme.size.base, ";", euiMaxBreakpoint(euiThemeContext, 'm'), "{background:", euiTheme.colors.lightestShade, ";padding-block:", euiTheme.size.m, ";padding-inline:", euiTheme.size.l, ";justify-content:stretch;gap:", euiTheme.size.s, ";>*{flex:1;}};label:euiModalFooter;")
   };
 };

package/optimize/es/components/modal/modal_header.styles.js

@@ -6,9 +6,10 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
+import { logicalShorthandCSS } from '../../global_styling';
 export var euiModalHeaderStyles = function euiModalHeaderStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiModalHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;align-items:center;padding-inline:", euiTheme.size.l, " ", euiTheme.size.xxl, ";padding-block:", euiTheme.size.l, " ", euiTheme.size.base, ";flex-grow:0;flex-shrink:0;&+.euiModalFooter{padding-block-start:", euiTheme.size.s, ";};label:euiModalHeader;")
+    euiModalHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;align-items:center;flex-grow:0;flex-shrink:0;", logicalShorthandCSS('padding', "".concat(euiTheme.size.l, " ").concat(euiTheme.size.xxl, " ").concat(euiTheme.size.base, " ").concat(euiTheme.size.l)), "&+.euiModalFooter{padding-block-start:", euiTheme.size.s, ";};label:euiModalHeader;")
   };
 };

package/optimize/es/components/page/page.styles.js

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiBreakpoint, logicalCSS } from '../../global_styling';
+import { euiMinBreakpoint, logicalCSS } from '../../global_styling';
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "ll8kmq-column",
@@ -36,7 +36,7 @@ export var euiPageStyles = function euiPageStyles(euiThemeContext) {
     grow: _ref2,
     // Direction
     column: _ref,
-    row: /*#__PURE__*/css("flex-direction:column;", euiBreakpoint(euiThemeContext, ['m', 'xl']), "{flex-direction:row;};label:row;"),
+    row: /*#__PURE__*/css("flex-direction:column;", euiMinBreakpoint(euiThemeContext, 'm'), "{flex-direction:row;};label:row;"),
     // Max widths
     restrictWidth: /*#__PURE__*/css(logicalCSS('margin-horizontal', 'auto'), ";;label:restrictWidth;")
   };

package/optimize/es/components/pagination/pagination.a11y.js

@@ -0,0 +1,48 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/*
+ * 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"/>
+import React, { useState } from 'react';
+import { EuiPagination } from './pagination';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var Pagination = function Pagination() {
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      activePage = _useState2[0],
+      setActivePage = _useState2[1];
+
+  return ___EmotionJSX(EuiPagination, {
+    "aria-label": "Many pages example",
+    pageCount: 22,
+    activePage: activePage,
+    onPageClick: function onPageClick(activePage) {
+      return setActivePage(activePage);
+    }
+  });
+};
+
+describe('EuiPagination', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first mobile render', function () {
+      cy.viewport(375, 667); // small breakpoint
+
+      cy.mount(___EmotionJSX(Pagination, null));
+      cy.get('nav.euiPagination').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when rendered using non-mobile breakpoint', function () {
+      cy.viewport(1280, 800); //macbook-13
+
+      cy.mount(___EmotionJSX(Pagination, null));
+      cy.get('nav.euiPagination').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/es/components/popover/popover_footer.styles.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiFontSize, euiPaddingSize, logicalCSS } from '../../global_styling';
+import { euiFontSize, euiPaddingSize, logicalCSS, logicalShorthandCSS } from '../../global_styling';
 export var euiPopoverFooterStyles = function euiPopoverFooterStyles(euiThemeContext, panelPadding) {
   var euiTheme = euiThemeContext.euiTheme; // If the popover's containing panel has padding applied,
   // ensure the title expands to cover that padding and
@@ -14,6 +14,6 @@ export var euiPopoverFooterStyles = function euiPopoverFooterStyles(euiThemeCont
   var panelPaddingSize = euiPaddingSize(euiThemeContext, panelPadding);
   return {
     // Base
-    euiPopoverFooter: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";", logicalCSS('border-top', euiTheme.border.thin), ";margin:", panelPaddingSize, " -", panelPaddingSize, " -", panelPaddingSize, ";;label:euiPopoverFooter;")
+    euiPopoverFooter: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";", logicalCSS('border-top', euiTheme.border.thin), ";", logicalShorthandCSS('margin', "".concat(panelPaddingSize, " -").concat(panelPaddingSize, " -").concat(panelPaddingSize)), ";;label:euiPopoverFooter;")
   };
 };

package/optimize/es/components/popover/popover_title.styles.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiPaddingSize, logicalCSS } from '../../global_styling';
+import { euiPaddingSize, logicalCSS, logicalShorthandCSS } from '../../global_styling';
 import { euiTitle } from '../title/title.styles';
 export var euiPopoverTitleStyles = function euiPopoverTitleStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
@@ -28,5 +28,5 @@ export var euiPopoverTitleStyles = function euiPopoverTitleStyles(euiThemeContex
 
 var getPaddingOffset = function getPaddingOffset(euiThemeContext, size) {
   var panelPaddingSize = euiPaddingSize(euiThemeContext, size);
-  return "margin: -".concat(panelPaddingSize, " -").concat(panelPaddingSize, " ").concat(panelPaddingSize, ";");
+  return logicalShorthandCSS('margin', "-".concat(panelPaddingSize, " -").concat(panelPaddingSize, " ").concat(panelPaddingSize));
 };

package/optimize/es/components/search_bar/query/ast_to_es_query_dsl.js

@@ -112,13 +112,19 @@ export var _fieldValuesToQuery = function _fieldValuesToQuery(field, operations,
           queries.push({
             bool: _defineProperty({}, andOr === 'and' ? 'must' : 'should', _toConsumableArray(_terms.map(function (value) {
               return {
-                match: _defineProperty({}, field, value)
+                match: _defineProperty({}, field, {
+                  query: value,
+                  operator: andOr
+                })
               };
             })))
           });
         } else if (_terms.length === 1) {
           queries.push({
-            match: _defineProperty({}, field, _terms[0])
+            match: _defineProperty({}, field, {
+              query: _terms[0],
+              operator: andOr
+            })
           });
         }
 

package/optimize/es/components/side_nav/side_nav.a11y.js

@@ -0,0 +1,313 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/*
+ * 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"/>
+import React, { useState } from 'react';
+import { EuiSideNav } from './side_nav';
+import { EuiIcon } from '../icon';
+import { htmlIdGenerator } from '../../services';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+describe('EuiSideNav', function () {
+  describe('Mobile EuiSideNav', function () {
+    var MobileSideNav = function MobileSideNav() {
+      var _useState = useState(false),
+          _useState2 = _slicedToArray(_useState, 2),
+          isSideNavOpenOnMobile = _useState2[0],
+          setisSideNavOpenOnMobile = _useState2[1];
+
+      var _toggleOpenOnMobile = function toggleOpenOnMobile() {
+        setisSideNavOpenOnMobile(!isSideNavOpenOnMobile);
+      };
+
+      var basicSideNav = [{
+        name: 'Root item',
+        id: htmlIdGenerator('basicExample')(),
+        items: [{
+          name: 'Item with onClick',
+          id: htmlIdGenerator('basicExample')()
+        }, {
+          name: 'Item with href',
+          id: htmlIdGenerator('basicExample')(),
+          href: '/#/navigation/side-nav'
+        }, {
+          name: 'Selected item',
+          id: htmlIdGenerator('basicExample')(),
+          isSelected: true
+        }, {
+          name: 'Disabled item',
+          id: htmlIdGenerator('basicExample')(),
+          disabled: true
+        }]
+      }];
+      return ___EmotionJSX(EuiSideNav, {
+        "aria-label": "Basic example",
+        mobileTitle: "Basic example",
+        toggleOpenOnMobile: function toggleOpenOnMobile() {
+          return _toggleOpenOnMobile();
+        },
+        isOpenOnMobile: isSideNavOpenOnMobile,
+        style: {
+          width: 192
+        },
+        items: basicSideNav
+      });
+    };
+
+    beforeEach(function () {
+      cy.viewport(375, 667); // small breakpoint
+
+      cy.mount(___EmotionJSX(MobileSideNav, null));
+    });
+    describe('Automated accessibility check', function () {
+      it('has zero violations when mobile side nav is rendered', function () {
+        cy.checkAxe();
+      });
+      it('has zero violations when mobile side nav is expanded', function () {
+        cy.get('button').contains('Basic example').realClick();
+        cy.get('div.euiSideNav__content').should('exist');
+        cy.checkAxe();
+      });
+    });
+  });
+  describe('Simple EuiSideNav', function () {
+    var SimpleSideNav = function SimpleSideNav() {
+      var basicSideNav = [{
+        name: 'Root item',
+        id: htmlIdGenerator('basicExample')(),
+        items: [{
+          name: 'Item with onClick',
+          id: htmlIdGenerator('basicExample')()
+        }, {
+          name: 'Item with href',
+          id: htmlIdGenerator('basicExample')(),
+          href: '/#/navigation/side-nav'
+        }, {
+          name: 'Selected item',
+          id: htmlIdGenerator('basicExample')(),
+          isSelected: true
+        }, {
+          name: 'Disabled item',
+          id: htmlIdGenerator('basicExample')(),
+          disabled: true
+        }]
+      }];
+      return ___EmotionJSX(EuiSideNav, {
+        "aria-label": "Basic example",
+        style: {
+          width: 192
+        },
+        items: basicSideNav
+      });
+    };
+
+    beforeEach(function () {
+      cy.viewport(768, 1024); // medium breakpoint
+
+      cy.mount(___EmotionJSX(SimpleSideNav, null));
+      cy.get('nav.euiSideNav').should('exist');
+    });
+    describe('Automated accessibility check', function () {
+      it('has zero violations when rendered using non-mobile breakpoint', function () {
+        cy.get('nav.euiSideNav').should('exist');
+        cy.checkAxe();
+      });
+    });
+  });
+  describe('Nested EuiSideNav', function () {
+    var NestedSideNav = function NestedSideNav() {
+      var nestedSideNav = [{
+        name: 'Kibana',
+        id: 'kibana-1',
+        icon: ___EmotionJSX(EuiIcon, {
+          type: "logoKibana"
+        }),
+        isSelected: false,
+        items: [{
+          name: 'Has normal children',
+          id: 'has-normal-children-1',
+          isSelected: false
+        }, {
+          name: 'Normally not open',
+          id: 'normally-not-open-1',
+          isSelected: false,
+          items: [{
+            name: 'Open by override',
+            id: 'open-by-override-1',
+            isSelected: false,
+            forceOpen: true,
+            items: [{
+              name: 'Child 3',
+              id: 'child-3-1',
+              isSelected: true
+            }, {
+              name: 'Child 4',
+              id: 'child-4-1',
+              isSelected: false
+            }, {
+              name: 'Child 5',
+              id: 'child-5-1',
+              isSelected: false
+            }, {
+              name: 'Child 6',
+              id: 'child-6-1',
+              isSelected: false,
+              disabled: true
+            }]
+          }]
+        }, {
+          name: 'Has expanded children',
+          id: 'has-expanded-children-1',
+          isSelected: false,
+          forceOpen: true,
+          items: [{
+            name: 'Child 7',
+            id: 'child-7-1',
+            isSelected: false
+          }]
+        }]
+      }];
+      return ___EmotionJSX(EuiSideNav, {
+        "aria-label": "Force-open example",
+        items: nestedSideNav,
+        style: {
+          width: 192
+        }
+      });
+    };
+
+    beforeEach(function () {
+      cy.viewport(768, 1024); // medium breakpoint
+
+      cy.mount(___EmotionJSX(NestedSideNav, null));
+      cy.get('nav.euiSideNav').should('exist');
+    });
+    describe('Automated accessibility check', function () {
+      it('has zero violations when complex side nav is rendered', function () {
+        cy.checkAxe();
+      });
+    });
+  });
+  describe('Complex EuiSideNav', function () {
+    var ComplexSideNav = function ComplexSideNav() {
+      var complexSideNav = [{
+        name: 'Elasticsearch',
+        id: 'elasticsearch-1',
+        icon: ___EmotionJSX(EuiIcon, {
+          type: "logoElasticsearch"
+        }),
+        isSelected: false,
+        items: [{
+          name: 'Data sources',
+          id: 'data-sources-1',
+          isSelected: false
+        }, {
+          name: 'Users',
+          id: 'users-1',
+          isSelected: false
+        }, {
+          name: 'Roles',
+          id: 'roles-1',
+          isSelected: false
+        }, {
+          name: 'Watches',
+          id: 'watches-1',
+          isSelected: false
+        }, {
+          name: 'Extremely long title will become truncated when the browser is narrow enough',
+          id: 'extremely-long-title-1',
+          isSelected: false
+        }]
+      }, {
+        name: 'Kibana',
+        id: 'kibana-1',
+        icon: ___EmotionJSX(EuiIcon, {
+          type: "logoKibana"
+        }),
+        isSelected: false,
+        items: [{
+          name: 'Advanced settings',
+          id: 'advanced-settings-1',
+          isSelected: false,
+          items: [{
+            name: 'General',
+            id: 'general-1',
+            isSelected: false,
+            disabled: true
+          }, {
+            name: 'Timelion',
+            id: 'timelino-1',
+            isSelected: false,
+            items: [{
+              name: 'Time stuff',
+              id: 'time-stuff-1',
+              icon: ___EmotionJSX(EuiIcon, {
+                type: "clock"
+              }),
+              isSelected: true
+            }, {
+              name: 'Lion stuff',
+              id: 'lion-stuff-1',
+              icon: ___EmotionJSX(EuiIcon, {
+                type: "stats"
+              }),
+              isSelected: false
+            }]
+          }, {
+            name: 'Visualizations',
+            id: 'visualizations-1',
+            isSelected: false
+          }]
+        }, {
+          name: 'Index patterns',
+          id: 'index-patterns-1',
+          isSelected: false
+        }, {
+          name: 'Saved objects',
+          id: 'saved-objects-1',
+          isSelected: false
+        }, {
+          name: 'Reporting',
+          id: 'reporting-1',
+          isSelected: false
+        }]
+      }, {
+        name: 'Logstash',
+        id: 'logstash-1',
+        icon: ___EmotionJSX(EuiIcon, {
+          type: "logoLogstash"
+        }),
+        isSelected: false,
+        items: [{
+          name: 'Pipeline viewer',
+          id: 'data-sources-1',
+          isSelected: false
+        }]
+      }];
+      return ___EmotionJSX(EuiSideNav, {
+        "aria-label": "Complex example",
+        items: complexSideNav,
+        style: {
+          width: 192
+        }
+      });
+    };
+
+    beforeEach(function () {
+      cy.viewport(768, 1024); // medium breakpoint
+
+      cy.mount(___EmotionJSX(ComplexSideNav, null));
+      cy.get('nav.euiSideNav').should('exist');
+    });
+    describe('Automated accessibility check', function () {
+      it('has zero violations when complex side nav is rendered', function () {
+        cy.checkAxe();
+      });
+    });
+  });
+});

package/optimize/es/components/text/text.styles.js

@@ -61,7 +61,9 @@ var euiScaleText = function euiScaleText(euiThemeContext, options) {
 export var euiTextStyles = function euiTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiText: /*#__PURE__*/css(euiText(euiTheme, true), ";clear:both;a:not([class]){", euiLinkCSS(euiThemeContext), ";}img{display:block;", logicalCSS('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", logicalTextAlignCSS('center'), " ", logicalCSS('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", logicalCSS('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", logicalCSS('height', euiTheme.border.width.thick), " ", logicalCSS('width', '50%'), " ", logicalCSS('left', '25%'), " ", logicalCSS('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", logicalCSS('top', '0'), ";}&:after{", logicalCSS('bottom', '0'), ";}}h1{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:euiText;"),
+    euiText: /*#__PURE__*/css(euiText(euiTheme, true), ";clear:both;a:not([class]){", euiLinkCSS(euiThemeContext), ";}img{display:block;", logicalCSS('max-width', '100%'), ";}ul{list-style:disc;}ol{list-style:decimal;}blockquote:not(.euiMarkdownFormat__blockquote){position:relative;", logicalTextAlignCSS('center'), " ", logicalCSS('margin-horizontal', 'auto'), " font-family:", euiTheme.font.familySerif, ";font-style:italic;letter-spacing:normal;p:last-child{", logicalCSS('margin-bottom', '0'), ";}&:before,&:after{position:absolute;content:'';", logicalCSS('height', euiTheme.border.width.thick), " ", logicalCSS('width', '50%'), " ", logicalCSS('left', '25%'), " ", logicalCSS('right', '25%'), " background:", euiTheme.colors.darkShade, ";}&:before{", logicalCSS('top', '0'), ";}&:after{", logicalCSS('bottom', '0'), ";}}h1{", euiTitle(euiThemeContext, 'l'), ";}h2{", euiTitle(euiThemeContext, 'm'), ";}h3{", euiTitle(euiThemeContext, 's'), ";}h4,dt{", euiTitle(euiThemeContext, 'xs'), ";}h5{", euiTitle(euiThemeContext, 'xxs'), ";}h6{", euiTitle(euiThemeContext, 'xxxs'), " text-transform:uppercase;}h1,h2,h3,h4,h5,h6,dt{color:inherit;}pre:not(.euiCodeBlock__pre){white-space:pre-wrap;background:", euiBackgroundColor(euiThemeContext, 'subdued'), ";color:", euiTheme.colors.text, ";}pre:not(.euiCodeBlock__pre),pre:not(.euiCodeBlock__pre) code{display:block;}>:last-child{", logicalCSS('margin-bottom', '0 !important'), ";}kbd{position:relative;display:inline-block;", logicalCSS('padding-vertical', euiTheme.size.xxs), " ", logicalCSS('padding-horizontal', euiTheme.size.xs), " line-height:1;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.text, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
+      return x / 2;
+    }), ";};label:euiText;"),
     constrainedWidth: /*#__PURE__*/css(logicalCSS('max-width', euiTextConstrainedMaxWidth), ";;label:constrainedWidth;"),
     // Sizes
     m: /*#__PURE__*/css(euiScaleText(euiThemeContext, {

package/optimize/es/components/toast/global_toast_list.styles.js

@@ -10,20 +10,20 @@ var _templateObject;
  * Side Public License, v 1.
  */
 import { css, keyframes } from '@emotion/react';
-import { euiBreakpoint, euiScrollBarStyles, logicalCSS, logicalCSSWithFallback, logicalSizeCSS } from '../../global_styling';
+import { euiMaxBreakpoint, euiMinBreakpoint, euiScrollBarStyles, logicalCSS, logicalCSSWithFallback, logicalSizeCSS } from '../../global_styling';
 export var euiGlobalToastListStyles = function euiGlobalToastListStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var euiToastWidth = euiTheme.base * 20;
+  var euiToastWidth = euiTheme.base * 25;
   return {
     /**
      * 1. Allow list to expand as items are added, but cap it at the screen height.
      * 2. Allow some padding for shadow
      */
     // Base
-    euiGlobalToastList: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", logicalCSS('bottom', 0), ";", logicalCSS('width', "".concat(euiToastWidth + euiTheme.base * 5, "px")), ";", logicalCSS('max-height', '100vh'), ";", logicalCSSWithFallback('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", logicalSizeCSS(0, 0), ";}&:not(:empty){", logicalCSS('padding-left', euiTheme.size.base), ";", logicalCSS('padding-right', euiTheme.size.base), ";", logicalCSS('padding-vertical', euiTheme.size.base), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{&:not(:empty){", logicalCSS('left', 0), ";", logicalCSS('width', '100%'), ";}};label:euiGlobalToastList;"),
+    euiGlobalToastList: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", logicalCSS('bottom', 0), ";", logicalCSS('width', "".concat(euiToastWidth, "px")), ";", logicalCSS('max-height', '100vh'), ";", logicalCSSWithFallback('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", logicalSizeCSS(0, 0), ";}&:not(:empty){", logicalCSS('padding-left', euiTheme.size.base), ";", logicalCSS('padding-right', euiTheme.size.base), ";", logicalCSS('padding-vertical', euiTheme.size.base), ";}", euiMaxBreakpoint(euiThemeContext, 'm'), "{&:not(:empty){", logicalCSS('left', 0), ";", logicalCSS('width', '100%'), ";}};label:euiGlobalToastList;"),
     // Variants
-    right: /*#__PURE__*/css("&:not(:empty){", logicalCSS('right', 0), ";", logicalCSS('padding-left', "".concat(euiTheme.base * 4, "px")), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{&:not(:empty){", logicalCSS('padding-left', euiTheme.size.base), ";}};label:right;"),
-    left: /*#__PURE__*/css("&:not(:empty){", logicalCSS('left', 0), ";", logicalCSS('padding-right', "".concat(euiTheme.base * 4, "px")), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{&:not(:empty){", logicalCSS('padding-right', euiTheme.size.base), ";}};label:left;")
+    right: /*#__PURE__*/css("&:not(:empty){", logicalCSS('right', 0), ";", euiMinBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('padding-left', "".concat(euiTheme.base * 4, "px")), ";}};label:right;"),
+    left: /*#__PURE__*/css("&:not(:empty){", logicalCSS('left', 0), ";", euiMinBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('padding-right', "".concat(euiTheme.base * 4, "px")), ";}};label:left;")
   };
 };
 export var euiGlobalToastListItemStyles = function euiGlobalToastListItemStyles(_ref) {