[DO NOT MERGE][EUI] Form append/prepend updates

package.json

@@ -133,8 +133,9 @@
     "@elastic/ecs": "9.2.0",
     "@elastic/elasticsearch": "9.2.0",
     "@elastic/ems-client": "8.6.3",
-    "@elastic/eui": "112.3.0",
-    "@elastic/eui-theme-borealis": "5.4.0",
+    "@elastic/eui": "file:./eui_112.3.0_append_prepend_02.tgz",
+    "@elastic/eui-theme-borealis": "file:./eui_theme_borealis_5.4.0_append_prepend_01.tgz",
+    "@elastic/eui-theme-common": "file:./eui_theme_common_7.3.0_append_prepend_01.tgz",
     "@elastic/filesaver": "1.1.2",
     "@elastic/kibana-d3-color": "npm:@elastic/kibana-d3-color@2.0.1",
     "@elastic/monaco-esql": "3.1.18",

packages/kbn-dependency-ownership/src/rule.ts

@@ -50,6 +50,7 @@ export function packageFilter(pkg: string) {
     // The EUI team owns the EUI packages, and are not covered by renovate
     pkg !== '@elastic/eui' &&
     pkg !== '@elastic/eui-theme-borealis' &&
+    pkg !== '@elastic/eui-theme-common' &&
     // Operations owns node, and is not covered by renovate
     pkg !== '@types/node'
   );

src/core/packages/notifications/browser-internal/src/toasts/deduplicate_toasts.test.tsx

@@ -109,7 +109,7 @@ describe('TitleWithBadge component', () => {
 
     expect(renderedTitle.container.textContent).toMatch('Welcome! 5');
     expect(render(titleComponent).container.innerHTML).toMatchInlineSnapshot(
-      `"Welcome! <span class=\\"euiNotificationBadge css-1aoydhg-floatTopRight css-rme68u-euiNotificationBadge-m-subdued\\">5</span>"`
+      `"Welcome! <span class=\\"euiNotificationBadge css-1aoydhg-floatTopRight css-syjyv5-euiNotificationBadge-m-subdued\\">5</span>"`
     );
   });
 });

src/dev/license_checker/config.ts

