Merge branch 'main' into emotion/custom-controls

packages/eui/changelogs/upcoming/7968.md

@@ -0,0 +1,9 @@
+**Deprecations**
+
+- Deprecated `EuiFormRow`'s `columnCompressedSwitch` display prop. Use `columnCompressed` instead, which will automatically account for child `EuiSwitch`es
+- Deprecated `EuiFormRow`'s `rowCompressed` display prop. Use `row` instead for vertical forms, or `centerCompressed` for inline forms
+- (Styling) Updated `EuiFormRow`'s `hasEmptySpaceLabel` prop to no longer attempt to automatically align its content to a vertical center. Use the `display="center"` prop for that instead
+
+**CSS-in-JS conversions**
+
+- Converted `EuiFormRow` to Emotion

packages/eui/changelogs/upcoming/7970.md

@@ -0,0 +1,3 @@
+**Accessibility**
+
+- Updated the `aria-label` attribute for the `EuiFieldSearch` clear button

packages/eui/src-docs/src/views/color_picker/color_palette_display.js

@@ -188,7 +188,7 @@ export default () => {
                   Display <EuiCode>fixed</EuiCode>
                 </span>
               }
-              display="columnCompressedSwitch"
+              display="columnCompressed"
             >
               <EuiSwitch
                 checked={selectionType}

packages/eui/src-docs/src/views/datagrid/toolbar/visibility.js

@@ -194,7 +194,7 @@ const DataGrid = () => {
                 : undefined
             }
           >
-            <EuiFormRow display="rowCompressed" label="toolbarVisibility">
+            <EuiFormRow label="toolbarVisibility">
               <EuiButtonGroup
                 isFullWidth
                 buttonSize="compressed"

packages/eui/src-docs/src/views/form_compressed/form_compressed.js

