@elastic/eui 95.1.0 → 95.2.0

package/test-env/components/steps/step_number.js

@@ -12,9 +12,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _accessibility = require("../accessibility");
 var _icon = require("../icon");
-var _step_strings = require("./step_strings");
 var _loading = require("../loading");
 var _services = require("../../services");
+var _step_strings = require("./step_strings");
 var _step_number = require("./step_number.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "status", "number", "titleSize"];
@@ -69,37 +69,59 @@ var EuiStepNumber = exports.EuiStepNumber = function EuiStepNumber(_ref) {
   switch (status) {
     // Loading spinner
     case 'loading':
-      screenReaderText = ariaLabelsMap.loading;
-      content = (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
-        className: "euiStepNumber__loader",
-        size: titleSize === 'xs' ? 'l' : 'xl'
-      });
-      break;
+      {
+        var iconSizeMap = {
+          none: 'm',
+          xs: 'l',
+          s: 'xl',
+          m: 'xl'
+        };
+        screenReaderText = ariaLabelsMap.loading;
+        content = (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
+          className: "euiStepNumber__loader",
+          size: iconSizeMap[titleSize]
+        });
+        break;
+      }
     // Statuses with icons
     case 'danger':
     case 'warning':
     case 'complete':
-      var cssIconStyles = [contentStyles.euiStepNumber__icon, contentStyles[status]];
-      var iconTypeMap = {
-        danger: 'cross',
-        warning: 'warning',
-        complete: 'check'
-      };
-      content = (0, _react2.jsx)(_icon.EuiIcon, {
-        type: iconTypeMap[status],
-        "aria-label": ariaLabelsMap[status],
-        size: titleSize === 'xs' ? 's' : 'm',
-        className: "euiStepNumber__icon",
-        css: cssIconStyles
-      });
-      break;
+      {
+        var cssIconStyles = [contentStyles.euiStepNumber__icon, contentStyles[status],
+        // EuiIcon does not support a xxs size so far,
+        // we use custom sizing here instead
+        titleSize === 'none' && contentStyles[titleSize]];
+        var iconTypeMap = {
+          danger: 'cross',
+          warning: 'warning',
+          complete: 'check'
+        };
+        var _iconSizeMap = {
+          xxs: 's',
+          xs: 's',
+          s: 'm',
+          m: 'm'
+        };
+        content = (0, _react2.jsx)(_icon.EuiIcon, {
+          type: iconTypeMap[status],
+          "aria-label": ariaLabelsMap[status],
+          size: _iconSizeMap[titleSize],
+          className: "euiStepNumber__icon",
+          css: cssIconStyles
+        });
+        break;
+      }
     // Statuses with numbers
     case 'incomplete':
     case 'current':
     case 'disabled':
     default:
-      var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
       screenReaderText = ariaLabelsMap[status || 'step'];
+      if (titleSize === 'none') {
+        break;
+      }
+      var cssNumberStyles = [contentStyles.euiStepNumber__number, status && contentStyles[status]];
       content = (0, _react2.jsx)("span", {
         "aria-hidden": "true",
         className: "euiStepNumber__number",
@@ -119,9 +141,11 @@ EuiStepNumber.propTypes = {
   status: _propTypes.default.any,
   number: _propTypes.default.number,
   /**
-     * Title sizing equivalent to EuiTitle, but only `m`, `s` and `xs`. Defaults to `s`
+     * Title sizing equivalent to EuiTitle, but only `m`, `s`, `xs`.
+     * `none` indicates no step number should be rendered.
+     * @default s
      */
-  titleSize: _propTypes.default.any,
+  titleSize: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["none"])]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,

package/test-env/components/steps/step_number.styles.js

@@ -43,6 +43,7 @@ var euiStepNumberStyles = exports.euiStepNumberStyles = function euiStepNumberSt
     m: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberSize, (0, _global_styling.euiFontSizeFromScale)('s', euiTheme)), ";;label:m;"),
     s: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberSize, (0, _global_styling.euiFontSizeFromScale)('s', euiTheme)), ";;label:s;"),
     xs: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberXSSize, (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme)), ";;label:xs;"),
+    none: /*#__PURE__*/(0, _react.css)(createStepsNumber(euiStep.numberXXSSize, (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme)), ";;label:none;"),
     // status
     incomplete: /*#__PURE__*/(0, _react.css)("background-color:transparent;color:", euiTheme.colors.text, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
     disabled: /*#__PURE__*/(0, _react.css)((0, _mixins.euiButtonFillColor)(euiThemeContext, 'disabled'), ";;label:disabled;"),
@@ -70,6 +71,7 @@ var euiStepNumberContentStyles = exports.euiStepNumberContentStyles = function e
     incomplete: /*#__PURE__*/(0, _react.css)("display:unset;position:relative;inset-block-start:-", euiTheme.border.width.thick, ";;label:incomplete;"),
     loading: /*#__PURE__*/(0, _react.css)(";label:loading;"),
     disabled: /*#__PURE__*/(0, _react.css)(";label:disabled;"),
-    current: /*#__PURE__*/(0, _react.css)("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;")
+    current: /*#__PURE__*/(0, _react.css)("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;"),
+    none: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size.s), ";label:none;")
   };
 };

