@elastic/eui 96.0.0 → 96.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "96.0.0",
+  "version": "96.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/src/global_styling/mixins/_index.scss

@@ -5,7 +5,4 @@
 @import 'helpers';
 @import 'states';
 
-@import 'button';
-@import 'form';
-@import 'panel';
-@import 'tool_tip';
+@import 'tool_tip'; // Needed by Elastic Charts

package/src/global_styling/mixins/_tool_tip.scss

@@ -16,10 +16,3 @@
     background-color: $euiTooltipBorderColor;
   }
 }
-
-@mixin euiToolTipTitle {
-  font-weight: $euiFontWeightBold;
-  border-bottom: solid $euiBorderWidthThin $euiTooltipBorderColor;
-  padding-bottom: $euiSizeXS;
-  margin-bottom: $euiSizeXS;
-}

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

@@ -7,7 +7,4 @@
 @import '../../../../global_styling/mixins/helpers';
 @import 'states';
 
-@import '../../../../global_styling/mixins/button';
-@import '../../../../global_styling/mixins/form';
-@import '../../../../global_styling/mixins/panel';
-@import '../../../../global_styling/mixins/tool_tip';
+@import '../../../../global_styling/mixins/tool_tip'; // Needed by Elastic Charts

package/src/global_styling/mixins/_button.scss

@@ -1,149 +0,0 @@
-// Provides a solid reset and base for handling sizing layout
-// Does not include any visual styles
-@mixin euiButtonBase {
-  display: inline-block;
-  appearance: none;
-  cursor: pointer;
-  height: $euiButtonHeight;
-  line-height: $euiButtonHeight; // prevents descenders from getting cut off
-  text-align: center;
-  white-space: nowrap;
-  max-width: 100%;
-  vertical-align: middle;
-}
-
-// Adds the focus (and hover) animation for translating up 1px
-@mixin euiButtonFocus {
-  @include euiCanAnimate {
-    transition: transform $euiAnimSpeedNormal ease-in-out, background-color $euiAnimSpeedNormal ease-in-out;
-
-    &:hover:not(:disabled) {
-      transform: translateY(-1px);
-    }
-
-    &:focus {
-      animation: euiButtonActive $euiAnimSpeedNormal $euiAnimSlightBounce;
-    }
-
-    &:active:not(:disabled) {
-      transform: translateY(1px);
-    }
-  }
-}
-
-// All of the button base styles including the base, focus, font, and initial styles
-// Does not include individual alterations like color or sizes
-@mixin euiButton {
-  @include euiButtonBase;
-  @include euiFont;
-  @include euiFontSize;
-  @include euiButtonFocus;
-
-  font-weight: $euiButtonFontWeight;
-  text-decoration: none;
-  outline-offset: -1px;
-
-  &:hover:not(:disabled),
-  &:focus {
-    text-decoration: underline;
-  }
-}
-
-// Correctly lays out the contents of a button when using the proper dom elements of:
-// <button>
-//   <span className="__content">
-//     {icon/spinner}
-//     {child}
-//   </span>
-// </button>
-// 1. Apply margin to all but last item in the flex.
-// 2. Margin gets flipped because of the row-reverse.
-@mixin euiButtonContent($isReverse: false) {
-  height: 100%;
-  width: 100%;
-  vertical-align: middle;
-
-  .euiButtonContent__icon,
-  .euiButtonContent__spinner {
-    flex-shrink: 0; // Ensures the icons/spinner don't scale down below their intended size
-  }
-
-  @if ($isReverse) {
-    flex-direction: row-reverse;
-
-    > * + * {
-      margin-inline-start: 0; // 1, 2
-      margin-inline-end: $euiSizeS; // 1, 2
-    }
-  } @else {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    > * + * {
-      margin-inline-start: $euiSizeS; // 1
-    }
-  }
-}
-
-@mixin euiButtonContentDisabled {
-  pointer-events: auto;
-  cursor: not-allowed;
-
-  &:hover,
-  &:focus,
-  &:focus-within {
-    text-decoration: none;
-  }
-
-  .euiButtonContent__spinner {
-    border-color: euiLoadingSpinnerBorderColors(currentColor);
-  }
-}
-
-/*
- * Creates the Amsterdam style of button with a transparent background
- */
-@mixin euiButtonDefaultStyle($color: 'primary', $includeStates: true, $transparency: $euiButtonDefaultTransparency) {
-  $backgroundColor: $color;
-
-  @if (map-has-key($euiButtonTypes, $color)) {
-    $backgroundColor: map-get($euiButtonTypes, $color);
-  }
-
-  $percentConversion: $transparency * 100%;
-  // This variable simulates the possibly darkest background the button could be on
-  // Simulates the 20% opaque color on top of the page background color
-  $backgroundColorSimulated: mix($euiPageBackgroundColor, $backgroundColor, $percentConversion);
-  // Then we can calculate the darkest text color needed
-  color: makeHighContrastColor($backgroundColor, $backgroundColorSimulated);
-  // But still use transparency
-  background-color: transparentize($backgroundColor, $transparency);
-
-  @if ($includeStates) {
-    &:not([class*='isDisabled']) {
-      &:hover,
-      &:focus {
-        // Duplicated from inert state simply to override default theme
-        background-color: transparentize($backgroundColor, $transparency);
-      }
-    }
-  }
-}
-
-/*
- * Creates the Amsterdam style of fill button
- */
-@mixin euiButtonFillStyle($color: 'primary') {
-  $backgroundColor: $color;
-
-  @if (map-has-key($euiButtonTypes, $color)) {
-    $backgroundColor: map-get($euiButtonTypes, $color);
-  }
-
-  background-color: $backgroundColor;
-  color: chooseLightOrDarkText($backgroundColor);
-}
-
-// Keyframe animation declarations can be found in
-// utility/animations.scss

