@elastic/eui 95.7.0 → 95.8.0-backport.0

package/test-env/components/form/field_search/field_search.js

@@ -17,14 +17,15 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _browser = require("../../../services/browser");
 var _services = require("../../../services");
+var _browser = require("../../../services/browser");
+var _i18n = require("../../i18n");
 var _form_control_layout = require("../form_control_layout");
 var _validatable_control = require("../validatable_control");
 var _eui_form_context = require("../eui_form_context");
 var _field_search = require("./field_search.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["stylesMemoizer", "className", "id", "name", "placeholder", "isInvalid", "fullWidth", "isLoading", "inputRef", "incremental", "compressed", "onSearch", "isClearable", "append", "prepend"];
+var _excluded = ["stylesMemoizer", "className", "id", "name", "placeholder", "isInvalid", "disabled", "fullWidth", "isLoading", "inputRef", "incremental", "compressed", "onSearch", "isClearable", "append", "prepend"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -161,6 +162,7 @@ var EuiFieldSearchClass = exports.EuiFieldSearchClass = /*#__PURE__*/function (_
         name = _this$props2.name,
         placeholder = _this$props2.placeholder,
         isInvalid = _this$props2.isInvalid,
+        disabled = _this$props2.disabled,
         _this$props2$fullWidt = _this$props2.fullWidth,
         fullWidth = _this$props2$fullWidt === void 0 ? defaultFullWidth : _this$props2$fullWidt,
         isLoading = _this$props2.isLoading,
@@ -176,7 +178,7 @@ var EuiFieldSearchClass = exports.EuiFieldSearchClass = /*#__PURE__*/function (_
       if (typeof this.props.value !== 'string') value = this.state.value;
 
       // Set actual value of isClearable if value exists as well
-      var isClearable = Boolean(_isClearable && value && !rest.readOnly && !rest.disabled);
+      var isClearable = Boolean(_isClearable && value && !rest.readOnly && !disabled);
       var classes = (0, _classnames.default)('euiFieldSearch', {
         'euiFieldSearch-isLoading': isLoading,
         'euiFieldSearch-isClearable': isClearable,
@@ -184,32 +186,40 @@ var EuiFieldSearchClass = exports.EuiFieldSearchClass = /*#__PURE__*/function (_
       }, className);
       var styles = stylesMemoizer(_field_search.euiFieldSearchStyles);
       var cssStyles = [styles.euiFieldSearch, compressed ? styles.compressed : styles.uncompressed, fullWidth ? styles.fullWidth : styles.formWidth, (prepend || append) && styles.inGroup];
-      return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, {
-        icon: "search",
-        fullWidth: fullWidth,
-        isLoading: isLoading,
-        isInvalid: isInvalid,
-        clear: isClearable ? {
-          onClick: this.onClear,
-          'data-test-subj': 'clearSearchButton'
-        } : undefined,
-        compressed: compressed,
-        append: append,
-        prepend: prepend
-      }, (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
-        isInvalid: isInvalid
-      }, (0, _react2.jsx)("input", (0, _extends2.default)({
-        type: "search",
-        id: id,
-        name: name,
-        placeholder: placeholder,
-        className: classes,
-        css: cssStyles,
-        onKeyUp: function onKeyUp(e) {
-          return _this3.onKeyUp(e, incremental, onSearch);
-        },
-        ref: this.setRef
-      }, rest))));
+      return (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiFieldSearch.clearSearchButtonLabel",
+        default: "Clear search input"
+      }, function (clearSearchButtonLabel) {
+        return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, {
+          icon: "search",
+          fullWidth: fullWidth,
+          isLoading: isLoading,
+          isInvalid: isInvalid,
+          isDisabled: disabled,
+          clear: isClearable ? {
+            onClick: _this3.onClear,
+            'aria-label': clearSearchButtonLabel,
+            'data-test-subj': 'clearSearchButton'
+          } : undefined,
+          compressed: compressed,
+          append: append,
+          prepend: prepend
+        }, (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
+          isInvalid: isInvalid
+        }, (0, _react2.jsx)("input", (0, _extends2.default)({
+          type: "search",
+          id: id,
+          name: name,
+          placeholder: placeholder,
+          className: classes,
+          css: cssStyles,
+          onKeyUp: function onKeyUp(e) {
+            return _this3.onKeyUp(e, incremental, onSearch);
+          },
+          disabled: disabled,
+          ref: _this3.setRef
+        }, rest))));
+      });
     }
   }]);
 }(_react.Component);

