@elastic/eui 71.0.0 → 71.1.0

package/optimize/lib/components/error_boundary/error_boundary.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiErrorBoundary = exports.EuiErrorBoundary = void 0;
+exports.EuiErrorMessage = exports.EuiErrorBoundary = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -39,7 +39,8 @@ var _error_boundary = require("./error_boundary.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "children", "data-test-subj", "theme"];
+var _excluded = ["children"],
+    _excluded2 = ["errorMessage", "className", "data-test-subj"];
 
 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); }
 
@@ -49,15 +50,15 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var _EuiErrorBoundary = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(_EuiErrorBoundary, _Component);
+var EuiErrorBoundary = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(EuiErrorBoundary, _Component);
 
-  var _super = _createSuper(_EuiErrorBoundary);
+  var _super = _createSuper(EuiErrorBoundary);
 
-  function _EuiErrorBoundary(props) {
+  function EuiErrorBoundary(props) {
     var _this;
 
-    (0, _classCallCheck2.default)(this, _EuiErrorBoundary);
+    (0, _classCallCheck2.default)(this, EuiErrorBoundary);
     _this = _super.call(this, props);
     var errorState = {
       hasError: false,
@@ -67,7 +68,7 @@ var _EuiErrorBoundary = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  (0, _createClass2.default)(_EuiErrorBoundary, [{
+  (0, _createClass2.default)(EuiErrorBoundary, [{
     key: "componentDidCatch",
     value: function componentDidCatch(_ref) {
       var message = _ref.message,
@@ -87,34 +88,46 @@ var _EuiErrorBoundary = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          className = _this$props.className,
           children = _this$props.children,
-          _dataTestSubj = _this$props['data-test-subj'],
-          theme = _this$props.theme,
           rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      var dataTestSubj = (0, _classnames.default)('euiErrorBoundary', _dataTestSubj);
-      var styles = (0, _error_boundary.euiErrorBoundaryStyles)(theme);
 
       if (this.state.hasError) {
         // You can render any custom fallback UI
-        return (0, _react2.jsx)("div", (0, _extends2.default)({
-          css: styles.euiErrorBoundary,
-          className: (0, _classnames.default)('euiErrorBoundary', className),
-          "data-test-subj": dataTestSubj
-        }, rest), (0, _react2.jsx)(_code.EuiCodeBlock, null, (0, _react2.jsx)(_title.EuiTitle, {
-          size: "xs"
-        }, (0, _react2.jsx)("p", null, (0, _react2.jsx)(_i18n.EuiI18n, {
-          token: "euiErrorBoundary.error",
-          default: "Error"
-        }))), this.state.error));
+        return (0, _react2.jsx)(EuiErrorMessage, (0, _extends2.default)({}, rest, {
+          errorMessage: this.state.error
+        }));
       }
 
       return children;
     }
   }]);
-  return _EuiErrorBoundary;
+  return EuiErrorBoundary;
 }(_react.Component);
-
-exports._EuiErrorBoundary = _EuiErrorBoundary;
-var EuiErrorBoundary = (0, _services.withEuiTheme)(_EuiErrorBoundary);
-exports.EuiErrorBoundary = EuiErrorBoundary;
+/**
+ * Split out into a separate styling-only component for easier use of hooks,
+ * and also for internal re-use by EUI's docs/playgrounds
+ */
+
+
+exports.EuiErrorBoundary = EuiErrorBoundary;
+
+var EuiErrorMessage = function EuiErrorMessage(_ref2) {
+  var errorMessage = _ref2.errorMessage,
+      className = _ref2.className,
+      dataTestSubj = _ref2['data-test-subj'],
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _error_boundary.euiErrorBoundaryStyles)(euiTheme);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: styles.euiErrorBoundary,
+    className: (0, _classnames.default)('euiErrorBoundary', className),
+    "data-test-subj": (0, _classnames.default)('euiErrorBoundary', dataTestSubj)
+  }, rest), (0, _react2.jsx)(_code.EuiCodeBlock, null, (0, _react2.jsx)(_title.EuiTitle, {
+    size: "xs"
+  }, (0, _react2.jsx)("p", null, (0, _react2.jsx)(_i18n.EuiI18n, {
+    token: "euiErrorBoundary.error",
+    default: "Error"
+  }))), errorMessage));
+};
+
+exports.EuiErrorMessage = EuiErrorMessage;

package/optimize/lib/components/page/page_side_bar/page_side_bar.js

@@ -27,6 +27,10 @@ var paddingSizeToClassNameMap = {
   l: 'euiPageSideBar--paddingLarge'
 };
 var PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap);
