@elastic/eui 71.0.0 → 72.0.0

package/optimize/lib/components/selectable/selectable.js

@@ -261,7 +261,7 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
         isFocused: false
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOptionClick", function (options, event) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onOptionClick", function (options, event, clickedOption) {
       var _this$props = _this.props,
           isPreFiltered = _this$props.isPreFiltered,
           onChange = _this$props.onChange;
@@ -273,7 +273,7 @@ var EuiSelectable = /*#__PURE__*/function (_Component) {
       });
 
       if (onChange) {
-        onChange(options, event);
+        onChange(options, event, clickedOption);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "scrollToItem", function (index, align) {

package/optimize/lib/components/selectable/selectable_list/selectable_list.js

@@ -223,6 +223,9 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
           onOptionClick = _this$props4.onOptionClick,
           options = _this$props4.options,
           singleSelection = _this$props4.singleSelection;
+
+      var changedOption = _objectSpread({}, addedOption);
+
       var updatedOptions = options.map(function (option) {
         // if singleSelection is enabled, uncheck any selected option(s)
         var updatedOption = _objectSpread({}, option);
@@ -234,43 +237,51 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
 
         if (option === addedOption) {
           updatedOption.checked = 'on';
+          changedOption = updatedOption;
         }
 
         return updatedOption;
       });
-      onOptionClick(updatedOptions, event);
+      onOptionClick(updatedOptions, event, changedOption);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onRemoveOption", function (removedOption, event) {
       var _this$props5 = _this.props,
           onOptionClick = _this$props5.onOptionClick,
           singleSelection = _this$props5.singleSelection,
           options = _this$props5.options;
+
+      var changedOption = _objectSpread({}, removedOption);
+
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
 
         if (option === removedOption && singleSelection !== 'always') {
           delete updatedOption.checked;
+          changedOption = updatedOption;
         }
 
         return updatedOption;
       });
-      onOptionClick(updatedOptions, event);
+      onOptionClick(updatedOptions, event, changedOption);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onExcludeOption", function (excludedOption, event) {
       var _this$props6 = _this.props,
           onOptionClick = _this$props6.onOptionClick,
           options = _this$props6.options;
-      excludedOption.checked = 'off';
+
+      var changedOption = _objectSpread({}, excludedOption);
+
       var updatedOptions = options.map(function (option) {
         var updatedOption = _objectSpread({}, option);
 
         if (option === excludedOption) {
           updatedOption.checked = 'off';
+          changedOption = updatedOption;
         }
 
         return updatedOption;
       });
-      onOptionClick(updatedOptions, event);
+      onOptionClick(updatedOptions, event, changedOption);
     });
     return _this;
   }

package/optimize/lib/components/tabs/tab.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,7 +13,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -21,9 +23,15 @@ var _href_validator = require("../../services/security/href_validator");
 
 var _tab = require("./tab.styles");
 
+var _tabs_context = require("./tabs_context");
+
 var _react2 = require("@emotion/react");
 
-var _excluded = ["isSelected", "children", "className", "disabled", "href", "target", "rel", "prepend", "append", "size", "expand"];
+var _excluded = ["isSelected", "children", "className", "disabled", "href", "target", "rel", "prepend", "append"];
+
+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; }
 
 var EuiTab = function EuiTab(_ref) {
   var isSelected = _ref.isSelected,
@@ -35,10 +43,12 @@ var EuiTab = function EuiTab(_ref) {
       rel = _ref.rel,
       prepend = _ref.prepend,
       append = _ref.append,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'm' : _ref$size,
-      expand = _ref.expand,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useContext = (0, _react.useContext)(_tabs_context.EuiTabsContext),
+      size = _useContext.size,
+      expand = _useContext.expand;
+
   var euiTheme = (0, _services.useEuiTheme)();
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
   var disabled = _disabled || !isHrefValid; // Keep CSS classnames for reference

package/optimize/lib/components/tabs/tabs.js

@@ -19,10 +19,10 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _services = require("../../services");
 
-var _clone_element = require("../../services/theme/clone_element");
-
 var _tabs = require("./tabs.styles");
 
+var _tabs_context = require("./tabs_context");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["children", "className", "bottomBorder", "expand", "size"];
@@ -47,24 +47,18 @@ var EuiTabs = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var classes = (0, _classnames.default)('euiTabs', className);
   var styles = (0, _tabs.euiTabsStyles)(euiTheme);
   var cssStyles = [styles.euiTabs, styles[size], bottomBorder && styles.bottomBorder];
-
-  var tabItems = _react.default.Children.map(children, function (child) {
-    if ( /*#__PURE__*/_react.default.isValidElement(child)) {
-      return (0, _clone_element.cloneElementWithCss)(child, {
-        // we're passing the parent `size` and `expand` down to the children
-        size: size,
-        expand: expand
-      });
-    }
-  });
-
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     ref: ref,
     className: classes,
     css: cssStyles
   }, children && {
     role: 'tablist'
-  }, rest), tabItems);
+  }, rest), (0, _react2.jsx)(_tabs_context.EuiTabsContext.Provider, {
+    value: {
+      expand: expand,
+      size: size
+    }
+  }, children));
 });
 exports.EuiTabs = EuiTabs;
 EuiTabs.displayName = 'EuiTabs';

package/optimize/lib/components/tabs/tabs_context.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.contextDefaults = exports.EuiTabsContext = void 0;
+
+var _react = require("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.
+ */
+var contextDefaults = {
+  expand: false,
+  size: 'm'
+};
+exports.contextDefaults = contextDefaults;
+var EuiTabsContext = /*#__PURE__*/(0, _react.createContext)(contextDefaults);
+exports.EuiTabsContext = EuiTabsContext;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "71.0.0",
+  "version": "72.0.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",
@@ -53,10 +52,7 @@
   },
   "resolutions": {
     "**/prismjs": "1.27.0",
-    "**/trim": "0.0.3",
-    "**/node-sass": "^6.0.1",
-    "**/react": "^17.0.0",
-    "**/known-css-properties": "0.24.0"
+    "**/react": "^17.0.0"
   },
   "pre-commit": [
     "test-staged"
@@ -92,7 +88,7 @@
     "rehype-stringify": "^8.0.0",
     "remark-breaks": "^2.0.2",
     "remark-emoji": "^2.1.0",
-    "remark-parse": "^8.0.3",
+    "remark-parse-no-trim": "^8.0.4",
     "remark-rehype": "^8.0.0",
     "tabbable": "^5.2.1",
     "text-diff": "^1.0.1",
@@ -117,7 +113,7 @@
     "@cypress/code-coverage": "^3.10.0",
     "@cypress/react": "^5.10.3",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^51.1.1",
+    "@elastic/charts": "^51.2.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.10.0",
@@ -202,22 +198,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 +229,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 +266,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,
 );
-