@elastic/eui 71.0.0 → 71.1.0

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 {

package/src/global_styling/mixins/_form.scss

@@ -55,7 +55,7 @@
 }
 
 @mixin euiPlaceholderPerBrowser {
-  // sass-lint:disable-block no-vendor-prefixes
+  // stylelint-disable selector-no-vendor-prefix
   // Each prefix must be its own content block
   &::-webkit-input-placeholder { @content; opacity: 1; }
   &::-moz-placeholder { @content; opacity: 1; }
@@ -78,7 +78,6 @@
   font-size: $euiFontSizeS;
   color: $euiTextColor;
 
-  // sass-lint:disable-block mixins-before-declarations
   @include euiPlaceholderPerBrowser {
     color: $euiFormControlPlaceholderText;
   }
@@ -143,7 +142,6 @@
 // 1. Must supply both values to background-size or some browsers apply the single value to both directions
 
 @mixin euiFormControlDefaultShadow($borderOnly: false) {
-  // sass-lint:disable-block indentation
   background-color: $euiFormBackgroundColor;
   background-repeat: no-repeat;
   background-size: 0% 100%; // 1
@@ -164,14 +162,13 @@
 
   // Fixes bug in Firefox where adding a transition to the background-color
   // caused a flash of differently styled dropdown.
-  @supports (-moz-appearance: none) { // sass-lint:disable-line no-vendor-prefixes
+  @supports (-moz-appearance: none) {
     // List *must* be in the same order as the above.
     transition-property: box-shadow, background-image, background-size;
   }
 }
 
 @mixin euiFormControlFocusStyle($borderOnly: false) {
-  // sass-lint:disable-block indentation, empty-args
   background-color: tintOrShade($euiColorEmptyShade, 0%, 40%);
   background-image: euiFormControlGradient();
   background-size: 100% 100%; // 1
@@ -180,8 +177,7 @@
   @if ($borderOnly) {
     box-shadow: inset 0 0 0 1px $euiFormBorderColor;
   } @else {
-    box-shadow:
-      inset 0 0 0 1px $euiFormBorderColor;
+    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
   }
 }
 
@@ -191,7 +187,6 @@
 }
 
 @mixin euiFormControlDisabledTextStyle {
-  // sass-lint:disable-block no-vendor-prefixes
   color: $euiFormControlDisabledColor;
   -webkit-text-fill-color: $euiFormControlDisabledColor; // Required for Safari
 }
@@ -202,14 +197,12 @@
   background: $euiFormBackgroundDisabledColor;
   box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
 
-  // sass-lint:disable-block mixins-before-declarations
   @include euiPlaceholderPerBrowser {
     color: $euiFormControlDisabledColor;
   }
 }
 
 @mixin euiFormControlReadOnlyStyle {
-  // sass-lint:disable-block no-vendor-prefixes
   cursor: default;
   color: $euiTextColor;
   -webkit-text-fill-color: $euiTextColor; // Required for Safari
@@ -219,7 +212,6 @@
   box-shadow: inset 0 0 0 1px $euiFormBorderDisabledColor;
 }
 
-
 // 2. Override invalid state with focus state.
 
 @mixin euiFormControlStyle($borderOnly: false, $includeStates: true, $includeSizes: true) {
@@ -249,7 +241,6 @@
     }
 
     // Needs to be set for autofill
-    // sass-lint:disable-block no-vendor-prefixes
     &:-webkit-autofill {
       -webkit-text-fill-color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
 
@@ -257,7 +248,6 @@
         color: lightOrDarkTheme($euiColorDarkestShade, $euiColorLightShade);
       }
     }
-
   }
 
   @if ($includeSizes) {
@@ -266,7 +256,7 @@
     }
 
     &--inGroup {
-      // sass-lint:disable-block no-important
+      // stylelint-disable-next-line declaration-no-important
       box-shadow: none !important;
       border-radius: 0;
     }
@@ -313,12 +303,11 @@
   } @else if $type == 'square' {
     border-radius: $euiCheckboxBorderRadius;
   }
-  // sass-lint:disable-block indentation
+
   transition: background-color $euiAnimSpeedFast ease-in,
-              border-color $euiAnimSpeedFast ease-in;
+              border-color $euiAnimSpeedFast ease-in; // stylelint-disable-line indentation
 }
 
