Use @DayNightPreviews to correctly render the PinIcon in dark mode (#795)

- Fixes rendering of `-night` resources in screenshot tests by overriding the `nightMode` with `paparazzi.unsafeUpdateConfig()`.

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt

@@ -52,7 +52,6 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import io.element.android.features.messages.impl.actionlist.model.TimelineItemAction
@@ -70,7 +69,8 @@ import io.element.android.features.messages.impl.utils.messagesummary.MessageSum
 import io.element.android.libraries.designsystem.ElementTextStyles
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
-import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.DayNightPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.text.toSp
 import io.element.android.libraries.designsystem.theme.components.Divider
@@ -395,18 +395,11 @@ private fun EmojiButton(
     }
 }
 
-@Preview
+@DayNightPreviews
 @Composable
-fun SheetContentLightPreview(@PreviewParameter(ActionListStateProvider::class) state: ActionListState) =
-    ElementPreviewLight { ContentToPreview(state) }
-
-@Preview
-@Composable
-fun SheetContentDarkPreview(@PreviewParameter(ActionListStateProvider::class) state: ActionListState) =
-    ElementPreviewDark { ContentToPreview(state) }
-
-@Composable
-private fun ContentToPreview(state: ActionListState) {
+fun SheetContentPreview(
+    @PreviewParameter(ActionListStateProvider::class) state: ActionListState
+) = ElementPreview {
     SheetContent(
         state = state,
         onActionClicked = {},

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/PinIcon.kt

@@ -23,11 +23,10 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.R
-import io.element.android.libraries.designsystem.preview.ElementPreviewDark
-import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.preview.DayNightPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.theme.ElementTheme
 
@@ -50,17 +49,8 @@ fun PinIcon(
     }
 }
 
-@Preview
+@DayNightPreviews
 @Composable
-fun PinIconLightPreview() =
-    ElementPreviewLight { ContentToPreview() }
-
-@Preview
-@Composable
-fun PinIconDarkPreview() =
-    ElementPreviewDark { ContentToPreview() }
-
-@Composable
-private fun ContentToPreview() {
+fun PinIconPreview() = ElementPreview {
     PinIcon()
 }

libraries/textcomposer/src/main/kotlin/io/element/android/libraries/textcomposer/TextComposer.kt

@@ -73,7 +73,8 @@ import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.ElementTextStyles
 import io.element.android.libraries.designsystem.VectorIcons
 import io.element.android.libraries.designsystem.modifiers.applyIf
-import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.DayNightPreviews
+import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.Surface
@@ -414,32 +415,9 @@ private fun BoxScope.SendButton(
     }
 }
 
-@Preview
+@DayNightPreviews
 @Composable
-internal fun TextComposerSimpleLightPreview() = ElementPreviewLight { SimpleContentToPreview() }
-
-@Preview
-@Composable
-internal fun TextComposerSimpleDarkPreview() = ElementPreviewDark { SimpleContentToPreview() }
-
-@Preview
-@Composable
-internal fun TextComposerEditLightPreview() = ElementPreviewLight { EditContentToPreview() }
-
-@Preview
-@Composable
-internal fun TextComposerEditDarkPreview() = ElementPreviewDark { EditContentToPreview() }
-
-@Preview
-@Composable
-internal fun TextComposerReplyLightPreview() = ElementPreviewLight { ReplyContentToPreview() }
-
-@Preview
-@Composable
-internal fun TextComposerReplyDarkPreview() = ElementPreviewDark { ReplyContentToPreview() }
-
-@Composable
-private fun SimpleContentToPreview() {
+fun TextComposerSimplePreview() = ElementPreview {
     Column {
         TextComposer(
             onSendMessage = {},
@@ -468,8 +446,9 @@ private fun SimpleContentToPreview() {
     }
 }
 
+@DayNightPreviews
 @Composable
-private fun EditContentToPreview() {
+fun TextComposerEditPreview() = ElementPreview {
     TextComposer(
         onSendMessage = {},
         onComposerTextChange = {},
@@ -480,8 +459,9 @@ private fun EditContentToPreview() {
     )
 }
 
+@DayNightPreviews
 @Composable
-private fun ReplyContentToPreview() {
+fun TextComposerReplyPreview() = ElementPreview {
     Column {
         TextComposer(
             onSendMessage = {},

tests/uitests/src/test/kotlin/io/element/android/tests/uitests/ScreenshotTest.kt

@@ -36,9 +36,9 @@ import androidx.lifecycle.Lifecycle
 import app.cash.paparazzi.Paparazzi
 import com.airbnb.android.showkase.models.Showkase
 import com.android.ide.common.rendering.api.SessionParams
+import com.android.resources.NightMode
 import com.google.testing.junit.testparameterinjector.TestParameter
 import com.google.testing.junit.testparameterinjector.TestParameterInjector
-import io.element.android.libraries.designsystem.preview.NIGHT_MODE_NAME
 import io.element.android.libraries.theme.ElementTheme
 import org.junit.Rule
 import org.junit.Test
@@ -85,7 +85,13 @@ class ScreenshotTest {
         Locale.setDefault(locale) // Needed for regional settings, as first day of week
         paparazzi.unsafeUpdateConfig(
             deviceConfig = baseDeviceConfig.deviceConfig.copy(
-                softButtons = false
+                softButtons = false,
+                nightMode = componentTestPreview.isNightMode().let {
+                    when (it) {
+                        true -> NightMode.NIGHT
+                        false -> NightMode.NOTNIGHT
+                    }
+                },
             ),
         )
         paparazzi.snapshot {
@@ -98,9 +104,9 @@ class ScreenshotTest {
                 ),
                 LocalConfiguration provides Configuration().apply {
                     setLocales(LocaleList(locale))
-                    // Dark mode previews have name "N" so their component name contains "- N"
-                    if (componentTestPreview.name.contains("- $NIGHT_MODE_NAME")){
-                        uiMode = Configuration.UI_MODE_NIGHT_YES
+                    uiMode = when (componentTestPreview.isNightMode()) {
+                        true -> Configuration.UI_MODE_NIGHT_YES
+                        false -> Configuration.UI_MODE_NIGHT_NO
                     }
                 },
                 // Needed so that UI that uses it don't crash during screenshot tests

tests/uitests/src/test/kotlin/io/element/android/tests/uitests/TestPreview.kt

@@ -17,6 +17,9 @@
 package io.element.android.tests.uitests
 
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.tooling.preview.Preview
+import com.airbnb.android.showkase.models.ShowkaseElementsMetadata
+import io.element.android.libraries.designsystem.preview.NIGHT_MODE_NAME
 
 interface TestPreview {
     @Composable
@@ -24,3 +27,12 @@ interface TestPreview {
 
     val name: String
 }
+
+/**
+ * Showkase doesn't put the [Preview.uiMode] parameter in its [ShowkaseElementsMetadata]
+ * so we have to encode the night mode bit in a preview's name.
+ */
+fun TestPreview.isNightMode(): Boolean {
+    // Dark mode previews have name "N" so their component name contains "- N"
+    return this.name.contains("- $NIGHT_MODE_NAME")
+}