diff --git a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
index 7bcf150efde..e1e8d65ead3 100644
--- a/src/components/datagrid/controls/__snapshots__/column_selector.test.tsx.snap
+++ b/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
diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
index 0b4a2dc68f5..b9e8a4eaa75 100644
--- a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
+++ b/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"
diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap
index 32e9f461dc5..40e60241449 100644
--- a/src/components/datagrid/controls/__snapshots__/column_sorting_draggable.test.tsx.snap
+++ b/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"
diff --git a/src/components/datagrid/controls/column_selector.tsx b/src/components/datagrid/controls/column_selector.tsx
index d76e7854045..330d6c8b818 100644
--- a/src/components/datagrid/controls/column_selector.tsx
+++ b/src/components/datagrid/controls/column_selector.tsx
@@ -7,7 +7,6 @@
  */
 
 import React, {
-  Fragment,
   useState,
   useMemo,
   useCallback,
@@ -15,6 +14,7 @@ import React, {
   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>
diff --git a/src/components/datagrid/controls/column_sorting_draggable.tsx b/src/components/datagrid/controls/column_sorting_draggable.tsx
index a26b08b00c0..2fa7f1264b3 100644
--- a/src/components/datagrid/controls/column_sorting_draggable.tsx
+++ b/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>