[8.x] Fix various EuiFormControlLayout usages (elastic#192779) (elast…

…ic#193925) # Backport This will backport the following commits from `main` to `8.x`: - [Fix various EuiFormControlLayout usages (elastic#192779)](elastic#192779)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Cee Chen <[email protected]>
neptunian · Oct 1, 2024 · 422c807 · 422c807
1 parent 974262e
commit 422c807
Show file tree

Hide file tree

Showing 18 changed files with 321 additions and 475 deletions.
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
@@ -17,7 +17,6 @@ import {
  EuiFlyoutBody,
  EuiFlyoutFooter,
  EuiFlyoutHeader,
- EuiFormControlLayout,
  EuiFormRow,
  EuiSwitch,
  EuiTextArea,
@@ -128,48 +127,46 @@ export const SavedBookEditor = ({
  </EuiTitle>
  </EuiFlyoutHeader>
  <EuiFlyoutBody>
- <EuiFormControlLayout>
- <EuiFormRow
- label={i18n.translate('embeddableExamples.savedBook.editor.authorLabel', {
- defaultMessage: 'Author',
- })}
- >
- <EuiFieldText
- value={authorName ?? ''}
- onChange={(e) => attributesManager.authorName.next(e.target.value)}
- />
- </EuiFormRow>
- <EuiFormRow
- label={i18n.translate('embeddableExamples.savedBook.editor.titleLabel', {
- defaultMessage: 'Title',
- })}
- >
- <EuiFieldText
- value={bookTitle ?? ''}
- onChange={(e) => attributesManager.bookTitle.next(e.target.value)}
- />
- </EuiFormRow>
- <EuiFormRow
- label={i18n.translate('embeddableExamples.savedBook.editor.pagesLabel', {
- defaultMessage: 'Number of pages',
- })}
- >
- <EuiFieldNumber
- value={numberOfPages ?? ''}
- onChange={(e) => attributesManager.numberOfPages.next(+e.target.value)}
- />
- </EuiFormRow>
- <EuiFormRow
- label={i18n.translate('embeddableExamples.savedBook.editor.synopsisLabel', {
- defaultMessage: 'Synopsis',
- })}
- >
- <EuiTextArea
- value={synopsis ?? ''}
- onChange={(e) => attributesManager.bookSynopsis.next(e.target.value)}
- />
- </EuiFormRow>
- </EuiFormControlLayout>
+ <EuiFormRow
+ label={i18n.translate('embeddableExamples.savedBook.editor.authorLabel', {
+ defaultMessage: 'Author',
+ })}
+ >
+ <EuiFieldText
+ value={authorName ?? ''}
+ onChange={(e) => attributesManager.authorName.next(e.target.value)}
+ />
+ </EuiFormRow>
+ <EuiFormRow
+ label={i18n.translate('embeddableExamples.savedBook.editor.titleLabel', {
+ defaultMessage: 'Title',
+ })}
+ >
+ <EuiFieldText
+ value={bookTitle ?? ''}
+ onChange={(e) => attributesManager.bookTitle.next(e.target.value)}
+ />
+ </EuiFormRow>
+ <EuiFormRow
+ label={i18n.translate('embeddableExamples.savedBook.editor.pagesLabel', {
+ defaultMessage: 'Number of pages',
+ })}
+ >
+ <EuiFieldNumber
+ value={numberOfPages ?? ''}
+ onChange={(e) => attributesManager.numberOfPages.next(+e.target.value)}
+ />
+ </EuiFormRow>
+ <EuiFormRow
+ label={i18n.translate('embeddableExamples.savedBook.editor.synopsisLabel', {
+ defaultMessage: 'Synopsis',
+ })}
+ >
+ <EuiTextArea
+ value={synopsis ?? ''}
+ onChange={(e) => attributesManager.bookSynopsis.next(e.target.value)}
+ />
+ </EuiFormRow>
  </EuiFlyoutBody>
  <EuiFlyoutFooter>
  <EuiFlexGroup justifyContent="spaceBetween">

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
@@ -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/...nt-annotation-components/components/annotation_editor_controls/range_annotation_panel.tsx b/...nt-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 (
- <EuiFormRow display="rowCompressed" fullWidth label={label} className="lnsRowCompressedMargin">
- {prependLabel ? (
- <EuiFormControlLayout
- fullWidth
- className="lnsConfigPanelNoPadding"
- prepend={
- <EuiFormLabel className="lnsConfigPanelDate__label">{prependLabel}</EuiFormLabel>
- }
- >
- <EuiDatePicker
- calendarClassName={calendarClassName}
- fullWidth
- showTimeSelect
- selected={value}
- onChange={onChange}
- dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
- data-test-subj={dataTestSubj}
- />
- </EuiFormControlLayout>
- ) : (
- <EuiDatePicker
- calendarClassName={calendarClassName}
- fullWidth
- showTimeSelect
- selected={value}
- onChange={onChange}
- dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
- data-test-subj={dataTestSubj}
- />
- )}
+ <EuiFormRow
+ display="rowCompressed"
+ fullWidth
+ label={label}
+ className="lnsConfigPanelAnnotations__date lnsRowCompressedMargin"
+ >
+ <EuiDatePicker
+ compressed
+ calendarClassName={calendarClassName}
+ fullWidth
+ showTimeSelect
+ selected={value}
+ onChange={onChange}
+ dateFormat="MMM D, YYYY @ HH:mm:ss.SSS"
+ data-test-subj={dataTestSubj}
+ prepend={prependLabel}
+ />
  </EuiFormRow>
  );
 };
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
@@ -13,7 +13,6 @@ import {
  EuiContextMenuPanel,
  EuiCopy,
  EuiFieldText,
- EuiFormControlLayout,
  EuiHorizontalRule,
  EuiPopover,
  EuiSpacer,
@@ -29,12 +28,24 @@ export interface TokenFieldProps extends Omit<EuiFieldTextProps, 'append'> {
  value: string;
 }
 
-export const TokenField: FunctionComponent<TokenFieldProps> = (props) => {
+export const TokenField: FunctionComponent<TokenFieldProps> = ({ value, ...props }) => {
  return (
- <EuiFormControlLayout
+ <EuiFieldText
+ data-test-subj="apiKeyTokenField"
+ aria-label={i18n.translate('xpack.security.copyTokenField.tokenLabel', {
+ defaultMessage: 'Token',
+ })}
+ value={value}
+ style={{
+ fontFamily: euiThemeVars.euiCodeFontFamily,
+ fontSize: euiThemeVars.euiFontSizeXS,
+ backgroundColor: 'transparent',
+ }}
+ onFocus={(event) => event.currentTarget.select()}
+ readOnly
  {...props}
  append={
- <EuiCopy textToCopy={props.value}>
+ <EuiCopy textToCopy={value}>
  {(copyText) => (
  <EuiButtonIcon
  aria-label={i18n.translate('xpack.security.copyTokenField.copyButton', {
@@ -48,25 +59,7 @@ export const TokenField: FunctionComponent<TokenFieldProps> = (props) => {
  )}
  </EuiCopy>
  }
- style={{ backgroundColor: 'transparent' }}
- readOnly
- >
- <EuiFieldText
- data-test-subj="apiKeyTokenField"
- controlOnly
- aria-label={i18n.translate('xpack.security.copyTokenField.tokenLabel', {
- defaultMessage: 'Token',
- })}
- value={props.value}
- style={{
- fontFamily: euiThemeVars.euiCodeFontFamily,
- fontSize: euiThemeVars.euiFontSizeXS,
- backgroundColor: 'transparent',
- }}
- onFocus={(event) => event.currentTarget.select()}
- readOnly
- />
- </EuiFormControlLayout>
+ />
  );
 };
 
@@ -118,7 +111,7 @@ export const SelectableTokenField: FunctionComponent<SelectableTokenFieldProps>
  closePopover={closePopover}
  >
  <EuiContextMenuPanel
- initialFocusedItemIndex={selectedIndex * 2}
+ initialFocusedItemIndex={selectedIndex}
  items={options.reduce<ReactElement[]>((items, option, i) => {
  items.push(
  <EuiContextMenuItem

diff --git a/..._content/components/search_index/crawler/domain_management/add_domain/add_domain_form.tsx b/..._content/components/search_index/crawler/domain_management/add_domain/add_domain_form.tsx
@@ -62,6 +62,7 @@ export const AddDomainForm: React.FC = () => {
  fullWidth
  >
  <EuiFieldText
+ controlOnly
  autoFocus
  value={addDomainFormInputValue}
  onChange={(e) => setAddDomainFormInputValue(e.target.value)}

diff --git a/...aps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap b/...aps/public/classes/styles/vector/components/symbol/__snapshots__/icon_select.test.js.snap