package/src/global_styling/mixins/_form.scss

@@ -1,28 +0,0 @@
-// 1. Must supply both values to background-size or some browsers apply the single value to both directions
-
-@mixin euiFormControlDefaultShadow($borderOnly: false) {
-  background-color: $euiFormBackgroundColor;
-  background-repeat: no-repeat;
-  background-size: 0% 100%; // 1
-
-  @if ($borderOnly) {
-    box-shadow: inset 0 0 0 1px $euiFormBorderColor;
-  } @else {
-    box-shadow:
-      #{$euiFormControlBoxShadow},
-      inset 0 0 0 1px $euiFormBorderColor;
-  }
-
-  transition:
-    box-shadow $euiAnimSpeedFast ease-in,
-    background-image $euiAnimSpeedFast ease-in,
-    background-size $euiAnimSpeedFast ease-in,
-    background-color $euiAnimSpeedFast ease-in;
-
-  // Fixes bug in Firefox where adding a transition to the background-color
-  // caused a flash of differently styled dropdown.
-  @supports (-moz-appearance: none) {
-    // List *must* be in the same order as the above.
-    transition-property: box-shadow, background-image, background-size;
-  }
-}

package/src/global_styling/mixins/_panel.scss

@@ -1,55 +0,0 @@
-@mixin euiPanel($selector) {
-  @if variable-exists(selector) == false {
-    @error 'A $selector must be provided to @mixin euiPanel().';
-  } @else {
-    #{$selector} {
-      flex-grow: 1;
-
-      &#{$selector}--flexGrowZero {
-        flex-grow: 0;
-      }
-
-      &#{$selector}--hasShadow {
-        @include euiBottomShadowMedium;
-      }
-
-      &#{$selector}--hasBorder {
-        border: $euiBorderThin;
-        box-shadow: none;
-      }
-
-      &#{$selector}--isClickable {
-        // transition the shadow
-        transition: all $euiAnimSpeedFast $euiAnimSlightResistance;
-
-        &:enabled { // This is a good selector for buttons since it doesn't exist on divs
-          // in case of button wrapper which inherently is inline-block and no width
-          display: block;
-          width: 100%;
-          text-align: left;
-        }
-
-        &:hover,
-        &:focus {
-          @include euiBottomShadow;
-          transform: translateY(-2px);
-          cursor: pointer;
-        }
-      }
-
-      // Border Radii
-      @each $modifier, $amount in $euiPanelBorderRadiusModifiers {
-        &#{$selector}--#{$modifier} {
-          border-radius: $amount;
-        }
-      }
-
-      // Background colors
-      @each $modifier, $amount in $euiPanelBackgroundColorModifiers {
-        &#{$selector}--#{$modifier} {
-          background-color: $amount;
-        }
-      }
-    }
-  }
-}