mirror of
https://github.com/penpot/penpot.git
synced 2026-09-19 10:26:14 +00:00
5b97fb9408
* ♻️ Migrate editable-select to DS icon* and design tokens The dropdown toggle and selected-item tick used the deprecated app.main.ui.icons component and the SCSS relied on refactor/ placeholders and aliased design tokens. Replace both icon usages with the DS icon* component (arrow-down instead of a rotated arrow, tick unchanged, both at DS size "s"), and rework editable_select.scss to depend only on DS modules: placeholders inlined, aliases resolved to their terminal --color-* tokens, sizes/spacing/borders mapped to DS tokens, logical properties used where they preserve behavior, and per-state colors driven by component-local CSS custom properties (fed through currentColor for the icons, since DS icon* strokes default to currentColor). AI-assisted-by: claude-sonnet-5 * ♻️ Migrate frame_grid to the DS and unify its options dropdown Refactors frame_grid.scss off the deprecated refactor/ styling system onto DS tokens (borders, sizes, spacing, typography), and replaces the remaining deprecated-icon usages (gap-horizontal, grid-margin) with the DS icon* component. Unifies the square/column/row "reset to default" toggle+panel, which had drifted into two inconsistent, duplicated implementations, into two shared components (default-options-toggle*, default-options- dropdown*) built on the existing dropdown component, with proper menu/menuitem roles and Enter/Space keyboard activation. Along the way, fixes several regressions the migration surfaced: - .show-more-options lost its border width when converted to a CSS-variable-driven color. - the reset-to-default toggle was enabled while its own options were disabled instead of the other way around. - numeric inputs in .height/.gutter/.margin lost their explicit width, letting them fall back to the browser's intrinsic input width and overflow the sidebar. - a leftover CSS override was forcing the docked dropdown-select's icon to render fully transparent. Also fixes editable-select's is-selected check, which compared a stringified option value against a non-stringified current-value and so could never match, silently hiding the selected-item checkmark. AI-assisted-by: claude-sonnet-5 * ♻️ Migrate frame_grid's numeric inputs to the DS component Replaces the deprecated app.main.ui.components.numeric-input with the DS numeric-input* across .grid-size, .height, .gutter and .margin, using its built-in :icon/:text-icon slots (via input-field*) instead of rendering a separate icon element beside the input. The gutter/margin icons previously rotated 90deg via CSS to indicate row vs column orientation; DS ships dedicated icon-ids for both axes (gap-horizontal/gap-vertical, margin-top-bottom/margin-left-right), so the icon itself now swaps per grid type instead of being rotated. The height row's "H"/"W" text label is now the matching DS character-h/character-w icon rather than literal text. AI-assisted-by: claude-sonnet-5 * ♻️ Flatten unnecessary nesting in frame_grid.scss CSS Modules already scope every class to this file, so nesting purely to dodge cross-file name collisions is dead weight now. Rewrite the nested rules as flat top-level selectors, dropping ancestor-wrapper prefixes wherever the target class is already unique in the file and keeping them only where they still do real work (winning a same-node specificity fight against another component's own class). Also drop --show-options-icon-color: it was assigned across every state but never actually read anywhere, so it did nothing. AI-assisted-by: claude-sonnet-5