@elastic/eui 102.2.0 → 102.3.0

package/optimize/lib/components/filter_group/filter_button.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiFilterButton = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
@@ -17,8 +17,10 @@ var _inner_text = require("../inner_text");
 var _badge = require("../badge");
 var _button_empty = require("../button/button_empty");
 var _filter_button = require("./filter_button.styles");
+var _button_group_button = require("../button/button_group/button_group_button");
+var _button_group_button2 = require("../button/button_group/button_group_button.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "iconType", "iconSide", "color", "badgeColor", "hasActiveFilters", "numFilters", "numActiveFilters", "isDisabled", "isSelected", "type", "grow", "withNext", "textProps", "contentProps"];
+var _excluded = ["children", "className", "iconType", "iconSide", "color", "badgeColor", "hasActiveFilters", "numFilters", "numActiveFilters", "isToggle", "isDisabled", "isSelected", "type", "grow", "withNext", "textProps", "contentProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -41,6 +43,7 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     hasActiveFilters = _ref.hasActiveFilters,
     numFilters = _ref.numFilters,
     numActiveFilters = _ref.numActiveFilters,
+    isToggle = _ref.isToggle,
     isDisabled = _ref.isDisabled,
     isSelected = _ref.isSelected,
     _ref$type = _ref.type,
@@ -51,18 +54,37 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     textProps = _ref.textProps,
     contentProps = _ref.contentProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var id = (0, _services.useGeneratedHtmlId)({
+    prefix: 'filter-button'
+  });
   var numFiltersDefined = numFilters != null; // != instead of !== to allow for null and undefined
   var numActiveFiltersDefined = numActiveFilters != null && numActiveFilters > 0;
+  var euiThemeContext = (0, _services.useEuiTheme)();
+  var colorMode = euiThemeContext.colorMode;
+  var isRefreshVariant = (0, _services.useEuiThemeRefreshVariant)('buttonVariant');
+
+  // assumption about type of usage based on icon usage
+  // requires manual override to apply correct aria attributes for more custom usages
+  var isCollapsible = !isToggle && iconType === 'arrowDown';
+  // NOTE: in Amsterdam `hasActiveFilters` applies selected styling while `isSelected` does not.
+  // With Borealis this is more granular as EuiFilterButton now supports proper toggle buttons next to regular buttons
+  var isExpanded = isCollapsible && (isSelected !== null && isSelected !== void 0 ? isSelected : hasActiveFilters);
   var styles = (0, _services.useEuiMemoizedStyles)(_filter_button.euiFilterButtonStyles);
-  var cssStyles = [styles.euiFilterButton, withNext && styles.withNext, !grow && styles.noGrow, hasActiveFilters && styles.hasActiveFilters, numFiltersDefined && styles.hasNotification];
+  var focusColorStyles = (0, _services.useEuiMemoizedStyles)(_button_group_button2._compressedButtonFocusColors);
+  var toggleVariantStyles = isRefreshVariant ? [isToggle && styles.buttonType.toggle, !isToggle && !isDisabled && focusColorStyles[color], !isToggle && styles.buttonType.default] : [isToggle && styles.buttonType.toggle];
+  var cssStyles = [styles.euiFilterButton, !isRefreshVariant && withNext && styles.withNext, hasActiveFilters && styles.hasActiveFilters].concat(toggleVariantStyles);
+  var wrapperStyles = (0, _services.useEuiMemoizedStyles)(_filter_button.euiFilterButtonWrapperStyles);
+  var wrapperCssStyles = [wrapperStyles.wrapper, isRefreshVariant && withNext && styles.withNext, numFiltersDefined && styles.hasNotification, isToggle && wrapperStyles.hasToggle, !grow && styles.noGrow];
   var _useEuiMemoizedStyles = (0, _services.useEuiMemoizedStyles)(_filter_button.euiFilterButtonChildStyles),
     contentStyles = _useEuiMemoizedStyles.content,
     textStyles = _useEuiMemoizedStyles.text,
     notificationStyles = _useEuiMemoizedStyles.notification;
+  var wrapperClasses = (0, _classnames.default)('euiFilterButton__wrapper');
   var classes = (0, _classnames.default)('euiFilterButton', {
     'euiFilterButton-isSelected': isSelected,
     'euiFilterButton-hasActiveFilters': hasActiveFilters,
-    'euiFilterButton-hasNotification': numFiltersDefined
+    'euiFilterButton-hasNotification': numFiltersDefined,
+    'euiFilterButton-isToggle': isRefreshVariant && isToggle
   }, className);
 
   /**
@@ -77,6 +99,16 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     count: badgeCount
   });
   var badgeStyles = [notificationStyles.euiFilterButton__notification, isDisabled && notificationStyles.disabled];
+  var badgeContent = (0, _react2.jsx)(_badge.EuiNotificationBadge, {
+    className: "euiFilterButton__notification",
+    css: badgeStyles,
+    "aria-label": hasActiveFilters ? activeBadgeLabel : availableBadgeLabel,
+    color: isDisabled || !hasActiveFilters ? 'subdued' : badgeColor,
+    role: "marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
+  }, badgeCount);
+  var badgeElement = showBadge && (isRefreshVariant ? (0, _react2.jsx)(_services.EuiThemeProvider, {
+    colorMode: isToggle && isSelected ? 'INVERSE' : colorMode
+  }, badgeContent) : badgeContent);
 
   /**
    * Text
@@ -90,7 +122,17 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     ref = _useInnerText2[0],
     innerText = _useInnerText2[1];
   var dataText = children && typeof children === 'string' ? children : innerText;
-  return (0, _react2.jsx)(_button_empty.EuiButtonEmpty, (0, _extends2.default)({
+  var textContent = (0, _react2.jsx)("span", (0, _extends2.default)({
+    ref: ref,
+    "data-text": dataText,
+    title: dataText
+  }, textProps, {
+    className: buttonTextClassNames,
+    css: textCssStyles
+  }), children);
+
+  /** Button element */
+  var button = (0, _react2.jsx)(_button_empty.EuiButtonEmpty, (0, _extends2.default)({
     className: classes,
     css: cssStyles,
     color: color,
@@ -99,21 +141,36 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     iconType: iconType,
     type: type,
     textProps: false,
+    contentProps: _objectSpread(_objectSpread({}, contentProps), {}, {
+      css: [contentStyles.euiFilterButton__content, iconType && contentStyles.hasIcon, contentProps === null || contentProps === void 0 ? void 0 : contentProps.css]
+    }),
+    "aria-expanded": isCollapsible ? isExpanded : undefined
+  }, rest), textContent, badgeElement);
+  var onToggleClick = function onToggleClick(e) {
+    var _rest$onClick;
+    rest === null || rest === void 0 || (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 || _rest$onClick.call(rest, e);
+  };
+  return (0, _react2.jsx)("div", {
+    className: wrapperClasses,
+    css: wrapperCssStyles
+  }, isToggle && !isCollapsible ? (0, _react2.jsx)(_button_group_button.EuiButtonGroupButton, (0, _extends2.default)({
+    id: id,
+    label: (0, _react2.jsx)(_react.default.Fragment, null, textContent, badgeElement),
+    className: classes,
+    css: cssStyles,
+    color: color,
+    isSelected: isSelected,
+    size: "compressed",
+    isDisabled: isDisabled,
+    iconSide: iconSide,
+    iconType: iconType,
+    isIconOnly: false,
+    type: type,
+    textProps: false,
     contentProps: _objectSpread(_objectSpread({}, contentProps), {}, {
       css: [contentStyles.euiFilterButton__content, iconType && contentStyles.hasIcon, contentProps === null || contentProps === void 0 ? void 0 : contentProps.css]
     })
-  }, rest), (0, _react2.jsx)("span", (0, _extends2.default)({
-    ref: ref,
-    "data-text": dataText,
-    title: dataText
-  }, textProps, {
-    className: buttonTextClassNames,
-    css: textCssStyles
-  }), children), showBadge && (0, _react2.jsx)(_badge.EuiNotificationBadge, {
-    className: "euiFilterButton__notification",
-    css: badgeStyles,
-    "aria-label": hasActiveFilters ? activeBadgeLabel : availableBadgeLabel,
-    color: isDisabled || !hasActiveFilters ? 'subdued' : badgeColor,
-    role: "marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
-  }, badgeCount));
+  }, rest, {
+    onClick: onToggleClick
+  })) : button);
 };

