@elastic/eui 102.2.0 → 102.3.0

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

@@ -1,8 +1,8 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 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) { _defineProperty(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; }
 /*
@@ -15,12 +15,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiMemoizedStyles } from '../../services';
+import { EuiThemeProvider, useEuiMemoizedStyles, useEuiTheme, useGeneratedHtmlId, useEuiThemeRefreshVariant } from '../../services';
 import { useEuiI18n } from '../i18n';
 import { useInnerText } from '../inner_text';
 import { EuiNotificationBadge } from '../badge';
 import { EuiButtonEmpty } from '../button/button_empty';
-import { euiFilterButtonStyles, euiFilterButtonChildStyles } from './filter_button.styles';
+import { euiFilterButtonStyles, euiFilterButtonWrapperStyles, euiFilterButtonChildStyles } from './filter_button.styles';
+import { EuiButtonGroupButton } from '../button/button_group/button_group_button';
+import { _compressedButtonFocusColors } from '../button/button_group/button_group_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFilterButton = function EuiFilterButton(_ref) {
   var children = _ref.children,
@@ -35,6 +37,7 @@ export var 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,
@@ -45,18 +48,37 @@ export var EuiFilterButton = function EuiFilterButton(_ref) {
     textProps = _ref.textProps,
     contentProps = _ref.contentProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var id = useGeneratedHtmlId({
+    prefix: 'filter-button'
+  });
   var numFiltersDefined = numFilters != null; // != instead of !== to allow for null and undefined
   var numActiveFiltersDefined = numActiveFilters != null && numActiveFilters > 0;
+  var euiThemeContext = useEuiTheme();
+  var colorMode = euiThemeContext.colorMode;
+  var isRefreshVariant = 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 = useEuiMemoizedStyles(euiFilterButtonStyles);
-  var cssStyles = [styles.euiFilterButton, withNext && styles.withNext, !grow && styles.noGrow, hasActiveFilters && styles.hasActiveFilters, numFiltersDefined && styles.hasNotification];
+  var focusColorStyles = useEuiMemoizedStyles(_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 = useEuiMemoizedStyles(euiFilterButtonWrapperStyles);
+  var wrapperCssStyles = [wrapperStyles.wrapper, isRefreshVariant && withNext && styles.withNext, numFiltersDefined && styles.hasNotification, isToggle && wrapperStyles.hasToggle, !grow && styles.noGrow];
   var _useEuiMemoizedStyles = useEuiMemoizedStyles(euiFilterButtonChildStyles),
     contentStyles = _useEuiMemoizedStyles.content,
     textStyles = _useEuiMemoizedStyles.text,
     notificationStyles = _useEuiMemoizedStyles.notification;
+  var wrapperClasses = classNames('euiFilterButton__wrapper');
   var classes = classNames('euiFilterButton', {
     'euiFilterButton-isSelected': isSelected,
     'euiFilterButton-hasActiveFilters': hasActiveFilters,
-    'euiFilterButton-hasNotification': numFiltersDefined
+    'euiFilterButton-hasNotification': numFiltersDefined,
+    'euiFilterButton-isToggle': isRefreshVariant && isToggle
   }, className);
 
   /**
@@ -71,6 +93,16 @@ export var EuiFilterButton = function EuiFilterButton(_ref) {
     count: badgeCount
   });
   var badgeStyles = [notificationStyles.euiFilterButton__notification, isDisabled && notificationStyles.disabled];
+  var badgeContent = ___EmotionJSX(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 ? ___EmotionJSX(EuiThemeProvider, {
+    colorMode: isToggle && isSelected ? 'INVERSE' : colorMode
+  }, badgeContent) : badgeContent);
 
   /**
    * Text
@@ -84,7 +116,17 @@ export var EuiFilterButton = function EuiFilterButton(_ref) {
     ref = _useInnerText2[0],
     innerText = _useInnerText2[1];
   var dataText = children && typeof children === 'string' ? children : innerText;
-  return ___EmotionJSX(EuiButtonEmpty, _extends({
+  var textContent = ___EmotionJSX("span", _extends({
+    ref: ref,
+    "data-text": dataText,
+    title: dataText
+  }, textProps, {
+    className: buttonTextClassNames,
+    css: textCssStyles
+  }), children);
+
+  /** Button element */
+  var button = ___EmotionJSX(EuiButtonEmpty, _extends({
     className: classes,
     css: cssStyles,
     color: color,
@@ -93,21 +135,36 @@ export var 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 ___EmotionJSX("div", {
+    className: wrapperClasses,
+    css: wrapperCssStyles
+  }, isToggle && !isCollapsible ? ___EmotionJSX(EuiButtonGroupButton, _extends({
+    id: id,
+    label: ___EmotionJSX(React.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), ___EmotionJSX("span", _extends({
-    ref: ref,
-    "data-text": dataText,
-    title: dataText
-  }, textProps, {
-    className: buttonTextClassNames,
-    css: textCssStyles
-  }), children), showBadge && ___EmotionJSX(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/es/components/filter_group/filter_button.styles.js

@@ -8,14 +8,17 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, mathWithUnits, euiTextShift, euiTextTruncate } from '../../global_styling';
+import { isEuiThemeRefreshVariant } from '../../services';
+import { logicalCSS, mathWithUnits, euiTextShift, euiTextTruncate, highContrastModeStyles, preventForcedColors, euiButtonEmptyColor } from '../../global_styling';
+import { cssSupportsHasWithNextSibling } from '../../global_styling/functions/supports';
 import { euiFormVariables } from '../form/form.styles';
-export var euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+export var euiFilterButtonDisplay = function euiFilterButtonDisplay(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   return {
     flex: '1 1 auto',
     minInlineSize: mathWithUnits(euiTheme.size.base, function (x) {
-      return x * 3;
+      return x * (isRefreshVariant ? 2.75 : 3);
     })
   };
 };
@@ -29,9 +32,11 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 };
 export var euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   var _euiFormVariables = 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
@@ -39,14 +44,44 @@ export var euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContex
   var leftBorder = "\n    &::before {\n      content: '';\n      position: absolute;\n      ".concat(logicalCSS('right', '100%'), "\n      ").concat(logicalCSS('vertical', 0), "\n      ").concat(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(logicalCSS('top', '100%'), "\n      ").concat(logicalCSS('horizontal', 0), "\n      ").concat(logicalCSS('border-bottom', border), "\n    }\n  ");
+  var buttonStyles = isRefreshVariant ? "\n      ".concat(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(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(highContrastModeStyles(euiThemeContext, {
+    forced: "\n          &:is(".concat(selectedSelector, ") {\n            ").concat(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(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(cssSupportsHasWithNextSibling("\n          &:has(+ :not(&)) {\n            ".concat(logicalCSS('padding-right', '0'), "\n          }\n        ")), "\n    ") : "\n      .euiFilterButton {\n        &::before {\n          border: none;\n        }\n      }\n    ";
   return {
-    euiFilterButton: /*#__PURE__*/css("position:relative;", euiFilterButtonDisplay(euiThemeContext), " ", 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__*/css("&+.euiFilterButton{", logicalCSS('margin-left', "-".concat(euiTheme.size.xs)), "&::before{display:none;}};label:withNext;"),
+    euiFilterButton: /*#__PURE__*/css(!isRefreshVariant && euiFilterButtonDisplay(euiThemeContext), ";position:relative;", buttonStyles, ";;label:euiFilterButton;"),
+    buttonType: {
+      default: /*#__PURE__*/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__*/css("&:focus-visible{outline-offset:", mathWithUnits(euiTheme.focus.width, function (x) {
+        return isRefreshVariant ? x / 2 : x * -1;
+      }), ";}", toggleTypeStyles, ";;label:toggle;")
+    },
+    withNext: /*#__PURE__*/css(withNextSelector, "{", logicalCSS('margin-left', "-".concat(euiTheme.size.xs)), withNextStyles, ";};label:withNext;"),
     noGrow: _ref3,
     hasNotification: /*#__PURE__*/css(logicalCSS('min-width', mathWithUnits(euiTheme.size.base, function (x) {
       return x * 6;
     })), ";;label:hasNotification;"),
-    hasActiveFilters: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+    hasActiveFilters: /*#__PURE__*/css("font-weight:", isRefreshVariant ? euiTheme.font.weight.regular : euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+  };
+};
+export var euiFilterButtonWrapperStyles = function euiFilterButtonWrapperStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
+  var _euiFormVariables2 = 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(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(logicalCSS('border-bottom', border), "\n      pointer-events: none;\n    }\n  ");
+  return {
+    wrapper: /*#__PURE__*/css(euiFilterButtonDisplay(euiThemeContext), " position:relative;display:flex;align-items:center;", isRefreshVariant && "\n        ".concat(leftBorder, "\n        ").concat(bottomBorder, "\n      "), " ", logicalCSS('padding-vertical', euiTheme.border.width.thin), ";;label:wrapper;"),
+    hasToggle: /*#__PURE__*/css(logicalCSS('padding-horizontal', isRefreshVariant ? euiTheme.border.width.thin : '0'), cssSupportsHasWithNextSibling("\n          &:not([class*=\"withNext\"]):has(+ :not(&)) {\n            ".concat(logicalCSS('padding-right', '0'), "\n          }\n        ")), ";;label:hasToggle;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -58,24 +93,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__
 };
-export var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(_ref5) {
-  var euiTheme = _ref5.euiTheme;
+export var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   return {
     content: {
-      euiFilterButton__content: /*#__PURE__*/css(";label:euiFilterButton__content;"),
+      euiFilterButton__content: /*#__PURE__*/css(isRefreshVariant && "\n          .euiThemeProvider {\n            display: inline-flex;\n          }\n        ", ";;label:euiFilterButton__content;"),
       hasIcon: /*#__PURE__*/css("&>.euiIcon:last-child{", logicalCSS('margin-left', 'auto'), ";};label:hasIcon;")
     },
     text: {
       euiFilterButton__text: /*#__PURE__*/css(euiTextShift('bold', 'data-text', euiTheme), " ", euiTextTruncate(), ";;label:euiFilterButton__text;"),
       hasNotification: /*#__PURE__*/css(logicalCSS('min-width', mathWithUnits(euiTheme.size.base, function (x) {
-        return x * 3;
+        return x * (isRefreshVariant ? 2 : 3);
       })), ";;label:hasNotification;")
     },
     notification: {

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

@@ -8,6 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
+import { isEuiThemeRefreshVariant } from '../../services';
 import { logicalCSS, mathWithUnits, euiBreakpoint } from '../../global_styling';
 import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../form/form.styles';
@@ -22,20 +23,31 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'buttonVariant');
   var _euiFormVariables = 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(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__*/css("display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", highContrastModeStyles(euiThemeContext, {
-      none: "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(borderColor, ";"),
-      forced: "border: ".concat(euiTheme.border.thin, ";")
-    }), ">*:not(.euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover>.euiFilterButton{", logicalCSS('width', '100%'), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", euiBreakpoint(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/css(isRefreshVariant && "position: relative;", " display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", borderStyle, ">*:not(.euiFilterButton__wrapper, .euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover>.euiFilterButton{", logicalCSS('width', '100%'), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", 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__*/css("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
-    compressed: /*#__PURE__*/css("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", logicalCSS('height', controlCompressedHeight), ";};label:compressed;"),
+    uncompressed: /*#__PURE__*/css("border-radius:", borderRadius, ";.euiFilterButton__wrapper{", logicalCSS('height', controlHeight), ";}.euiFilterButton{", logicalCSS('height', controlHeight), ";}", !isRefreshVariant && buttonChildrenBorderRadii(borderRadius), " ", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat(logicalCSS('height', mathWithUnits([controlHeight, euiTheme.size.xxs], function (x, y) {
+      return x - 3 * y;
+    })), "\n        }\n      "), ";;label:uncompressed;"),
+    compressed: /*#__PURE__*/css("border-radius:", borderRadiusCompressed, ";", !isRefreshVariant && buttonChildrenBorderRadii(borderRadiusCompressed), " .euiFilterButton{", logicalCSS('height', isRefreshVariant ? mathWithUnits([controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
+      return x - 2 * y;
+    }) : controlCompressedHeight), ";}", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat(logicalCSS('height', 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/es/components/markdown_editor/markdown_editor_footer.js

@@ -8,7 +8,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 
 import React, { useState, useMemo, Fragment, forwardRef, useContext } from 'react';
-import { useEuiMemoizedStyles } from '../../services';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiButton, EuiButtonEmpty, EuiButtonIcon } from '../button';
 import { EuiTitle } from '../title';
@@ -73,6 +73,7 @@ export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, re
   var syntaxTitle = useEuiI18n('euiMarkdownEditorFooter.syntaxTitle', 'Syntax help');
   var _useContext = useContext(EuiMarkdownContext),
     readOnly = _useContext.readOnly;
+  var helpModalTitleId = useGeneratedHtmlId();
   if (isUploadingFiles) {
     uploadButton = ___EmotionJSX(EuiButtonIcon, {
       size: "s",
@@ -163,8 +164,11 @@ export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, re
     })), isShowingHelpModal && ___EmotionJSX(EuiModal, {
       onClose: function onClose() {
         return setIsShowingHelpModal(false);
-      }
-    }, ___EmotionJSX(EuiModalHeader, null, ___EmotionJSX(EuiTitle, null, ___EmotionJSX("h1", null, syntaxTitle))), ___EmotionJSX(EuiModalBody, null, ___EmotionJSX(EuiText, null, ___EmotionJSX(EuiI18n, {
+      },
+      "aria-labelledby": helpModalTitleId
+    }, ___EmotionJSX(EuiModalHeader, null, ___EmotionJSX(EuiTitle, null, ___EmotionJSX("h1", {
+      id: helpModalTitleId
+    }, syntaxTitle))), ___EmotionJSX(EuiModalBody, null, ___EmotionJSX(EuiText, null, ___EmotionJSX(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) {
@@ -212,7 +216,8 @@ export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, re
         return setIsShowingHelpPopover(false);
       },
       panelPaddingSize: "s",
-      anchorPosition: "upCenter"
+      anchorPosition: "upCenter",
+      "aria-labelledby": helpModalTitleId
     }, ___EmotionJSX(EuiI18n, {
       tokens: ['euiMarkdownEditorFooter.syntaxPopoverDescription'],
       defaults: ['This editor uses']

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

@@ -284,6 +284,7 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
         return ___EmotionJSX(EuiFilterButton, {
           iconType: "arrowDown",
           iconSide: "right",
+          isSelected: active,
           hasActiveFilters: active,
           numActiveFilters: active ? activeItemsCount : undefined,
           grow: true,

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

@@ -71,8 +71,10 @@ export var FieldValueToggleFilter = /*#__PURE__*/function (_Component) {
       };
       return ___EmotionJSX(EuiFilterButton, {
         onClick: onClick,
+        isSelected: hasActiveFilters,
         hasActiveFilters: hasActiveFilters,
-        "aria-pressed": !!hasActiveFilters
+        "aria-pressed": !!hasActiveFilters,
+        isToggle: true
       }, name);
     }
   }]);

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

@@ -72,9 +72,11 @@ export var FieldValueToggleGroupFilter = /*#__PURE__*/function (_Component) {
         return ___EmotionJSX(EuiFilterButton, {
           key: key,
           onClick: onClick,
+          isSelected: active,
           hasActiveFilters: active,
           "aria-pressed": !!active,
-          withNext: !isLastItem
+          withNext: !isLastItem,
+          isToggle: true
         }, name);
       });
     }

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

@@ -67,8 +67,10 @@ export var IsFilter = /*#__PURE__*/function (_Component) {
       };
       return ___EmotionJSX(EuiFilterButton, {
         onClick: onClick,
+        isSelected: hasActiveFilters,
         hasActiveFilters: hasActiveFilters,
-        "aria-pressed": !!hasActiveFilters
+        "aria-pressed": !!hasActiveFilters,
+        isToggle: true
       }, name);
     }
   }]);

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

@@ -184,7 +184,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();
@@ -195,12 +195,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);