From 01aea5a9afde15aa1887d92c7db20fb20f843fce Mon Sep 17 00:00:00 2001 From: Benoit Marty Date: Fri, 27 Jan 2023 10:38:30 +0100 Subject: [PATCH] Add some Preview --- .../theme/components/ElementButton.kt | 25 ++++++++++++++++ .../theme/components/ElementCheckbox.kt | 22 ++++++++++++++ .../components/ElementOutlinedTextField.kt | 25 ++++++++++++++++ .../theme/components/ElementSlider.kt | 30 +++++++++++++++---- 4 files changed, 97 insertions(+), 5 deletions(-) diff --git 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 index d9a536b4db..a9abdbb541 100644 --- 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") + } + } +} diff --git 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 index 058313d40d..6e77b67e0a 100644 --- 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) + } +} diff --git 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 index 04b0eb402f..29bd7239d8 100644 --- 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) + } +} diff --git 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 index 318aeb2b41..4e2d31f5f4 100644 --- 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) + } +}