@elastic/eui 70.3.0 → 71.0.0

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/toast/global_toast_list.styles.js

@@ -17,17 +17,17 @@ var _templateObject;
 
 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__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('bottom', 0), ";", (0, _global_styling.logicalCSS)('width', "".concat(euiToastWidth + euiTheme.base * 5, "px")), ";", (0, _global_styling.logicalCSS)('max-height', '100vh'), ";", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", (0, _global_styling.logicalSizeCSS)(0, 0), ";}&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiGlobalToastList;"),
+    euiGlobalToastList: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", (0, _global_styling.logicalCSS)('bottom', 0), ";", (0, _global_styling.logicalCSS)('width', "".concat(euiToastWidth, "px")), ";", (0, _global_styling.logicalCSS)('max-height', '100vh'), ";", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", (0, _global_styling.logicalSizeCSS)(0, 0), ";}&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.base), ";}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('width', '100%'), ";}};label:euiGlobalToastList;"),
     // Variants
-    right: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('right', 0), ";", (0, _global_styling.logicalCSS)('padding-left', "".concat(euiTheme.base * 4, "px")), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), ";}};label:right;"),
-    left: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.logicalCSS)('padding-right', "".concat(euiTheme.base * 4, "px")), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{&:not(:empty){", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.base), ";}};label:left;")
+    right: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('right', 0), ";", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('padding-left', "".concat(euiTheme.base * 4, "px")), ";}};label:right;"),
+    left: /*#__PURE__*/(0, _react.css)("&:not(:empty){", (0, _global_styling.logicalCSS)('left', 0), ";", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('padding-right', "".concat(euiTheme.base * 4, "px")), ";}};label:left;")
   };
 };
 

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/components/tour/tour_step.js

@@ -128,9 +128,24 @@ var EuiTourStep = function EuiTourStep(_ref) {
     flush: 'right',
     size: 'xs'
   };