-
 @mixin euiCustomControlSelected($type: null) {
   border-color: $euiColorPrimary;
   background-color: $euiColorPrimary;
@@ -363,7 +352,7 @@
 
 @mixin euiHiddenSelectableInput {
   position: absolute;
-  // sass-lint:disable no-important
+  // stylelint-disable-next-line declaration-no-important
   opacity: 0 !important; // Make sure it's still hidden when :disabled
   width: 100%;
   height: 100%;

package/src/global_styling/mixins/_header.scss

@@ -1,9 +1,9 @@
 @import '../variables/header';
 
 @mixin euiHeaderAffordForFixed($headerHeight: $euiHeaderHeightCompensation) {
-  // The `&` allows for grouping inside another specific body class.
+  // The `@at-root #{&}` allows for grouping alongside another specific body class.
   // When not applied inside of another selector, it simply renders with the single class
-  &.euiBody--headerIsFixed {
+  @at-root #{&}.euiBody--headerIsFixed {
     padding-top: $headerHeight;
 
     // When the EuiHeader is fixed, we need to account for it in the position of the flyout

package/src/global_styling/mixins/_helpers.scss

@@ -4,14 +4,13 @@
 @mixin euiScrollBar($thumbColor: $euiColorDarkShade, $trackBackgroundColor: transparent, $size: 'thin') {
   // Firefox's scrollbar coloring cascades, but the sizing does not,
   // so it's being added to this mixin for allowing support wherever custom scrollbars are
-  // sass-lint:disable-block no-misspelled-properties
   scrollbar-color: transparentize($thumbColor, .5) $trackBackgroundColor; // Firefox support
 
   @if ($size == 'thin') {
     scrollbar-width: thin;
   }
 
-  // sass-lint:disable-block no-vendor-prefixes
+  // stylelint-disable selector-no-vendor-prefix
   &::-webkit-scrollbar {
     width: $euiScrollBar;
     height: $euiScrollBar;

package/src/global_styling/mixins/_icons.scss

@@ -1,6 +1,6 @@
 // For using icons as background images (data-uri)
 @mixin euiIconBackground($type, $color: $euiColorEmptyShade) {
-  // sass-lint:disable-block quotes
+  // stylelint-disable string-quotes
   @if variable-exists(type) == false {
     @error 'A $type:string must be provided to @mixin euiIconBackground().';
   } @else if type-of($color) != color {

package/src/global_styling/mixins/_range.scss

@@ -1,6 +1,3 @@
-// Prefixes are unique in this file
-// sass-lint:disable no-vendor-prefixes
-
 /*
 The CSS in JS version of this file lives in:
   - src/components/form/range/range.styles.ts
@@ -31,10 +28,10 @@ The following files still use the Sass version:
 }
 
 @mixin euiRangeThumbBoxShadow {
-  // sass-lint:disable-block no-color-literals
-  box-shadow: 0 0 0 1px $euiRangeThumbBorderColor,
-  0 2px 2px -1px rgba($euiShadowColor, .2),
-  0 1px 5px -2px rgba($euiShadowColor, .2);
+  box-shadow:
+    0 0 0 1px $euiRangeThumbBorderColor,
+    0 2px 2px -1px rgba($euiShadowColor, .2),
+    0 1px 5px -2px rgba($euiShadowColor, .2);
 }
 
 @mixin euiRangeThumbFocusBoxShadow {
@@ -58,7 +55,6 @@ The following files still use the Sass version:
   &::-ms-thumb { @content; }
 }
 
-
 @mixin euiRangeThumbFocus {
   @include euiRangeThumbBorder;
   @include euiRangeThumbFocusBoxShadow;

package/src/global_styling/mixins/_responsive.scss

@@ -1,8 +1,3 @@
-// This file makes use of double quotes to format errors with nested single quotes
-// The indentation linting freaks out on comments above else statements and is disabled.
-
-// sass-lint:disable quotes, no-warn, indentation
-
 // A sem-complicated mixin for breakpoints, that takes any number of
 // named breakpoints that exists in $euiBreakpoints.
 
@@ -23,7 +18,7 @@
         @media only screen and (min-width: $minSize) {
           @content;
         }
-      // If it's not the last item, add a max-width
+        // If it's not the last item, add a max-width
       } @else {
 
         // Set the max size to the value of the next size (-1px as to not overlap)
@@ -34,14 +29,14 @@
           @media only screen and (max-width: $maxSize) {
             @content;
           }
-        // Otherwise it should have a min and max width
+          // Otherwise it should have a min and max width
         } @else {
           @media only screen and (min-width: $minSize) and (max-width: $maxSize) {
             @content;
           }
         }
       }
-    // If it's not a known breakpoint, throw a warning
+      // If it's not a known breakpoint, throw a warning
     } @else {
       @warn "euiBreakpoint(): '#{$size}' is not a valid size in $euiBreakpoints. Accepted values are '#{$euiBreakpointKeys}'";
     }

package/src/global_styling/mixins/_shadow.scss

@@ -1,8 +1,3 @@
-// This file uses RGBA literal values responsibly
-// This file uses off-pattern indentation to be more readable
-
-// sass-lint:disable no-color-literals, no-color-keywords, indentation, quotes
-
 @function shadowOpacity($opacity) {
   @if (lightness($euiTextColor) < 50) {
     @return $opacity * 1;
@@ -76,15 +71,16 @@
     0 23px 35px rgba($color, shadowOpacity(.05));
 }
 
+// stylelint-disable color-named
 @mixin euiOverflowShadow($direction: 'y', $side: 'both') {
   $hideHeight: $euiScrollBarCornerThin * 1.25;
   $gradient: null;
   $gradientStart:
-  transparentize(red, .9) 0%,
-  transparentize(red, 0) $hideHeight;
+    transparentize(red, .9) 0%,
+    transparentize(red, 0) $hideHeight;
   $gradientEnd:
-  transparentize(red, 0) calc(100% - #{$hideHeight}),
-  transparentize(red, .9) 100%;
+    transparentize(red, 0) calc(100% - #{$hideHeight}),
+    transparentize(red, .9) 100%;
   @if ($side == 'both' or $side == 'start' or $side == 'end') {
     @if ($side == 'both') {
       $gradient: $gradientStart, $gradientEnd;