@@ -94,6 +94,7 @@ export const LICENSE_OVERRIDES = {
   '@elastic/ems-client@8.6.3': ['Elastic License 2.0'],
   '@elastic/eui@112.3.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
   '@elastic/eui-theme-borealis@5.4.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui-theme-common@7.3.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/protobuf@2.5.2': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

src/platform/packages/private/kbn-controls-renderer/src/components/control_panel.tsx

@@ -144,26 +144,36 @@ export const ControlPanel = ({
             css={styles.formControl}
             prepend={
               <>
-                <DragHandle
-                  isEditable={isEditable}
-                  controlTitle={panelTitle || defaultPanelTitle}
-                  {...attributes}
-                  {...listeners}
-                />
-
                 {api?.CustomPrependComponent ? (
-                  <api.CustomPrependComponent />
+                  <>
+                    <DragHandle
+                      isEditable={isEditable}
+                      controlTitle={panelTitle || defaultPanelTitle}
+                      className="controlFrame__dragHandle"
+                      {...attributes}
+                      {...listeners}
+                    />
+                    <api.CustomPrependComponent />
+                  </>
                 ) : (
-                  <EuiToolTip
-                    content={panelTitle || defaultPanelTitle}
-                    anchorProps={{ className: 'eui-textTruncate', css: styles.tooltipStyles }}
+                  <DragHandle
+                    isEditable={isEditable}
+                    controlTitle={panelTitle || defaultPanelTitle}
+                    className="controlFrame__dragHandle"
+                    {...attributes}
+                    {...listeners}
                   >
-                    <EuiFormLabel className="controlPanel--label">
-                      <span css={styles.prependWrapperStyles} ref={prependWrapperRef}>
-                        {panelTitle || defaultPanelTitle}
-                      </span>
-                    </EuiFormLabel>
-                  </EuiToolTip>
+                    <EuiToolTip
+                      content={panelTitle || defaultPanelTitle}
+                      anchorProps={{ className: 'eui-textTruncate', css: styles.tooltipStyles }}
+                    >
+                      <EuiFormLabel className="controlPanel--label">
+                        <span css={styles.prependWrapperStyles} ref={prependWrapperRef}>
+                          {panelTitle || defaultPanelTitle}
+                        </span>
+                      </EuiFormLabel>
+                    </EuiToolTip>
+                  </DragHandle>
                 )}
               </>
             }

src/platform/packages/private/kbn-controls-renderer/src/components/drag_handle.tsx

@@ -8,35 +8,58 @@
  */
 
 import React from 'react';
-
-import { EuiIcon } from '@elastic/eui';
 import { css } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
+import { EuiIcon, type UseEuiTheme } from '@elastic/eui';
+import { useMemoCss } from '@kbn/css-utils/public/use_memo_css';
 
 interface DragHandleProps {
   isEditable: boolean;
   controlTitle?: string;
   [key: string]: any; // Allows passing additional props (like drag info)
 }
 
-const dragHandleStyles = css({
-  cursor: 'grab',
-  lineHeight: '0', // Vertically center the grab handle
-});
+const dragHandleStyles = {
+  dragHandle: ({ euiTheme }: UseEuiTheme) =>
+    css({
+      display: 'flex',
+      alignItems: 'center',
+      blockSize: '100%',
+      cursor: 'grab',
+      lineHeight: '0', // Vertically center the grab handle
+      '.euiIcon': {
+        color: euiTheme.colors.textDisabled,
+      },
+      '&:hover > .euiIcon:first-of-type': {
+        color: euiTheme.colors.textParagraph,
+      },
+      '.euiFormLabel': {
+        pointerEvents: 'none', // Prevent label from blocking drag events
+      },
+    }),
+};
+
+export const DragHandle = ({
+  isEditable,
+  controlTitle = '',
+  children,
+  ...rest
+}: DragHandleProps) => {
+  const styles = useMemoCss(dragHandleStyles);
 
-export const DragHandle = ({ isEditable, controlTitle = '', ...rest }: DragHandleProps) => {
-  if (!isEditable) return null;
+  if (!isEditable) return children;
 
   return (
-    <button
+    <div
       {...rest}
       aria-label={i18n.translate('controls.controlGroup.ariaActions.moveControlButtonAction', {
         defaultMessage: 'Move control {controlTitle}',
         values: { controlTitle },
       })}
-      css={dragHandleStyles}
+      css={styles.dragHandle}
     >
       <EuiIcon type="grabHorizontal" />
-    </button>
+      {children}
+    </div>
   );
 };

src/platform/packages/shared/kbn-coloring/src/shared_components/color_mapping/components/assignment/range.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { EuiButtonEmpty, EuiFieldNumber, EuiFlexItem } from '@elastic/eui';
+import { EuiFieldNumber, EuiFlexItem, EuiFormPrepend } from '@elastic/eui';
 import type { ColorMapping } from '../../config';
 
 export const Range: React.FC<{
@@ -24,12 +24,12 @@ export const Range: React.FC<{
         <EuiFieldNumber
           compressed
           prepend={
-            <EuiButtonEmpty
-              size="xs"
+            <EuiFormPrepend
+              element="button"
+              compressed
+              label={rule.minInclusive ? 'GTE' : 'GT'}
               onClick={() => updateValue(rule.min, rule.max, !rule.minInclusive, rule.maxInclusive)}
-            >
-              {rule.minInclusive ? 'GTE' : 'GT'}
-            </EuiButtonEmpty>
+            />
           }
           placeholder="min"
           value={rule.min}
@@ -45,12 +45,12 @@ export const Range: React.FC<{
           compressed
           isInvalid={!maxValid}
           prepend={
-            <EuiButtonEmpty
-              size="xs"
+            <EuiFormPrepend
+              element="button"
+              compressed
+              label={rule.maxInclusive ? 'LTE' : 'LT'}
               onClick={() => updateValue(rule.min, rule.max, rule.minInclusive, !rule.maxInclusive)}
-            >
-              {rule.maxInclusive ? 'LTE' : 'LT'}
-            </EuiButtonEmpty>
+            />
           }
           placeholder="max"
           value={rule.max}

src/platform/packages/shared/kbn-coloring/src/shared_components/coloring/color_ranges/color_ranges_item.tsx

@@ -13,7 +13,6 @@ import type { Dispatch, FocusEvent, ChangeEventHandler } from 'react';
 import React, { useState, useCallback, useContext, useMemo } from 'react';
 import { css } from '@emotion/react';
 
-import type { EuiFieldNumberProps } from '@elastic/eui';
 import {
   EuiFieldNumber,
   EuiColorPicker,
@@ -73,13 +72,11 @@ const getActionButton = (mode: ColorRangeItemMode) => {
 };
 
 const getAppend = (rangeType: CustomPaletteParams['rangeType'], mode: ColorRangeItemMode) => {
-  const items: EuiFieldNumberProps['append'] = [];
-
   if (rangeType === 'percent') {
-    items.push('%');
+    return '%';
   }
 
-  return items;
+  return undefined;
 };
 
 export function ColorRangeItem({