diff --git a/examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_editor.tsx b/examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_editor.tsx
index 69fb6053d882..8a028eeadd49 100644
--- a/examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_editor.tsx
+++ b/examples/embeddable_examples/public/react_embeddables/saved_book/saved_book_editor.tsx
@@ -17,7 +17,6 @@ import {
EuiFlyoutBody,
EuiFlyoutFooter,
EuiFlyoutHeader,
- EuiFormControlLayout,
EuiFormRow,
EuiSwitch,
EuiTextArea,
@@ -128,48 +127,46 @@ export const SavedBookEditor = ({
-
-
- attributesManager.authorName.next(e.target.value)}
- />
-
-
- attributesManager.bookTitle.next(e.target.value)}
- />
-
-
- attributesManager.numberOfPages.next(+e.target.value)}
- />
-
-
- attributesManager.bookSynopsis.next(e.target.value)}
- />
-
-
+
+ attributesManager.authorName.next(e.target.value)}
+ />
+
+
+ attributesManager.bookTitle.next(e.target.value)}
+ />
+
+
+ attributesManager.numberOfPages.next(+e.target.value)}
+ />
+
+
+ attributesManager.bookSynopsis.next(e.target.value)}
+ />
+
diff --git a/packages/kbn-event-annotation-components/components/annotation_editor_controls/index.scss b/packages/kbn-event-annotation-components/components/annotation_editor_controls/index.scss
index 93bf0e2c7266..17e20d3380a0 100644
--- a/packages/kbn-event-annotation-components/components/annotation_editor_controls/index.scss
+++ b/packages/kbn-event-annotation-components/components/annotation_editor_controls/index.scss
@@ -2,12 +2,8 @@
margin-top: $euiSizeS;
}
-.lnsConfigPanelNoPadding {
- padding: 0;
-}
-
-.lnsConfigPanelDate__label {
- min-width: 56px; // makes both labels ("from" and "to") the same width
+.lnsConfigPanelAnnotations__date .euiFormControlLayout__prepend {
+ min-width: $euiSize * 3.25; // makes both labels ("from" and "to") the same width
}
.lnsConfigPanelAnnotations__addButton {
diff --git a/packages/kbn-event-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx b/packages/kbn-event-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx
index 69e7985b5796..d584e330352f 100644
--- a/packages/kbn-event-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx
+++ b/packages/kbn-event-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx
@@ -9,14 +9,7 @@
import { i18n } from '@kbn/i18n';
import React from 'react';
-import {
- EuiFormRow,
- EuiSwitch,
- EuiText,
- EuiFormControlLayout,
- EuiFormLabel,
- EuiDatePicker,
-} from '@elastic/eui';
+import { EuiFormRow, EuiSwitch, EuiText, EuiDatePicker } from '@elastic/eui';
import moment from 'moment';
import type {
PointInTimeEventAnnotationConfig,
@@ -107,36 +100,23 @@ export const ConfigPanelRangeDatePicker = ({
dataTestSubj?: string;
}) => {
return (
-
- {prependLabel ? (
- {prependLabel}
- }
- >
-
-
- ) : (
-
- )}
+
+
);
};
diff --git a/x-pack/packages/security/api_key_management/src/components/token_field.tsx b/x-pack/packages/security/api_key_management/src/components/token_field.tsx
index 4943603dbecf..ccda03a2315c 100644
--- a/x-pack/packages/security/api_key_management/src/components/token_field.tsx
+++ b/x-pack/packages/security/api_key_management/src/components/token_field.tsx
@@ -13,7 +13,6 @@ import {
EuiContextMenuPanel,
EuiCopy,
EuiFieldText,
- EuiFormControlLayout,
EuiHorizontalRule,
EuiPopover,
EuiSpacer,
@@ -29,12 +28,24 @@ export interface TokenFieldProps extends Omit {
value: string;
}
-export const TokenField: FunctionComponent = (props) => {
+export const TokenField: FunctionComponent = ({ value, ...props }) => {
return (
- event.currentTarget.select()}
+ readOnly
{...props}
append={
-
+
{(copyText) => (
= (props) => {
)}
}
- style={{ backgroundColor: 'transparent' }}
- readOnly
- >
- event.currentTarget.select()}
- readOnly
- />
-
+ />
);
};
@@ -118,7 +111,7 @@ export const SelectableTokenField: FunctionComponent
closePopover={closePopover}
>
((items, option, i) => {
items.push(
{
fullWidth
>
setAddDomainFormInputValue(e.target.value)}
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
index 40e698519e84..c2670eb11fff 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap
@@ -5,7 +5,7 @@ exports[`Should render icon select 1`] = `
+ }
readOnly={true}
- >
-
- }
- readOnly={true}
- value="symbol1"
- />
-
+ value="symbol1"
+ />
}
closePopover={[Function]}
display="block"
@@ -97,7 +90,7 @@ exports[`Should render icon select with custom icons 1`] = `
"
+ symbolId="__kbn__custom_icon_sdf__foobar"
+ />
+ }
readOnly={true}
- >
- "
- symbolId="__kbn__custom_icon_sdf__foobar"
- />
- }
- readOnly={true}
- value="My Custom Icon"
- />
-
+ value="My Custom Icon"
+ />
}
closePopover={[Function]}
display="block"
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_select.js b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_select.js
index 432a36478127..81bc36109b20 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_select.js
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/symbol/icon_select.js
@@ -8,7 +8,6 @@
import React, { Component, Fragment } from 'react';
import {
EuiButton,
- EuiFormControlLayout,
EuiFieldText,
EuiPopover,
EuiPopoverTitle,
@@ -109,32 +108,25 @@ export class IconSelect extends Component {
_renderPopoverButton() {
const { value, svg, label } = this.props.icon;
return (
-
+ }
append={this.props.append}
- >
-
- }
- />
-
+ />
);
}
diff --git a/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx b/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx
index 00197ab76104..4381523417b2 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx
+++ b/x-pack/plugins/observability_solution/apm/public/components/app/service_groups/service_groups_list/index.tsx
@@ -98,6 +98,7 @@ export function ServiceGroupsList() {
clear={!isEmpty(filter) ? { onClick: clearFilterCallback } : undefined}
>
- setStartTime(undefined) } : undefined
- }
- isDisabled={disabled}
- >
- setStartTime(selectedDateToParam(date))}
- placeholder={startTimeDefaultDescription}
- maxDate={now}
- />
-
+ setStartTime(selectedDateToParam(date))}
+ onClear={() => setStartTime(undefined)}
+ placeholder={startTimeDefaultDescription}
+ maxDate={now}
+ />
- setEndTime(undefined) } : undefined}
- isDisabled={disabled}
- >
- setEndTime(selectedDateToParam(date))}
- placeholder={endTimeDefaultDescription}
- openToDate={now}
- minDate={startTimeValue}
- minTime={selectedEndTimeIsToday ? now : moment().hour(0).minutes(0)}
- maxTime={moment().hour(23).minutes(59)}
- />
-
+ setEndTime(selectedDateToParam(date))}
+ onClear={() => setEndTime(undefined)}
+ placeholder={endTimeDefaultDescription}
+ openToDate={now}
+ minDate={startTimeValue}
+ minTime={selectedEndTimeIsToday ? now : moment().hour(0).minutes(0)}
+ maxTime={moment().hour(23).minutes(59)}
+ />
diff --git a/x-pack/plugins/observability_solution/observability/public/components/annotations/components/annotation_range.tsx b/x-pack/plugins/observability_solution/observability/public/components/annotations/components/annotation_range.tsx
index 5dada5bde32a..632e89906be2 100644
--- a/x-pack/plugins/observability_solution/observability/public/components/annotations/components/annotation_range.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/components/annotations/components/annotation_range.tsx
@@ -5,7 +5,7 @@
* 2.0.
*/
-import { EuiFormRow, EuiFormControlLayout, EuiFormLabel, EuiDatePicker } from '@elastic/eui';
+import { EuiFormRow, EuiFormLabel, EuiDatePicker } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { Controller, useFormContext } from 'react-hook-form';
import React from 'react';
@@ -37,70 +37,62 @@ export function AnnotationRange() {
display="rowCompressed"
fullWidth
>
-
- {i18n.translate('xpack.observability.annotationRange.fromFormLabelLabel', {
- defaultMessage: 'From',
- })}
-
- }
- >
- {
- const { value, ref, ...rest } = field;
- return (
-
- );
- }}
- />
-
+ {
+ const { value, ref, ...rest } = field;
+ return (
+
+ {i18n.translate('xpack.observability.annotationRange.fromFormLabelLabel', {
+ defaultMessage: 'From',
+ })}
+
+ }
+ dateFormat={dateFormat}
+ {...rest}
+ />
+ );
+ }}
+ />
-
- {i18n.translate('xpack.observability.annotationRange.toFormLabelLabel', {
- defaultMessage: 'To',
- })}
-
- }
- >
- {
- const { value, ref, ...rest } = field;
- return (
-
- );
- }}
- />
-
+ {
+ const { value, ref, ...rest } = field;
+ return (
+
+ {i18n.translate('xpack.observability.annotationRange.toFormLabelLabel', {
+ defaultMessage: 'To',
+ })}
+
+ }
+ dateFormat={dateFormat}
+ {...rest}
+ />
+ );
+ }}
+ />
>
);
diff --git a/x-pack/plugins/observability_solution/profiling/public/components/normalization_menu/index.tsx b/x-pack/plugins/observability_solution/profiling/public/components/normalization_menu/index.tsx
index 778033e89c7e..4f31857aa882 100644
--- a/x-pack/plugins/observability_solution/profiling/public/components/normalization_menu/index.tsx
+++ b/x-pack/plugins/observability_solution/profiling/public/components/normalization_menu/index.tsx
@@ -187,26 +187,22 @@ export function NormalizationMenu(props: Props) {
- {SCALE_LABEL}}
- >
- {
- if (mode === NormalizationMode.Scale) {
- setOptions((prevOptions) => ({
- ...prevOptions,
- baselineScale: e.target.valueAsNumber,
- }));
- }
- }}
- disabled={mode === NormalizationMode.Time}
- />
-
+ data-test-subj="profilingNormalizationMenuFieldNumber"
+ id={baselineScaleFactorInputId}
+ value={baseline}
+ onChange={(e) => {
+ if (mode === NormalizationMode.Scale) {
+ setOptions((prevOptions) => ({
+ ...prevOptions,
+ baselineScale: e.target.valueAsNumber,
+ }));
+ }
+ }}
+ disabled={mode === NormalizationMode.Time}
+ />
@@ -216,26 +212,22 @@ export function NormalizationMenu(props: Props) {
- {SCALE_LABEL}}
- >
- {
- if (mode === NormalizationMode.Scale) {
- setOptions((prevOptions) => ({
- ...prevOptions,
- comparisonScale: e.target.valueAsNumber,
- }));
- }
- }}
- disabled={mode === NormalizationMode.Time}
- />
-
+ data-test-subj="profilingNormalizationMenuFieldNumber"
+ id={comparisonScaleFactorInputId}
+ value={comparison}
+ onChange={(e) => {
+ if (mode === NormalizationMode.Scale) {
+ setOptions((prevOptions) => ({
+ ...prevOptions,
+ comparisonScale: e.target.valueAsNumber,
+ }));
+ }
+ }}
+ disabled={mode === NormalizationMode.Time}
+ />
{
control={control}
rules={{ min: 0, required: true }}
render={({ field }) => (
-
@@ -95,20 +94,16 @@ export const CreateApiKeyForm = () => {
}
- >
-
-
+ type="number"
+ placeholder={i18n.translate(
+ 'xpack.searchPlayground.viewCode.apiForm.expire.placeholder',
+ {
+ defaultMessage: 'Set expiry in days',
+ }
+ )}
+ value={field.value || ''}
+ onChange={field.onChange}
+ />
)}
/>
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_form/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_form/index.tsx
index 997930926f26..293e24f53312 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_form/index.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/schedule_item_form/index.tsx
@@ -12,7 +12,6 @@ import {
EuiFieldNumber,
EuiFormRow,
EuiSelect,
- EuiFormControlLayout,
transparentize,
} from '@elastic/eui';
import { isEmpty } from 'lodash/fp';
@@ -51,37 +50,21 @@ const StyledLabelAppend = styled(EuiFlexItem)`
const StyledEuiFormRow = styled(EuiFormRow)`
max-width: none;
- .euiFormControlLayout {
- max-width: auto;
- width: auto;
- }
-
- .euiFormControlLayout__childrenWrapper > *:first-child {
- box-shadow: none;
- height: 38px;
- width: 100%;
- }
-
- .euiFormControlLayout__childrenWrapper > select {
- background-color: ${({ theme }) => transparentize(theme.eui.euiColorPrimary, 0.1)};
- color: ${({ theme }) => theme.eui.euiColorPrimary};
- }
-
- .euiFormControlLayout--group .euiFormControlLayout {
- min-width: 100px;
+ .euiFormControlLayout__append {
+ padding-inline: 0 !important;
}
.euiFormControlLayoutIcons {
color: ${({ theme }) => theme.eui.euiColorPrimary};
}
-
- .euiFormControlLayout:not(:first-child) {
- border-left: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
- }
`;
const MyEuiSelect = styled(EuiSelect)`
- width: auto;
+ min-width: 106px; // Preserve layout when disabled & dropdown arrow is not rendered
+ background: ${({ theme }) =>
+ transparentize(theme.eui.euiColorPrimary, 0.1)} !important; // Override focus states etc.
+ color: ${({ theme }) => theme.eui.euiColorPrimary};
+ box-shadow: none;
`;
const getNumberFromUserInput = (input: string, minimumValue = 0): number => {
@@ -173,10 +156,10 @@ export const ScheduleItem = ({
data-test-subj={dataTestSubj}
describedByIds={idAria ? [idAria] : undefined}
>
- timeTypes.includes(type.value))}
onChange={onChangeTimeType}
value={timeType}
@@ -185,17 +168,14 @@ export const ScheduleItem = ({
{...rest}
/>
}
- >
-
-
+ fullWidth
+ min={minimumValue}
+ max={Number.MAX_SAFE_INTEGER}
+ onChange={onChangeTimeVal}
+ value={timeVal}
+ data-test-subj="interval"
+ {...rest}
+ />
);
};
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/duration_input/index.tsx b/x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/duration_input/index.tsx
index 5163be74eed6..99222756bcf2 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/duration_input/index.tsx
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/duration_input/index.tsx
@@ -5,13 +5,7 @@
* 2.0.
*/
-import {
- EuiFieldNumber,
- EuiFormRow,
- EuiSelect,
- EuiFormControlLayout,
- transparentize,
-} from '@elastic/eui';
+import { EuiFieldNumber, EuiFormRow, EuiSelect, transparentize } from '@elastic/eui';
import React, { useCallback } from 'react';
import styled from 'styled-components';
@@ -37,39 +31,23 @@ const getNumberFromUserInput = (input: string, minimumValue = 0): number | undef
};
const StyledEuiFormRow = styled(EuiFormRow)`
- max-width: none;
+ max-width: 235px;
- .euiFormControlLayout {
- max-width: 235px;
- width: auto;
- }
-
- .euiFormControlLayout__childrenWrapper > *:first-child {
- box-shadow: none;
- height: 38px;
- width: 100%;
- }
-
- .euiFormControlLayout__childrenWrapper > select {
- background-color: ${({ theme }) => transparentize(theme.eui.euiColorPrimary, 0.1)};
- color: ${({ theme }) => theme.eui.euiColorPrimary};
- }
-
- .euiFormControlLayout--group .euiFormControlLayout {
- min-width: 100px;
+ .euiFormControlLayout__append {
+ padding-inline: 0 !important;
}
.euiFormControlLayoutIcons {
color: ${({ theme }) => theme.eui.euiColorPrimary};
}
-
- .euiFormControlLayout:not(:first-child) {
- border-left: 1px solid ${({ theme }) => theme.eui.euiColorLightShade};
- }
`;
const MyEuiSelect = styled(EuiSelect)`
- width: auto;
+ min-width: 106px; // Preserve layout when disabled & dropdown arrow is not rendered
+ box-shadow: none;
+ background: ${({ theme }) =>
+ transparentize(theme.eui.euiColorPrimary, 0.1)} !important; // Override focus states etc.
+ color: ${({ theme }) => theme.eui.euiColorPrimary};
`;
// This component is similar to the ScheduleItem component, but instead of combining the value
@@ -111,10 +89,9 @@ const DurationInputComponent: React.FC = ({
return (
- = ({
{...rest}
/>
}
- >
-
-
+ min={minimumValue}
+ max={Number.MAX_SAFE_INTEGER}
+ onChange={onChangeTimeVal}
+ value={durationValue}
+ data-test-subj="interval"
+ {...rest}
+ />
);
};
diff --git a/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_users_filter.tsx b/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_users_filter.tsx
index 68cbfbffeb26..c458beb4faef 100644
--- a/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_users_filter.tsx
+++ b/x-pack/plugins/security_solution/public/management/components/endpoint_response_actions_list/components/actions_log_users_filter.tsx
@@ -6,7 +6,7 @@
*/
import React, { memo, useCallback, useState, useEffect } from 'react';
-import { EuiFieldSearch, EuiFormControlLayout } from '@elastic/eui';
+import { EuiFieldSearch } from '@elastic/eui';
import { useTestIdGenerator } from '../../../hooks/use_test_id_generator';
import { FILTER_NAMES } from '../translations';
import { useActionHistoryUrlParams } from './use_action_history_url_params';
@@ -27,31 +27,36 @@ export const ActionsLogUsersFilter = memo(
const onChange = useCallback(
(e: React.ChangeEvent) => {
+ const { value } = e.target;
setSearchValue(e.target.value);
+
+ if (!value) {
+ onChangeUsersFilter([]);
+ if (!isFlyout) {
+ setUrlUsersFilters('');
+ }
+ }
},
- [setSearchValue]
+ [setSearchValue, isFlyout, setUrlUsersFilters, onChangeUsersFilter]
);
- const onSearch = useCallback(() => {
- const userIds = searchValue.split(',').reduce((acc, curr) => {
- if (curr.trim() !== '') {
- acc.push(curr.trim());
- }
- return acc;
- }, []);
- onChangeUsersFilter(userIds);
- if (!isFlyout) {
- setUrlUsersFilters(userIds.join(','));
- }
- }, [isFlyout, onChangeUsersFilter, searchValue, setUrlUsersFilters]);
+ const onSearch = useCallback(
+ (onSearchValue: string) => {
+ if (!onSearchValue) return;
- const onClear = useCallback(() => {
- setSearchValue('');
- onChangeUsersFilter([]);
- if (!isFlyout) {
- setUrlUsersFilters('');
- }
- }, [isFlyout, onChangeUsersFilter, setUrlUsersFilters, setSearchValue]);
+ const userIds = searchValue.split(',').reduce((acc, curr) => {
+ if (curr.trim() !== '') {
+ acc.push(curr.trim());
+ }
+ return acc;
+ }, []);
+ onChangeUsersFilter(userIds);
+ if (!isFlyout) {
+ setUrlUsersFilters(userIds.join(','));
+ }
+ },
+ [isFlyout, onChangeUsersFilter, searchValue, setUrlUsersFilters]
+ );
// on load with users in urlParams, set the search value
useEffect(() => {
@@ -63,17 +68,15 @@ export const ActionsLogUsersFilter = memo(
}, []);
return (
-
-
-
+
);
}
);
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/recurrence_scheduler/custom_recurrence_scheduler.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/recurrence_scheduler/custom_recurrence_scheduler.tsx
index 2136525c028b..1138463c713a 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/recurrence_scheduler/custom_recurrence_scheduler.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_snooze/recurrence_scheduler/custom_recurrence_scheduler.tsx
@@ -5,14 +5,7 @@
* 2.0.
*/
-import {
- EuiButtonGroup,
- EuiFormControlLayout,
- EuiFormRow,
- EuiSelect,
- EuiFlexGroup,
- EuiFlexItem,
-} from '@elastic/eui';
+import { EuiButtonGroup, EuiFormRow, EuiSelect, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import deepEqual from 'fast-deep-equal';
import { Moment } from 'moment';
@@ -127,11 +120,11 @@ export const CustomRecurrenceScheduler: React.FC
display="columnCompressed"
data-test-subj="customRecurrenceScheduler"
fullWidth
- label=" "
+ hasEmptyLabelSpace
>
-
defaultMessage: 'Every',
}
)}
- >
- setInterval(Number(value))}
- />
-
+ data-test-subj="customRecurrenceSchedulerInterval"
+ min={intervalMin}
+ value={interval}
+ onChange={(value) => setInterval(Number(value))}
+ />
= ({
)}
{recurrenceEnds === 'afterx' && (
-
-
+ = ({
values: { occurrences },
}
)}
- >
- setOccurrrences(Number(value))}
- />
-
+ min={1}
+ value={occurrences}
+ onChange={(value) => setOccurrrences(Number(value))}
+ />
)}