Merge pull request #5945 from element-hq/feature/bma/listItemFont
Use only font from compound
This commit is contained in:
Benoit Marty
GitHub
commit
fe31d5972c
10 changed files with 42 additions and 58 deletions
|
|
@ -231,7 +231,7 @@ private fun ImageOptimizationSelector(state: MediaOptimizationSelectorState) {
|
|||
Text(
|
||||
modifier = Modifier.weight(1f).align(Alignment.CenterVertically),
|
||||
text = stringResource(R.string.screen_media_upload_preview_optimize_image_quality_title),
|
||||
style = ElementTheme.materialTypography.bodyLarge,
|
||||
style = ElementTheme.typography.fontBodyLgRegular,
|
||||
)
|
||||
Switch(
|
||||
modifier = Modifier.height(32.dp),
|
||||
|
|
@ -337,7 +337,7 @@ private fun VideoQualitySelectorDialog(
|
|||
supportingContent = {
|
||||
Text(
|
||||
text = preset.subtitle(),
|
||||
style = ElementTheme.materialTypography.bodyMedium,
|
||||
style = ElementTheme.typography.fontBodyMdRegular,
|
||||
color = ElementTheme.colors.textSecondary,
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -234,7 +234,7 @@ private fun VideoQualitySelectorDialog(
|
|||
supportingContent = {
|
||||
Text(
|
||||
text = subtitle,
|
||||
style = ElementTheme.materialTypography.bodyMedium,
|
||||
style = ElementTheme.typography.fontBodyMdRegular,
|
||||
color = ElementTheme.colors.textSecondary,
|
||||
)
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
version https://git-lfs.github.com/spec/v1
|
||||
oid sha256:ac84a7175c4a4897aa28eddcf722b7997c6576f612eb38fa09ffabcf7be11e00
|
||||
size 119496
|
||||
oid sha256:32b12d0b26cd016a632a4cb87b71d5efcb2c0d816bf565bc90aee9963ce2d5df
|
||||
size 134117
|
||||
|
|
|
|||
|
|
@ -17,13 +17,14 @@ import androidx.compose.ui.text.TextStyle
|
|||
import androidx.compose.ui.tooling.preview.Preview
|
||||
import androidx.compose.ui.unit.dp
|
||||
import io.element.android.compound.theme.ElementTheme
|
||||
import io.element.android.compound.tokens.compoundTypography
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
internal fun TypographyPreview() = ElementTheme {
|
||||
Surface {
|
||||
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
|
||||
with(ElementTheme.materialTypography) {
|
||||
with(compoundTypography) {
|
||||
TypographyTokenPreview(displayLarge, "Display large")
|
||||
TypographyTokenPreview(displayMedium, "Display medium")
|
||||
TypographyTokenPreview(displaySmall, "Display small")
|
||||
|
|
@ -44,6 +45,33 @@ internal fun TypographyPreview() = ElementTheme {
|
|||
}
|
||||
}
|
||||
|
||||
@Preview
|
||||
@Composable
|
||||
internal fun CompoundTypographyPreview() = ElementTheme {
|
||||
Surface {
|
||||
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
|
||||
with(ElementTheme.typography) {
|
||||
TypographyTokenPreview(fontHeadingXlBold, "fontHeadingXlBold")
|
||||
TypographyTokenPreview(fontHeadingXlRegular, "fontHeadingXlRegular")
|
||||
TypographyTokenPreview(fontHeadingLgBold, "fontHeadingLgBold")
|
||||
TypographyTokenPreview(fontHeadingLgRegular, "fontHeadingLgRegular")
|
||||
TypographyTokenPreview(fontHeadingMdBold, "fontHeadingMdBold")
|
||||
TypographyTokenPreview(fontHeadingMdRegular, "fontHeadingMdRegular")
|
||||
TypographyTokenPreview(fontHeadingSmMedium, "fontHeadingSmMedium")
|
||||
TypographyTokenPreview(fontHeadingSmRegular, "fontHeadingSmRegular")
|
||||
TypographyTokenPreview(fontBodyLgMedium, "fontBodyLgMedium")
|
||||
TypographyTokenPreview(fontBodyLgRegular, "fontBodyLgRegular")
|
||||
TypographyTokenPreview(fontBodyMdMedium, "fontBodyMdMedium")
|
||||
TypographyTokenPreview(fontBodyMdRegular, "fontBodyMdRegular")
|
||||
TypographyTokenPreview(fontBodySmMedium, "fontBodySmMedium")
|
||||
TypographyTokenPreview(fontBodySmRegular, "fontBodySmRegular")
|
||||
TypographyTokenPreview(fontBodyXsMedium, "fontBodyXsMedium")
|
||||
TypographyTokenPreview(fontBodyXsRegular, "fontBodyXsRegular")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun TypographyTokenPreview(style: TextStyle, text: String) {
|
||||
Text(text = text, style = style)
|
||||
|
|
|
|||
|
|
@ -62,14 +62,6 @@ object ElementTheme {
|
|||
*/
|
||||
val typography: TypographyTokens = TypographyTokens
|
||||
|
||||
/**
|
||||
* Material 3 [Typography] tokens. In Figma, these have the `M3 Typography/` prefix.
|
||||
*/
|
||||
val materialTypography: Typography
|
||||
@Composable
|
||||
@ReadOnlyComposable
|
||||
get() = MaterialTheme.typography
|
||||
|
||||
/**
|
||||
* Returns whether the theme version used is the light or the dark one.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -8,18 +8,10 @@
|
|||
|
||||
package io.element.android.compound.screenshot
|
||||
|
||||
import androidx.compose.foundation.layout.Arrangement
|
||||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.material3.Surface
|
||||
import androidx.compose.material3.Text
|
||||
import androidx.compose.runtime.Composable
|
||||
import androidx.compose.ui.text.TextStyle
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.test.ext.junit.runners.AndroidJUnit4
|
||||
import com.github.takahirom.roborazzi.captureRoboImage
|
||||
import io.element.android.compound.previews.CompoundTypographyPreview
|
||||
import io.element.android.compound.screenshot.utils.screenshotFile
|
||||
import io.element.android.compound.theme.ElementTheme
|
||||
import io.element.android.compound.tokens.generated.TypographyTokens
|
||||
import org.junit.Test
|
||||
import org.junit.runner.RunWith
|
||||
import org.robolectric.annotation.Config
|
||||
|
|
@ -32,35 +24,7 @@ class CompoundTypographyTest {
|
|||
@Config(sdk = [35], qualifiers = "h2048dp-xxhdpi")
|
||||
fun screenshots() {
|
||||
captureRoboImage(file = screenshotFile("Compound Typography.png")) {
|
||||
ElementTheme {
|
||||
Surface {
|
||||
Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
|
||||
with(TypographyTokens) {
|
||||
TypographyTokenPreview(fontHeadingXlBold, "Heading XL Bold")
|
||||
TypographyTokenPreview(fontHeadingXlRegular, "Heading XL Regular")
|
||||
TypographyTokenPreview(fontHeadingLgBold, "Heading LG Bold")
|
||||
TypographyTokenPreview(fontHeadingLgRegular, "Heading LG Regular")
|
||||
TypographyTokenPreview(fontHeadingMdBold, "Heading MD Bold")
|
||||
TypographyTokenPreview(fontHeadingMdRegular, "Heading MD Regular")
|
||||
TypographyTokenPreview(fontHeadingSmMedium, "Heading SM Medium")
|
||||
TypographyTokenPreview(fontHeadingSmRegular, "Heading SM Regular")
|
||||
TypographyTokenPreview(fontBodyLgMedium, "Body LG Medium")
|
||||
TypographyTokenPreview(fontBodyLgRegular, "Body LG Regular")
|
||||
TypographyTokenPreview(fontBodyMdMedium, "Body MD Medium")
|
||||
TypographyTokenPreview(fontBodyMdRegular, "Body MD Regular")
|
||||
TypographyTokenPreview(fontBodySmMedium, "Body SM Medium")
|
||||
TypographyTokenPreview(fontBodySmRegular, "Body SM Regular")
|
||||
TypographyTokenPreview(fontBodyXsMedium, "Body XS Medium")
|
||||
TypographyTokenPreview(fontBodyXsRegular, "Body XS Regular")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
CompoundTypographyPreview()
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun TypographyTokenPreview(style: TextStyle, text: String) {
|
||||
Text(text = text, style = style)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,14 +57,14 @@ fun ErrorDialogWithDoNotShowAgain(
|
|||
Column {
|
||||
Text(
|
||||
text = content,
|
||||
style = ElementTheme.materialTypography.bodyMedium,
|
||||
style = ElementTheme.typography.fontBodyMdRegular,
|
||||
)
|
||||
Spacer(modifier = Modifier.height(8.dp))
|
||||
Row(verticalAlignment = Alignment.CenterVertically) {
|
||||
Checkbox(checked = doNotShowAgain, onCheckedChange = { doNotShowAgain = it })
|
||||
Text(
|
||||
text = stringResource(id = CommonStrings.common_do_not_show_this_again),
|
||||
style = ElementTheme.materialTypography.bodyMedium,
|
||||
style = ElementTheme.typography.fontBodyMdRegular,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ fun TextFieldDialog(
|
|||
item {
|
||||
Text(
|
||||
text = content,
|
||||
style = ElementTheme.materialTypography.bodyMedium,
|
||||
style = ElementTheme.typography.fontBodyMdRegular,
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ internal fun SimpleAlertDialogContent(
|
|||
content = {
|
||||
Text(
|
||||
text = content,
|
||||
style = ElementTheme.materialTypography.bodyMedium,
|
||||
style = ElementTheme.typography.fontBodyMdRegular,
|
||||
)
|
||||
},
|
||||
submitText = submitText,
|
||||
|
|
|
|||
|
|
@ -114,7 +114,7 @@ fun ListItem(
|
|||
|
||||
val decoratedHeadlineContent: @Composable () -> Unit = {
|
||||
CompositionLocalProvider(
|
||||
LocalTextStyle provides ElementTheme.materialTypography.bodyLarge,
|
||||
LocalTextStyle provides ElementTheme.typography.fontBodyLgRegular,
|
||||
LocalContentColor provides headlineColor,
|
||||
) {
|
||||
headlineContent()
|
||||
|
|
@ -123,7 +123,7 @@ fun ListItem(
|
|||
val decoratedSupportingContent: (@Composable () -> Unit)? = supportingContent?.let { content ->
|
||||
{
|
||||
CompositionLocalProvider(
|
||||
LocalTextStyle provides ElementTheme.materialTypography.bodyMedium,
|
||||
LocalTextStyle provides ElementTheme.typography.fontBodyMdRegular,
|
||||
LocalContentColor provides supportingColor,
|
||||
) {
|
||||
content()
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue