fix(modals): Buttons position (#99)

Co-authored-by: ManonPolle <[email protected]>

modals/README.md

@@ -15,77 +15,126 @@ implementation("com.decathlon.vitamin.compose:modals:<versions>")
 
 ### 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 = {}
+        )
+    }
 )
 ```
 
 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
 `buttonsOrientation: ModalButtonsOrientation = ModalButtonsOrientation.HORIZONTAL` | The optional buttons orientation to display buttons vertically or horizontally
 `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

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"))
 }

modals/src/main/java/com/decathlon/vitamin/compose/modals/VitaminModalButtons.kt

@@ -15,15 +15,17 @@ object VitaminModalButtons {
     @Composable
     fun Primary(
         text: String,
-        onClick: () -> Unit
+        onClick: () -> Unit,
+        enabled: Boolean = true
     ) {
         VitaminButtons.Ghost(
             text = text,
             sizes = VitaminButtonsSizes.medium(
                 minWidth = 0.dp,
                 contentPadding = PaddingValues(0.dp)
             ),
-            onClick = onClick
+            onClick = onClick,
+            enabled = enabled
         )
     }
 }

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
         )
     }
 }