package/test-env/components/form/field_text/field_text.js

@@ -68,6 +68,7 @@ var EuiFieldText = exports.EuiFieldText = function EuiFieldText(props) {
     fullWidth: fullWidth,
     isLoading: isLoading,
     isInvalid: isInvalid,
+    isDisabled: rest.disabled,
     compressed: compressed,
     readOnly: readOnly,
     prepend: prepend,

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

@@ -13,6 +13,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _call_out = require("../call_out");
 var _i18n = require("../i18n");
+var _spacer = require("../spacer");
 var _eui_form_context = require("./eui_form_context");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "isInvalid", "error", "component", "invalidCallout", "fullWidth"];
@@ -36,7 +37,7 @@ var EuiForm = exports.EuiForm = /*#__PURE__*/(0, _react.forwardRef)(function (_r
     invalidCallout = _ref$invalidCallout === void 0 ? 'above' : _ref$invalidCallout,
     fullWidth = _ref.fullWidth,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var formContext = _react.default.useMemo(function () {
+  var formContext = (0, _react.useMemo)(function () {
     return {
       defaultFullWidth: fullWidth !== null && fullWidth !== void 0 ? fullWidth : false
     };
@@ -61,7 +62,7 @@ var EuiForm = exports.EuiForm = /*#__PURE__*/(0, _react.forwardRef)(function (_r
       token: "euiForm.addressFormErrors",
       default: "Please address the highlighted errors."
     }, function (addressFormErrors) {
-      return (0, _react2.jsx)(_call_out.EuiCallOut, {
+      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_call_out.EuiCallOut, {
         tabIndex: -1,
         ref: handleFocus,
         className: "euiForm__errors",
@@ -69,7 +70,9 @@ var EuiForm = exports.EuiForm = /*#__PURE__*/(0, _react.forwardRef)(function (_r
         color: "danger",
         role: "alert",
         "aria-live": "assertive"
-      }, optionalErrors);
+      }, optionalErrors), (0, _react2.jsx)(_spacer.EuiSpacer, {
+        size: "m"
+      }));
     });
   }
   var Element = component;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiFormVariables = exports.euiFormMaxWidth = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutoFillStyles = exports.euiCustomControl = void 0;
+exports.euiFormVariables = exports.euiFormMaxWidth = exports.euiFormCustomControlVariables = exports.euiFormCustomControlStyles = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutoFillStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _services = require("../../services");
 var _global_styling = require("../../global_styling");
@@ -57,14 +57,7 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
     controlDisabledColor: euiTheme.colors.mediumShade,
     controlBoxShadow: '0 0 transparent',
     controlPlaceholderText: (0, _services.makeHighContrastColor)(euiTheme.colors.subduedText)(backgroundColor),
-    inputGroupLabelBackground: isColorDark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.15) : (0, _services.tint)(euiTheme.colors.lightShade, 0.5),
-    inputGroupBorder: 'none'
-  };
-
-  // Colors - specific to checkboxes, radios, switches, and range thumbs
-  var customControlColors = {
-    customControlDisabledIconColor: isColorDark ? (0, _services.shade)(euiTheme.colors.mediumShade, 0.38) : (0, _services.tint)(euiTheme.colors.mediumShade, 0.485),
-    customControlBorderColor: isColorDark ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.4) : (0, _services.tint)(euiTheme.colors.lightestShade, 0.31)
+    appendPrependBackground: isColorDark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.15) : (0, _services.tint)(euiTheme.colors.lightShade, 0.5)
   };
   var controlLayout = {
     controlLayoutGroupInputHeight: (0, _global_styling.mathWithUnits)(controlHeight, function (x) {
@@ -84,7 +77,7 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
       xxl: euiTheme.size.xxl
     }
   };
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, sizes), colors), customControlColors), iconSizes), controlLayout), {}, {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, sizes), colors), iconSizes), controlLayout), {}, {
     animationTiming: "".concat(euiTheme.animation.fast, " ease-in")
   });
 };