+  var optionalFooterAction = Array.isArray(footerAction) ? (0, _react2.jsx)(_flex.EuiFlexGroup, {
+    gutterSize: "s",
+    alignItems: "center",
+    justifyContent: "flexEnd",
+    responsive: false,
+    wrap: true
+  }, footerAction.map(function (action, index) {
+    return (0, _react2.jsx)(_flex.EuiFlexItem, {
+      key: index,
+      grow: false
+    }, action);
+  })) : (0, _react2.jsx)(_flex.EuiFlexItem, {
+    grow: false
+  }, footerAction);
   var footer = (0, _react2.jsx)(_flex.EuiFlexGroup, {
     responsive: false,
-    justifyContent: stepsTotal > 1 ? 'spaceBetween' : 'flexEnd'
+    justifyContent: stepsTotal > 1 ? 'spaceBetween' : 'flexEnd',
+    alignItems: "center"
   }, stepsTotal > 1 && (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: false
   }, (0, _react2.jsx)("ul", {
@@ -149,9 +164,7 @@ var EuiTourStep = function EuiTourStep(_ref) {
       number: i + 1,
       status: status
     });
-  }))), footerAction ? (0, _react2.jsx)(_flex.EuiFlexItem, {
-    grow: false
-  }, footerAction) : (0, _react2.jsx)(_flex.EuiFlexItem, {
+  }))), footerAction ? optionalFooterAction : (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: false
   }, (0, _react2.jsx)(_i18n.EuiI18n, {
     tokens: ['euiTourStep.endTour', 'euiTourStep.skipTour', 'euiTourStep.closeTour'],

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) {

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

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.logicalShorthandCSS = exports.logicalBorderRadiusCSS = exports.LOGICAL_SHORTHANDS = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _logicals = _interopRequireDefault(require("./logicals.json"));
+
+/*
+ * 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 LOGICAL_SHORTHANDS = _logicals.default._shorthands;
+exports.LOGICAL_SHORTHANDS = LOGICAL_SHORTHANDS;
+
+/**
+ * Unfortunately, shorthand properties that describe boxes
+ * (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box)
+ * do not currently automatically respond to logical changes in display direction
+ * (@see https://github.com/w3c/csswg-drafts/issues/1282)
+ *
+ * This utility is essentially a stop-gap for those shorthand properties,
+ * converting them to corresponding longer logical `-inline` and `-block` properties
+ *
+ * 🗑 NOTE: This file is in a separate util file from logicals.ts due to its relatively
+ * convoluted logic, & to make deleting it easier when an official CSS spec is implemented.
+ */
+var logicalShorthandCSS = function logicalShorthandCSS(property, value) {
+  if (!LOGICAL_SHORTHANDS.includes(property)) {
+    throw new Error("".concat(property, " is not a shorthand property that needs logical CSS"));
+  }
+
+  if (property === 'border-radius') {
+    return logicalBorderRadiusCSS(String(value));
+  } // Split all potential values by spaces
+
+
+  var values = String(value).split(/\s+/);
+  var verticalBlockValue;
+  var horizontalInlineValue;
+
+  switch (values.length) {
+    case 1:
+      // If it's the same value all around, no need to use logical properties
+      return "".concat(property, ": ").concat(value, ";");
+
+    case 2:
+      verticalBlockValue = values[0];
+      horizontalInlineValue = values[1];
+      break;
+
+    case 3:
+      verticalBlockValue = "".concat(values[0], " ").concat(values[2]);
+      horizontalInlineValue = values[1];
+      break;
+
+    case 4:
+    default:
+      verticalBlockValue = "".concat(values[0], " ").concat(values[2]);
+      horizontalInlineValue = "".concat(values[3], " ").concat(values[1]); // Note: left (4th value) comes before right (2nd value)
+
+      break;
+  }
+
+  if (property.includes('border-')) {
+    // Border properties have a different naming syntax than margin/padding/etc
+    var borderProperty = property.split('-')[1];
+    return "\n    border-block-".concat(borderProperty, ": ").concat(verticalBlockValue, ";\n    border-inline-").concat(borderProperty, ": ").concat(horizontalInlineValue, ";\n    ");
+  } else {
+    return "\n    ".concat(property, "-block: ").concat(verticalBlockValue, ";\n    ").concat(property, "-inline: ").concat(horizontalInlineValue, ";\n    ");
+  }
+};
+/**
+ * Logical border radius is unfortunately a very special case as it handles corners
+ * and not sides (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#corners_of_a_box)
+ * and does not have `-inline` or `-block` shorthands.
+ *
+ * It also needs to account for `/` syntax (horizontal vs vertical radii)
+ * @see https://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/
+ */
+
+
+exports.logicalShorthandCSS = logicalShorthandCSS;
+
+var logicalBorderRadiusCSS = function logicalBorderRadiusCSS(value) {
+  var ignoreZeroes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var borderRadiusMap = {
+    'border-start-start-radius': '',
+    'border-start-end-radius': '',
+    'border-end-end-radius': '',
+    'border-end-start-radius': ''
+  };
+  var values = [];
+
+  if (value.includes('/')) {
+    values = ['', '', '', '']; // Split into horizontal & vertical radii strings
+
+    value.split('/').forEach(function (radiiAxes) {
+      var radii = radiiAxes.trim().split(/\s+/);
+      values.forEach(function (_, i) {
+        // Add a space between the horizontal and vertical radius
+        var combinedValue = values[i] ? "".concat(values[i], " ") : values[i];
+
+        switch (radii.length) {
+          case 1:
+            // Every value is repeated
+            combinedValue += radii[0];
+            break;
+
+          case 2:
+            // If the corner is an even index, give it the first value, if odd, second value
+            combinedValue += i % 2 ? radii[1] : radii[0];
+            break;
+
+          case 3:
+            // The last corner should repeat the second value
+            combinedValue += i === 3 ? radii[1] : radii[i];
+            break;
+
+          case 4:
+          default:
+            // Every value is specified
+            combinedValue += radii[i];
+        }
+
+        values[i] = combinedValue;
+      });
+    });
+  } else {
+    values = value.split(/\s+/);
+  }
+
+  switch (values.length) {
+    case 1:
+      // If it's the same value all around, no need to use logical properties
+      return "border-radius: ".concat(value, ";");
+
+    case 2:
+      borderRadiusMap['border-start-start-radius'] = values[0];
+      borderRadiusMap['border-start-end-radius'] = values[1];
+      borderRadiusMap['border-end-end-radius'] = values[0];
+      borderRadiusMap['border-end-start-radius'] = values[1];
+      break;
+
+    case 3:
+      borderRadiusMap['border-start-start-radius'] = values[0];
+      borderRadiusMap['border-start-end-radius'] = values[1];
+      borderRadiusMap['border-end-end-radius'] = values[2];
+      borderRadiusMap['border-end-start-radius'] = values[1];
+      break;
+
+    case 4:
+    default:
+      borderRadiusMap['border-start-start-radius'] = values[0];
+      borderRadiusMap['border-start-end-radius'] = values[1];
+      borderRadiusMap['border-end-end-radius'] = values[2];
+      borderRadiusMap['border-end-start-radius'] = values[3];
+      break;
+  }
+
+  var borderRadiusCSS = [];
+  Object.entries(borderRadiusMap).forEach(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+        property = _ref2[0],
+        value = _ref2[1];
+
+    if (value) {
+      if (ignoreZeroes && value !== '0' && value !== '0px' || !ignoreZeroes) {
+        borderRadiusCSS.push("".concat(property, ": ").concat(value, ";"));
+      }
+    }
+  });
+  return borderRadiusCSS.join('\n');
+};
+
+exports.logicalBorderRadiusCSS = logicalBorderRadiusCSS;