@elastic/eui 71.0.0 → 71.1.0

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/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;

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;
       }
     }

package/src/components/markdown_editor/_markdown_editor_drop_zone.scss

@@ -27,13 +27,13 @@
     .euiMarkdownEditorTextArea,
     .euiMarkdownEditorTextArea:focus,
     .euiMarkdownEditor:focus-within .euiMarkdownEditorTextArea {
-      // sass-lint:disable-block no-important
+      // stylelint-disable-next-line declaration-no-important
       background-color: transparentize($euiColorPrimary, .9) !important;
     }
 
     .euiMarkdownEditorTextArea,
     .euiMarkdownEditorTextArea:focus {
-      // sass-lint:disable-block no-important
+      // stylelint-disable-next-line declaration-no-important
       background-image: euiFormControlGradient($euiColorPrimary) !important;
     }
   }
@@ -43,7 +43,7 @@
     .euiMarkdownEditorTextArea,
     .euiMarkdownEditorTextArea:focus,
     .euiMarkdownEditor:focus-within .euiMarkdownEditorTextArea {
-      // sass-lint:disable-block no-important
+      // stylelint-disable-next-line declaration-no-important
       background-color: transparentize($euiColorDanger, .9) !important;
     }
   }
@@ -51,7 +51,7 @@
   &--hasError {
     .euiMarkdownEditorTextArea,
     .euiMarkdownEditorTextArea:focus {
-      // sass-lint:disable-block no-important
+      // stylelint-disable-next-line declaration-no-important
       background-image: euiFormControlGradient($euiColorDanger) !important;
     }
   }

package/src/components/markdown_editor/_markdown_editor_footer.scss

@@ -21,7 +21,7 @@
   }
 
   // overrides button empty styles so it can match the button icon
-  // So when we have an error this button appears smoothly 
+  // So when we have an error this button appears smoothly
   .euiMarkdownEditorFooter__uploadError {
     position: relative;
     left: -1px;

package/src/components/markdown_editor/_markdown_editor_text_area.scss

@@ -16,7 +16,6 @@
   // Removes default firefox margin
   margin: 0;
 
-  // sass-lint:disable-block indentation
   transition:
     box-shadow $euiAnimSpeedFast ease-in,
     background-image $euiAnimSpeedFast ease-in,
@@ -26,7 +25,7 @@
   &:focus,
   // preventing the text area of loosing focus when clicking on an action button
   // from the toolbar
-  .euiMarkdownEditor:focus-within &  {
+  .euiMarkdownEditor:focus-within & {
     background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
     background-image: euiFormControlGradient();
     background-size: 100% 100%;
@@ -41,4 +40,4 @@
   .euiMarkdownEditor:focus-within & {
     background: none;
   }
-}
+}

package/src/components/markdown_editor/_markdown_format.scss

@@ -34,6 +34,7 @@
 .euiMarkdownFormat {
   $euiMarkdownAlphaShade: rgba($euiColorFullShade, .15);
 
+  // stylelint-disable indentation
   $euiMarkdownBorderColors: (
     default: $euiMarkdownAlphaShade,
     subdued: $euiTextSubduedColor,
@@ -45,6 +46,7 @@
     inherit: currentColor,
     custom: currentColor,
   );
+  // stylelint-enable indentation
 
   // We're adjusting the borders of the elements by passing a color defined in $euiMarkdownBorderColors.
   // For the `custom` and `inherit` colors we're assigning the `currentColor` so we can get the current or computed value of the `color` property
@@ -59,12 +61,12 @@
   }
 
   .euiCheckbox {
-    // sass-lint:disable-block no-important
+    // stylelint-disable-next-line declaration-no-important
     margin-bottom: 0 !important;
   }
 
   // We're adjusting the position of the checkboxes so that when the text size is `relative` the checkboxes get better positioned
-  .euiCheckbox .euiCheckbox__input + .euiCheckbox__square  {
+  .euiCheckbox .euiCheckbox__input + .euiCheckbox__square {
     top: 50%;
     transform: translateY(-50%);
   }

package/src/components/notification/_notification_event.scss

@@ -22,7 +22,7 @@
   }
 
   &--isRead {
-    color: $euiColorDarkShade !important; // sass-lint:disable-line no-important
+    color: $euiColorDarkShade !important; // stylelint-disable-line declaration-no-important
   }
 }
 
@@ -37,4 +37,4 @@
     margin-top: $euiSizeS;
     margin-right: $euiSizeM;
   }
-}
+}

package/src/components/page/page_content/_page_content_body.scss

@@ -17,4 +17,3 @@
     padding: $amount;
   }
 }
-

package/src/components/page/page_content/_page_content_header_section.scss

@@ -15,4 +15,3 @@
     }
   }
 }
-

package/src/components/page/page_side_bar/_page_side_bar.scss

@@ -29,4 +29,3 @@
     top: 0;
   }
 }
-

package/src/components/panel/split_panel/_split_panel.scss

@@ -7,8 +7,8 @@
   .euiSplitPanel__inner {
     flex-basis: 0%; // Make sure they're evenly split
     // Ensure no movement if they have click handlers
-    transform: none !important; // sass-lint:disable-line no-important
-    box-shadow: none !important; // sass-lint:disable-line no-important
+    transform: none !important; // stylelint-disable-line declaration-no-important
+    box-shadow: none !important; // stylelint-disable-line declaration-no-important
   }
 }