github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-10-28 21:40:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

♻️ Use DS icon buttons in the align options (#12366)

Browse Source 
* ♻️ Use DS icon buttons in the align options

Replace the eight raw align and distribute buttons with icon-button*
and DS icons. The title text moves to aria-label, so the DS tooltip
shows the same text and shortcut. Disabled distribute buttons now use
the DS disabled color.

Add a visual test that selects two shapes so the align options show.

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

* ♻️ Remove deprecated button styles from the align options

The align buttons are DS icon buttons now, so the .align-button rules
and their placeholders go away. Move the row height to a DS size token
and drop the refactor/ import.

AI-assisted-by: claude-opus-5-5
This commit is contained in:
Eva Marco 2026-10-15 20:05:58 +02:00 committed by GitHub
parent 57fa280209
commit 47f0e15744
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 76 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -84,6 +84,30 @@ test.describe("Design tab", () => {
await expect(workspace.page).toHaveScreenshot();
});
test("Shows the align options when selecting two shapes", async ({
page,
}) => {
const workspace = new WorkspacePage(page);
await workspace.setupEmptyFile();
await workspace.goToWorkspace();
await workspace.rectShapeButton.click();
await workspace.clickWithDragViewportAt(128, 128, 200, 100);
await workspace.clickLeafLayer("Rectangle");
await page.keyboard.press("Control+D");
await expect(workspace.layers.getByText("Rectangle")).toHaveCount(2);
await page.keyboard.press("Control+A");
await expect(
workspace.rightSidebar.getByRole("button", { name: /^Align left/ }),
).toBeVisible();
// The align options are a small part of the sidebar: compare every pixel.
await expect(workspace.rightSidebar).toHaveScreenshot({
maxDiffPixelRatio: 0,
threshold: 0,
});
});
});
test.describe("Assets tab", () => {

107
frontend/src/app/main/ui/workspace/sidebar/options/menus/align.cljs
View File

@ -11,7 +11,8 @@
[app.main.data.workspace.path :as dwdp]
[app.main.data.workspace.shortcuts :as sc]
[app.main.store :as st]
[app.main.ui.icons :as deprecated-icon]
[app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
[app.main.ui.ds.foundations.assets.icon :as i]
[app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]]
[rumext.v2 :as mf]))
@ -57,67 +58,59 @@
(when (or path-edit? (not (and disabled-align disabled-distribute)))
[:div {:class (stl/css :align-options)}
[:div {:class (stl/css :align-group-horizontal)}
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
:disabled disabled-align
:title (tr "workspace.align.hleft" (sc/get-tooltip :align-left))
:data-value "hleft"
:on-click align-objects}
deprecated-icon/align-left]
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.align.hleft" (sc/get-tooltip :align-left))
:icon i/align-left
:disabled disabled-align
:data-value "hleft"
:on-click align-objects}]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
:disabled disabled-align
:title (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter))
:data-value "hcenter"
:on-click align-objects}
deprecated-icon/align-horizontal-center]
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.align.hcenter" (sc/get-tooltip :align-hcenter))
:icon i/align-horizontal-center
:disabled disabled-align
:data-value "hcenter"
:on-click align-objects}]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
:disabled disabled-align
:title (tr "workspace.align.hright" (sc/get-tooltip :align-right))
:data-value "hright"
:on-click align-objects}
deprecated-icon/align-right]
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.align.hright" (sc/get-tooltip :align-right))
:icon i/align-right
:disabled disabled-align
:data-value "hright"
:on-click align-objects}]
[:button {:class (stl/css-case :align-button true
:disabled disabled-distribute)
:disabled disabled-distribute
:title (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute))
:data-value "horizontal"
:on-click distribute-objects}
deprecated-icon/distribute-horizontally]]
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.align.hdistribute" (sc/get-tooltip :h-distribute))
:icon i/distribute-horizontally
:disabled disabled-distribute
:data-value "horizontal"
:on-click distribute-objects}]]
[:div {:class (stl/css :align-group-vertical)}
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
:disabled disabled-align
:title (tr "workspace.align.vtop" (sc/get-tooltip :align-top))
:data-value "vtop"
:on-click align-objects}
deprecated-icon/align-top]
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.align.vtop" (sc/get-tooltip :align-top))
:icon i/align-top
:disabled disabled-align
:data-value "vtop"
:on-click align-objects}]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
:disabled disabled-align
:title (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter))
:data-value "vcenter"
:on-click align-objects}
deprecated-icon/align-vertical-center]
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.align.vcenter" (sc/get-tooltip :align-vcenter))
:icon i/align-vertical-center
:disabled disabled-align
:data-value "vcenter"
:on-click align-objects}]
[:button {:class (stl/css-case :align-button true
:disabled disabled-align)
:disabled disabled-align
:title (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom))
:data-value "vbottom"
:on-click align-objects}
deprecated-icon/align-bottom]
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.align.vbottom" (sc/get-tooltip :align-bottom))
:icon i/align-bottom
:disabled disabled-align
:data-value "vbottom"
:on-click align-objects}]
[:button {:title (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute))
:class (stl/css-case :align-button true
:disabled disabled-distribute)
:disabled disabled-distribute
:data-value "vertical"
:on-click distribute-objects}
deprecated-icon/distribute-vertical-spacing]]])))
[:> icon-button* {:variant "ghost"
:aria-label (tr "workspace.align.vdistribute" (sc/get-tooltip :v-distribute))
:icon i/distribute-vertical-spacing
:disabled disabled-distribute
:data-value "vertical"
:on-click distribute-objects}]]])))

35
frontend/src/app/main/ui/workspace/sidebar/options/menus/align.scss
View File

@ -4,13 +4,13 @@
//
// Copyright (c) KALEIDOS SUBSIDIARY SL
@use "refactor/common-refactor.scss" as deprecated;
@use "ds/_sizes.scss" as *;
@use "../../../sidebar/common/sidebar.scss" as sidebar;
.align-options {
@include sidebar.option-grid-structure;
height: deprecated.$s-32;
block-size: $sz-32;
}
.align-group-horizontal,
@ -27,34 +27,3 @@
.align-group-vertical {
grid-column: 5 / span 4;
}
.align-button {
@extend %button-tertiary;
height: deprecated.$s-32;
width: deprecated.$s-32;
padding: 0;
border-radius: deprecated.$br-8;
svg {
@extend %button-icon;
stroke: var(--icon-foreground);
}
&.disabled {
cursor: default;
svg {
stroke: var(--button-foreground-color-disabled);
}
&:hover {
background-color: var(--panel-background-color);
svg {
stroke: var(--button-foreground-color-disabled);
}
}
}
}