Text component vertical space changed in v3

[danis039]

Hi guys,

I've just migrated to v3 and noticed there's a change in the vertical space of text component.

v2:

.text-component p {
    margin-bottom: calc(var(--space-unit) * 0.75 * var(--text-vspace-multiplier, 1));
}

v3:

.text-component p {
    margin-bottom: calc(var(--space-unit)*.9375*var(--text-space-y-multiplier, 1));
}

Was this change intentional? Because in order to keep the same layout of my text components I need to alter my --text-space-y-multiplier/--text-vspace-multiplier values.

Cheers!

[sebastiano-guerriero]

Hi Daniel!

Yes, it was intentional. Because we moved from Em to Rem units in v3, the vertical spacing was no longer affected by the font size, so we had to increase a bit the spacing factor.

If you upgraded to v2 and kept the Em units in your project, as you already mentioned, it would be a good idea to modify the --line-height-multiplier and --text-space-y-multiplier variables.

If you're using Rem units, you can modify the variables mentioned above, or the --space-unit , in your custom-style/_typography.scss file.

.text-component {
  --line-height-multiplier: 1;
  --text-space-y-multiplier: 1;

  > * { // use Em units
    --text-unit: 1em;
    --space-unit: 1em;
  }
}

Cheers

[danis039]

Thanks for the info, @sebastiano-guerriero :) Just out of curiosity, why the move to rem units (since you had this nice em unit system in place)?

[sebastiano-guerriero]

no prob! This decision was mostly due to the problems in handling horizontal spacing when using Em units (e.g., if you have two text elements stacked vertically, with two different font sizes, and you want to set the same left padding using utility classes). However, we've preserved the best (old) Em features using CSS variables :) More info here: https://codyhouse.co/blog/post/codyframe-3-0#space-type

Cheers