@elastic/eui 95.7.0 → 95.8.0-backport.0

package/test-env/components/header/header_links/header_link.js

@@ -5,14 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiHeaderLink = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _button = require("../../button");
 var _react2 = require("@emotion/react");
-var _excluded = ["isActive", "className"];
+var _excluded = ["isActive", "className", "size"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -20,21 +20,20 @@ var _excluded = ["isActive", "className"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EuiHeaderLink = exports.EuiHeaderLink = function EuiHeaderLink(_ref) {
   var isActive = _ref.isActive,
     className = _ref.className,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 's' : _ref$size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiHeaderLink', {
     'euiHeaderLink-isActive': isActive
   }, className);
-  var props = _objectSpread(_objectSpread({
-    color: isActive ? 'primary' : 'text'
-  }, rest), {}, {
-    className: classes
-  });
-  return (0, _react2.jsx)(_button.EuiButtonEmpty, props);
+  return (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
+    className: classes,
+    color: isActive ? 'primary' : 'text',
+    size: size
+  }, rest));
 };
 EuiHeaderLink.propTypes = {
   href: _propTypes.default.string,

package/test-env/components/header/header_links/header_links.js

@@ -102,7 +102,7 @@ var EuiHeaderLinks = exports.EuiHeaderLinks = function EuiHeaderLinks(_ref) {
       isOpen: mobileMenuIsOpen,
       anchorPosition: "downRight",
       closePopover: closeMenu,
-      panelPaddingSize: "none",
+      panelPaddingSize: "s",
       repositionOnScroll: true
     }, popoverProps), (0, _react2.jsx)("div", {
       className: "euiHeaderLinks__mobileList",

package/test-env/components/header/header_links/header_links.styles.js

@@ -40,6 +40,6 @@ var euiHeaderLinksStyles = exports.euiHeaderLinksStyles = function euiHeaderLink
       m: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.base, ";;label:m;"),
       l: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.l, ";;label:l;")
     },
-    euiHeaderLinks__mobileList: /*#__PURE__*/(0, _react.css)(".euiHeaderLink{display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " padding:", euiTheme.size.s, ";&>.euiButtonEmpty__content{justify-content:flex-start;}};label:euiHeaderLinks__mobileList;")
+    euiHeaderLinks__mobileList: /*#__PURE__*/(0, _react.css)(".euiHeaderLink{display:block;", (0, _global_styling.logicalCSS)('width', '100%'), "&>.euiButtonEmpty__content{justify-content:flex-start;}};label:euiHeaderLinks__mobileList;")
   };
 };

package/test-env/services/emotion/clone_element.js

