@elastic/eui 70.4.0 → 71.0.0

package/optimize/lib/components/icon/svgs/discuss.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.96667 10.8638C5.29871 11.6513 6.05221 12.201 6.92857 12.201H10.6021L13.3572 15.0001V12.201C14.5407 12.201 15.5001 11.1985 15.5001 9.96176V6.60289C15.5001 5.36619 14.5407 4.36365 13.3572 4.36365H12.2858V8.6971C12.2858 9.89372 11.3903 10.8638 10.2858 10.8638H4.96667Z" />
+<path d="M4.90517 8.71774H9.07143C9.66316 8.71774 10.1429 8.21646 10.1429 7.59811V4.23925C10.1429 3.62089 9.66316 3.11962 9.07143 3.11962H2.64286C2.05112 3.11962 1.57143 3.62089 1.57143 4.23925V7.59811C1.57143 8.21646 2.05112 8.71774 2.64286 8.71774H3.71429V10.1696L4.90517 8.71774ZM5.39796 9.83736L2.64286 12.6364V9.83736C1.45939 9.83736 0.5 8.83481 0.5 7.59811V4.23925C0.5 3.00254 1.45939 2 2.64286 2H9.07143C10.2549 2 11.2143 3.00254 11.2143 4.23925V7.59811C11.2143 8.83481 10.2549 9.83736 9.07143 9.83736H5.39796Z"/>
+</svg>

package/optimize/lib/components/icon/svgs/dotInCircle.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0.5C12.1356 0.5 15.5 3.86441 15.5 8C15.5 12.1356 12.1356 15.5 8 15.5C3.86441 15.5 0.5 12.1356 0.5 8C0.5 3.86441 3.86441 0.5 8 0.5ZM8 1.38235C4.34529 1.38235 1.38235 4.34529 1.38235 8C1.38235 11.6547 4.34529 14.6176 8 14.6176C11.6547 14.6176 14.6176 11.6547 14.6176 8C14.6176 4.34529 11.6547 1.38235 8 1.38235Z" />
+<path d="M9 8C9 8.55229 8.55229 9 8 9C7.44772 9 7 8.55229 7 8C7 7.44772 7.44772 7 8 7C8.55229 7 9 7.44772 9 8Z" />
+</svg>

package/optimize/lib/components/list_group/list_group_item.styles.js

@@ -60,7 +60,7 @@ var euiListGroupItemInnerStyles = function euiListGroupItemInnerStyles(euiThemeC
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiListGroupItem__inner: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.xs, " ", euiTheme.size.s, ";display:flex;align-items:center;flex-grow:1;max-inline-size:100%;overflow:hidden;text-align:start;font-weight:inherit;;label:euiListGroupItem__inner;"),
+    euiListGroupItem__inner: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.s)), " display:flex;align-items:center;flex-grow:1;max-inline-size:100%;overflow:hidden;text-align:start;font-weight:inherit;;label:euiListGroupItem__inner;"),
     // Sizes
     xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), ";font-weight:", euiTheme.font.weight.medium, ";letter-spacing:0;", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.l), ";;label:xs;"),
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";font-weight:", euiTheme.font.weight.medium, ";letter-spacing:0;", (0, _global_styling.logicalCSS)('min-height', euiTheme.size.xl), ";;label:s;"),

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

@@ -40,10 +40,14 @@ exports.euiSpinnerBorderColorsCSS = euiSpinnerBorderColorsCSS;
 var euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiLoadingSpinner: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";border-color:", euiSpinnerBorderColorsCSS(euiThemeContext), ";", _global_styling.euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
+    euiLoadingSpinner: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";", (0, _global_styling.logicalShorthandCSS)('border-color', euiSpinnerBorderColorsCSS(euiThemeContext)), " ", _global_styling.euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
     // Sizes
-    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.s], euiTheme.size[spinnerSizes.s]), " border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.m], euiTheme.size[spinnerSizes.m]), " border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:m;"),
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.s], euiTheme.size[spinnerSizes.s]), " border-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+      return x * 1.5;
+    }), ";;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.m], euiTheme.size[spinnerSizes.m]), " border-width:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+      return x * 1.5;
+    }), ";;label:m;"),
     l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.l], euiTheme.size[spinnerSizes.l]), ";;label:l;"),
     xl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.xl], euiTheme.size[spinnerSizes.xl]), ";;label:xl;"),
     xxl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.xxl], euiTheme.size[spinnerSizes.xxl]), ";;label:xxl;")

package/optimize/lib/components/markdown_editor/markdown_editor.js

@@ -33,7 +33,7 @@ var _markdown_format = require("./markdown_format");
 
 var _markdown_editor_drop_zone = require("./markdown_editor_drop_zone");
 
-var _services = require("../../services/");
+var _services = require("../../services");
 
 var _markdown_modes = require("./markdown_modes");
 

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

@@ -38,7 +38,7 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
   var tablePaddingHorizontal = (0, _global_styling.mathWithUnits)(fontSize, function (x) {
     return x / 2;
   });
