Sulkta-Coop/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Showkase does not take into account the fontScale parameter of the Preview annotation, so alter the LocalDensity in the CompositionLocalProvider.

Browse source
This commit is contained in:
Benoit Marty 2023-07-28 16:04:30 +02:00
parent bf0b364da9
commit 4cb0417afa
2 changed files with 102 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

38
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/preview/WithFontScale.kt Normal file
View file

@ -0,0 +1,38 @@
/*
* Copyright (c) 2023 New Vector Ltd
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package io.element.android.libraries.designsystem.preview
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.Density
/**
* Showkase does not take into account the `fontScale` parameter of the Preview annotation, so alter the
* LocalDensity in the CompositionLocalProvider.
*/
@Composable
fun WithFontScale(fontScale: Float, content: @Composable () -> Unit) {
CompositionLocalProvider(
LocalDensity provides Density(
density = LocalDensity.current.density,
fontScale = fontScale
)
) {
content()
}
}

121
libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/text/DpScale.kt
View file

@ -26,6 +26,7 @@ import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import io.element.android.libraries.designsystem.preview.ElementPreviewLight
import io.element.android.libraries.designsystem.preview.WithFontScale
import io.element.android.libraries.designsystem.theme.components.Text
import io.element.android.libraries.theme.ElementTheme
@ -49,71 +50,77 @@ fun Dp.applyScaleUp(): Dp = with(LocalDensity.current) {
return this@applyScaleUp * fontScale.coerceAtLeast(1f)
}
@Preview(fontScale = 0.75f)
@Preview
@Composable
fun DpScalePreview_0_75f() = ElementPreviewLight {
val fontSizeInDp = 16.dp
Column(
modifier = Modifier.padding(4.dp),
verticalArrangement = Arrangement.spacedBy(6.dp)
) {
Text(
text = "A text should have a size of 16.sp",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.toSp())
)
Text(
text = "A text should have the same size (applyScaleUp)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleUp().toSp())
)
Text(
text = "A text should be smaller (applyScaleDown)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleDown().toSp())
)
fun DpScalePreview_0_75f() = WithFontScale(0.75f) {
ElementPreviewLight {
val fontSizeInDp = 16.dp
Column(
modifier = Modifier.padding(4.dp),
verticalArrangement = Arrangement.spacedBy(6.dp)
) {
Text(
text = "Text with size of 16.sp",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.toSp())
)
Text(
text = "Text with the same size (applyScaleUp)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleUp().toSp())
)
Text(
text = "Text with a smaller size (applyScaleDown)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleDown().toSp())
)
}
}
}
@Preview(fontScale = 1.0f)
@Preview
@Composable
fun DpScalePreview_1_0f() = ElementPreviewLight {
val fontSizeInDp = 16.dp
Column(
modifier = Modifier.padding(4.dp),
verticalArrangement = Arrangement.spacedBy(6.dp)
) {
Text(
text = "A text with a size of 16.sp",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.toSp())
)
Text(
text = "A text with the same size (applyScaleUp)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleUp().toSp())
)
Text(
text = "A text with the same size (applyScaleDown)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleDown().toSp())
)
fun DpScalePreview_1_0f() = WithFontScale(1f) {
ElementPreviewLight {
val fontSizeInDp = 16.dp
Column(
modifier = Modifier.padding(4.dp),
verticalArrangement = Arrangement.spacedBy(6.dp)
) {
Text(
text = "Text with size of 16.sp",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.toSp())
)
Text(
text = "Text with the same size (applyScaleUp)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleUp().toSp())
)
Text(
text = "Text with the same size (applyScaleDown)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleDown().toSp())
)
}
}
}
@Preview(fontScale = 1.5f)
@Preview
@Composable
fun DpScalePreview_1_5f() = ElementPreviewLight {
val fontSizeInDp = 16.dp
Column(
modifier = Modifier.padding(4.dp),
verticalArrangement = Arrangement.spacedBy(6.dp)
) {
Text(
text = "A text with a size of 16.sp",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.toSp())
)
Text(
text = "A text with a bigger size (applyScaleUp)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleUp().toSp())
)
Text(
text = "A text with the same size (applyScaleDown)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleDown().toSp())
)
fun DpScalePreview_1_5f() = WithFontScale(1.5f) {
ElementPreviewLight {
val fontSizeInDp = 16.dp
Column(
modifier = Modifier.padding(4.dp),
verticalArrangement = Arrangement.spacedBy(6.dp)
) {
Text(
text = "Text with size of 16.sp",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.toSp())
)
Text(
text = "Text with a bigger size (applyScaleUp)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleUp().toSp())
)
Text(
text = "Text with the same size (applyScaleDown)",
style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = fontSizeInDp.applyScaleDown().toSp())
)
}
}
}