@elastic/eui 71.0.0 → 71.1.0

package/src/global_styling/mixins/_states.scss

@@ -1,10 +1,10 @@
 @mixin euiFocusRing($size: 'small', $amsterdamOnlyProp: null) {
   @if $size == 'large' {
     // It's always OK to use the focus animation. This will take precedence over times we turn it off individually like EuiButtonEmpty
-    // sass-lint:disable-block no-important
+    // stylelint-disable-next-line declaration-no-important
     animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimateLarge !important;
   } @else {
-    // sass-lint:disable-block no-important
+    // stylelint-disable-next-line declaration-no-important
     animation: $euiAnimSpeedSlow $euiAnimSlightResistance 1 normal forwards focusRingAnimate !important;
   }
 }

package/src/global_styling/mixins/_typography.scss

@@ -1,5 +1,5 @@
-// sass-lint:disable no-vendor-prefixes
-// sass-lint:disable no-important
+// stylelint-disable property-no-vendor-prefix
+// stylelint-disable declaration-no-important
 
 @function fontSizeToRemOrEm($size, $sizingMethod: 'rem') {
   @if ($sizingMethod == 'rem') {
@@ -130,16 +130,14 @@
   word-break: break-word;
 }
 
-// Text truncation
-//
-// Prevent text from wrapping onto multiple lines, and truncate with an
-// ellipsis.
-//
-// 1. Ensure that the node has a maximum width after which truncation can
-//    occur.
-
+/**
+ * Text truncation
+ *
+ * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis.
+ *
+ * 1. Ensure that the node has a maximum width after which truncation can occur.
+ */
 @mixin euiTextTruncate {
-  // sass-lint:disable-block no-important
   max-width: 100%; // 1
   overflow: hidden !important;
   text-overflow: ellipsis !important;
@@ -150,13 +148,13 @@
   font-feature-settings: $euiFontFeatureSettings, 'tnum' 1; // Fixed-width numbers for tabular data
 }
 
-
-// Text weight shifting
-//
-// When changing the font-weight based the state of the component
-// this mixin will ensure that the sizing is dependent on the boldest
-// weight so it doesn't shifter sibling content.
-
+/**
+ * Text weight shifting
+ *
+ * When changing the font-weight based the state of the component
+ * this mixin will ensure that the sizing is dependent on the boldest
+ * weight so it doesn't shifter sibling content.
+ */
 @mixin euiTextShift($fontWeight: $euiFontWeightBold, $attr: 'data-text') {
   &::after {
     display: block;
@@ -167,4 +165,3 @@
     visibility: hidden;
   }
 }
-

package/src/global_styling/variables/_colors_vis.scss

@@ -1,4 +1,5 @@
 // Visualization colors
+// stylelint-disable color-no-hex
 
 // Maps allow for easier JSON usage
 // Use map_merge($euiColorVisColors, $yourMap) to change individual colors after importing ths file
@@ -59,7 +60,6 @@ $euiColorVis7: map-get(map-get($euiPaletteColorBlind, 'euiColorVis7'), 'graphic'
 $euiColorVis8: map-get(map-get($euiPaletteColorBlind, 'euiColorVis8'), 'graphic') !default;
 $euiColorVis9: map-get(map-get($euiPaletteColorBlind, 'euiColorVis9'), 'graphic') !default;
 
-// sass-lint:disable-block variable-name-format
 $euiColorVis0_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis0'), 'behindText') !default;
 $euiColorVis1_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis1'), 'behindText') !default;
 $euiColorVis2_behindText: map-get(map-get($euiPaletteColorBlind, 'euiColorVis2'), 'behindText') !default;

package/src/global_styling/variables/_typography.scss

@@ -20,7 +20,6 @@ $euiFontSizeXXL:    $euiFontSize * nth($euiTextScale, 1) !default; // 36px
 $euiLineHeight:     1.5 !default;
 $euiBodyLineHeight: 1 !default;
 
-
 // Normally functions are imported before variables in `_index.scss` files
 // But because they need to consume some typography variables they need to live here
 @function convertToRem($size) {
@@ -32,10 +31,9 @@ $euiBodyLineHeight: 1 !default;
 //     If our base font size (euiFontSize) is 16, our baseline is 8 (16*1.5 / 3). To ensure the
 //     text stays on the baseline, we pass a multiplier to calculate a line-height in rems.
 @function lineHeightFromBaseline($multiplier: 3) {
-  @return convertToRem(($euiFontSize/2)*$multiplier);
+  @return convertToRem(($euiFontSize / 2) * $multiplier);
 }
 
-
 // Titles map
 // Lists all the properties per EuiTitle size that then gets looped through to create the selectors.
 // The map allows for tokenization and easier customization per theme, otherwise you'd have to override the selectors themselves

package/src/themes/amsterdam/_colors_dark.scss

@@ -1,3 +1,5 @@
+// stylelint-disable color-no-hex
+
 // This extra import allows any variables that are created via functions to work when loaded into JS
 @import '../../global_styling/functions/index';
 
@@ -45,4 +47,3 @@ $euiLinkColor: $euiColorPrimaryText !default;
 // Charts
 $euiColorChartLines: $euiColorLightShade !default;
 $euiColorChartBand: tint($euiColorLightestShade, 2.5%) !default;
-

package/src/themes/amsterdam/_colors_light.scss

@@ -1,3 +1,5 @@
+// stylelint-disable color-no-hex
+
 // This extra import allows any variables that are created via functions to work when loaded into JS
 @import '../../global_styling/functions/index';
 

package/src/themes/amsterdam/global_styling/mixins/_link.scss

@@ -18,6 +18,6 @@
 
 @mixin euiLinkFocus {
   text-decoration: underline;
-  // sass-lint:disable-block no-misspelled-properties no-important
+  // stylelint-disable-next-line declaration-no-important
   text-decoration-thickness: $euiBorderWidthThick !important;
 }

package/src/themes/amsterdam/global_styling/mixins/_states.scss

@@ -63,4 +63,3 @@
     @include euiDisabledState($disabledColor);
   }
 }
-

package/src/themes/amsterdam/global_styling/mixins/_typography.scss

@@ -1,7 +1,6 @@
 // Font sizing extends, using rem mixin
 // All line-heights are aligned to baseline grid
-// sass-lint:disable no-vendor-prefixes
-
+// stylelint-disable property-no-vendor-prefix
 
 @function fontSizeToRemOrEm($size, $sizingMethod: 'rem') {
   @if ($sizingMethod == 'rem') {

package/src/themes/amsterdam/global_styling/react_date_picker/_date_picker_days.scss

@@ -82,7 +82,6 @@
   &--in-range#{&}--disabled:not(.react-datepicker__day--selected):hover {
     $backgroundColor: transparentize($euiColorPrimary, $euiButtonDefaultTransparency);
 
-    // sass-lint:disable-block indentation
     box-shadow: -2px 0 $backgroundColor,
                  2px 0 $backgroundColor;
     border-radius: 0;

package/src/themes/amsterdam/global_styling/react_date_picker/_date_picker_month_year.scss

@@ -23,7 +23,6 @@
 .react-datepicker__header__dropdown {
   padding: $euiDatePickerGap * 2;
   display: flex;
-  // sass-lint:disable-block no-misspelled-properties
   gap: $euiDatePickerGap;
   position: absolute;
   top: 0;

package/src/themes/amsterdam/global_styling/react_date_picker/_date_picker_times.scss

@@ -43,7 +43,7 @@
   @include euiYScroll;
   padding: $euiSizeXS $euiSizeM;
   // Set the min-height with the following, but it should stretch to fit if the container is larger
-  height: 100px !important; // sass-lint:disable-line no-important
+  height: 100px !important;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
@@ -54,7 +54,6 @@
 // Mainly a copy/paste of .euiEmptyButton
 .react-datepicker__time-list-item {
   @include euiButton;
-  // sass-lint:disable-block no-important
   transform: none !important; /* 1 */
   animation: none !important; /* 1 */
   transition-timing-function: ease-in; /* 2 */
@@ -93,7 +92,7 @@
 
 // When in time only mode we make the dropdown look more like the combo box styling.
 .react-datepicker--time-only {
-  padding: 0 !important; // sass-lint:disable-line no-important
+  padding: 0 !important;
 
   .react-datepicker__time-container {
     background-color: transparent;
@@ -101,7 +100,7 @@
   }
 
   .react-datepicker__time-list {
-    height: 204px !important; // sass-lint:disable-line no-important
+    height: 204px !important;
   }
 
   .react-datepicker__time-list-item {

package/src/themes/amsterdam/global_styling/react_date_picker/_mixins.scss

@@ -1,6 +1,5 @@
 // Because we don't have control over react-datepicker's dom we use SVG URIs for the navigation arrows.
 // There is one for light and dark.
-// sass-lint:disable-block url-quotes
 @mixin datePickerCaret {
   background-position: center;
   @if (lightness($euiColorEmptyShade) > 50) {

package/src/themes/amsterdam/global_styling/variables/_typography.scss

@@ -19,7 +19,6 @@ $euiBodyLineHeight: 1.142857143; // 16px from a 14px base font size to ensure it
 $euiCodeFontWeightRegular: 400;
 $euiCodeFontWeightBold: 700;
 
-
 // Normally functions are imported before variables in `_index.scss` files
 // But because they need to consume some typography variables they need to live here
 @function convertToRem($size) {
@@ -28,7 +27,7 @@ $euiCodeFontWeightBold: 700;
 
 // Use 8px increments for base gridline
 @function lineHeightFromBaseline($multiplier: 3) {
-  @return convertToRem(($euiSize/2)*$multiplier);
+  @return convertToRem(($euiSize / 2) * $multiplier);
 }
 
 $euiTitles: (

package/src/themes/amsterdam/overrides/_color_stops.scss

@@ -9,7 +9,6 @@
 }
 
 .euiColorStopThumb.euiRangeThumb:not(:disabled) {
-  // sass-lint:disable-block no-important no-color-literals 
   @include euiRangeThumbBorder;
   @include euiRangeThumbBoxShadow;;
 
@@ -19,7 +18,7 @@
   }
 
   // in Chrome/FF/Edge we don't want to focus on click
-  &:focus:not(:focus-visible)  {
+  &:focus:not(:focus-visible) {
     @include euiRangeThumbBoxShadow;
     outline: none;
   }
@@ -37,9 +36,9 @@
     outline: none;
 
     .euiRangeTrack::after {
-      // sass-lint:disable-block no-color-literals
-      box-shadow: 0 0 0 1px rgba($euiColorEmptyShade, .8),
-      0 0 0 3px $euiFocusRingColor;
+      box-shadow:
+        0 0 0 1px rgba($euiColorEmptyShade, .8),
+        0 0 0 3px $euiFocusRingColor;
     }
   }
 

package/src/themes/amsterdam/overrides/_combo_box.scss

@@ -1,3 +1,6 @@
+// TODO: Address nesting during Emotion conversion, if possible
+// stylelint-disable max-nesting-depth
+
 .euiComboBox {
   // Round the left border when we append a label
   &--appended {

package/src/themes/amsterdam/overrides/_form_control_layout.scss

@@ -1,3 +1,6 @@
+// TODO: Address nesting during Emotion conversion, if possible
+// stylelint-disable max-nesting-depth
+
 .euiFormControlLayout--group {
   border-radius: $euiFormControlBorderRadius;
   background-color: $euiFormInputGroupLabelBackground;

package/src/themes/amsterdam/overrides/_form_control_layout_delimited.scss

@@ -1,3 +1,6 @@
+// TODO: Address nesting during Emotion conversion, if possible
+// stylelint-disable max-nesting-depth
+
 .euiFormControlLayoutDelimited {
   border-radius: $euiFormControlBorderRadius;
 
@@ -12,8 +15,7 @@
     overflow: hidden;
   }
 
-  .euiFormControlLayout__prepend +
-  .euiFormControlLayout__childrenWrapper {
+  .euiFormControlLayout__prepend + .euiFormControlLayout__childrenWrapper {
     &:last-child {
       border-radius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0;
     }
@@ -31,8 +33,7 @@
       overflow: hidden;
     }
 
-    .euiFormControlLayout__prepend +
-    .euiFormControlLayout__childrenWrapper {
+    .euiFormControlLayout__prepend + .euiFormControlLayout__childrenWrapper {
       &:last-child {
         border-radius: 0 $euiFormControlCompressedBorderRadius $euiFormControlCompressedBorderRadius 0;
       }

package/src/themes/amsterdam/overrides/_header.scss

@@ -5,8 +5,8 @@
 }
 
 // Remove borders without deleting the prop just yet
-.euiHeaderSectionItem:after {
-  display: none !important; // sass-lint:disable-line no-important
+.euiHeaderSectionItem::after {
+  display: none !important; // stylelint-disable-line declaration-no-important
 }
 
 .euiHeaderLogo {

package/src/themes/amsterdam/overrides/_hue.scss

@@ -11,10 +11,10 @@
 
   &__range {
     @include euiRangeThumbPerBrowser {
-      // sass-lint:disable-block no-color-literals
       border: 3px solid $euiRangeThumbBorderColor;
-      box-shadow: 0 2px 2px -1px rgba($euiShadowColor, .2),
-      0 1px 5px -2px rgba($euiShadowColor, .2);
+      box-shadow:
+        0 2px 2px -1px rgba($euiShadowColor, .2),
+        0 1px 5px -2px rgba($euiShadowColor, .2);
       background-color: inherit;
     }
 
@@ -31,9 +31,9 @@
 
     &:focus:not(:focus-visible) {
       @include euiRangeThumbPerBrowser {
-        // sass-lint:disable-block no-color-literals
-        box-shadow: 0 2px 2px -1px rgba($euiShadowColor, .2),
-        0 1px 5px -2px rgba($euiShadowColor, .2);
+        box-shadow:
+          0 2px 2px -1px rgba($euiShadowColor, .2),
+          0 1px 5px -2px rgba($euiShadowColor, .2);
       }
     }
 

package/src/themes/amsterdam/overrides/_key_pad_menu.scss

@@ -1,12 +1,12 @@
 .euiKeyPadMenuItem {
-  border: none !important; // sass-lint:disable-line no-important
+  border: none !important; // stylelint-disable-line declaration-no-important
   box-shadow: none;
 
   // Focus and Hover states (when not disabled)
   &:not(.euiKeyPadMenuItem-isDisabled) {
     &:hover,
     &:focus:hover,
-    &:focus-within  {
+    &:focus-within {
       @include euiBottomShadowSmall;
     }
 

package/src/themes/amsterdam/overrides/_steps.scss

@@ -34,7 +34,7 @@
     &--#{$name} {
       background-color: $color;
       color: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
-      outline-color: chooseLightOrDarkText($color, $color, $euiColorInk) !important; // sass-lint:disable-line no-important
+      outline-color: chooseLightOrDarkText($color, $color, $euiColorInk) !important; // stylelint-disable-line declaration-no-important
     }
   }
 
@@ -99,4 +99,3 @@
 .euiStepHorizontal:focus:not(.euiStepHorizontal-isDisabled) .euiStepHorizontal__number:not(:focus-visible) {
   outline: $euiFocusRingSize solid $euiColorPrimary;
 }
-

package/src/themes/legacy/_colors_dark.scss

@@ -1,3 +1,5 @@
+// stylelint-disable color-no-hex
+
 // This extra import allows any variables that are created via functions to work when loaded into JS
 @import '../../global_styling/functions/index';
 
@@ -45,4 +47,3 @@ $euiLinkColor: $euiColorPrimaryText !default;
 // Charts
 $euiColorChartLines: $euiColorLightShade !default;
 $euiColorChartBand: tint($euiColorLightestShade, 2.5%) !default;
-

package/src/themes/legacy/_colors_light.scss

@@ -1,3 +1,5 @@
+// stylelint-disable color-no-hex
+
 // This extra import allows any variables that are created via functions to work when loaded into JS
 @import '../../global_styling/functions/index';
 

package/src/themes/legacy/reset/_reset.scss

@@ -1,12 +1,12 @@
 // This file allows multi-line selectors to make it more readable
-// sass-lint:disable single-line-per-selector
+// stylelint-disable selector-list-comma-newline-after
 
 /**
  * Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126).
  *
  */
 
-*, *:before, *:after {
+*, *::before, *::after {
   box-sizing: border-box;
 }
 
@@ -72,7 +72,7 @@ body {
 *:focus {
   outline: none;
 
-  // sass-lint:disable no-vendor-prefixes
+  // stylelint-disable selector-no-vendor-prefix
   // Disables border that shows up when tabbing in Firefox.
   &::-moz-focus-inner {
     border: none;
@@ -133,10 +133,10 @@ blockquote, q {
   quotes: none;
 }
 
-blockquote:before, blockquote:after,
-q:before, q:after {
+blockquote::before, blockquote::after,
+q::before, q::after {
   content: '';
-  content: none; // sass-lint:disable-line no-duplicate-properties
+  content: none;
 }
 
 table {
@@ -155,6 +155,7 @@ fieldset {
 /* Chrome has an issue around RTL languages in SVGs when letter-spacing is negative
  * https://bugs.chromium.org/p/chromium/issues/detail?id=966480
  */
+
 svg text {
-  letter-spacing: normal !important; // sass-lint:disable-line no-important
+  letter-spacing: normal !important; // stylelint-disable-line declaration-no-important
 }