Fix various EuiFormControlLayout usages (#192779)

## Summary This is a follow up to EUI's Emotion conversion of **EuiFormControlLayout/Delimited** (see #190752, elastic/eui#7954, and elastic/eui#7957). > [!note] > Please manually QA your team's affected form control(s) to confirm they still look and behave as expected and are non-broken. The EUI team is not familiar enough with each plugin's setups to pull down and QA this PR ourselves. While QA testing the upgrade, I noticed a few incorrect usages of **EuiFormControlLayout** but wanted to wait until after the upgrade to push out fixes (to prevent delaying the PR further). In general, here is EUI's [recommended usage of the component](https://eui.elastic.co/#/forms/form-controls#form-control-layout): - Where possible, **simply don't use it**. Almost all form controls are **already** automatically wrapped in any EuiFormControlLayout by default, and should accept a large majority of the props that the layout accepts. - If you **must** use it, set the `controlOnly` prop on the child input/control to avoid buggy styling (e.g. duplicate borders). - If you can't do either of the above for any reason (e.g. missing prop support), reach out to the EUI team to ask for your UX as a feature request! ### Checklist Delete any items that are not applicable to this PR. - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
elastic · Sep 24, 2024 · fd7b86e · fd7b86e
1 parent 4c3865d
commit fd7b86e
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