Convert line-height from pixel values #848
Conversation
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-848
src/helpers/_typography.scss
Outdated
|
|
||
| // Convert line-heights specified in pixels into a relative value, unless | ||
| // they are already unit-less (and thus already treated as relative values) | ||
| @if not unitless($line-height) { |
There was a problem hiding this comment.
If you set your line-height to something other than 'px' would it this fail?
There was a problem hiding this comment.
Yep, because Sass doesn't know how to e.g. divide pixels by em.
We've got a few options…
- let Sass' error handling catch it
- detect if the units do not match and do nothing (output line-height as defined in the map)
- detect if the units do not match and throw our own error
Not sure what the best option is. Can you think of cases where you'd intentionally want to use define font-size and line-height in different units?
There was a problem hiding this comment.
I suppose the only case I'm thinking of is this could be confusing for people making their own font maps, but if it's clearly documented maybe it'll be fine.
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-848
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-848
|
@NickColley I've made the line-height stuff into its own function and attempted to make it handle those edge cases better. Can you please re-review? |
|
Good use of tests 👍 |
|
changelog needed for this? |
Rather than having to declare the line-heights as relative values (such as 1.5) in the font map, allow them to be specified in pixels and convert them to relative unitless values within our typography mixin. This provides a much clearer way to define line heights without the need for comments explaining how the values are calculated, whilst retaining the benefits of using relative unitless line-heights.
By doing the font-size override first we also end up converting overridden line-heights into relative numbers.
36degrees
force-pushed
the
calculate-line-heights
branch
from
66596b8
to
f5d5479
Compare
Rather than having to declare the line-heights as relative values (such as 1.5) in the font map, allow them to be specified in pixels and convert them to relative unitless values within our typography mixin.
This provides a much clearer way to define line heights without the need for comments explaining how the values are calculated, whilst retaining the benefits of using relative unitless line-heights.