@elastic/eui 70.4.0 → 71.1.0

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

@@ -48,7 +48,7 @@
 }
 
 .euiColorStopPopover-hasFocus {
-  z-index: 1;
+  z-index: 3; // same z-index as .euiRangeThumb
 }
 
 .euiColorStopPopover__anchor {
@@ -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;
     }
   }

package/src/components/date_picker/_date_picker_range.scss

@@ -18,7 +18,7 @@
   .euiFieldText.euiDatePicker {
     height: $euiFormControlLayoutGroupInputHeight;
     // including all states
-    box-shadow: none !important; // sass-lint:disable-line no-important
+    box-shadow: none !important; // stylelint-disable-line declaration-no-important
     text-align: center;
   }
 

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

@@ -1,5 +1,3 @@
-// sass-lint:disable-block function-name-format
-
 .euiSuperDatePicker__flexWrapper {
   max-width: 100%;
   // Set a sensible min-width for when width is auto
@@ -34,10 +32,9 @@
   width: $euiSuperDatePickerWidth;
 }
 
-
 .euiSuperDatePicker {
-  // sass-lint:disable-block no-important
   // Allow it to always grow to fit the container since the default form max width is too small
+  // stylelint-disable-next-line declaration-no-important
   max-width: 100% !important;
 
   > .euiFormControlLayout__childrenWrapper {

package/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss

@@ -11,9 +11,9 @@
   margin: $euiSizeS 0 0;
 }
 
-// sass-lint:disable no-important
 .euiQuickSelectPopover__buttonText {
   // Override specificity from universal and sibling selectors
+  // stylelint-disable-next-line declaration-no-important
   margin-right: $euiSizeXS !important;
 }
 

package/src/components/drag_and_drop/_draggable.scss

@@ -1,19 +1,17 @@
-// sass-lint:disable no-empty-rulesets
-
 .euiDraggable {
   &.euiDraggable--isDragging {
     // Overriding inline styles on JS-inserted HTML elements
-    z-index: $euiZLevel9 !important; // sass-lint:disable-line no-important
+    z-index: $euiZLevel9 !important; // stylelint-disable-line declaration-no-important
   }
 
   &.euiDraggable--hasClone:not(.euiDraggable--isDragging) {
     // Overriding inline styles on JS-inserted HTML elements
-    transform: none !important; // sass-lint:disable-line no-important
+    transform: none !important; // stylelint-disable-line declaration-no-important
   }
 
   &.euiDraggable--withoutDropAnimation {
     // Overriding inline styles on JS-inserted HTML elements
-    transition-duration: .001s !important; // sass-lint:disable-line no-important
+    transition-duration: .001s !important; // stylelint-disable-line declaration-no-important
   }
 
   &:focus > .euiDraggable__item,

package/src/components/drag_and_drop/_droppable.scss

@@ -13,7 +13,7 @@
   .euiDroppable__placeholder {
     &.euiDroppable__placeholder--isHidden {
       // Overriding inline styles on JS-inserted HTML elements
-      display: none !important; // sass-lint:disable-line no-important
+      display: none !important; // stylelint-disable-line declaration-no-important
     }
   }
 }

package/src/components/empty_prompt/_empty_prompt.scss

@@ -121,7 +121,7 @@ $euiEmptyPromptContentMaxWidth: 36em;
 
     &.euiEmptyPrompt--horizontal {
       .euiEmptyPrompt__main {
-        gap: $amount; // sass-lint:disable-line no-misspelled-properties
+        gap: $amount;
       }
     }
   }

package/src/components/filter_group/_filter_group.scss

@@ -10,7 +10,7 @@
     min-width: $euiSize * 3;
   }
 
-  > .euiFilterButton--noGrow  {
+  > .euiFilterButton--noGrow {
     flex-grow: 0;
   }
 
@@ -56,7 +56,7 @@
     display: flex;
 
     .euiFilterButton {
-      // sass-lint:disable-block no-important
+      // stylelint-disable-next-line declaration-no-important
       flex-grow: 1 !important;
     }
   }

package/src/components/filter_group/_filter_select_item.scss

@@ -22,7 +22,6 @@
   @include euiTextTruncate;
 }
 
