Add some Preview

2023-01-27 10:38:30 +01:00
parent 2cfa921a70
commit 65e7984d5d
4 changed files with 97 additions and 5 deletions
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementButton.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementButton.kt
@@ -16,16 +16,21 @@

 package io.element.android.libraries.designsystem.theme.components

+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.material.ContentAlpha
 import androidx.compose.material.ProvideTextStyle
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.compositeOver
+import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.components.color.elementContentColorFor
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.ElementTheme

@Composable
@@ -64,3 +69,23 @@ fun ElementButton(
        }
    )
 }
+
+@Preview
+@Composable
+fun ElementButtonsLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun ElementButtonsDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    Column {
+        ElementButton(onClick = {}, enabled = true) {
+            Text(text = "Click me! - Enabled")
+        }
+        ElementButton(onClick = {}, enabled = false) {
+            Text(text = "Click me! - Disabled")
+        }
+    }
+}
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementCheckbox.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementCheckbox.kt
@@ -17,6 +17,7 @@
 package io.element.android.libraries.designsystem.theme.components

 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Column
 import androidx.compose.material3.Checkbox
 import androidx.compose.material3.CheckboxColors
 import androidx.compose.material3.CheckboxDefaults
@@ -24,6 +25,9 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.ElementTheme

@Composable
@@ -53,3 +57,21 @@ fun ElementCheckbox(
        interactionSource = interactionSource,
    )
 }
+
+@Preview
+@Composable
+fun ElementCheckboxesLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun ElementCheckboxesDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    Column {
+        ElementCheckbox(onCheckedChange = {}, enabled = true, checked = true)
+        ElementCheckbox(onCheckedChange = {}, enabled = true, checked = false)
+        ElementCheckbox(onCheckedChange = {}, enabled = false, checked = true)
+        ElementCheckbox(onCheckedChange = {}, enabled = false, checked = false)
+    }
+}
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementOutlinedTextField.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementOutlinedTextField.kt
@@ -17,6 +17,7 @@
 package io.element.android.libraries.designsystem.theme.components

 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.text.selection.TextSelectionColors
@@ -32,7 +33,10 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.text.input.VisualTransformation
+import androidx.compose.ui.tooling.preview.Preview
 import io.element.android.libraries.designsystem.ElementGreen
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.ElementTheme

@OptIn(ExperimentalMaterial3Api::class)
@@ -115,3 +119,24 @@ fun ElementOutlinedTextField(
    )
 }

+@Preview
+@Composable
+fun ElementOutlinedTextFieldsLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun ElementOutlinedTextFieldsDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    Column {
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = false, enabled = true, readOnly = true)
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = false, enabled = true, readOnly = false)
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = false, enabled = false, readOnly = true)
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = false, enabled = false, readOnly = false)
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = true, enabled = true, readOnly = true)
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = true, enabled = true, readOnly = false)
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = true, enabled = false, readOnly = true)
+        ElementOutlinedTextField(onValueChange = {}, value = "Content", isError = true, enabled = false, readOnly = false)
+    }
+}
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementSlider.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/theme/components/ElementSlider.kt
@@ -17,12 +17,16 @@
 package io.element.android.libraries.designsystem.theme.components

 import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Column
 import androidx.compose.material3.Slider
 import androidx.compose.material3.SliderColors
 import androidx.compose.material3.SliderDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.theme.ElementTheme

@Composable
@@ -41,11 +45,11 @@ fun ElementSlider(
        activeTickColor = ElementTheme.colors.primary,
        inactiveTrackColor = ElementTheme.colors.primary,
        inactiveTickColor = ElementTheme.colors.primary,
-        disabledThumbColor = ElementTheme.colors.primary,
-        disabledActiveTrackColor = ElementTheme.colors.primary,
-        disabledActiveTickColor = ElementTheme.colors.primary,
-        disabledInactiveTrackColor = ElementTheme.colors.primary,
-        disabledInactiveTickColor = ElementTheme.colors.primary,
+        disabledThumbColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
+        disabledActiveTrackColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
+        disabledActiveTickColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
+        disabledInactiveTrackColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
+        disabledInactiveTickColor = ElementTheme.colors.primary.copy(alpha = 0.40f),
    ),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
 ) {
@@ -61,3 +65,19 @@ fun ElementSlider(
        interactionSource = interactionSource,
    )
 }
+
+@Preview
+@Composable
+fun ElementSlidersLightPreview() = ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+fun ElementSlidersDarkPreview() = ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    Column {
+        ElementSlider(onValueChange = {}, value = 0.33f, enabled = true)
+        ElementSlider(onValueChange = {}, value = 0.33f, enabled = false)
+    }
+}