@elastic/eui 92.2.1 → 93.1.0

package/test-env/components/tree_view/tree_view.styles.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiTreeViewStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+/*
+ * 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.
+ */
+
+var euiTreeViewStyles = function euiTreeViewStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiTreeView: /*#__PURE__*/(0, _react.css)("margin:0;list-style-type:none;& &{", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.l), ";};label:euiTreeView;"),
+    default: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'm').fontSize, ";;label:default;"),
+    compressed: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";;label:compressed;")
+  };
+};
+exports.euiTreeViewStyles = euiTreeViewStyles;

package/test-env/global_styling/mixins/_color.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiBackgroundColorCSS = exports.useEuiBackgroundColor = exports.euiBackgroundColor = exports.BACKGROUND_COLORS = void 0;
-var _react = require("@emotion/react");
+exports.useEuiBorderColorCSS = exports.useEuiBackgroundColorCSS = exports.useEuiBackgroundColor = exports.euiBorderColor = exports.euiBackgroundColor = exports.BACKGROUND_COLORS = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
 var _services = require("../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -31,7 +32,7 @@ var euiBackgroundColor = function euiBackgroundColor(_ref, color) {
       return (0, _services.transparentize)(euiTheme.colors[color], 0.1);
     }
   } else {
-    var tintOrShade = function tintOrShade(color) {
+    var _tintOrShade = function _tintOrShade(color) {
       return colorMode === 'DARK' ? (0, _services.shade)(color, 0.8) : (0, _services.tint)(color, 0.9);
     };
     switch (color) {
@@ -40,7 +41,7 @@ var euiBackgroundColor = function euiBackgroundColor(_ref, color) {
       case 'subdued':
         return euiTheme.colors.body;
       default:
-        return tintOrShade(euiTheme.colors[color]);
+        return _tintOrShade(euiTheme.colors[color]);
     }
   }
 };
@@ -55,15 +56,49 @@ var useEuiBackgroundColor = function useEuiBackgroundColor(color) {
 };
 exports.useEuiBackgroundColor = useEuiBackgroundColor;
 var useEuiBackgroundColorCSS = function useEuiBackgroundColorCSS() {
-  return {
-    transparent: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('transparent'), ";;label:transparent;"),
-    plain: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('plain'), ";;label:plain;"),
-    subdued: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('subdued'), ";;label:subdued;"),
-    accent: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('accent'), ";;label:accent;"),
-    primary: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('primary'), ";;label:primary;"),
-    success: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('success'), ";;label:success;"),
-    warning: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('warning'), ";;label:warning;"),
-    danger: /*#__PURE__*/(0, _react.css)("background-color:", useEuiBackgroundColor('danger'), ";;label:danger;")
-  };
+  var euiThemeContext = (0, _services.useEuiTheme)();
+  return (0, _react.useMemo)(function () {
+    return {
+      transparent: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'transparent'), ";;label:transparent;"),
+      plain: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'plain'), ";;label:plain;"),
+      subdued: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'subdued'), ";;label:subdued;"),
+      accent: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'accent'), ";;label:accent;"),
+      primary: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'primary'), ";;label:primary;"),
+      success: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'success'), ";;label:success;"),
+      warning: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'warning'), ";;label:warning;"),
+      danger: /*#__PURE__*/(0, _react2.css)("background-color:", euiBackgroundColor(euiThemeContext, 'danger'), ";;label:danger;")
+    };
+  }, [euiThemeContext]);
+};
+exports.useEuiBackgroundColorCSS = useEuiBackgroundColorCSS;
+var euiBorderColor = function euiBorderColor(_ref4, color) {
+  var euiTheme = _ref4.euiTheme,
+    colorMode = _ref4.colorMode;
+  switch (color) {
+    case 'transparent':
+    case 'plain':
+    case 'subdued':
+      return euiTheme.border.color;
+    case 'warning':
+      return (0, _services.tintOrShade)(euiTheme.colors.warning, 0.4, colorMode);
+    default:
+      return (0, _services.tintOrShade)(euiTheme.colors[color], 0.6, colorMode);
+  }
+};
+exports.euiBorderColor = euiBorderColor;
+var useEuiBorderColorCSS = function useEuiBorderColorCSS() {
+  var euiThemeContext = (0, _services.useEuiTheme)();
+  return (0, _react.useMemo)(function () {
+    return {
+      transparent: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'transparent'), ";;label:transparent;"),
+      plain: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'plain'), ";;label:plain;"),
+      subdued: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'subdued'), ";;label:subdued;"),
+      accent: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'accent'), ";;label:accent;"),
+      primary: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'primary'), ";;label:primary;"),
+      success: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'success'), ";;label:success;"),
+      warning: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'warning'), ";;label:warning;"),
+      danger: /*#__PURE__*/(0, _react2.css)("border-color:", euiBorderColor(euiThemeContext, 'danger'), ";;label:danger;")
+    };
+  }, [euiThemeContext]);
 };