+/**
+ * @deprecated Use the new EuiPageSidebarProps in page/page_sidebar instead
+ */
+
 exports.PADDING_SIZES = PADDING_SIZES;
 
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "71.0.0",
+  "version": "71.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -26,8 +26,8 @@
     "lint-fix": "yarn lint-es-fix",
     "lint-es": "eslint --cache \"{src,src-docs}/**/*.{ts,tsx,js}\" --max-warnings 0",
     "lint-es-fix": "yarn lint-es --fix",
-    "lint-sass": "sass-lint -v --max-warnings 0",
-    "lint-sass-fix": "sass-lint-auto-fix -c ./.sass-lint-fix.yml",
+    "lint-sass": "yarn stylelint \"**/*.scss\"",
+    "lint-sass-fix": "yarn stylelint \"**/*.scss\" --fix",
     "test": "yarn lint && yarn test-unit",
     "test-ci": "yarn test && yarn test-cypress",
     "test-unit": "cross-env NODE_ENV=test jest --config ./scripts/jest/config.json",
@@ -44,8 +44,7 @@
     "start-test-server-and-a11y-test": "cross-env WAIT_ON_TIMEOUT=600000 start-server-and-test start-test-server http-get://localhost:9999 test-a11y",
     "yo-doc": "yo ./generator-eui/app/documentation.js",
     "yo-changelog": "yo ./generator-eui/changelog/index.js",
