@elastic/eui 70.3.0 → 71.0.0

package/optimize/es/components/color_picker/color_stops/color_stops.js

@@ -453,25 +453,27 @@ export var EuiColorStops = function EuiColorStops(_ref) {
     compressed: compressed,
     disabled: disabled,
     step: 1
-  }, ___EmotionJSX(EuiRangeHighlight, {
-    className: "euiColorStops__highlight",
-    min: min || rangeMin,
-    max: max || rangeMax,
-    lowerValue: min || rangeMin,
-    upperValue: max || rangeMax,
-    background: gradient,
-    compressed: compressed
-  }), ___EmotionJSX("div", {
-    "data-test-subj": "euiColorStopsAdd",
-    className: classNames('euiColorStops__addContainer', {
-      'euiColorStops__addContainer-isDisabled': isHoverDisabled || disabled || readOnly
-    }),
-    onClick: handleAddClick,
-    onMouseMove: handleAddHover
-  }, ___EmotionJSX("div", {
-    className: "euiColorStops__addTarget",
-    style: {
-      left: "".concat(addTargetPosition, "%")
-    }
-  })), thumbs));
+  }, function (trackWidth) {
+    return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiRangeHighlight, {
+      className: "euiColorStops__highlight",
+      min: min || rangeMin,
+      max: max || rangeMax,
+      lowerValue: min || rangeMin,
+      upperValue: max || rangeMax,
+      background: gradient,
+      trackWidth: trackWidth
+    }), ___EmotionJSX("div", {
+      "data-test-subj": "euiColorStopsAdd",
+      className: classNames('euiColorStops__addContainer', {
+        'euiColorStops__addContainer-isDisabled': isHoverDisabled || disabled || readOnly
+      }),
+      onClick: handleAddClick,
+      onMouseMove: handleAddHover
+    }, ___EmotionJSX("div", {
+      className: "euiColorStops__addTarget",
+      style: {
+        left: "".concat(addTargetPosition, "%")
+      }
+    })), thumbs);
+  }));
 };

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

@@ -0,0 +1,102 @@
+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 { EuiComboBox } from './index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var ComboBox = function ComboBox() {
+  var _useState = useState([{
+    label: 'Titan',
+    'data-test-subj': 'titanOption'
+  }, {
+    label: 'Enceladus',
+    'data-test-subj': 'enceladusOption'
+  }, {
+    label: 'Mimas',
+    'data-test-subj': 'mimasOption'
+  }, {
+    label: 'Dione',
+    'data-test-subj': 'dioneOption'
+  }, {
+    label: 'Iapetus',
+    'data-test-subj': 'iapetusOption'
+  }, {
+    label: 'Phoebe',
+    'data-test-subj': 'phoebeOption'
+  }, {
+    label: 'Rhea',
+    'data-test-subj': 'rheaOption'
+  }, {
+    label: 'Tethys',
+    'data-test-subj': 'tethysOption'
+  }, {
+    label: 'Hyperion',
+    'data-test-subj': 'hyperionOption'
+  }]),
+      _useState2 = _slicedToArray(_useState, 1),
+      options = _useState2[0];
+
+  var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedOptions = _useState4[0],
+      setSelected = _useState4[1];
+
+  var onChange = function onChange(selectedOptions) {
+    setSelected(selectedOptions);
+  };
+
+  return ___EmotionJSX(EuiComboBox, {
+    "aria-label": "Accessible screen reader label",
+    placeholder: "Select options",
+    options: options,
+    selectedOptions: selectedOptions,
+    onChange: onChange,
+    isClearable: true,
+    isCaseSensitive: true
+  });
+};
+
+beforeEach(function () {
+  cy.realMount(___EmotionJSX(ComboBox, null));
+  cy.get('input[data-test-subj="comboBoxSearchInput"]').should('exist');
+});
+describe('EuiComboBox', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when the combobox is expanded', function () {
+      cy.get('input[data-test-subj="comboBoxSearchInput"]').realClick();
+      cy.get('button[data-test-subj="titanOption"]').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations after keyboard interaction', function () {
+      cy.realPress('Tab');
+      cy.get('input[data-test-subj="comboBoxSearchInput"]').should('have.focus');
+      cy.get('button[data-test-subj="titanOption"]').should('exist');
+      cy.repeatRealPress('ArrowDown');
+      cy.realPress('Enter');
+      cy.repeatRealPress('ArrowDown');
+      cy.realPress('Enter');
+      cy.repeatRealPress('ArrowDown');
+      cy.realPress('Enter');
+      cy.get('div[data-test-subj="comboBoxInput"]').find('span.euiBadge').should('have.length', 3);
+      cy.checkAxe(); // Close the listbox and interact with the Clear button
+
+      cy.realPress('Escape');
+      cy.realPress('Tab');
+      cy.get('button[data-test-subj="comboBoxClearButton"]').should('have.focus');
+      cy.realPress('Space');
+      cy.get('div[data-test-subj="comboBoxInput"]').find('span.euiBadge').should('have.length', 0);
+      cy.checkAxe();
+    });
+  });
+});

