fix: demo app crashes when scrolling through color tokens with orange theme (#953)

* Handle unspecified colors in color tokens screen

* Rename token illustration methods and add previews

Author: florentmaitre

app/src/main/java/com/orange/ouds/app/ui/tokens/Token.kt

@@ -14,6 +14,7 @@ package com.orange.ouds.app.ui.tokens
 
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.isUnspecified
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.Dp
@@ -33,7 +34,13 @@ data class Token<T>(val name: String, val relativeName: String, val value: @Comp
     val literalValue: String
         @Composable
         get() = when (val value = value()) {
-            is Color -> stringResource(id = R.string.app_tokens_colorFormat_label, value.value.toString(16).substring(2, 8).uppercase())
+            is Color -> {
+                if (value.isUnspecified) {
+                    stringResource(id = R.string.app_tokens_color_unspecified_label)
+                } else {
+                    stringResource(id = R.string.app_tokens_colorFormat_label, value.value.toString(16).substring(2, 8).uppercase())
+                }
+            }
             is Float -> "\u200e${value}f" // "\u200e" forces LTR display even if the app is in arabic
             is Dp -> "\u200e${value} dp".replace(".0.dp", "").substringBeforeLast(".dp")
             is TextStyle -> "\u200e${value.fontSize} sp".replace(".0.sp", "").substringBeforeLast(".sp")

app/src/main/java/com/orange/ouds/app/ui/tokens/TokenCategoryDetailScreen.kt

@@ -219,23 +219,23 @@ private fun TokenRow(tokenProperty: TokenProperty<out TokenCategory<*>>, token:
 
 @Composable
 private fun TokenIllustration(tokenProperty: TokenProperty<*>, token: Token<*>) = when (tokenProperty) {
-    is TokenProperty.BorderWidth -> BorderIllustrationBox(width = token.value() as Dp)
-    is TokenProperty.BorderRadius -> BorderIllustrationBox(shape = RoundedCornerShape(token.value() as Dp))
-    is TokenProperty.BorderStyle -> BorderIllustrationBox(style = token.value() as OudsBorderStyle)
+    is TokenProperty.BorderWidth -> BorderIllustration(width = token.value() as Dp)
+    is TokenProperty.BorderRadius -> BorderIllustration(shape = RoundedCornerShape(token.value() as Dp))
+    is TokenProperty.BorderStyle -> BorderIllustration(style = token.value() as OudsBorderStyle)
     is TokenProperty.ColorAction, TokenProperty.ColorAlways, TokenProperty.ColorBackground, TokenProperty.ColorBorder, TokenProperty.ColorContent,
-    TokenProperty.ColorOverlay, TokenProperty.ColorSurface -> BorderIllustrationBox(backgroundColor = token.value() as Color)
-    is TokenProperty.Opacity -> OpacityIllustrationBox(opacity = token.value() as Float)
-    is TokenProperty.Elevation -> ElevationIllustrationSurface(elevation = token.value() as Dp)
-    is TokenProperty.SizeIconDecorative -> SizeIconIllustrationBox(size = token.value() as Dp)
-    is TokenProperty.SizeIconWithText -> SizeIconIllustrationBox(size = token.value() as Dp)
-    is TokenProperty.SpaceColumnGap, TokenProperty.SpaceFixed, TokenProperty.SpaceScaled -> SpaceIllustrationBox(
+    TokenProperty.ColorOverlay, TokenProperty.ColorSurface -> ColorIllustration(color = token.value() as Color)
+    is TokenProperty.Opacity -> OpacityIllustration(opacity = token.value() as Float)
+    is TokenProperty.Elevation -> ElevationIllustration(elevation = token.value() as Dp)
+    is TokenProperty.SizeIconDecorative -> SizeIconIllustration(size = token.value() as Dp)
+    is TokenProperty.SizeIconWithText -> SizeIconIllustration(size = token.value() as Dp)
+    is TokenProperty.SpaceColumnGap, TokenProperty.SpaceFixed, TokenProperty.SpaceScaled -> SpaceIllustration(
         size = token.value() as Dp,
         contentAlignment = Alignment.Center
     )
-    TokenProperty.SpacePaddingInline -> SpaceIllustrationBox(size = token.value() as Dp)
-    TokenProperty.SpacePaddingInset -> SpacePaddingInsetIllustrationBox(size = token.value() as Dp)
-    TokenProperty.SpacePaddingStack -> SpaceIllustrationBox(size = token.value() as Dp, orientation = SpaceOrientation.Vertical)
-    TokenProperty.SpaceRowGap -> SpaceIllustrationBox(size = token.value() as Dp, orientation = SpaceOrientation.Vertical, contentAlignment = Alignment.Center)
+    TokenProperty.SpacePaddingInline -> SpaceIllustration(size = token.value() as Dp)
+    TokenProperty.SpacePaddingInset -> SpacePaddingInsetIllustration(size = token.value() as Dp)
+    TokenProperty.SpacePaddingStack -> SpaceIllustration(size = token.value() as Dp, orientation = SpaceOrientation.Vertical)
+    TokenProperty.SpaceRowGap -> SpaceIllustration(size = token.value() as Dp, orientation = SpaceOrientation.Vertical, contentAlignment = Alignment.Center)
     TokenProperty.Typography, TokenProperty.Grid -> Unit
 }
 

app/src/main/java/com/orange/ouds/app/ui/tokens/TokenPropertyIllustration.kt

@@ -12,13 +12,15 @@
 
 package com.orange.ouds.app.ui.tokens
 
+import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -30,24 +32,31 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.Shape
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.isUnspecified
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.PreviewLightDark
+import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.orange.ouds.app.R
+import com.orange.ouds.app.ui.utilities.composable.AppPreview
 import com.orange.ouds.core.theme.OudsBorderStyle
 import com.orange.ouds.core.theme.OudsTheme
 import com.orange.ouds.core.theme.dashedBorder
 import com.orange.ouds.core.theme.dottedBorder
 import com.orange.ouds.core.theme.takeUnlessHairline
 import com.orange.ouds.foundation.extensions.orElse
+import com.orange.ouds.foundation.utilities.BasicPreviewParameterProvider
 
 private val defaultIllustrationSize = 64.dp
 
 @Composable
-fun IllustrationBox(
+private fun IllustrationBox(
     modifier: Modifier = Modifier,
     backgroundColor: Color = OudsTheme.colorScheme.surface.secondary,
     contentAlignment: Alignment = Alignment.TopStart,
@@ -63,7 +72,7 @@ fun IllustrationBox(
 }
 
 @Composable
-fun BorderIllustrationBox(
+fun BorderIllustration(
     width: Dp = 1.dp,
     shape: Shape = RectangleShape,
     style: OudsBorderStyle = OudsBorderStyle.Solid,
@@ -86,14 +95,38 @@ fun BorderIllustrationBox(
 }
 
 @Composable
-fun ElevationIllustrationSurface(elevation: Dp) {
+fun ColorIllustration(color: Color) {
+    IllustrationBox(
+        modifier = Modifier.border(width = 1.dp, color = OudsTheme.colorScheme.border.emphasized),
+        backgroundColor = if (color.isUnspecified) Color.White else color
+    ) {
+        if (color.isUnspecified) {
+            Canvas(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .clip(shape = RectangleShape)
+            ) {
+                drawLine(
+                    color = Color.Red,
+                    start = Offset(x = size.width, y = 0f),
+                    end = Offset(x = 0f, y = size.height),
+                    strokeWidth = 2.dp.toPx(),
+                    cap = StrokeCap.Square
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun ElevationIllustration(elevation: Dp) {
     Surface(shadowElevation = elevation) {
         IllustrationBox(backgroundColor = OudsTheme.colorScheme.background.secondary)
     }
 }
 
 @Composable
-fun OpacityIllustrationBox(opacity: Float) {
+fun OpacityIllustration(opacity: Float) {
     val squareColor = if (isSystemInDarkTheme()) Color.White else Color.Black
     Box {
         Image(painter = painterResource(id = R.drawable.il_opacity_union), contentDescription = null)
@@ -108,7 +141,7 @@ fun OpacityIllustrationBox(opacity: Float) {
 }
 
 @Composable
-fun SizeIconIllustrationBox(size: Dp) {
+fun SizeIconIllustration(size: Dp) {
     IllustrationBox(modifier = Modifier.size(80.dp), contentAlignment = Alignment.Center) {
         Icon(
             modifier = Modifier.size(size),
@@ -120,7 +153,7 @@ fun SizeIconIllustrationBox(size: Dp) {
 }
 
 @Composable
-fun SpacePaddingInsetIllustrationBox(size: Dp) {
+fun SpacePaddingInsetIllustration(size: Dp) {
     IllustrationBox {
         Box(
             modifier = Modifier
@@ -138,7 +171,7 @@ fun SpacePaddingInsetIllustrationBox(size: Dp) {
 }
 
 @Composable
-fun SpaceIllustrationBox(
+fun SpaceIllustration(
     size: Dp,
     orientation: SpaceOrientation = SpaceOrientation.Horizontal,
     contentAlignment: Alignment = Alignment.TopStart
@@ -162,3 +195,49 @@ fun SpaceIllustrationBox(
 enum class SpaceOrientation {
     Horizontal, Vertical
 }
+
+@PreviewLightDark
+@Composable
+fun PreviewBorderIllustration() = AppPreview {
+    BorderIllustration()
+}
+
+@PreviewLightDark
+@Composable
+fun PreviewColorIllustration(@PreviewParameter(ColorIllustrationPreviewParameterProvider::class) color: Color) = AppPreview {
+    ColorIllustration(color)
+}
+
+private class ColorIllustrationPreviewParameterProvider : BasicPreviewParameterProvider<Color>(Color.Magenta, Color.Unspecified)
+
+@PreviewLightDark
+@Composable
+fun PreviewElevationIllustration() = AppPreview {
+    Box(modifier = Modifier.padding(10.dp)) {
+        ElevationIllustration(8.dp)
+    }
+}
+
+@PreviewLightDark
+@Composable
+fun PreviewOpacityIllustration() = AppPreview {
+    OpacityIllustration(0.5f)
+}
+
+@PreviewLightDark
+@Composable
+fun PreviewSizeIconIllustration() = AppPreview {
+    SizeIconIllustration(size = 32.dp)
+}
+
+@PreviewLightDark
+@Composable
+fun PreviewSpacePaddingInsetIllustration() = AppPreview {
+    SpacePaddingInsetIllustration(4.dp)
+}
+
+@PreviewLightDark
+@Composable
+fun PreviewSpaceIllustration() = AppPreview {
+    SpaceIllustration(8.dp)
+}

app/src/main/res/values-ar/strings.xml

@@ -58,6 +58,7 @@
     <!-- Tokens: color -->
     <string name="app_tokens_color_label">اللون</string>
     <string name="app_tokens_color_description_text">اللون يعزز هويتنا البصرية ويضمن التناسق عبر تجارب المنتجات.</string>
+    <string name="app_tokens_color_unspecified_label">Unspecified</string>
 
     <!-- Tokens: dimension -->
     <string name="app_tokens_dimension_label">الأبعاد</string>

app/src/main/res/values/strings.xml

@@ -68,6 +68,7 @@
     <string name="app_tokens_color_content_label" translatable="false">Content</string>
     <string name="app_tokens_color_overlay_label" translatable="false">Overlay</string>
     <string name="app_tokens_color_surface_label" translatable="false">Surface</string>
+    <string name="app_tokens_color_unspecified_label">Unspecified</string>
 
     <!-- Tokens: dimension -->
     <string name="app_tokens_dimension_label">Dimension</string>