@elastic/eui 91.0.0 → 91.1.0

package/src/components/datagrid/_data_grid_data_row.scss

@@ -3,15 +3,23 @@
 }
 
 @include euiDataGridRowCell {
-  @include euiFontSizeS;
-
-  padding: $euiDataGridCellPaddingM;
+  position: relative; // Needed for .euiDataGridRowCell__actions
   border-right: $euiDataGridVerticalBorder;
   border-bottom: $euiBorderThin;
-  overflow: hidden;
+
+  .euiDataGridRowCell__content {
+    @include euiFontSizeS;
+    padding: $euiDataGridCellPaddingM;
+    height: 100%;
+    overflow: hidden;
+
+    &--autoHeight {
+      height: auto;
+    }
+  }
 
   // Hack to allow focus trap to still stretch to full row height on defined heights
-  > * {
+  > [data-focus-lock-disabled] {
     height: 100%;
   }
 
@@ -23,39 +31,46 @@
     border-right-color: $euiBorderColor;
   }
 
-  &:focus {
-    position: relative;
+  --euiDataGridCellOutlineColor: #{$euiColorPrimary};
+
+  &:hover,
+  &:focus,
+  &.euiDataGridRowCell--open {
     @include euiDataGridCellFocus;
   }
 
-  // Only add the transition effect on hover, so that it is instantaneous on focus
-  // Long delays on hover to mitigate the accordion effect
-  &:hover {
-    .euiDataGridRowCell__actionButtonIcon {
-      animation-duration: $euiAnimSpeedExtraFast;
-      animation-name: euiDataGridCellActionsSlideIn;
-      animation-iteration-count: 1;
-      animation-delay: $euiAnimSpeedNormal;
-      animation-fill-mode: forwards;
+  // On hover
+  &:hover:not(:focus, :focus-within, .euiDataGridRowCell--open) {
+    // Color the actions and focus ring grayscale on hover
+    // (Actions look odd without the ring on grids without cell borders)
+    --euiDataGridCellOutlineColor: #{$euiColorDarkShade};
+
+    .euiDataGridRowCell__actions {
+      // Delay the actions showing on hover
+      // (Note: the focus ring show instantly on hover & the actions show instantly on focus)
+      animation-delay: $euiAnimSpeedSlow;
     }
   }
 
-  // On focus, directly show action buttons (without animation)
+  // On hover & focus, show cell action buttons
+  &:hover,
   &:focus,
-  // Prevent the animation from flickering after cell popover close when focus is restored the expansion button
   &:focus-within,
   // Always make the cell actions visible when the cell popover is open
-  &.euiDataGridRowCell--open {
-    .euiDataGridRowCell__actionButtonIcon {
-      animation: none;
-      margin-left: $euiDataGridCellPaddingM;
-      width: $euiSizeM;
+  &.euiDataGridRowCell--open,
+  // Prevents the animation from replaying when keyboard focus is moved from the popover back to the cell
+  &[data-keyboard-closing] {
+    .euiDataGridRowCell__actions {
+      animation-duration: $euiAnimSpeedExtraFast;
+      animation-name: euiDataGridCellActionsSlideIn;
+      animation-iteration-count: 1;
+      animation-fill-mode: forwards;
     }
   }
 
   // if a cell is not hovered nor focused nor open via popover, don't show buttons in general
-  &:not(:hover):not(:focus):not(.euiDataGridRowCell--open) {
-    .euiDataGridRowCell__actionButtonIcon {
+  &:not(:hover):not(:focus):not(.euiDataGridRowCell--open):not([data-keyboard-closing]) {
+    .euiDataGridRowCell__actions {
       display: none;
     }
   }
@@ -84,94 +99,123 @@
 .euiDataGridRowCell__popover {
   @include euiScrollBar;
   overflow: auto;
-  // stylelint-disable declaration-no-important
-  max-width: 400px !important;
-  max-height: 400px !important;
-  z-index: $euiZDataGridCellPopover !important;
-  // stylelint-enable declaration-no-important
+  z-index: $euiZDataGridCellPopover !important; // stylelint-disable-line declaration-no-important
   // Workaround for a Safari CSS bug when using both `overflow: auto` & `filter: drop-shadow`
   // (see https://github.com/elastic/eui/issues/6151)
   // Disables the default EuiPopover filter drop-shadow and uses box-shadow instead,
   // since we don't use the popover arrow in any case for cell popovers
   filter: none;
   @include euiBottomShadow; // TODO: Convert to euiShadowMedium() in Emotion
-}
 
-.euiDataGridRowCell__contentWrapper {
-  position: relative; // Needed for .euiDataGridRowCell__actions--overlay
-  height: 100%;
+  // For some reason, the normal popover opacity transition doesn't work for datagrid popovers
+  // so we'll force it via an animation. If we don't, cells constrained by the inline max-width
+  // style that we set will see a flash of unwanted content before repositioning
+  animation-duration: $euiAnimSpeedNormal;
+  animation-name: euiDataGridCellPopover;
 }
 
-.euiDataGridRowCell__defaultHeight {
+.euiDataGridRowCell--controlColumn .euiDataGridRowCell__content {
+  max-height: 100%;
+  height: auto;
   display: flex;
-  align-items: baseline;
-  max-width: 100%;
-
-  .euiDataGridRowCell__content {
-    flex-grow: 1;
-  }
+  align-items: center;
+}
 
-  .euiDataGridRowCell__actions {
-    flex-grow: 0;
-  }
+// Positioning for cell actions & the cell expansion popover
+.euiDataGridRowCell__actions,
+.euiDataGridRowCell__actions + [data-euiportal] > .euiPopover {
+  position: absolute;
+  bottom: 100%;
 
-  .euiDataGridRowCell--controlColumn & {
-    height: 100%;
-    align-items: center;
+  .euiDataGridRowCell--alignLeft & {
+    left: 0;
   }
-}
 
-.euiDataGridRowCell__numericalHeight {
-  // Without this rule, popover anchors content that overflows off the page
-  [data-euiportal],
-  .euiPopover {
-    height: 100%;
+  .euiDataGridRowCell--alignRight & {
+    right: 0;
   }
 }
 
-// Cell actions
 .euiDataGridRowCell__actions {
+  z-index: $euiZDataGridCellPopover - 2; // Sit below sticky column headers
+  margin-bottom: -$euiBorderWidthThin; // Vertical alignment
   display: flex;
+  gap: $euiSizeXS / 2;
+  padding-inline: $euiSizeXS / 2;
+  background-color: var(--euiDataGridCellOutlineColor);
+  color: $euiColorEmptyShade;
+  border: $euiBorderWidthThin solid var(--euiDataGridCellOutlineColor);
+  border-top-left-radius: $euiBorderRadius / 2;
+  border-top-right-radius: $euiBorderRadius / 2;
+  transform: scaleY(0);
+  transform-origin: bottom;
+
+  // The first row of cell actions need to be visible above the cell headers,
+  // but other cell actions that scroll past the sticky headers should not
+  .euiDataGridRowCell[data-gridcell-visible-row-index='0'] > & {
+    z-index: $euiZDataGridCellPopover - 1;
+  }
+
+  .euiDataGridRowCell--alignLeft & {
+    border-bottom-right-radius: $euiBorderRadius / 2;
+  }
 
-  &--overlay {
+  .euiDataGridRowCell--alignRight & {
+    border-bottom-left-radius: $euiBorderRadius / 2;
+  }
+
+  // Visual trickery - fill in the gap between the cell outline border-radius & the actions
+  &::after {
+    content: '';
     position: absolute;
-    right: 0;
-    top: 0;
-    padding: $euiDataGridCellPaddingM 0;
-    background-color: $euiColorEmptyShade;
+    top: 100%;
+    height: $euiBorderWidthThick;
+    width: $euiBorderWidthThick;
+    background-color: var(--euiDataGridCellOutlineColor);
+
+    .euiDataGridRowCell--alignLeft & {
+      left: -$euiBorderWidthThin;
+    }
+
+    .euiDataGridRowCell--alignRight & {
+      right: -$euiBorderWidthThin;
+    }
   }
 }
 
 .euiDataGridRowCell__actionButtonIcon {
-  height: $euiSizeM;
-  border-radius: $euiBorderRadius / 2;
-  width: 0;
-  overflow: hidden;
-  // Have to take out the generic transition so it is instaneous on focus
-  transition: none;
-  // Disable filled button box-shadows on legacy theme - they're unnecessary when this small in a datagrid
-  box-shadow: none !important; // stylelint-disable-line declaration-no-important
-  // Remove filled button borders on legacy theme - this way we don't need to animate the border
-  border: none;
+  height: $euiSize + $euiSizeXS;
+  width: $euiSize;
+  border-radius: 0;
+
+  /* Force all cell action buttons to match EUI colors */
+  &,
+  svg {
+    // stylelint-disable declaration-no-important
+    background-color: transparent !important;
+    color: currentColor !important;
+    fill: currentColor !important;
+    // stylelint-enable declaration-no-important
+  }
+
+  /* Manually increase the size of the expand cell icon - it's a bit small by default */
+  &.euiDataGridRowCell__expandCell .euiIcon {
+    width: 120%;
+    height: 100%;
+  }
 }
 
 // Row stripes
 @include euiDataGridStyles(stripes) {
   .euiDataGridRow--striped {
-    &,
-    .euiDataGridRowCell__actions--overlay {
-      background-color: $euiColorLightestShade;
-    }
+    background-color: $euiColorLightestShade;
   }
 }
 
 // Row highlights
 @include euiDataGridStyles(rowHoverHighlight) {
   .euiDataGridRow:hover {
-    &,
-    .euiDataGridRowCell__actions--overlay {
-      background-color: $euiColorHighlight;
-    }
+    background-color: $euiColorHighlight;
   }
 }
 
@@ -192,48 +236,43 @@
 // Font alternates
 @include euiDataGridStyles(fontSizeSmall) {
   @include euiDataGridRowCell {
-    @include euiFontSizeXS;
+    .euiDataGridRowCell__content {
+      @include euiFontSizeXS;
+    }
   }
 }
 
 @include euiDataGridStyles(fontSizeLarge) {
   @include euiDataGridRowCell {
-    @include euiFontSize;
+    .euiDataGridRowCell__content {
+      @include euiFontSize;
+    }
   }
 }
 
 // Padding alternates
 @include euiDataGridStyles(paddingSmall) {
   @include euiDataGridRowCell {
-    padding: $euiDataGridCellPaddingS;
+    .euiDataGridRowCell__content {
+      padding: $euiDataGridCellPaddingS;
+    }
   }
 }
 
 @include euiDataGridStyles(paddingLarge) {
   @include euiDataGridRowCell {
-    padding: $euiDataGridCellPaddingL;
-  }
-}
-
-// Compressed density grids - height tweaks
-@include euiDataGridStyles(fontSizeSmall, paddingSmall) {
-  .euiDataGridRowCell__actions--overlay {
-    padding: ($euiDataGridCellPaddingS / 2) 0;
-  }
-
-  .euiDataGridRowCell__defaultHeight .euiDataGridRowCell__actions {
-    transform: translateY(1px);
+    .euiDataGridRowCell__content {
+      padding: $euiDataGridCellPaddingL;
+    }
   }
 }
 
 @keyframes euiDataGridCellActionsSlideIn {
-  from {
-    margin-left: 0;
-    width: 0;
-  }
+  from { transform: scaleY(0); }
+  to { transform: scaleY(1); }
+}
 
-  to {
-    margin-left: $euiDataGridCellPaddingM;
-    width: $euiSizeM;
-  }
+@keyframes euiDataGridCellPopover {
+  from { opacity: 0; }
+  to { opacity: 1; }
 }

package/src/components/datagrid/_mixins.scss

@@ -64,8 +64,8 @@ $euiDataGridStyles: (
     position: absolute;
     top: 0;
     left: 0;
-    border: $euiBorderWidthThick solid $euiFocusRingColor;
-    border-radius: $euiBorderRadiusSmall;
+    border: $euiBorderWidthThick solid var(--euiDataGridCellOutlineColor, $euiFocusRingColor);
+    border-radius: $euiBorderRadius / 2;
     z-index: 2; // We want this to be on top of all the content
     pointer-events: none; // Because we put it with a higher z-index we don't want to make it clickable this way we allow selecting the content behind
   }

package/src/components/datagrid/body/header/_data_grid_header_row.scss

@@ -1,6 +1,6 @@
 .euiDataGridHeader {
   display: flex;
-  z-index: 3; // Needs to sit above the content and focused cells
+  z-index: $euiZDataGridCellPopover - 1; // Needs to sit above the content and focused cells
   background: $euiColorEmptyShade;
   position: sticky;
   top: 0;
@@ -17,14 +17,6 @@
   align-items: center;
   display: flex;
 
-  &.euiDataGridHeaderCell--numeric {
-    text-align: right;
-  }
-
-  &.euiDataGridHeaderCell--currency {
-    text-align: right;
-  }
-
   &:focus {
     @include euiDataGridCellFocus;
     border-top: none;
@@ -37,38 +29,54 @@
       border-top: none;
     }
 
-    .euiDataGridHeaderCell__sortingArrow {
-      margin-right: $euiSizeXS;
-    }
-
     .euiDataGridHeaderCell__button {
-      flex: 0 0 auto;
       position: relative;
-      align-items: center;
       display: flex;
+      align-items: center;
+      gap: $euiSizeXS;
       width: 100%;
       font-weight: $euiFontWeightBold;
       outline: none;
-
-      .euiDataGridHeaderCell__sortingArrow {
-        flex-grow: 0;
-      }
     }
 
     .euiDataGridHeaderCell__content {
       @include euiTextTruncate;
-      overflow: hidden;
-      white-space: nowrap;
-      text-align: left;
-      flex-grow: 1;
-      align-self: baseline;
+    }
+
+    .euiDataGridHeaderCell__sortingArrow {
+      flex: 0 0 auto; // Ensure icon doesn't shrink
     }
 
     .euiDataGridHeaderCell__icon {
-      flex-grow: 0;
-      flex-basis: auto;
-      width: auto;
-      padding-left: $euiSizeXS;
+      flex: 0 0 auto; // Ensure icon doesn't shrink
+      margin-left: auto; // Aligns the icon to the right
+      // Center the icon
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: $euiSize;
+      overflow: hidden;
+      width: 0;
+      opacity: 0;
+      transition: width $euiAnimSpeedFast ease-in, opacity $euiAnimSpeedSlow ease-in;
+    }
+
+    &:focus-within,
+    &:hover,
+    .euiPopover-isOpen {
+      .euiDataGridHeaderCell__icon {
+        width: $euiSize;
+        opacity: 1;
+      }
+    }
+  }
+
+  // Align numeric and currency schemas to the right
+  &.euiDataGridHeaderCell--numeric,
+  &.euiDataGridHeaderCell--currency {
+    .euiDataGridHeaderCell__content {
+      flex-grow: 1;
+      text-align: right;
     }
   }
 }

package/src/components/datagrid/controls/_data_grid_toolbar.scss

@@ -31,11 +31,6 @@
   }
 }
 
-.euiDataGrid__controlBtn--active,
-.euiDataGrid__controlBtn--active:focus {
-  font-weight: $euiFontWeightSemiBold;
-}
-
 @include euiDataGridStyles(bordersNone) {
   .euiDataGrid__controls {
     border: none;

package/src/components/form/form_row/_form_row.scss

@@ -18,7 +18,7 @@
 }
 
 .euiFormRow--hasEmptyLabelSpace {
-  margin-top: floor($euiFontSize * $euiBodyLineHeight) + $euiSizeXS; /* 2 */
+  margin-top: $euiSize + $euiSizeXS; /* 2 */
   // the following ensure that contents that aren't inherently the same height
   // as inputs will align to the vertical center
   min-height: $euiFormControlHeight;

package/src/components/table/_responsive.scss

@@ -99,6 +99,25 @@
         }
       }
 
+      // Custom actions
+      &:not(.euiTableRow-hasActions) .euiTableRowCell--hasActions:last-child {
+        width: 100%;
+
+        &::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          right: 0;
+          height: $euiBorderWidthThin;
+          background-color: $euiTableActionsBorderColor;
+        }
+
+        .euiTableCellContent {
+          position: relative;
+          top: $euiSizeXS;
+        }
+      }
+
       &.euiTableRow-hasActions.euiTableRow-isExpandable {
         .euiTableRowCell--isExpander {
           top: auto;

package/src/components/table/_table.scss

@@ -206,20 +206,15 @@
       transition: opacity $euiAnimSpeedNormal $euiAnimSlightResistance, filter $euiAnimSpeedNormal $euiAnimSlightResistance;
     }
 
-    .expandedItemActions__completelyHide,
-    .expandedItemActions__completelyHide:disabled,
-    .expandedItemActions__completelyHide:disabled:hover,
-    .expandedItemActions__completelyHide:disabled:focus,
-    .euiTableRow:hover & .expandedItemActions__completelyHide:disabled {
+    .expandedItemActions__completelyHide {
       filter: grayscale(0%);
       opacity: 0;
     }
   }
 
-  &:hover .euiTableCellContent--showOnHover .euiTableCellContent__hoverItem:not(:disabled) {
-    &,
-    &:hover,
-    &:focus {
+  &:hover .euiTableCellContent--showOnHover,
+  .euiTableCellContent--showOnHover:focus-within {
+    .euiTableCellContent__hoverItem {
       opacity: 1;
       filter: grayscale(0%);
     }

package/test-env/components/accordion/accordion.a11y.js

@@ -32,9 +32,7 @@ describe('EuiAccordion', function () {
     it('has zero violations when expanded', function () {
       cy.mount((0, _react2.jsx)(_index.EuiAccordion, noArrowProps, (0, _react2.jsx)(_panel.EuiPanel, {
         color: "subdued"
-      }, "Any content inside of ", (0, _react2.jsx)("strong", null, "EuiAccordion"), " will appear here. We will include ", (0, _react2.jsx)("a", {
-        href: "#"
-      }, "a link"), " to confirm focus.")));
+      }, "Any content inside of ", (0, _react2.jsx)("strong", null, "EuiAccordion"), " will appear here.")));
       cy.get('button.euiAccordion__button').click();
       cy.checkAxe();
     });

package/test-env/components/auto_sizer/auto_sizer.js

@@ -1,12 +1,14 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiAutoSizer = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 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
@@ -18,11 +20,16 @@ var _react2 = require("@emotion/react");
 var EuiAutoSizer = function EuiAutoSizer(_ref) {
   var children = _ref.children,
     defaultHeight = _ref.defaultHeight,
-    defaultWidth = _ref.defaultWidth;
+    defaultWidth = _ref.defaultWidth,
+    onResize = _ref.onResize;
   var childrenParams = {
     height: defaultHeight !== null && defaultHeight !== void 0 ? defaultHeight : 600,
     width: defaultWidth !== null && defaultWidth !== void 0 ? defaultWidth : 600
   };
+  (0, _react.useEffect)(function () {
+    onResize === null || onResize === void 0 ? void 0 : onResize(childrenParams);
+  }, [onResize, defaultHeight, defaultWidth]); // eslint-disable-line react-hooks/exhaustive-deps
+
   return (0, _react2.jsx)("div", {
     "data-eui": "EuiAutoSizer"
   }, children(childrenParams));

package/test-env/components/basic_table/action_types.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isCustomItemAction = void 0;
+exports.isCustomItemAction = exports.callWithItemIfFunction = void 0;
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -15,4 +15,10 @@ exports.isCustomItemAction = void 0;
 var isCustomItemAction = function isCustomItemAction(action) {
   return action.hasOwnProperty('render');
 };
-exports.isCustomItemAction = isCustomItemAction;
+exports.isCustomItemAction = isCustomItemAction;
+var callWithItemIfFunction = function callWithItemIfFunction(item) {
+  return function (prop) {
+    return typeof prop === 'function' ? prop(item) : prop;
+  };
+};
+exports.callWithItemIfFunction = callWithItemIfFunction;

package/test-env/components/basic_table/basic_table.a11y.js

@@ -185,8 +185,7 @@ describe('EuiTable', function () {
     });
     describe('Keyboard accessibility', function () {
       it('has zero violations after expanding a row', function () {
-        cy.repeatRealPress('Tab');
-        cy.get('button#1').should('have.focus');
+        cy.get('button#1').focus();
         cy.realPress('Enter');
         cy.get('tr.euiTableRow-isExpandedRow div.euiTableCellContent').should('exist');
         cy.checkAxe();