@@ -108,29 +101,6 @@ var euiFormControlStyles = exports.euiFormControlStyles = function euiFormContro
     autoFill: euiFormControlAutoFillStyles(euiThemeContext)
   };
 };
-var euiCustomControl = exports.euiCustomControl = function euiCustomControl(euiThemeContext) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  var euiTheme = euiThemeContext.euiTheme;
-  var form = euiFormVariables(euiThemeContext);
-  var type = options.type,
-    _options$size = options.size,
-    size = _options$size === void 0 ? euiTheme.size.base : _options$size;
-  var padddingStyle = '';
-  var borderRadiusStyle = '';
-  if (size) {
-    var borderSize = parseFloat(String(euiTheme.border.width.thin));
-    var paddingSize = (0, _global_styling.mathWithUnits)(size, function (x) {
-      return (x - borderSize * 2) / 2;
-    });
-    padddingStyle = "padding: ".concat(paddingSize, ";");
-  }
-  if (type === 'round') {
-    borderRadiusStyle = "border-radius: ".concat(size, ";");
-  } else if (type === 'square') {
-    borderRadiusStyle = "border-radius: ".concat(form.controlCompressedBorderRadius, ";");
-  }
-  return "\n    ".concat(padddingStyle, "\n    ").concat(borderRadiusStyle, "\n    border: ").concat(euiTheme.border.width.thin, " solid ").concat(form.customControlBorderColor, ";\n    background: ").concat(euiTheme.colors.emptyShade, " no-repeat center;\n\n    ").concat(_global_styling.euiCanAnimate, " {\n      transition: background-color ").concat(form.animationTiming, ",\n        border-color ").concat(form.animationTiming, ";\n    }\n  ");
-};
 var euiFormControlText = exports.euiFormControlText = function euiFormControlText(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var _euiFontSize = (0, _global_styling.euiFontSize)(euiThemeContext, 's'),
@@ -139,22 +109,37 @@ var euiFormControlText = exports.euiFormControlText = function euiFormControlTex
   return "\n    font-family: ".concat(euiTheme.font.family, ";\n    font-size: ").concat(fontSize, ";\n    color: ").concat(form.textColor, ";\n\n    ").concat(euiPlaceholderPerBrowser("\n      color: ".concat(form.controlPlaceholderText, ";\n      opacity: 1;\n    ")), "\n  ");
 };
 var euiFormControlDefaultShadow = exports.euiFormControlDefaultShadow = function euiFormControlDefaultShadow(euiThemeContext) {
+  var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    _ref2$withBorder = _ref2.withBorder,
+    withBorder = _ref2$withBorder === void 0 ? true : _ref2$withBorder,
+    _ref2$withBackground = _ref2.withBackground,
+    withBackground = _ref2$withBackground === void 0 ? true : _ref2$withBackground,
+    _ref2$withBackgroundC = _ref2.withBackgroundColor,
+    withBackgroundColor = _ref2$withBackgroundC === void 0 ? withBackground : _ref2$withBackgroundC,
+    _ref2$withBackgroundA = _ref2.withBackgroundAnimation,
+    withBackgroundAnimation = _ref2$withBackgroundA === void 0 ? withBackground : _ref2$withBackgroundA;
   var euiTheme = euiThemeContext.euiTheme;
   var form = euiFormVariables(euiThemeContext);
-  return "\n    /* We use inset box-shadow instead of border to skip extra hight calculations */\n    border: none;\n    box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(form.borderColor, ";\n    background-color: ").concat(form.backgroundColor, ";\n\n    background-repeat: no-repeat;\n    background-size: 0% 100%;\n    background-image: linear-gradient(to top,\n      var(--euiFormControlStateColor),\n      var(--euiFormControlStateColor) ").concat(euiTheme.border.width.thick, ",\n      transparent ").concat(euiTheme.border.width.thick, ",\n      transparent 100%\n    );\n\n    ").concat(_global_styling.euiCanAnimate, " {\n      transition:\n        box-shadow ").concat(form.animationTiming, ",\n        background-image ").concat(form.animationTiming, ",\n        background-size ").concat(form.animationTiming, ",\n        background-color ").concat(form.animationTiming, ";\n    }\n  ");
+
+  // We use inset box-shadow instead of border to skip extra height calculations
+  var border = "\n    border: none;\n    box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(form.borderColor, ";\n  ").trim();
+  var backgroundColor = "\n    background-color: ".concat(form.backgroundColor, ";\n  ").trim();
+  var backgroundGradient = "\n    background-repeat: no-repeat;\n    background-size: 0% 100%;\n    background-image: linear-gradient(to top,\n      var(--euiFormControlStateColor),\n      var(--euiFormControlStateColor) ".concat(euiTheme.border.width.thick, ",\n      transparent ").concat(euiTheme.border.width.thick, ",\n      transparent 100%\n    );\n  ").trim();
+  var backgroundAnimation = "\n    ".concat(_global_styling.euiCanAnimate, " {\n      transition:\n        background-image ").concat(form.animationTiming, ",\n        background-size ").concat(form.animationTiming, ",\n        background-color ").concat(form.animationTiming, ";\n    }\n  ").trim();
+  return "\n    ".concat(withBorder ? border : '', "\n    ").concat(withBackgroundColor ? backgroundColor : '', "\n    ").concat(withBackground ? backgroundGradient : '', "\n    ").concat(withBackgroundAnimation ? backgroundAnimation : '', "\n  ");
 };
