@elastic/eui 70.4.0 → 71.0.0

package/test-env/services/theme/hooks.js

@@ -36,27 +36,24 @@ var useEuiTheme = function useEuiTheme() {
   var theme = (0, _react.useContext)(_context.EuiThemeContext);
   var colorMode = (0, _react.useContext)(_context.EuiColorModeContext);
   var modifications = (0, _react.useContext)(_context.EuiModificationsContext);
+  var isFallback = theme === _context.defaultComputedTheme;
+  var warningLevel = (0, _provider.getEuiDevProviderWarning)();
 
-  if (process.env.NODE_ENV !== 'production') {
-    var isFallback = theme === _context.defaultComputedTheme;
-    var warningLevel = (0, _provider.getEuiDevProviderWarning)();
+  if (isFallback && typeof warningLevel !== 'undefined') {
+    switch (warningLevel) {
+      case 'log':
+        console.log(providerMessage);
+        break;
 
-    if (isFallback && typeof warningLevel !== 'undefined') {
-      switch (warningLevel) {
-        case 'log':
-          console.log(providerMessage);
-          break;
+      case 'warn':
+        console.warn(providerMessage);
+        break;
 
-        case 'warn':
-          console.warn(providerMessage);
-          break;
+      case 'error':
+        throw new Error(providerMessage);
 
-        case 'error':
-          throw new Error(providerMessage);
-
-        default:
-          break;
-      }
+      default:
+        break;
     }
   }
 

package/src/components/form/range/_dual_range.scss

@@ -1,7 +0,0 @@
-.euiDualRange {
-  &__slider {
-    @include euiRangeThumbPerBrowser {
-      visibility: hidden;
-    }
-  }
-}

package/src/components/form/range/_index.scss

@@ -1,13 +0,0 @@
-@import 'range';
-@import 'range_draggable';
-@import 'range_highlight';
-@import 'range_input';
-@import 'range_label';
-@import 'range_levels';
-@import 'range_slider';
-@import 'range_thumb';
-@import 'range_ticks';
-@import 'range_tooltip';
-@import 'range_track';
-@import 'range_wrapper';
-@import 'dual_range';

package/src/components/form/range/_range.scss

@@ -1,7 +0,0 @@
-.euiRange__horizontalSpacer {
-  width: $euiSize;
-}
-
-.euiRange__slimHorizontalSpacer {
-  width: $euiSize / 2;
-}

package/src/components/form/range/_range_draggable.scss

@@ -1,35 +0,0 @@
-.euiRangeDraggable {
-  height: $euiFormControlHeight / 2;
-  position: absolute;
-  top: $euiFormControlHeight / 4;
-  pointer-events: none;
-  z-index: 2;
-
-  &.euiRangeDraggable--compressed {
-    height: $euiFormControlCompressedHeight / 2;
-    top: $euiFormControlCompressedHeight / 4;
-  }
-
-  &.euiRangeDraggable--hasTicks {
-    top: 0;
-  }
-
-  .euiRangeDraggle__inner {
-    position: absolute;
-    left: $euiRangeThumbWidth;
-    right: $euiRangeThumbWidth;
-    top: 0;
-    bottom: 0;
-  }
-
-  &:not(.euiRangeDraggable--disabled) {
-    .euiRangeDraggle__inner {
-      cursor: grab;
-      pointer-events: all;
-
-      &:active {
-        cursor: grabbing;
-      }
-    }
-  }
-}

package/src/components/form/range/_range_highlight.scss

@@ -1,25 +0,0 @@
-.euiRangeHighlight {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  top: calc(50% - #{($euiRangeHighlightHeight / 2)});
-  overflow: hidden;
-
-  &__progress {
-    height: $euiRangeHighlightHeight;
-    border-radius: $euiRangeHighlightHeight;
-    background-color: $euiRangeTrackColor;
-
-    &--hasFocus {
-      background-color: $euiColorPrimary;
-    }
-  }
-
-  &--hasTicks {
-    top: ($euiFormControlHeight / 4) - ($euiRangeHighlightHeight / 2);
-  }
-
-  &--hasTicks.euiRangeHighlight--compressed {
-    top: ($euiFormControlCompressedHeight / 4) - ($euiRangeHighlightHeight / 2);
-  }
-}

package/src/components/form/range/_range_input.scss

@@ -1,10 +0,0 @@
-.euiRangeInput {
-  width: auto;
-  min-width: $euiSize * 4;
-
-  .euiRange__popover & {
-    // sass-lint:disable no-important
-    margin: 0 !important;
-    width: 100%;
-  }
-}

package/src/components/form/range/_range_label.scss

@@ -1,18 +0,0 @@
-.euiRangeLabel {
-  &--min,
-  &--max {
-    font-size: $euiFontSizeXS;
-  }
-
-  &--min {
-    margin-right: $euiSizeS;
-  }
-
-  &--max {
-    margin-left: $euiSizeS;
-  }
-
-  &--isDisabled {
-    opacity: $euiRangeDisabledOpacity;
-  }
-}

package/src/components/form/range/_range_levels.scss

@@ -1,43 +0,0 @@
-.euiRangeLevels {
-  display: flex;
-  justify-content: stretch;
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: ($euiFormControlHeight / 2) + 2px;
-
-  &--hasTicks {
-    top: ($euiFormControlHeight / 4) + 2px;
-  }
-
-  &--compressed {
-    top: ($euiFormControlCompressedHeight / 2) + 2px;
-
-    &.euiRangeLevels--hasTicks {
-      top: ($euiFormControlCompressedHeight / 4) + 2px;
-    }
-  }
-}
-
-.euiRangeLevel {
-  display: block;
-  position: absolute;
-  height: 6px;
-  border-radius: 6px;
-  margin: 2px;
-}
-
-// Modifier naming and colors.
-$euiRangeLevelColors: (
-  primary: $euiColorPrimary,
-  success: $euiColorSuccess,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger,
-);
-
-// Create level modifiers based upon the map.
-@each $name, $color in $euiRangeLevelColors {
-  .euiRangeLevel--#{$name} {
-    background-color: transparentize($color, .7);
-  }
-}

package/src/components/form/range/_range_slider.scss

@@ -1,133 +0,0 @@
-/*
- *  Input Range Customization by browser
- */
-
-// The following code is inspired by...
-
-// Github: https://github.com/darlanrod/input-range-sass
-// Author: Darlan Rod https://github.com/darlanrod
-// Version 1.4.1
-// MIT License
-
-// It has been modified to fit the styling patterns of Kibana and
-// to be more easily maintained / themeable going forward.
-
-.euiRangeSlider {
-  height: $euiFormControlHeight;
-  appearance: none;
-  background: transparent; // Otherwise white in Chrome
-  width: 100%; // ensures the slider expands to fill flex display
-  position: relative;
-  cursor: pointer; // Keep cursor to full range bounds
-  z-index: 1; // higher than .euiRangeHighlight that is 0
-
-  &:disabled {
-    cursor: not-allowed;
-
-    // sass-lint:disable-block mixins-before-declarations
-    @include euiRangeThumbPerBrowser {
-      cursor: not-allowed;
-      border-color: $euiRangeThumbBorderColor;
-      background-color: $euiRangeThumbBorderColor;
-      box-shadow: none;
-    }
-
-    ~ .euiRangeThumb {
-      cursor: not-allowed;
-      border-color: $euiRangeThumbBorderColor;
-      background-color: $euiRangeThumbBorderColor;
-      box-shadow: none;
-    }
-  }
-
-  @include euiRangeThumbPerBrowser {
-    @include euiCustomControl($type: 'round');
-    @include euiRangeThumbStyle;
-  }
-
-  @include euiRangeTrackPerBrowser {
-    @include euiRangeTrackSize;
-    background: $euiRangeTrackColor;
-    border: $euiRangeTrackBorderWidth solid $euiRangeTrackBorderColor;
-    border-radius: $euiRangeTrackRadius;
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible,
-  &--hasFocus {
-    @include euiRangeThumbPerBrowser {
-      box-shadow: 0 0 0 $euiFocusRingSize $euiFocusRingColor;
-    }
-
-    ~ .euiRangeThumb {
-      border-color: $euiRangeThumbBorderColor;
-    }
-
-    @include euiRangeTrackPerBrowser {
-      background-color: $euiColorPrimary;
-      border-color: $euiColorPrimary;
-    }
-
-    ~ .euiRangeHighlight .euiRangeHighlight__progress {
-      background-color: $euiColorPrimary;
-    }
-
-    ~ .euiRangeTooltip .euiRangeTooltip__value {
-      @include euiBottomShadowMedium;
-
-      &.euiRangeTooltip__value--right,
-      &.euiRangeTooltip__value--left {
-        transform: translateX(0) translateY(-50%) scale(1.1);
-      }
-    }
-  }
-
-  // Resets
-
-  // Disable linter for these very unique vendor controls
-  // sass-lint:disable-block no-vendor-prefixes
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    margin-top: ((-$euiRangeTrackBorderWidth * 2 + $euiRangeTrackHeight) / 2) - ($euiRangeThumbHeight / 2);
-  }
-
-  &::-ms-thumb {
-    margin-top: 0;
-  }
-
-  &::-moz-focus-outer {
-    border: none;
-  }
-
-  &::-ms-track {
-    @include euiRangeTrackSize;
-    background: transparent;
-    border-color: transparent;
-    border-width: ($euiRangeThumbHeight / 2) 0;
-    color: transparent;
-  }
-
-  // States
-  &--hasTicks {
-    height: $euiFormControlHeight / 2; // Adjust vertical alignment based on extras
-  }
-
-  &--compressed {
-    height: $euiFormControlCompressedHeight;
-
-    &.euiRangeSlider--hasTicks {
-      height: $euiFormControlCompressedHeight / 2;
-    }
-  }
-}
-
-// Lighten the track when showing the range
-.euiRangeSlider--hasRange {
-  @include euiRangeTrackPerBrowser {
-    background-color: transparentize($euiRangeTrackColor, .6);
-    border-color: transparentize($euiRangeTrackBorderColor, .6);
-  }
-}

package/src/components/form/range/_range_thumb.scss

@@ -1,19 +0,0 @@
-.euiRangeThumb {
-  @include euiCustomControl($type: 'round');
-  @include euiRangeThumbStyle;
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 50%;
-  margin-top: -($euiRangeThumbHeight / 2);
-  pointer-events: none;
-  z-index: 1; // higher than .euiRangeHighlight that is 0
-
-  &:focus {
-    @include euiCustomControlFocused;
-  }
-
-  &--hasTicks {
-    top: 25%;
-  }
-}

package/src/components/form/range/_range_ticks.scss

@@ -1,88 +0,0 @@
-@mixin tickStyles {
-  @include size($euiSizeXS);
-
-  background-color: $euiColorDarkShade;
-  border-radius: 100%;
-  position: absolute;
-  top: 0;
-}
-
-.euiRangeTicks {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: $euiSizeS;
-  display: flex;
-
-  &--isCustom {
-    left: ($euiRangeThumbWidth / 8);
-    right: ($euiRangeThumbWidth / 8);
-  }
-}
-
-.euiRangeTick {
-  overflow-x: hidden; // Overridden if labels overflow horizontally
-  overflow-y: hidden; // Should never scroll vertically
-  text-overflow: ellipsis;
-  font-size: $euiFontSizeXS;
-  position: absolute;
-  transform: translateX(-50%);
-  padding-top: $euiSize;
-
-  &:not(.euiRangeTick--hasTickMark)::before {
-    @include tickStyles;
-    content: '';
-    left: calc(50% - #{($euiSizeXS/2)});
-  }
-
-  .euiRangeTick__pseudo {
-    @include tickStyles;
-  }
-
-  &--isCustom {
-    overflow-x: visible;
-  }
-
-  &--isMin,
-  &--isMax {
-    transform: translateX(0);
-  }
-
-  &--isMin {
-    .euiRangeTick__pseudo {
-      left: 0;
-    }
-  }
-
-  &--isMax {
-    .euiRangeTick__pseudo {
-      right: 0;
-    }
-  }
-
-  &:enabled:hover,
-  &:focus,
-  &--selected {
-    color: $euiColorPrimary;
-  }
-
-  &--selected {
-    font-weight: $euiFontWeightMedium;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-}
-
-.euiRangeTicks--compressed {
-  top: $euiSizeS - 2px;
-
-  .euiRangeTick {
-    padding-top: $euiSize - 2px;
-  }
-}
-
-.euiRangeTick__label {
-  pointer-events: none;
-}

package/src/components/form/range/_range_tooltip.scss

@@ -1,97 +0,0 @@
-.euiRangeTooltip {
-  // Keeps tooltip (value) aligned to percentage of actual slider
-  display: block;
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  width: calc(100% - #{$euiRangeThumbWidth});
-  margin-left: $euiRangeThumbWidth / 2;
-  pointer-events: none;
-  z-index: 2; // higher than .euiRangeSlider that is 1
-}
-
-.euiRangeTooltip__value {
-  // Indentation for legibility in transition
-  // sass-lint:disable-block indentation
-  @include euiFontSizeS;
-  border: 1px solid $euiTooltipBackgroundColor;
-  position: absolute;
-  border-radius: $euiBorderRadius;
-  padding: ($euiSizeXS / 2) $euiSizeS;
-  background-color: $euiTooltipBackgroundColor;
-  color: $euiColorGhost;
-  max-width: 256px;
-  top: 50%;
-  transition:
-    box-shadow $euiAnimSpeedNormal $euiAnimSlightResistance,
-    transform $euiAnimSpeedNormal $euiAnimSlightResistance;
-
-  // Custom sizing
-  $arrowSize: $euiSizeM;
-  $arrowMinusSize: (($arrowSize / 2) - 1px) * -1;
-
-  &::after,
-  &::before {
-    content: '';
-    position: absolute;
-    bottom: -$arrowSize / 2;
-    left: 50%;
-    transform-origin: center;
-    background-color: $euiTooltipBackgroundColor;
-    width: $arrowSize;
-    height: $arrowSize;
-    border-radius: 2px;
-  }
-
-  &::before {
-    background-color: $euiTooltipBackgroundColor;
-  }
-
-  // Positions the arrow
-  &.euiRangeTooltip__value--right {
-    margin-left: $euiSizeL;
-
-    &:before,
-    &:after {
-      left: $arrowMinusSize;
-    }
-
-    &::before {
-      margin-left: -1px;
-    }
-  }
-
-  &.euiRangeTooltip__value--left {
-    margin-right: $euiSizeL;
-
-    &:before,
-    &:after {
-      left: auto;
-      right: $arrowMinusSize;
-    }
-
-    &::before {
-      margin-right: -1px;
-    }
-  }
-
-  &.euiRangeTooltip__value--right,
-  &.euiRangeTooltip__value--left {
-    transform: translateX(0) translateY(-50%);
-
-    &:before,
-    &:after {
-      bottom: 50%;
-      transform: translateY(50%) rotateZ(45deg);
-    }
-  }
-
-  &--hasTicks {
-    top: ($euiFormControlHeight / 4);
-
-    .euiRangeTooltip--compressed & {
-      top: ($euiFormControlCompressedHeight / 4);
-    }
-  }
-}

package/src/components/form/range/_range_track.scss

@@ -1,15 +0,0 @@
-.euiRangeTrack {
-  height: 100%; // Don't overflow `euiRangeWrapper`
-  flex-grow: 1;
-  position: relative; // for positioning ticks/levels
-  align-self: flex-start; // Adjust vertical alignment of input based on extras
-
-  &--hasTicks {
-    margin-left: 1em;
-    margin-right: 1em;
-  }
-
-  &--disabled {
-    opacity: $euiRangeDisabledOpacity;
-  }
-}

package/src/components/form/range/_range_wrapper.scss

@@ -1,20 +0,0 @@
-/*
- * 1. There's no way to target the layout of the extra input, so we must
- *    use the descendant selector to allow the width to shrink.
- *
- * 2. Prevent the prepend/append label from extending outside the parent element
- */
-
-.euiRangeWrapper {
-  @include euiFormControlSize($includeAlternates: true);
-  display: flex;
-  align-items: center;
-
-  > .euiFormControlLayout { /* 1 */
-    width: auto;
-
-    &.euiFormControlLayout--group {
-      flex-shrink: 0;  /* 2 */
-    }
-  }
-}

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

@@ -1,57 +0,0 @@
-// Prefixes are unique in this file
-// sass-lint:disable no-vendor-prefixes
-
-@mixin euiRangeTrackSize($compressed: false) {
-  height: $euiRangeTrackHeight;
-  width: $euiRangeTrackWidth;
-
-  @if ($compressed) {
-    height: $euiRangeTrackCompressedHeight;
-  }
-}
-
-@mixin euiRangeTrackPerBrowser {
-  &::-webkit-slider-runnable-track { @content; }
-  &::-moz-range-track { @content; }
-  &::-ms-fill-lower { @content; }
-  &::-ms-fill-upper { @content; }
-}
-
-@mixin euiRangeThumbBorder {
-  border: 2px solid $euiRangeThumbBorderColor;
-}
-
-@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);
-}
-
-@mixin euiRangeThumbFocusBoxShadow {
-  box-shadow: 0 0 0 2px $euiFocusRingColor;
-}
-
-@mixin euiRangeThumbStyle {
-  @include euiRangeThumbBoxShadow;
-  @include euiRangeThumbBorder;
-  cursor: pointer;
-  background-color: $euiRangeThumbBackgroundColor;
-  padding: 0;
-  height: $euiRangeThumbHeight;
-  width: $euiRangeThumbWidth;
-  box-sizing: border-box;  // required for firefox or the border makes the width and height to increase
-}
-
-@mixin euiRangeThumbPerBrowser {
-  &::-webkit-slider-thumb { @content; }
-  &::-moz-range-thumb { @content; }
-  &::-ms-thumb { @content; }
-}
-
-
-@mixin euiRangeThumbFocus {
-  @include euiRangeThumbBorder;
-  @include euiRangeThumbFocusBoxShadow;
-  background-color: $euiColorPrimary;
-}

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

@@ -1,3 +0,0 @@
-.euiRangeTooltip__value {
-  border-radius: $euiBorderRadiusSmall;
-}

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

@@ -1,25 +0,0 @@
-.euiRangeDraggable {
-  &:focus {
-    outline: none;
-
-    ~ .euiRangeThumb {
-      @include euiRangeThumbFocus;
-    }
-  }
-
-  // in Chrome/FF/Edge we don't want to focus on click
-  &:focus:not(:focus-visible)  {
-    ~ .euiRangeThumb {
-      @include euiRangeThumbBoxShadow;
-      outline: none;
-    }
-  }
-
-  &:focus-visible {
-    outline: none;
-
-    ~ .euiRangeThumb {
-      @include euiRangeThumbFocus;
-    }
-  }
-}