@elastic/eui 62.0.2 → 62.1.0

package/src/components/header/header_breadcrumbs/_header_breadcrumbs.scss

@@ -1,8 +0,0 @@
-.euiHeaderBreadcrumbs {
-  @include euiTextTruncate;
-  margin-left: $euiSizeM;
-  margin-right: $euiSizeM;
-  display: flex;
-  align-items: center;
-  flex-grow: 1;
-}

package/src/components/header/header_breadcrumbs/_index.scss

@@ -1 +0,0 @@
-@import 'header_breadcrumbs';

package/src/components/portal/_index.scss

@@ -1 +0,0 @@
-@import 'portal';

package/src/components/portal/_portal.scss

@@ -1,6 +0,0 @@
-/**
- * 1. Portal content is absolutely positioned (e.g. tooltips, popovers, flyouts).
- */
-.euiBody-hasPortalContent {
-  position: relative; /* 1 */
-}

package/src/components/toast/_global_toast_list.scss

@@ -1,90 +0,0 @@
-/**
- * 1. Allow list to expand as items are added, but cap it at the screen height.
- * 2. Allow some padding for shadow
- */
-.euiGlobalToastList {
-  @include euiScrollBar;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  position: fixed;
-  z-index: $euiZToastList;
-  bottom: 0;
-  width: $euiToastWidth + ($euiSize * 5); /* 2 */
-  max-height: 100vh; /* 1 */
-  overflow-y: auto;
-
-  // Hide the scrollbar entirely
-  // sass-lint:disable-block no-misspelled-properties
-  scrollbar-width: none;
-
-  // sass-lint:disable-block no-vendor-prefixes
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
-  }
-
-  // The top and bottom padding give height to the list creating a dead-zone effect
-  // when there's no toasts in the list, meaning you can't click anything beneath it.
-  // Only add the padding if there's content.
-  &:not(:empty) {
-    padding: $euiSize;
-  }
-}
-
-.euiGlobalToastList--right:not(:empty) {
-  right: 0;
-  padding-left: $euiSize * 4; /* 2 */
-}
-
-.euiGlobalToastList--left:not(:empty) {
-  left: 0;
-  padding-right: $euiSize * 4; /* 2 */
-}
-
-.euiGlobalToastListItem {
-  margin-bottom: $euiSize;
-  animation: $euiAnimSpeedNormal euiShowToast $euiAnimSlightResistance;
-  opacity: 1;
-
-  /**
-   * 1. justify-content: flex-end interferes with overflowing content, so we'll use this to push
-   *    items to the bottom instead.
-   */
-  &:first-child {
-    margin-top: auto; /* 1 */
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
-  &.euiGlobalToastListItem-isDismissed {
-    transition: opacity $euiAnimSpeedNormal;
-    opacity: 0;
-  }
-}
-
-@keyframes euiShowToast {
-  from {
-    transform: translateY($euiSizeL) scale(.9);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateY(0) scale(1);
-    opacity: 1;
-  }
-}
-
-@include euiBreakpoint('xs', 's') {
-  /**
-   * 1. Mobile we make these 100%. Matching change happens on the item as well.
-   */
-  .euiGlobalToastList:not(:empty) {
-    left: 0;
-    padding-left: $euiSize;
-    padding-right: $euiSize;
-    width: 100%; /* 1 */
-  }
-}

package/src/components/toast/_index.scss

@@ -1,4 +0,0 @@
-$euiToastWidth: $euiSize * 20;
-
-@import 'global_toast_list';
-@import 'toast';

package/src/components/toast/_toast.scss

@@ -1,103 +0,0 @@
-.euiToast {
-  border: $euiBorderThin;
-  // This overwrites some of the border above
-  // sass-lint:disable-block mixins-before-declarations
-  @include euiBottomShadowLarge;
-
-  position: relative;
-  padding: $euiSize;
-  background-color: $euiColorEmptyShade;
-  width: 100%;
-
-  &:hover .euiToast__closeButton,
-  &:focus .euiToast__closeButton {
-    opacity: 1;
-  }
-}
-
-/**
-  * 1. Fit button to icon.
-  */
-.euiToast__closeButton {
-  position: absolute;
-  top: $euiSize;
-  right: $euiSize;
-  line-height: 0; /* 1 */
-  appearance: none;
-  opacity: 0;
-  transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
-
-  svg {
-    fill: tintOrShade($euiTitleColor, 50%, 70%);
-  }
-
-  &:hover {
-    svg {
-      fill: $euiTitleColor;
-    }
-  }
-
-  &:focus {
-    background-color: $euiFocusBackgroundColor;
-    opacity: 1;
-
-    svg {
-      fill: $euiColorPrimary;
-    }
-  }
-}
-
-// Modifier naming and colors.
-$euiToastTypes: (
-  primary: makeGraphicContrastColor($euiColorPrimary, $euiColorEmptyShade),
-  success: makeGraphicContrastColor($euiColorSuccess, $euiColorEmptyShade),
-  warning: makeGraphicContrastColor($euiColorWarning, $euiColorEmptyShade),
-  danger: makeGraphicContrastColor($euiColorDanger, $euiColorEmptyShade),
-);
-
-// Create button modifiers based upon the map.
-@each $name, $color in $euiToastTypes {
-  .euiToast--#{$name} {
-    border-top: 2px solid $color;
-  }
-}
-
-/**
- * 1. Align icon with first line of title text if it wraps.
- * 2. Apply margin to all but last item in the flex.
- * 3. Account for close button.
- */
-.euiToastHeader {
-  padding-right: $euiSizeL; /* 3 */
-  display: flex;
-  align-items: baseline; /* 1 */
-
-  > * + * {
-    margin-left: $euiSizeS; /* 2 */
-  }
-}
-
-/**
-  * 1. Vertically center icon with first line of title.
-  */
-.euiToastHeader__icon {
-  flex: 0 0 auto;
-  fill: $euiTitleColor;
-  transform: translateY(2px); /* 1 */
-}
-
-.euiToastHeader__title {
-  @include euiTitle('xs');
-  font-weight: $euiFontWeightLight;
-}
-
-.euiToastHeader--withBody {
-  margin-bottom: $euiSizeS;
-}
-
-/**
- * 1. Prevent long lines from overflowing.
- */
-.euiToastBody {
-  word-wrap: break-word; /* 1 */
-}