-var euiFormControlFocusStyles = exports.euiFormControlFocusStyles = function euiFormControlFocusStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme,
-    colorMode = _ref2.colorMode;
+var euiFormControlFocusStyles = exports.euiFormControlFocusStyles = function euiFormControlFocusStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme,
+    colorMode = _ref3.colorMode;
   return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.primary, ";\n  background-color: ").concat(colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.emptyShade, 0.4) : euiTheme.colors.emptyShade, ";\n  background-size: 100% 100%;\n  outline: none; /* Remove all outlines and rely on our own bottom border gradient */\n");
 };
-var euiFormControlInvalidStyles = exports.euiFormControlInvalidStyles = function euiFormControlInvalidStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+var euiFormControlInvalidStyles = exports.euiFormControlInvalidStyles = function euiFormControlInvalidStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme;
   return "\n  --euiFormControlStateColor: ".concat(euiTheme.colors.danger, ";\n  background-size: 100% 100%;\n");
 };
 var euiFormControlDisabledStyles = exports.euiFormControlDisabledStyles = function euiFormControlDisabledStyles(euiThemeContext) {
   var form = euiFormVariables(euiThemeContext);
-  return "\n    color: ".concat(form.controlDisabledColor, ";\n    /* Required for Safari */\n    -webkit-text-fill-color: ").concat(form.controlDisabledColor, ";\n    background-color: ").concat(form.backgroundDisabledColor, ";\n    cursor: not-allowed;\n\n    ").concat(euiPlaceholderPerBrowser("\n      color: ".concat(form.controlDisabledColor, ";\n      opacity: 1;\n    ")), "\n  ");
+  return "\n    color: ".concat(form.controlDisabledColor, ";\n    /* Required for Safari */\n    -webkit-text-fill-color: ").concat(form.controlDisabledColor, ";\n    background-color: ").concat(form.backgroundDisabledColor, ";\n    cursor: not-allowed;\n    --euiFormControlStateColor: transparent;\n\n    ").concat(euiPlaceholderPerBrowser("\n      color: ".concat(form.controlDisabledColor, ";\n      opacity: 1;\n    ")), "\n  ");
 };
 var euiFormControlReadOnlyStyles = exports.euiFormControlReadOnlyStyles = function euiFormControlReadOnlyStyles(euiThemeContext) {
   var form = euiFormVariables(euiThemeContext);
@@ -186,4 +171,67 @@ var euiFormControlAutoFillStyles = exports.euiFormControlAutoFillStyles = functi
 };
 var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
   return "\n  &::-webkit-input-placeholder { ".concat(content, " }\n  &::-moz-placeholder { ").concat(content, " }\n  &:-ms-input-placeholder { ").concat(content, " }\n  &:-moz-placeholder { ").concat(content, " }\n  &::placeholder { ").concat(content, " }\n");
