[Emotion] Convert EuiFormRow (#7968)

elastic · Aug 19, 2024 · ef56556 · ef56556
1 parent da774cf
commit ef56556
Show file tree

Hide file tree

Showing 22 changed files with 569 additions and 511 deletions.
diff --git a/...s/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png b/...s/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Column_Layout.png
diff --git a/...s/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Inline_Layout.png b/...s/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Inline_Layout.png
diff --git a/...es/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png b/...es/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Column_Layout.png
diff --git a/...es/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Inline_Layout.png b/...es/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Inline_Layout.png
diff --git a/packages/eui/changelogs/upcoming/7968.md b/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
diff --git a/packages/eui/src-docs/src/views/color_picker/color_palette_display.js b/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}

diff --git a/packages/eui/src-docs/src/views/datagrid/toolbar/visibility.js b/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"

diff --git a/packages/eui/src-docs/src/views/form_compressed/form_compressed.js b/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"

diff --git a/packages/eui/src-docs/src/views/form_compressed/form_compressed_example.js b/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,

diff --git a/packages/eui/src-docs/src/views/form_compressed/form_horizontal.js b/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"

diff --git a/packages/eui/src-docs/src/views/selection_controls/switch_label.tsx b/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

diff --git a/packages/eui/src/components/form/_index.scss b/packages/eui/src/components/form/_index.scss
@@ -1,4 +1,3 @@
 @import 'checkbox/index';
-@import 'form_row/index';
 @import 'radio/index';
 @import 'switch/index';
diff --git a/...src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap b/...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

diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts b/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)}
       }
     `,