-  return "\n    .euiMarkdownFormat__blockquote {\n      padding: 0 ".concat(fontSize, ";\n      ").concat((0, _global_styling.logicalCSS)('border-left-width', blockQuoteBorderWidth), "\n      ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', tablePaddingVertical), "\n      ").concat((0, _global_styling.logicalCSS)('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
+  return "\n    .euiMarkdownFormat__blockquote {\n      ".concat((0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(fontSize)), "\n      ").concat((0, _global_styling.logicalCSS)('border-left-width', blockQuoteBorderWidth), "\n      ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', tablePaddingVertical), "\n      ").concat((0, _global_styling.logicalCSS)('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
 };
 /**
  * Styles

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

@@ -56,7 +56,7 @@ var Modal = function Modal() {
 beforeEach(function () {
   cy.mount((0, _react2.jsx)(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/lib/components/modal/modal_header.styles.js

@@ -7,6 +7,8 @@ exports.euiModalHeaderStyles = 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
@@ -17,7 +19,7 @@ var _react = require("@emotion/react");
 var euiModalHeaderStyles = function euiModalHeaderStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiModalHeader: /*#__PURE__*/(0, _react.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__*/(0, _react.css)("display:flex;justify-content:space-between;align-items:center;flex-grow:0;flex-shrink:0;", (0, _global_styling.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/lib/components/pagination/pagination.a11y.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _pagination = require("./pagination");
+
+var _react2 = require("@emotion/react");
+
+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; }
+
+/*
+ * 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 Pagination = function Pagination() {
+  var _useState = (0, _react.useState)(0),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      activePage = _useState2[0],
+      setActivePage = _useState2[1];
+
+  return (0, _react2.jsx)(_pagination.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((0, _react2.jsx)(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((0, _react2.jsx)(Pagination, null));
+      cy.get('nav.euiPagination').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

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

@@ -23,7 +23,7 @@ var euiPopoverFooterStyles = function euiPopoverFooterStyles(euiThemeContext, pa
   var panelPaddingSize = (0, _global_styling.euiPaddingSize)(euiThemeContext, panelPadding);
   return {
     // Base
-    euiPopoverFooter: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";margin:", panelPaddingSize, " -", panelPaddingSize, " -", panelPaddingSize, ";;label:euiPopoverFooter;")
+    euiPopoverFooter: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 's'), ";", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";", (0, _global_styling.logicalShorthandCSS)('margin', "".concat(panelPaddingSize, " -").concat(panelPaddingSize, " -").concat(panelPaddingSize)), ";;label:euiPopoverFooter;")
   };
 };
 

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

@@ -40,5 +40,5 @@ exports.euiPopoverTitleStyles = euiPopoverTitleStyles;
 
 var getPaddingOffset = function getPaddingOffset(euiThemeContext, size) {
   var panelPaddingSize = (0, _global_styling.euiPaddingSize)(euiThemeContext, size);
-  return "margin: -".concat(panelPaddingSize, " -").concat(panelPaddingSize, " ").concat(panelPaddingSize, ";");
+  return (0, _global_styling.logicalShorthandCSS)('margin', "-".concat(panelPaddingSize, " -").concat(panelPaddingSize, " ").concat(panelPaddingSize));
 };

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

@@ -0,0 +1,328 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _side_nav = require("./side_nav");
+
+var _icon = require("../icon");
+
+var _services = require("../../services");
+
+var _react2 = require("@emotion/react");
+
+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; }
+
+/*
+ * 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"/>
+describe('EuiSideNav', function () {
+  describe('Mobile EuiSideNav', function () {
+    var MobileSideNav = function MobileSideNav() {
+      var _useState = (0, _react.useState)(false),
+          _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+          isSideNavOpenOnMobile = _useState2[0],
+          setisSideNavOpenOnMobile = _useState2[1];
+
+      var _toggleOpenOnMobile = function toggleOpenOnMobile() {
+        setisSideNavOpenOnMobile(!isSideNavOpenOnMobile);
+      };
+
+      var basicSideNav = [{
+        name: 'Root item',
+        id: (0, _services.htmlIdGenerator)('basicExample')(),
+        items: [{
+          name: 'Item with onClick',
+          id: (0, _services.htmlIdGenerator)('basicExample')()
+        }, {
+          name: 'Item with href',
+          id: (0, _services.htmlIdGenerator)('basicExample')(),
+          href: '/#/navigation/side-nav'
+        }, {
+          name: 'Selected item',
+          id: (0, _services.htmlIdGenerator)('basicExample')(),
+          isSelected: true
+        }, {
+          name: 'Disabled item',
+          id: (0, _services.htmlIdGenerator)('basicExample')(),
+          disabled: true
+        }]
+      }];
+      return (0, _react2.jsx)(_side_nav.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((0, _react2.jsx)(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: (0, _services.htmlIdGenerator)('basicExample')(),
+        items: [{
+          name: 'Item with onClick',
+          id: (0, _services.htmlIdGenerator)('basicExample')()
+        }, {
+          name: 'Item with href',
+          id: (0, _services.htmlIdGenerator)('basicExample')(),
+          href: '/#/navigation/side-nav'
+        }, {
+          name: 'Selected item',
+          id: (0, _services.htmlIdGenerator)('basicExample')(),
+          isSelected: true
+        }, {
+          name: 'Disabled item',
+          id: (0, _services.htmlIdGenerator)('basicExample')(),
+          disabled: true
+        }]
+      }];
+      return (0, _react2.jsx)(_side_nav.EuiSideNav, {
+        "aria-label": "Basic example",
+        style: {
+          width: 192
+        },
+        items: basicSideNav
+      });
+    };
+
+    beforeEach(function () {
+      cy.viewport(768, 1024); // medium breakpoint
+
+      cy.mount((0, _react2.jsx)(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: (0, _react2.jsx)(_icon.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 (0, _react2.jsx)(_side_nav.EuiSideNav, {
+        "aria-label": "Force-open example",
+        items: nestedSideNav,
+        style: {
+          width: 192
+        }
+      });
+    };
+
+    beforeEach(function () {
+      cy.viewport(768, 1024); // medium breakpoint
+
+      cy.mount((0, _react2.jsx)(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: (0, _react2.jsx)(_icon.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: (0, _react2.jsx)(_icon.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: (0, _react2.jsx)(_icon.EuiIcon, {
+                type: "clock"
+              }),
+              isSelected: true
+            }, {
+              name: 'Lion stuff',
+              id: 'lion-stuff-1',
+              icon: (0, _react2.jsx)(_icon.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: (0, _react2.jsx)(_icon.EuiIcon, {
+          type: "logoLogstash"
+        }),
+        isSelected: false,
+        items: [{
+          name: 'Pipeline viewer',
+          id: 'data-sources-1',
+          isSelected: false
+        }]
+      }];
+      return (0, _react2.jsx)(_side_nav.EuiSideNav, {
+        "aria-label": "Complex example",
+        items: complexSideNav,
+        style: {
+          width: 192
+        }
+      });
+    };
+
+    beforeEach(function () {
+      cy.viewport(768, 1024); // medium breakpoint
+
+      cy.mount((0, _react2.jsx)(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/lib/components/text/text.styles.js

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

package/optimize/lib/components/token/token.styles.js

@@ -64,7 +64,9 @@ var euiTokenStyles = function euiTokenStyles(_ref2, fill) {
     square: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";;label:square;"),
     rectangle: /*#__PURE__*/(0, _react.css)("box-sizing:content-box;border-radius:", euiTheme.border.radius.small, ";;label:rectangle;"),
     // Sizes
-    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.s, euiTheme.size.s), ";&[class*='-square']{border-radius:calc(", euiTheme.border.radius.small, " / 2);}&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-vertical', '1px'), ";", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:xs;"),
+    xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.s, euiTheme.size.s), ";&[class*='-square'],&[class*='-rectangle']{border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+      return x / 2;
+    }), ";}&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-vertical', '1px'), ";", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";};label:xs;"),
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.base, euiTheme.size.base), ";&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";};label:s;"),
     m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.l, euiTheme.size.l), ";&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";};label:m;"),
     l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.xl, euiTheme.size.xl), ";&[class*='-rectangle']{", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), ";};label:l;"),

