@elastic/eui 70.4.0 → 71.1.0

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_side_bar/page_side_bar.js

@@ -20,6 +20,9 @@ var paddingSizeToClassNameMap = {
   l: 'euiPageSideBar--paddingLarge'
 };
 export var PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
+/**
+ * @deprecated Use the new EuiPageSidebarProps in page/page_sidebar instead
+ */
 
 /**
  * @deprecated Use the new EuiPageSidebar in page/page_sidebar instead

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

@@ -11,7 +11,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 import { css } from '@emotion/react';
 import chroma from 'chroma-js';
-import { logicalCSS, logicalSizeCSS } from '../../global_styling';
+import { logicalCSS, logicalSizeCSS, mathWithUnits } from '../../global_styling';
 import { euiPaletteColorBlind, euiPaletteColorBlindBehindText, makeHighContrastColor, isColorDark, tint, shade } from '../../services';
 var visColors = euiPaletteColorBlind();
 var visColorsBehindText = euiPaletteColorBlindBehindText();
@@ -58,7 +58,9 @@ export var euiTokenStyles = function euiTokenStyles(_ref2, fill) {
     square: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";;label:square;"),
     rectangle: /*#__PURE__*/css("box-sizing:content-box;border-radius:", euiTheme.border.radius.small, ";;label:rectangle;"),
     // Sizes
-    xs: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.s, euiTheme.size.s), ";&[class*='-square']{border-radius:calc(", euiTheme.border.radius.small, " / 2);}&[class*='-rectangle']{", logicalCSS('padding-vertical', '1px'), ";", logicalCSS('padding-horizontal', euiTheme.size.xs), ";border-radius:calc(", euiTheme.border.radius.small, " / 2);};label:xs;"),
+    xs: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.s, euiTheme.size.s), ";&[class*='-square'],&[class*='-rectangle']{border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
+      return x / 2;
+    }), ";}&[class*='-rectangle']{", logicalCSS('padding-vertical', '1px'), ";", logicalCSS('padding-horizontal', euiTheme.size.xs), ";};label:xs;"),
     s: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.base, euiTheme.size.base), ";&[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.xs), ";};label:s;"),
     m: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.l, euiTheme.size.l), ";&[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.s), ";};label:m;"),
     l: /*#__PURE__*/css(logicalSizeCSS(euiTheme.size.xl, euiTheme.size.xl), ";&[class*='-rectangle']{", logicalCSS('padding-horizontal', euiTheme.size.s), ";};label:l;"),

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

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

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

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 export * from './logicals';
+export * from './logical_shorthands';
 export * from './math';
 export * from './size';
 export * from './typography';

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

@@ -0,0 +1,169 @@
+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.
+ */
+import LOGICALS from './logicals.json';
+var LOGICAL_SHORTHANDS = LOGICALS._shorthands;
+export { 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.
+ */
+export 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/
+ */
+
+export 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 = _slicedToArray(_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');
+};