package/optimize/es/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -35,7 +35,7 @@ import { EuiLoadingSpinner } from '../../loading';
 import { EuiComboBoxTitle } from './combo_box_title';
 import { EuiI18n } from '../../i18n';
 import { EuiFilterSelectItem } from '../../filter_group/filter_select_item';
-import { EuiBadge } from '../../badge/';
+import { EuiBadge } from '../../badge';
 import { EuiPopoverPanel } from '../../popover/popover_panel';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var OPTION_CONTENT_CLASSNAME = 'euiComboBoxOption__content';

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

@@ -0,0 +1,133 @@
+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 { EuiButton } from '../button';
+import { EuiControlBar } from './control_bar';
+import { EuiPanel } from '../panel';
+import { EuiText } from '../text';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var ControlBar = function ControlBar() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      contentIsVisible = _useState2[0],
+      setVisibility = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isDisplaying = _useState4[0],
+      setDisplay = _useState4[1];
+
+  var toggleContent = function toggleContent() {
+    setVisibility(!contentIsVisible);
+  };
+
+  var toggleDisplay = function toggleDisplay() {
+    setDisplay(!isDisplaying);
+    setVisibility(false);
+  };
+
+  var codeControls = [{
+    controlType: 'icon',
+    id: 'root_icon',
+    iconType: 'submodule',
+    'aria-label': 'Project Root'
+  }, {
+    controlType: 'breadcrumbs',
+    id: 'current_file_path',
+    breadcrumbs: [{
+      text: 'src'
+    }, {
+      text: 'components'
+    }]
+  }, {
+    controlType: 'spacer'
+  }, {
+    controlType: 'icon',
+    id: 'status_icon',
+    iconType: 'alert',
+    color: 'warning',
+    'aria-label': 'Repo Status'
+  }, {
+    controlType: 'divider'
+  }, {
+    controlType: 'icon',
+    id: 'branch_icon',
+    iconType: 'branch',
+    'aria-label': 'Branch Icon'
+  }, {
+    controlType: 'text',
+    id: 'branch_name',
+    text: 'some_long_branch'
+  }, {
+    controlType: 'divider'
+  }, {
+    controlType: 'icon',
+    id: 'github_icon',
+    iconType: 'logoGithub',
+    onClick: function onClick() {},
+    title: 'Open in Github',
+    'aria-label': 'Open in Github'
+  }, {
+    controlType: 'divider'
+  }, {
+    controlType: 'button',
+    id: 'open_history_view',
+    label: contentIsVisible ? 'Hide history' : 'Show history',
+    color: 'primary',
+    onClick: toggleContent
+  }];
+  var display;
+
+  if (isDisplaying) {
+    display = ___EmotionJSX(EuiControlBar, {
+      controls: codeControls,
+      showContent: contentIsVisible
+    }, ___EmotionJSX("div", {
+      style: {
+        padding: '2rem',
+        maxWidth: '60rem',
+        margin: '0 auto'
+      }
+    }, ___EmotionJSX(EuiPanel, null, ___EmotionJSX(EuiText, null, ___EmotionJSX("h1", null, "1984"), ___EmotionJSX("h3", null, "By: George Orwell"), ___EmotionJSX("p", null, "It was a bright cold day in April, and the clocks were striking thirteen. Winston Smith, his chin nuzzled into his breast in an effort to escape the vile wind, slipped quickly through the glass doors of Victory Mansions, though not quickly enough to prevent a swirl of gritty dust from entering along with him."), ___EmotionJSX("p", null, "The hallway smelt of boiled cabbage and old rag mats. At one end of it a coloured poster, too large for indoor display, had been tacked to the wall. It depicted simply an enormous face, more than a metre wide: the face of a man of about forty-five, with a heavy black moustache and ruggedly handsome features. Winston made for the stairs. It was no use trying the lift. Even at the best of times it was seldom working, and at present the electric current was cut off during daylight hours. It was part of the economy drive in preparation for Hate Week. The flat was seven flights up, and Winston, who was thirty-nine and had a varicose ulcer above his right ankle, went slowly, resting several times on the way. On each landing, opposite the lift-shaft, the poster with the enormous face gazed from the wall. It was one of those pictures which are so contrived that the eyes follow you about when you move. BIG BROTHER IS WATCHING YOU, the caption beneath it ran."), ___EmotionJSX("p", null, "Inside the flat a fruity voice was reading out a list of figures which had something to do with the production of pig-iron. The voice came from an oblong metal plaque like a dulled mirror which formed part of the surface of the right-hand wall. Winston turned a switch and the voice sank somewhat, though the words were still distinguishable. The instrument (the telescreen, it was called) could be dimmed, but there was no way of shutting it off completely. He moved over to the window: a smallish, frail figure, the meagreness of his body merely emphasized by the blue overalls which were the uniform of the party. His hair was very fair, his face naturally sanguine, his skin roughened by coarse soap and blunt razor blades and the cold of the winter that had just ended.")))));
+  }
+
+  return ___EmotionJSX("div", null, ___EmotionJSX(EuiButton, {
+    onClick: toggleDisplay
+  }, "Toggle example"), display);
+};
+
+beforeEach(function () {
+  cy.viewport(1024, 768);
+  cy.mount(___EmotionJSX(ControlBar, null));
+  cy.get('section[aria-label="Page level controls"]').should('not.exist');
+});
+describe('EuiControlBar', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when control bar is shown', function () {
+      cy.get('button.euiButton').contains('Toggle example').realClick();
+      cy.get('section[aria-label="Page level controls"]').should('exist');
+      cy.checkAxe({
+        context: 'section[aria-label="Page level controls"]'
+      });
+    });
+    it('has zero violations when control bar is hidden', function () {
+      cy.get('button.euiButton').contains('Toggle example').realClick();
+      cy.get('section[aria-label="Page level controls"]').should('exist');
+      cy.get('button.euiButton').contains('Toggle example').realClick();
+      cy.get('section[aria-label="Page level controls"]').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

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

@@ -0,0 +1,63 @@
+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 { EuiButton } from '../button';
+import { EuiCopy } from './copy';
+import { EuiFormRow, EuiFieldText } from '../form';
+import { EuiSpacer } from '../spacer';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var Copy = function Copy() {
+  var _useState = useState('I am the text that will be copied'),
+      _useState2 = _slicedToArray(_useState, 2),
+      copyText = _useState2[0],
+      setCopyText = _useState2[1];
+
+  var onChange = function onChange(e) {
+    setCopyText(e.target.value);
+  };
+
+  return ___EmotionJSX("div", null, ___EmotionJSX(EuiFormRow, {
+    label: "Enter text that will be copied to clipboard"
+  }, ___EmotionJSX(EuiFieldText, {
+    value: copyText,
+    onChange: onChange
+  })), ___EmotionJSX(EuiSpacer, {
+    size: "m"
+  }), ___EmotionJSX(EuiCopy, {
+    textToCopy: copyText
+  }, function (copy) {
+    return ___EmotionJSX(EuiButton, {
+      onClick: copy,
+      "data-test-subj": "cy-copy-button"
+    }, "Click to copy input text");
+  }));
+};
+
+beforeEach(function () {
+  cy.realMount(___EmotionJSX(Copy, null));
+});
+describe('EuiCopy', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations after the copy button is clicked', function () {
+      cy.get('button[data-test-subj="cy-copy-button"]').realClick();
+      cy.checkAxe();
+    });
+    it('has zero violations after keyboard interaction', function () {
+      cy.repeatRealPress('Tab');
+      cy.realPress('Enter');
+      cy.checkAxe();
+    });
+  });
+});

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

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { logicalTextAlignCSS, euiBreakpoint } from '../../global_styling';
+import { logicalTextAlignCSS, euiMinBreakpoint } from '../../global_styling';
 export var euiDescriptionListStyles = function euiDescriptionListStyles(euiThemeContext) {
   // Flex display for column and responsive column
   var columnDisplay = "\n    display: flex;\n    align-items: baseline;\n    flex-wrap: wrap;  \n  ";
@@ -17,7 +17,7 @@ export var euiDescriptionListStyles = function euiDescriptionListStyles(euiTheme
     inline: /*#__PURE__*/css(";label:inline;"),
     column: /*#__PURE__*/css(columnDisplay, ";;label:column;"),
     // Responsive columns behave as a row on breakpoints xs-s
-    responsiveColumn: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    responsiveColumn: /*#__PURE__*/css(euiMinBreakpoint(euiThemeContext, 'm'), "{", columnDisplay, ";};label:responsiveColumn;"),
     // Alignment
     center: /*#__PURE__*/css(logicalTextAlignCSS('center'), ";;label:center;"),
     left: /*#__PURE__*/css(logicalTextAlignCSS('left'), ";;label:left;")

package/optimize/es/components/description_list/description_list_description.js

@@ -12,7 +12,7 @@ var _excluded = ["children", "className"];
  */
 import React, { useContext } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiTheme, useIsWithinMinBreakpoint } from '../../services';
 import { euiDescriptionListDescriptionStyles } from './description_list_description.styles';
 import { EuiDescriptionListContext } from './description_list_context'; // Export required for correct inference by HOCs
 
@@ -29,6 +29,7 @@ export var EuiDescriptionListDescription = function EuiDescriptionListDescriptio
       align = _useContext.align,
       gutterSize = _useContext.gutterSize;
 
+  var showResponsiveColumns = useIsWithinMinBreakpoint('m');
   var theme = useEuiTheme();
   var styles = euiDescriptionListDescriptionStyles(theme);
   var conditionalStyles = compressed && textStyle === 'reverse' ? [styles.fontStyles.compressed] : [styles.fontStyles[textStyle]];
@@ -44,7 +45,10 @@ export var EuiDescriptionListDescription = function EuiDescriptionListDescriptio
         conditionalStyles.push(styles.left);
       }
 