package/src/components/token/_index.scss

@@ -1,2 +0,0 @@
-@import 'variables';
-@import 'token';

package/src/components/token/_token.scss

@@ -1,85 +0,0 @@
-.euiToken {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  svg {
-    height: 100%;
-    margin: auto;
-  }
-}
-
-.euiToken--circle {
-  border-radius: 50%;
-}
-
-.euiToken--square {
-  // These are pretty small elements, the standard size
-  // is just slightly too large.
-  border-radius: $euiBorderRadius - 1px;
-}
-
-.euiToken--xsmall {
-  width: $euiSizeM;
-  height: $euiSizeM;
-
-  &.euiToken--rectangle {
-    padding: 0 $euiSizeXS;
-  }
-}
-
-.euiToken--small {
-  width: $euiSize;
-  height: $euiSize;
-
-  &.euiToken--rectangle {
-    padding: 0 $euiSizeXS;
-  }
-}
-
-.euiToken--medium {
-  width: $euiSizeL;
-  height: $euiSizeL;
-
-  &.euiToken--rectangle {
-    padding: 0 $euiSizeS;
-  }
-}
-
-.euiToken--large {
-  width: $euiSizeXL;
-  height: $euiSizeXL;
-
-  &.euiToken--rectangle {
-    padding: 0 ($euiSize * .5);
-  }
-}
-
-.euiToken--rectangle {
-  box-sizing: content-box;
-}
-
-@each $type in $euiTokenTypeKeys {
-  .euiToken--#{$type} {
-    $color: map-get(map-get($euiTokenTypes, $type), 'graphic');
-    $backgroundColor: tintOrShade($color, 90%, 70%);
-    $fillColor: makeHighContrastColor($color, $backgroundColor);
-
-    // Without a background, the fill color should be the graphic color
-    color: $color;
-
-    &.euiToken--light {
-      color: $fillColor;
-      background-color: $backgroundColor;
-      box-shadow: inset 0 0 0 1px tintOrShade($color, 70%, 60%);
-    }
-
-    // Dark tokens uses the main color as the background against light or dark text
-    $color: map-get(map-get($euiTokenTypes, $type), 'behindText');
-
-    &.euiToken--dark {
-      background-color: $color;
-      color: chooseLightOrDarkText($color, $euiColorGhost, $euiColorInk);
-    }
-  }
-}

package/src/components/token/_variables.scss

@@ -1,13 +0,0 @@
-// sass-lint:disable indentation
-
-$euiTokenGrayColor: lightOrDarkTheme($euiColorDarkShade, $euiColorMediumShade);
-
-// Appends the gray color to the color blind palette
-$euiTokenTypes: map-merge($euiPaletteColorBlind, (
-  'gray': (
-    graphic: $euiTokenGrayColor,
-    behindText: $euiTokenGrayColor,
-  )
-));
-
-$euiTokenTypeKeys: map-keys($euiTokenTypes);

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