@@ -21,14 +21,16 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * See https://github.com/emotion-js/emotion/issues/1404
  */
 var cloneElementWithCss = exports.cloneElementWithCss = function cloneElementWithCss(element, props) {
+  var cssOrder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'after';
   var clonedElement = element.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__ || element.type; // EMOTION_TYPE handles non-React elements (native JSX/HTML nodes)
 
-  var clonedProps = _objectSpread(_objectSpread({
-    key: element.key,
+  var clonedProps = _objectSpread(_objectSpread(_objectSpread({}, element.key ? {
+    key: element.key
+  } : {}), {}, {
     ref: element.ref
   }, element.props), props);
   if (props.css || element.props.css) {
-    clonedProps.css = [element.props.css, props.css];
+    clonedProps.css = cssOrder === 'before' ? [props.css, element.props.css] : [element.props.css, props.css];
   }
   return (0, _react.jsx)(clonedElement, clonedProps);
 };

package/src/components/form/_form.scss

@@ -1,8 +0,0 @@
-.euiForm__error {
-  @include euiFontSizeS;
-  list-style: disc;
-}
-
-.euiForm__errors {
-  margin-bottom: $euiSize;
-}

package/src/components/form/_index.scss

@@ -1,11 +0,0 @@
-@import 'checkbox/index';
-@import 'described_form_group/index';
-@import 'form';
-@import 'form_control_layout/index';
-@import 'form_error_text/index';
-@import 'form_fieldset/index';
-@import 'form_help_text/index';
-@import 'form_label/index';
-@import 'form_row/index';
-@import 'radio/index';
-@import 'switch/index';

package/src/components/form/checkbox/_checkbox.scss

@@ -1,115 +0,0 @@
-// TODO: Address nesting during Emotion conversion, if possible
-// stylelint-disable max-nesting-depth
-
-/**
-  * 1. Float above the visual radio and match its dimension, so that when users try to click it
-  *    they actually click this input.
-  */
-
-.euiCheckbox {
-  position: relative;
-
-  // Set a top offset for the real input and faux input to align better with the text
-  $topOffset: (($euiSizeL - $euiCheckBoxSize) / 2) - 1px;
-
-  .euiCheckbox__input {
-    @include size($euiCheckBoxSize);
-    top: $topOffset;
-    cursor: pointer;
-    position: absolute; /* 1 */
-    opacity: 0; /* 1 */
-    z-index: 1; /* 1 */
-
-    ~ .euiCheckbox__label {
-      display: inline-block;
-      padding-left: ($euiCheckBoxSize * 1.5);
-      line-height: $euiSizeL;
-      font-size: $euiFontSizeS;
-      position: relative;
-      z-index: 2;
-      cursor: pointer;
-    }
-
-    + .euiCheckbox__square {
-      @include euiCustomControl($type: 'square', $size: $euiCheckBoxSize);
-      display: inline-block;
-      position: absolute;
-      left: 0;
-      top: $topOffset;
-    }
-
-    &:checked {
-      + .euiCheckbox__square {
-        @include euiCustomControlSelected($type: 'check');
-      }
-    }
-
-    &:indeterminate {
-      + .euiCheckbox__square {
-        @include euiCustomControlSelected($type: 'square');
-      }
-    }
-
-    &:focus {
-      + .euiCheckbox__square {
-        @include euiCustomControlFocused;
-      }
-    }
-
-    // Readonly checkboxes are used by EuiMarkdownEditor
-    &[readonly] {
-      cursor: default !important; // stylelint-disable-line declaration-no-important
-
-      ~ .euiCheckbox__label {
-        cursor: default !important; // stylelint-disable-line declaration-no-important
-      }
-
-      // maintain the initial color to enforce that clicks are not doing anything
-      &:focus {
-        + .euiCheckbox__square {
-          outline-color: $euiFormCustomControlBorderColor !important; // stylelint-disable-line declaration-no-important
-          border-color: $euiFormCustomControlBorderColor;
-        }
-      }
-    }
-
-    &[disabled] {
-      cursor: not-allowed !important; // stylelint-disable-line declaration-no-important
-
-      ~ .euiCheckbox__label {
-        color: $euiFormControlDisabledColor;
-        cursor: not-allowed !important; // stylelint-disable-line declaration-no-important
-      }
-
-      + .euiCheckbox__square {
-        @include euiCustomControlDisabled;
-      }
-    }
-
-    &:checked[disabled] {
-      + .euiCheckbox__square {
-        @include euiCustomControlDisabled($type: 'check');
-      }
-    }
-
-    &:indeterminate[disabled] {
-      + .euiCheckbox__square {
-        @include euiCustomControlDisabled($type: 'square');
-      }
-    }
-  }
-
-  &.euiCheckbox--noLabel {
-    min-height: $euiCheckBoxSize;
-    min-width: $euiCheckBoxSize;
-
-    .euiCheckbox__input,
-    .euiCheckbox__square {
-      top: 0;
-    }
-
-    .euiCheckbox__input {
-      margin: 0;
-    }
-  }
-}

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

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

package/src/components/form/described_form_group/_described_form_group.scss

@@ -1,34 +0,0 @@
-.euiDescribedFormGroup {
-  max-width: $euiFormMaxWidth * 2;
-
-  + * {
-    margin-top: $euiSizeL;
-  }
-
-  &.euiDescribedFormGroup--fullWidth {
-    max-width: 100%;
-  }
-
-  .euiDescribedFormGroup__description {
-    padding-top: $euiSizeS;
-  }
-
-  .euiDescribedFormGroup__fields {
-    min-width: 0; // Needed to support shrinking appropriately with viewport (prevents x-axis content overflow)
-  }
-
-  .euiDescribedFormGroup__fields > .euiFormRow--hasEmptyLabelSpace:first-child,
-  .euiDescribedFormGroup__fields > .euiFormRow:first-child:not(.euiFormRow--hasLabel) {
-    // Remove the forced margin
-    margin-top: 0;
-
-    // This fakes out flex into thinking there's text before the input and therefor aligns properly to the baseline
-    &::before {
-      content: '';
-    }
-  }
-}
-
-.euiDescribedFormGroup__descriptionColumn {
-  min-width: MIN(20rem, 50%);
-}

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

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

package/src/components/form/form_control_layout/_form_control_layout.scss

@@ -1,203 +0,0 @@
-// TODO: Address nesting during Emotion conversion, if possible
-// stylelint-disable max-nesting-depth
-
-.euiFormControlLayout {
-  // Let the height expand as needed
-  @include euiFormControlSize($includeAlternates: true);
-
-  // TODO: Remove this once all form controls are on Emotion/setting padding via CSS variables
-  $iconSize: map-get($euiFormControlIconSizes, 'medium');
-  $iconPadding: $euiFormControlPadding;
-  $marginBetweenIcons: $euiFormControlPadding / 2;
-
-  // The `.euiFormControlLayout-{num}icons` selector string is also declared in `src/components/form/form_control_layout/_num_icons.test.ts`.
-  // It is the same for all form controls so as to lessen the total classes exported,
-  // we use a form control layout class on all form controls.
-  @for $i from 1 through 5 {
-    &--#{$i}icons {
-      $paddingOffset: $iconPadding + ($iconSize + $marginBetweenIcons) * $i;
-
-      --eui-form-control-layout-icons-padding: #{$paddingOffset}; // Set this for flexible usage, e.g. components that need extra specificity
-      padding-right: $paddingOffset;
-
-      &[class*='compressed'] {
-        $iconSizeCompressed: map-get($euiFormControlIconSizes, 'small');
-        $iconPaddingCompressed: $euiFormControlCompressedPadding;
-        $paddingOffset: $iconPaddingCompressed + ($iconSizeCompressed + $marginBetweenIcons) * $i;
-
-        --eui-form-control-layout-icons-padding: #{$paddingOffset};
-        padding-right: $paddingOffset;
-      }
-    }
-  }
-}
-
-.euiFormControlLayout__childrenWrapper {
-  position: relative;
-}
-
-/**
- * 1. Account for inner box-shadow style border
- * 2. Ensure truncation works in children elements
- */
-
-.euiFormControlLayout--group {
-  // Match just the regular drop shadow of inputs
-  @include euiFormControlDefaultShadow;
-  display: flex;
-  align-items: stretch;
-  padding: 1px; /* 1 */
-
-  // Force the stretch of any children so they expand the full height of the control
-  > *,
-  .euiButtonEmpty,
-  .euiText,
-  .euiFormLabel,
-  .euiButtonIcon {
-    height: 100%;
-  }
-
-  .euiFormControlLayout__childrenWrapper {
-    flex-grow: 1;
-    overflow: hidden; /* 2 */
-  }
-
-  .euiFormControlLayout__prepend,
-  .euiFormControlLayout__append {
-    @include euiTextTruncate;
-    flex-shrink: 0;
-    height: 100%;
-    border-radius: 0;
-
-    // ICONS
-
-    &.euiIcon,
-    .euiIcon {
-      padding: 0 $euiSizeS;
-      width: $euiSizeXL;
-      border-radius: 0;
-      background-color: $euiFormInputGroupLabelBackground;
-    }
-
-    &.euiButtonIcon,
-    &.euiButtonEmpty,
-    .euiButtonIcon,
-    .euiButtonEmpty {
-      transform: none !important; // stylelint-disable-line declaration-no-important
-
-      // Undo sizing from icons inside buttons
-      .euiIcon {
-        background: none !important; // stylelint-disable-line declaration-no-important
-        padding: 0;
-        width: $euiSize;
-      }
-    }
-  }
-
-  .euiButtonIcon {
-    padding: 0 $euiSizeS;
-    width: $euiSizeXL;
-    border-radius: 0;
-
-    &:not(:focus) {
-      background-color: $euiFormInputGroupLabelBackground;
-    }
-
-    &:focus-visible {
-      outline: 2px solid $euiFocusRingColor;
-      outline-offset: -2px;
-    }
-  }
-
-  .euiToolTipAnchor > .euiIcon {
-    height: 100%;
-    background-color: $euiFormInputGroupLabelBackground;
-    padding: 0 $euiSizeS;
-    width: $euiSizeXL;
-    border-radius: 0;
-  }
-
-  > .euiFormControlLayout__prepend,
-  > .euiFormControlLayout__append {
-    max-width: 50%; // Make sure max-width only applies to the outer most append/prepend element
-  }
-
-  // stylelint-disable declaration-no-important
-  // This is the only way to target specific components to override styling
-
-  // TEXT
-
-  .euiFormLabel,
-  .euiText:not(.euiFormControlLayoutDelimited__delimiter) {
-    background-color: $euiFormInputGroupLabelBackground;
-    padding: $euiFormControlPadding;
-    line-height: $euiSize !important;
-    cursor: default !important; // pointer cursor on some form labels but not others is confusing
-
-    // If the next sibling is not the input, pull it closer to the text to reduce space
-    + *:not(.euiFormControlLayout__childrenWrapper):not(input) {
-      margin-left: -$euiFormControlPadding;
-    }
-  }
-
-  // If any child that is not the input has a next sibling that is text, pull it closer to the text to reduce space
-  > *:not(.euiFormControlLayout__childrenWrapper) {
-    + .euiFormLabel,
-    + .euiText {
-      margin-left: -$euiFormControlPadding;
-    }
-  }
-
-  // BORDERS on buttons only
-
-  .euiButtonEmpty {
-    border-right: $euiFormInputGroupBorder;
-  }
-
-  // Any buttons after the children wrapper or inside any elements after the children wrapper
-  // Need to swap border sides
-  .euiFormControlLayout__childrenWrapper ~ .euiButtonEmpty,
-  .euiFormControlLayout__childrenWrapper ~ * .euiButtonEmpty {
-    border-right: none;
-    border-left: $euiFormInputGroupBorder;
-  }
-
-  // Compressed alterations
-
-  &.euiFormControlLayout--compressed {
-    @include euiFormControlDefaultShadow($borderOnly: true);
-    border-radius: $euiBorderRadius / 2;
-    overflow: hidden; // Keeps backgrounds inside border radius
-
-    // Padding
-    .euiFormLabel,
-    .euiText:not(.euiFormControlLayoutDelimited__delimiter) {
-      padding: $euiFormControlCompressedPadding;
-
-      // If the next sibling is not the input, pull it closer to the text to reduce space
-      + *:not(.euiFormControlLayout__childrenWrapper) {
-        margin-left: -$euiFormControlCompressedPadding;
-      }
-    }
-
-    // If any child that is not the input has a next sibling that is text, pull it closer to the text to reduce space
-    > *:not(.euiFormControlLayout__childrenWrapper) {
-      + .euiFormLabel,
-      + .euiText {
-        margin-left: -$euiFormControlCompressedPadding;
-      }
-    }
-  }
-
-  // ReadOnly alterations
-  &.euiFormControlLayout--readOnly {
-    cursor: default;
-    background: $euiFormInputGroupLabelBackground;
-    border-color: transparent;
-    box-shadow: inset 0 0 0 1px $euiFormInputGroupLabelBackground;
-
-    input {
-      background-color: $euiFormBackgroundReadOnlyColor;
-    }
-  }
-}

package/src/components/form/form_control_layout/_form_control_layout_clear_button.scss

@@ -1,7 +0,0 @@
-.euiFormControlLayoutClearButton {
-  @include euiFormControlLayoutClearIcon('.euiFormControlLayoutClearButton__icon');
-}
-
-.euiFormControlLayoutClearButton--small {
-  @include euiFormControlLayoutClearIcon('.euiFormControlLayoutClearButton__icon', $size: 's');
-}

package/src/components/form/form_control_layout/_form_control_layout_custom_icon.scss

@@ -1,24 +0,0 @@
-.euiFormControlLayoutCustomIcon {
-  pointer-events: none;
-  font-size: 0; // ensures the icon stays vertically centered
-}
-
-.euiFormControlLayoutCustomIcon--clickable {
-  @include size($euiSize);
-
-  pointer-events: all;
-
-  .euiFormControlLayoutCustomIcon__icon {
-    vertical-align: baseline;
-    transform: none;
-  }
-
-  &:focus {
-    @include euiFocusRing;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    color: $euiFormControlDisabledColor;
-  }
-}

package/src/components/form/form_control_layout/_form_control_layout_delimited.scss

@@ -1,67 +0,0 @@
-.euiFormControlLayoutDelimited {
-  // Match just the regular drop shadow of inputs
-  @include euiFormControlDefaultShadow;
-  display: flex;
-  align-items: stretch;
-  padding: 1px; /* 1 */
-
-  > .euiFormControlLayout__childrenWrapper {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    background-color: $euiFormBackgroundColor;
-  }
-
-  // Target when the euiFormControlLayout is compressed without specifying the full class name in case it ever changes
-  &[class*='--compressed'] {
-    @include euiFormControlDefaultShadow($borderOnly: true);
-    border-radius: $euiBorderRadius / 2;
-  }
-
-  // Target when the euiFormControlLayout is fullWidth without specifying the full class name in case it ever changes
-  &[class*='--fullWidth'] .euiFormControlLayout__childrenWrapper,
-  &[class*='--fullWidth'] .euiFormControlLayout__childrenWrapper > *:not(.euiFormControlLayoutDelimited__delimiter):not(.euiFormControlLayoutIcons) {
-    width: 100%;
-    max-width: none;
-  }
-
-  // Target when the euiFormControlLayout is disabled without specifying the full class name in case it ever changes
-  &[class*='-isDisabled'] {
-    @include euiFormControlDisabledStyle;
-
-    .euiFormControlLayout__childrenWrapper {
-      background-color: $euiFormBackgroundDisabledColor;
-    }
-  }
-
-  // Target when the euiFormControlLayout is readOnly without specifying the full class name in case it ever changes
-  &[class*='--readOnly'] {
-    @include euiFormControlReadOnlyStyle;
-
-    .euiFormControlLayout__childrenWrapper {
-      background-color: $euiFormBackgroundReadOnlyColor;
-    }
-  }
-
-  &--isInvalid .euiFormControlLayout__childrenWrapper {
-    @include euiFormControlInvalidStyle;
-  }
-}
-
-.euiFormControlLayoutDelimited__input {
-  // stylelint-disable declaration-no-important
-  box-shadow: none !important;
-  border-radius: 0 !important;
-  // stylelint-enable declaration-no-important
-  text-align: center;
-  height: 100%;
-  min-width: 0; // Fixes FF
-}
-
-.euiFormControlLayoutDelimited__delimiter {
-  align-self: stretch;
-  flex-grow: 0;
-  display: flex;
-  align-items: center;
-  line-height: 1; // Override EuiText line-height
-}

package/src/components/form/form_control_layout/_form_control_layout_icons.scss

@@ -1,54 +0,0 @@
-.euiFormControlLayoutIcons {
-  pointer-events: none;
-  display: flex;
-  align-items: center;
-
-  > * + * {
-    margin-left: $euiFormControlPadding / 2;
-  }
-
-  &--absolute {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: $euiFormControlPadding;
-
-    .euiFormControlLayout--compressed & {
-      left: $euiFormControlCompressedPadding;
-    }
-  }
-
-  &--static {
-    // Absolutely positioning the icons sometimes doesn't work -
-    // in the case of delimited inputs, they overlay only one of controls making the layout unbalanced
-    position: static;
-    height: 100%;
-    align-self: stretch;
-    flex-grow: 0;
-    padding-inline: $euiFormControlPadding;
-
-    .euiFormControlLayout--compressed & {
-      padding-inline: $euiFormControlCompressedPadding;
-    }
-  }
-}
-
-.euiFormControlLayoutIcons--left {
-  z-index: 1; // Ensure the icon is visible above sibling inputs
-}
-
-.euiFormControlLayoutIcons--right {
-  left: auto;
-  right: $euiFormControlPadding;
-
-  .euiFormControlLayout--compressed & {
-    left: auto;
-    right: $euiFormControlCompressedPadding;
-  }
-}
-
-// If the control is disabled, change the color of the icons
-*:disabled + .euiFormControlLayoutIcons {
-  cursor: not-allowed;
-  color: $euiFormControlDisabledColor;
-}

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

@@ -1,5 +0,0 @@
-@import 'form_control_layout';
-@import 'form_control_layout_delimited';
-@import 'form_control_layout_icons';
-@import 'form_control_layout_clear_button';
-@import 'form_control_layout_custom_icon';

package/src/components/form/form_error_text/_form_error_text.scss

@@ -1,5 +0,0 @@
-.euiFormErrorText {
-  @include euiFontSizeXS;
-  padding-top: $euiSizeXS;
-  color: $euiColorDanger;
-}

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

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

package/src/components/form/form_fieldset/_form_legend.scss

@@ -1,11 +0,0 @@
-.euiFormLegend {
-  @include euiFormLabel;
-
-  &:not(.euiFormLegend-isHidden) {
-    margin-bottom: $euiSizeS;
-
-    &.euiFormLegend--compressed {
-      margin-bottom: $euiSizeXS;
-    }
-  }
-}

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

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

package/src/components/form/form_help_text/_form_help_text.scss

@@ -1,5 +0,0 @@
-.euiFormHelpText {
-  @include euiFontSizeXS;
-  padding-top: $euiSizeXS;
-  color: $euiColorDarkShade;
-}

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

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