-      conditionalStyles.push(styles[gutterSize]);
+      if (type === 'column' || showResponsiveColumns) {
+        conditionalStyles.push(styles[gutterSize]);
+      }
+
       break;
   }
 

package/optimize/es/components/description_list/description_list_description.styles.js

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiFontSize, euiBreakpoint, logicalTextAlignCSS, logicalCSS } from '../../global_styling';
+import { euiFontSize, euiMaxBreakpoint, euiMinBreakpoint, logicalTextAlignCSS, logicalCSS } from '../../global_styling';
 import { euiTitle } from '../title/title.styles';
 
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -28,7 +28,7 @@ export var euiDescriptionListDescriptionStyles = function euiDescriptionListDesc
     // Types
     row: /*#__PURE__*/css(";label:row;"),
     column: /*#__PURE__*/css(columnDisplay, ";;label:column;"),
-    responsiveColumn: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['xs', 's']), "{", logicalCSS('width', '100%'), " padding:0;}", euiBreakpoint(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    responsiveColumn: /*#__PURE__*/css(euiMaxBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('width', '100%'), " padding:0;}", euiMinBreakpoint(euiThemeContext, 'm'), "{", columnDisplay, ";};label:responsiveColumn;"),
     inline: _ref,
     // This nested block handles just the font styling based on compressed and reverse
     fontStyles: {

package/optimize/es/components/description_list/description_list_title.styles.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiFontSize, euiTextBreakWord, logicalTextAlignCSS, euiBreakpoint, logicalCSS } from '../../global_styling';
+import { euiFontSize, euiTextBreakWord, logicalTextAlignCSS, euiMaxBreakpoint, euiMinBreakpoint, logicalCSS } from '../../global_styling';
 import { tint } from '../../services';
 import { euiTitle } from '../title/title.styles';
 export var euiDescriptionListTitleStyles = function euiDescriptionListTitleStyles(euiThemeContext) {
@@ -18,7 +18,7 @@ export var euiDescriptionListTitleStyles = function euiDescriptionListTitleStyle
     // Types
     row: /*#__PURE__*/css(";label:row;"),
     column: /*#__PURE__*/css(columnDisplay, ";;label:column;"),
-    responsiveColumn: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['xs', 's']), "{", logicalCSS('width', '100%'), " padding:0;}", euiBreakpoint(euiThemeContext, ['m', 'xl']), "{", columnDisplay, ";};label:responsiveColumn;"),
+    responsiveColumn: /*#__PURE__*/css(euiMaxBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('width', '100%'), " padding:0;}", euiMinBreakpoint(euiThemeContext, 'm'), "{", columnDisplay, ";};label:responsiveColumn;"),
     inline: /*#__PURE__*/css("display:inline;border-radius:", euiTheme.border.radius.small, ";font-weight:", euiTheme.font.weight.medium, ";background-color:", colorMode === 'DARK' ? tint(euiTheme.colors.lightestShade, 0.5) : euiTheme.colors.lightestShade, ";", logicalCSS('margin-vertical', '0'), " ", logicalCSS('margin-horizontal', euiTheme.size.xs), "&:first-of-type{", logicalCSS('margin-left', '0'), ";};label:inline;"),
     // This nested block handles just the font styling based on compressed and reverse
     fontStyles: {

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

@@ -0,0 +1,104 @@
+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 { EuiDragDropContext } from './drag_drop_context';
+import { euiDragDropReorder } from './services';
+import { EuiDraggable } from './draggable';
+import { EuiDroppable } from './droppable';
+import { EuiPanel } from '../panel';
+import { htmlIdGenerator } from '../../services';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var makeId = htmlIdGenerator();
+
+var makeList = function makeList(number) {
+  var start = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+  return Array.from({
+    length: number
+  }, function (v, k) {
+    return k + start;
+  }).map(function (el) {
+    return {
+      content: "Item ".concat(el),
+      id: makeId()
+    };
+  });
+};
+
+var DragAndDrop = function DragAndDrop() {
+  var _useState = useState(makeList(3)),
+      _useState2 = _slicedToArray(_useState, 2),
+      list = _useState2[0],
+      setList = _useState2[1];
+
+  console.log(list);
+
+  var onDragEnd = function onDragEnd(_ref) {
+    var source = _ref.source,
+        destination = _ref.destination;
+
+    if (source && destination) {
+      var items = euiDragDropReorder(list, source.index, destination.index);
+      setList(items);
+    }
+  };
+
+  return ___EmotionJSX(EuiDragDropContext, {
+    onDragEnd: onDragEnd
+  }, ___EmotionJSX(EuiDroppable, {
+    droppableId: "DROPPABLE_AREA",
+    spacing: "m",
+    withPanel: true
+  }, list.map(function (_ref2, idx) {
+    var content = _ref2.content,
+        id = _ref2.id;
+    return ___EmotionJSX(EuiDraggable, {
+      spacing: "m",
+      key: id,
+      index: idx,
+      draggableId: id,
+      "data-test-subj": "cy-draggable-".concat(idx)
+    }, function (provided, state) {
+      return ___EmotionJSX(EuiPanel, {
+        hasShadow: state.isDragging
+      }, content, state.isDragging && ' ✨');
+    });
+  })));
+};
+
+beforeEach(function () {
+  cy.realMount(___EmotionJSX(DragAndDrop, null));
+});
+describe('EuiControlBar', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when an item is in draggable state', function () {
+      cy.repeatRealPress('Tab');
+      cy.realPress('Space');
+      cy.get('div[data-test-subj="cy-draggable-1"]').should('have.focus');
+      cy.checkAxe();
+    });
+    it('has zero violations when an item has been reordered and dropped', function () {
+      cy.repeatRealPress('Tab');
+      cy.realPress('Space');
+      cy.get('div[data-test-subj="cy-draggable-1"]').should('have.focus');
+      cy.realPress('ArrowDown');
+      cy.realPress('Space');
+      cy.get('div[data-test-subj="cy-draggable-2"]').should('have.focus');
+      cy.realPress('Space');
+      cy.repeatRealPress('ArrowUp');
+      cy.realPress('Space');
+      cy.get('div[data-test-subj="cy-draggable-0"]').should('have.focus');
+      cy.checkAxe();
+    });
+  });
+});

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