package/optimize/lib/components/filter_group/filter_button.styles.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiFilterButtonStyles = exports.euiFilterButtonDisplay = exports.euiFilterButtonChildStyles = void 0;
+exports.euiFilterButtonWrapperStyles = exports.euiFilterButtonStyles = exports.euiFilterButtonDisplay = exports.euiFilterButtonChildStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../services");
 var _global_styling = require("../../global_styling");
+var _supports = require("../../global_styling/functions/supports");
 var _form = require("../form/form.styles");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -14,12 +16,13 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var euiFilterButtonDisplay = exports.euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+var euiFilterButtonDisplay = exports.euiFilterButtonDisplay = function euiFilterButtonDisplay(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   return {
     flex: '1 1 auto',
     minInlineSize: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
-      return x * 3;
+      return x * (isRefreshVariant ? 2.75 : 3);
     })
   };
 };
@@ -33,9 +36,11 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 };
 var euiFilterButtonStyles = exports.euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     controlHeight = _euiFormVariables.controlHeight,
     borderColor = _euiFormVariables.borderColor;
+  var selectedSelector = '.euiFilterButton-isSelected';
   var border = "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor);
 
   // Pseudo elements create borders without affecting width. We also prefer them
@@ -43,14 +48,44 @@ var euiFilterButtonStyles = exports.euiFilterButtonStyles = function euiFilterBu
   var leftBorder = "\n    &::before {\n      content: '';\n      position: absolute;\n      ".concat((0, _global_styling.logicalCSS)('right', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('vertical', 0), "\n      ").concat((0, _global_styling.logicalCSS)('border-left', border), "\n    }\n  ");
   // Bottom borders are needed for responsive flex-wrap behavior
   var bottomBorder = "\n    &::after {\n      content: '';\n      position: absolute;\n      ".concat((0, _global_styling.logicalCSS)('top', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('horizontal', 0), "\n      ").concat((0, _global_styling.logicalCSS)('border-bottom', border), "\n    }\n  ");
+  var buttonStyles = isRefreshVariant ? "\n      ".concat((0, _global_styling.logicalCSS)('width', '100%'), "\n\n      &:not(").concat(selectedSelector, ") {\n        &:hover,\n        &:active {\n          .euiFilterButton__notification[class*=\"subdued\"] {\n            background-color: ").concat(euiTheme.components.filterButtonBadgeBackgroundHover, "\n          }\n        }\n      }\n    ") : "\n      ".concat((0, _global_styling.logicalCSS)('height', controlHeight), "\n      border-radius: 0;\n      ").concat(leftBorder, "\n      ").concat(bottomBorder, "\n\n      /* :not(:disabled) specificity needed to override EuiButtonEmpty styles */\n      &:hover:not(:disabled),\n      &:focus:not(:disabled) {\n        /* Remove underline from whole button so notifications don't get the underline */\n        text-decoration: none;\n\n        .euiFilterButton__text {\n          /* And put it only on the actual text part */\n          text-decoration: underline;\n        }\n      }\n    ");
+  var toggleTypeStyles = isRefreshVariant ? "\n      ".concat(euiFilterButtonDisplay(euiThemeContext), ";\n\n      ").concat((0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+    forced: "\n          &:is(".concat(selectedSelector, ") {\n            ").concat((0, _global_styling.preventForcedColors)(euiThemeContext), "\n              color: ").concat(euiTheme.colors.emptyShade, ";\n              background-color: ").concat(euiTheme.colors.fullShade, ";\n          }\n        ")
+  }), "\n    ") : "\n      font-weight: ".concat(euiTheme.font.weight.medium, ";\n      padding: 0;\n\n      &:is(").concat(selectedSelector, ") {\n        color: ").concat((0, _global_styling.euiButtonEmptyColor)(euiThemeContext, 'text').color, ";\n        background-color: transparent;\n        font-weight: ").concat(euiTheme.font.weight.bold, ";\n      }\n    ");
+  var withNextSelector = isRefreshVariant ? '& + .euiFilterButton__wrapper' : '.euiFilterButton__wrapper:has(&) + .euiFilterButton__wrapper';
+  // handles display of borders between buttons
+  var withNextStyles = isRefreshVariant ? "\n      &::before {\n        border: none;\n      }\n\n      ".concat((0, _supports.cssSupportsHasWithNextSibling)("\n          &:has(+ :not(&)) {\n            ".concat((0, _global_styling.logicalCSS)('padding-right', '0'), "\n          }\n        ")), "\n    ") : "\n      .euiFilterButton {\n        &::before {\n          border: none;\n        }\n      }\n    ";
   return {
-    euiFilterButton: /*#__PURE__*/(0, _react.css)("position:relative;", euiFilterButtonDisplay(euiThemeContext), " ", (0, _global_styling.logicalCSS)('height', controlHeight), " border-radius:0;", leftBorder, " ", bottomBorder, "&:hover:not(:disabled),&:focus:not(:disabled){text-decoration:none;.euiFilterButton__text{text-decoration:underline;}}&:focus-visible{outline-offset:-", euiTheme.focus.width, ";};label:euiFilterButton;"),
-    withNext: /*#__PURE__*/(0, _react.css)("&+.euiFilterButton{", (0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.xs)), "&::before{display:none;}};label:withNext;"),
+    euiFilterButton: /*#__PURE__*/(0, _react.css)(!isRefreshVariant && euiFilterButtonDisplay(euiThemeContext), ";position:relative;", buttonStyles, ";;label:euiFilterButton;"),
+    buttonType: {
+      default: /*#__PURE__*/(0, _react.css)(isRefreshVariant && "\n          border-radius: 0;\n\n          &:focus-visible {\n            z-index: 1;\n            outline-offset: -".concat(euiTheme.border.width.thick, ";\n            border-radius: ").concat(euiTheme.border.radius.small, ";\n            transition: none;\n          }\n        "), ";;label:default;"),
+      toggle: /*#__PURE__*/(0, _react.css)("&:focus-visible{outline-offset:", (0, _global_styling.mathWithUnits)(euiTheme.focus.width, function (x) {
+        return isRefreshVariant ? x / 2 : x * -1;
+      }), ";}", toggleTypeStyles, ";;label:toggle;")
+    },
+    withNext: /*#__PURE__*/(0, _react.css)(withNextSelector, "{", (0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.xs)), withNextStyles, ";};label:withNext;"),
     noGrow: _ref3,
     hasNotification: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
       return x * 6;
     })), ";;label:hasNotification;"),
