@elastic/eui 71.0.0 → 72.0.0

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

package/src/components/resizable_container/_resizable_button.scss

@@ -5,20 +5,20 @@
   flex-shrink: 0;
   z-index: 1;
 
-  &:before,
-  &:after {
+  &::before,
+  &::after {
     content: '';
     display: block;
     position: absolute;
     top: 50%;
     left: 50%;
     background-color: $euiColorDarkestShade;
-    transition: (
+    transition:
       width $euiResizableButtonTransitionSpeed ease,
       height $euiResizableButtonTransitionSpeed ease,
       transform $euiResizableButtonTransitionSpeed ease,
       background-color $euiResizableButtonTransitionSpeed ease
-    );
+    ;
   }
 
   &.euiResizableButton--horizontal {
@@ -27,17 +27,17 @@
     margin-left: -($euiResizableButtonSize / 2);
     margin-right: -($euiResizableButtonSize / 2);
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       width: 1px;
       height: $euiSizeM;
     }
 
-    &:before {
+    &::before {
       transform: translate(-2px, -50%);
     }
 
-    &:after {
+    &::after {
       transform: translate(1px, -50%);
     }
   }
@@ -48,82 +48,82 @@
     margin-top: -($euiResizableButtonSize / 2);
     margin-bottom: -($euiResizableButtonSize / 2);
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       width: $euiSizeM;
       height: 1px;
     }
 
-    &:before {
+    &::before {
       transform: translate(-50%, -2px);
     }
 
-    &:after {
+    &::after {
       transform: translate(-50%, 1px);
     }
   }
 
-  //Lighten the "grab" icon on :hover
+  // Lighten the "grab" icon on :hover
   &:hover:not(:disabled) {
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       background-color: $euiColorMediumShade;
-      transition-delay: $euiResizableButtonTransitionSpeed; //Delay transition on hover so animation is not accidentally triggered on mouse over
+      transition-delay: $euiResizableButtonTransitionSpeed; // Delay transition on hover so animation is not accidentally triggered on mouse over
     }
   }
 
-  //Add a transparent background to the container and emphasis the "grab" icon with primary color on :focus
+  // Add a transparent background to the container and emphasis the "grab" icon with primary color on :focus
   &:focus:not(:disabled) {
     background-color: transparentize($euiColorPrimary, .9);
 
-    &:before,
-    &:after {
+    &::before,
+    &::after {
       background-color: $euiColorPrimary;
       // Overrides default transition so that "grab" icon background-color doesn't animate
-      transition: (
+      transition:
         width $euiResizableButtonTransitionSpeed ease,
         height $euiResizableButtonTransitionSpeed ease,
         transform $euiResizableButtonTransitionSpeed ease
-      );
+      ;
       transition-delay: $euiResizableButtonTransitionSpeed / 2;
     }
   }
 
-  //Morph the "grab" icon into a fluid 2px straight line on :hover and :focus
+  // Morph the "grab" icon into a fluid 2px straight line on :hover and :focus
   &:hover:not(:disabled),
   &:focus:not(:disabled) {
     &.euiResizableButton--horizontal {
-      &:before,
-      &:after {
+      &::before,
+      &::after {
         height: 100%;
       }
 
-      &:before {
+      &::before {
         transform: translate(-1px, -50%);
       }
 
-      &:after {
+      &::after {
         transform: translate(0, -50%);
       }
     }
 
     &.euiResizableButton--vertical {
-      &:before,
-      &:after {
+      &::before,
+      &::after {
         width: 100%;
       }
 
-      &:before {
+      &::before {
         transform: translate(-50%, -1px);
       }
 
-      &:after {
+      &::after {
         transform: translate(-50%, 0);
       }
     }
   }
 
   &:disabled {
-    display: none !important; // sass-lint:disable-line no-important
+    display: none !important; // stylelint-disable-line declaration-no-important
   }
 }

package/src/components/resizable_container/_resizable_collapse_button.scss

@@ -1,5 +1,5 @@
 // This file has lots of modifiers and is somewhat nesty by nature because of positioning
-// sass-lint:disable nesting-depth
+// stylelint-disable max-nesting-depth
 
 /**
  * 1. The default position of the button should always be `middle`, so
@@ -13,7 +13,7 @@
   position: absolute;
   z-index: 2;
   // Remove animations from EuiButtonIcon because of the custom transforms
-  animation: none !important; // sass-lint:disable-line no-important
+  animation: none !important; // stylelint-disable-line declaration-no-important
   // Remove transition from EuiButtonIcon because of the custom transforms
   transition-property: background, box-shadow;
 
@@ -69,9 +69,9 @@
     }
 
     &.euiResizableToggleButton-isCollapsed {
-      top: 0 !important; // sass-lint:disable-line no-important
-      bottom: 0 !important; // sass-lint:disable-line no-important
-      transform: none !important; // sass-lint:disable-line no-important
+      top: 0 !important; // stylelint-disable-line declaration-no-important
+      bottom: 0 !important; // stylelint-disable-line declaration-no-important
+      transform: none !important; // stylelint-disable-line declaration-no-important
       height: 100%;
 
       &.euiResizableToggleButton--top {
@@ -124,10 +124,10 @@
     }
 
     &.euiResizableToggleButton-isCollapsed {
-      top: 0 !important; // sass-lint:disable-line no-important
-      bottom: 0 !important; // sass-lint:disable-line no-important
-      left: 0 !important; // sass-lint:disable-line no-important
-      transform: none !important; // sass-lint:disable-line no-important
+      top: 0 !important; // stylelint-disable-line declaration-no-important
+      bottom: 0 !important; // stylelint-disable-line declaration-no-important
+      left: 0 !important; // stylelint-disable-line declaration-no-important
+      transform: none !important; // stylelint-disable-line declaration-no-important
       width: 100%;
 
       &.euiResizableToggleButton--left {

package/src/components/selectable/selectable_templates/_selectable_template_sitewide_option.scss

@@ -1,6 +1,6 @@
 .euiSelectableTemplateSitewide__listItem {
   .euiSelectableListItem__text {
-    text-decoration: none !important; // sass-lint:disable-line no-important
+    text-decoration: none !important; // stylelint-disable-line declaration-no-important
   }
 
   // TODO: Any better way to override this focus underline?

package/src/components/side_nav/_mixins.scss

@@ -1,4 +1,4 @@
-// sass-lint:disable indentation no-color-keywords no-color-literals
+// stylelint-disable color-named
 
 @mixin euiSideNavEmbellish {
   background:

package/src/components/side_nav/_side_nav.scss

@@ -4,7 +4,7 @@
   border-bottom: $euiBorderThin;
   width: 100%;
   text-align: left;
-  border-radius: 0 !important; // sass-lint:disable-line no-important
+  border-radius: 0 !important; // stylelint-disable-line declaration-no-important
   font-size: $euiFontSizeM;
   padding: 0 $euiSize; // This plus the inner padding is equal to paddingSize large for EuiPage
 
@@ -22,6 +22,7 @@
 }
 
 // Loop through the breakpoints and apply mobile styles only to the right className
+// stylelint-disable max-nesting-depth
 @each $breakpoint in $euiBreakpointKeys {
   @include euiBreakpoint($breakpoint) {
     .euiSideNav__contentMobile-#{$breakpoint} {

package/src/components/side_nav/_side_nav_item.scss

@@ -5,7 +5,6 @@
  * 4. Restrict the underline to the button __label so it doesn't affect other components that might live within
  */
 
-
 .euiSideNavItemButton {
   @include euiFontSizeS;
   text-align: left; /* 1 */
@@ -89,7 +88,7 @@
     position: static;
     margin-left: 0;
 
-    &:after {
+    &::after {
       display: none;
     }
   }
@@ -148,7 +147,7 @@
     padding-left: $euiSizeS;
     padding-right: $euiSizeS; /* 2 */
 
-    &:after {
+    &::after {
       position: absolute; /* 2 */
       content: '';
       top: $euiSizeM;

package/src/components/steps/_steps.scss

@@ -3,9 +3,9 @@
  */
 
 .euiStep {
-  // sass-lint:disable indentation
   // Create border on all but the last step
   &:not(:last-of-type) {
+    // stylelint-disable indentation
     background-image: linear-gradient(
                         to right,
                         transparent 0,
@@ -15,6 +15,7 @@
                         transparent ($euiSize + 1),
                         transparent 100%
                       );
+    // stylelint-enable indentation
     background-repeat: no-repeat;
     background-position: left $euiSizeXXL;
   }

package/src/components/suggest/_suggest_input.scss

@@ -1,4 +1,4 @@
 .euiSuggestInput__statusIcon {
-  // sass-lint:disable-block no-important
+  // stylelint-disable-next-line declaration-no-important
   background-color: transparent !important; // Override typical append coloring
 }

package/src/components/suggest/_suggest_item.scss

@@ -17,7 +17,8 @@
 
 // When `onClick` is provided, EuiSuggestItem renders as a <button>
 // and we want to adjust styles to better afford the interaction
-button.euiSuggestItem { // sass-lint:disable-line no-qualifying-elements
+// stylelint-disable selector-no-qualifying-type
+button.euiSuggestItem {
   width: 100%;
   text-align: left;
 
@@ -31,6 +32,7 @@ button.euiSuggestItem { // sass-lint:disable-line no-qualifying-elements
     }
   }
 }
+// stylelint-enable selector-no-qualifying-type
 
 @each $name, $color in $euiSuggestItemColors {
   .euiSuggestItem__type--#{$name} {
@@ -84,11 +86,10 @@ button.euiSuggestItem { // sass-lint:disable-line no-qualifying-elements
 
   &.euiSuggestItem__description--wrap {
     @include euiTextBreakWord;
-    white-space: normal !important; // sass-lint:disable-line no-important
+    white-space: normal !important; // stylelint-disable-line declaration-no-important
   }
 }
 
-
 // For specifically within EuiSelectable
 
 .euiSuggestItemOption {

package/src/components/table/_responsive.scss

@@ -1,3 +1,6 @@
+// TODO: Address nesting during Emotion conversion, if possible
+// stylelint-disable max-nesting-depth
+
 .euiTableRowCell__mobileHeader {
   // Don't display by default unless table is responsive
   display: none;
@@ -5,20 +8,19 @@
 
 @include euiBreakpoint('xs', 's') {
   .euiTableRowCell--hideForMobile { // must come last to override any special cases
-    // sass-lint:disable-block no-important
+    // stylelint-disable-next-line declaration-no-important
     display: none !important;
   }
 }
 
 @include euiBreakpoint('m', 'l', 'xl') {
   .euiTableRowCell--hideForDesktop { // must come last to override any special cases
-    // sass-lint:disable-block no-important
+    // stylelint-disable-next-line declaration-no-important
     display: none !important;
   }
 }
 
 @include euiBreakpoint('xs', 's') {
-
   .euiTable.euiTable--responsive {
     // Not allowing compressed styles in mobile view (for now)
 

package/src/components/table/_table.scss

@@ -82,9 +82,7 @@
     background-color: $euiTableHoverColor;
   }
 
-
   &.euiTableRow-isClickable {
-
     &:hover {
       background-color: $euiTableHoverClickableColor;
       cursor: pointer;
@@ -111,7 +109,7 @@
     }
 
     &:hover,
-    &:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell  {
+    &:hover + .euiTableRow.euiTableRow-isExpandedRow .euiTableRowCell {
       background-color: $euiTableHoverSelectedColor;
     }
   }
@@ -189,7 +187,7 @@
 .euiTableCellContent--overflowingContent {
   overflow: visible;
   white-space: normal;
-  //* 4 */ overflow-wrap is not supported on flex parents
+  // /* 4 */ overflow-wrap is not supported on flex parents
   word-break: break-word;
 }
 

package/src/components/table/mobile/_mobile.scss

@@ -5,7 +5,6 @@
 }
 
 @include euiBreakpoint('xs', 's') {
-
   .euiTableHeaderMobile {
     display: flex;
     justify-content: flex-end;
@@ -15,5 +14,4 @@
   .euiTableSortMobile {
     display: block;
   }
-
 }

package/src/components/tree_view/tree_view.scss

@@ -41,7 +41,6 @@
   .euiTreeView__iconPlaceholder {
     width: $euiSizeXL;
   }
-
 }
 
 .euiTreeView__nodeLabel {
@@ -58,6 +57,8 @@
   }
 }
 
+// TODO: Address nesting during Emotion conversion, if possible
+// stylelint-disable max-nesting-depth
 .euiTreeView--compressed {
   .euiTreeView__node {
     max-height: $euiSizeL;
@@ -65,7 +66,6 @@
 
     .euiTreeView__nodeInner {
       height: $euiSizeL;
-
     }
 
     .euiTreeView__iconWrapper {