[Text] It should be possible to set a line-height for a Text component

🚀 Feature request

It’s currently not possible to add a line-height value to a Text component without using exceptionallySetClassName. I think it would be help to have a lineHeight property added so that consumers can control the leading of their typography.

The values for the line height would need to be determined.

Motivation

The motivation comes from needing to add line height to copy rendered within an application.

Example

This feature could be used any time you want to use a Text component to render multiline copy.

Possible implementations

• A lineHeight property could be an absolute value.

.lineHeight-small  { line-height: 1.2; }
.lineHeight-medium { line-height: 1.6; }
.lineHeight-large  { line-height: 2.0; }

• A lineHeight property could work as a “multiplier” on the size prop.

.size-caption {
    font-size: var(--reactist-font-size-caption);
    line-height: var(--reactist-line-height-caption);
}

.line-height-caption-small {
    line-height: calc(var(--reactist-line-height-caption) - 0.2);
}

.line-height-caption-medium {
    line-height: var(--reactist-line-height-caption);
}

.line-height-caption-large {
    line-height: calc(var(--reactist-line-height-caption) + 0.2);
}

[gnapse]

@tsamoudakis thanks for the follow-up. I do not recall having expressed any concerns about the feasibility to go forward with any typography styles in the short term. Maybe I was misunderstood, but on this particular topic I see little hurdles ahead, or none at all. It’s just a matter of making the time.

Right now, in this particular issue, the ball is in our court. We’ll ping you when we have the situation ready to try, either behind a feature flag, or on staging in Twist and Todoist for us to try before releasing.

[gnapse]

Paul, that’s all super clear. And yes, TD could be affected too, good point.

Anyway, about the approach you suggest, that could work. I was hoping to avoid introducing more feature flags and involving to have to do TD or TW releases. I’m still inclined to validate things on staging first.