Modify CSS to match Kibana norms

elastic · May 8, 2019 · 4ae26ab · cchaos · May 8, 2019 · chrisdavies
1 parent 961eaea
commit 4ae26ab
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 15 deletions.
diff --git a/x-pack/plugins/lens/public/drag_drop/__snapshots__/drag_drop.test.tsx.snap b/x-pack/plugins/lens/public/drag_drop/__snapshots__/drag_drop.test.tsx.snap
diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.scss b/x-pack/plugins/lens/public/drag_drop/drag_drop.scss
@@ -1,7 +1,7 @@
-.drag-drop_is-drop-target {
+.lnsDragDrop-isDropTarget {
   background-color: transparentize($euiColorSecondary, .9);
 }
 
-.drag-drop_is-active-drop-target {
+.lnsDragDrop-isActiveDropTarget {
   background-color: transparentize($euiColorSecondary, .75);
 }
diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.test.tsx b/x-pack/plugins/lens/public/drag_drop/drag_drop.test.tsx
@@ -26,7 +26,7 @@ describe('DragDrop', () => {
     const preventDefault = jest.fn(() => {});
     const component = shallow(<DragDrop droppable>Hello!</DragDrop>);
 
-    component.find('[data-test-subj="drag-drop"]').simulate('dragover', { preventDefault });
+    component.find('[data-test-subj="lnsDragDrop"]').simulate('dragover', { preventDefault });
 
     expect(preventDefault).toBeCalled();
   });
@@ -35,7 +35,7 @@ describe('DragDrop', () => {
     const preventDefault = jest.fn(() => {});
     const component = shallow(<DragDrop>Hello!</DragDrop>);
 
-    component.find('[data-test-subj="drag-drop"]').simulate('dragover', { preventDefault });
+    component.find('[data-test-subj="lnsDragDrop"]').simulate('dragover', { preventDefault });
 
     expect(preventDefault).not.toBeCalled();
   });
@@ -54,7 +54,7 @@ describe('DragDrop', () => {
       </ChildDragDropProvider>
     );
 
-    component.find('[data-test-subj="drag-drop"]').simulate('dragstart', { dataTransfer });
+    component.find('[data-test-subj="lnsDragDrop"]').simulate('dragstart', { dataTransfer });
 
     jest.runAllTimers();
 
@@ -78,7 +78,7 @@ describe('DragDrop', () => {
     );
 
     component
-      .find('[data-test-subj="drag-drop"]')
+      .find('[data-test-subj="lnsDragDrop"]')
       .simulate('drop', { preventDefault, stopPropagation });
 
     expect(preventDefault).toBeCalled();

diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx b/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx
@@ -66,10 +66,10 @@ export function DragDrop(props: Props) {
   const isDragging = draggable && value === dragging;
 
   const classSuffix =
-    ' drag-drop' +
-    (droppable ? ' drag-drop_is-drop-target' : '') +
-    (droppable && state.isActive ? ' drag-drop_is-active-drop-target' : '') +
-    (isDragging ? ' drag-drop_is-dragging' : '');
+    ' lnsDragDrop' +
+    (droppable ? ' lnsDragDrop-isDropTarget' : '') +
+    (droppable && state.isActive ? ' lnsDragDrop_isActiveDropTarget' : '') +
+    (isDragging ? ' lnsDragDrop_isDragging' : '');
 
   const dragStart = (e: DroppableEvent) => {
     // Setting stopPropgagation causes Chrome failures, so
@@ -122,7 +122,7 @@ export function DragDrop(props: Props) {
 
   return (
     <div
-      data-test-subj="drag-drop"
+      data-test-subj="lnsDragDrop"
       className={`${className || ''}${classSuffix}`}
       onDragOver={dragOver}
       onDragLeave={dragLeave}