@@ -1,71 +0,0 @@
-// sass-lint:disable nesting-depth
-
-.euiHeaderBreadcrumbs {
-  line-height: $euiSize;
-  margin-left: $euiSizeS;
-  margin-right: $euiSizeS;
-
-  // Only the header breadcrumbs get the new Amsterdam style so that there can
-  // still be default text only breadcrumbs for places like EuiControlBar
-  .euiBreadcrumb__content {
-    @include euiButtonDefaultStyle($euiTextColor);
-    font-size: $euiFontSizeXS;
-    line-height: $euiSize;
-    font-weight: $euiFontWeightMedium;
-    padding: $euiSizeXS $euiSize;
-    clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%, $euiSizeS 50%);
-
-    &.euiLink {
-      @include euiButtonDefaultStyle($euiColorPrimary);
-
-      &:focus {
-        @include euiFocusRing(null, 'inner');
-
-        // Turn clip path off and add full border-radius when in focus so the focus ring looks correct.
-        // This won't work in Safari, but that's ok
-        &:focus-visible {
-          border-radius: $euiBorderRadius;
-          clip-path: none;
-        }
-      }
-    }
-  }
-
-  .euiBreadcrumb {
-    // Remove separator
-    &::after {
-      display: none;
-    }
-
-    &:not(.euiBreadcrumb--last) {
-      margin-right: -$euiSizeXS;
-    }
-
-    &:first-child {
-      .euiBreadcrumb__content {
-        padding-left: $euiSizeM;
-        border-radius: $euiBorderRadius 0 0 $euiBorderRadius;
-        clip-path: polygon(0 0, calc(100% - #{$euiSizeS}) 0, 100% 50%, calc(100% - #{$euiSizeS}) 100%, 0 100%);
-      }
-    }
-
-    // In case the item is first AND last, aka only, just make it a fully rounded item.
-    // Needs to come after `:first-child` for specificity
-    &:only-child {
-      .euiBreadcrumb__content {
-        clip-path: none;
-        padding-left: $euiSizeM;
-        padding-right: $euiSizeM;
-        border-radius: $euiBorderRadius;
-      }
-    }
-  }
-
-  .euiBreadcrumb--last {
-    .euiBreadcrumb__content {
-      border-radius: 0 $euiBorderRadius $euiBorderRadius 0;
-      padding-right: $euiSizeM;
-      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, #{$euiSizeS} 50%);
-    }
-  }
-}

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

@@ -1,21 +0,0 @@
-.euiToast {
-  border: none;
-  border-radius: $euiBorderRadius;
-}
-
-$euiToastTypes: (
-  primary: $euiColorPrimary,
-  success: $euiColorSuccess,
-  warning: $euiColorWarning,
-  danger: $euiColorDanger
-);
-
-@each $name, $color in $euiToastTypes {
-  .euiToast--#{$name} {
-    border-top: 2px solid $color;
-  }
-}
-
-.euiToastHeader__title {
-  font-weight: $euiFontWeightBold;
-}

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

@@ -1,4 +0,0 @@
-.euiToken--square {
-  // Same border radius as the legacy theme
-  border-radius: $euiBorderRadiusSmall - 1px;
-}

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

@@ -1,57 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useIsWithinBreakpoints = useIsWithinBreakpoints;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = require("react");
-
-var _breakpoint = require("../breakpoint");
-
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-/**
- * Given the current window.innerWidth and an array of breakpoint keys,
- * this hook stores state and returns true or false if the window.innerWidth
- * falls within any of the named breakpoints.
- *
- * @param {EuiBreakpointSize[]} sizes An array of named breakpoints
- * @param {boolean} isActive Manages whether the resize handler should be active
- * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
- */
-function useIsWithinBreakpoints(sizes) {
-  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isWithinBreakpointsValue = _useState2[0],
-      setIsWithinBreakpointsValue = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    function handleResize() {
-      setIsWithinBreakpointsValue((0, _breakpoint.isWithinBreakpoints)(window.innerWidth, sizes));
-    }
-
-    if (isActive) {
-      window.removeEventListener('resize', handleResize);
-      window.addEventListener('resize', handleResize);
-      handleResize();
-    }
-
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
-  }, [sizes, isActive]);
-  return isWithinBreakpointsValue;
-}