@elastic/eui 71.0.0 → 72.0.0

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

@@ -1,6 +1,19 @@
 .euiQuickSelectPopover__content {
   width: $euiFormMaxWidth;
   max-width: 100%;
+
+  .euiQuickSelectPopover__panel {
+    &:not(:first-child) {
+      border-top: $euiBorderThin;
+      padding-top: $euiSizeM;
+      margin-top: $euiSizeM;
+    }
+
+    .euiQuickSelectPopover__panelTitle {
+      float: left;
+      margin-bottom: $euiSizeM;
+    }
+  }
 }
 
 .euiQuickSelectPopover__section {
@@ -9,11 +22,12 @@
   overflow: hidden;
   overflow-y: auto;
   margin: $euiSizeS 0 0;
+  clear: both;
 }
 
-// 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/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

@@ -64,31 +64,28 @@
 /**
   * 1. Don't block the user from dropping files onto the filepicker.
   * 2. Ensure space for import icon, loading spinner, and clear button (only if it has files)
-  * 3. Delay focus gradient or else it will only partially transition while file chooser opens
   * 4. Static height so that it doesn't shift its surrounding contents around
   */
 .euiFilePicker__prompt {
-  @include euiFormControlDefaultShadow;
   @include euiFormControlWithIcon; /* 2 */
   height: $euiFormControlHeight;
   padding-top: $euiFormControlPadding;
   padding-right: $euiFormControlPadding;
   padding-bottom: $euiFormControlPadding;
   pointer-events: none; /* 1 */
+  border: $euiBorderWidthThick dashed $euiColorLightShade;
   border-radius: $euiFormControlBorderRadius;
 
-  // sass-lint:disable-block indentation
   transition:
-    box-shadow $euiAnimSpeedFast ease-in,
-    background-color $euiAnimSpeedFast ease-in,
-    background-image $euiAnimSpeedFast ease-in,
-    background-size $euiAnimSpeedFast ease-in $euiAnimSpeedFast; /* 3 */
+    border-color $euiAnimSpeedFast ease-in,
+    background-color $euiAnimSpeedFast ease-in;
 
   .euiFilePicker--compressed & {
     @include euiFormControlStyleCompressed($includeStates: false);
     @include euiFormControlWithIcon($compressed: true); /* 2 */
     height: $euiFormControlCompressedHeight;
     border-radius: $euiFormControlCompressedBorderRadius;
+    box-shadow: none;
   }
 
   .euiFilePicker--large & {
@@ -105,7 +102,7 @@
   }
 
   .euiFilePicker-isInvalid & {
-    @include euiFormControlInvalidStyle;
+    border: $euiBorderWidthThick dashed $euiColorDanger;
   }
 }
 
@@ -114,9 +111,14 @@
   @include euiTextTruncate;
   line-height: $euiSize;
 
-  // make normal sized prompt look like placeholder
+  // Make normal sized prompt stand out a bit more - on the large size we don't need this as it's already identifiable
   .euiFilePicker:not(.euiFilePicker--large):not(.euiFilePicker-hasFiles) & {
-    color: $euiColorMediumShade;
+    color: $euiColorPrimaryText;
+  }
+
+  // Offset/center prompt text for non-large file-pickers
+  .euiFilePicker:not(.euiFilePicker--large) & {
+    margin-top: $euiSizeXS / -2;
   }
 }
 
@@ -151,16 +153,13 @@
 // Focus
 .euiFilePicker__showDrop .euiFilePicker__prompt,
 .euiFilePicker__input:focus + .euiFilePicker__prompt {
-  @include euiFormControlFocusStyle;
-
-  .euiFilePicker--compressed & {
-    @include euiFormControlFocusStyle($borderOnly: true);
-  }
+  border-color: $euiColorPrimary;
 }
 
 // Disabled
 .euiFilePicker__input:disabled + .euiFilePicker__prompt {
   @include euiFormControlDisabledStyle;
+  box-shadow: none;
 }
 
 // Make space for the icons on the right
@@ -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;

package/src/components/key_pad_menu/_key_pad_menu_item.scss

@@ -4,8 +4,6 @@
  */
 .euiKeyPadMenuItem {
   @include euiFont; /* 1 */
-  // Disable indentation for transition legibility
-  // sass-lint:disable-block indentation
   display: block;
   padding: $euiSizeXS;
   height: $euiKeyPadMenuSize;
@@ -15,7 +13,6 @@
   border-radius: $euiBorderRadius;
   color: $euiTextColor; // Override possible link color
 
-  // sass-lint:disable-block mixins-before-declarations
   @include euiCanAnimate {
     transition:
       background-color $euiAnimSpeedFast ease-in,
@@ -32,8 +29,6 @@
       @include euiSlightShadow;
       border-color: $euiBorderColor;
 
-      // sass-lint:disable-block mixins-before-declarations
-      // sass-lint:disable-block nesting-depth
       @include euiCanAnimate {
         .euiKeyPadMenuItem__icon {
           transform: translateY(0);
@@ -50,10 +45,10 @@
   &.euiKeyPadMenuItem-isDisabled {
     @include euiDisabledState;
 
-    .euiKeyPadMenuItem__icon  {
+    .euiKeyPadMenuItem__icon {
       filter: grayscale(100%);
 
-      svg * { // sass-lint:disable-line nesting-depth
+      svg * { // stylelint-disable-line max-nesting-depth
         fill: $euiButtonColorDisabledText;
       }
     }