From 6bdfc483967c6920c5da4b539400c0baef94df93 Mon Sep 17 00:00:00 2001 From: Bree Hall <40739624+breehall@users.noreply.github.com> Date: Mon, 19 Dec 2022 16:14:10 -0500 Subject: [PATCH] Bumping EUI to 71.0.0 (#147142) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit eui@70.4.0 ⏩ eui@71.0.0 --- ## [`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](https://github.com/elastic/eui/pull/6092)) - Added `discuss` and `dotInCircle` glyphs to `EuiIcon` ([#6434](https://github.com/elastic/eui/pull/6434)) - Added `article` glyph to `EuiIcon` ([#6437](https://github.com/elastic/eui/pull/6437)) - Changed the `EuiProvider` usage warnings to not rely on development mode. ([#6451](https://github.com/elastic/eui/pull/6451)) **Breaking changes** - `EuiDualRange` now explicitly requires both `min` and `max` via props types, to match `EuiRange` ([#6092](https://github.com/elastic/eui/pull/6092)) - `EuiRange` and `EuiDualRange`'s `compressed` size no longer impacts track or level sizes, but continues to compress tick and input sizes. ([#6092](https://github.com/elastic/eui/pull/6092)) - Removed all variables for the following components from EUI's theme JSON files: ([#6443](https://github.com/elastic/eui/pull/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](https://github.com/elastic/eui/pull/6443)) **CSS-in-JS conversions** - Converted `EuiRange` and `EuiDualRange` to Emotion; Removed `$euiRangeThumbRadius` ([#6092](https://github.com/elastic/eui/pull/6092)) - Added a new `logicalStyles` utility that automatically converts all non-logical properties in a `style` object to their corresponding logical properties ([#6426](https://github.com/elastic/eui/pull/6426)) - Added a new `logicalShorthandCSS` utility that automatically converts `margin`, `padding`, and other 4-sided shorthands to their corresponding logical properties ([#6429](https://github.com/elastic/eui/pull/6429)) - Added a new `logicalBorderRadiusCSS` utility that automatically converts `border-radius` to corresponding logical properties ([#6429](https://github.com/elastic/eui/pull/6429)) Co-authored-by: Constance Chen Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Stratoula Kalafateli --- package.json | 2 +- .../header/__snapshots__/header.test.tsx.snap | 1 + .../header_breadcrumbs.test.tsx.snap | 8 ++++ .../__snapshots__/list_header.test.tsx.snap | 8 ++++ src/dev/license_checker/config.ts | 2 +- .../components/range_slider_control.tsx | 13 +++--- .../components/range_slider_popover.tsx | 13 +++--- .../time_slider/components/time_slider.tsx | 6 +-- .../time_slider_popover_content.tsx | 18 ++++++-- .../time_slider/time_slider_reducers.ts | 2 +- .../controls/public/time_slider/time_utils.ts | 2 +- .../controls/public/time_slider/types.ts | 2 +- .../forms/components/fields/range_field.tsx | 10 ++--- .../__snapshots__/range_control.test.tsx.snap | 2 + .../public/components/vis/range_control.tsx | 2 +- .../validated_range/validated_dual_range.tsx | 7 +-- .../public/components/controls/precision.tsx | 4 +- .../controls/radius_ratio_option.tsx | 7 ++- .../__snapshots__/point_options.test.tsx.snap | 8 +--- .../partition_labels/extended_template.tsx | 14 +++++- .../group_source_prioritization.test.tsx | 2 +- .../group_source_prioritization.tsx | 13 +++--- .../pages/metrics/settings/input_fields.tsx | 10 ++++- .../resolution_editor.test.tsx.snap | 36 ++------------- .../es_geo_grid_source/resolution_editor.tsx | 6 +-- .../ordinal_data_mapping_popover.tsx | 5 ++- .../components/size/size_range_selector.tsx | 2 +- .../validated_range.test.js.snap | 30 ++----------- .../severity_control/severity_control.tsx | 11 +---- .../configuration_step_form.tsx | 4 +- .../form/shards/shards_percentage_field.tsx | 5 ++- .../__snapshots__/prompt_page.test.tsx.snap | 4 +- .../unauthenticated_page.test.tsx.snap | 2 +- .../reset_session_page.test.tsx.snap | 2 +- .../anomaly_threshold_slider/index.test.tsx | 2 +- .../rules/anomaly_threshold_slider/index.tsx | 11 ++--- .../rules/risk_score_mapping/index.tsx | 5 ++- .../public/resolver/view/graph_controls.tsx | 4 +- .../public/components/tty_player/styles.ts | 6 --- .../components/tty_player_controls/index.tsx | 9 ++-- .../tty_player_controls_markers/index.tsx | 6 +-- .../monitor_list_table/monitor_locations.tsx | 4 +- .../__snapshots__/donut_chart.test.tsx.snap | 44 +++++++++---------- .../outlier_detection_creation.ts | 4 +- yarn.lock | 8 ++-- 45 files changed, 166 insertions(+), 200 deletions(-) diff --git a/package.json b/package.json index ae72182a5dc1c..851824b97b505 100644 --- a/package.json +++ b/package.json @@ -107,7 +107,7 @@ "@elastic/datemath": "5.0.3", "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.5.0-canary.1", "@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", diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap index aa77a58ad7202..6b86cffc5ca20 100644 --- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap +++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/header.test.tsx.snap @@ -156,6 +156,7 @@ exports[`Header renders 1`] = ` >
  • { - const rangeRef = useRef(null); + const rangeRef = useRef(null); const [isPopoverOpen, setIsPopoverOpen] = useState(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); }} > - + ); }; diff --git a/src/plugins/controls/public/range_slider/components/range_slider_popover.tsx b/src/plugins/controls/public/range_slider/components/range_slider_popover.tsx index fea4db4fc268d..bd2fee564e9cb 100644 --- a/src/plugins/controls/public/range_slider/components/range_slider_popover.tsx +++ b/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; + +export const RangeSliderPopover: FC<{ rangeRef?: Ref }> = ({ rangeRef }) => { const [fieldFormatter, setFieldFormatter] = useState(() => (toFormat: string) => toFormat); - const rangeRef = useRef(null); // Controls Services Context const { @@ -143,8 +146,8 @@ export const RangeSliderPopover: FC = () => { { const updatedLowerBound = typeof newLowerBound === 'number' ? String(newLowerBound) : value[0]; diff --git a/src/plugins/controls/public/time_slider/components/time_slider.tsx b/src/plugins/controls/public/time_slider/components/time_slider.tsx index bb8c698ee7c3b..3962d85bec1d9 100644 --- a/src/plugins/controls/public/time_slider/components/time_slider.tsx +++ b/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) => { return state.componentState.isOpen; }); - const rangeRef = useRef(null); + const rangeRef = useRef(null); const onPanelResize = (width?: number) => { rangeRef.current?.onResize(width); diff --git a/src/plugins/controls/public/time_slider/components/time_slider_popover_content.tsx b/src/plugins/controls/public/time_slider/components/time_slider_popover_content.tsx index 9ec21f7352817..3ce28761f713c 100644 --- a/src/plugins/controls/public/time_slider/components/time_slider_popover_content.tsx +++ b/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; interface Props { value: [number, number]; @@ -19,7 +29,7 @@ interface Props { ticks: EuiRangeTick[]; timeRangeMin: number; timeRangeMax: number; - rangeRef?: Ref; + rangeRef?: Ref; } export function TimeSliderPopoverContent(props: Props) { diff --git a/src/plugins/controls/public/time_slider/time_slider_reducers.ts b/src/plugins/controls/public/time_slider/time_slider_reducers.ts index 160d4bf5b25ad..eb550d998f3af 100644 --- a/src/plugins/controls/public/time_slider/time_slider_reducers.ts +++ b/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 = { diff --git a/src/plugins/controls/public/time_slider/time_utils.ts b/src/plugins/controls/public/time_slider/time_utils.ts index bd978e9f7ec7e..89995bb4b0cf5 100644 --- a/src/plugins/controls/public/time_slider/time_utils.ts +++ b/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 diff --git a/src/plugins/controls/public/time_slider/types.ts b/src/plugins/controls/public/time_slider/types.ts index 56c78b0e45c2d..9e72b7dd50113 100644 --- a/src/plugins/controls/public/time_slider/types.ts +++ b/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'; diff --git a/src/plugins/es_ui_shared/static/forms/components/fields/range_field.tsx b/src/plugins/es_ui_shared/static/forms/components/fields/range_field.tsx index c063e46a247b0..872e442943e0d 100644 --- a/src/plugins/es_ui_shared/static/forms/components/fields/range_field.tsx +++ b/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 | React.MouseEvent) => { - 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] diff --git a/src/plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.tsx.snap b/src/plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.tsx.snap index c54397bf0e30c..8bd5c5bd46041 100644 --- a/src/plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.tsx.snap +++ b/src/plugins/input_control_vis/public/components/vis/__snapshots__/range_control.test.tsx.snap @@ -12,6 +12,8 @@ exports[`disabled 1`] = ` compressed={false} disabled={true} fullWidth={false} + max={100} + min={0} showInput={true} /> diff --git a/src/plugins/input_control_vis/public/components/vis/range_control.tsx b/src/plugins/input_control_vis/public/components/vis/range_control.tsx index dd003a74369df..602cc79dd8f5c 100644 --- a/src/plugins/input_control_vis/public/components/vis/range_control.tsx +++ b/src/plugins/input_control_vis/public/components/vis/range_control.tsx @@ -82,7 +82,7 @@ export class RangeControl extends PureComponent; + return ; } const decimalPlaces = _.get(this.props, 'control.options.decimalPlaces', 0); diff --git a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx b/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx index 1b929be8af8ba..14dc13962fa8b 100644 --- a/src/plugins/kibana_react/public/validated_range/validated_dual_range.tsx +++ b/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 { +interface Props extends Omit { value?: Value; allowEmptyRange?: boolean; label?: string | ReactNode; formRowDisplay?: EuiFormRowDisplayKeys; onChange?: (val: [string, string]) => void; - min?: number; - max?: number; } interface State { diff --git a/src/plugins/vis_default_editor/public/components/controls/precision.tsx b/src/plugins/vis_default_editor/public/components/controls/precision.tsx index 2e9c2b252fa63..872c254cc9105 100644 --- a/src/plugins/vis_default_editor/public/components/controls/precision.tsx +++ b/src/plugins/vis_default_editor/public/components/controls/precision.tsx @@ -31,9 +31,7 @@ function PrecisionParamEditor({ agg, value, setValue }: AggParamEditorProps | React.MouseEvent) => - setValue(Number(ev.currentTarget.value)) - } + onChange={(ev) => setValue(Number(ev.currentTarget.value))} data-test-subj={`visEditorMapPrecision${agg.id}`} showValue compressed diff --git a/src/plugins/vis_default_editor/public/components/controls/radius_ratio_option.tsx b/src/plugins/vis_default_editor/public/components/controls/radius_ratio_option.tsx index 408204b2a2dfb..b97a68f0c5984 100644 --- a/src/plugins/vis_default_editor/public/components/controls/radius_ratio_option.tsx +++ b/src/plugins/vis_default_editor/public/components/controls/radius_ratio_option.tsx @@ -7,7 +7,7 @@ */ import React, { useCallback } from 'react'; -import { EuiFormRow, EuiIconTip, EuiRange, EuiSpacer } from '@elastic/eui'; +import { EuiFormRow, EuiIconTip, EuiRange, EuiRangeProps, EuiSpacer } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import useMount from 'react-use/lib/useMount'; @@ -40,9 +40,8 @@ function RadiusRatioOptionControl({ editorStateParams, setStateParamValue }: Agg } }); - const onChange = useCallback( - (e: React.ChangeEvent | React.MouseEvent) => - setStateParamValue(PARAM_NAME, parseFloat(e.currentTarget.value)), + const onChange: EuiRangeProps['onChange'] = useCallback( + (e) => setStateParamValue(PARAM_NAME, parseFloat(e.currentTarget.value)), [setStateParamValue] ); diff --git a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/point_options.test.tsx.snap b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/point_options.test.tsx.snap index fcd6f8d00a138..43b613a9c7f47 100644 --- a/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/point_options.test.tsx.snap +++ b/src/plugins/vis_types/xy/public/editor/components/options/metrics_axes/__snapshots__/point_options.test.tsx.snap @@ -23,21 +23,15 @@ exports[`PointOptions component should init with the default set of props 1`] = label="Dots size" labelType="label" > - diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/partition_labels/extended_template.tsx b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/partition_labels/extended_template.tsx index b5aa5d6184c99..af74acc622789 100644 --- a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/partition_labels/extended_template.tsx +++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/partition_labels/extended_template.tsx @@ -5,7 +5,14 @@ * 2.0. */ -import React, { ChangeEvent, MouseEvent, FunctionComponent, useCallback, useEffect } from 'react'; +import React, { + ChangeEvent, + MouseEvent, + KeyboardEvent, + FunctionComponent, + useCallback, + useEffect, +} from 'react'; import PropTypes from 'prop-types'; import { EuiFormRow, @@ -80,7 +87,10 @@ export const ExtendedTemplate: FunctionComponent = ({ onValueChange, argV const onCommonFieldChange = useCallback( (field: Fields) => ( - event: ChangeEvent | MouseEvent + event: + | ChangeEvent + | KeyboardEvent + | MouseEvent ) => { onChangeField(field, event.currentTarget.value); }, diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.test.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.test.tsx index 49dc7223e54e6..0a821deff90c9 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.test.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.test.tsx @@ -73,7 +73,7 @@ describe('GroupSourcePrioritization', () => { const wrapper = shallow(); const slider = wrapper.find(EuiRange).first(); - slider.simulate('change', { target: { value: 2 } }); + slider.simulate('change', { currentTarget: { value: 2 } }); expect(updatePriority).toHaveBeenCalledWith('123', 2); }); diff --git a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx index 615e7b22b343f..f72d4825aa040 100644 --- a/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/workplace_search/views/groups/components/group_source_prioritization.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { ChangeEvent, MouseEvent } from 'react'; +import React from 'react'; import { useActions, useValues } from 'kea'; @@ -24,6 +24,7 @@ import { EuiTableRow, EuiTableRowCell, } from '@elastic/eui'; +import { _SingleRangeChangeEvent } from '@elastic/eui/src/components/form/range/types'; import { i18n } from '@kbn/i18n'; import { SAVE_BUTTON_LABEL } from '../../../../shared/constants'; @@ -91,10 +92,8 @@ export const GroupSourcePrioritization: React.FC = () => { {SAVE_BUTTON_LABEL} ); - const handleSliderChange = ( - id: string, - e: ChangeEvent | MouseEvent - ) => updatePriority(id, Number((e.target as HTMLInputElement).value)); + const handleSliderChange = (id: string, e: _SingleRangeChangeEvent) => + updatePriority(id, Number(e.currentTarget.value)); const hasSources = contentSources.length > 0; const zeroState = ( @@ -150,9 +149,7 @@ export const GroupSourcePrioritization: React.FC = () => { step={1} showInput value={activeSourcePriorities[id]} - onChange={(e: ChangeEvent | MouseEvent) => - handleSliderChange(id, e) - } + onChange={(e) => handleSliderChange(id, e)} /> diff --git a/x-pack/plugins/infra/public/pages/metrics/settings/input_fields.tsx b/x-pack/plugins/infra/public/pages/metrics/settings/input_fields.tsx index e2380dedaee15..72e71143e2c84 100644 --- a/x-pack/plugins/infra/public/pages/metrics/settings/input_fields.tsx +++ b/x-pack/plugins/infra/public/pages/metrics/settings/input_fields.tsx @@ -56,7 +56,10 @@ export interface InputRangeFieldProps< isInvalid: boolean; name: string; onChange?: ( - evt: React.ChangeEvent | React.MouseEvent, + evt: + | React.ChangeEvent + | React.KeyboardEvent + | React.MouseEvent, isValid: boolean ) => void; value: Value; @@ -81,7 +84,10 @@ export const createInputRangeFieldProps = < isInvalid: errors.length > 0, name, onChange: ( - evt: React.ChangeEvent | React.MouseEvent, + evt: + | React.ChangeEvent + | React.KeyboardEvent + | React.MouseEvent, isValid: boolean ) => onChange(+evt.currentTarget.value, isValid), value, diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/__snapshots__/resolution_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/__snapshots__/resolution_editor.test.tsx.snap index 79be012887af9..dfff4bdd6ca44 100644 --- a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/__snapshots__/resolution_editor.test.tsx.snap +++ b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/__snapshots__/resolution_editor.test.tsx.snap @@ -10,19 +10,12 @@ exports[`should render 3 tick slider when renderAs is HEX 1`] = ` label="Resolution" labelType="label" > - - - - { return resolution ? (resolution as GRID_RESOLUTION) : GRID_RESOLUTION.COARSE; } - _onResolutionChange = (event: ChangeEvent | MouseEvent) => { + _onResolutionChange: EuiRangeProps['onChange'] = (event) => { const resolution = this._sliderValueToResolution(parseInt(event.currentTarget.value, 10)); if (isMvt(this.props.renderAs, resolution)) { const hasUnsupportedMetrics = this.props.metrics.find(isUnsupportedVectorTileMetric); diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/ordinal_data_mapping_popover.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/ordinal_data_mapping_popover.tsx index 3f3266d399c70..a614d707d0c83 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/ordinal_data_mapping_popover.tsx +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/ordinal_data_mapping_popover.tsx @@ -6,7 +6,7 @@ */ import _ from 'lodash'; -import React, { ChangeEvent, Fragment, MouseEvent } from 'react'; +import React, { Fragment } from 'react'; import { EuiFormRow, EuiHorizontalRule, @@ -18,6 +18,7 @@ import { EuiText, EuiToolTip, } from '@elastic/eui'; +import type { _SingleRangeChangeEvent } from '@elastic/eui/src/components/form/range/types'; import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n-react'; import { DEFAULT_SIGMA } from '../../vector_style_defaults'; @@ -95,7 +96,7 @@ export function OrdinalDataMappingPopover(props: Props | MouseEvent) { + function onSigmaChange(event: _SingleRangeChangeEvent) { // @ts-expect-error props.onChange({ fieldMetaOptions: { diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/size/size_range_selector.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/size/size_range_selector.tsx index 59bdfa3be5938..bc3b29a765398 100644 --- a/x-pack/plugins/maps/public/classes/styles/vector/components/size/size_range_selector.tsx +++ b/x-pack/plugins/maps/public/classes/styles/vector/components/size/size_range_selector.tsx @@ -7,7 +7,7 @@ import React from 'react'; import { ValidatedDualRange } from '@kbn/kibana-react-plugin/public'; -import { EuiDualRangeProps } from '@elastic/eui/src/components/form/range/dual_range'; +import { EuiDualRangeProps } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { MIN_SIZE, MAX_SIZE } from '../../vector_style_defaults'; diff --git a/x-pack/plugins/maps/public/components/__snapshots__/validated_range.test.js.snap b/x-pack/plugins/maps/public/components/__snapshots__/validated_range.test.js.snap index cee44b3e6b27c..dd9b6dcc3a61c 100644 --- a/x-pack/plugins/maps/public/components/__snapshots__/validated_range.test.js.snap +++ b/x-pack/plugins/maps/public/components/__snapshots__/validated_range.test.js.snap @@ -2,19 +2,10 @@ exports[`Should display error message when value is outside of range 1`] = `
    - @@ -33,37 +24,22 @@ exports[`Should display error message when value is outside of range 1`] = ` `; exports[`Should pass slider props to slider 1`] = ` - `; exports[`Should render slider 1`] = ` - `; diff --git a/x-pack/plugins/ml/public/application/components/severity_control/severity_control.tsx b/x-pack/plugins/ml/public/application/components/severity_control/severity_control.tsx index de3585ce9f63c..1ac6fc5ff46de 100644 --- a/x-pack/plugins/ml/public/application/components/severity_control/severity_control.tsx +++ b/x-pack/plugins/ml/public/application/components/severity_control/severity_control.tsx @@ -54,13 +54,6 @@ export const SeverityControl: FC = React.memo(({ value, o const resultValue = value ?? ANOMALY_THRESHOLD.LOW; - const onChangeCallback = ( - e: React.ChangeEvent | React.MouseEvent - ) => { - // @ts-ignore Property 'value' does not exist on type 'EventTarget' | (EventTarget & HTMLInputElement) - onChange(Number(e.target.value)); - }; - const ticks = new Array(5).fill(null).map((x, i) => { const v = i * 25; return { value: v, label: v }; @@ -76,7 +69,7 @@ export const SeverityControl: FC = React.memo(({ value, o compressed prepend={label} value={resultValue} - onChange={onChangeCallback} + onChange={(e) => onChange(Number(e.target.value))} min={ANOMALY_THRESHOLD.LOW} max={MAX_ANOMALY_SCORE} /> @@ -88,7 +81,7 @@ export const SeverityControl: FC = React.memo(({ value, o min={ANOMALY_THRESHOLD.LOW} max={MAX_ANOMALY_SCORE} value={resultValue} - onChange={onChangeCallback} + onChange={(e) => onChange(Number(e.currentTarget.value))} aria-label={i18n.translate('xpack.ml.severitySelector.formControlAriaLabel', { defaultMessage: 'Select severity threshold', })} diff --git a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/configuration_step/configuration_step_form.tsx b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/configuration_step/configuration_step_form.tsx index 724aed7b08294..052c4e64272c9 100644 --- a/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/configuration_step/configuration_step_form.tsx +++ b/x-pack/plugins/ml/public/application/data_frame_analytics/pages/analytics_creation/components/configuration_step/configuration_step_form.tsx @@ -285,9 +285,7 @@ export const ConfigurationStepForm: FC = ({ const formStateUpdated = { ...(shouldUpdateModelMemoryLimit ? { modelMemoryLimit: expectedMemory } : {}), - ...(depVarIsRuntimeField || jobTypeChanged || depVarNotIncluded - ? { includes: formToUse.includes } - : {}), + ...(depVarIsRuntimeField || depVarNotIncluded ? { includes: formToUse.includes } : {}), requiredFieldsError: !hasRequiredFields ? requiredFieldsErrorText : undefined, }; diff --git a/x-pack/plugins/osquery/public/packs/form/shards/shards_percentage_field.tsx b/x-pack/plugins/osquery/public/packs/form/shards/shards_percentage_field.tsx index 61a98219f3c38..4afb27570689e 100644 --- a/x-pack/plugins/osquery/public/packs/form/shards/shards_percentage_field.tsx +++ b/x-pack/plugins/osquery/public/packs/form/shards/shards_percentage_field.tsx @@ -7,6 +7,7 @@ import React, { useCallback, useMemo } from 'react'; import { useController } from 'react-hook-form'; import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiRange } from '@elastic/eui'; +import type { EuiRangeProps } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import type { ShardsFormReturn } from './shards_form'; @@ -32,8 +33,8 @@ const ShardsPercentageFieldComponent = ({ defaultValue: 100, }); - const handleChange = useCallback( - (e: React.ChangeEvent | React.MouseEvent) => { + const handleChange: EuiRangeProps['onChange'] = useCallback( + (e) => { const numberValue = (e.target as { valueAsNumber: number }).valueAsNumber ? (e.target as { valueAsNumber: number }).valueAsNumber : 0; diff --git a/x-pack/plugins/security/server/__snapshots__/prompt_page.test.tsx.snap b/x-pack/plugins/security/server/__snapshots__/prompt_page.test.tsx.snap index 8a5add971f7f5..ad48ecadd165f 100644 --- a/x-pack/plugins/security/server/__snapshots__/prompt_page.test.tsx.snap +++ b/x-pack/plugins/security/server/__snapshots__/prompt_page.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`PromptPage renders as expected with additional scripts 1`] = `"ElasticMockedFonts

    Some Title

    Some Body
    Action#1
    Action#2
    "`; +exports[`PromptPage renders as expected with additional scripts 1`] = `"ElasticMockedFonts

    Some Title

    Some Body
    Action#1
    Action#2
    "`; -exports[`PromptPage renders as expected without additional scripts 1`] = `"ElasticMockedFonts

    Some Title

    Some Body
    Action#1
    Action#2
    "`; +exports[`PromptPage renders as expected without additional scripts 1`] = `"ElasticMockedFonts

    Some Title

    Some Body
    Action#1
    Action#2
    "`; diff --git a/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap b/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap index 7895382d4f654..015467a7c8da5 100644 --- a/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap +++ b/x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`UnauthenticatedPage renders as expected 1`] = `"ElasticMockedFonts

    We couldn't log you in

    We hit an authentication error. Please check your credentials and try again. If you still can't log in, contact your system administrator.

    Log in
    "`; +exports[`UnauthenticatedPage renders as expected 1`] = `"ElasticMockedFonts

    We couldn't log you in

    We hit an authentication error. Please check your credentials and try again. If you still can't log in, contact your system administrator.

    Log in
    "`; diff --git a/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap b/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap index a19757b3f52b2..604ca460ac67f 100644 --- a/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap +++ b/x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap @@ -1,3 +1,3 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ResetSessionPage renders as expected 1`] = `"ElasticMockedFonts

    You do not have permission to access the requested page

    Either go back to the previous page or log in as a different user.

    Log in as different user
    "`; +exports[`ResetSessionPage renders as expected 1`] = `"ElasticMockedFonts

    You do not have permission to access the requested page

    Either go back to the previous page or log in as a different user.

    Log in as different user
    "`; diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/anomaly_threshold_slider/index.test.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/anomaly_threshold_slider/index.test.tsx index ec0b95aab778a..89fe0ef8e5c7b 100644 --- a/x-pack/plugins/security_solution/public/detections/components/rules/anomaly_threshold_slider/index.test.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/rules/anomaly_threshold_slider/index.test.tsx @@ -20,6 +20,6 @@ describe('AnomalyThresholdSlider', () => { }; const wrapper = shallow(); - expect(wrapper.dive().find('EuiRange')).toHaveLength(1); + expect(wrapper.dive().find('EuiRangeClass')).toHaveLength(1); }); }); diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/anomaly_threshold_slider/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/anomaly_threshold_slider/index.tsx index 6997777fdc34c..3398b8bec2cf5 100644 --- a/x-pack/plugins/security_solution/public/detections/components/rules/anomaly_threshold_slider/index.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/rules/anomaly_threshold_slider/index.tsx @@ -7,6 +7,7 @@ import React, { useCallback } from 'react'; import { EuiFlexGroup, EuiFlexItem, EuiRange, EuiFormRow } from '@elastic/eui'; +import type { EuiRangeProps } from '@elastic/eui'; import type { FieldHook } from '../../../../shared_imports'; @@ -14,17 +15,15 @@ interface AnomalyThresholdSliderProps { describedByIds: string[]; field: FieldHook; } -type Event = React.ChangeEvent; -type EventArg = Event | React.MouseEvent; export const AnomalyThresholdSlider = ({ describedByIds = [], field, }: AnomalyThresholdSliderProps) => { const threshold = field.value as number; - const onThresholdChange = useCallback( - (event: EventArg) => { - const thresholdValue = Number((event as Event).target.value); + const onThresholdChange: EuiRangeProps['onChange'] = useCallback( + (event) => { + const thresholdValue = Number(event.currentTarget.value); field.setValue(thresholdValue); }, [field] @@ -46,6 +45,8 @@ export const AnomalyThresholdSlider = ({ showRange showTicks tickInterval={25} + min={0} + max={100} /> diff --git a/x-pack/plugins/security_solution/public/detections/components/rules/risk_score_mapping/index.tsx b/x-pack/plugins/security_solution/public/detections/components/rules/risk_score_mapping/index.tsx index 177fd2e97e6cd..f022560f9f50c 100644 --- a/x-pack/plugins/security_solution/public/detections/components/rules/risk_score_mapping/index.tsx +++ b/x-pack/plugins/security_solution/public/detections/components/rules/risk_score_mapping/index.tsx @@ -19,6 +19,7 @@ import { EuiSpacer, EuiRange, } from '@elastic/eui'; +import type { EuiRangeProps } from '@elastic/eui'; import type { DataViewBase, DataViewFieldBase } from '@kbn/es-query'; import type { FieldHook } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib'; @@ -67,8 +68,8 @@ export const RiskScoreField = ({ const fieldTypeFilter = useMemo(() => ['number'], []); const selectedField = useMemo(() => getFieldTypeByMapping(mapping, indices), [mapping, indices]); - const handleDefaultRiskScoreChange = useCallback( - (e: React.ChangeEvent | React.MouseEvent): void => { + const handleDefaultRiskScoreChange: EuiRangeProps['onChange'] = useCallback( + (e) => { const range = (e.target as HTMLInputElement).value; setValue({ value: Number(range.trim()), diff --git a/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx b/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx index 099f1b556e601..fb16aaa5bdfbc 100644 --- a/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx +++ b/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx @@ -144,8 +144,8 @@ export const GraphControls = React.memo( const closePopover = useCallback(() => setPopover(null), []); - const handleZoomAmountChange = useCallback( - (event: React.ChangeEvent | React.MouseEvent) => { + const handleZoomAmountChange: EuiRangeProps['onChange'] = useCallback( + (event) => { const valueAsNumber = parseFloat( (event as React.ChangeEvent).target.value ); diff --git a/x-pack/plugins/session_view/public/components/tty_player/styles.ts b/x-pack/plugins/session_view/public/components/tty_player/styles.ts index 1e38182f94765..4a4fadc7417e1 100644 --- a/x-pack/plugins/session_view/public/components/tty_player/styles.ts +++ b/x-pack/plugins/session_view/public/components/tty_player/styles.ts @@ -26,12 +26,6 @@ export const useStyles = (tty?: Teletype, show?: boolean) => { height: '100%', overflow: 'hidden', zIndex: 10, - '.euiRangeLevel--warning': { - backgroundColor: transparentize(colors.warning, 0.8), - }, - '.euiRangeLevel--danger': { - backgroundColor: transparentize(colors.danger, 0.8), - }, '.euiRangeTick,.euiRangeLevel': { transition: 'left 500ms', }, diff --git a/x-pack/plugins/session_view/public/components/tty_player_controls/index.tsx b/x-pack/plugins/session_view/public/components/tty_player_controls/index.tsx index ebde48b27aad4..af10b030c5149 100644 --- a/x-pack/plugins/session_view/public/components/tty_player_controls/index.tsx +++ b/x-pack/plugins/session_view/public/components/tty_player_controls/index.tsx @@ -4,7 +4,7 @@ * 2.0; you may not use this file except in compliance with the Elastic License * 2.0. */ -import React, { useCallback, ChangeEvent, MouseEvent } from 'react'; +import React, { useCallback } from 'react'; import { EuiButtonEmpty, EuiPanel, @@ -13,6 +13,7 @@ import { EuiButtonIcon, EuiToolTip, EuiButtonIconProps, + EuiRangeProps, } from '@elastic/eui'; import { findIndex } from 'lodash'; import { ProcessStartMarker, ProcessEvent } from '../../../common/types/process_tree'; @@ -62,9 +63,9 @@ export const TTYPlayerControls = ({ css: styles.controlButton, }; - const onLineChange = useCallback( - (event: ChangeEvent | MouseEvent) => { - const line = parseInt((event?.target as HTMLInputElement).value || '0', 10); + const onLineChange: EuiRangeProps['onChange'] = useCallback( + (event) => { + const line = parseInt(event.currentTarget.value || '0', 10); onSeekLine(line); }, [onSeekLine] diff --git a/x-pack/plugins/session_view/public/components/tty_player_controls/tty_player_controls_markers/index.tsx b/x-pack/plugins/session_view/public/components/tty_player_controls/tty_player_controls_markers/index.tsx index e84ed7fcf34a9..0b2223156d634 100644 --- a/x-pack/plugins/session_view/public/components/tty_player_controls/tty_player_controls_markers/index.tsx +++ b/x-pack/plugins/session_view/public/components/tty_player_controls/tty_player_controls_markers/index.tsx @@ -5,8 +5,8 @@ * 2.0. */ -import React, { ChangeEvent, MouseEvent, useMemo } from 'react'; -import { EuiRange, EuiToolTip } from '@elastic/eui'; +import React, { useMemo } from 'react'; +import { EuiRange, EuiRangeProps, EuiToolTip } from '@elastic/eui'; import type { ProcessStartMarker } from '../../../../common/types/process_tree'; import { useStyles } from './styles'; import { PlayHead } from './play_head'; @@ -15,7 +15,7 @@ type Props = { processStartMarkers: ProcessStartMarker[]; linesLength: number; currentLine: number; - onChange: (e: ChangeEvent | MouseEvent) => void; + onChange: EuiRangeProps['onChange']; onSeekLine(line: number): void; }; diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/monitor_locations.tsx b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/monitor_locations.tsx index c1ea2e8c537af..dc9792bab30c0 100644 --- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/monitor_locations.tsx +++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/management/monitor_list_table/monitor_locations.tsx @@ -82,7 +82,7 @@ function getLocationStatusColor( overviewStatus: OverviewStatusState | null ) { const { - eui: { euiColorVis9, euiColorVis0, euiSideNavDisabledTextcolor }, + eui: { euiColorVis9, euiColorVis0, euiColorDisabled }, } = euiTheme; const locById = `${monitorId}-${locationLabel}`; @@ -93,5 +93,5 @@ function getLocationStatusColor( return euiColorVis0; } - return euiSideNavDisabledTextcolor; + return euiColorDisabled; } diff --git a/x-pack/plugins/synthetics/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap b/x-pack/plugins/synthetics/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap index 9cd19cb2404de..58e01666035e8 100644 --- a/x-pack/plugins/synthetics/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap +++ b/x-pack/plugins/synthetics/public/legacy_uptime/components/common/charts/__snapshots__/donut_chart.test.tsx.snap @@ -534,7 +534,7 @@ exports[`DonutChart component passes correct props without errors for valid prop "strokeWidth": 2, }, "point": Object { - "fill": "rgba(255, 255, 255, 1)", + "fill": "#FFF", "radius": 3, "strokeWidth": 2, "visible": false, @@ -542,10 +542,10 @@ exports[`DonutChart component passes correct props without errors for valid prop }, "axes": Object { "axisLine": Object { - "stroke": "rgba(238, 240, 243, 1)", + "stroke": "#eaedf3", }, "axisTitle": Object { - "fill": "rgba(52, 55, 65, 1)", + "fill": "#343741", "fontFamily": "'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", "fontSize": 12, @@ -561,7 +561,7 @@ exports[`DonutChart component passes correct props without errors for valid prop 0, ], "opacity": 1, - "stroke": "rgba(238, 240, 243, 1)", + "stroke": "#eaedf3", "strokeWidth": 1, "visible": true, }, @@ -571,13 +571,13 @@ exports[`DonutChart component passes correct props without errors for valid prop 4, ], "opacity": 1, - "stroke": "rgba(238, 240, 243, 1)", + "stroke": "#eaedf3", "strokeWidth": 1, "visible": true, }, }, "tickLabel": Object { - "fill": "rgba(105, 112, 125, 1)", + "fill": "#646a77", "fontFamily": "'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", "fontSize": 10, @@ -587,13 +587,13 @@ exports[`DonutChart component passes correct props without errors for valid prop }, }, "tickLine": Object { - "stroke": "rgba(238, 240, 243, 1)", + "stroke": "#eaedf3", "strokeWidth": 1, "visible": false, }, }, "background": Object { - "color": "rgba(255, 255, 255, 1)", + "color": "#FFF", }, "barSeriesStyle": Object { "displayValue": Object { @@ -632,14 +632,14 @@ exports[`DonutChart component passes correct props without errors for valid prop }, "crosshair": Object { "band": Object { - "fill": "rgba(245, 247, 250, 1)", + "fill": "#F1F4FA", }, "crossLine": Object { "dash": Array [ 4, 4, ], - "stroke": "rgba(105, 112, 125, 1)", + "stroke": "#69707D", "strokeWidth": 1, }, "line": Object { @@ -647,44 +647,44 @@ exports[`DonutChart component passes correct props without errors for valid prop 4, 4, ], - "stroke": "rgba(105, 112, 125, 1)", + "stroke": "#69707D", "strokeWidth": 1, }, }, "goal": Object { "majorCenterLabel": Object { - "fill": "rgba(52, 55, 65, 1)", + "fill": "#343741", "fontFamily": "'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", }, "majorLabel": Object { - "fill": "rgba(52, 55, 65, 1)", + "fill": "#343741", "fontFamily": "'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", }, "minorCenterLabel": Object { - "fill": "rgba(105, 112, 125, 1)", + "fill": "#646a77", "fontFamily": "'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", }, "minorLabel": Object { - "fill": "rgba(105, 112, 125, 1)", + "fill": "#646a77", "fontFamily": "'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", }, "progressLine": Object { - "stroke": "rgba(52, 55, 65, 1)", + "stroke": "#343741", }, "targetLine": Object { - "stroke": "rgba(52, 55, 65, 1)", + "stroke": "#343741", }, "tickLabel": Object { - "fill": "rgba(105, 112, 125, 1)", + "fill": "#646a77", "fontFamily": "'Inter', 'Inter UI', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'", }, "tickLine": Object { - "stroke": "rgba(152, 162, 179, 1)", + "stroke": "#98A2B3", }, }, "lineSeriesStyle": Object { @@ -692,7 +692,7 @@ exports[`DonutChart component passes correct props without errors for valid prop "strokeWidth": 2, }, "point": Object { - "fill": "rgba(255, 255, 255, 1)", + "fill": "#FFF", "radius": 3, "strokeWidth": 2, }, @@ -709,12 +709,12 @@ exports[`DonutChart component passes correct props without errors for valid prop "linkLabel": Object { "fontSize": 11, "maxCount": 5, - "textColor": "rgba(52, 55, 65, 1)", + "textColor": "#343741", }, "maxFontSize": 16, "minFontSize": 8, "outerSizeRatio": 1, - "sectorLineStroke": "rgba(255, 255, 255, 1)", + "sectorLineStroke": "#FFF", "sectorLineWidth": 1.5, }, "scales": Object { diff --git a/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation.ts b/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation.ts index c72f98d594828..21dd61e9d5249 100644 --- a/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation.ts +++ b/x-pack/test/functional/apps/ml/data_frame_analytics/outlier_detection_creation.ts @@ -64,7 +64,7 @@ export default function ({ getService }: FtrProviderContext) { // markers { color: '#5078AA', percentage: 15 }, // grey boilerplate - { color: '#6A717D', percentage: 12 }, + { color: '#69707D', percentage: 12 }, ], scatterplotMatrixColorStatsResults: [ // outlier markers @@ -72,7 +72,7 @@ export default function ({ getService }: FtrProviderContext) { // regular markers { color: '#6496BE', percentage: 15 }, // tick/grid/axis - { color: '#6E6E82', percentage: 11 }, + { color: '#69707D', percentage: 12 }, { color: '#D2DCE6', percentage: 10 }, // anti-aliasing { color: '#F5F7FA', percentage: 35 }, diff --git a/yarn.lock b/yarn.lock index 69a3a6ae1ab01..8c63ce46798f7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1527,10 +1527,10 @@ resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314" integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ== -"@elastic/eui@70.4.0": - version "70.4.0" - resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-70.4.0.tgz#0ce7520ac96e137f05861224a6cd0a029c4dc0bc" - integrity sha512-w/pMxC0drBtzy3RQzHBLLbKRgy4EUTSetej0eg7m87copRZOwWXqlrIt52uuUj9txenxmpSonnnvSB+1a7fCfg== +"@elastic/eui@71.0.0": + version "71.0.0" + resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-71.0.0.tgz#0d77ca3e513ebd59fee0be49abd7acf4b04206aa" + integrity sha512-5iHvGSJCJjin/VPHBT0RdHVKUCClH5PqXnygsr6LCkyQzj+frKiK0w28dK5EBReDp5+SRoF+VYSVse4Ia2DkLQ== dependencies: "@types/chroma-js" "^2.0.0" "@types/lodash" "^4.14.160"