[Emotion] Convert EuiDroppable & EuiDraggable

src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap

@@ -80,20 +80,20 @@ exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar b
         class="euiDataGrid__controlScroll"
       >
         <div
-          class="euiDroppable euiDroppable--noGrow"
+          class="euiDroppable emotion-euiDroppable-noGrow"
           data-rfd-droppable-context-id="0"
           data-rfd-droppable-id="columnOrder"
           data-test-subj="droppable"
         >
           <div
-            class="euiDraggable euiDraggable--hasCustomDragHandle"
+            class="euiDraggable emotion-euiDraggable"
             data-rfd-draggable-context-id="0"
             data-rfd-draggable-id="columnA"
             data-test-subj="draggable"
             role="group"
           >
             <div
-              class="euiDataGridColumnSelector__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
+              class="euiDataGridColumnSelector__item euiDraggable__item emotion-euiDraggable__item"
               data-test-subj="dataGridColumnSelectorColumnItem-columnA"
             >
               <div
@@ -163,14 +163,14 @@ exports[`useDataGridColumnSelector columnSelector [React 17] renders a toolbar b
             </div>
           </div>
           <div
-            class="euiDraggable euiDraggable--hasCustomDragHandle"
+            class="euiDraggable emotion-euiDraggable"
             data-rfd-draggable-context-id="0"
             data-rfd-draggable-id="columnB"
             data-test-subj="draggable"
             role="group"
           >
             <div
-              class="euiDataGridColumnSelector__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
+              class="euiDataGridColumnSelector__item euiDraggable__item emotion-euiDraggable__item"
               data-test-subj="dataGridColumnSelectorColumnItem-columnB"
             >
               <div
@@ -375,20 +375,20 @@ exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar b
         class="euiDataGrid__controlScroll"
       >
         <div
-          class="euiDroppable euiDroppable--noGrow"
+          class="euiDroppable emotion-euiDroppable-noGrow"
           data-rfd-droppable-context-id=":r0:"
           data-rfd-droppable-id="columnOrder"
           data-test-subj="droppable"
         >
           <div
-            class="euiDraggable euiDraggable--hasCustomDragHandle"
+            class="euiDraggable emotion-euiDraggable"
             data-rfd-draggable-context-id=":r0:"
             data-rfd-draggable-id="columnA"
             data-test-subj="draggable"
             role="group"
           >
             <div
-              class="euiDataGridColumnSelector__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
+              class="euiDataGridColumnSelector__item euiDraggable__item emotion-euiDraggable__item"
               data-test-subj="dataGridColumnSelectorColumnItem-columnA"
             >
               <div
@@ -458,14 +458,14 @@ exports[`useDataGridColumnSelector columnSelector [React 18] renders a toolbar b
             </div>
           </div>
           <div
-            class="euiDraggable euiDraggable--hasCustomDragHandle"
+            class="euiDraggable emotion-euiDraggable"
             data-rfd-draggable-context-id=":r0:"
             data-rfd-draggable-id="columnB"
             data-test-subj="draggable"
             role="group"
           >
             <div
-              class="euiDataGridColumnSelector__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
+              class="euiDataGridColumnSelector__item euiDraggable__item emotion-euiDraggable__item"
               data-test-subj="dataGridColumnSelectorColumnItem-columnB"
             >
               <div

src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap

@@ -61,20 +61,20 @@ exports[`useDataGridColumnSorting columnSorting [React 17] renders a toolbar but
       role="region"
     >
       <div
-        class="euiDroppable euiDroppable--noGrow"
+        class="euiDroppable emotion-euiDroppable-noGrow"
         data-rfd-droppable-context-id="0"
         data-rfd-droppable-id="columnSorting"
         data-test-subj="droppable"
       >
         <div
-          class="euiDraggable euiDraggable--hasCustomDragHandle"
+          class="euiDraggable emotion-euiDraggable"
           data-rfd-draggable-context-id="0"
           data-rfd-draggable-id="columnA"
           data-test-subj="draggable"
           role="group"
         >
           <div
-            class="euiDataGridColumnSorting__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
+            class="euiDataGridColumnSorting__item euiDraggable__item emotion-euiDraggable__item"
           >
             <p
               class="emotion-euiScreenReaderOnly"
@@ -351,20 +351,20 @@ exports[`useDataGridColumnSorting columnSorting [React 18] renders a toolbar but
       role="region"
     >
       <div
-        class="euiDroppable euiDroppable--noGrow"
+        class="euiDroppable emotion-euiDroppable-noGrow"
         data-rfd-droppable-context-id=":r0:"
         data-rfd-droppable-id="columnSorting"
         data-test-subj="droppable"
       >
         <div
-          class="euiDraggable euiDraggable--hasCustomDragHandle"
+          class="euiDraggable emotion-euiDraggable"
           data-rfd-draggable-context-id=":r0:"
           data-rfd-draggable-id="columnA"
           data-test-subj="draggable"
           role="group"
         >
           <div
-            class="euiDataGridColumnSorting__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
+            class="euiDataGridColumnSorting__item euiDraggable__item emotion-euiDraggable__item"
           >
             <p
               class="emotion-euiScreenReaderOnly"

src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap

@@ -2,14 +2,14 @@
 
 exports[`EuiDataGridColumnSortingDraggable [React 17] renders an EuiDraggable component of a single column that is currently being sorted 1`] = `
 <div
-  class="euiDraggable euiDraggable--hasCustomDragHandle"
+  class="euiDraggable emotion-euiDraggable"
   data-rfd-draggable-context-id="0"
   data-rfd-draggable-id="columnA"
   data-test-subj="draggable"
   role="group"
 >
   <div
-    class="euiDataGridColumnSorting__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
+    class="euiDataGridColumnSorting__item euiDraggable__item emotion-euiDraggable__item"
   >
     <p
       class="emotion-euiScreenReaderOnly"
@@ -161,14 +161,14 @@ exports[`EuiDataGridColumnSortingDraggable [React 17] renders an EuiDraggable co
 
 exports[`EuiDataGridColumnSortingDraggable [React 18] renders an EuiDraggable component of a single column that is currently being sorted 1`] = `
 <div
-  class="euiDraggable euiDraggable--hasCustomDragHandle"
+  class="euiDraggable emotion-euiDraggable"
   data-rfd-draggable-context-id=":r0:"
   data-rfd-draggable-id="columnA"
   data-test-subj="draggable"
   role="group"
 >
   <div
-    class="euiDataGridColumnSorting__item false euiDraggable__item euiDraggable__item--hasCustomDragHandle"
+    class="euiDataGridColumnSorting__item euiDraggable__item emotion-euiDraggable__item"
   >
     <p
       class="emotion-euiScreenReaderOnly"

src/components/datagrid/controls/column_selector.tsx

@@ -7,14 +7,14 @@
  */
 
 import React, {
-  Fragment,
   useState,
   useMemo,
   useCallback,
   ReactNode,
   ChangeEvent,
 } from 'react';
 import classNames from 'classnames';
+
 import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle } from '../../popover';
 import { EuiI18n, useEuiI18n } from '../../i18n';
 import { EuiButtonEmpty } from '../../button';
@@ -197,7 +197,7 @@ export const useDataGridColumnSelector = (
                 droppableId="columnOrder"
                 isDropDisabled={!isDragEnabled}
               >
-                <Fragment>
+                <>
                   {filteredColumns.map((id, index) => (
                     <EuiDraggable
                       key={id}
@@ -209,10 +209,13 @@ export const useDataGridColumnSelector = (
                     >
                       {(provided, state) => (
                         <div
-                          className={`euiDataGridColumnSelector__item ${
-                            state.isDragging &&
-                            'euiDataGridColumnSelector__item-isDragging'
-                          }`}
+                          className={classNames(
+                            'euiDataGridColumnSelector__item',
+                            {
+                              'euiDataGridColumnSelector__item-isDragging':
+                                state.isDragging,
+                            }
+                          )}
                           data-test-subj={`dataGridColumnSelectorColumnItem-${id}`}
                         >
                           <EuiFlexGroup
@@ -272,7 +275,7 @@ export const useDataGridColumnSelector = (
                       )}
                     </EuiDraggable>
                   ))}
-                </Fragment>
+                </>
               </EuiDroppable>
             </EuiDragDropContext>
           </div>

src/components/datagrid/controls/column_sorting_draggable.tsx

@@ -7,6 +7,8 @@
  */
 
 import React, { FunctionComponent } from 'react';
+import classNames from 'classnames';
+
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButtonGroup, EuiButtonIcon } from '../../button';
 import { EuiDraggable } from '../../drag_and_drop';
@@ -78,9 +80,9 @@ export const EuiDataGridColumnSortingDraggable: FunctionComponent<
     >
       {(provided, state) => (
         <div
-          className={`euiDataGridColumnSorting__item ${
-            state.isDragging && 'euiDataGridColumnSorting__item-isDragging'
-          }`}
+          className={classNames('euiDataGridColumnSorting__item', {
+            'euiDataGridColumnSorting__item-isDragging': state.isDragging,
+          })}
         >
           <EuiScreenReaderOnly>
             <p>

src/components/datagrid/data_grid.test.tsx

@@ -1813,7 +1813,7 @@ describe('EuiDataGrid', () => {
       let popover = openColumnSelector(component);
       expect(
         popover
-          .find('.euiDataGridColumnSelector__item')
+          .find('div.euiDataGridColumnSelector__item')
           .map((item) => item.text())
       ).toEqual(['A', 'B']);
       closeColumnSelector(component);
@@ -1831,7 +1831,7 @@ describe('EuiDataGrid', () => {
       popover = openColumnSelector(component);
       expect(
         popover
-          .find('.euiDataGridColumnSelector__item')
+          .find('div.euiDataGridColumnSelector__item')
           .map((item) => item.text())
       ).toEqual(['A', 'C']);
       closeColumnSelector(component);

src/components/drag_and_drop/__snapshots__/drag_drop_context.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiDragDropContext is rendered 1`] = `<div />`;
+exports[`EuiDragDropContext renders 1`] = `<div />`;

src/components/drag_and_drop/__snapshots__/draggable.test.tsx.snap

@@ -2,25 +2,25 @@
 
 exports[`[React 17] EuiDraggable renders 1`] = `
 <div
-  class="euiDroppable euiDroppable--noGrow"
-  data-rfd-droppable-context-id="0"
+  class="euiDroppable emotion-euiDroppable-noGrow"
+  data-rfd-droppable-context-id="2"
   data-rfd-droppable-id="testDroppable"
   data-test-subj="droppable"
 >
   <div
-    aria-describedby="rfd-hidden-text-0-hidden-text-0"
-    class="euiDraggable"
-    data-rfd-drag-handle-context-id="0"
+    aria-describedby="rfd-hidden-text-2-hidden-text-6"
+    class="euiDraggable testClass1 testClass2 emotion-euiDraggable-euiTestCss"
+    data-rfd-drag-handle-context-id="2"
     data-rfd-drag-handle-draggable-id="testDraggable"
-    data-rfd-draggable-context-id="0"
+    data-rfd-draggable-context-id="2"
     data-rfd-draggable-id="testDraggable"
-    data-test-subj="draggable"
+    data-test-subj="test subject string"
     draggable="false"
     role="button"
     tabindex="0"
   >
     <div
-      class="euiDraggable__item"
+      class="euiDraggable__item emotion-euiDraggable__item"
     >
       Hello
     </div>
@@ -33,25 +33,25 @@ exports[`[React 17] EuiDraggable renders 1`] = `
 
 exports[`[React 18] EuiDraggable renders 1`] = `
 <div
-  class="euiDroppable euiDroppable--noGrow"
-  data-rfd-droppable-context-id=":r0:"
+  class="euiDroppable emotion-euiDroppable-noGrow"
+  data-rfd-droppable-context-id=":r8:"
   data-rfd-droppable-id="testDroppable"
   data-test-subj="droppable"
 >
   <div
-    aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
-    class="euiDraggable"
-    data-rfd-drag-handle-context-id=":r0:"
+    aria-describedby="rfd-hidden-text-:r8:-hidden-text-:r9:"
+    class="euiDraggable testClass1 testClass2 emotion-euiDraggable-euiTestCss"
+    data-rfd-drag-handle-context-id=":r8:"
     data-rfd-drag-handle-draggable-id="testDraggable"
-    data-rfd-draggable-context-id=":r0:"
+    data-rfd-draggable-context-id=":r8:"
     data-rfd-draggable-id="testDraggable"
-    data-test-subj="draggable"
+    data-test-subj="test subject string"
     draggable="false"
     role="button"
     tabindex="0"
   >
     <div
-      class="euiDraggable__item"
+      class="euiDraggable__item emotion-euiDraggable__item"
     >
       Hello
     </div>