@elastic/eui 77.1.0 → 77.2.0

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

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _form = require("../form");
+var _suggest = require("./suggest");
+var _react2 = require("@emotion/react");
+/*
+ * 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" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
+
+var Suggest = function Suggest() {
+  var suggestedItems = [{
+    type: {
+      iconType: 'accessibility',
+      color: 'tint1'
+    },
+    label: 'Accessibility',
+    description: 'A short description'
+  }, {
+    type: {
+      iconType: 'image',
+      color: 'tint2'
+    },
+    label: 'Images',
+    description: 'Another short description'
+  }, {
+    type: {
+      iconType: 'lock',
+      color: 'tint3'
+    },
+    label: 'Locks',
+    description: 'A third short description'
+  }];
+  return (0, _react2.jsx)(_form.EuiFormRow, {
+    label: "Suggest a topic",
+    id: "cy-label-suggest-1"
+  }, (0, _react2.jsx)(_suggest.EuiSuggest, {
+    "aria-labelledby": "cy-label-suggest-1-label",
+    suggestions: suggestedItems
+  }));
+};
+describe('EuiSuggest', function () {
+  beforeEach(function () {
+    cy.realMount((0, _react2.jsx)(Suggest, null));
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations when rendered', function () {
+      cy.checkAxe();
+    });
+  });
+  describe('Keyboard accessibility', function () {
+    it('has zero violations after traversing list items', function () {
+      cy.realPress('Tab');
+      cy.get('#cy-label-suggest-1').should('have.focus');
+      cy.get('ul[role="listbox"]').should('exist');
+      cy.realPress('ArrowDown');
+      cy.realPress('ArrowUp');
+      cy.realPress('ArrowRight');
+      cy.realPress('ArrowLeft');
+      cy.get('li[role="option"]').first().should('have.attr', 'aria-selected', 'true');
+      cy.checkAxe();
+    });
+  });
+});

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

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _ = require(".");
+var _react2 = require("@emotion/react");
+/*
+ * 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" />
+/// <reference types="cypress-real-events" />
+/// <reference types="../../../cypress/support" />
+
+var users = [{
+  id: '47936',
+  firstName: 'Robert',
+  lastName: 'Stein',
+  github: 'steiner_rob',
+  location: {
+    city: 'Los Angeles',
+    state: 'CA'
+  }
+}, {
+  id: '54736',
+  firstName: 'Martina',
+  lastName: 'Conlon',
+  github: 'martina_zen',
+  location: {
+    city: 'Boston',
+    state: 'MA'
+  }
+}, {
+  id: '40193',
+  firstName: 'Alyce',
+  lastName: 'Benning',
+  github: 'alyce_benning',
+  location: {
+    city: 'Atlanta',
+    state: 'GA'
+  }
+}];
+var userRows = users.map(function (user) {
+  var id = user.id,
+    firstName = user.firstName,
+    lastName = user.lastName,
+    github = user.github,
+    _user$location = user.location,
+    city = _user$location.city,
+    state = _user$location.state;
+  return (0, _react2.jsx)(_.EuiTableRow, {
+    key: id
+  }, (0, _react2.jsx)(_.EuiTableRowCell, null, "".concat(firstName, " ").concat(lastName)), (0, _react2.jsx)(_.EuiTableRowCell, null, github), (0, _react2.jsx)(_.EuiTableRowCell, null, "".concat(city, ", ").concat(state)));
+});
+var customColumns = ['Name', 'Github', 'Location'];
+var columnHeaders = customColumns.map(function (column, i) {
+  return (0, _react2.jsx)(_.EuiTableHeaderCell, {
+    key: i
+  }, column);
+});
+var CustomTable = function CustomTable() {
+  return (0, _react2.jsx)(_.EuiTable, null, (0, _react2.jsx)(_.EuiTableHeader, null, columnHeaders), (0, _react2.jsx)(_.EuiTableBody, null, userRows));
+};
+describe('EuiTable', function () {
+  beforeEach(function () {
+    cy.viewport(1024, 768); // medium breakpoint
+    cy.realMount((0, _react2.jsx)(CustomTable, null));
+  });
+  describe('Automated accessibility check', function () {
+    it('has zero violations on render', function () {
+      cy.checkAxe();
+    });
+  });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "77.1.0",
+  "version": "77.2.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/src/components/date_picker/_date_picker_range.scss

@@ -1,65 +1,5 @@
-/**
- * 1. Account for inner box-shadow style border
- */
-
 .euiDatePickerRange {
-  @include euiFormControlSize(auto, $includeAlternates: true);
-  // Match just the regular drop shadow of inputs
-  @include euiFormControlDefaultShadow;
-  display: flex;
-  align-items: center;
-  padding: 1px; /* 1 */
-
-  // Allow any child to fill entire range container
-  > * {
-    flex-grow: 1;
-  }
-
   .euiFieldText.euiDatePicker {
     height: $euiFormControlLayoutGroupInputHeight;
-    // including all states
-    box-shadow: none !important; // stylelint-disable-line declaration-no-important
-    text-align: center;
-  }
-
-  .euiDatePickerRange__start {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .euiDatePickerRange__end {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .react-datepicker-popper .euiFieldText.euiDatePicker {
-    // set any subsequent children in popper back to left align
-    text-align: left;
-  }
-
-  // Necessary for EuiSuperDatePicker
-  &--inGroup {
-    box-shadow: none;
-    padding: 0;
   }
 }
-
-.euiDatePickerRange--isDisabled {
-  background: $euiFormBackgroundDisabledColor;
-}
-
-.euiDatePickerRange--readOnly {
-  background: $euiFormBackgroundReadOnlyColor;
-}
-
-.euiDatePickerRange__delimeter {
-  align-self: stretch;
-  height: auto;
-  flex-grow: 0;
-  display: flex;
-  align-items: center;
-}
-
-.euiDatePickerRange--isInvalid:not(.euiDatePickerRange--isDisabled):not(.euiDatePickerRange--readOnly) .euiDatePickerRange__delimeter {
-  @include euiFormControlInvalidStyle;
-}

package/src/components/date_picker/super_date_picker/_super_date_picker.scss

@@ -38,22 +38,17 @@
   max-width: 100% !important;
 
   > .euiFormControlLayout__childrenWrapper {
-    flex: 1 1 100%;
+    display: flex;
+    align-items: center;
     overflow: hidden;
+    background-color: $euiFormBackgroundColor;
 
-    > .euiDatePickerRange {
-      max-width: none;
-      width: auto;
+    &:last-child {
       border-radius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0;
     }
 
-    &:not(:last-child) > .euiDatePickerRange {
-      &,
-      .euiDatePopoverButton--end,
-      .euiSuperDatePicker__prettyFormat {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
+    & > .euiFormControlLayoutDelimited__input {
+      flex-grow: 1;
     }
   }
 }
@@ -75,3 +70,20 @@
     cursor: not-allowed;
   }
 }
+
+/**
+* Make the arrow delimiter match the colors of `.euiDatePopoverButton-needsUpdating`
+*/
+.euiSuperDatePicker--needsUpdating.euiFormControlLayoutDelimited { // Extra specificity needed to override default delimited styles
+  .euiFormControlLayout__childrenWrapper {
+    background-color: $euiSuperDatePickerNeedsUpdatingBackgroundColor;
+  }
+
+  .euiFormControlLayoutDelimited__delimiter {
+    color: $euiSuperDatePickerNeedsUpdatingTextColor;
+  }
+}
+
+.euiSuperDatePicker .euiFormControlLayout__childrenWrapper {
+  transition: background $euiAnimSpeedFast ease-in; // Match @mixin euiSuperDatePickerText / .euiDatePopoverButton
+}

package/src/components/date_picker/super_date_picker/_variables.scss

@@ -1,2 +1,5 @@
 $euiSuperDatePickerWidth: $euiSize * 30;
 $euiSuperDatePickerButtonWidth: $euiButtonMinWidth + ($euiSizeXS * 1.5);
+
+$euiSuperDatePickerNeedsUpdatingBackgroundColor: tintOrShade($euiColorSuccess, 90%, 70%);
+$euiSuperDatePickerNeedsUpdatingTextColor: makeHighContrastColor($euiColorSuccess, $euiSuperDatePickerNeedsUpdatingBackgroundColor);

package/src/components/date_picker/super_date_picker/date_popover/_date_popover_button.scss

@@ -13,11 +13,8 @@
   }
 
   &-needsUpdating {
-    $backgroundColor: tintOrShade($euiColorSuccess, 90%, 70%);
-    $textColor: makeHighContrastColor($euiColorSuccess, $backgroundColor);
-
-    background-color: $backgroundColor;
-    color: $textColor;
+    background-color: $euiSuperDatePickerNeedsUpdatingBackgroundColor;
+    color: $euiSuperDatePickerNeedsUpdatingTextColor;
 
     &:focus,
     &.euiDatePopoverButton-isSelected {
@@ -38,15 +35,16 @@
 
   &:disabled {
     background-color: $euiFormBackgroundDisabledColor;
+    background-image: none;
     color: $euiColorDarkShade;
     cursor: default;
   }
 }
 
 .euiDatePopoverButton--start {
-  text-align: right;
+  text-align: center;
 }
 
 .euiDatePopoverButton--end {
-  text-align: left;
+  text-align: center;
 }

package/src/components/form/form_control_layout/_form_control_layout.scss

@@ -128,7 +128,7 @@
   // TEXT
 
   .euiFormLabel,
-  .euiText {
+  .euiText:not(.euiFormControlLayoutDelimited__delimiter) {
     background-color: $euiFormInputGroupLabelBackground;
     padding: $euiFormControlPadding;
     line-height: $euiSize !important;
@@ -171,7 +171,7 @@
 
     // Padding
     .euiFormLabel,
-    .euiText {
+    .euiText:not(.euiFormControlLayoutDelimited__delimiter) {
       padding: $euiFormControlCompressedPadding;
 
       // If the next sibling is not the input, pull it closer to the text to reduce space

package/src/components/form/form_control_layout/_form_control_layout_delimited.scss

@@ -5,37 +5,22 @@
   align-items: stretch;
   padding: 1px; /* 1 */
 
-  .euiFormControlLayoutDelimited__delimeter {
-    background-color: $euiFormBackgroundColor;
-  }
-
   > .euiFormControlLayout__childrenWrapper {
     display: flex;
     align-items: center;
     width: 100%;
+    background-color: $euiFormBackgroundColor;
   }
 
   // Target when the euiFormControlLayout is compressed without specifying the full class name in case it ever changes
   &[class*='--compressed'] {
     @include euiFormControlDefaultShadow($borderOnly: true);
     border-radius: $euiBorderRadius / 2;
-
-    .euiFormControlLayoutDelimited__input {
-      height: 100%;
-      max-width: none;
-      padding-left: $euiFormControlCompressedPadding;
-      padding-right: $euiFormControlCompressedPadding;
-    }
-
-    .euiFormControlLayoutIcons {
-      padding-left: $euiFormControlCompressedPadding;
-      padding-right: $euiFormControlCompressedPadding;
-    }
   }
 
   // Target when the euiFormControlLayout is fullWidth without specifying the full class name in case it ever changes
   &[class*='--fullWidth'] .euiFormControlLayout__childrenWrapper,
-  &[class*='--fullWidth'] input {
+  &[class*='--fullWidth'] .euiFormControlLayout__childrenWrapper > *:not(.euiFormControlLayoutDelimited__delimiter):not(.euiFormControlLayoutIcons) {
     width: 100%;
     max-width: none;
   }
@@ -44,7 +29,7 @@
   &[class*='-isDisabled'] {
     @include euiFormControlDisabledStyle;
 
-    .euiFormControlLayoutDelimited__delimeter {
+    .euiFormControlLayout__childrenWrapper {
       background-color: $euiFormBackgroundDisabledColor;
     }
   }
@@ -53,22 +38,13 @@
   &[class*='--readOnly'] {
     @include euiFormControlReadOnlyStyle;
 
-    input,
-    .euiFormControlLayoutDelimited__delimeter {
+    .euiFormControlLayout__childrenWrapper {
       background-color: $euiFormBackgroundReadOnlyColor;
     }
   }
 
-  .euiFormControlLayoutIcons {
-    // Absolutely positioning the icons doesn't work because they
-    // overlay only one of controls making the layout unbalanced
-    position: static; // Overrider absolute
-    padding-left: $euiFormControlPadding;
-    padding-right: $euiFormControlPadding;
-
-    &:not(.euiFormControlLayoutIcons--right) {
-      order: -1;
-    }
+  &--isInvalid .euiFormControlLayout__childrenWrapper {
+    @include euiFormControlInvalidStyle;
   }
 }
 
@@ -82,10 +58,10 @@
   min-width: 0; // Fixes FF
 }
 
-.euiFormControlLayoutDelimited__delimeter {
-  // stylelint-disable-next-line declaration-no-important
-  line-height: 1 !important; // Override EuiText line-height
-  flex: 0 0 auto;
-  padding-left: $euiFormControlPadding / 2;
-  padding-right: $euiFormControlPadding / 2;
+.euiFormControlLayoutDelimited__delimiter {
+  align-self: stretch;
+  flex-grow: 0;
+  display: flex;
+  align-items: center;
+  line-height: 1; // Override EuiText line-height
 }

package/src/components/form/form_control_layout/_form_control_layout_icons.scss

@@ -1,9 +1,5 @@
 .euiFormControlLayoutIcons {
   pointer-events: none;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: $euiFormControlPadding;
   display: flex;
   align-items: center;
 
@@ -11,9 +7,34 @@
     margin-left: $euiFormControlPadding / 2;
   }
 
-  .euiFormControlLayout--compressed & {
-    left: $euiFormControlCompressedPadding;
+  &--absolute {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: $euiFormControlPadding;
+
+    .euiFormControlLayout--compressed & {
+      left: $euiFormControlCompressedPadding;
+    }
   }
+
+  &--static {
+    // Absolutely positioning the icons sometimes doesn't work -
+    // in the case of delimited inputs, they overlay only one of controls making the layout unbalanced
+    position: static;
+    height: 100%;
+    align-self: stretch;
+    flex-grow: 0;
+    padding-inline: $euiFormControlPadding;
+
+    .euiFormControlLayout--compressed & {
+      padding-inline: $euiFormControlCompressedPadding;
+    }
+  }
+}
+
+.euiFormControlLayoutIcons--left {
+  z-index: 1; // Ensure the icon is visible above sibling inputs
 }
 
 .euiFormControlLayoutIcons--right {

package/src/themes/amsterdam/overrides/_date_picker.scss

@@ -8,20 +8,6 @@
   }
 }
 
-.euiDatePickerRange {
-  border-radius: $euiFormControlBorderRadius;
-}
-
 .euiDatePicker.euiDatePicker--shadow.euiDatePicker--inline .react-datepicker {
   border: none;
 }
-
-.euiSuperDatePicker__prettyFormat {
-  border-top-right-radius: $euiFormControlBorderRadius;
-  border-bottom-right-radius: $euiFormControlBorderRadius;
-}
-
-.euiFormControlLayout--compressed.euiSuperDatePicker .euiSuperDatePicker__prettyFormat {
-  border-top-right-radius: $euiFormControlCompressedBorderRadius;
-  border-bottom-right-radius: $euiFormControlCompressedBorderRadius;
-}

package/src/themes/amsterdam/overrides/_index.scss

@@ -1,7 +1,6 @@
 @import 'combo_box';
 @import 'data_grid';
 @import 'date_picker';
-@import 'date_popover_button';
 @import 'description_list';
 @import 'filter_group';
 @import 'form_control_layout';