Merge branch 'main' into table/remove-setselection-class-method

changelogs/CHANGELOG_2024.md

@@ -1,3 +1,24 @@
+## [`v92.2.1`](https://github.com/elastic/eui/releases/v92.2.1)
+
+**Bug fixes**
+
+- Removed unintentional i18n tokens in prior release that should not have been exported
+
+## [`v92.2.0`](https://github.com/elastic/eui/releases/v92.2.0)
+
+- Updated `EuiFlyoutResizable` with new optional `onResize` callback ([#7464](https://github.com/elastic/eui/pull/7464))
+
+**Bug fixes**
+
+- Fixed an issue in `EuiResizableContainer` where `onResizeEnd` could become a stale closure when renders occured between resize start and end, resulting in an outdated version of a consumer's `onResizeEnd` callback being called ([#7468](https://github.com/elastic/eui/pull/7468))
+- Fixed `EuiTextArea` to correctly fire `onChange` callbacks on clear button click ([#7473](https://github.com/elastic/eui/pull/7473))
+- Fixed `EuiContextMenu`'s panel titles & items to not show underlines on hover for non-interactive elements ([#7474](https://github.com/elastic/eui/pull/7474))
+
+**Deprecations**
+
+- Remove unused public `EuiHue` and `EuiSaturation` subcomponent exports. Use the parent `EuiColorPicker` component instead ([#7460](https://github.com/elastic/eui/pull/7460))
+- Remove unused public `EuiCommentTimeline` subcomponent export. Use the parent `EuiComment` or `EuiCommentList` components instead. ([#7467](https://github.com/elastic/eui/pull/7467))
+
 ## [`v92.1.1`](https://github.com/elastic/eui/releases/v92.1.1)
 
 **Bug fixes**

changelogs/upcoming/7486.md

@@ -0,0 +1,3 @@
+**Performance**
+
+- Improved the amount of recomputed styles being generated by `EuiCode` and `EuiCodeBlock`

changelogs/upcoming/7488.md

@@ -0,0 +1,4 @@
+**Breaking changes**
+
+- Removed deprecated `anchorClassName` prop from `EuiPopover`. Use `className` instead
+- Removed deprecated `buttonRef` prop from `EuiPopover`. Use `popoverRef` instead

changelogs/upcoming/7489.md

@@ -0,0 +1,3 @@
+**Breaking changes**
+
+- Removed deprecated `toolTipTitle` and `toolTipPosition` props from `EuiContextMenuItem`. Use `toolTipProps.title` and `toolTilProps.position` instead

changelogs/upcoming/7494.md

@@ -0,0 +1,4 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiEmptyPrompt` to Emotion
+- Added `euiBorderColor` and `useEuiBorderColorCSS` style utilities

changelogs/upcoming/7495.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiTextTruncate` component to clean up timer from side effect on unmount

changelogs/upcoming/7497.md

@@ -0,0 +1,4 @@
+**Breaking changes**
+
+- `EuiTourStep`'s `className` and `style` props now apply to the anchoring element instead of to the popover panel, to match `EuiPopover` behavior.
+  - Convert your existing usages to `panelClassName` and `panelStyle` respectively instead.

i18ntokens.json

@@ -221,14 +221,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 181,
+        "line": 183,
         "column": 8,
-        "index": 5292
+        "index": 5301
       },
       "end": {
-        "line": 184,
+        "line": 186,
         "column": 9,
-        "index": 5401
+        "index": 5410
       }
     },
     "filepath": "src/components/bottom_bar/bottom_bar.tsx"
@@ -239,14 +239,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 211,
+        "line": 213,
         "column": 14,
-        "index": 6342
+        "index": 6351
       },
       "end": {
-        "line": 215,
+        "line": 217,
         "column": 16,
-        "index": 6615
+        "index": 6624
       }
     },
     "filepath": "src/components/bottom_bar/bottom_bar.tsx"
@@ -257,14 +257,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 217,
+        "line": 219,
         "column": 14,
-        "index": 6648
+        "index": 6657
       },
       "end": {
-        "line": 220,
+        "line": 222,
         "column": 16,
-        "index": 6845
+        "index": 6854
       }
     },
     "filepath": "src/components/bottom_bar/bottom_bar.tsx"

package.json

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

scripts/babel/fetch-i18n-strings.js

@@ -165,6 +165,8 @@ const files = glob.sync(
   if (filepath.endsWith('test.ts')) return false;
   if (filepath.endsWith('test.tsx')) return false;
   if (filepath.endsWith('test.js')) return false;
+  if (filepath.endsWith('.stories.tsx')) return false;
+  if (filepath.endsWith('.stories.ts')) return false;
 
   return true;
 });

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

@@ -1,5 +1,6 @@
 {
   "euiVersions": [
+    "92.2.0",
     "92.1.1",
     "92.1.0",
     "92.0.0",

src-docs/src/views/context_menu/context_menu.js

@@ -59,9 +59,11 @@ export default () => {
         {
           name: 'Add a tooltip',
           icon: 'document',
-          toolTipTitle: 'Optional tooltip',
           toolTipContent: 'Optional content for a tooltip',
-          toolTipPosition: 'right',
+          toolTipProps: {
+            title: 'Optional tooltip title',
+            position: 'right',
+          },
           onClick: closePopover,
         },
         {
@@ -78,7 +80,7 @@ export default () => {
           name: 'Disabled option',
           icon: 'user',
           toolTipContent: 'For reasons, this item is disabled',
-          toolTipPosition: 'right',
+          toolTipProps: { position: 'right' },
           disabled: true,
           onClick: closePopover,
         },

src/components/beacon/__snapshots__/beacon.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`EuiBeacon is rendered 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-success-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 12px; width: 12px;"
+  style="block-size: 12px; inline-size: 12px;"
 />
 `;
 
@@ -14,7 +14,7 @@ exports[`EuiBeacon props color accent is rendered 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-accent-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 12px; width: 12px;"
+  style="block-size: 12px; inline-size: 12px;"
 />
 `;
 
@@ -23,7 +23,7 @@ exports[`EuiBeacon props color danger is rendered 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-danger-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 12px; width: 12px;"
+  style="block-size: 12px; inline-size: 12px;"
 />
 `;
 
@@ -32,7 +32,7 @@ exports[`EuiBeacon props color primary is rendered 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-primary-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 12px; width: 12px;"
+  style="block-size: 12px; inline-size: 12px;"
 />
 `;
 
@@ -41,7 +41,7 @@ exports[`EuiBeacon props color subdued is rendered 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-subdued-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 12px; width: 12px;"
+  style="block-size: 12px; inline-size: 12px;"
 />
 `;
 
@@ -50,7 +50,7 @@ exports[`EuiBeacon props color success is rendered 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-success-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 12px; width: 12px;"
+  style="block-size: 12px; inline-size: 12px;"
 />
 `;
 
@@ -59,7 +59,7 @@ exports[`EuiBeacon props color warning is rendered 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-warning-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 12px; width: 12px;"
+  style="block-size: 12px; inline-size: 12px;"
 />
 `;
 
@@ -68,6 +68,6 @@ exports[`EuiBeacon props size accepts size 1`] = `
   aria-label="aria-label"
   class="euiBeacon testClass1 testClass2 emotion-euiBeacon-success-euiTestCss"
   data-test-subj="test subject string"
-  style="height: 14px; width: 14px;"
+  style="block-size: 14px; inline-size: 14px;"
 />
 `;

src/components/beacon/beacon.tsx

@@ -6,13 +6,15 @@
  * Side Public License, v 1.
  */
 
-import React, { FunctionComponent, HTMLAttributes } from 'react';
+import React, { FunctionComponent, HTMLAttributes, useMemo } from 'react';
 import { CommonProps } from '../common';
 import classNames from 'classnames';
 
-import { euiBeaconStyles } from './beacon.styles';
+import { logicalStyles } from '../../global_styling';
 import { useEuiTheme } from '../../services';
 
+import { euiBeaconStyles } from './beacon.styles';
+
 export const COLORS = [
   'subdued',
   'primary',
@@ -51,11 +53,15 @@ export const EuiBeacon: FunctionComponent<EuiBeaconProps> = ({
   const styles = euiBeaconStyles(euiTheme);
   const cssStyles = [styles.euiBeacon, styles[color]];
 
-  const beaconStyle = {
-    ...style,
-    height: size,
-    width: size,
-  };
+  const beaconStyle = useMemo(
+    () =>
+      logicalStyles({
+        ...style,
+        height: size,
+        width: size,
+      }),
+    [style, size]
+  );
 
   return (
     <div className={classes} css={cssStyles} style={beaconStyle} {...rest} />

src/components/code/code.styles.ts

@@ -9,11 +9,13 @@
 import { css } from '@emotion/react';
 import { logicalShorthandCSS } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { euiCodeSyntaxColors, euiCodeSyntaxTokens } from './code_syntax.styles';
+import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';
 
-export const euiCodeStyles = (euiThemeContext: UseEuiTheme) => {
+export const euiCodeStyles = (
+  euiThemeContext: UseEuiTheme,
+  euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
+) => {
   const { euiTheme } = euiThemeContext;
-  const euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
 
   return {
     /*
@@ -23,12 +25,12 @@ export const euiCodeStyles = (euiThemeContext: UseEuiTheme) => {
       font-family: ${euiTheme.font.familyCode};
       font-size: 0.9em; /* 1 */
       ${logicalShorthandCSS('padding', '0.2em 0.5em')} /* 1 */
-      background: ${euiCodeSyntax.backgroundColor};
+      background: ${euiCodeSyntaxVariables.backgroundColor};
       border-radius: ${euiTheme.border.radius.small};
       font-weight: ${euiTheme.font.weight.bold};
-      color: ${euiCodeSyntax.inlineCodeColor};
+      color: ${euiCodeSyntaxVariables.inlineCodeColor};
 
-      ${euiCodeSyntaxTokens(euiThemeContext)}
+      ${euiCodeSyntaxVariables.tokensCss}
     `,
     transparentBackground: css`
       background: transparent;

src/components/code/code.tsx

@@ -16,6 +16,7 @@ import {
   getHtmlContent,
 } from './utils';
 import { useEuiTheme } from '../../services';
+import { useEuiCodeSyntaxVariables } from './code_syntax.styles';
 import { euiCodeStyles } from './code.styles';
 
 export type EuiCodeProps = EuiCodeSharedProps;
@@ -46,8 +47,7 @@ export const EuiCode: FunctionComponent<EuiCodeProps> = ({
 
   const classes = classNames('euiCode', className);
 
-  const euiTheme = useEuiTheme();
-  const styles = euiCodeStyles(euiTheme);
+  const styles = euiCodeStyles(useEuiTheme(), useEuiCodeSyntaxVariables());
   const cssStyles = [
     styles.euiCode,
     transparentBackground && styles.transparentBackground,

src/components/code/code_block.styles.ts

@@ -21,20 +21,23 @@ import {
   mathWithUnits,
 } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { euiCodeSyntaxColors, euiCodeSyntaxTokens } from './code_syntax.styles';
 
-export const euiCodeBlockStyles = (euiThemeContext: UseEuiTheme) => {
+import { UseEuiCodeSyntaxVariables } from './code_syntax.styles';
+
+export const euiCodeBlockStyles = (
+  euiThemeContext: UseEuiTheme,
+  euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
+) => {
   const { euiTheme } = euiThemeContext;
-  const euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
 
   return {
     euiCodeBlock: css`
       max-inline-size: 100%;
       display: block;
       position: relative;
-      background: ${euiCodeSyntax.backgroundColor};
+      background: ${euiCodeSyntaxVariables.backgroundColor};
 
-      ${euiCodeSyntaxTokens(euiThemeContext)}
+      ${euiCodeSyntaxVariables.tokensCss}
     `,
     // Font size
     s: css`
@@ -131,15 +134,17 @@ export const euiCodeBlockPreStyles = (euiThemeContext: UseEuiTheme) => {
   };
 };
 
-export const euiCodeBlockCodeStyles = (euiThemeContext: UseEuiTheme) => {
+export const euiCodeBlockCodeStyles = (
+  euiThemeContext: UseEuiTheme,
+  euiCodeSyntaxVariables: UseEuiCodeSyntaxVariables
+) => {
   const { euiTheme } = euiThemeContext;
-  const euiCodeSyntax = euiCodeSyntaxColors(euiThemeContext);
 
   return {
     euiCodeBlock__code: css`
       font-family: ${euiTheme.font.familyCode};
       font-size: inherit;
-      color: ${euiCodeSyntax.color};
+      color: ${euiCodeSyntaxVariables.color};
       display: block;
     `,
     isVirtualized: css`