[Emotion] Convert EuiDroppable & EuiDraggable

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

@@ -40,7 +40,7 @@ exports[`[React 18] EuiDraggable renders 1`] = `
 >
   <div
     aria-describedby="rfd-hidden-text-:r0:-hidden-text-:r1:"
-    class="euiDraggable"
+    class="euiDraggable emotion-euiDraggable-none"
     data-rfd-drag-handle-context-id=":r0:"
     data-rfd-drag-handle-draggable-id="testDraggable"
     data-rfd-draggable-context-id=":r0:"

src/components/drag_and_drop/_draggable.scss

@@ -33,9 +33,3 @@
     }
   }
 }
-
-@each $size, $spacing in $euiDragAndDropSpacing {
-  .euiDraggable--#{$size} {
-    padding: $spacing;
-  }
-}

src/components/drag_and_drop/_variables.scss

@@ -1,5 +0,0 @@
-$euiDragAndDropSpacing: (
-  s: ($euiSizeXS / 2),
-  m: ($euiSizeS / 2),
-  l: ($euiSize / 2),
-);

src/components/drag_and_drop/draggable.styles.ts

@@ -0,0 +1,32 @@
+/*
+ * 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 { mathWithUnits } from '../../global_styling';
+
+export const euiDraggableStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiDraggable: css``,
+    spacing: {
+      none: css``,
+      s: css`
+        padding: ${euiTheme.size.xxs};
+      `,
+      m: css`
+        padding: ${mathWithUnits(euiTheme.size.m, (x) => x / 2)};
+      `,
+      l: css`
+        padding: ${euiTheme.size.m};
+      `,
+    },
+  };
+};

src/components/drag_and_drop/draggable.tsx

@@ -15,17 +15,15 @@ import React, {
 } from 'react';
 import { Draggable, DraggableProps } from '@hello-pangea/dnd';
 import classNames from 'classnames';
+
+import { useEuiTheme } from '../../services';
 import { CommonProps } from '../common';
-import { EuiDroppableContext } from './droppable';
 
-const spacingToClassNameMap = {
-  none: null,
-  s: 'euiDraggable--s',
-  m: 'euiDraggable--m',
-  l: 'euiDraggable--l',
-};
+import { EuiDroppableContext } from './droppable';
+import { euiDraggableStyles } from './draggable.styles';
 
-export type EuiDraggableSpacing = keyof typeof spacingToClassNameMap;
+const SPACINGS = ['none', 's', 'm', 'l'] as const;
+export type EuiDraggableSpacing = (typeof SPACINGS)[number];
 
 export interface EuiDraggableProps
   extends CommonProps,
@@ -71,6 +69,9 @@ export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({
 }) => {
   const { cloneItems } = useContext(EuiDroppableContext);
 
+  const euiTheme = useEuiTheme();
+  const styles = euiDraggableStyles(euiTheme);
+
   return (
     <Draggable
       draggableId={draggableId}
@@ -79,6 +80,8 @@ export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({
       {...rest}
     >
       {(provided, snapshot, rubric) => {
+        const cssStyles = [styles.euiDraggable, styles.spacing[spacing]];
+
         const classes = classNames(
           'euiDraggable',
           {
@@ -87,7 +90,6 @@ export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({
             'euiDraggable--isDragging': snapshot.isDragging,
             'euiDraggable--withoutDropAnimation': isRemovable,
           },
-          spacingToClassNameMap[spacing],
           className
         );
         const childClasses = classNames('euiDraggable__item', {
@@ -108,6 +110,7 @@ export const EuiDraggable: FunctionComponent<EuiDraggableProps> = ({
               ref={provided.innerRef}
               data-test-subj={dataTestSubj}
               className={classes}
+              css={cssStyles}
               style={{ ...style, ...provided.draggableProps.style }}
               // We use [role="group"] instead of [role="button"] when we expect a nested
               // interactive element. Screen readers will cue users that this is a container