Vuetify: [Bug Report] CSS line-height changes break layout

Created on 14 Jun 2020  路  2Comments  路  Source: vuetifyjs/vuetify

Environment

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

Steps to reproduce

Open the codepens and compare css line-height for the various typopgraphy types.

Expected Behavior

No change from v2.2.x

Actual Behavior

All but one line-height value has changed.

Reproduction Link

v2.3.0 codepen example link
v2.2.34 codepen example link

Comments

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 |

Framework regression

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.

All 2 comments

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:

  1. Button text line-height in the spec is an odd 2.25rem, which breaks vertical centering in a default v-btn
  2. Overline 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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Antway picture Antway  路  3Comments

cawa-93 picture cawa-93  路  3Comments

gluons picture gluons  路  3Comments

efootstep picture efootstep  路  3Comments

ricardovanlaarhoven picture ricardovanlaarhoven  路  3Comments