@@ -74,15 +74,11 @@ export default () => {
   };
   return (
     <EuiPanel style={{ maxWidth: 300 }}>
-      <EuiFormRow
-        label="Text field"
-        helpText="I am some friendly help text."
-        display="rowCompressed"
-      >
+      <EuiFormRow label="Text field" helpText="I am some friendly help text.">
         <EuiFieldText name="first" isLoading compressed />
       </EuiFormRow>
 
-      <EuiFormRow label="Select" display="rowCompressed">
+      <EuiFormRow label="Select">
         <EuiSelect
           options={[
             { value: 'option_one', text: 'Option one' },
@@ -93,11 +89,11 @@ export default () => {
         />
       </EuiFormRow>
 
-      <EuiFormRow label="File picker" display="rowCompressed">
+      <EuiFormRow label="File picker">
         <EuiFilePicker compressed display="default" />
       </EuiFormRow>
 
-      <EuiFormRow label="Combobox" display="rowCompressed">
+      <EuiFormRow label="Combobox">
         <EuiComboBox
           options={[
             { label: 'Option one' },
@@ -112,7 +108,7 @@ export default () => {
         />
       </EuiFormRow>
 
-      <EuiFormRow label="Range" display="rowCompressed">
+      <EuiFormRow label="Range">
         <EuiRange
           min={0}
           max={100}
@@ -125,7 +121,7 @@ export default () => {
         />
       </EuiFormRow>
 
-      <EuiFormRow label="Switch" display="rowCompressed" hasChildLabel={false}>
+      <EuiFormRow label="Switch" hasChildLabel={false}>
         <EuiSwitch
           label="Setting name"
           name="switch"

packages/eui/src-docs/src/views/form_compressed/form_compressed_example.js

@@ -59,20 +59,16 @@ export const FormCompressedExample = {
       text: (
         <p>
           To use compressed forms, pass{' '}
-          <EuiCode language="js">display=&quot;rowCompressed&quot;</EuiCode> to
-          the EuiFormRows and <EuiCode language="js">compressed=true</EuiCode>{' '}
-          to the form controls themselves.
+          <EuiCode language="js">{'compressed={true}'}</EuiCode> to all form
+          controls.
         </p>
       ),
       props: {
         EuiFormRow,
       },
       demo: <FormCompressed />,
       snippet: [
-        `<EuiFormRow
-  label="Text field"
-  display="rowCompressed"
->
+        `<EuiFormRow label="Text field">
   <EuiFieldText compressed />
 </EuiFormRow>`,
       ],
@@ -86,21 +82,12 @@ export const FormCompressedExample = {
         },
       ],
       text: (
-        <Fragment>
-          <p>
-            Editor-style controls can be displayed in a two column layout for
-            even better use of limited space, just pass{' '}
-            <EuiCode language="js">
-              display=&quot;columnCompressed&quot;
-            </EuiCode>{' '}
-            to align the labels and inputs side by side.
-          </p>
-          <p>
-            <strong>EuiSwitches</strong> are a special case in which so you must
-            pass <EuiCode language="js">{'"columnCompressedSwitch"'}</EuiCode>{' '}
-            to the EuiFormRow as the display property.
-          </p>
-        </Fragment>
+        <p>
+          Editor-style controls can be displayed in a two column layout for even
+          better use of limited space, just pass{' '}
+          <EuiCode language="js">display=&quot;columnCompressed&quot;</EuiCode>{' '}
+          to align the labels and inputs side by side.
+        </p>
       ),
       props: {
         EuiFormRow,

packages/eui/src-docs/src/views/form_compressed/form_horizontal.js

@@ -82,7 +82,7 @@ export default () => {
         />
       </EuiFormRow>
 
-      <EuiFormRow display="columnCompressedSwitch" label="Switch">
+      <EuiFormRow display="columnCompressed" label="Switch">
         <EuiSwitch
           showLabel={false}
           label="Switch"

packages/eui/src-docs/src/views/selection_controls/switch_label.tsx

@@ -22,7 +22,7 @@ export default () => {
 
   return (
     <Fragment>
-      <EuiFormRow display="columnCompressedSwitch" label="Autoscaling">
+      <EuiFormRow display="columnCompressed" label="Autoscaling">
         <EuiSwitch
           showLabel={false}
           label="Autoscaling"
@@ -32,7 +32,7 @@ export default () => {
         />
       </EuiFormRow>
       <EuiFormRow
-        display="columnCompressedSwitch"
+        display="columnCompressed"
         label={<span id={toggleTextSwitchId}>Show something</span>}
       >
         <EuiSwitch

packages/eui/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap

@@ -18,7 +18,7 @@ exports[`EuiDescribedFormGroup props description is not rendered when it's not p
     class="euiFlexItem euiDescribedFormGroup__fields emotion-euiFlexItem-grow-1-euiDescribedFormGroup__fields"
   >
     <div
-      class="euiFormRow"
+      class="euiFormRow emotion-euiFormRow"
       id="generated-id-row"
     >
       <div
@@ -58,7 +58,7 @@ exports[`EuiDescribedFormGroup props fullWidth is rendered 1`] = `
     class="euiFlexItem euiDescribedFormGroup__fields emotion-euiFlexItem-grow-1-euiDescribedFormGroup__fields"
   >
     <div
-      class="euiFormRow euiFormRow--fullWidth"
+      class="euiFormRow emotion-euiFormRow-fullWidth"
       id="generated-id-row"
     >
       <div
@@ -98,7 +98,7 @@ exports[`EuiDescribedFormGroup props gutterSize is rendered 1`] = `
     class="euiFlexItem euiDescribedFormGroup__fields emotion-euiFlexItem-grow-1-euiDescribedFormGroup__fields"
   >
     <div
-      class="euiFormRow"
+      class="euiFormRow emotion-euiFormRow"
       id="generated-id-row"
     >
       <div
@@ -138,7 +138,7 @@ exports[`EuiDescribedFormGroup props props for the flex item containers are pass
     class="euiFlexItem euiDescribedFormGroup__fields emotion-euiFlexItem-grow-1-euiDescribedFormGroup__fields"
   >
     <div
-      class="euiFormRow"
+      class="euiFormRow emotion-euiFormRow"
       id="generated-id-row"
     >
       <div
@@ -178,7 +178,7 @@ exports[`EuiDescribedFormGroup props third is rendered 1`] = `
     class="euiFlexItem euiDescribedFormGroup__fields emotion-euiFlexItem-grow-2-euiDescribedFormGroup__fields"
   >
     <div
-      class="euiFormRow euiFormRow--fullWidth"
+      class="euiFormRow emotion-euiFormRow-fullWidth"
       id="generated-id-row"
     >
       <div
@@ -218,7 +218,7 @@ exports[`EuiDescribedFormGroup props titleSize is rendered 1`] = `
     class="euiFlexItem euiDescribedFormGroup__fields emotion-euiFlexItem-grow-1-euiDescribedFormGroup__fields"
   >
     <div
-      class="euiFormRow"
+      class="euiFormRow emotion-euiFormRow"
       id="generated-id-row"
     >
       <div
@@ -260,7 +260,7 @@ exports[`EuiDescribedFormGroup renders 1`] = `
     class="euiFlexItem euiDescribedFormGroup__fields emotion-euiFlexItem-grow-1-euiDescribedFormGroup__fields"
   >
     <div
-      class="euiFormRow"
+      class="euiFormRow emotion-euiFormRow"
       id="generated-id-row"
     >
       <div
@@ -300,7 +300,7 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = `
     class="euiFlexItem euiDescribedFormGroup__fields emotion-euiFlexItem-grow-1-euiDescribedFormGroup__fields"
   >
     <div
-      class="euiFormRow euiFormRow--hasLabel"
+      class="euiFormRow euiFormRow--hasLabel emotion-euiFormRow"
       id="generated-id-row"
     >
       <div

packages/eui/src/components/form/field_search/field_search.tsx

@@ -9,13 +9,14 @@
 import React, { Component, InputHTMLAttributes, KeyboardEvent } from 'react';
 import classNames from 'classnames';
 
-import { Browser } from '../../../services/browser';
-import { CommonProps } from '../../common';
 import {
   keys,
   withEuiStylesMemoizer,
   WithEuiStylesMemoizerProps,
 } from '../../../services';
+import { Browser } from '../../../services/browser';
+import { CommonProps } from '../../common';
+import { EuiI18n } from '../../i18n';
 
 import {
   EuiFormControlLayout,
@@ -256,36 +257,47 @@ export class EuiFieldSearchClass extends Component<
     ];
 
     return (
-      <EuiFormControlLayout
-        icon="search"
-        fullWidth={fullWidth}
-        isLoading={isLoading}
-        isInvalid={isInvalid}
-        isDisabled={disabled}
-        clear={
-          isClearable
-            ? { onClick: this.onClear, 'data-test-subj': 'clearSearchButton' }
-            : undefined
-        }
-        compressed={compressed}
-        append={append}
-        prepend={prepend}
+      <EuiI18n
+        token="euiFieldSearch.clearSearchButtonLabel"
+        default="Clear search input"
       >
-        <EuiValidatableControl isInvalid={isInvalid}>
-          <input
-            type="search"
-            id={id}
-            name={name}
-            placeholder={placeholder}
-            className={classes}
-            css={cssStyles}
-            onKeyUp={(e) => this.onKeyUp(e, incremental, onSearch)}
-            disabled={disabled}
-            ref={this.setRef}
-            {...rest}
-          />
-        </EuiValidatableControl>
-      </EuiFormControlLayout>
+        {(clearSearchButtonLabel: string) => (
+          <EuiFormControlLayout
+            icon="search"
+            fullWidth={fullWidth}
+            isLoading={isLoading}
+            isInvalid={isInvalid}
+            isDisabled={disabled}
+            clear={
+              isClearable
+                ? {
+                    onClick: this.onClear,
+                    'aria-label': clearSearchButtonLabel,
+                    'data-test-subj': 'clearSearchButton',
+                  }
+                : undefined
+            }
+            compressed={compressed}
+            append={append}
+            prepend={prepend}
+          >
+            <EuiValidatableControl isInvalid={isInvalid}>
+              <input
+                type="search"
+                id={id}
+                name={name}
+                placeholder={placeholder}
+                className={classes}
+                css={cssStyles}
+                onKeyUp={(e) => this.onKeyUp(e, incremental, onSearch)}
+                disabled={disabled}
+                ref={this.setRef}
+                {...rest}
+              />
+            </EuiValidatableControl>
+          </EuiFormControlLayout>
+        )}
+      </EuiI18n>
     );
   }
 }

packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts

@@ -126,6 +126,8 @@ export const euiFormControlLayoutSideNodeStyles = (
       ${text} {
         /* Override .euiFormLabel CSS */
         cursor: default;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
 
       /* Account for button padding when spacing children */
@@ -152,6 +154,7 @@ export const euiFormControlLayoutSideNodeStyles = (
       }
 
       .euiButtonIcon {
+        flex-shrink: 0;
         ${logicalCSS('width', euiTheme.size.xl)}
       }
     `,
@@ -166,6 +169,7 @@ export const euiFormControlLayoutSideNodeStyles = (
       }
 
       .euiButtonIcon {
+        flex-shrink: 0;
         ${logicalCSS('width', euiTheme.size.xl)}
       }
     `,