diff --git a/frontend/playwright/ui/specs/tokens/apply.spec.js b/frontend/playwright/ui/specs/tokens/apply.spec.js index a0e91b7c60..e13a377ae7 100644 --- a/frontend/playwright/ui/specs/tokens/apply.spec.js +++ b/frontend/playwright/ui/specs/tokens/apply.spec.js @@ -259,6 +259,36 @@ test.describe("Tokens: Apply token", () => { await expect(opacityLowPill).toBeVisible(); }); + test("Token dropdown of a scrubbable numeric input shows the default cursor", async ({ + page, + }) => { + const { workspacePage } = await setupTokensFileRender(page); + + await page.getByRole("tab", { name: "Layers" }).click(); + await workspacePage.layers.getByTestId("layer-row").nth(1).click(); + + const layerMenuSection = page.getByRole("region", { + name: "Layer menu section", + }); + const opacityWrapper = layerMenuSection + .getByTestId("numeric-input-wrapper") + .first(); + await expect(opacityWrapper).toHaveCSS("cursor", "ew-resize"); + + await layerMenuSection + .getByRole("button", { name: "Open token list" }) + .click(); + + // The scrub cursor belongs to the input, not to the dropdown it opens. + const tokenList = layerMenuSection.getByRole("listbox"); + await expect(tokenList).toBeVisible(); + await expect(tokenList).toHaveCSS("cursor", "default"); + await expect(tokenList.getByRole("option").first()).toHaveCSS( + "cursor", + "default", + ); + }); + test("User applies typography token to a text shape", async ({ page }) => { const { workspacePage, tokensSidebar, tokenContextMenuForToken } = await setupTypographyTokensFileRender(page); diff --git a/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss b/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss index c961b9e06c..6480e6cd79 100644 --- a/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss +++ b/frontend/src/app/main/ui/ds/controls/shared/options_dropdown.scss @@ -29,6 +29,10 @@ z-index: var(--z-index-dropdown); box-shadow: 0 0 $sz-12 0 var(--color-shadow-dark); + // Do not inherit the cursor of the control that opens it (e.g. the + // scrub cursor of the numeric input). + cursor: default; + &:focus { outline: none; }