-exports.useEuiBackgroundColorCSS = useEuiBackgroundColorCSS;
+exports.useEuiBorderColorCSS = useEuiBorderColorCSS;

package/src/components/empty_prompt/_empty_prompt.scss

@@ -1,128 +0,0 @@
-.euiEmptyPrompt {
-  text-align: center;
-  margin: auto;
-
-  @include euiBreakpoint('l', 'xl') {
-    max-width: max-content; // the width becomes as wide as necessary to contain all of its contents
-  }
-
-  .euiEmptyPrompt__icon {
-    // Consumers should use an EuiImage (recommended) with the horizontal layout
-    // But they can use for example an img or other react node
-    > * {
-      flex-shrink: 1;
-      max-width: convertToRem(360px);
-    }
-  }
-
-  // Footer background colors
-  @each $modifier, $color in $euiPanelBackgroundColorModifiers {
-    @if ($modifier == 'transparent') {
-      &.euiPanel--#{$modifier} {
-        .euiEmptyPrompt__footer {
-          background-color: $euiPageBackgroundColor;
-        }
-
-        &:not(.euiPanel--hasBorder) .euiEmptyPrompt__footer {
-          border-radius: $euiBorderRadius;
-        }
-
-        &.euiPanel--hasBorder .euiEmptyPrompt__footer {
-          border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
-        }
-      }
-    } @else if ($modifier == 'plain') {
-      &.euiPanel--#{$modifier} .euiEmptyPrompt__footer {
-        background-color: $euiPageBackgroundColor;
-        border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
-      }
-    } @else if ($modifier == 'subdued') {
-      &.euiPanel--#{$modifier} .euiEmptyPrompt__footer {
-        border-top: $euiBorderThin;
-        border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
-      }
-    } @else {
-      &.euiPanel--#{$modifier} .euiEmptyPrompt__footer {
-        border-top: 1px solid lightOrDarkTheme(darken($color, 10%), lighten($color, 6%));
-        border-radius: 0 0 $euiBorderRadius $euiBorderRadius;
-      }
-    }
-  }
-}
-
-$euiEmptyPromptContentMaxWidth: 36em;
-
-.euiEmptyPrompt--vertical {
-  .euiEmptyPrompt__main {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
-
-  .euiEmptyPrompt__contentInner {
-    max-width: $euiEmptyPromptContentMaxWidth;
-    margin: auto;
-  }
-
-  .euiEmptyPrompt__icon {
-    margin-bottom: $euiSize;
-  }
-}
-
-.euiEmptyPrompt--horizontal {
-  @include euiBreakpoint('l', 'xl') {
-    justify-content: flex-start;
-    text-align: left;
-  }
-
-  .euiEmptyPrompt__main {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    @include euiBreakpoint('l', 'xl') {
-      flex-direction: row-reverse;
-    }
-  }
-
-  .euiEmptyPrompt__icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    @include euiBreakpoint('l', 'xl') {
-      min-width: 40%;
-      max-width: 50%;
-    }
-  }
-
-  .euiEmptyPrompt__content {
-    max-width: $euiEmptyPromptContentMaxWidth;
-
-    @include euiBreakpoint('l', 'xl') {
-      padding: $euiSizeL 0;
-    }
-  }
-
-  .euiEmptyPrompt__actions {
-    @include euiBreakpoint('l', 'xl') {
-      justify-content: flex-start;
-    }
-  }
-}
-
-// Padding
-@each $modifier, $amount in $euiPanelPaddingModifiers {
-  .euiEmptyPrompt--#{$modifier} {
-    .euiEmptyPrompt__main,
-    .euiEmptyPrompt__footer {
-      padding: $amount;
-    }
-
-    &.euiEmptyPrompt--horizontal {
-      .euiEmptyPrompt__main {
-        gap: $amount;
-      }
-    }
-  }
-}

