[8.x] Fix various EuiFormControlLayout usages (#192779) (#193925)

# Backport This will backport the following commits from `main` to `8.x`: - [Fix various EuiFormControlLayout usages (#192779)](#192779)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Cee Chen <[email protected]>
elastic · Sep 24, 2024 · 0a6ce8b · 0a6ce8b
1 parent 1eff7df
commit 0a6ce8b
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