@@ -10,7 +10,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiFontSize, logicalCSS, logicalTextAlignCSS, euiTextBreakWord, euiTextTruncate, mathWithUnits } from '../../global_styling';
+import { euiFontSize, logicalCSS, logicalShorthandCSS, logicalTextAlignCSS, euiTextBreakWord, euiTextTruncate, mathWithUnits } from '../../global_styling';
 import { transparentize } from '../../services/color';
 
 var _colorCSS = function _colorCSS(color) {
@@ -20,9 +20,9 @@ var _colorCSS = function _colorCSS(color) {
 export var euiExpressionStyles = function euiExpressionStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiExpression: /*#__PURE__*/css(euiTextBreakWord(), ";display:inline-block;font-family:", euiTheme.font.familyCode, ";", logicalCSS('border-bottom', "".concat(euiTheme.border.width.thick, " solid transparent")), " ", euiFontSize(euiThemeContext, 's'), ";", logicalTextAlignCSS('left'), " padding:", mathWithUnits(euiTheme.size.s, function (x) {
+    euiExpression: /*#__PURE__*/css(euiTextBreakWord(), ";display:inline-block;font-family:", euiTheme.font.familyCode, ";", logicalCSS('border-bottom', "".concat(euiTheme.border.width.thick, " solid transparent")), " ", euiFontSize(euiThemeContext, 's'), ";", logicalTextAlignCSS('left'), " ", logicalShorthandCSS('padding', "".concat(mathWithUnits(euiTheme.size.s, function (x) {
       return x / 2;
-    }), " 0;color:", euiTheme.colors.text, ";&:focus{", logicalCSS('border-bottom-style', 'solid'), ";}&+.euiExpression{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
+    }), " 0")), " color:", euiTheme.colors.text, ";&:focus{", logicalCSS('border-bottom-style', 'solid'), ";}&+.euiExpression{", logicalCSS('margin-left', euiTheme.size.s), ";};label:euiExpression;"),
     // Variants
     columns: /*#__PURE__*/css("border-color:transparent;", logicalCSS('border-bottom-style', 'solid'), " ", logicalCSS('margin-bottom', euiTheme.size.xs), " ", logicalCSS('width', '100%'), " display:flex;padding:", euiTheme.size.xs, ";border-radius:", euiTheme.size.xs, ";;label:columns;"),
     truncate: /*#__PURE__*/css(logicalCSS('max-width', '100%'), ";;label:truncate;"),

package/optimize/es/components/flex/flex_grid.styles.js

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiBreakpoint } from '../../global_styling';
+import { euiMaxBreakpoint } from '../../global_styling';
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "nq5j9u-baseline",
@@ -108,7 +108,7 @@ export var euiFlexGridStyles = function euiFlexGridStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiFlexGrid: _ref10,
-    responsive: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['xs', 's']), "{grid-template-columns:repeat(1, 1fr);grid-auto-flow:row;};label:responsive;"),
+    responsive: /*#__PURE__*/css(euiMaxBreakpoint(euiThemeContext, 'm'), "{grid-template-columns:repeat(1, 1fr);grid-auto-flow:row;};label:responsive;"),
     direction: {
       row: /*#__PURE__*/css(";label:row;"),
       column: /*#__PURE__*/css("grid-auto-flow:column;grid-template-rows:repeat(", gridTemplateRows, ", 1fr);;label:column;")

package/optimize/es/components/flex/flex_group.styles.js

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
-import { euiBreakpoint, logicalCSS } from '../../global_styling';
+import { euiMaxBreakpoint, logicalCSS } from '../../global_styling';
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "n4hdkg-columnReverse",
@@ -167,7 +167,7 @@ export var euiFlexGroupStyles = function euiFlexGroupStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiFlexGroup: _ref17,
-    responsive: /*#__PURE__*/css(euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;&>.euiFlexItem{", logicalCSS('width', '100%'), " flex-basis:100%;}};label:responsive;"),
+    responsive: /*#__PURE__*/css(euiMaxBreakpoint(euiThemeContext, 'm'), "{flex-wrap:wrap;&>.euiFlexItem{", logicalCSS('width', '100%'), " flex-basis:100%;}};label:responsive;"),
     wrap: _ref16,
     gutterSizes: {
       none: /*#__PURE__*/css(";label:none;"),