mirror of
https://github.com/penpot/penpot.git
synced 2026-10-29 05:50:35 +00:00
2cdb575712
* 🐛 Close the font selector when clicking outside it The font selector had no click-outside handling. It only closed with Esc, or when its menu was unmounted, which is why a viewport click (that deselects the text) closed it and a click on the left sidebar, the rulers or the header did not. Listen to click and contextmenu on the document, as the dropdowns do, and close when the target is outside the selector. The listener starts on the next tick so the opening click does not close it, and a target no longer in the document (a font row removed after selecting it) is not taken as an outside click. The token font combobox uses the same component, so it gets the fix too. Closes #12246 AI-assisted-by: claude-opus-5-5 * 🐛 Hide the empty Recent section in the font selector The "Recent" heading showed with `(and recent-fonts show-recent)`, but the filtered recent fonts are a vector and an empty one is truthy. So a search with no matches showed the heading over a blank list, and any search showed it over results that are not recent. - Show the "Recent" section only when it has fonts. - Show "No matching fonts" when the search finds nothing. - Square the list's top corners only when it sits under "Recent". Closes #12249 AI-assisted-by: claude-opus-5-5 * 🐛 Separate the applied font from the focused one in font selector The tick marked the first search result when the applied font was filtered out, since one value drove both the tick and the font Enter applies. So the tick showed a font that was not applied. The tick and the focus are now two states: - The tick marks the font the text had when the selector opened. - A green border, as in the select dropdowns, marks the font Enter applies. Typing moves it to the first result without previewing it. Arrow keys move it and, once they stop for a moment, preview the font. Previewing every font of a held key flooded the store until React stopped with "Maximum update depth exceeded". - Recent fonts get no border: they are reached with the mouse or by filtering, not with the arrow keys. - Enter applies the focused font. Esc and an outside click undo the preview. Also make the rows fill the list width, so the border is not clipped, and scroll to the focused row only through the virtualized list. Closes #12247 AI-assisted-by: claude-opus-5-5 * ♻️ Refactor typography.scss to the Design System Move typography.scss to the DS tokens and mixins. No visual change intended, except that the rows that took their typography from %asset-element now use the DS body-small (line-height 1.3 instead of 1.4). - Inline the %asset-element and %input-base placeholders, resolving their design-token aliases to DS tokens and using local CSS variables for state colors. - Keep the spacing inputs on %input-element and %button-icon-small, with a TODO: those placeholders style the icon svg and the input elements, and go away when the controls move to the DS numeric-input*, out of scope here. - Use logical properties and DS spacing and size tokens. - Merge the duplicated .typography-sample rule. - Note why the "Ag" samples have no DS typography, and leave TODOs where no DS typography matches exactly. AI-assisted-by: claude-opus-5-5