-
 .euiFilterSelect__items {
   @include euiScrollBar;
 

package/src/components/form/_index.scss

@@ -18,6 +18,5 @@
 @import 'form_label/index';
 @import 'form_row/index';
 @import 'radio/index';
-@import 'range/index';
 @import 'switch/index';
 @import 'text_area/index';

package/src/components/form/checkbox/_checkbox.scss

@@ -1,3 +1,6 @@
+// TODO: Address nesting during Emotion conversion, if possible
+// stylelint-disable max-nesting-depth
+
 /**
   * 1. Float above the visual radio and match its dimension, so that when users try to click it
   *    they actually click this input.
@@ -48,12 +51,11 @@
     }
 
     &[disabled] {
-      // sass-lint:disable-block no-important
-      cursor: not-allowed !important;
+      cursor: not-allowed !important; // stylelint-disable-line declaration-no-important
 
       ~ .euiCheckbox__label {
         color: $euiFormControlDisabledColor;
-        cursor: not-allowed !important;
+        cursor: not-allowed !important; // stylelint-disable-line declaration-no-important
       }
 
       + .euiCheckbox__square {

package/src/components/form/described_form_group/_described_form_group.scss

@@ -30,6 +30,5 @@
 }
 
 .euiDescribedFormGroup__descriptionColumn {
-  // sass-lint:disable-block function-name-format
   min-width: MIN(20rem, 50%);
 }

package/src/components/form/field_password/_field_password.scss

@@ -7,7 +7,7 @@
   }
 }
 
-// sass-lint:disable-block no-vendor-prefixes
+// stylelint-disable selector-no-vendor-prefix
 // Only remove Edge's internal reveal button if we're providing a custom one
 .euiFieldPassword--withToggle::-ms-reveal {
   display: none;

package/src/components/form/field_search/_field_search.scss

@@ -2,13 +2,13 @@
  * 1. Fix for Safari to ensure that it renders like a normal text input
  *    and doesn't add extra spacing around text
 */
+// stylelint-disable property-no-vendor-prefix, selector-no-vendor-prefix
 
 .euiFieldSearch {
   @include euiFormControlStyle;
   @include euiFormControlWithIcon($isIconOptional: false);
   @include euiFormControlIsLoading;
 
-  // sass-lint:disable-block no-vendor-prefixes
   -webkit-appearance: textfield; /* 1 */
 
   &::-webkit-search-decoration,

package/src/components/form/file_picker/_file_picker.scss

@@ -77,7 +77,6 @@
   pointer-events: none; /* 1 */
   border-radius: $euiFormControlBorderRadius;
 
-  // sass-lint:disable-block indentation
   transition:
     box-shadow $euiAnimSpeedFast ease-in,
     background-color $euiAnimSpeedFast ease-in,
@@ -178,7 +177,7 @@
 
 // Large styles only
 .euiFilePicker--large {
-  // sass-lint:disable-block nesting-depth
+  // stylelint-disable max-nesting-depth
   // Hover and focus
   .euiFilePicker__input:hover:not(:disabled),
   .euiFilePicker__input:focus {

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

@@ -1,3 +1,6 @@
+// TODO: Address nesting during Emotion conversion, if possible
+// stylelint-disable max-nesting-depth
+
 .euiFormControlLayout {
   // Let the height expand as needed
   @include euiFormControlSize($includeAlternates: true);
@@ -71,16 +74,15 @@
       background-color: $euiFormInputGroupLabelBackground;
     }
 
-
     &.euiButtonIcon,
     &.euiButtonEmpty,
     .euiButtonIcon,
     .euiButtonEmpty {
-      transform: none !important;
+      transform: none !important; // stylelint-disable-line declaration-no-important
 
       // Undo sizing from icons inside buttons
       .euiIcon {
-        background: none !important;
+        background: none !important; // stylelint-disable-line declaration-no-important
         padding: 0;
         width: $euiSize;
       }
@@ -115,7 +117,7 @@
     max-width: 50%; // Make sure max-width only applies to the outer most append/prepend element
   }
 
-  // sass-lint:disable-block no-important
+  // stylelint-disable declaration-no-important
   // This is the only way to target specific components to override styling
 
   // TEXT
@@ -141,7 +143,6 @@
     }
   }
 
-  //
   // BORDERS on buttons only
 
   .euiButtonEmpty {
@@ -156,7 +157,6 @@
     border-left: $euiFormInputGroupBorder;
   }
 
-  //
   // Compressed alterations
 
   &.euiFormControlLayout--compressed {
@@ -184,7 +184,6 @@
     }
   }
 
-  //
   // ReadOnly alterations
   &.euiFormControlLayout--readOnly {
     cursor: default;

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

@@ -22,6 +22,7 @@
 
     .euiFormControlLayoutDelimited__input {
       height: 100%;
+      max-width: none;
       padding-left: $euiFormControlCompressedPadding;
       padding-right: $euiFormControlCompressedPadding;
     }
@@ -72,20 +73,17 @@
 }
 
 .euiFormControlLayoutDelimited__input {
-  // sass-lint:disable-block no-important
+  // stylelint-disable declaration-no-important
   box-shadow: none !important;
   border-radius: 0 !important;
+  // stylelint-enable declaration-no-important
   text-align: center;
   height: 100%;
   min-width: 0; // Fixes FF
-
-  .euiFormControlLayoutDelimited[class*='--compressed'] & {
-    max-width: none;
-  }
 }
 
 .euiFormControlLayoutDelimited__delimeter {
-  // sass-lint:disable-block no-important
+  // stylelint-disable-next-line declaration-no-important
   line-height: 1 !important; // Override EuiText line-height
   flex: 0 0 auto;
   padding-left: $euiFormControlPadding / 2;

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

@@ -61,6 +61,8 @@
     margin-top: $euiSizeM; // More spacing since we reduced the height to match that of the switch
   }
 
+  // TODO: Address nesting during Emotion conversion, if possible
+  // stylelint-disable max-nesting-depth
   &.euiFormRow--hasSwitch {
     .euiFormRow__labelWrapper {
       line-height: $euiSwitchHeight - 1px; // The 1px less helps the alignment of the text baseline
@@ -80,6 +82,7 @@
       margin-top: $euiSizeM; // More spacing since we reduced the height to match that of the switch
     }
   }
+  // stylelint-enable max-nesting-depth
 }
 
 .euiFormRow__fieldWrapperDisplayOnly {

package/src/components/form/radio/_radio.scss

@@ -1,3 +1,6 @@
+// TODO: Address nesting during Emotion conversion, if possible
+// stylelint-disable max-nesting-depth
+
 /**
   * 1. Float above the visual radio and match its dimension, so that when users try to click it
   *    they actually click this input.
@@ -43,12 +46,11 @@
     }
 
     &[disabled] {
-      //sass-lint:disable no-important
-      cursor: not-allowed !important;
+      cursor: not-allowed !important; // stylelint-disable-line declaration-no-important
 
       ~ .euiRadio__label {
         color: $euiFormControlDisabledColor;
-        cursor: not-allowed !important;
+        cursor: not-allowed !important; // stylelint-disable-line declaration-no-important
       }
 
       + .euiRadio__circle {

package/src/components/form/select/_select.scss

@@ -25,7 +25,7 @@
   }
 
   // Turn off linter for some MS specific bits.
-  // sass-lint:disable no-vendor-prefixes
+  // stylelint-disable selector-no-vendor-prefix
   &::-ms-expand {
     display: none;
   }

package/src/components/form/switch/_switch.scss

@@ -1,3 +1,6 @@
+// TODO: Address nesting during Emotion conversion, if possible
+// stylelint-disable max-nesting-depth
+
 .euiSwitch {
   position: relative;
   display: inline-flex;
@@ -181,7 +184,6 @@
   // Compressed and mini switches have some style overlap
   &.euiSwitch--compressed,
   &.euiSwitch--mini {
-
     .euiSwitch__button[aria-checked='false'] {
       .euiSwitch__thumb {
         left: 1px;

package/src/components/header/_mixins.scss

@@ -13,7 +13,7 @@
   }
 
   .euiHeaderSectionItem {
-    &:after {
+    &::after {
       background: lightOrDarkTheme($euiColorDarkShade, $euiColorLightestShade);
     }
   }

package/src/components/header/header_section/_header_section_item.scss

@@ -5,7 +5,7 @@
   display: flex;
   align-items: center;
 
-  &:after {
+  &::after {
     position: absolute;
     content: '';
     top: $euiSize;
@@ -16,14 +16,14 @@
 }
 
 .euiHeaderSectionItem--borderLeft {
-  &:after {
+  &::after {
     left: 0;
     width: 1px;
   }
 }
 
 .euiHeaderSectionItem--borderRight {
-  &:after {
+  &::after {
     width: 1px;
     left: auto;
     right: 0;
@@ -37,7 +37,7 @@
 
   .euiHeaderSectionItem--borderLeft,
   .euiHeaderSectionItem--borderRight {
-    &:after {
+    &::after {
       display: none;
     }
   }

package/src/components/header/header_section/_header_section_item_button.scss

@@ -22,7 +22,6 @@
   }
 }
 
-
 .euiHeaderSectionItemButton__content {
   // This element is a span and we're changing the display because inline elements can’t take a transform
   display: inline-block;