Repository navigation
Conversation
Use a 24-unit viewBox with a 1.5-unit stroke, the same proportions as the icon library, and let SVG scaling set the rendered stroke width instead of keeping a fixed 2px non-scaling stroke.
🤖 PR meta 🤖🎉 PropsIf you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. Updated as activity occurs, without notifying anyone named here. Add the |
|
I'll ultimately defer to @jameskoster and @ciampo on this, what works for the present state for icon scaling. But I'd like to revisit how we treat stroke width scaling above a certain size, I think there are aspects to the themeability that we can explore in the future. |
|
This is a bit tricky because if the principle is that the stroke-weight should make the spinner feel like part of the text adjacent, then in the button context this feels a little off because button label has emphasised weight. The spinner feels light in comparison. But next to body text this feels right. Would it be too much to have an option for emphasised spinner stroke weight for these cases? Or perhaps that's just something the button should override. |
That's one of the things I was alluding to. I'd love to explore scaling the stroke-width according to the font-weight. So if you had a 60px font size at font-weight 100 (e.g. very thin), so would the stroke-width be thin, even if it was large. |
Match the emphasized label weight with a 1.5x stroke, set from the Button stylesheet so the Spinner default stays unchanged.
|
I've appended new screenshots to the description that show the button spinners adjusted ad hoc to a heavier weight that I thought looked ok. For now I think the ad hoc weight is fine. If we find ourselves wanting this a lot, I'm thinking we could perhaps have Sound good? |
ciampo
left a comment
ciampo
left a comment
There was a problem hiding this comment.
LGTM code-wise, altohough it will need a design blessing ✨
What?
Follow-up to the discussion in #84633.
Scale the
@wordpress/uiSpinnerstroke width with the spinner's rendered size, using the same proportions as the WordPress icons.Why?
In the discussion on #84633, the small spinner looked heavy next to the thin plus and check icons.
Spinnercurrently uses a 2px non-scaling stroke at every size, while icons draw a 1.5-unit stroke in a 24×24 viewBox and scale with their size. The suggestion there was for inline spinners to follow the same rules as icons.How?
Use a 24×24 viewBox with a 1.5-unit stroke and remove
vector-effect: non-scaling-stroke, so SVG scaling sets the rendered stroke width. The arc keeps its current geometry, a half-circle whose centerline sits on the edge of the box, so the shape, centering, overflow, and rotation are unchanged. Removingnon-scaling-strokefrom the previous 100×100 geometry alone would have given a stroke of 0.32px at 16px.The rendered stroke is now the spinner size divided by 16:
The default 16px spinner is thinner.
Buttonloading spinners, sized to the button font size, go from 2px to about 1.49px at 13px. The validating spinner in form fields goes from 2px to 0.75px at 12px. Sizes above 32px are thicker than before. The color, forced-colors stroke, animation,roleandfocusableattributes, and sizing API are unchanged.Buttonsets a heavier 2.75-unit stroke on its spinner, so the spinner matches the emphasized label weight. At the 13px button font size, this renders at about 1.49px, close to the 1.5px stroke that 24px icons have. The override lives in theButtonstylesheet, in thecompositionslayer, so theSpinnerdefault is unchanged. Without it, theButtonspinner would be about 0.81px at 13px.Testing Instructions
Screenshots or screencast
Buttonloading spinnerThe
Buttonrow in the table above predates the heavierButtonstroke. Before uses the default 1.5-unit stroke, and after uses the 2.75-unitButtonstroke. Idle labels are shown above the loading states for weight comparison, with a standalone 13pxSpinnernext to body text.