Global to local css migration - grabber (#40007)

metabase · Mar 18, 2024 · 2fd5d6e · 2fd5d6e
1 parent 15a411c
commit 2fd5d6e
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 17 deletions.
diff --git a/e2e/test/scenarios/admin/datamodel/editor.cy.spec.js b/e2e/test/scenarios/admin/datamodel/editor.cy.spec.js
@@ -659,7 +659,7 @@ const getFieldSection = fieldName => {
 };
 
 const moveField = (fieldIndex, deltaY) => {
-  cy.get(".Grabber")
+  cy.findAllByTestId("grabber")
     .eq(fieldIndex)
     .trigger("pointerdown", 0, 0, { force: true, button: 0, isPrimary: true })
     .wait(200)

diff --git a/frontend/src/metabase/components/Grabber/Grabber.jsx b/frontend/src/metabase/components/Grabber/Grabber.jsx
@@ -1,10 +1,14 @@
 /* eslint-disable react/prop-types */
 import cx from "classnames";
 
+import GrabberS from "metabase/css/components/grabber.module.css";
+import CS from "metabase/css/core/index.css";
+
 export default function Grabber({ className = "", style, ...props }) {
   return (
     <div
-      className={cx("Grabber cursor-grab", className)}
+      className={cx(GrabberS.Grabber, CS.cursorGrab, className)}
+      data-testid="grabber"
       style={style}
       {...props}
     />

diff --git a/frontend/src/metabase/core/components/Sortable/SortableList.tsx b/frontend/src/metabase/core/components/Sortable/SortableList.tsx
@@ -9,6 +9,7 @@ import { SortableContext, arrayMove } from "@dnd-kit/sortable";
 import { useState, useMemo, useEffect } from "react";
 import _ from "underscore";
 
+import GrabberS from "metabase/css/components/grabber.module.css";
 import { isNotNull } from "metabase/lib/types";
 
 type ItemId = number | string;
@@ -77,7 +78,7 @@ export const SortableList = <T,>({
   };
 
   const handleDragStart = (event: DragStartEvent) => {
-    document.body.classList.add("grabbing");
+    document.body.classList.add(GrabberS.grabbing);
 
     onSortStart?.(event);
 
@@ -88,7 +89,7 @@ export const SortableList = <T,>({
   };
 
   const handleDragEnd = () => {
-    document.body.classList.remove("grabbing");
+    document.body.classList.remove(GrabberS.grabbing);
     if (activeItem && onSortEnd) {
       onSortEnd({
         id: getId(activeItem),

diff --git a/frontend/src/metabase/css/admin.module.css b/frontend/src/metabase/css/admin.module.css
@@ -191,7 +191,3 @@
 :global(.AdminTable tbody tr:first-child td) {
   padding-top: var(--margin-1);
 }
-
-:global(.ColumnSortHelper) {
-  box-shadow: 0 7px 20px var(--color-shadow);
-}
diff --git a/frontend/src/metabase/css/components/grabber.module.css b/frontend/src/metabase/css/components/grabber.module.css
@@ -1,23 +1,21 @@
-:global(.Grabber) {
+.Grabber {
   /* This image is a svg circle as a data url.
      We tile it for the whole div. */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='%23E3E7E9' r='1.5' cx='2.5' cy='2.5' /%3E%3C/svg%3E");
   background-repeat: round round;
   background-size: 5px 5px;
 }
 
-/* .sort-helper isn't used in <Grabber>. You'll need to set that on a parent being sorted. */
-:global(.ColumnSortHelper .Grabber),
-:global(.Grabber:hover) {
+.Grabber:hover {
   /* This image is the same but with a different fill color. */
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='%23C7CFD4' r='1.5' cx='2.5' cy='2.5' /%3E%3C/svg%3E");
 }
 
 /* This should be applied on document.body during dragging. */
-:global(.grabbing) {
+.grabbing {
   cursor: grabbing;
 }
 
-:global(.grabbing *) {
+.grabbing * {
   cursor: grabbing;
 }
diff --git a/frontend/src/metabase/css/core/cursor.module.css b/frontend/src/metabase/css/core/cursor.module.css
@@ -5,7 +5,7 @@
 }
 
 :global(.cursor-grab),
-.cursor-grab {
+.cursorGrab {
   cursor: grab;
 }
 

diff --git a/.../src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/BookmarkList.tsx b/.../src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/BookmarkList.tsx
@@ -14,6 +14,7 @@ import { t } from "ttag";
 import CollapseSection from "metabase/components/CollapseSection";
 import { Sortable } from "metabase/core/components/Sortable";
 import Tooltip from "metabase/core/components/Tooltip";
+import GrabberS from "metabase/css/components/grabber.module.css";
 import Bookmarks from "metabase/entities/bookmarks";
 import * as Urls from "metabase/lib/urls";
 import { PLUGIN_COLLECTIONS } from "metabase/plugins";
@@ -130,13 +131,13 @@ const BookmarkList = ({
   }, []);
 
   const handleSortStart = useCallback(() => {
-    document.body.classList.add("grabbing");
+    document.body.classList.add(GrabberS.grabbing);
     setIsSorting(true);
   }, []);
 
   const handleSortEnd = useCallback(
     input => {
-      document.body.classList.remove("grabbing");
+      document.body.classList.remove(GrabberS.grabbing);
       setIsSorting(false);
       const newIndex = bookmarks.findIndex(b => b.id === input.over.id);
       const oldIndex = bookmarks.findIndex(b => b.id === input.active.id);