+};
+
+/**
+ * Selection custom controls - checkboxes, radios, and switches
+ */
+
+var euiFormCustomControlVariables = exports.euiFormCustomControlVariables = function euiFormCustomControlVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
+  var sizes = {
+    control: euiTheme.size.base,
+    lineHeight: euiTheme.size.l,
+    labelGap: euiTheme.size.s
+  };
+  var colors = {
+    unselected: euiTheme.colors.emptyShade,
+    unselectedBorder: colorMode === 'DARK' ? (0, _services.tint)(euiTheme.colors.lightestShade, 0.31) // WCAG AA requirements
+    : (0, _services.shade)(euiTheme.colors.lightestShade, 0.4),
+    selected: euiTheme.colors.primary,
+    selectedIcon: euiTheme.colors.emptyShade,
+    disabled: euiTheme.colors.lightShade,
+    disabledIcon: euiTheme.colors.darkShade,
+    disabledLabel: euiTheme.colors.disabledText // Lighter than formVars.disabledColor because it typically doesn't have as dark a background
+  };
+  var animation = {
+    speed: euiTheme.animation.fast,
+    easing: 'ease-in'
+  };
+  return {
+    sizes: sizes,
+    colors: colors,
+    animation: animation
+  };
+};
+var euiFormCustomControlStyles = exports.euiFormCustomControlStyles = function euiFormCustomControlStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var controlVars = euiFormCustomControlVariables(euiThemeContext);
+  var centerWithLabel = (0, _global_styling.mathWithUnits)([controlVars.sizes.lineHeight, controlVars.sizes.control], function (x, y) {
+    return (x - y) / 2;
+  });
+  return {
+    wrapper: "\n      display: flex;\n      align-items: flex-start;\n    ",
+    input: {
+      fauxInput: "\n        position: relative;\n        ".concat((0, _global_styling.logicalCSS)('height', controlVars.sizes.control), "\n        ").concat((0, _global_styling.logicalCSS)('width', controlVars.sizes.control), "\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        &:has(+ label) {\n          ").concat((0, _global_styling.logicalCSS)('margin-top', centerWithLabel), "\n        }\n\n        &:has(input:focus-visible) {\n          outline: ").concat(euiTheme.focus.width, " solid ").concat(controlVars.colors.selected, ";\n          outline-offset: ").concat(euiTheme.focus.width, ";\n        }\n\n        ").concat(_global_styling.euiCanAnimate, " {\n          transition-property: background-color, color;\n          transition-duration: ").concat(controlVars.animation.speed, ";\n          transition-timing-function: ").concat(controlVars.animation.easing, ";\n        }\n      "),
+      enabled: {
+        selected: "\n          color: ".concat(controlVars.colors.selectedIcon, ";\n          background-color: ").concat(controlVars.colors.selected, ";\n        "),
+        unselected: "\n          color: transparent;\n          background-color: ".concat(controlVars.colors.unselected, ";\n          border: ").concat(euiTheme.border.width.thin, " solid ").concat(controlVars.colors.unselectedBorder, ";\n\n          &:has(input:focus) {\n            border-color: ").concat(controlVars.colors.selected, ";\n          }\n        ")
+      },
+      disabled: {
+        selected: "\n          label: disabled;\n          color: ".concat(controlVars.colors.disabledIcon, ";\n          background-color: ").concat(controlVars.colors.disabled, ";\n        "),
+        unselected: "\n          label: disabled;\n          color: ".concat(controlVars.colors.disabled, ";\n          background-color: ").concat(controlVars.colors.disabled, ";\n          cursor: not-allowed;\n        ")
+      },
+      // Looks better centered at different zoom levels than just <EuiIcon size="s" />
+      icon: "\n        transform: scale(0.75);\n      ",
+      // Hidden input sits on top of the visible element
+      hiddenInput: "\n        position: absolute;\n        inset: 0;\n        opacity: 0 !important;\n        cursor: pointer;\n\n        &:disabled {\n          cursor: not-allowed;\n        }\n      "
+    },
+    label: {
+      label: "\n        /* Needs to use padding and not flex gap for extra mouse click area */\n        ".concat((0, _global_styling.logicalCSS)('padding-left', controlVars.sizes.labelGap), "\n        line-height: ").concat(controlVars.sizes.lineHeight, ";\n        font-size: ").concat((0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";\n      "),
+      enabled: "\n        cursor: pointer;\n      ",
+      disabled: "\n        cursor: not-allowed;\n        color: ".concat(controlVars.colors.disabledLabel, ";\n      ")
+    }
+  };
 };

