github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-09-08 13:09:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Fix font family preview sample (#11473)

Browse Source 
* 🐛 Fix font family preview sample

* 🐛 Fix font line height inside font selector
This commit is contained in:
Eva Marco 2026-09-02 13:55:38 +02:00 committed by GitHub
parent b46ed37141
commit 7620386215
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 20 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs
View File

@ -164,11 +164,13 @@
(defn- sample-container-style
"Inline style that applies the typography font to the (clipped, fixed-height)
sample container."
sample container. Must be a real JS object (`#js`), not a ClojureScript map:
the `:style` value here is a runtime expression, not a literal recognized by
the hiccup macro, so it reaches React unconverted."
[typography]
{:font-family (:font-family typography)
:font-weight (:font-weight typography)
:font-style (:font-style typography)})
#js {:fontFamily (:font-family typography)
:fontWeight (:font-weight typography)
:fontStyle (:font-style typography)})
(defn- sample-text-style
"Inline style that optically centers the sample glyphs. Must be applied to
@ -177,7 +179,7 @@
would shift the whole box relative to the row instead of the glyphs inside it."
[em]
(when-not (zero? em)
{:transform (dm/str "translateY(" em "em)")}))
#js {:transform (dm/str "translateY(" em "em)")}))
;; --- FONT SELECTOR --------------------------------------------------------
@ -219,13 +221,18 @@
:role "img"
:aria-label (:name font)}
[:use {:href (dm/str "#" fonts/preview-sprite-prefix font-id)}]]
[:span {:class (stl/css :font-item-label)
:style (cond-> {}
loaded?
(assoc :font-family (dm/str "\"" (:family font) "\", sans-serif"))
(not (zero? label-offset))
(assoc :transform (dm/str "translateY(" label-offset "em)")))}
(:name font)])))
;; The vertical correction goes on an INNER span, not on `.font-item-label`
;; itself: that class carries its own `overflow: hidden` (from the
;; text-ellipsis mixin, needed to truncate long font names), and a
;; transform applied to a self-clipping element moves its clip region
;; along with it — a no-op. The inner span has no overflow of its own, so
;; the shift actually moves the ink within the outer's fixed clip area.
[:span {:class (stl/css :font-item-label)}
[:span {:style #js {:fontFamily (when loaded?
(dm/str "\"" (:family font) "\", sans-serif"))
:transform (when-not (zero? label-offset)
(dm/str "translateY(" label-offset "em)"))}}
(:name font)]])))
(mf/defc font-item*
{::mf/wrap [mf/memo]}

2
frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.scss
View File

@ -101,7 +101,7 @@ $font-preview-box-height: 28px;
box-sizing: border-box;
background-color: var(--font-name-wrapper-background-color);
margin-block-end: var(--sp-s);
padding: var(--sp-s) 0 var(--sp-s) var(--sp-m);
padding-inline-start: var(--sp-m);
&:focus-within {
--font-name-wrapper-border-color: var(--color-accent-primary);