Vuetify Version: 2.3.0
Last working version: 2.2.34
Vue Version: 2.6.11
Browsers: Chrome 84.0.4147.45
OS: Windows 10
Open the codepens and compare css line-height for the various typopgraphy types.
No change from v2.2.x
All but one line-height value has changed.
v2.3.0 codepen example link
v2.2.34 codepen example link
Given the significant layout differences these changes cause on the page, I would consider this to either be a regression or a breaking change.
I can no longer find md2 guidance on line-height for text (some recent changes to the docs, maybe), but as a visual example, card text layout in vuetify dialogs now differ from the examples displayed on material.io.
Here's a table of the changes. Note that for some reason, headline hasn't changed, so it's actually the oddball of the group now.
| Line-height | Was | Now |
|-------------|----------|--------|
| display-4 | 6rem | normal |
| display-3 | 3.75rem | normal |
| display-2 | 3.125rem | normal |
| display-1 | 2.5rem | normal |
| headline | 2rem | 2rem |
| title | 2rem | normal |
| subtitle-1 | 1.75rem | normal |
| subtitle-2 | 1.375rem | normal |
| body-1 | 1.5rem | normal |
| body-2 | 1.25rem | normal |
| caption | 1.25rem | normal |
| overline | 1rem | normal |
For reference, here's the md typography spec in demo format. Indeed, v2.2.34 matched the spec while v2.3.0 does not.
I see two exceptions:
Button text line-height in the spec is an odd 2.25rem, which breaks vertical centering in a default v-btnOverline line-height in the spec is a whopping 2rem, which vuetify neither matches in v2.2 nor v2.3.https://material.io/design/typography/the-type-system.html
Although I'll say that I agree about the regression and it'll be resolved today in the patch.
Most helpful comment
https://material.io/design/typography/the-type-system.html
Although I'll say that I agree about the regression and it'll be resolved today in the patch.