mirror of
https://github.com/penpot/penpot.git
synced 2026-10-29 05:50:35 +00:00
9904e50889
* ♻️ Use a DS icon button for the component pill menu Replace the raw three dots button of the component pill with the DS secondary icon button. It had no label, so it reuses the "Options" one, shown in the DS tooltip above and to the left (it sits at the right edge of the sidebar), and aria-pressed while the menu is open instead of the selected class. Its class drops the button placeholders and only keeps the pill segment shape: full height and square corners on the left. The tooltip wrapper fills the segment too. Add a visual test that selects a component copy so the pill shows. AI-assisted-by: claude-opus-5-5 * ♻️ Use DS icon buttons for the component annotation actions The save/create, discard, edit and delete actions of a component annotation were divs with a click handler: no keyboard focus and no button role. Replace them with DS ghost icon buttons. Their title moves to the label, shown in the DS tooltip above and to the left, and save is disabled while the text is blank, which it already ignored. The class that hides them until the title is hovered, or while editing or creating, now goes on the tooltip wrapper. The green and red hover colors and the fixed size go away with the DS look. While editing or creating, the actions get a small padding so their hover background does not touch the annotation border; the title row grows from 32 to 36px there. Add a visual test that creates an annotation on a main component and shows both sets of actions. AI-assisted-by: claude-opus-5-5 * 💄 Open component options tooltips above and to the left The variants help, create variant, add property and remove property icon buttons sit at the right edge of the sidebar: open their tooltips above and to the left, like the other actions of the component options. AI-assisted-by: claude-opus-5-5 * ♻️ Move component options styles off the deprecated styles Inline the dropdown placeholders of the component pill menu with DS tokens and a local variable for the item colors that change on hover, and give the item label its own class instead of styling the span. Resolve the annotation title border alias to its DS token and delete the unused .component-title-actions rule. The item label uses the DS body-small typography; its line-height is 1.3 instead of 1.4, with no visible change since the item centers it. component.scss no longer imports refactor/. AI-assisted-by: claude-opus-5-5