From a35bb26f3da35680e8fd671ef58fca30e8acc2f5 Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Sun, 12 Feb 2023 20:22:15 +0700
Subject: [PATCH] refactor: prefix classnames with dv-* to prevent collisions

---
 .../src/__tests__/dnd/abstractDragHandler.spec.ts  |  8 ++++----
 packages/dockview/src/dnd/abstractDragHandler.ts   |  4 ++--
 packages/dockview/src/dnd/ghost.ts                 |  2 +-
 .../src/dockview/components/tab/defaultTab.scss    |  4 ++--
 .../dockview/src/dockview/dockviewComponent.scss   | 14 +-------------
 5 files changed, 10 insertions(+), 22 deletions(-)

diff --git a/packages/dockview/src/__tests__/dnd/abstractDragHandler.spec.ts b/packages/dockview/src/__tests__/dnd/abstractDragHandler.spec.ts
index 6e1b68600..ebb55aae7 100644
--- a/packages/dockview/src/__tests__/dnd/abstractDragHandler.spec.ts
+++ b/packages/dockview/src/__tests__/dnd/abstractDragHandler.spec.ts
@@ -3,7 +3,7 @@ import { DragHandler } from '../../dnd/abstractDragHandler';
 import { IDisposable } from '../../lifecycle';
 
 describe('abstractDragHandler', () => {
-    test('that className dragged is added to element after dragstart event', () => {
+    test('that className dv-dragged is added to element after dragstart event', () => {
         jest.useFakeTimers();
 
         const element = document.createElement('div');
@@ -26,13 +26,13 @@ describe('abstractDragHandler', () => {
             }
         })(element);
 
-        expect(element.classList.contains('dragged')).toBeFalsy();
+        expect(element.classList.contains('dv-dragged')).toBeFalsy();
 
         fireEvent.dragStart(element);
-        expect(element.classList.contains('dragged')).toBeTruthy();
+        expect(element.classList.contains('dv-dragged')).toBeTruthy();
 
         jest.runAllTimers();
-        expect(element.classList.contains('dragged')).toBeFalsy();
+        expect(element.classList.contains('dv-dragged')).toBeFalsy();
 
         handler.dispose();
     });
diff --git a/packages/dockview/src/dnd/abstractDragHandler.ts b/packages/dockview/src/dnd/abstractDragHandler.ts
index a13e8aa5a..19ee381cc 100644
--- a/packages/dockview/src/dnd/abstractDragHandler.ts
+++ b/packages/dockview/src/dnd/abstractDragHandler.ts
@@ -34,8 +34,8 @@ export abstract class DragHandler extends CompositeDisposable {
                     iframe.style.pointerEvents = 'none';
                 }
 
-                this.el.classList.add('dragged');
-                setTimeout(() => this.el.classList.remove('dragged'), 0);
+                this.el.classList.add('dv-dragged');
+                setTimeout(() => this.el.classList.remove('dv-dragged'), 0);
 
                 this.disposable.value = this.getData(event.dataTransfer);
 
diff --git a/packages/dockview/src/dnd/ghost.ts b/packages/dockview/src/dnd/ghost.ts
index daed9a6e9..496ac16f7 100644
--- a/packages/dockview/src/dnd/ghost.ts
+++ b/packages/dockview/src/dnd/ghost.ts
@@ -5,7 +5,7 @@ export function addGhostImage(
     ghostElement: HTMLElement
 ) {
     // class dockview provides to force ghost image to be drawn on a different layer and prevent weird rendering issues
-    addClasses(ghostElement, 'dragged');
+    addClasses(ghostElement, 'dv-dragged');
 
     document.body.appendChild(ghostElement);
     dataTransfer.setDragImage(ghostElement, 0, 0);
diff --git a/packages/dockview/src/dockview/components/tab/defaultTab.scss b/packages/dockview/src/dockview/components/tab/defaultTab.scss
index 65f794f31..d820534b8 100644
--- a/packages/dockview/src/dockview/components/tab/defaultTab.scss
+++ b/packages/dockview/src/dockview/components/tab/defaultTab.scss
@@ -1,4 +1,4 @@
-.dragged {
+.dv-dragged {
     transform: translate3d(
         0px,
         0px,
@@ -9,7 +9,7 @@
 .tab {
     flex-shrink: 0;
 
-    &.dragging {
+    &.dv-tab-dragging {
         .tab-action {
             background-color: var(--dv-activegroup-visiblepanel-tab-color);
         }
diff --git a/packages/dockview/src/dockview/dockviewComponent.scss b/packages/dockview/src/dockview/dockviewComponent.scss
index 869a450ad..b9860c17f 100644
--- a/packages/dockview/src/dockview/dockviewComponent.scss
+++ b/packages/dockview/src/dockview/dockviewComponent.scss
@@ -1,15 +1,3 @@
-.custom-dragging {
-    height: 24px;
-    line-height: 24px;
-    font-size: 11px;
-    width: 100px;
-    background-color: dodgerblue;
-    color: ghostwhite;
-    border-radius: 11px;
-    position: absolute;
-    padding-left: 10px;
-}
-
 .groupview {
     &.active-group {
         > .tabs-and-actions-container > .tabs-container > .tab {
@@ -50,7 +38,7 @@
  * therefore we also set some stylings for the dragging event
  **/
 .tab {
-    &.dragging {
+    &.dv-tab-dragging {
         background-color: var(
             --dv-activegroup-visiblepanel-tab-background-color
         );