github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-10-29 05:50:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Move viewport top bar styles off the deprecated styles (#12488)

Browse Source 
* ♻️ Move viewport top bar styles off the deprecated styles

The viewport top bars (view only bar of the inspect tab, path edition
bar) already use DS buttons. Move top_bar.scss to DS sizes, borders,
spacing tokens and logical properties, resolve the panel and shadow
color aliases, and drop the refactor import. The unused done-btn class,
the last user of the deprecated button placeholders here, goes away.
The two z-index values have no DS token, so they stay with a TODO.

Add a visual test of the view only bar; it looks the same as before,
pixel for pixel.

AI-assisted-by: claude-opus-5-5

* ♻️ Use the body-small typography in the viewport top bar title

The title only set a 12px font size, which body-small already has.
Use the DS typography instead of the inline size and its TODO. The
view only bar looks the same, pixel for pixel.

AI-assisted-by: claude-opus-5-5
This commit is contained in:
Eva Marco 2026-10-26 15:53:05 +01:00 committed by GitHub
parent f2e5b7e20e
commit 376ecda94e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 49 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/playwright/ui/visual-specs/workspace.spec.js
View File

@ -629,6 +629,28 @@ test.describe("Guides", () => {
});
});
test.describe("Viewport top bar", () => {
test("Shows the view only bar of the inspect tab", async ({ page }) => {
const workspace = new WorkspacePage(page);
await workspace.setupEmptyFile();
await workspace.mockRPC(/get\-file\?/, "workspace/get-file-9066.json");
await workspace.goToWorkspace({
fileId: "e179d9df-de35-80bf-8005-283bbd5516b0",
pageId: "e179d9df-de35-80bf-8005-283bbd5516b1",
});
await workspace.clickLeafLayer("Board");
await workspace.rightSidebar.getByRole("tab", { name: "Inspect" }).click();
const bar = page.getByText("Inspecting code").locator("../../..");
await expect(bar).toBeVisible();
await page.mouse.move(640, 600);
await expect(bar).toHaveScreenshot({
maxDiffPixelRatio: 0,
threshold: 0,
});
});
});
test.describe("Left header", () => {
test("Shows the shared badge and the save status", async ({ page }) => {
const workspace = new WorkspacePage(page);

55
frontend/src/app/main/ui/workspace/viewport/top_bar.scss
View File

@ -4,55 +4,54 @@
//
// Copyright (c) KALEIDOS SUBSIDIARY SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_borders.scss" as *;
@use "ds/_sizes.scss" as *;
@use "ds/typography.scss" as *;
@use "ds/_utils.scss" as *;
.viewport-actions,
.viewport-actions-path {
pointer-events: none;
position: absolute;
--actions-toolbar-position-y: #{deprecated.$s-28};
--actions-toolbar-offset-y: #{deprecated.$s-6};
--actions-toolbar-position-y: #{$sz-28};
--actions-toolbar-offset-y: #{px2rem(6)};
top: calc(var(--actions-toolbar-position-y) + var(--actions-toolbar-offset-y));
left: 50%;
inset-block-start: calc(var(--actions-toolbar-position-y) + var(--actions-toolbar-offset-y));
inset-inline-start: 50%;
transform: translateX(-50%);
z-index: deprecated.$z-index-20;
// TODO: No DS z-index token for this value.
z-index: 20;
}
.viewport-actions-path {
z-index: deprecated.$z-index-3;
// TODO: No DS z-index token for this value.
z-index: 3;
}
.viewport-actions-container {
@include deprecated.flex-row;
background: var(--panel-background-color);
border-radius: deprecated.$br-12;
box-shadow: 0 0 deprecated.$s-12 0 var(--menu-shadow-color);
gap: deprecated.$s-8;
height: deprecated.$s-48;
padding: deprecated.$s-8;
display: flex;
align-items: center;
gap: var(--sp-s);
background: var(--color-background-primary);
border-radius: $br-12;
box-shadow: 0 0 px2rem(12) 0 var(--color-shadow-dark);
block-size: $sz-48;
padding: var(--sp-s);
cursor: initial;
pointer-events: initial;
min-width: deprecated.$s-400;
border: deprecated.$s-2 solid var(--panel-border-color);
min-inline-size: $sz-400;
border: $b-2 solid var(--color-background-quaternary);
}
.viewport-actions-title {
@include use-typography("body-small");
flex: 1;
font-size: deprecated.$fs-12;
color: var(--color-foreground-secondary);
padding-left: deprecated.$s-8;
width: max-content;
}
.done-btn {
@extend %button-primary;
text-transform: uppercase;
padding: deprecated.$s-8 deprecated.$s-20;
font-size: deprecated.$fs-11;
padding-inline-start: var(--sp-s);
inline-size: max-content;
}
.viewport-actions-no-rulers {