-    "release": "node ./scripts/release.js",
-    "postinstall": "node ./scripts/postinstall.js"
+    "release": "node ./scripts/release.js"
   },
   "repository": {
     "type": "git",
@@ -54,7 +53,6 @@
   "resolutions": {
     "**/prismjs": "1.27.0",
     "**/trim": "0.0.3",
-    "**/node-sass": "^6.0.1",
     "**/react": "^17.0.0",
     "**/known-css-properties": "0.24.0"
   },
@@ -202,22 +200,20 @@
     "glob": "^7.1.6",
     "html-format": "^1.0.1",
     "html-webpack-plugin": "^5.5.0",
+    "inquirer": "^9.1.4",
     "jest": "^24.1.0",
     "jest-cli": "^24.1.0",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",
-    "node-sass": "^6.0.1",
-    "nodegit": "^0.28.0-alpha.10",
     "path": "^0.12.7",
     "pegjs": "^0.10.0",
+    "postcss": "^8.4.19",
     "postcss-cli": "^7.1.2",
     "postcss-inline-svg": "^4.1.0",
     "postcss-loader": "^7.0.1",
     "pre-commit": "^1.2.2",
     "prettier": "^2.1.2",
-    "prettier-stylelint": "^0.4.2",
     "process": "^0.11.10",
-    "prompt": "^1.0.0",
     "prop-types": "^15.6.0",
     "puppeteer": "^5.5.0",
     "raw-loader": "^4.0.1",
@@ -235,12 +231,14 @@
     "redux-thunk": "^2.3.0",
     "resolve": "^1.17.0",
     "rimraf": "^3.0.2",
-    "sass-lint": "^1.13.1",
-    "sass-lint-auto-fix": "^0.21.2",
-    "sass-loader": "^13.0.2",
+    "sass": "^1.56.1",
+    "sass-loader": "^13.2.0",
     "shelljs": "^0.8.4",
     "start-server-and-test": "^1.11.3",
     "style-loader": "^3.3.1",
+    "stylelint": "^14.15.0",
+    "stylelint-config-prettier-scss": "^0.0.1",
+    "stylelint-config-standard-scss": "^6.1.0",
     "terser-webpack-plugin": "^5.3.5",
     "typescript": "4.5.3",
     "uglifyjs-webpack-plugin": "^2.2.0",
@@ -270,7 +268,6 @@
     "lib",
     "licenses",
     "optimize",
-    "scripts/postinstall.js",
     "src/**/*.scss",
     "test-env",
     "eui.d.ts",

package/src/components/basic_table/_basic_table.scss

@@ -1,5 +1,4 @@
 .euiBasicTable {
-
   &-loading {
     position: relative;
 
@@ -7,7 +6,7 @@
       overflow: hidden;
     }
 
-    tbody:before {
+    tbody::before {
       position: absolute;
       content: '';
       width: 100%;
@@ -16,11 +15,9 @@
       animation: euiBasicTableLoading 1000ms linear;
       animation-iteration-count: infinite;
     }
-
   }
 }
 
-
 @keyframes euiBasicTableLoading {
   from {
     left: 0;

package/src/components/button/button_empty/_button_empty.scss

@@ -7,9 +7,8 @@
   @include euiButton;
   border-radius: $euiBorderRadius;
 
-  // sass-lint:disable-block no-important
-  transform: none !important; /* 1 */
-  animation: none !important; /* 1 */
+  transform: none !important; /* 1 */ // stylelint-disable-line declaration-no-important
+  animation: none !important; /* 1 */ // stylelint-disable-line declaration-no-important
   transition-timing-function: ease-in; /* 2 */
   transition-duration: $euiAnimSpeedFast; /* 2 */
 
@@ -43,7 +42,6 @@
   }
 }
 
-
 .euiButtonEmpty--flushLeft,
 .euiButtonEmpty--flushRight,
 .euiButtonEmpty--flushBoth {

package/src/components/button/button_group/_button_group.scss

@@ -29,7 +29,7 @@
 
 .euiButtonGroup--compressed {
   .euiButtonGroup__buttons {
-    box-shadow: none !important; // sass-lint:disable-line no-important
+    box-shadow: none !important; // stylelint-disable-line declaration-no-important
     border-radius: $euiFormControlCompressedBorderRadius;
     background-color: $euiFormBackgroundColor;
     height: $euiFormControlCompressedHeight;

package/src/components/button/button_group/_button_group_button.scss

@@ -1,14 +1,13 @@
 // This file has lots of modifiers and is somewhat nesty by nature
-// sass-lint:disable nesting-depth
+// stylelint-disable max-nesting-depth
 
 .euiButtonGroupButton {
   @include euiButtonBase;
   @include euiFont;
   @include euiFontSize;
 
-  // sass-lint:disable-block indentation
   transition: background-color $euiAnimSpeedNormal ease-in-out,
-              color $euiAnimSpeedNormal ease-in-out;
+              color $euiAnimSpeedNormal ease-in-out; // stylelint-disable-line indentation
 
   // Allow button to shrink and truncate
   min-width: 0;
@@ -58,7 +57,7 @@
 .euiButtonGroup--medium,
 .euiButtonGroup--small {
   .euiButtonGroupButton {
-    border-radius: 0 !important; // sass-lint:disable-line no-important
+    border-radius: 0 !important; // stylelint-disable-line declaration-no-important
     font-weight: $euiButtonFontWeight;
 
     &:focus,

package/src/components/button/button_icon/_button_icon.scss

@@ -1,6 +1,3 @@
-// This file has lots of modifiers and is somewhat nesty by nature
-// sass-lint:disable nesting-depth
-
 .euiButtonIcon {
   @include euiButton;
 

package/src/components/collapsible_nav/_collapsible_nav.scss

@@ -1,5 +1,5 @@
 // Extends <EuiFlyout>
 
 .euiCollapsibleNav:not([class*='push']) {
-  z-index: $euiZNavigation !important; // sass-lint:disable-line no-important
+  z-index: $euiZNavigation !important; // stylelint-disable-line declaration-no-important
 }

package/src/components/collapsible_nav/collapsible_nav_group/_collapsible_nav_group.scss

@@ -22,7 +22,7 @@
   // Forcing better contrast of focus state on EuiAccordion toggle icon
   .euiCollapsibleNavGroup__heading:focus .euiAccordion__iconWrapper {
     color: $euiCollapsibleNavGroupDarkHighContrastColor;
-    animation-name: euiCollapsibleNavGroupDarkFocusRingAnimate !important; // sass-lint:disable-line no-important
+    animation-name: euiCollapsibleNavGroupDarkFocusRingAnimate !important; // stylelint-disable-line declaration-no-important
   }
 
   .euiCollapsibleNavGroup__title {

package/src/components/color_picker/_color_picker.scss

@@ -37,11 +37,11 @@
 
 .euiColorPicker__popoverPanel--pickerOnly {
   // Override of EuiPanel padding
-  // sass-lint:disable no-important
+  // stylelint-disable-next-line declaration-no-important
   padding-bottom: 0 !important;
 }
 
-// sass-lint:disable no-important
+// stylelint-disable declaration-no-important
 .euiColorPicker__input--inGroup {
   height: $euiFormControlLayoutGroupInputHeight !important;
   box-shadow: none !important;
@@ -52,6 +52,7 @@
     border-radius: 0;
   }
 }
+// stylelint-enable declaration-no-important
 
 .euiColorPicker__alphaRange {
   .euiRangeInput {

package/src/components/color_picker/_hue.scss

@@ -1,6 +1,6 @@
 // This wraps the range. It is needed because there is no way to do a linear gradient in ie11 for the track
 .euiHue {
-  // sass-lint:disable-block no-color-literals
+  // stylelint-disable color-no-hex
   background: linear-gradient(to right,
     #FF3232 0%,
     #FFF130 20%,
@@ -9,14 +9,15 @@
     #282CFF 71%,
     #FF28FB 88%,
     #FF0094 100%
-   );
+  );
+  // stylelint-enable color-no-hex
   height: $euiSizeL;
   margin: $euiSizeXS 0;
   position: relative;
 
   // To make our fake range skinny, we add some pseudo borders to fake the height of the gradient
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: '';
     left: 0;
     position: absolute;
@@ -25,7 +26,7 @@
     width: 100%;
   }
 
-  &:after {
+  &::after {
     bottom: 0;
   }
 }
@@ -45,11 +46,10 @@
   background: transparent;
   z-index: 2; // Needed to place the thumb above the :after pseudo border from .euiRange
 
-
   // Resets for the range
 
   // Disable linter for these very unique vendor controls
-  // sass-lint:disable-block no-vendor-prefixes
+  // stylelint-disable property-no-vendor-prefix, selector-no-vendor-prefix
   &::-webkit-slider-thumb {
     -webkit-appearance: none;
     margin-top: 0;

package/src/components/color_picker/_saturation.scss

@@ -34,7 +34,7 @@
     margin-left: $euiColorPickerIndicatorSize * -.5;
     border: 1px solid $euiColorDarkestShade;
 
-    &:before {
+    &::before {
       content: '';
       position: absolute;
       top: 0;

package/src/components/color_picker/color_palette_display/_mixins.scss

@@ -8,7 +8,7 @@
 
   position: relative;
 
-  &:after {
+  &::after {
     position: absolute;
     top: 0;
     left: 0;

package/src/components/color_picker/color_stops/_color_stops.scss

@@ -58,7 +58,7 @@
 
   // Background color can potentially have opacity
   // Pseudo element placed below the thumb to prevent the track from showing through
-  &:before {
+  &::before {
     content: '';
     display: block;
     position: absolute;
@@ -72,7 +72,6 @@
 }
 
 .euiColorStopThumb.euiRangeThumb:not(:disabled) {
-  // sass-lint:disable-block no-color-literals, indentation
   top: 0;
   margin-top: 0;
   pointer-events: auto;
@@ -89,7 +88,7 @@
 }
 
 .euiColorStopPopover-isLoadingPanel {
-  // sass-lint:disable-block no-important
+  // stylelint-disable-next-line declaration-no-important
   visibility: hidden !important; // Overrides a stateful class on EuiPopover -> EuiPanel
 }
 

package/src/components/combo_box/_combo_box.scss

@@ -1,3 +1,6 @@
+// TODO: Address nesting during Emotion conversion, if possible
+// stylelint-disable max-nesting-depth
+
 .euiComboBox {
   @include euiFormControlSize(auto, $includeAlternates: true);
   position: relative;
@@ -21,7 +24,6 @@
     display: flex; /* 1 */
     outline: none; // Fixes an intermittent focus ring in Firefox
 
-    // sass-lint:disable-block mixins-before-declarations
     // to override the padding added above
     @include euiFormControlLayoutPadding(1); /* 2 */
 
@@ -71,7 +73,7 @@
    * 5. Prevent a lot of input from causing the react-input-autosize to overflow the container.
    */
   .euiComboBox__input {
-    // sass-lint:disable-block no-important
+    // stylelint-disable-next-line declaration-no-important
     display: inline-flex !important; /* 1 */
     height: $euiSizeXL; /* 2 */
     overflow: hidden; /* 5 */
@@ -107,9 +109,9 @@
 
   &.euiComboBox-isDisabled {
     .euiComboBox__inputWrap {
-      // sass-lint:disable-block no-vendor-prefixes
+      // stylelint-disable property-no-vendor-prefix
       @include euiFormControlDisabledStyle;
-      -webkit-text-fill-color: unset; // overrides $euiFormControlDisabledColor because the color doesn't work with multiple background colors 
+      -webkit-text-fill-color: unset; // overrides $euiFormControlDisabledColor because the color doesn't work with multiple background colors
     }
 
     .euiComboBoxPlaceholder,
@@ -129,7 +131,6 @@
       padding-top: 0;
       padding-bottom: 0;
 
-      // sass-lint:disable-block mixins-before-declarations
       @include euiFormControlLayoutPadding(1, $compressed: true); /* 2 */
 
       &.euiComboBox__inputWrap-isClearable {
@@ -153,7 +154,7 @@
   // Overrides the euiFormControlLayout prepend and append height that is 100%
   .euiFormControlLayout__prepend,
   .euiFormControlLayout__append {
-    // sass-lint:disable-block no-important
+    // stylelint-disable-next-line declaration-no-important
     height: auto !important;
   }
 }

package/src/components/combo_box/combo_box_input/_combo_box_input.scss

@@ -3,9 +3,10 @@
 
   // Ensure that no input states are visible on the hidden input
   input {
-    // sass-lint:disable-block no-important
+    // stylelint-disable declaration-no-important
     border: none !important;
     box-shadow: none !important;
     outline: none !important;
+    // stylelint-enable declaration-no-important
   }
 }

package/src/components/combo_box/combo_box_input/_combo_box_placeholder.scss

@@ -7,5 +7,5 @@
   padding-left: $euiSizeXS;
   line-height: $euiSizeXL;
   color: $euiFormControlPlaceholderText;
-  margin-bottom: 0 !important; // sass-lint:disable-line no-important
+  margin-bottom: 0 !important; // stylelint-disable-line declaration-no-important
 }

package/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss

@@ -4,12 +4,11 @@
  */
 .euiComboBoxOptionsList {
   // Remove transforms from popover panel
-  transform: none !important; // sass-lint:disable-line no-important
+  transform: none !important; // stylelint-disable-line declaration-no-important
   top: 0;
 
   .euiFilterSelectItem__content {
-    // sass-lint:disable no-important
-    margin-block: 0 !important;
+    margin-block: 0 !important; // stylelint-disable-line declaration-no-important
   }
 }
 

package/src/components/control_bar/_variables.scss

@@ -10,4 +10,3 @@ $euiControlBarHeights: (
   m: $euiSize * 30,
   l: 100vh,
 );
-

package/src/components/datagrid/_data_grid_data_row.scss

@@ -100,16 +100,16 @@
 .euiDataGridRowCell__popover {
   @include euiScrollBar;
   overflow: auto;
-  // sass-lint:disable-block no-important
+  // stylelint-disable declaration-no-important
   max-width: 400px !important;
   max-height: 400px !important;
   z-index: $euiZDataGridCellPopover !important;
+  // stylelint-enable 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;
-  // sass-lint:disable-block mixins-before-declarations
   @include euiBottomShadow; // TODO: Convert to euiShadowMedium() in Emotion
 }
 
@@ -156,7 +156,7 @@
   // 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; // sass-lint:disable-line no-important
+  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;
 }
@@ -184,8 +184,7 @@
 // Border alternates
 @include euiDataGridStyles(bordersNone) {
   @include euiDataGridRowCell {
-    // sass-lint:disable-block no-important
-    border-color: transparent !important;
+    border-color: transparent !important; // stylelint-disable-line declaration-no-important
   }
 }
 

package/src/components/datagrid/_mixins.scss

@@ -67,7 +67,7 @@ $euiDataGridStyles: (
     border: $euiBorderWidthThick solid $euiFocusRingColor;
     border-radius: $euiBorderRadiusSmall;
     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 
+    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/_data_grid_footer_row.scss

@@ -18,9 +18,10 @@
 @include euiDataGridStyles(footerOverline) {
   @include euiDataGridFooterCell {
     border-top: $euiBorderThick;
-    // sass-lint:disable-block no-important
+    // stylelint-disable declaration-no-important
     border-top-color: $euiTextColor !important;
     background: $euiColorEmptyShade !important;
+    // stylelint-enable declaration-no-important
   }
 }
 

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

@@ -1,4 +1,4 @@
-  // Resizer straddles the column border and is an invisible hitzone for dragging
+// Resizer straddles the column border and is an invisible hitzone for dragging
 .euiDataGridColumnResizer {
   position: absolute;
   top: 0;
@@ -10,7 +10,7 @@
   z-index: 2; // Needs to be a level above the cells themselves in case of overlaps
 
   // Center a vertical line within the button above
-  &:after {
+  &::after {
     content: '';
     position: absolute;
     left: $euiSizeS - 1px;
@@ -35,12 +35,11 @@
 // we don't use negative positioning and the borders from the cell will match the container.
 @include euiDataGridHeaderCell {
   &:last-child {
-
     .euiDataGridColumnResizer {
       right: 0;
       width: $euiSize / 2;
 
-      &:after {
+      &::after {
         left: auto;
         right: 0;
       }

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

@@ -73,7 +73,7 @@
 }
 
 .euiDataGridHeader__action--selected {
-  // sass-lint:disable-block no-important
+  // stylelint-disable-next-line declaration-no-important
   font-weight: $euiFontWeightBold !important;
 }
 

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

@@ -1,5 +1,4 @@
 .euiDataGridColumnSorting__item {
-
   &-isDragging {
     @include euiBottomShadow;
     background: $euiColorEmptyShade;
@@ -35,8 +34,8 @@
     border: none;
 
     // Hack to overwrite some nested, unreachable component code with button groups
-    // sass-lint:disable-block no-important
     button {
+      // stylelint-disable-next-line declaration-no-important
       font-size: $euiFontSizeXS !important;
     }
   }