[Emotion] Convert EuiTextArea, EuiSelect, and EuiSuperSelect (#7812)

packages/eui/changelogs/upcoming/7812.md

@@ -0,0 +1,5 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiTextArea` to Emotion
+- Converted `EuiSelect` to Emotion
+- Converted `EuiSuperSelect` to Emotion

packages/eui/src/components/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap

@@ -17,7 +17,7 @@ exports[`EuiColorPalettePicker is rendered 1`] = `
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       />
@@ -56,7 +56,7 @@ exports[`EuiColorPalettePicker is rendered with a selected custom text 1`] = `
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       >
@@ -97,7 +97,7 @@ exports[`EuiColorPalettePicker is rendered with a selected fixed palette 1`] = `
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       >
@@ -166,7 +166,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette 1`]
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       >
@@ -215,7 +215,7 @@ exports[`EuiColorPalettePicker is rendered with a selected gradient palette with
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       >
@@ -264,7 +264,7 @@ exports[`EuiColorPalettePicker is rendered with the prop selectionDisplay set as
       <button
         aria-haspopup="listbox"
         aria-label="aria-label"
-        class="euiSuperSelectControl euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+        class="euiSuperSelectControl testClass1 testClass2 emotion-euiSuperSelect__control-euiTestCss"
         data-test-subj="test subject string"
         type="button"
       >
@@ -304,7 +304,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
     >
       <button
         aria-haspopup="listbox"
-        class="euiSuperSelectControl euiFormControlLayout--1icons euiSuperSelect--isOpen__button"
+        class="euiSuperSelectControl emotion-euiSuperSelect__control-open"
         data-test-subj="colorPalettePicker"
         type="button"
       >

packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap

@@ -94,7 +94,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             <select
               aria-describedby="generated-id generated-id"
               aria-label="Time tense"
-              class="euiSelect euiFormControlLayout--1icons euiSelect--compressed"
+              class="euiSelect emotion-euiSelect-compressed"
             >
               <option
                 value="last"
@@ -155,7 +155,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             <select
               aria-describedby="generated-id generated-id"
               aria-label="Time unit"
-              class="euiSelect euiFormControlLayout--1icons euiSelect--compressed"
+              class="euiSelect emotion-euiSelect-compressed"
             >
               <option
                 value="s"
@@ -372,7 +372,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             <select
               aria-describedby="generated-id generated-id"
               aria-label="Refresh interval units"
-              class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth euiSelect--compressed"
+              class="euiSelect emotion-euiSelect-compressed-fullWidth"
               data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
               disabled=""
             >

packages/eui/src/components/form/_index.scss

@@ -2,11 +2,6 @@
 @import 'described_form_group/index';
 @import 'file_picker/index';
 @import 'form';
-
-// Selects must come before form_control_layout for proper padding
-@import 'select/index';
-@import 'super_select/index';
-
 @import 'form_control_layout/index';
 @import 'form_error_text/index';
 @import 'form_fieldset/index';
@@ -15,4 +10,3 @@
 @import 'form_row/index';
 @import 'radio/index';
 @import 'switch/index';
-@import 'text_area/index';

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

@@ -11,7 +11,7 @@ exports[`EuiSelect is rendered 1`] = `
   <eui-validatable-control>
     <select
       aria-label="aria-label"
-      class="euiSelect euiFormControlLayout--1icons testClass1 testClass2 emotion-euiTestCss"
+      class="euiSelect testClass1 testClass2 emotion-euiSelect-euiTestCss"
       data-test-subj="test subject string"
       id="id"
       name="name"
@@ -29,7 +29,7 @@ exports[`EuiSelect props disabled options are rendered 1`] = `
 >
   <eui-validatable-control>
     <select
-      class="euiSelect euiFormControlLayout--1icons"
+      class="euiSelect emotion-euiSelect"
     >
       <option
         value="1"
@@ -56,7 +56,7 @@ exports[`EuiSelect props fullWidth is rendered 1`] = `
 >
   <eui-validatable-control>
     <select
-      class="euiSelect euiFormControlLayout--1icons euiSelect--fullWidth"
+      class="euiSelect emotion-euiSelect-fullWidth"
     />
   </eui-validatable-control>
 </eui-form-control-layout>
@@ -74,7 +74,7 @@ exports[`EuiSelect props isInvalid is rendered 1`] = `
     isinvalid="true"
   >
     <select
-      class="euiSelect euiFormControlLayout--2icons"
+      class="euiSelect emotion-euiSelect"
     />
   </eui-validatable-control>
 </eui-form-control-layout>
@@ -89,7 +89,7 @@ exports[`EuiSelect props isLoading is rendered 1`] = `
 >
   <eui-validatable-control>
     <select
-      class="euiSelect euiFormControlLayout--2icons euiSelect-isLoading"
+      class="euiSelect euiSelect-isLoading emotion-euiSelect"
     />
   </eui-validatable-control>
 </eui-form-control-layout>
@@ -104,7 +104,7 @@ exports[`EuiSelect props options are rendered 1`] = `
 >
   <eui-validatable-control>
     <select
-      class="euiSelect euiFormControlLayout--1icons"
+      class="euiSelect emotion-euiSelect"
     >
       <option
         value="1"
@@ -130,7 +130,7 @@ exports[`EuiSelect props value option is rendered 1`] = `
 >
   <eui-validatable-control>
     <select
-      class="euiSelect euiFormControlLayout--1icons"
+      class="euiSelect emotion-euiSelect"
     >
       <option
         value="1"

packages/eui/src/components/form/select/select.stories.tsx

@@ -20,6 +20,12 @@ import { EuiSelect, EuiSelectProps } from './select';
 const meta: Meta<EuiSelectProps> = {
   title: 'Forms/EuiSelect',
   component: EuiSelect,
+  parameters: {
+    controls: {
+      // Excude onMouseUp from controls, as it's not a terribly useful prop to document
+      exclude: ['onMouseUp'],
+    },
+  },
   argTypes: {
     append: {
       control: 'radio',
@@ -53,18 +59,13 @@ const meta: Meta<EuiSelectProps> = {
   },
 };
 // adding onChange for visibility
-enableFunctionToggleControls(meta, ['onChange', 'onMouseUp']);
+enableFunctionToggleControls(meta, ['onChange']);
 disableStorybookControls(meta, ['inputRef']);
 
 export default meta;
 type Story = StoryObj<EuiSelectProps>;
 
 export const Playground: Story = {
-  parameters: {
-    controls: {
-      exclude: ['onMouseUp'],
-    },
-  },
   args: {
     defaultValue: 'option-2',
     options: [

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

@@ -0,0 +1,67 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../services';
+import { euiFormControlStyles, euiFormVariables } from '../form.styles';
+
+export const euiSelectStyles = (euiThemeContext: UseEuiTheme) => {
+  const formStyles = euiFormControlStyles(euiThemeContext);
+  const formVariables = euiFormVariables(euiThemeContext);
+
+  return {
+    euiSelect: css`
+      appearance: none;
+      ${formStyles.shared}
+
+      &:invalid {
+        ${formStyles.invalid}
+      }
+
+      &:focus {
+        ${formStyles.focus}
+      }
+
+      &:disabled {
+        ${formStyles.disabled}
+      }
+
+      &[readOnly] {
+        ${formStyles.readOnly}
+      }
+
+      &:autofill {
+        ${formStyles.autoFill}
+      }
+    `,
+
+    // Skip the css() on the default height to avoid generating a className
+    uncompressed: formStyles.uncompressed,
+    compressed: css(formStyles.compressed),
+
+    // Skip the css() on the default width to avoid generating a className
+    formWidth: formStyles.formWidth,
+    fullWidth: css(formStyles.fullWidth),
+
+    // Layout modifiers
+    inGroup: css(formStyles.inGroup),
+
+    // Ensure text descenders don't get cut off
+    // by making line-height match the input height
+    lineHeight: {
+      removePadding: `padding-block: 0;`,
+      uncompressed: `line-height: ${formVariables.controlHeight};`,
+      compressed: `line-height: ${formVariables.controlCompressedHeight};`,
+      inGroup: {
+        uncompressed: `line-height: ${formVariables.controlLayoutGroupInputHeight}`,
+        compressed: `line-height: ${formVariables.controlLayoutGroupInputCompressedHeight}`,
+      },
+    },
+  };
+};

packages/eui/src/components/form/select/select.test.tsx

@@ -119,7 +119,7 @@ describe('EuiSelect', () => {
         >
            
         </option>
-`);
+      `);
     });
 
     it('can be reset to an empty initial selection', () => {
@@ -165,7 +165,7 @@ describe('EuiSelect', () => {
       );
 
       const select = container.querySelector('.euiSelect');
-      expect(select).toHaveClass('euiSelect--fullWidth');
+      expect(select!.className).toContain('fullWidth');
     });
   });
 });