From 8e594d5e94045d651ab743d57c19246d89c2b522 Mon Sep 17 00:00:00 2001 From: "Grigorii K. Shartsev" Date: Thu, 1 Aug 2024 12:16:07 +0200 Subject: [PATCH 1/2] docs(upgrade_to_30): add line-height change docs Signed-off-by: Grigorii K. Shartsev --- .../app_upgrade_guide/upgrade_to_30.rst | 28 +++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst b/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst index a0503642921..e5285e6bf8d 100644 --- a/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst +++ b/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst @@ -38,6 +38,34 @@ Nextcloud now provides meaningful default styles for heading elements. This can cause visual regressions if your code does not explicitly set font size and weight. If you need to use heading elements outside of text content, you might need to adjust their styles. +Line height +^^^^^^^^^^ + +`--default-line-height` CSS variable is a unitless value `1.5` instead of a unit value `24px`: +- `line-height` of an element with a non-default font size is now adjusted to the element's font size +- Unit calculation isn't valid anymore. Use [lh](https://developer.mozilla.org/en-US/docs/Web/CSS/length#lh) unit instead. + +```diff +element1 { + /* Invalid CSS calculation. Use lh unit instead */ +- height: calc(var(--default-line-height) * 2); ++ height: 2lh; + +- padding-left: calc(var(--default-line-height) + 10px); ++ padding-left: calc(1lh + 10px); +} + +element2 { + font-size: calc(var(--default-font-size), 2); + + /* Valid usage. No changes are needed if the font-size is default. */ + line-height: calc(var(--default-line-height) * 2); + + /* No line-height adjustment is needed anymore */ +- line-height: calc(var(--default-line-height), 2); +} +``` + Added APIs ^^^^^^^^^^ From 0d3bd0670b9f3d5f5472aa33f780de27caccdd63 Mon Sep 17 00:00:00 2001 From: Ferdinand Thiessen Date: Thu, 1 Aug 2024 15:22:38 +0200 Subject: [PATCH 2/2] fixup: Adjust code to rst syntax Signed-off-by: Ferdinand Thiessen --- .../app_upgrade_guide/upgrade_to_30.rst | 42 ++++++++++--------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst b/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst index e5285e6bf8d..1cc09a1ee5e 100644 --- a/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst +++ b/developer_manual/app_publishing_maintenance/app_upgrade_guide/upgrade_to_30.rst @@ -35,36 +35,38 @@ Font sizes ^^^^^^^^^^ Nextcloud now provides meaningful default styles for heading elements. + This can cause visual regressions if your code does not explicitly set font size and weight. If you need to use heading elements outside of text content, you might need to adjust their styles. Line height -^^^^^^^^^^ +^^^^^^^^^^^ + +``--default-line-height`` CSS variable is a unitless value ``1.5`` instead of a unit value ``24px``: -`--default-line-height` CSS variable is a unitless value `1.5` instead of a unit value `24px`: -- `line-height` of an element with a non-default font size is now adjusted to the element's font size -- Unit calculation isn't valid anymore. Use [lh](https://developer.mozilla.org/en-US/docs/Web/CSS/length#lh) unit instead. +- *line-height* of an element with a non-default font size is now adjusted to the element's font size +- Unit calculation isn't valid anymore. Use `lh `_ unit instead. -```diff -element1 { - /* Invalid CSS calculation. Use lh unit instead */ -- height: calc(var(--default-line-height) * 2); -+ height: 2lh; +.. code-block:: diff -- padding-left: calc(var(--default-line-height) + 10px); -+ padding-left: calc(1lh + 10px); -} + element1 { + /* Invalid CSS calculation. Use lh unit instead */ + - height: calc(var(--default-line-height) * 2); + + height: 2lh; -element2 { - font-size: calc(var(--default-font-size), 2); + - padding-left: calc(var(--default-line-height) + 10px); + + padding-left: calc(1lh + 10px); + } + + element2 { + font-size: calc(var(--default-font-size), 2); - /* Valid usage. No changes are needed if the font-size is default. */ - line-height: calc(var(--default-line-height) * 2); + /* Valid usage. No changes are needed if the font-size is default. */ + line-height: calc(var(--default-line-height) * 2); - /* No line-height adjustment is needed anymore */ -- line-height: calc(var(--default-line-height), 2); -} -``` + /* No line-height adjustment is needed anymore */ + - line-height: calc(var(--default-line-height), 2); + } Added APIs ^^^^^^^^^^