package/test-env/components/form/form_control_layout/_num_icons.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isRightSideIcon = exports.getIconAffordanceStyles = exports.getFormControlClassNameForIconCount = void 0;
+exports.isRightSideIcon = exports.getIconAffordanceStyles = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _form_control_layout_icons = require("./form_control_layout_icons");
 /*
@@ -15,40 +15,15 @@ var _form_control_layout_icons = require("./form_control_layout_icons");
  * Side Public License, v 1.
  */
 
-/**
- * The `getFormControlClassNameForIconCount` function helps setup the className appendum
- * depending on the form control's current settings/state.
- *
- * @param icon {boolean} Does it contain a static icon like arrowDown
- * @param clear {boolean} Is it currently clearable
- * @param isLoading {boolean} Is is currently loading
- * @param isInvalid {boolean} It is currently invalid
- * @param isDropdown {boolean} It is as dropdown
- * @returns {string | undefined} Returns the string to append to the base className of the form control; or `undefined` if all evaluate to false
- */
-
-var getFormControlClassNameForIconCount = exports.getFormControlClassNameForIconCount = function getFormControlClassNameForIconCount(_ref) {
+var isRightSideIcon = exports.isRightSideIcon = function isRightSideIcon(icon) {
+  return !!icon && (0, _form_control_layout_icons.isIconShape)(icon) && icon.side === 'right';
+};
+var getIconAffordanceStyles = exports.getIconAffordanceStyles = function getIconAffordanceStyles(_ref) {
   var icon = _ref.icon,
     clear = _ref.clear,
     isLoading = _ref.isLoading,
     isInvalid = _ref.isInvalid,
     isDropdown = _ref.isDropdown;
-  var numIcons = [icon, clear, isInvalid, isLoading, isDropdown].filter(function (item) {
-    return item === true;
-  }).length;
-
-  // This className is also specifically used in `src/global_styling/mixins/_form.scss`
-  return numIcons > 0 ? "euiFormControlLayout--".concat(numIcons, "icons") : undefined;
-};
-var isRightSideIcon = exports.isRightSideIcon = function isRightSideIcon(icon) {
-  return !!icon && (0, _form_control_layout_icons.isIconShape)(icon) && icon.side === 'right';
-};
-var getIconAffordanceStyles = exports.getIconAffordanceStyles = function getIconAffordanceStyles(_ref2) {
-  var icon = _ref2.icon,
-    clear = _ref2.clear,
-    isLoading = _ref2.isLoading,
-    isInvalid = _ref2.isInvalid,
-    isDropdown = _ref2.isDropdown;
   var cssVariables = {
     '--euiFormControlLeftIconsCount': 0,
     '--euiFormControlRightIconsCount': 0
@@ -64,9 +39,9 @@ var getIconAffordanceStyles = exports.getIconAffordanceStyles = function getIcon
   if (isLoading) cssVariables['--euiFormControlRightIconsCount']++;
   if (isInvalid) cssVariables['--euiFormControlRightIconsCount']++;
   if (isDropdown) cssVariables['--euiFormControlRightIconsCount']++;
-  var filtered = Object.entries(cssVariables).filter(function (_ref3) {
-    var _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
-      count = _ref4[1];
+  var filtered = Object.entries(cssVariables).filter(function (_ref2) {
+    var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+      count = _ref3[1];
     return count > 0;
   });
   return filtered.length ? Object.fromEntries(filtered) : undefined;

package/test-env/components/form/form_control_layout/form_control_layout.js

@@ -7,16 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiFormControlLayout = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _num_icons = require("./_num_icons");
-var _form_control_layout_icons = require("./form_control_layout_icons");
+var _services = require("../../../services");
 var _form_label = require("../form_label");
 var _eui_form_context = require("../eui_form_context");
+var _num_icons = require("./_num_icons");
+var _form_control_layout_icons = require("./form_control_layout_icons");
+var _form_control_layout = require("./form_control_layout.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["inputId", "className", "children", "icon", "iconsPosition", "clear", "isDropdown", "isLoading", "isInvalid", "isDisabled", "readOnly", "compressed", "prepend", "append", "fullWidth"];
+var _excluded = ["inputId", "className", "children", "icon", "iconsPosition", "clear", "isDropdown", "isLoading", "isInvalid", "isDisabled", "readOnly", "compressed", "prepend", "append", "isDelimited", "wrapperProps", "fullWidth"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -26,6 +30,8 @@ var _excluded = ["inputId", "className", "children", "icon", "iconsPosition", "c
  */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+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 EuiFormControlLayout = exports.EuiFormControlLayout = function EuiFormControlLayout(props) {
   var _useFormContext = (0, _eui_form_context.useFormContext)(),
     defaultFullWidth = _useFormContext.defaultFullWidth;
@@ -44,16 +50,20 @@ var EuiFormControlLayout = exports.EuiFormControlLayout = function EuiFormContro
     compressed = props.compressed,
     prepend = props.prepend,
     append = props.append,
+    isDelimited = props.isDelimited,
+    wrapperProps = props.wrapperProps,
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var isGroup = !!(prepend || append || isDelimited);
   var classes = (0, _classnames.default)('euiFormControlLayout', {
-    'euiFormControlLayout--fullWidth': fullWidth,
-    'euiFormControlLayout--compressed': compressed,
-    'euiFormControlLayout--readOnly': readOnly,
-    'euiFormControlLayout--group': prepend || append,
-    'euiFormControlLayout-isDisabled': isDisabled
+    'euiFormControlLayout--group': isGroup && !isDelimited,
+    'euiFormControlLayout-isDisabled': isDisabled,
+    'euiFormControlLayout-readOnly': readOnly
   }, className);
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_control_layout.euiFormControlLayoutStyles);
+  var cssStyles = [styles.euiFormControlLayout, compressed ? styles.compressed : styles.uncompressed, fullWidth ? styles.fullWidth : styles.formWidth].concat((0, _toConsumableArray2.default)(isGroup ? [styles.group.group, compressed ? styles.group.compressed : styles.group.uncompressed] : []));
+  var childrenWrapperStyles = [styles.children.euiFormControlLayout__childrenWrapper, isGroup && styles.children.inGroup, isGroup && !append && styles.children.prependOnly, isGroup && !prepend && styles.children.appendOnly, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
   var hasDropdownIcon = !readOnly && !isDisabled && isDropdown;
   var hasRightIcon = (0, _num_icons.isRightSideIcon)(icon);
   var hasLeftIcon = icon && !hasRightIcon;
@@ -70,19 +80,23 @@ var EuiFormControlLayout = exports.EuiFormControlLayout = function EuiFormContro
     });
   }, [iconsPosition, icon, clear, isInvalid, isLoading, hasDropdownIcon]);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: cssStyles,
     className: classes
   }, rest), (0, _react2.jsx)(EuiFormControlLayoutSideNodes, {
     side: "prepend",
     nodes: prepend,
-    inputId: inputId
-  }), (0, _react2.jsx)("div", {
-    className: "euiFormControlLayout__childrenWrapper",
-    style: iconAffordanceStyles
-  }, hasLeftIcon && (0, _react2.jsx)(_form_control_layout_icons.EuiFormControlLayoutIcons, {
+    inputId: inputId,
+    compressed: compressed
+  }), (0, _react2.jsx)("div", (0, _extends2.default)({}, wrapperProps, {
+    css: childrenWrapperStyles,
+    className: (0, _classnames.default)('euiFormControlLayout__childrenWrapper', wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className),
+    style: _objectSpread(_objectSpread({}, iconAffordanceStyles), wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style)
+  }), hasLeftIcon && (0, _react2.jsx)(_form_control_layout_icons.EuiFormControlLayoutIcons, {
     side: "left",
     icon: icon,
     iconsPosition: iconsPosition,
-    compressed: compressed
+    compressed: compressed,
+    isDisabled: isDisabled
   }), children, hasRightIcons && (0, _react2.jsx)(_form_control_layout_icons.EuiFormControlLayoutIcons, {
     side: "right",
     icon: hasRightIcon ? icon : undefined,
@@ -91,11 +105,13 @@ var EuiFormControlLayout = exports.EuiFormControlLayout = function EuiFormContro
     clear: clear,
     isLoading: isLoading,
     isInvalid: isInvalid,
-    isDropdown: hasDropdownIcon
+    isDropdown: hasDropdownIcon,
+    isDisabled: isDisabled
   })), (0, _react2.jsx)(EuiFormControlLayoutSideNodes, {
     side: "append",
     nodes: append,
-    inputId: inputId
+    inputId: inputId,
+    compressed: compressed
   }));
 };
 
@@ -135,7 +151,7 @@ EuiFormControlLayout.propTypes = {
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
     css: _propTypes.default.any,
-    size: _propTypes.default.any
+    size: _propTypes.default.oneOf(["s", "m"])
   }),
   /**
        * Expand to fill 100% of the parent.
@@ -155,30 +171,41 @@ EuiFormControlLayout.propTypes = {
   /**
        * Connects the prepend and append labels to the input
        */
-  inputId: _propTypes.default.string
+  inputId: _propTypes.default.string,
+  /**
+       * Allows passing optional additional props to `.euiFormControlLayout__childrenWrapper`
+       */
+  wrapperProps: _propTypes.default.shape({
+    className: _propTypes.default.string,
+    "aria-label": _propTypes.default.string,
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
+  }),
+  // Internal prop used by EuiFormControlLayoutDelimited
+  isDelimited: _propTypes.default.bool
 };
 var EuiFormControlLayoutSideNodes = function EuiFormControlLayoutSideNodes(_ref) {
   var side = _ref.side,
     nodes = _ref.nodes,
-    inputId = _ref.inputId;
+    inputId = _ref.inputId,
+    compressed = _ref.compressed;
   var className = "euiFormControlLayout__".concat(side);
-  var renderFormLabel = (0, _react.useCallback)(function (label) {
-    return (0, _react2.jsx)(_form_label.EuiFormLabel, {
-      htmlFor: inputId,
-      className: className
-    }, label);
-  }, [inputId, className]);
+  var styles = (0, _services.useEuiMemoizedStyles)(_form_control_layout.euiFormControlLayoutSideNodeStyles);
+  var cssStyles = [styles.euiFormControlLayout__side, styles[side], compressed ? styles.compressed : styles.uncompressed];
   if (!nodes) return null;
-  return (0, _react2.jsx)(_react.default.Fragment, null, _react.default.Children.map(nodes, function (node, index) {
-    return typeof node === 'string' ? renderFormLabel(node) : /*#__PURE__*/(0, _react.cloneElement)(node, {
-      className: (0, _classnames.default)(className, node.props.className),
-      key: index
-    });
+  return (0, _react2.jsx)("div", {
+    css: cssStyles,
+    className: className
+  }, _react.default.Children.map(nodes, function (node) {
+    return typeof node === 'string' ? (0, _react2.jsx)(_form_label.EuiFormLabel, {
+      htmlFor: inputId
+    }, node) : node;
   }));
 };
 EuiFormControlLayoutSideNodes.propTypes = {
   side: _propTypes.default.oneOf(["append", "prepend"]).isRequired,
   nodes: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired, _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.element.isRequired]).isRequired).isRequired]),
   // For some bizarre reason if you make this the `children` prop instead, React doesn't properly override cloned keys :|
-  inputId: _propTypes.default.string
+  inputId: _propTypes.default.string,
+  compressed: _propTypes.default.bool
 };