package/src/components/empty_prompt/_index.scss

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

package/src/components/search_bar/_index.scss

@@ -1 +0,0 @@
-@import './search_bar';

package/src/components/search_bar/_search_bar.scss

@@ -1,10 +0,0 @@
-.euiSearchBar__searchHolder {
-  min-width: $euiFormMaxWidth / 2;
-}
-
-@include euiBreakpoint('m', 'l', 'xl') {
-  .euiSearchBar__filtersHolder {
-    // Helps with flex-wrapping
-    max-width: calc(100% - #{$euiSize});
-  }
-}

package/src/components/tree_view/_index.scss

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

package/src/components/tree_view/tree_view.scss

@@ -1,117 +0,0 @@
-.euiTreeView__wrapper .euiTreeView {
-  margin: 0;
-  list-style-type: none;
-}
-
-.euiTreeView .euiTreeView {
-  padding-left: $euiSizeL;
-}
-
-.euiTreeView__node {
-  max-height: $euiSizeXL;
-  line-height: $euiSizeXL;
-}
-
-.euiTreeView__node--expanded {
-  max-height: 100vh;
-}
-
-.euiTreeView__nodeInner {
-  @include euiTextTruncate;
-
-  padding-left: $euiSizeS;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: $euiSizeXL;
-  border-radius: $euiBorderRadius;
-  width: 100%;
-  text-align-last: left;
-
-  &:focus {
-    @include euiFocusRing('small', 'inner');
-  }
-
-  &:hover,
-  &:active,
-  &:focus {
-    @include euiFocusBackground($euiTextColor);
-  }
-
-  .euiTreeView__iconPlaceholder {
-    width: $euiSizeXL;
-  }
-}
-
-.euiTreeView__nodeLabel {
-  @include euiTextTruncate;
-}
-
-.euiTreeView__iconWrapper {
-  margin-top: -($euiSizeXS / 2);
-  margin-right: $euiSizeS;
-
-  // This helps tokens appear vertically centered
-  .euiToken {
-    margin-top: $euiSizeXS / 2;
-  }
-}
-
-// TODO: Address nesting during Emotion conversion, if possible
-// stylelint-disable max-nesting-depth
-.euiTreeView--compressed {
-  .euiTreeView__node {
-    max-height: $euiSizeL;
-    line-height: $euiSizeL;
-
-    .euiTreeView__nodeInner {
-      height: $euiSizeL;
-    }
-
-    .euiTreeView__iconWrapper {
-      margin: 0 ($euiSizeS * .75) 0 0;
-    }
-
-    .euiTreeView__nodeLabel {
-      margin-top: -1px;
-    }
-
-    .euiTreeView__iconPlaceholder {
-      width: $euiSizeL;
-    }
-  }
-
-  .euiTreeView__node--expanded {
-    max-height: 100vh;
-  }
-}
-
-.euiTreeView--withArrows {
-  .euiTreeView__expansionArrow {
-    margin-right: $euiSizeXS;
-  }
-
-  &.euiTreeView {
-    .euiTreeView__nodeInner--withArrows {
-      .euiTreeView__iconWrapper {
-        margin-left: 0;
-      }
-    }
-
-    .euiTreeView__iconWrapper {
-      margin-left: $euiSize + $euiSizeXS;
-    }
-  }
-
-  &.euiTreeView--compressed {
-    .euiTreeView__nodeInner--withArrows {
-      .euiTreeView__iconWrapper {
-        margin-left: 0;
-      }
-    }
-
-    .euiTreeView__iconWrapper {
-      margin-left: $euiSize;
-    }
-  }
-}