[Emotion] Convert EuiSelectable (#7940)

packages/eui/changelogs/upcoming/7940.md

@@ -0,0 +1,5 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiSelectable` to Emotion
+  - Removed `$euiSelectableListItemBorder`
+  - Removed `$euiSelectableListItemPadding`

packages/eui/src/components/selectable/__snapshots__/selectable.test.tsx.snap

@@ -2,17 +2,17 @@
 
 exports[`EuiSelectable custom options with data 1`] = `
 <div
-  class="euiSelectable"
+  class="euiSelectable emotion-euiSelectable"
 >
   <div
-    class="euiSelectableList"
+    class="euiSelectableList emotion-euiSelectableList"
     data-test-subj="euiSelectableList"
   >
     <div
       data-eui="EuiAutoSizer"
     >
       <div
-        class="euiSelectableList__list"
+        class="euiSelectableList__list emotion-euiSelectableList__list"
         style="position: relative; height: 96px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
         tabindex="-1"
       >
@@ -28,21 +28,21 @@ exports[`EuiSelectable custom options with data 1`] = `
             aria-posinset="1"
             aria-selected="false"
             aria-setsize="3"
-            class="euiSelectableListItem euiSelectableListItem--paddingSmall"
+            class="euiSelectableListItem emotion-euiSelectableListItem-s"
             id="generated-id_listbox_option-0"
             role="option"
             style="position: absolute; left: 0px; top: 0px; height: 32px; width: 100%;"
             title="Titan"
           >
             <span
-              class="euiSelectableListItem__content"
+              class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
             >
               <span
-                class="euiSelectableListItem__icon"
+                class="euiSelectableListItem__icon emotion-euiSelectableListItem__prepend"
                 data-euiicon-type="empty"
               />
               <span
-                class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
+                class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
               >
                 <span>
                   VI
@@ -57,21 +57,21 @@ exports[`EuiSelectable custom options with data 1`] = `
             aria-posinset="2"
             aria-selected="false"
             aria-setsize="3"
-            class="euiSelectableListItem euiSelectableListItem--paddingSmall"
+            class="euiSelectableListItem emotion-euiSelectableListItem-s"
             id="generated-id_listbox_option-1"
             role="option"
             style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
             title="Enceladus"
           >
             <span
-              class="euiSelectableListItem__content"
+              class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
             >
               <span
-                class="euiSelectableListItem__icon"
+                class="euiSelectableListItem__icon emotion-euiSelectableListItem__prepend"
                 data-euiicon-type="empty"
               />
               <span
-                class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
+                class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
               >
                 <span>
                   II
@@ -86,21 +86,21 @@ exports[`EuiSelectable custom options with data 1`] = `
             aria-posinset="3"
             aria-selected="false"
             aria-setsize="3"
-            class="euiSelectableListItem euiSelectableListItem--paddingSmall"
+            class="euiSelectableListItem emotion-euiSelectableListItem-s"
             id="generated-id_listbox_option-2"
             role="option"
             style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
             title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
           >
             <span
-              class="euiSelectableListItem__content"
+              class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
             >
               <span
-                class="euiSelectableListItem__icon"
+                class="euiSelectableListItem__icon emotion-euiSelectableListItem__prepend"
                 data-euiicon-type="empty"
               />
               <span
-                class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
+                class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
               >
                 <span>
                   XVII
@@ -119,10 +119,10 @@ exports[`EuiSelectable custom options with data 1`] = `
 
 exports[`EuiSelectable errorMessage prop can render an element as the message 1`] = `
 <div
-  class="euiSelectable"
+  class="euiSelectable emotion-euiSelectable"
 >
   <div
-    class="euiText euiSelectableMessage emotion-euiText-xs-euiTextColor-subdued"
+    class="euiText euiSelectableMessage emotion-euiText-xs-euiTextColor-subdued-euiSelectableMessage"
     data-test-subj="euiSelectableMessage"
     id="generated-id_messageContent"
   >
@@ -135,17 +135,17 @@ exports[`EuiSelectable errorMessage prop can render an element as the message 1`
 
 exports[`EuiSelectable errorMessage prop does not render the message when not defined 1`] = `
 <div
-  class="euiSelectable"
+  class="euiSelectable emotion-euiSelectable"
 >
   <div
-    class="euiSelectableList"
+    class="euiSelectableList emotion-euiSelectableList"
     data-test-subj="euiSelectableList"
   >
     <div
       data-eui="EuiAutoSizer"
     >
       <div
-        class="euiSelectableList__list"
+        class="euiSelectableList__list emotion-euiSelectableList__list"
         style="position: relative; height: 96px; width: 600px; overflow: auto; will-change: transform; direction: ltr;"
         tabindex="-1"
       >
@@ -161,22 +161,22 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
             aria-posinset="1"
             aria-selected="false"
             aria-setsize="3"
-            class="euiSelectableListItem euiSelectableListItem--paddingSmall"
+            class="euiSelectableListItem emotion-euiSelectableListItem-s"
             data-test-subj="titanOption"
             id="generated-id_listbox_option-0"
             role="option"
             style="position: absolute; left: 0px; top: 0px; height: 32px; width: 100%;"
             title="Titan"
           >
             <span
-              class="euiSelectableListItem__content"
+              class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
             >
               <span
-                class="euiSelectableListItem__icon"
+                class="euiSelectableListItem__icon emotion-euiSelectableListItem__prepend"
                 data-euiicon-type="empty"
               />
               <span
-                class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
+                class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
               >
                 Titan
               </span>
@@ -187,21 +187,21 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
             aria-posinset="2"
             aria-selected="false"
             aria-setsize="3"
-            class="euiSelectableListItem euiSelectableListItem--paddingSmall"
+            class="euiSelectableListItem emotion-euiSelectableListItem-s"
             id="generated-id_listbox_option-1"
             role="option"
             style="position: absolute; left: 0px; top: 32px; height: 32px; width: 100%;"
             title="Enceladus"
           >
             <span
-              class="euiSelectableListItem__content"
+              class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
             >
               <span
-                class="euiSelectableListItem__icon"
+                class="euiSelectableListItem__icon emotion-euiSelectableListItem__prepend"
                 data-euiicon-type="empty"
               />
               <span
-                class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
+                class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
               >
                 Enceladus
               </span>
@@ -212,21 +212,21 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
             aria-posinset="3"
             aria-selected="false"
             aria-setsize="3"
-            class="euiSelectableListItem euiSelectableListItem--paddingSmall"
+            class="euiSelectableListItem emotion-euiSelectableListItem-s"
             id="generated-id_listbox_option-2"
             role="option"
             style="position: absolute; left: 0px; top: 64px; height: 32px; width: 100%;"
             title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
           >
             <span
-              class="euiSelectableListItem__content"
+              class="euiSelectableListItem__content emotion-euiSelectableListItem__content"
             >
               <span
-                class="euiSelectableListItem__icon"
+                class="euiSelectableListItem__icon emotion-euiSelectableListItem__prepend"
                 data-euiicon-type="empty"
               />
               <span
-                class="euiSelectableListItem__text euiSelectableListItem__text--truncate"
+                class="euiSelectableListItem__text emotion-euiSelectableListItem__text-truncate"
               >
                 Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
               </span>
@@ -241,10 +241,10 @@ exports[`EuiSelectable errorMessage prop does not render the message when not de
 
 exports[`EuiSelectable errorMessage prop does renders the message when defined 1`] = `
 <div
-  class="euiSelectable"
+  class="euiSelectable emotion-euiSelectable"
 >
   <div
-    class="euiText euiSelectableMessage emotion-euiText-xs-euiTextColor-subdued"
+    class="euiText euiSelectableMessage emotion-euiText-xs-euiTextColor-subdued-euiSelectableMessage"
     data-test-subj="euiSelectableMessage"
     id="generated-id_messageContent"
   >
@@ -257,63 +257,63 @@ exports[`EuiSelectable errorMessage prop does renders the message when defined 1
 
 exports[`EuiSelectable is rendered 1`] = `
 <div
-  class="euiSelectable testClass1 testClass2 emotion-euiTestCss"
+  class="euiSelectable testClass1 testClass2 emotion-euiSelectable-euiTestCss"
   data-test-subj="test subject string"
   id="testId"
 />
 `;
 
 exports[`EuiSelectable props allowExclusions 1`] = `
 <div
-  class="euiSelectable"
+  class="euiSelectable emotion-euiSelectable"
 />
 `;
 
 exports[`EuiSelectable props height can be forced 1`] = `
 <div
-  class="euiSelectable"
+  class="euiSelectable emotion-euiSelectable"
 />
 `;
 
 exports[`EuiSelectable props height can be full 1`] = `
 <div
-  class="euiSelectable euiSelectable-fullHeight"
+  class="euiSelectable emotion-euiSelectable-fullHeight"
 />
 `;
 
 exports[`EuiSelectable props isLoading 1`] = `
 <div
-  class="euiSelectable"
+  class="euiSelectable emotion-euiSelectable"
 />
 `;
 
 exports[`EuiSelectable props listProps 1`] = `
 <div
-  class="euiSelectable"
+  class="euiSelectable emotion-euiSelectable"
 />
 `;
 
 exports[`EuiSelectable props renderOption 1`] = `
 <div
-  class="euiSelectable"
+  class="euiSelectable emotion-euiSelectable"
 />
 `;
 
 exports[`EuiSelectable props searchable 1`] = `
 <div
-  class="euiSelectable"
+  class="euiSelectable emotion-euiSelectable"
 />
 `;
 
 exports[`EuiSelectable props singleSelection 1`] = `
 <div
-  class="euiSelectable"
+  class="euiSelectable emotion-euiSelectable"
 />
 `;
 
 exports[`EuiSelectable search value supports inheriting initialSearchValue from searchProps.defaultValue 1`] = `
 <div
-  class="euiSelectable"
+  class="euiSelectable emotion-euiSelectable"
 >
   <div
     class="emotion-euiScreenReaderOnly"
@@ -338,7 +338,7 @@ exports[`EuiSelectable search value supports inheriting initialSearchValue from
     />
   </div>
   <div
-    class="euiText euiSelectableMessage emotion-euiText-xs-euiTextColor-subdued"
+    class="euiText euiSelectableMessage emotion-euiText-xs-euiTextColor-subdued-euiSelectableMessage"
     data-test-subj="euiSelectableMessage"
     id="generated-id_messageContent"
   >
@@ -407,43 +407,3 @@ exports[`EuiSelectable search value supports inheriting initialSearchValue from
   </p>
 </div>
 `;
-
-exports[`EuiSelectable should not reset the activeOptionIndex nor isFocused when EuiSelectable is blurred in favour of its search/listbox 1`] = `
-{
-  "activeOptionIndex": 0,
-  "isFocused": true,
-  "searchValue": "",
-  "visibleOptions": [
-    {
-      "data-test-subj": "titanOption",
-      "label": "Titan",
-    },
-    {
-      "label": "Enceladus",
-    },
-    {
-      "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
-    },
-  ],
-}
-`;
-
-exports[`EuiSelectable should not reset the activeOptionIndex nor isFocused when EuiSelectable is blurred in favour of its search/listbox 2`] = `
-{
-  "activeOptionIndex": 0,
-  "isFocused": true,
-  "searchValue": "",
-  "visibleOptions": [
-    {
-      "data-test-subj": "titanOption",
-      "label": "Titan",
-    },
-    {
-      "label": "Enceladus",
-    },
-    {
-      "label": "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
-    },
-  ],
-}
-`;

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

@@ -1,5 +1 @@
-@import './selectable';
-@import './selectable_list/index';
-@import './selectable_message/index';
-@import './selectable_search/index';
 @import './selectable_templates/index';