Merge branch 'main' into eui/parse-query-update

packages/eui/changelogs/CHANGELOG_2024.md

@@ -1,3 +1,56 @@
+## [`v95.8.0`](https://github.com/elastic/eui/releases/v95.8.0)
+
+- Updated `EuiHeaderLinks`'s mobile menu to set a slight popover padding by default ([#7961](https://github.com/elastic/eui/pull/7961))
+  - This can be overridden via `popoverProps.panelPaddingSize` if needed.
+- Updated `EuiHeaderLink` to default to a size of `s` (down from `m`) ([#7961](https://github.com/elastic/eui/pull/7961))
+
+**Bug fixes**
+
+- Fixed a visual bug with `<EuiDualRange showInput="inputWithPopover" />` form controls ([#7957](https://github.com/elastic/eui/pull/7957))
+
+**Deprecations**
+
+- Deprecated `EuiFormRow`'s `columnCompressedSwitch` display prop. Use `columnCompressed` instead, which will automatically account for child `EuiSwitch`es ([#7968](https://github.com/elastic/eui/pull/7968))
+- Deprecated `EuiFormRow`'s `rowCompressed` display prop. Use `row` instead for vertical forms, or `centerCompressed` for inline forms ([#7968](https://github.com/elastic/eui/pull/7968))
+- (Styling) Updated `EuiFormRow`'s `hasEmptySpaceLabel` prop to no longer attempt to automatically align its content to a vertical center. Use the `display="center"` prop for that instead ([#7968](https://github.com/elastic/eui/pull/7968))
+
+**CSS-in-JS conversions**
+
+- Converted `EuiFormControlLayout` to Emotion ([#7954](https://github.com/elastic/eui/pull/7954))
+  - Removed `.euiFormControlLayout--*icons` classNames and `--eui-form-control-layout-icons-padding` CSS var. Use `--euiFormControlRightIconsCount` or `--euiFormControlLeftIconsCount` instead
+- Converted `EuiFormLayoutDelimited` to Emotion ([#7957](https://github.com/elastic/eui/pull/7957))
+- Fixed `cloneElementWithCss` throwing an error when used multiple times without a `key` prop ([#7957](https://github.com/elastic/eui/pull/7957))
+- Updated `cloneElementWithCss` utility to support a third argument that allows prepending vs. appending the cloned Emotion css className ([#7957](https://github.com/elastic/eui/pull/7957))
+- Removed `@euiFormControlLayoutClearIcon` Sass mixin ([#7959](https://github.com/elastic/eui/pull/7959))
+- Converted `EuiDescribedFormGroup` to Emotion ([#7964](https://github.com/elastic/eui/pull/7964))
+- Converted `EuiForm`, `EuiFormHelpText`, and `EuiFormErrorText` to Emotion ([#7966](https://github.com/elastic/eui/pull/7966))
+- Converted `EuiFormLabel` and `EuiFormLegend` to Emotion; Removed `@euiFormLabel` mixin ([#7967](https://github.com/elastic/eui/pull/7967))
+- Converted `EuiFormRow` to Emotion ([#7968](https://github.com/elastic/eui/pull/7968))
+- Converted `EuiCheckbox` to Emotion ([#7969](https://github.com/elastic/eui/pull/7969))
+- Converted `EuiRadio` to Emotion ([#7969](https://github.com/elastic/eui/pull/7969))
+- Converted `EuiSwitch` to Emotion ([#7969](https://github.com/elastic/eui/pull/7969))
+- Removed the following Sass variables: ([#7969](https://github.com/elastic/eui/pull/7969))
+  - `$euiFormCustomControlDisabledIconColor`
+  - `$euiFormCustomControlBorderColor`
+  - `$euiRadioSize`
+  - `$euiCheckBoxSize`
+  - `$euiCheckboxBorderRadius`
+  - `$euiSwitchHeight` (and compressed/mini variants)
+  - `$euiSwitchWidth` (and compressed/mini variants)
+  - `$euiSwitchThumbSize` (and compressed/mini variants)
+  - `$euiSwitchIconHeight`
+  - `$euiSwitchOffColor`
+- Removed the following Sass mixins: ([#7969](https://github.com/elastic/eui/pull/7969))
+  - `euiIconBackground`
+  - `euiCustomControl`
+  - `euiCustomControlSelected`
+  - `euiCustomControlDisabled`
+  - `euiCustomControlFocused`
+
+**Accessibility**
+
+- Updated the `aria-label` attribute for the `EuiFieldSearch` clear button ([#7970](https://github.com/elastic/eui/pull/7970))
+
 ## [`v95.7.0`](https://github.com/elastic/eui/releases/v95.7.0)
 
 **CSS-in-JS conversions**

packages/eui/i18ntokens.json

@@ -1391,14 +1391,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 281,
+        "line": 280,
         "column": 18,
-        "index": 10032
+        "index": 9968
       },
       "end": {
-        "line": 284,
+        "line": 283,
         "column": 20,
-        "index": 10156
+        "index": 10092
       }
     },
     "filepath": "src/components/datagrid/controls/column_selector.tsx"
@@ -1409,14 +1409,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 294,
+        "line": 293,
         "column": 18,
-        "index": 10516
+        "index": 10452
       },
       "end": {
-        "line": 297,
+        "line": 296,
         "column": 20,
-        "index": 10638
+        "index": 10574
       }
     },
     "filepath": "src/components/datagrid/controls/column_selector.tsx"
@@ -4793,14 +4793,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 104,
+        "line": 105,
         "column": 49,
-        "index": 2946
+        "index": 2960
       },
       "end": {
-        "line": 110,
+        "line": 111,
         "column": 3,
-        "index": 3167
+        "index": 3181
       }
     },
     "filepath": "src/components/form/field_password/field_password.tsx"
@@ -4811,18 +4811,36 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 104,
+        "line": 105,
         "column": 49,
-        "index": 2946
+        "index": 2960
       },
       "end": {
-        "line": 110,
+        "line": 111,
         "column": 3,
-        "index": 3167
+        "index": 3181
       }
     },
     "filepath": "src/components/form/field_password/field_password.tsx"
   },
+  {
+    "token": "euiFieldSearch.clearSearchButtonLabel",
+    "defString": "Clear search input",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 260,
+        "column": 6,
+        "index": 7437
+      },
+      "end": {
+        "line": 263,
+        "column": 7,
+        "index": 7544
+      }
+    },
+    "filepath": "src/components/form/field_search/field_search.tsx"
+  },
   {
     "token": "euiFilePicker.promptText",
     "defString": "Select or drag and drop a file",
@@ -4901,14 +4919,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 38,
-        "column": 4,
-        "index": 1180
+        "line": 34,
+        "column": 20,
+        "index": 1321
       },
       "end": {
-        "line": 41,
-        "column": 5,
-        "index": 1274
+        "line": 37,
+        "column": 3,
+        "index": 1399
       }
     },
     "filepath": "src/components/form/form_control_layout/form_control_layout_clear_button.tsx"
@@ -4919,14 +4937,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 82,
+        "line": 121,
         "column": 27,
-        "index": 2237
+        "index": 3395
       },
       "end": {
-        "line": 85,
+        "line": 124,
         "column": 3,
-        "index": 2313
+        "index": 3471
       }
     },
     "filepath": "src/components/form/form_control_layout/form_control_layout_delimited.tsx"
@@ -4937,14 +4955,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 94,
+        "line": 97,
         "column": 8,
-        "index": 2536
+        "index": 2581
       },
       "end": {
-        "line": 97,
+        "line": 100,
         "column": 9,
-        "index": 2657
+        "index": 2702
       }
     },
     "filepath": "src/components/form/form.tsx"

packages/eui/i18ntokens_changelog.json

@@ -1,4 +1,14 @@
 [
+  {
+    "version": "95.8.0",
+    "changes": [
+      {
+        "token": "euiFieldSearch.clearSearchButtonLabel",
+        "changeType": "added",
+        "value": "Clear search input"
+      }
+    ]
+  },
   {
     "version": "95.5.0",
     "changes": [

packages/eui/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "95.7.0",
+  "version": "95.8.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx

@@ -1,15 +1,13 @@
-import React, { useState, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import {
   EuiBadge,
-  EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiHeader,
+  EuiHeaderLink,
+  EuiHeaderLinks,
   EuiHeaderLogo,
   EuiHeaderSectionItemButton,
   EuiIcon,
-  EuiPopover,
   EuiToolTip,
 } from '../../../../src/components';
 import { useIsWithinBreakpoints } from '../../../../src/services';
@@ -69,14 +67,9 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
   const github = useMemo(() => {
     const label = 'EUI GitHub repo';
     return isMobileSize ? (
-      <EuiButtonEmpty
-        size="s"
-        flush="both"
-        iconType="logoGithub"
-        href={GITHUB_URL}
-      >
+      <EuiHeaderLink color="primary" iconType="logoGithub" href={GITHUB_URL}>
         {label}
-      </EuiButtonEmpty>
+      </EuiHeaderLink>
     ) : (
       <EuiToolTip content="Github">
         <EuiHeaderSectionItemButton aria-label={label} href={GITHUB_URL}>
@@ -90,9 +83,9 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
     const label = 'Codesandbox';
     return isMobileSize ? (
       <CodeSandboxLink type="tsx">
-        <EuiButtonEmpty size="s" flush="both" iconType="logoCodesandbox">
+        <EuiHeaderLink color="primary" iconType="logoCodesandbox">
           {label}
-        </EuiButtonEmpty>
+        </EuiHeaderLink>
       </CodeSandboxLink>
     ) : (
       <EuiToolTip content="Codesandbox" key="codesandbox">
@@ -105,39 +98,18 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
     );
   }, [isMobileSize]);
 
-  const [mobilePopoverIsOpen, setMobilePopoverIsOpen] = useState(false);
-
   const mobileMenu = useMemo(() => {
-    const button = (
-      <EuiHeaderSectionItemButton
-        aria-label="Open EUI options menu"
-        onClick={() => setMobilePopoverIsOpen((isOpen) => !isOpen)}
-      >
-        <EuiIcon type="apps" aria-hidden="true" />
-      </EuiHeaderSectionItemButton>
-    );
-
     return (
-      <EuiPopover
-        button={button}
-        isOpen={mobilePopoverIsOpen}
-        closePopover={() => setMobilePopoverIsOpen(false)}
+      <EuiHeaderLinks
+        popoverButtonProps={{ 'aria-label': 'Open EUI options menu' }}
+        popoverBreakpoints="all"
       >
-        <EuiFlexGroup
-          direction="column"
-          alignItems="flexStart"
-          gutterSize="none"
-          responsive={false}
-        >
-          <EuiFlexItem>{github}</EuiFlexItem>
-          <EuiFlexItem>
-            <GuideFigmaLink />
-          </EuiFlexItem>
-          <EuiFlexItem>{codesandbox}</EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPopover>
+        {github}
+        <GuideFigmaLink />
+        {codesandbox}
+      </EuiHeaderLinks>
     );
-  }, [mobilePopoverIsOpen, codesandbox, github]);
+  }, [codesandbox, github]);
 
   const rightSideItems = isMobileSize
     ? [

packages/eui/src-docs/src/components/guide_page/versions.json

@@ -1,5 +1,6 @@
 {
   "euiVersions": [
+    "95.8.0",
     "95.7.0",
     "95.6.0",
     "95.5.0",

packages/eui/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx

@@ -1,15 +1,17 @@
 /* eslint-disable no-restricted-globals */
 import React from 'react';
 
-import { EuiButtonEmpty } from '../../../../src/components/button';
 import { useIsWithinBreakpoints } from '../../../../src/services';
-
-import { ThemeContext } from '../with_theme';
-import { EuiHeaderSectionItemButton } from '../../../../src/components/header';
+import {
+  EuiHeaderLink,
+  EuiHeaderSectionItemButton,
+} from '../../../../src/components/header';
 import { EuiToolTip } from '../../../../src/components/tool_tip';
 import { EuiIcon } from '../../../../src/components/icon';
 import logoFigma from '../../images/logo-figma.svg';
 
+import { ThemeContext } from '../with_theme';
+
 type GuideFigmaLinkProps = {
   context?: any;
 };
@@ -34,9 +36,9 @@ const GuideFigmaLinkComponent: React.FunctionComponent<
   const label = 'EUI Figma Design Library';
 
   return isMobileSize ? (
-    <EuiButtonEmpty size="s" flush="both" iconType={logoFigma} href={href}>
+    <EuiHeaderLink color="primary" iconType={logoFigma} href={href}>
       {label}
-    </EuiButtonEmpty>
+    </EuiHeaderLink>
   ) : (
     <EuiToolTip
       title={label}

packages/eui/src-docs/src/views/color_picker/color_palette_display.js

@@ -188,7 +188,7 @@ export default () => {
                   Display <EuiCode>fixed</EuiCode>
                 </span>
               }
-              display="columnCompressedSwitch"
+              display="columnCompressed"
             >
               <EuiSwitch
                 checked={selectionType}

packages/eui/src-docs/src/views/datagrid/toolbar/visibility.js

@@ -194,7 +194,7 @@ const DataGrid = () => {
                 : undefined
             }
           >
-            <EuiFormRow display="rowCompressed" label="toolbarVisibility">
+            <EuiFormRow label="toolbarVisibility">
               <EuiButtonGroup
                 isFullWidth
                 buttonSize="compressed"