diff --git a/modals/README.md b/modals/README.md index 3243ec6c..4d5827fe 100644 --- a/modals/README.md +++ b/modals/README.md @@ -15,63 +15,112 @@ implementation("com.decathlon.vitamin.compose:modals:") ### Primary +#### To display an information + ```kotlin object VitaminModals { @Composable - fun Primary2( + fun Primary( content: @Composable (() -> Unit), onDismissRequest: () -> Unit, modifier: Modifier = Modifier, title: String? = null, painter: Painter? = null, - buttonsOrientation: ModalButtonsOrientation = ModalButtonsOrientation.HORIZONTAL, contentScrollState: ScrollState = rememberScrollState(), colors: ModalColors = VitaminModalColors.primary(), sizes: ModalSizes = VitaminModalSizes.medium(), - positiveButton: (@Composable VitaminModalButtons.() -> Unit)? = null, - negativeButton: (@Composable VitaminModalButtons.() -> Unit)? = null, - neutralButton: (@Composable VitaminModalButtons.() -> Unit)? = null, + button: (@Composable VitaminModalButtons.() -> Unit)? = null, ) } ``` -The primary modal used to provide critical information or ask for decision. +This Primary modal implementation used to provide information. The minimal usage of the component is callback to be notified when the user need to dismiss the modal. ```kotlin VitaminModals.Primary( content = { - Text( - text = "Simple information displayed to the user" - ) + Text(text = "Simple information displayed to the user") }, onDismissRequest = {}, - modifier = Modifier, - title = "Amazon", - painter = rememberVectorPainter(VitaminIcons.Line.MapPin), - contentScrollState = rememberScrollState(), - positiveButton = { + painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin), + title = "title", + button = { VitaminModalButtons.Primary( - text = "Positive", + text = "Got it", onClick = {} ) + } +) +``` + +Parameters | Descriptions +-- | -- +`content: @Composable (() -> Unit)` | The content to be displayed below the title +`onDismissRequest: () -> Unit` | The callback to be called when the user need to dismiss the modal +`modifier: Modifier = Modifier` | The `Modifier` to be applied to the component +`title: String? = null` | The optional title to be displayed at the top of the modal +`painter: Painter? = null` | The optional leading icon to be displayed at the start of the title +`contentScrollState: ScrollState = rememberScrollState()` | The optional scroll state to observe the scrolling +`colors: ModalColors = VitaminModalColors.primary()` | The optional sizes used to define colors of icon, title, content and background of the modal +`sizes: ModalSizes = VitaminModalSizes.medium()` | The optional sizes used to define modal padding, spacers sizes and icon size +`button: (@Composable VitaminModalButtons.() -> Unit)? = null` | The optional button to do the acknowledgement action + +#### To confirm an action + +```kotlin +object VitaminModals { + @Composable + fun Primary( + content: @Composable (() -> Unit), + onDismissRequest: () -> Unit, + confirmationButton: (@Composable VitaminModalButtons.() -> Unit), + dismissButton: (@Composable VitaminModalButtons.() -> Unit), + modifier: Modifier = Modifier, + title: String? = null, + painter: Painter? = null, + buttonsOrientation: ModalButtonsOrientation = ModalButtonsOrientation.HORIZONTAL, + contentScrollState: ScrollState = rememberScrollState(), + colors: ModalColors = VitaminModalColors.primary(), + sizes: ModalSizes = VitaminModalSizes.medium(), + thirdButton: (@Composable VitaminModalButtons.() -> Unit)? = null, + ) +} +``` + +This implementation will be use to validate an action or request information from the user. +In this case, two buttons are mandatory. One must be a confirming action, and the other a dismissing action. +Providing a third action, such as "Learn more" is not recommended as it navigates the user away from the dialog, leaving the dialog task unfinished. + +The minimal usage of the component is callback to be notified when the user need to dismiss the modal and action buttons (confirm & dismiss). + +```kotlin +VitaminModals.Primary( + content = { + Text(text = "Description of the action you want to confirm") }, - negativeButton = { + onDismissRequest = {}, + painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin), + title = "title", + confirmationButton = { VitaminModalButtons.Primary( - text = "Negative", + text = "Confirm", onClick = {} ) }, - neutralButton = { + dismissButton = { VitaminModalButtons.Primary( - text = "Neutral", + text = "Dismiss", onClick = {} ) }, - buttonsOrientation = ModalButtonsOrientation.HORIZONTAL, - sizes = VitaminModalSizes.medium(), - colors = VitaminModalColors.primary() + thirdButton = { + VitaminModalButtons.Primary( + text = "Third action", + onClick = {} + ) + } ) ``` @@ -79,6 +128,8 @@ Parameters | Descriptions -- | -- `content: @Composable (() -> Unit)` | The content to be displayed below the title `onDismissRequest: () -> Unit` | The callback to be called when the user need to dismiss the modal +`confirmationButton: (@Composable VitaminModalButtons.() -> Unit)` | The button used to confirm the action +`dismissButton: (@Composable VitaminModalButtons.() -> Unit)` | The button used to dismiss the action `modifier: Modifier = Modifier` | The `Modifier` to be applied to the component `title: String? = null` | The optional title to be displayed at the top of the modal `painter: Painter? = null` | The optional leading icon to be displayed at the start of the title @@ -86,6 +137,4 @@ Parameters | Descriptions `contentScrollState: ScrollState = rememberScrollState()` | The optional scroll state to observe the scrolling `colors: ModalColors = VitaminModalColors.primary()` | The optional sizes used to define colors of icon, title, content and background of the modal `sizes: ModalSizes = VitaminModalSizes.medium()` | The optional sizes used to define modal padding, spacers sizes and icon size -`positiveButton: (@Composable VitaminModalButtons.() -> Unit)? = null` | The optional positive button to be displayed at the bottom of the modal -`negativeButton: (@Composable VitaminModalButtons.() -> Unit)? = null` | The optional negative button to be displayed at the bottom of the modal -`neutralButton: (@Composable VitaminModalButtons.() -> Unit)? = null` | The optional neutral button to be displayed at the bottom of the modal +`thirdButton: (@Composable VitaminModalButtons.() -> Unit)? = null`| The optional button used to display a third action diff --git a/modals/build.gradle.kts b/modals/build.gradle.kts index 74b1975b..0e04b717 100644 --- a/modals/build.gradle.kts +++ b/modals/build.gradle.kts @@ -3,10 +3,13 @@ plugins { id("kotlin-android") id("VitaminComposeLibraryPlugin") id("com.vanniktech.maven.publish") + id("app.cash.paparazzi") } dependencies { api(project(":foundation:foundation")) implementation(project(":buttons")) implementation(AndroidX.compose.ui.tooling) + testImplementation("com.google.testparameterinjector:test-parameter-injector:1.8") + testImplementation(project(":foundation:foundation-icons")) } diff --git a/modals/src/main/java/com/decathlon/vitamin/compose/modals/VitaminModalButtons.kt b/modals/src/main/java/com/decathlon/vitamin/compose/modals/VitaminModalButtons.kt index 63e3652a..caa1039d 100644 --- a/modals/src/main/java/com/decathlon/vitamin/compose/modals/VitaminModalButtons.kt +++ b/modals/src/main/java/com/decathlon/vitamin/compose/modals/VitaminModalButtons.kt @@ -15,7 +15,8 @@ object VitaminModalButtons { @Composable fun Primary( text: String, - onClick: () -> Unit + onClick: () -> Unit, + enabled: Boolean = true ) { VitaminButtons.Ghost( text = text, @@ -23,7 +24,8 @@ object VitaminModalButtons { minWidth = 0.dp, contentPadding = PaddingValues(0.dp) ), - onClick = onClick + onClick = onClick, + enabled = enabled ) } } diff --git a/modals/src/main/java/com/decathlon/vitamin/compose/modals/VitaminModalSizes.kt b/modals/src/main/java/com/decathlon/vitamin/compose/modals/VitaminModalSizes.kt index 488e5e43..18c2c66d 100644 --- a/modals/src/main/java/com/decathlon/vitamin/compose/modals/VitaminModalSizes.kt +++ b/modals/src/main/java/com/decathlon/vitamin/compose/modals/VitaminModalSizes.kt @@ -1,15 +1,19 @@ package com.decathlon.vitamin.compose.modals +import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.runtime.remember import androidx.compose.ui.unit.Dp import androidx.compose.ui.unit.dp +import com.decathlon.vitamin.compose.foundation.VitaminTheme class ModalSizes( val verticalPadding: Dp, val horizontalPadding: Dp, val spacerSize: Dp, - val iconSize: Dp + val iconSize: Dp, + val buttonsSpacer: Dp, + val cornerRadius: RoundedCornerShape ) object VitaminModalSizes { @@ -18,18 +22,24 @@ object VitaminModalSizes { verticalPadding: Dp = 20.dp, horizontalPadding: Dp = 24.dp, spacerSize: Dp = 12.dp, - iconSize: Dp = 24.dp + iconSize: Dp = 24.dp, + buttonsSpacer: Dp = 8.dp, + cornerRadius: RoundedCornerShape = VitaminTheme.shapes.radius200 ): ModalSizes = remember( verticalPadding, horizontalPadding, spacerSize, - iconSize + iconSize, + buttonsSpacer, + cornerRadius ) { ModalSizes( verticalPadding = verticalPadding, horizontalPadding = horizontalPadding, spacerSize = spacerSize, - iconSize = iconSize + iconSize = iconSize, + buttonsSpacer = buttonsSpacer, + cornerRadius = cornerRadius ) } } diff --git a/modals/src/main/java/com/decathlon/vitamin/compose/modals/VitaminModals.kt b/modals/src/main/java/com/decathlon/vitamin/compose/modals/VitaminModals.kt index d5e86484..8d55df86 100644 --- a/modals/src/main/java/com/decathlon/vitamin/compose/modals/VitaminModals.kt +++ b/modals/src/main/java/com/decathlon/vitamin/compose/modals/VitaminModals.kt @@ -26,8 +26,8 @@ object VitaminModals { * @param neutralButton The optional neutral button to be displayed at the bottom of the modal */ @Deprecated( - message = "Use android dependency in the contract. Please use Primary2 component with a painter object.", - replaceWith = ReplaceWith("Primary2") + message = "Please use other Primary implementations.", + replaceWith = ReplaceWith("Primary") ) @Composable fun Primary( @@ -43,50 +43,129 @@ object VitaminModals { positiveButton: (@Composable VitaminModalButtons.() -> Unit)? = null, negativeButton: (@Composable VitaminModalButtons.() -> Unit)? = null, neutralButton: (@Composable VitaminModalButtons.() -> Unit)? = null, + ) { + // To avoid incorrect display of buttons, we need to display them from right to left + // If only one button is needed (positive, negative or neutral) -> display one button as confirmationButton + // If two buttons are defined -> display the first one as confirmationButton (positive or negative, + // in this order) & the other as dismissButton + // If three buttons are defined -> display positiveButton as confirmationButton, negativeButton as dismissButton + // & neutralButton as thirdButton + + // We get the rightmost button as confirmationButton + val confirmationButton = positiveButton ?: negativeButton ?: neutralButton + // We get the rightmost button (exclude the confirmationButton) as dismissButton + val dismissButton = when { + positiveButton != null -> negativeButton ?: neutralButton + negativeButton != null -> neutralButton + else -> null + } + // We get the last button as thirdButton + val thirdButton = when { + positiveButton != null && negativeButton != null -> neutralButton + else -> null + } + when { + // In this case, we have only one button or no button + (dismissButton == null) -> Primary( + content = content, + onDismissRequest = onDismissRequest, + modifier = modifier, + title = title, + painter = iconRes?.let { painterResource(id = it) }, + contentScrollState = contentScrollState, + colors = colors, + sizes = sizes, + button = confirmationButton, + ) + // In this cas, we have at least two buttons + else -> Primary( + content = content, + onDismissRequest = onDismissRequest, + confirmationButton = confirmationButton!!, + dismissButton = dismissButton, + modifier = modifier, + title = title, + painter = iconRes?.let { painterResource(id = it) }, + buttonsOrientation = buttonsOrientation, + contentScrollState = contentScrollState, + colors = colors, + sizes = sizes, + thirdButton = thirdButton, + ) + } + } + + /** + * This implementation will be use to validate an action or request information from the user + * In this case, two buttons are mandatory. One must be a confirming action, and the other a dismissing action. + * Providing a third action, such as "Learn more" is not recommended as it navigates the user away from the dialog, + * leaving the dialog task unfinished. + * @param content The content to be displayed below the title + * @param onDismissRequest The callback to be called when the user need to dismiss the modal + * @param confirmationButton The button used to confirm the action + * @param dismissButton The button used to dismiss the action + * @param modifier The [Modifier] to be applied to the component + * @param title The optional title to be displayed at the top of the modal + * @param painter The optional leading icon to be displayed at the start of the title + * @param buttonsOrientation The optional buttons orientation to display buttons vertically or horizontally + * @param contentScrollState The optional scroll state to observe the scrolling + * @param colors The optional sizes used to define colors of icon, title, content and background of the modal + * @param sizes The optional sizes used to define modal padding, spacers sizes and icon size + * @param thirdButton The optional button used to display a third action (Not recommended). + */ + @Composable + fun Primary( + content: @Composable (() -> Unit), + onDismissRequest: () -> Unit, + confirmationButton: (@Composable VitaminModalButtons.() -> Unit), + dismissButton: (@Composable VitaminModalButtons.() -> Unit), + modifier: Modifier = Modifier, + title: String? = null, + painter: Painter? = null, + buttonsOrientation: ModalButtonsOrientation = ModalButtonsOrientation.HORIZONTAL, + contentScrollState: ScrollState = rememberScrollState(), + colors: ModalColors = VitaminModalColors.primary(), + sizes: ModalSizes = VitaminModalSizes.medium(), + thirdButton: (@Composable VitaminModalButtons.() -> Unit)? = null, ) = VitaminModalImpl( content = content, onDismissRequest = onDismissRequest, modifier = modifier, title = title, - painter = iconRes?.let { painterResource(id = it) }, - contentScrollState = contentScrollState, - positiveButton = positiveButton?.takeOrNull(), - negativeButton = negativeButton?.takeOrNull(), - neutralButton = neutralButton?.takeOrNull(), + painter = painter, buttonsOrientation = buttonsOrientation, + contentScrollState = contentScrollState, + confirmationButton = confirmationButton, + dismissButton = dismissButton, + thirdButton = thirdButton, + colors = colors, sizes = sizes, - colors = colors ) /** - * The default modal used to provide critical information or ask for decision. + * This implementation will be use to notify the user. + * In this case, only one button is available to dismiss the [VitaminModals] * @param content The content to be displayed below the title * @param onDismissRequest The callback to be called when the user need to dismiss the modal * @param modifier The [Modifier] to be applied to the component * @param title The optional title to be displayed at the top of the modal * @param painter The optional leading icon to be displayed at the start of the title - * @param buttonsOrientation The optional buttons orientation to display buttons vertically or horizontally * @param contentScrollState The optional scroll state to observe the scrolling * @param colors The optional sizes used to define colors of icon, title, content and background of the modal * @param sizes The optional sizes used to define modal padding, spacers sizes and icon size - * @param positiveButton The optional positive button to be displayed at the bottom of the modal - * @param negativeButton The optional negative button to be displayed at the bottom of the modal - * @param neutralButton The optional neutral button to be displayed at the bottom of the modal + * @param button The optional button to do the acknowledgement action */ @Composable - fun Primary2( + fun Primary( content: @Composable (() -> Unit), onDismissRequest: () -> Unit, modifier: Modifier = Modifier, title: String? = null, painter: Painter? = null, - buttonsOrientation: ModalButtonsOrientation = ModalButtonsOrientation.HORIZONTAL, contentScrollState: ScrollState = rememberScrollState(), colors: ModalColors = VitaminModalColors.primary(), sizes: ModalSizes = VitaminModalSizes.medium(), - positiveButton: (@Composable VitaminModalButtons.() -> Unit)? = null, - negativeButton: (@Composable VitaminModalButtons.() -> Unit)? = null, - neutralButton: (@Composable VitaminModalButtons.() -> Unit)? = null, + button: (@Composable VitaminModalButtons.() -> Unit)? = null, ) = VitaminModalImpl( content = content, onDismissRequest = onDismissRequest, @@ -94,18 +173,11 @@ object VitaminModals { title = title, painter = painter, contentScrollState = contentScrollState, - positiveButton = positiveButton?.takeOrNull(), - negativeButton = negativeButton?.takeOrNull(), - neutralButton = neutralButton?.takeOrNull(), - buttonsOrientation = buttonsOrientation, + confirmationButton = button, + dismissButton = null, + thirdButton = null, + buttonsOrientation = ModalButtonsOrientation.HORIZONTAL, sizes = sizes, colors = colors ) } - -internal fun (@Composable VitaminModalButtons.() -> Unit)?.takeOrNull(): (@Composable () -> Unit)? { - if (this == null) return null - return { - VitaminModalButtons.this() - } -} diff --git a/modals/src/main/java/com/decathlon/vitamin/compose/modals/impl/Buttons.kt b/modals/src/main/java/com/decathlon/vitamin/compose/modals/impl/Buttons.kt deleted file mode 100644 index ab411f8d..00000000 --- a/modals/src/main/java/com/decathlon/vitamin/compose/modals/impl/Buttons.kt +++ /dev/null @@ -1,46 +0,0 @@ -package com.decathlon.vitamin.compose.modals.impl - -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.padding -import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment -import androidx.compose.ui.Modifier -import androidx.compose.ui.unit.Dp -import com.decathlon.vitamin.compose.modals.ModalButtonsOrientation - -@Composable -internal fun Buttons( - modifier: Modifier, - positiveButton: (@Composable () -> Unit)?, - negativeButton: (@Composable () -> Unit)?, - neutralButton: (@Composable () -> Unit)?, - buttonsOrientation: ModalButtonsOrientation, - topPadding: Dp -) { - if (buttonsOrientation == ModalButtonsOrientation.HORIZONTAL) { - Row( - modifier = modifier - .fillMaxWidth() - .padding(top = topPadding), - horizontalArrangement = Arrangement.SpaceBetween - ) { - neutralButton?.invoke() - negativeButton?.invoke() - positiveButton?.invoke() - } - } else { - Column( - modifier = modifier - .fillMaxWidth() - .padding(top = topPadding), - horizontalAlignment = Alignment.End - ) { - positiveButton?.invoke() - negativeButton?.invoke() - neutralButton?.invoke() - } - } -} diff --git a/modals/src/main/java/com/decathlon/vitamin/compose/modals/impl/ModalButtons.kt b/modals/src/main/java/com/decathlon/vitamin/compose/modals/impl/ModalButtons.kt new file mode 100644 index 00000000..6b24e543 --- /dev/null +++ b/modals/src/main/java/com/decathlon/vitamin/compose/modals/impl/ModalButtons.kt @@ -0,0 +1,82 @@ +package com.decathlon.vitamin.compose.modals.impl + +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.Dp +import com.decathlon.vitamin.compose.modals.ModalButtonsOrientation +import com.decathlon.vitamin.compose.modals.VitaminModalButtons + +@Composable +internal fun ModalButtons( + confirmationButton: (@Composable VitaminModalButtons.() -> Unit), + dismissButton: (@Composable VitaminModalButtons.() -> Unit)?, + thirdButton: (@Composable VitaminModalButtons.() -> Unit)?, + buttonsOrientation: ModalButtonsOrientation, + topPadding: Dp, + buttonsSpacer: Dp, + modifier: Modifier = Modifier, +) { + if (buttonsOrientation == ModalButtonsOrientation.HORIZONTAL) { + Row( + modifier = modifier + .fillMaxWidth() + .padding(top = topPadding), + horizontalArrangement = Arrangement.End + ) { + if (thirdButton != null) { + thirdButton.takeOrNull()?.invoke() + Spacer( + modifier = Modifier + .weight(weight = 1f) + ) + } + if (dismissButton != null) { + dismissButton.takeOrNull()?.invoke() + Spacer( + modifier = Modifier + .width(width = buttonsSpacer) + ) + } + confirmationButton.takeOrNull()?.invoke() + } + } else { + Column( + modifier = modifier + .fillMaxWidth() + .padding(top = topPadding), + horizontalAlignment = Alignment.End + ) { + confirmationButton.takeOrNull()?.invoke() + if (dismissButton != null) { + Spacer( + modifier = Modifier + .height(height = buttonsSpacer) + ) + dismissButton.takeOrNull()?.invoke() + } + if (thirdButton != null) { + Spacer( + modifier = Modifier + .height(height = buttonsSpacer) + ) + thirdButton.takeOrNull()?.invoke() + } + } + } +} + +private fun (@Composable VitaminModalButtons.() -> Unit)?.takeOrNull(): (@Composable () -> Unit)? { + if (this == null) return null + return { + VitaminModalButtons.this() + } +} diff --git a/modals/src/main/java/com/decathlon/vitamin/compose/modals/impl/VitaminModalImpl.kt b/modals/src/main/java/com/decathlon/vitamin/compose/modals/impl/VitaminModalImpl.kt index d62b0e27..dc62f319 100644 --- a/modals/src/main/java/com/decathlon/vitamin/compose/modals/impl/VitaminModalImpl.kt +++ b/modals/src/main/java/com/decathlon/vitamin/compose/modals/impl/VitaminModalImpl.kt @@ -1,12 +1,12 @@ package com.decathlon.vitamin.compose.modals.impl import androidx.compose.foundation.ScrollState -import androidx.compose.foundation.background import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.wrapContentHeight import androidx.compose.foundation.verticalScroll +import androidx.compose.material.Surface import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.painter.Painter @@ -14,6 +14,7 @@ import androidx.compose.ui.window.Dialog import com.decathlon.vitamin.compose.modals.ModalButtonsOrientation import com.decathlon.vitamin.compose.modals.ModalColors import com.decathlon.vitamin.compose.modals.ModalSizes +import com.decathlon.vitamin.compose.modals.VitaminModalButtons @Composable internal fun VitaminModalImpl( @@ -23,22 +24,22 @@ internal fun VitaminModalImpl( title: String?, painter: Painter?, contentScrollState: ScrollState, - positiveButton: (@Composable () -> Unit)?, - negativeButton: (@Composable () -> Unit)?, - neutralButton: (@Composable () -> Unit)?, + confirmationButton: (@Composable VitaminModalButtons.() -> Unit)?, + dismissButton: (@Composable VitaminModalButtons.() -> Unit)?, + thirdButton: (@Composable VitaminModalButtons.() -> Unit)?, buttonsOrientation: ModalButtonsOrientation, sizes: ModalSizes, colors: ModalColors -) { - Dialog( - onDismissRequest = onDismissRequest, - content = { +) = Dialog( + onDismissRequest = onDismissRequest, + content = { + Surface( + shape = sizes.cornerRadius, + color = colors.background + ) { Column( modifier = modifier .fillMaxWidth() - .background( - color = colors.background - ) .padding( horizontal = sizes.horizontalPadding, vertical = sizes.verticalPadding @@ -67,15 +68,18 @@ internal fun VitaminModalImpl( contentColor = colors.contentColor ) } - Buttons( - modifier = modifier, - positiveButton = positiveButton, - negativeButton = negativeButton, - neutralButton = neutralButton, - buttonsOrientation = buttonsOrientation, - topPadding = sizes.spacerSize - ) + if (confirmationButton != null) { + ModalButtons( + modifier = modifier, + confirmationButton = confirmationButton, + dismissButton = dismissButton, + thirdButton = thirdButton, + buttonsOrientation = buttonsOrientation, + topPadding = sizes.spacerSize, + buttonsSpacer = sizes.buttonsSpacer + ) + } } } - ) -} + } +) diff --git a/modals/src/test/kotlin/com/decathlon/vitamin/compose/modals/VitaminModalsPrimaryTest.kt b/modals/src/test/kotlin/com/decathlon/vitamin/compose/modals/VitaminModalsPrimaryTest.kt new file mode 100644 index 00000000..758e0e2e --- /dev/null +++ b/modals/src/test/kotlin/com/decathlon/vitamin/compose/modals/VitaminModalsPrimaryTest.kt @@ -0,0 +1,268 @@ +package com.decathlon.vitamin.compose.modals + +import androidx.compose.material.Text +import androidx.compose.ui.graphics.vector.rememberVectorPainter +import app.cash.paparazzi.Paparazzi +import com.decathlon.vitamin.compose.VitaminIcons +import com.decathlon.vitamin.compose.foundation.VitaminTheme +import com.decathlon.vitamin.compose.modals.utils.DataFactory +import com.decathlon.vitamin.compose.modals.utils.Theme +import com.decathlon.vitamin.compose.vitaminicons.Line +import com.decathlon.vitamin.compose.vitaminicons.line.MapPin +import com.google.testing.junit.testparameterinjector.TestParameter +import com.google.testing.junit.testparameterinjector.TestParameterInjector +import org.junit.Rule +import org.junit.Test +import org.junit.runner.RunWith + +@RunWith(TestParameterInjector::class) +class VitaminModalsPrimaryTest { + + @get:Rule + val paparazzi = Paparazzi() + + @Test + fun primaryWithoutButton( + @TestParameter theme: Theme + ) { + paparazzi.snapshot { + VitaminTheme(theme == Theme.Dark) { + VitaminModals.Primary( + onDismissRequest = {}, + painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin), + title = DataFactory.title, + content = { + Text( + text = DataFactory.message + ) + }, + ) + } + } + } + + @Test + fun primaryWithScroll( + @TestParameter theme: Theme + ) { + paparazzi.snapshot { + VitaminTheme(theme == Theme.Dark) { + VitaminModals.Primary( + onDismissRequest = {}, + painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin), + title = DataFactory.title, + content = { + Text( + text = DataFactory.longAnnotatedMessage + ) + }, + ) + } + } + } + + @Test + fun primaryWithOneButton( + @TestParameter theme: Theme + ) { + paparazzi.snapshot { + VitaminTheme(theme == Theme.Dark) { + VitaminModals.Primary( + onDismissRequest = {}, + painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin), + title = DataFactory.title, + content = { + Text( + text = DataFactory.message + ) + }, + button = { + VitaminModalButtons.Primary( + text = "Got it", + onClick = {}, + ) + }, + ) + } + } + } + + @Test + fun primaryWithDisabledButton( + @TestParameter theme: Theme + ) { + paparazzi.snapshot { + VitaminTheme(theme == Theme.Dark) { + VitaminModals.Primary( + onDismissRequest = {}, + painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin), + title = DataFactory.title, + content = { + Text( + text = DataFactory.message + ) + }, + button = { + VitaminModalButtons.Primary( + text = "Got it", + onClick = {}, + enabled = false, + ) + }, + ) + } + } + } + + @Test + fun primaryWithTwoHorizontalButtons( + @TestParameter theme: Theme + ) { + paparazzi.snapshot { + VitaminTheme(theme == Theme.Dark) { + VitaminModals.Primary( + onDismissRequest = {}, + painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin), + title = DataFactory.title, + content = { + Text( + text = DataFactory.message + ) + }, + confirmationButton = { + VitaminModalButtons.Primary( + text = "Confirm", + onClick = {}, + enabled = true, + ) + }, + dismissButton = { + VitaminModalButtons.Primary( + text = "Dismiss", + onClick = {}, + enabled = true, + ) + } + ) + } + } + } + + @Test + fun primaryWithTwoVerticalButtons( + @TestParameter theme: Theme + ) { + paparazzi.snapshot { + VitaminTheme(theme == Theme.Dark) { + VitaminModals.Primary( + onDismissRequest = {}, + painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin), + title = DataFactory.title, + content = { + Text( + text = DataFactory.message + ) + }, + buttonsOrientation = ModalButtonsOrientation.VERTICAL, + confirmationButton = { + VitaminModalButtons.Primary( + text = "Confirm", + onClick = {}, + enabled = true, + ) + }, + dismissButton = { + VitaminModalButtons.Primary( + text = "Dismiss", + onClick = {}, + enabled = true, + ) + } + ) + } + } + } + + @Test + fun primaryWithThreeHorizontalButtons( + @TestParameter theme: Theme + ) { + paparazzi.snapshot { + VitaminTheme(theme == Theme.Dark) { + VitaminModals.Primary( + onDismissRequest = {}, + painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin), + title = DataFactory.title, + content = { + Text( + text = DataFactory.message + ) + }, + confirmationButton = { + VitaminModalButtons.Primary( + text = "Confirm", + onClick = {}, + enabled = true, + ) + }, + dismissButton = { + VitaminModalButtons.Primary( + text = "Dismiss", + onClick = {}, + enabled = true, + ) + }, + thirdButton = { + VitaminModalButtons.Primary( + text = "Third", + onClick = {}, + enabled = true, + ) + } + ) + } + } + } + + @Test + fun primaryWithThreeVerticalButtons( + @TestParameter theme: Theme + ) { + paparazzi.snapshot { + VitaminTheme(theme == Theme.Dark) { + VitaminModals.Primary( + onDismissRequest = {}, + painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin), + title = DataFactory.title, + content = { + Text( + text = DataFactory.message + ) + }, + buttonsOrientation = ModalButtonsOrientation.VERTICAL, + confirmationButton = { + VitaminModalButtons.Primary( + text = "Confirm", + onClick = {}, + enabled = true, + ) + }, + dismissButton = { + VitaminModalButtons.Primary( + text = "Dismiss", + onClick = {}, + enabled = true, + ) + }, + thirdButton = { + VitaminModalButtons.Primary( + text = "Third", + onClick = {}, + enabled = true, + ) + } + ) + } + } + } +} diff --git a/modals/src/test/kotlin/com/decathlon/vitamin/compose/modals/utils/DataFactory.kt b/modals/src/test/kotlin/com/decathlon/vitamin/compose/modals/utils/DataFactory.kt new file mode 100644 index 00000000..75724956 --- /dev/null +++ b/modals/src/test/kotlin/com/decathlon/vitamin/compose/modals/utils/DataFactory.kt @@ -0,0 +1,39 @@ +package com.decathlon.vitamin.compose.modals.utils + +import androidx.compose.ui.text.AnnotatedString +import androidx.compose.ui.text.SpanStyle +import androidx.compose.ui.text.buildAnnotatedString +import androidx.compose.ui.text.font.FontStyle +import androidx.compose.ui.text.font.FontWeight +import androidx.compose.ui.text.withStyle + +object DataFactory { + + internal const val title: String = "Subtitle" + internal const val message: String = "Lorem ipsum dolor sit amet, consectetur adipiscing " + + "elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut " + + "enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip " + + "ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate " + + "velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat " + + "cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id " + + "est laborum." + internal val longAnnotatedMessage: AnnotatedString = buildAnnotatedString { + append("$message\n\n") + withStyle( + style = SpanStyle(fontStyle = FontStyle.Italic) + ) { + append("$message\n\n") + } + withStyle( + style = SpanStyle(fontWeight = FontWeight.Bold) + ) { + append("$message\n\n") + } + append("$message\n\n") + withStyle( + style = SpanStyle(fontStyle = FontStyle.Italic) + ) { + append(message) + } + } +} diff --git a/modals/src/test/kotlin/com/decathlon/vitamin/compose/modals/utils/Theme.kt b/modals/src/test/kotlin/com/decathlon/vitamin/compose/modals/utils/Theme.kt new file mode 100644 index 00000000..5d1d88b8 --- /dev/null +++ b/modals/src/test/kotlin/com/decathlon/vitamin/compose/modals/utils/Theme.kt @@ -0,0 +1,3 @@ +package com.decathlon.vitamin.compose.modals.utils + +enum class Theme { Light, Dark } diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithDisabledButton[Dark].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithDisabledButton[Dark].png new file mode 100644 index 00000000..e1281576 Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithDisabledButton[Dark].png differ diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithDisabledButton[Light].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithDisabledButton[Light].png new file mode 100644 index 00000000..0ebc9550 Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithDisabledButton[Light].png differ diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithOneButton[Dark].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithOneButton[Dark].png new file mode 100644 index 00000000..5a10a547 Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithOneButton[Dark].png differ diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithOneButton[Light].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithOneButton[Light].png new file mode 100644 index 00000000..bcf88b84 Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithOneButton[Light].png differ diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithScroll[Dark].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithScroll[Dark].png new file mode 100644 index 00000000..6635d30d Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithScroll[Dark].png differ diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithScroll[Light].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithScroll[Light].png new file mode 100644 index 00000000..f27ec705 Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithScroll[Light].png differ diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithThreeHorizontalButtons[Dark].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithThreeHorizontalButtons[Dark].png new file mode 100644 index 00000000..2531d8ef Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithThreeHorizontalButtons[Dark].png differ diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithThreeHorizontalButtons[Light].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithThreeHorizontalButtons[Light].png new file mode 100644 index 00000000..7f1f7aaf Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithThreeHorizontalButtons[Light].png differ diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithThreeVerticalButtons[Dark].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithThreeVerticalButtons[Dark].png new file mode 100644 index 00000000..148e1a7b Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithThreeVerticalButtons[Dark].png differ diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithThreeVerticalButtons[Light].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithThreeVerticalButtons[Light].png new file mode 100644 index 00000000..06b1cb9d Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithThreeVerticalButtons[Light].png differ diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithTwoHorizontalButtons[Dark].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithTwoHorizontalButtons[Dark].png new file mode 100644 index 00000000..b3ba416f Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithTwoHorizontalButtons[Dark].png differ diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithTwoHorizontalButtons[Light].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithTwoHorizontalButtons[Light].png new file mode 100644 index 00000000..633881d8 Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithTwoHorizontalButtons[Light].png differ diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithTwoVerticalButtons[Dark].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithTwoVerticalButtons[Dark].png new file mode 100644 index 00000000..1c8bbc2b Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithTwoVerticalButtons[Dark].png differ diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithTwoVerticalButtons[Light].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithTwoVerticalButtons[Light].png new file mode 100644 index 00000000..d06e1ec4 Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithTwoVerticalButtons[Light].png differ diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithoutButton[Dark].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithoutButton[Dark].png new file mode 100644 index 00000000..87ff1ab1 Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithoutButton[Dark].png differ diff --git a/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithoutButton[Light].png b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithoutButton[Light].png new file mode 100644 index 00000000..22f18f7e Binary files /dev/null and b/modals/src/test/snapshots/images/com.decathlon.vitamin.compose.modals_VitaminModalsPrimaryTest_primaryWithoutButton[Light].png differ diff --git a/sample/src/main/java/com/decathlon/compose/sample/screens/Modals.kt b/sample/src/main/java/com/decathlon/compose/sample/screens/Modals.kt index 11a7c8e8..7f6ac3c7 100644 --- a/sample/src/main/java/com/decathlon/compose/sample/screens/Modals.kt +++ b/sample/src/main/java/com/decathlon/compose/sample/screens/Modals.kt @@ -1,26 +1,16 @@ package com.decathlon.compose.sample.screens import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth -import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn -import androidx.compose.foundation.rememberScrollState import androidx.compose.material.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.vector.rememberVectorPainter -import androidx.compose.ui.text.AnnotatedString -import androidx.compose.ui.text.SpanStyle -import androidx.compose.ui.text.buildAnnotatedString -import androidx.compose.ui.text.font.FontStyle -import androidx.compose.ui.text.font.FontWeight -import androidx.compose.ui.text.withStyle import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp import androidx.navigation.NavController @@ -31,7 +21,6 @@ import com.decathlon.vitamin.compose.foundation.VitaminTheme import com.decathlon.vitamin.compose.modals.ModalButtonsOrientation import com.decathlon.vitamin.compose.modals.VitaminModalButtons import com.decathlon.vitamin.compose.modals.VitaminModals -import com.decathlon.vitamin.compose.radiobuttons.VitaminRadioButtons import com.decathlon.vitamin.compose.vitaminicons.Line import com.decathlon.vitamin.compose.vitaminicons.line.MapPin @@ -51,25 +40,6 @@ object Modals : Screen { "velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat " + "cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id " + "est laborum." - private val longAnnotatedMessage: AnnotatedString = buildAnnotatedString { - append("$message\n\n") - withStyle( - style = SpanStyle(fontStyle = FontStyle.Italic) - ) { - append("$message\n\n") - } - withStyle( - style = SpanStyle(fontWeight = FontWeight.Bold) - ) { - append("$message\n\n") - } - append("$message\n\n") - withStyle( - style = SpanStyle(fontStyle = FontStyle.Italic) - ) { - append(message) - } - } @Composable override fun Screen(navController: NavController?) { @@ -86,96 +56,70 @@ object Modals : Screen { verticalArrangement = Arrangement.spacedBy(16.dp), ) { item { - DefaultModalIconTitleContent() - } - item { - DefaultModalContent() - } - item { - DefaultModalTitleContent() + Acknowledge() } item { - DefaultModalTitleContentButtons() + AcknowledgeWithButton() } item { - DefaultModalTitleLongContentButtons() + Confirmation() } item { - DefaultModalTitleContentLongButtons() + ConfirmationWithThird() } item { - DefaultModalTitleCustomContentButtons() + ConfirmationWithThirdVertical() } } } } @Composable - private fun DefaultModalIconTitleContent() { + private fun Acknowledge() { val showDialog = remember { mutableStateOf(false) } VitaminButtons.Primary( - text = "Icon, Title & Message", + text = "Acknowledge", modifier = Modifier .fillMaxWidth(), onClick = { showDialog.value = true } ) if (showDialog.value) { - VitaminModals.Primary2( + VitaminModals.Primary( content = { - Text( - text = message - ) + Text(text = message) }, onDismissRequest = { showDialog.value = false }, + painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin), title = title, - painter = rememberVectorPainter(VitaminIcons.Line.MapPin) ) } } @Composable - private fun DefaultModalContent() { + private fun AcknowledgeWithButton() { val showDialog = remember { mutableStateOf(false) } VitaminButtons.Primary( - text = "Message", + text = "Acknowledge with button", modifier = Modifier .fillMaxWidth(), onClick = { showDialog.value = true } ) if (showDialog.value) { - VitaminModals.Primary2( - onDismissRequest = { showDialog.value = false }, + VitaminModals.Primary( content = { - Text( - text = message - ) - } - ) - } - } - - @Composable - private fun DefaultModalTitleContent() { - val showDialog = remember { mutableStateOf(false) } - - VitaminButtons.Primary( - text = "Title & Message", - modifier = Modifier - .fillMaxWidth(), - onClick = { showDialog.value = true } - ) - - if (showDialog.value) { - VitaminModals.Primary2( + Text(text = message) + }, onDismissRequest = { showDialog.value = false }, + painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin), title = title, - content = { - Text( - text = message + button = { + VitaminModalButtons.Primary( + text = "Got it", + onClick = { showDialog.value = false } ) } ) @@ -183,40 +127,33 @@ object Modals : Screen { } @Composable - private fun DefaultModalTitleContentButtons() { + fun Confirmation() { val showDialog = remember { mutableStateOf(false) } VitaminButtons.Primary( - text = "Title, Message & Buttons", + text = "Confirmation", modifier = Modifier .fillMaxWidth(), onClick = { showDialog.value = true } ) if (showDialog.value) { - VitaminModals.Primary2( - onDismissRequest = { showDialog.value = false }, - title = title, + VitaminModals.Primary( content = { - Text( - text = message - ) - }, - positiveButton = { - VitaminModalButtons.Primary( - text = "Positive", - onClick = { showDialog.value = false } - ) + Text(text = message) }, - negativeButton = { + onDismissRequest = { showDialog.value = false }, + painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin), + title = title, + confirmationButton = { VitaminModalButtons.Primary( - text = "Negative", + text = "Confirm", onClick = { showDialog.value = false } ) }, - neutralButton = { + dismissButton = { VitaminModalButtons.Primary( - text = "Neutral", + text = "Dismiss", onClick = { showDialog.value = false } ) } @@ -225,41 +162,39 @@ object Modals : Screen { } @Composable - private fun DefaultModalTitleLongContentButtons() { + fun ConfirmationWithThird() { val showDialog = remember { mutableStateOf(false) } VitaminButtons.Primary( - text = "Title, Long message & Buttons", + text = "Confirmation with third action", modifier = Modifier .fillMaxWidth(), onClick = { showDialog.value = true } ) if (showDialog.value) { - VitaminModals.Primary2( - onDismissRequest = { showDialog.value = false }, - title = title, + VitaminModals.Primary( content = { - Text( - text = longAnnotatedMessage - ) + Text(text = message) }, - contentScrollState = rememberScrollState(), - positiveButton = { + onDismissRequest = { showDialog.value = false }, + painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin), + title = title, + confirmationButton = { VitaminModalButtons.Primary( - text = "Positive", + text = "Confirm", onClick = { showDialog.value = false } ) }, - negativeButton = { + dismissButton = { VitaminModalButtons.Primary( - text = "Negative", + text = "Dismiss", onClick = { showDialog.value = false } ) }, - neutralButton = { + thirdButton = { VitaminModalButtons.Primary( - text = "Neutral", + text = "Third action", onClick = { showDialog.value = false } ) } @@ -268,110 +203,40 @@ object Modals : Screen { } @Composable - private fun DefaultModalTitleContentLongButtons() { + fun ConfirmationWithThirdVertical() { val showDialog = remember { mutableStateOf(false) } VitaminButtons.Primary( - text = "Title, Message & Long buttons", + text = "Confirmation vertical", modifier = Modifier .fillMaxWidth(), onClick = { showDialog.value = true } ) if (showDialog.value) { - VitaminModals.Primary2( - onDismissRequest = { showDialog.value = false }, - title = title, + VitaminModals.Primary( content = { - Text( - text = message - ) - }, - positiveButton = { - VitaminModalButtons.Primary( - text = "Extra extra long positive button", - onClick = { showDialog.value = false } - ) + Text(text = message) }, - negativeButton = { - VitaminModalButtons.Primary( - text = "Extra extra long negative button", - onClick = { showDialog.value = false } - ) - }, - neutralButton = { - VitaminModalButtons.Primary( - text = "Extra extra long neutral button", - onClick = { showDialog.value = false } - ) - }, - buttonsOrientation = ModalButtonsOrientation.VERTICAL - ) - } - } - - @Composable - private fun DefaultModalTitleCustomContentButtons() { - val showDialog = remember { mutableStateOf(false) } - - VitaminButtons.Primary( - text = "Title, Custom content & Buttons", - modifier = Modifier - .fillMaxWidth(), - onClick = { showDialog.value = true } - ) - - if (showDialog.value) { - VitaminModals.Primary2( onDismissRequest = { showDialog.value = false }, + painter = rememberVectorPainter(image = VitaminIcons.Line.MapPin), title = title, - content = { - Column { - Text( - text = message - ) - Spacer(Modifier.height(8.dp)) - val selectedObserver = remember { mutableStateOf(true) } - VitaminRadioButtons.Primary( - selected = selectedObserver.value, - onClick = { - if (!selectedObserver.value) selectedObserver.value = - !selectedObserver.value - }, - enabled = true, - endContent = { - Text(text = "RadioBox") - } - ) - Spacer(Modifier.height(8.dp)) - VitaminRadioButtons.Primary( - selected = !selectedObserver.value, - onClick = { - if (selectedObserver.value) selectedObserver.value = - !selectedObserver.value - }, - enabled = true, - endContent = { - Text(text = "RadioBox 2") - } - ) - } - }, - positiveButton = { + buttonsOrientation = ModalButtonsOrientation.VERTICAL, + confirmationButton = { VitaminModalButtons.Primary( - text = "Positive", + text = "Confirm", onClick = { showDialog.value = false } ) }, - negativeButton = { + dismissButton = { VitaminModalButtons.Primary( - text = "Negative", + text = "Dismiss", onClick = { showDialog.value = false } ) }, - neutralButton = { + thirdButton = { VitaminModalButtons.Primary( - text = "Neutral", + text = "Third action", onClick = { showDialog.value = false } ) }