From 2fd5d6ebefdcbb1068d1bfe242e9c589058488cb Mon Sep 17 00:00:00 2001 From: Denis Berezin Date: Tue, 19 Mar 2024 01:12:00 +0300 Subject: [PATCH] Global to local css migration - grabber (#40007) --- e2e/test/scenarios/admin/datamodel/editor.cy.spec.js | 2 +- frontend/src/metabase/components/Grabber/Grabber.jsx | 6 +++++- .../metabase/core/components/Sortable/SortableList.tsx | 5 +++-- frontend/src/metabase/css/admin.module.css | 4 ---- .../src/metabase/css/components/grabber.module.css | 10 ++++------ frontend/src/metabase/css/core/cursor.module.css | 2 +- .../MainNavbarContainer/BookmarkList/BookmarkList.tsx | 5 +++-- 7 files changed, 17 insertions(+), 17 deletions(-) diff --git a/e2e/test/scenarios/admin/datamodel/editor.cy.spec.js b/e2e/test/scenarios/admin/datamodel/editor.cy.spec.js index f0418cd3e493f..4a01a687d3d5d 100644 --- 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 index 7889d500b0cd7..a993a18377dff 100644 --- 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 (
diff --git a/frontend/src/metabase/core/components/Sortable/SortableList.tsx b/frontend/src/metabase/core/components/Sortable/SortableList.tsx index da63e07465f28..4e6b8d44982e6 100644 --- 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 = ({ }; const handleDragStart = (event: DragStartEvent) => { - document.body.classList.add("grabbing"); + document.body.classList.add(GrabberS.grabbing); onSortStart?.(event); @@ -88,7 +89,7 @@ export const SortableList = ({ }; 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 index cf69bce311058..7c9f47111e9c9 100644 --- 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 index 13a322d2ab43a..407434caa6167 100644 --- a/frontend/src/metabase/css/components/grabber.module.css +++ b/frontend/src/metabase/css/components/grabber.module.css @@ -1,4 +1,4 @@ -: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"); @@ -6,18 +6,16 @@ background-size: 5px 5px; } -/* .sort-helper isn't used in . 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 index 8ae58cc21e2de..ca940cb900ae2 100644 --- 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/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/BookmarkList.tsx b/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/BookmarkList.tsx index 33aee43251884..c509b3ce5bb3d 100644 --- a/frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer/BookmarkList/BookmarkList.tsx +++ b/frontend/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);