package/test-env/components/steps/steps.js

@@ -67,7 +67,9 @@ EuiSteps.propTypes = {
      */
   headingElement: _propTypes.default.string,
   /**
-     * Title sizing equivalent to EuiTitle, but only `m`, `s` and `xs`. Defaults to `s`
+     * Title sizing equivalent to **EuiTitle**, but only `m`, `s`, `xs` font sizes.
+     * The `xxs` size reduces the size of the accompanying step indicator, but not the title itself.
+     * @default s
      */
   titleSize: _propTypes.default.any,
   className: _propTypes.default.string,

package/test-env/components/steps/steps_horizontal.js

@@ -21,7 +21,7 @@ var _excluded = ["className", "steps", "size"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var SIZES = exports.SIZES = ['s', 'm'];
+var SIZES = exports.SIZES = ['xs', 's', 'm'];
 var EuiStepsHorizontal = exports.EuiStepsHorizontal = function EuiStepsHorizontal(_ref) {
   var className = _ref.className,
     steps = _ref.steps,

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

@@ -13,8 +13,8 @@ exports.setEuiDevProviderWarning = exports.getEuiDevProviderWarning = exports.em
  */
 
 var providerWarning = undefined;
-var setEuiDevProviderWarning = exports.setEuiDevProviderWarning = function setEuiDevProviderWarning(level) {
-  return providerWarning = level;
+var setEuiDevProviderWarning = exports.setEuiDevProviderWarning = function setEuiDevProviderWarning(warningType) {
+  return providerWarning = warningType;
 };
 var getEuiDevProviderWarning = exports.getEuiDevProviderWarning = function getEuiDevProviderWarning() {
   return providerWarning;
@@ -22,6 +22,11 @@ var getEuiDevProviderWarning = exports.getEuiDevProviderWarning = function getEu
 
 // Not a public top-level EUI export, currently for internal use
 var emitEuiProviderWarning = exports.emitEuiProviderWarning = function emitEuiProviderWarning(providerMessage) {
+  // Handle callback types
+  if (typeof providerWarning === 'function') {
+    return providerWarning(providerMessage);
+  }
+  // Handle level types
   switch (providerWarning) {
     case 'log':
       console.log(providerMessage);

package/src/components/form/file_picker/_file_picker.scss

@@ -1,212 +0,0 @@
-/**
-  * REMEMBER: --large modifiers must come last to override --compressed
-  */
-
-.euiFilePicker {
-  @include euiFormControlSize($includeAlternates: true);
-  position: relative;
-
-  &.euiFilePicker--large {
-    border-radius: $euiFormControlBorderRadius;
-    overflow: hidden;
-    height: auto;
-  }
-
-  &.euiFilePicker--large.euiFilePicker--compressed {
-    border-radius: $euiFormControlCompressedBorderRadius;
-  }
-}
-
-// The input is an invisible dropzone / button
-.euiFilePicker__input {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  overflow: hidden;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &:hover:disabled {
-    cursor: not-allowed;
-  }
-
-  &:disabled {
-    opacity: 0;
-  }
-
-  &:disabled ~ .euiFilePicker__prompt {
-    color: $euiColorMediumShade;
-  }
-}
-
-.euiFilePicker__icon {
-  position: absolute;
-  left: $euiSizeM;
-  top: $euiSizeM;
-  transition: transform $euiAnimSpeedFast $euiAnimSlightResistance;
-
-  .euiFilePicker--compressed & {
-    top: $euiSizeS;
-    left: $euiSizeS;
-  }
-
-  .euiFilePicker--large & {
-    position: static;
-    margin-bottom: $euiSize;
-  }
-}
-
-/**
-  * 1. Don't block the user from dropping files onto the filepicker.
-  * 2. Ensure space for import icon, loading spinner, and clear button (only if it has files)
-  * 4. Static height so that it doesn't shift its surrounding contents around
-  */
-.euiFilePicker__prompt {
-  @include euiFormControlWithIcon; /* 2 */
-  height: $euiFormControlHeight;
-  padding-top: $euiFormControlPadding;
-  padding-right: $euiFormControlPadding;
-  padding-bottom: $euiFormControlPadding;
-  pointer-events: none; /* 1 */
-  border: $euiBorderWidthThick dashed $euiColorLightShade;
-  border-radius: $euiFormControlBorderRadius;
-
-  transition:
-    border-color $euiAnimSpeedFast ease-in,
-    background-color $euiAnimSpeedFast ease-in;
-
-  .euiFilePicker--compressed & {
-    @include euiFormControlStyleCompressed($includeStates: false);
-    @include euiFormControlWithIcon($compressed: true); /* 2 */
-    height: $euiFormControlCompressedHeight;
-    border-radius: $euiFormControlCompressedBorderRadius;
-    box-shadow: none;
-  }
-
-  .euiFilePicker--large & {
-    height: $euiFilePickerTallHeight; /* 4 */
-    padding: 0 $euiSizeL;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .euiFilePicker--large.euiFilePicker--compressed & {
-    height: $euiFilePickerTallHeight - $euiSizeL; /* 4 */
-  }
-
-  // To match other EUI form controls, do not color the border red if focused or disabled
-  .euiFilePicker-isInvalid:not(.euiFilePicker__showDrop) .euiFilePicker__input:not(:disabled):not(:focus) + & {
-    border-color: $euiColorDanger;
-  }
-}
-
-.euiFilePicker__promptText {
-  @include euiFontSizeS;
-  @include euiTextTruncate;
-  line-height: $euiSize;
-
-  // Make normal sized prompt stand out a bit more - on the large size we don't need this as it's already identifiable
-  .euiFilePicker:not(.euiFilePicker--large):not(.euiFilePicker-hasFiles) & {
-    color: $euiColorPrimaryText;
-  }
-
-  // Offset/center prompt text for non-large file-pickers
-  .euiFilePicker:not(.euiFilePicker--large) & {
-    margin-top: $euiSizeXS / -2;
-  }
-}
-
-.euiFilePicker__clearButton,
-.euiFilePicker__loadingSpinner {
-  position: absolute;
-  right: $euiSizeM;
-  top: $euiSizeM;
-
-  .euiFilePicker--compressed & {
-    top: $euiSizeS;
-  }
-}
-
-/**
-  * 1. Undo the pointer-events: none applied to the enclosing prompt.
-  */
-.euiFilePicker__clearButton {
-  pointer-events: auto; /* 1 */
-
-  .euiFilePicker:not(.euiFilePicker--large) & {
-    @include euiFormControlLayoutClearIcon('.euiFilePicker__clearIcon');
-  }
-
-  .euiFilePicker--large & {
-    position: relative;
-    top: 0;
-    right: 0;
-  }
-}
-
-// Focus
-.euiFilePicker__showDrop .euiFilePicker__prompt,
-.euiFilePicker__input:focus + .euiFilePicker__prompt {
-  border-color: $euiColorPrimary;
-}
-
-// Disabled
-.euiFilePicker__input:disabled + .euiFilePicker__prompt {
-  @include euiFormControlDisabledStyle;
-  box-shadow: none;
-}
-
-// Make space for the icons on the right
-.euiFilePicker:not(.euiFilePicker--large) {
-  &.euiFilePicker-isLoading .euiFilePicker__prompt,
-  &.euiFilePicker-hasFiles .euiFilePicker__prompt {
-    @include euiFormControlWithIcon(false, 'right'); /* 2 */
-  }
-}
-
-// When the filepicker has files in it
-.euiFilePicker-hasFiles .euiFilePicker__promptText {
-  color: $euiTextColor;
-}
-
-// Large styles only
-.euiFilePicker--large {
-  // stylelint-disable max-nesting-depth
-  // Hover and focus
-  .euiFilePicker__input:hover:not(:disabled),
-  .euiFilePicker__input:focus {
-    + .euiFilePicker__prompt {
-      .euiFilePicker__promptText {
-        // Adding the underline to the prompt text ensures the underline
-        // color is the same as the current text color
-        text-decoration: underline;
-      }
-
-      .euiFilePicker__icon {
-        transform: scale(1.1);
-      }
-    }
-  }
-
-  // While dragging files over the dropzone
-  &.euiFilePicker__showDrop .euiFilePicker__prompt {
-    .euiFilePicker__promptText {
-      text-decoration: underline;
-    }
-
-    .euiFilePicker__icon {
-      transform: scale(1.1);
-    }
-  }
-
-  &.euiFilePicker-hasFiles .euiFilePicker__promptText {
-    font-weight: $euiFontWeightBold;
-  }
-}

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

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

package/src/components/form/file_picker/_variables.scss

@@ -1 +0,0 @@
-$euiFilePickerTallHeight: $euiSize * 8;