package/optimize/lib/components/tool_tip/tool_tip.styles.js

@@ -64,7 +64,9 @@ var euiToolTipStyles = function euiToolTipStyles(euiThemeContext) {
     left: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{animation:", euiToolTipAnimationHorizontal("-".concat(euiTheme.size.base)), " ", animationTiming, ";};label:left;"),
     right: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{animation:", euiToolTipAnimationHorizontal(euiTheme.size.base), " ", animationTiming, ";};label:right;"),
     // Arrow
-    euiToolTip__arrow: /*#__PURE__*/(0, _react.css)("content:'';position:absolute;transform-origin:center;border-radius:2px;background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";", (0, _global_styling.logicalSizeCSS)(arrowSize, arrowSize), ";;label:euiToolTip__arrow;"),
+    euiToolTip__arrow: /*#__PURE__*/(0, _react.css)("content:'';position:absolute;transform-origin:center;border-radius:", (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+      return x / 2;
+    }), ";background-color:", euiToolTipBackgroundColor(euiTheme, colorMode), ";", (0, _global_styling.logicalSizeCSS)(arrowSize, arrowSize), ";;label:euiToolTip__arrow;"),
     arrowPositions: {
       top: /*#__PURE__*/(0, _react.css)("transform:translateY(", arrowPlusSize, ") rotateZ(45deg);;label:top;"),
       bottom: /*#__PURE__*/(0, _react.css)("transform:translateY(", arrowMinusSize, ") rotateZ(45deg);;label:bottom;"),

package/optimize/lib/global_styling/functions/index.js

@@ -17,6 +17,19 @@ Object.keys(_logicals).forEach(function (key) {
   });
 });
 
+var _logical_shorthands = require("./logical_shorthands");
+
+Object.keys(_logical_shorthands).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _logical_shorthands[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _logical_shorthands[key];
+    }
+  });
+});
+
 var _math = require("./math");
 
 Object.keys(_math).forEach(function (key) {