-    hasActiveFilters: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+    hasActiveFilters: /*#__PURE__*/(0, _react.css)("font-weight:", isRefreshVariant ? euiTheme.font.weight.regular : euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+  };
+};
+var euiFilterButtonWrapperStyles = exports.euiFilterButtonWrapperStyles = function euiFilterButtonWrapperStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
+  var _euiFormVariables2 = (0, _form.euiFormVariables)(euiThemeContext),
+    borderColor = _euiFormVariables2.borderColor;
+  var border = "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor);
+
+  // Pseudo elements create borders without affecting width. We also prefer them
+  // over box-shadow for Windows high contrast theme compatibility
+  var leftBorder = "\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      ".concat((0, _global_styling.logicalCSS)('border-left', border), "\n\n      pointer-events: none;\n    }\n  ");
+  // Bottom borders are needed for responsive flex-wrap behavior
+  var bottomBorder = "\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      ".concat((0, _global_styling.logicalCSS)('border-bottom', border), "\n      pointer-events: none;\n    }\n  ");
+  return {
+    wrapper: /*#__PURE__*/(0, _react.css)(euiFilterButtonDisplay(euiThemeContext), " position:relative;display:flex;align-items:center;", isRefreshVariant && "\n        ".concat(leftBorder, "\n        ").concat(bottomBorder, "\n      "), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.border.width.thin), ";;label:wrapper;"),
+    hasToggle: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-horizontal', isRefreshVariant ? euiTheme.border.width.thin : '0'), (0, _supports.cssSupportsHasWithNextSibling)("\n          &:not([class*=\"withNext\"]):has(+ :not(&)) {\n            ".concat((0, _global_styling.logicalCSS)('padding-right', '0'), "\n          }\n        ")), ";;label:hasToggle;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -62,24 +97,25 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "nd1u8j-euiFilterButton__notification",
-  styles: "cursor:inherit;label:euiFilterButton__notification;"
+  name: "zxesfz-euiFilterButton__notification",
+  styles: "cursor:inherit;forced-color-adjust:auto;&{transition:none;};label:euiFilterButton__notification;"
 } : {
-  name: "nd1u8j-euiFilterButton__notification",
-  styles: "cursor:inherit;label:euiFilterButton__notification;",
+  name: "zxesfz-euiFilterButton__notification",
+  styles: "cursor:inherit;forced-color-adjust:auto;&{transition:none;};label:euiFilterButton__notification;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiFilterButtonChildStyles = exports.euiFilterButtonChildStyles = function euiFilterButtonChildStyles(_ref5) {
-  var euiTheme = _ref5.euiTheme;
+var euiFilterButtonChildStyles = exports.euiFilterButtonChildStyles = function euiFilterButtonChildStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   return {
     content: {
-      euiFilterButton__content: /*#__PURE__*/(0, _react.css)(";label:euiFilterButton__content;"),
+      euiFilterButton__content: /*#__PURE__*/(0, _react.css)(isRefreshVariant && "\n          .euiThemeProvider {\n            display: inline-flex;\n          }\n        ", ";;label:euiFilterButton__content;"),
       hasIcon: /*#__PURE__*/(0, _react.css)("&>.euiIcon:last-child{", (0, _global_styling.logicalCSS)('margin-left', 'auto'), ";};label:hasIcon;")
     },
     text: {
       euiFilterButton__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextShift)('bold', 'data-text', euiTheme), " ", (0, _global_styling.euiTextTruncate)(), ";;label:euiFilterButton__text;"),
       hasNotification: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
-        return x * 3;
+        return x * (isRefreshVariant ? 2 : 3);
       })), ";;label:hasNotification;")
     },
     notification: {

package/optimize/lib/components/filter_group/filter_group.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFilterGroupStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _high_contrast = require("../../global_styling/functions/high_contrast");
 var _form = require("../form/form.styles");
@@ -26,20 +27,31 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiFilterGroupStyles = exports.euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     backgroundColor = _euiFormVariables.backgroundColor,
     borderColor = _euiFormVariables.borderColor,
     controlBorderRadius = _euiFormVariables.controlBorderRadius,
+    controlHeight = _euiFormVariables.controlHeight,
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
+  var borderRadius = isRefreshVariant ? euiTheme.border.radius.small : controlBorderRadius;
+  var borderRadiusCompressed = isRefreshVariant ? euiTheme.border.radius.small : controlCompressedBorderRadius;
+  var borderStyle = isRefreshVariant ? "\n      /* Adds the border on a pseudo element to prevent height differences between wrapper and buttons.\n      Uses ::after to ensure overlap and prevents blocking by setting pointer-events: none */\n      &::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBasePlain, ";\n        border-radius: inherit;\n        pointer-events: none;\n      }\n    ") : "\n      ".concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    none: "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(borderColor, ";"),
+    forced: "border: ".concat(euiTheme.border.thin, ";")
+  }), "\n    ");
   return {
-    euiFilterGroup: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-      none: "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(borderColor, ";"),
-      forced: "border: ".concat(euiTheme.border.thin, ";")
-    }), ">*:not(.euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover>.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/(0, _react.css)(isRefreshVariant && "position: relative;", " display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", borderStyle, ">*:not(.euiFilterButton__wrapper, .euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover>.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{display:flex;", isRefreshVariant && "\n          .euiPopover:focus-within {\n            z-index: 1;\n          }\n            \n          .euiFilterButton__wrapper {\n            flex-grow: 1;\n          }\n        ", ";.euiFilterButton__wrapper{flex-grow:1;}};label:euiFilterGroup;"),
     fullWidth: _ref,
-    uncompressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
-    compressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", (0, _global_styling.logicalCSS)('height', controlCompressedHeight), ";};label:compressed;"),
+    uncompressed: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius, ";.euiFilterButton__wrapper{", (0, _global_styling.logicalCSS)('height', controlHeight), ";}.euiFilterButton{", (0, _global_styling.logicalCSS)('height', controlHeight), ";}", !isRefreshVariant && buttonChildrenBorderRadii(borderRadius), " ", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat((0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)([controlHeight, euiTheme.size.xxs], function (x, y) {
+      return x - 3 * y;
+    })), "\n        }\n      "), ";;label:uncompressed;"),
+    compressed: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadiusCompressed, ";", !isRefreshVariant && buttonChildrenBorderRadii(borderRadiusCompressed), " .euiFilterButton{", (0, _global_styling.logicalCSS)('height', isRefreshVariant ? (0, _global_styling.mathWithUnits)([controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
+      return x - 2 * y;
+    }) : controlCompressedHeight), ";}", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat((0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)([controlCompressedHeight, euiTheme.size.xxs], function (x, y) {
+      return x - 3 * y;
+    })), "\n        }\n      "), ";;label:compressed;"),
     /**
      * Not used in EuiFilterGroup directly, but used by EuiSearchBar and consumers
      * A fixed width is required because of the shift in widths that can be caused

package/optimize/lib/components/markdown_editor/markdown_editor_footer.js

@@ -84,6 +84,7 @@ var EuiMarkdownEditorFooter = exports.EuiMarkdownEditorFooter = /*#__PURE__*/(0,
   var syntaxTitle = (0, _i18n.useEuiI18n)('euiMarkdownEditorFooter.syntaxTitle', 'Syntax help');
   var _useContext = (0, _react.useContext)(_markdown_context.EuiMarkdownContext),
     readOnly = _useContext.readOnly;
+  var helpModalTitleId = (0, _services.useGeneratedHtmlId)();
   if (isUploadingFiles) {
     uploadButton = (0, _react2.jsx)(_button.EuiButtonIcon, {
       size: "s",
@@ -174,8 +175,11 @@ var EuiMarkdownEditorFooter = exports.EuiMarkdownEditorFooter = /*#__PURE__*/(0,
     })), isShowingHelpModal && (0, _react2.jsx)(_modal.EuiModal, {
       onClose: function onClose() {
         return setIsShowingHelpModal(false);
-      }
-    }, (0, _react2.jsx)(_modal.EuiModalHeader, null, (0, _react2.jsx)(_title.EuiTitle, null, (0, _react2.jsx)("h1", null, syntaxTitle))), (0, _react2.jsx)(_modal.EuiModalBody, null, (0, _react2.jsx)(_text.EuiText, null, (0, _react2.jsx)(_i18n.EuiI18n, {
+      },
+      "aria-labelledby": helpModalTitleId
+    }, (0, _react2.jsx)(_modal.EuiModalHeader, null, (0, _react2.jsx)(_title.EuiTitle, null, (0, _react2.jsx)("h1", {
+      id: helpModalTitleId
+    }, syntaxTitle))), (0, _react2.jsx)(_modal.EuiModalBody, null, (0, _react2.jsx)(_text.EuiText, null, (0, _react2.jsx)(_i18n.EuiI18n, {
       tokens: ['euiMarkdownEditorFooter.syntaxModalDescriptionPrefix', 'euiMarkdownEditorFooter.syntaxModalDescriptionSuffix'],
       defaults: ['This editor uses', 'You can also utilize these additional syntax plugins to add rich content to your text.']
     }, function (_ref3) {
@@ -223,7 +227,8 @@ var EuiMarkdownEditorFooter = exports.EuiMarkdownEditorFooter = /*#__PURE__*/(0,
         return setIsShowingHelpPopover(false);
       },
       panelPaddingSize: "s",
-      anchorPosition: "upCenter"
+      anchorPosition: "upCenter",
+      "aria-labelledby": helpModalTitleId
     }, (0, _react2.jsx)(_i18n.EuiI18n, {
       tokens: ['euiMarkdownEditorFooter.syntaxPopoverDescription'],
       defaults: ['This editor uses']

package/optimize/lib/components/search_bar/filters/field_value_selection_filter.js

@@ -292,6 +292,7 @@ var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*
         return (0, _react2.jsx)(_filter_group.EuiFilterButton, {
           iconType: "arrowDown",
           iconSide: "right",
+          isSelected: active,
           hasActiveFilters: active,
           numActiveFilters: active ? activeItemsCount : undefined,
           grow: true,

package/optimize/lib/components/search_bar/filters/field_value_toggle_filter.js

@@ -79,8 +79,10 @@ var FieldValueToggleFilter = exports.FieldValueToggleFilter = /*#__PURE__*/funct
       };
       return (0, _react2.jsx)(_filter_group.EuiFilterButton, {
         onClick: onClick,
+        isSelected: hasActiveFilters,
         hasActiveFilters: hasActiveFilters,
-        "aria-pressed": !!hasActiveFilters
+        "aria-pressed": !!hasActiveFilters,
+        isToggle: true
       }, name);
     }
   }]);

package/optimize/lib/components/search_bar/filters/field_value_toggle_group_filter.js

@@ -80,9 +80,11 @@ var FieldValueToggleGroupFilter = exports.FieldValueToggleGroupFilter = /*#__PUR
         return (0, _react2.jsx)(_filter_group.EuiFilterButton, {
           key: key,
           onClick: onClick,
+          isSelected: active,
           hasActiveFilters: active,
           "aria-pressed": !!active,
-          withNext: !isLastItem
+          withNext: !isLastItem,
+          isToggle: true
         }, name);
       });
     }

package/optimize/lib/components/search_bar/filters/is_filter.js

@@ -75,8 +75,10 @@ var IsFilter = exports.IsFilter = /*#__PURE__*/function (_Component) {
       };
       return (0, _react2.jsx)(_filter_group.EuiFilterButton, {
         onClick: onClick,
+        isSelected: hasActiveFilters,
         hasActiveFilters: hasActiveFilters,
-        "aria-pressed": !!hasActiveFilters
+        "aria-pressed": !!hasActiveFilters,
+        isToggle: true
       }, name);
     }
   }]);

package/optimize/lib/components/search_bar/search_bar.a11y.js

@@ -194,7 +194,7 @@ describe('EuiSearchBar', function () {
       cy.checkAxe();
     });
     it('has zero violations after filtering on Open items', function () {
-      cy.get('button.euiButtonEmpty').first().focus();
+      cy.get('button.euiFilterButton').first().focus();
       cy.realPress('Enter');
       cy.get('table.euiTable tbody').find('tr').should('have.length', 3);
       cy.checkAxe();
@@ -205,12 +205,12 @@ describe('EuiSearchBar', function () {
       cy.checkAxe();
     });
     it('has zero violations after filtering by Tags', function () {
-      cy.get('button.euiButtonEmpty').last().focus();
+      cy.get('button.euiFilterButton').last().focus();
       cy.realPress('Enter');
       cy.realPress('ArrowDown');
       cy.realPress('Enter');
       cy.realPress('Escape');
-      cy.get('button.euiButtonEmpty').last().should('have.focus');
+      cy.get('button.euiFilterButton').last().should('have.focus');
       cy.get('table.euiTable tbody').find('tr').should('have.length', 3);
       cy.checkAxe();
       cy.repeatRealPress(['Shift', 'Tab'], 3);