Bumping EUI to 71.0.0 (#147142)

[email protected] ⏩ [email protected]

---

## [`71.0.0`](https://github.com/elastic/eui/tree/v71.0.0)

- Implemented new `EuiRange` and `EuiDualRange` designs where the
`levels` are now on top of the tracks
([#6092](elastic/eui#6092))
- Added `discuss` and `dotInCircle` glyphs to `EuiIcon`
([#6434](elastic/eui#6434))
- Added `article` glyph to `EuiIcon`
([#6437](elastic/eui#6437))
- Changed the `EuiProvider` usage warnings to not rely on development
mode. ([#6451](elastic/eui#6451))

**Breaking changes**

- `EuiDualRange` now explicitly requires both `min` and `max` via props
types, to match `EuiRange`
([#6092](elastic/eui#6092))
- `EuiRange` and `EuiDualRange`'s `compressed` size no longer impacts
track or level sizes, but continues to compress tick and input sizes.
([#6092](elastic/eui#6092))
- Removed all variables for the following components from EUI's theme
JSON files: ([#6443](elastic/eui#6443))
  - `euiCollapsibleNav*`
  - `euiColorPicker*`
  - `euiContextMenu*`
  - `euiControlBar*`
  - `euiDataGrid* `(except for z-indices and cell padding sizes)
  - `euiDatePicker*`
  - `euiSuperDatePicker*`
  - `euiDragAndDrop*`
  - `euiEuiEmptyPrompt*`
  - `euiFilePicker*`
  - `euiRange*`
  - `euiHeaderLinks*`
  - `euiKeyPad*`
  - `euiMarkdownEditor*`
  - `euiResizable*`
  - `euiSelectable*`
  - `euiSideNav*`
  - `euiStep*`
  - `euiSuggest*`
  - `euiTable*` (except for color variables)
  - `euiTooltip*`
- `euiButtonFontWeight`, `euiButtonDefaultTransparency`, and
`euiButtonMinWidth`
- If you were importing any of the above removed JSON variables, we
strongly recommend using generic color or sizing variables from
`useEuiTheme()` instead.
([#6443](elastic/eui#6443))

**CSS-in-JS conversions**

- Converted `EuiRange` and `EuiDualRange` to Emotion; Removed
`$euiRangeThumbRadius`
([#6092](elastic/eui#6092))
- Added a new `logicalStyles` utility that automatically converts all
non-logical properties in a `style` object to their corresponding
logical properties ([#6426](elastic/eui#6426))
- Added a new `logicalShorthandCSS` utility that automatically converts
`margin`, `padding`, and other 4-sided shorthands to their corresponding
logical properties ([#6429](elastic/eui#6429))
- Added a new `logicalBorderRadiusCSS` utility that automatically
converts `border-radius` to corresponding logical properties
([#6429](elastic/eui#6429))

Co-authored-by: Constance Chen <[email protected]>
Co-authored-by: Kibana Machine <[email protected]>
Co-authored-by: Stratoula Kalafateli <[email protected]>

package.json

@@ -107,7 +107,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@elastic/ems-client": "8.3.3",
-    "@elastic/eui": "70.4.0",
+    "@elastic/eui": "71.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

src/dev/license_checker/config.ts

@@ -84,6 +84,6 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['Elastic License 2.0'],
-  '@elastic/eui@70.4.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@71.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
 };

src/plugins/controls/public/range_slider/components/range_slider_control.tsx

@@ -15,20 +15,19 @@ import {
   EuiLoadingSpinner,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiDualRange,
 } from '@elastic/eui';
 import { useReduxEmbeddableContext } from '@kbn/presentation-util-plugin/public';
 
 import { rangeSliderReducers } from '../range_slider_reducers';
 import { RangeSliderReduxState } from '../types';
-import { RangeSliderPopover } from './range_slider_popover';
+import { RangeSliderPopover, EuiDualRangeRef } from './range_slider_popover';
 
 import './range_slider.scss';
 
 const INVALID_CLASS = 'rangeSliderAnchor__fieldNumber--invalid';
 
 export const RangeSliderControl: FC = () => {
-  const rangeRef = useRef<EuiDualRange | null>(null);
+  const rangeRef = useRef<EuiDualRangeRef>(null);
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
 
   // Controls Services Context
@@ -143,13 +142,11 @@ export const RangeSliderControl: FC = () => {
       anchorPosition="downCenter"
       attachToAnchor={false}
       disableFocusTrap
-      onPanelResize={() => {
-        if (rangeRef?.current) {
-          rangeRef.current.onResize();
-        }
+      onPanelResize={(width) => {
+        rangeRef.current?.onResize(width);
       }}
     >
-      <RangeSliderPopover />
+      <RangeSliderPopover rangeRef={rangeRef} />
     </EuiInputPopover>
   );
 };

src/plugins/controls/public/range_slider/components/range_slider_popover.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { FC, useEffect, useRef, useState } from 'react';
+import React, { FC, ComponentProps, Ref, useEffect, useState } from 'react';
 import useMount from 'react-use/lib/useMount';
 
 import {
@@ -18,6 +18,7 @@ import {
   EuiToolTip,
   EuiButtonIcon,
 } from '@elastic/eui';
+import type { EuiDualRangeClass } from '@elastic/eui/src/components/form/range/dual_range';
 import { useReduxEmbeddableContext } from '@kbn/presentation-util-plugin/public';
 
 import { RangeValue } from '../../../common/range_slider/types';
@@ -26,9 +27,11 @@ import { rangeSliderReducers } from '../range_slider_reducers';
 import { RangeSliderReduxState } from '../types';
 import { RangeSliderStrings } from './range_slider_strings';
 
-export const RangeSliderPopover: FC = () => {
+// Unfortunately, wrapping EuiDualRange in `withEuiTheme` has created this annoying/verbose typing
+export type EuiDualRangeRef = EuiDualRangeClass & ComponentProps<typeof EuiDualRange>;
+
+export const RangeSliderPopover: FC<{ rangeRef?: Ref<EuiDualRangeRef> }> = ({ rangeRef }) => {
   const [fieldFormatter, setFieldFormatter] = useState(() => (toFormat: string) => toFormat);
-  const rangeRef = useRef<EuiDualRange | null>(null);
 
   // Controls Services Context
   const {
@@ -143,8 +146,8 @@ export const RangeSliderPopover: FC = () => {
         <EuiFlexItem>
           <EuiDualRange
             id={id}
-            min={hasAvailableRange ? rangeSliderMin : undefined}
-            max={hasAvailableRange ? rangeSliderMax : undefined}
+            min={hasAvailableRange ? rangeSliderMin : 0}
+            max={hasAvailableRange ? rangeSliderMax : 100}
             onChange={([newLowerBound, newUpperBound]) => {
               const updatedLowerBound =
                 typeof newLowerBound === 'number' ? String(newLowerBound) : value[0];

src/plugins/controls/public/time_slider/components/time_slider.tsx

@@ -7,12 +7,12 @@
  */
 
 import React, { FC, useRef } from 'react';
-import { EuiInputPopover, EuiDualRange } from '@elastic/eui';
+import { EuiInputPopover } from '@elastic/eui';
 import { useReduxEmbeddableContext } from '@kbn/presentation-util-plugin/public';
 import { timeSliderReducers } from '../time_slider_reducers';
 import { TimeSliderReduxState } from '../types';
 import { TimeSliderPopoverButton } from './time_slider_popover_button';
-import { TimeSliderPopoverContent } from './time_slider_popover_content';
+import { TimeSliderPopoverContent, EuiDualRangeRef } from './time_slider_popover_content';
 import { FROM_INDEX, TO_INDEX } from '../time_utils';
 import { getRoundedTimeRangeBounds } from '../time_slider_selectors';
 
@@ -46,7 +46,7 @@ export const TimeSlider: FC<Props> = (props: Props) => {
     return state.componentState.isOpen;
   });
 
-  const rangeRef = useRef<EuiDualRange>(null);
+  const rangeRef = useRef<EuiDualRangeRef>(null);
 
   const onPanelResize = (width?: number) => {
     rangeRef.current?.onResize(width);

src/plugins/controls/public/time_slider/components/time_slider_popover_content.tsx

@@ -7,9 +7,19 @@
  */
 
 import { i18n } from '@kbn/i18n';
-import React, { Ref } from 'react';
-import { EuiButtonIcon, EuiDualRange, EuiFlexGroup, EuiFlexItem, EuiToolTip } from '@elastic/eui';
-import { EuiRangeTick } from '@elastic/eui/src/components/form/range/range_ticks';
+import React, { Ref, ComponentProps } from 'react';
+import {
+  EuiButtonIcon,
+  EuiDualRange,
+  EuiRangeTick,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiToolTip,
+} from '@elastic/eui';
+import type { EuiDualRangeClass } from '@elastic/eui/src/components/form/range/dual_range';
+
+// Unfortunately, wrapping EuiDualRange in `withEuiTheme` has created a super annoying/verbose typing
+export type EuiDualRangeRef = EuiDualRangeClass & ComponentProps<typeof EuiDualRange>;
 
 interface Props {
   value: [number, number];
@@ -19,7 +29,7 @@ interface Props {
   ticks: EuiRangeTick[];
   timeRangeMin: number;
   timeRangeMax: number;
-  rangeRef?: Ref<EuiDualRange>;
+  rangeRef?: Ref<EuiDualRangeRef>;
 }
 
 export function TimeSliderPopoverContent(props: Props) {

src/plugins/controls/public/time_slider/time_slider_reducers.ts

@@ -8,7 +8,7 @@
 
 import { PayloadAction } from '@reduxjs/toolkit';
 import { WritableDraft } from 'immer/dist/types/types-external';
-import { EuiRangeTick } from '@elastic/eui/src/components/form/range/range_ticks';
+import { EuiRangeTick } from '@elastic/eui';
 import { TimeSliderReduxState } from './types';
 
 export const timeSliderReducers = {

src/plugins/controls/public/time_slider/time_utils.ts

@@ -7,7 +7,7 @@
  */
 
 import moment from 'moment-timezone';
-import { EuiRangeTick } from '@elastic/eui/src/components/form/range/range_ticks';
+import { EuiRangeTick } from '@elastic/eui';
 import { calcAutoIntervalNear } from '@kbn/data-plugin/common';
 
 const MAX_TICKS = 20; // eui range has hard limit of 20 ticks and throws when exceeded

src/plugins/controls/public/time_slider/types.ts

@@ -7,7 +7,7 @@
  */
 
 import { ReduxEmbeddableState } from '@kbn/presentation-util-plugin/public';
-import { EuiRangeTick } from '@elastic/eui/src/components/form/range/range_ticks';
+import { EuiRangeTick } from '@elastic/eui';
 
 import { ControlOutput } from '../types';
 import { TimeSliderControlEmbeddableInput } from '../../common/time_slider/types';

src/plugins/es_ui_shared/static/forms/components/fields/range_field.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useCallback } from 'react';
-import { EuiFormRow, EuiRange } from '@elastic/eui';
+import { EuiFormRow, EuiRange, EuiRangeProps } from '@elastic/eui';
 
 import { FieldHook, getFieldValidityAndErrorMessage } from '../../hook_form_lib';
 
@@ -22,11 +22,9 @@ export const RangeField = ({ field, euiFieldProps = {}, idAria, ...rest }: Props
   const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
   const { onChange: onFieldChange } = field;
 
-  const onChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) => {
-      const event = { ...e, value: `${e.currentTarget.value}` } as unknown as React.ChangeEvent<{
-        value: string;
-      }>;
+  const onChange: EuiRangeProps['onChange'] = useCallback(
+    (e) => {
+      const event = { ...e, value: `${e.currentTarget.value}` };
       onFieldChange(event);
     },
     [onFieldChange]

src/plugins/input_control_vis/public/components/vis/range_control.tsx

@@ -82,7 +82,7 @@ export class RangeControl extends PureComponent<RangeControlProps, RangeControlS
 
   renderControl() {
     if (!this.props.control.isEnabled()) {
-      return <ValidatedDualRange disabled showInput />;
+      return <ValidatedDualRange disabled showInput min={0} max={100} />;
     }
 
     const decimalPlaces = _.get(this.props, 'control.options.decimalPlaces', 0);

src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx

@@ -8,9 +8,8 @@
 
 import { i18n } from '@kbn/i18n';
 import React, { Component, ReactNode } from 'react';
-import { EuiFormRow, EuiDualRange } from '@elastic/eui';
+import { EuiFormRow, EuiDualRange, EuiDualRangeProps } from '@elastic/eui';
 import { EuiFormRowDisplayKeys } from '@elastic/eui/src/components/form/form_row/form_row';
-import { EuiDualRangeProps } from '@elastic/eui/src/components/form/range/dual_range';
 import { isRangeValid } from './is_range_valid';
 
 // Wrapper around EuiDualRange that ensures onChange callback is only called when range value
@@ -19,14 +18,12 @@ import { isRangeValid } from './is_range_valid';
 export type Value = EuiDualRangeProps['value'];
 export type ValueMember = EuiDualRangeProps['value'][0];
 
-interface Props extends Omit<EuiDualRangeProps, 'value' | 'onChange' | 'min' | 'max'> {
+interface Props extends Omit<EuiDualRangeProps, 'value' | 'onChange'> {
   value?: Value;
   allowEmptyRange?: boolean;
   label?: string | ReactNode;
   formRowDisplay?: EuiFormRowDisplayKeys;
   onChange?: (val: [string, string]) => void;
-  min?: number;
-  max?: number;
 }
 
 interface State {

src/plugins/vis_default_editor/public/components/controls/precision.tsx

@@ -31,9 +31,7 @@ function PrecisionParamEditor({ agg, value, setValue }: AggParamEditorProps<numb
         min={1}
         max={services.uiSettings.get('visualization:tileMap:maxPrecision')}
         value={value || ''}
-        onChange={(ev: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLButtonElement>) =>
-          setValue(Number(ev.currentTarget.value))
-        }
+        onChange={(ev) => setValue(Number(ev.currentTarget.value))}
         data-test-subj={`visEditorMapPrecision${agg.id}`}
         showValue
         compressed