ANDROAPP-5759-mobile-ui-file-input-label-displacement-on-file-inserti…

…on (#164) * Add 2dp vertical padding to `InputShellLabelText` It's present in Figma but missed in implementation * Remove unnecessary `fillMaxWidth` If we set the weight and fill = true (which is default), that will automatically ensure that the element occupies the whole width allocated. I have also changed the weight to 1f, since we don't have any other weighted siblings. We can just set it to 1f * Remove `InputShellRow` centre vertical alignment * Add a interactive sample for input file resource * Change input shell row bottom padding to 8dp * Don't render the button row If there are no primary or secondary buttons provided to input shell * Use box for overlapping divider rather than using it in column and translate * Remove unnecessary padding in `InputYesOnlyCheckBox` * Use `remember` instead of `rememberSaveable` in `InputYesOnlyCheckBoxScreen` * Remove unused imports
dhis2 · Dec 7, 2023 · 87f7b79 · 87f7b79
1 parent aef4fc4
commit 87f7b79
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 75 deletions.
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputFileResourceScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputFileResourceScreen.kt
@@ -1,6 +1,10 @@
 package org.hisp.dhis.common.screens
 
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputFileResource
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
@@ -17,6 +21,22 @@ fun InputFileResourceScreen() {
         val currentFileName2 = "filename.extension"
         val currentFileWeight2 = "524kb"
 
+        var inputFileResourceState by remember { mutableStateOf(UploadFileState.ADD) }
+
+        InputFileResource(
+            title = "Label",
+            buttonText = provideStringResource("add_file"),
+            fileName = currentFileName,
+            fileWeight = currentFileWeight,
+            uploadFileState = inputFileResourceState,
+            onSelectFile = {
+                inputFileResourceState = UploadFileState.LOADED
+            },
+            onUploadFile = {},
+            onClear = {
+                inputFileResourceState = UploadFileState.ADD
+            },
+        )
         InputFileResource(
             title = "Label",
             buttonText = provideStringResource("add_file"),

diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputYesOnlyCheckBoxScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputYesOnlyCheckBoxScreen.kt
@@ -5,7 +5,7 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import org.hisp.dhis.mobile.ui.designsystem.component.CheckBoxData
@@ -19,19 +19,19 @@ import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 @Composable
 fun InputYesOnlyCheckBoxScreen() {
     ColumnComponentContainer {
-        var checkboxData by rememberSaveable {
+        var checkboxData by remember {
             mutableStateOf(CheckBoxData(uid = "0", checked = false, enabled = true, textInput = "Label"))
         }
-        var checkboxData1 by rememberSaveable {
+        var checkboxData1 by remember {
             mutableStateOf(CheckBoxData(uid = "0", checked = true, enabled = true, textInput = "Label"))
         }
-        var checkboxData2 by rememberSaveable {
+        var checkboxData2 by remember {
             mutableStateOf(CheckBoxData(uid = "0", checked = false, enabled = true, textInput = "Label"))
         }
-        val checkboxData3 by rememberSaveable {
+        val checkboxData3 by remember {
             mutableStateOf(CheckBoxData(uid = "0", checked = false, enabled = true, textInput = "Label"))
         }
-        val checkboxData4 by rememberSaveable {
+        val checkboxData4 by remember {
             mutableStateOf(CheckBoxData(uid = "0", checked = true, enabled = true, textInput = "Label"))
         }
         InputYesOnlyCheckBox(

diff --git a/...system/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputShell.kt b/...system/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputShell.kt
@@ -7,10 +7,10 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -30,7 +30,6 @@ import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.unit.Dp
-import androidx.compose.ui.unit.IntOffset
 import org.hisp.dhis.mobile.ui.designsystem.theme.Border
 import org.hisp.dhis.mobile.ui.designsystem.theme.Outline
 import org.hisp.dhis.mobile.ui.designsystem.theme.Radius
@@ -68,70 +67,74 @@ fun InputShell(
         val backgroundColor = if (state != InputShellState.DISABLED) SurfaceColor.Surface else SurfaceColor.DisabledSurface
         val focusRequester = remember { FocusRequester() }
 
-        InputShellRow(
-            modifier = Modifier
-                .focusRequester(focusRequester)
-                .pointerInput(Unit) {
-                    if (state != InputShellState.DISABLED) {
-                        detectTapGestures(
-                            onTap = { focusRequester.requestFocus() },
-                        )
-                    }
-                }
-                .onFocusChanged {
-                    indicatorColor =
-                        when {
-                            state == InputShellState.DISABLED -> InputShellState.DISABLED.color
-                            it.isFocused && state != InputShellState.ERROR && state != InputShellState.WARNING -> InputShellState.FOCUSED.color
-                            else -> state.color
+        Box(Modifier.fillMaxWidth()) {
+            InputShellRow(
+                modifier = Modifier
+                    .focusRequester(focusRequester)
+                    .pointerInput(Unit) {
+                        if (state != InputShellState.DISABLED) {
+                            detectTapGestures(
+                                onTap = { focusRequester.requestFocus() },
+                            )
                         }
-                    indicatorThickness = when {
-                        state == InputShellState.DISABLED -> Border.Thin
-                        it.isFocused -> Border.Regular
-                        else -> Border.Thin
                     }
-                    onFocusChanged?.invoke(it.isFocused)
-                },
-            backgroundColor = backgroundColor,
-        ) {
-            Column(
-                Modifier
-                    .weight(4f, false)
-                    .padding(end = Spacing.Spacing4)
-                    .fillMaxWidth(1f),
-                verticalArrangement = Arrangement.Center,
-            ) {
-                if (title.isNotEmpty()) {
-                    val titleText = if (isRequiredField) "$title *" else title
-                    InputShellLabelText(titleText, textColor = indicatorColor)
-                }
-                inputField?.invoke()
-            }
-            Row(
-                verticalAlignment = Alignment.CenterVertically,
-                modifier = Modifier.height(Spacing.Spacing48),
+                    .onFocusChanged {
+                        indicatorColor =
+                            when {
+                                state == InputShellState.DISABLED -> InputShellState.DISABLED.color
+                                it.isFocused && state != InputShellState.ERROR && state != InputShellState.WARNING -> InputShellState.FOCUSED.color
+                                else -> state.color
+                            }
+                        indicatorThickness = when {
+                            state == InputShellState.DISABLED -> Border.Thin
+                            it.isFocused -> Border.Regular
+                            else -> Border.Thin
+                        }
+                        onFocusChanged?.invoke(it.isFocused)
+                    },
+                backgroundColor = backgroundColor,
             ) {
-                primaryButton?.invoke()
-                if (primaryButton != null && secondaryButton != null) {
-                    InputShellButtonSeparator()
-                    Spacer(modifier = Modifier.width(Spacing.Spacing4))
+                Column(
+                    Modifier
+                        .weight(1f)
+                        .padding(end = Spacing.Spacing4),
+                ) {
+                    if (title.isNotEmpty()) {
+                        val titleText = if (isRequiredField) "$title *" else title
+                        InputShellLabelText(titleText, textColor = indicatorColor)
+                    }
+                    inputField?.invoke()
                 }
-                secondaryButton?.let {
-                    Box(
-                        Modifier
-                            .padding(end = Spacing.Spacing4).size(Spacing.Spacing48),
+                if (primaryButton != null || secondaryButton != null) {
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically,
+                        modifier = Modifier.height(Spacing.Spacing48)
+                            .align(Alignment.CenterVertically),
                     ) {
-                        it.invoke()
+                        primaryButton?.invoke()
+                        if (primaryButton != null && secondaryButton != null) {
+                            InputShellButtonSeparator()
+                            Spacer(modifier = Modifier.width(Spacing.Spacing4))
+                        }
+                        secondaryButton?.let {
+                            Box(
+                                Modifier
+                                    .padding(end = Spacing.Spacing4).size(Spacing.Spacing48),
+                            ) {
+                                it.invoke()
+                            }
+                        }
                     }
                 }
             }
-        }
-        Box(Modifier.height(Spacing.Spacing2)) {
+
             InputShellIndicator(
+                modifier = Modifier.align(Alignment.BottomStart),
                 color = indicatorColor,
                 thickness = indicatorThickness,
             )
         }
+
         legend?.invoke(this)
         if (state != InputShellState.DISABLED) supportingText?.invoke()
         if (isRequiredField && state == InputShellState.ERROR && supportingText == null) SupportingText("Required", state = SupportingTextState.ERROR)
@@ -149,14 +152,18 @@ fun InputShell(
 private fun InputShellRow(
     modifier: Modifier = Modifier,
     backgroundColor: Color,
-    content: @Composable (() -> Unit),
+    content: @Composable (RowScope.() -> Unit),
 ) {
     Row(
         horizontalArrangement = Arrangement.SpaceBetween,
-        verticalAlignment = Alignment.CenterVertically,
         modifier = modifier.fillMaxWidth()
             .background(backgroundColor)
-            .padding(Spacing.Spacing16, Spacing.Spacing8, Spacing.Spacing0, Spacing.Spacing6),
+            .padding(
+                start = Spacing.Spacing16,
+                top = Spacing.Spacing8,
+                end = Spacing.Spacing0,
+                bottom = Spacing.Spacing8,
+            ),
     ) {
         content()
     }
@@ -190,16 +197,7 @@ private fun InputShellIndicator(
     thickness: Dp = Border.Thin,
 ) {
     Divider(
-        modifier = modifier
-            .fillMaxWidth()
-            .padding(
-                top = Spacing.Spacing0,
-            ).offset {
-                IntOffset(
-                    0,
-                    if (thickness == Border.Thin) 0 else -2,
-                )
-            },
+        modifier = modifier.fillMaxWidth(),
         thickness = thickness,
         color = color,
     )

diff --git a/.../commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputYesOnlyCheckBox.kt b/.../commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputYesOnlyCheckBox.kt
@@ -1,7 +1,6 @@
 package org.hisp.dhis.mobile.ui.designsystem.component
 
 import androidx.compose.foundation.layout.offset
-import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -50,7 +49,6 @@ fun InputYesOnlyCheckBox(
         inputField = {
             CheckBox(
                 modifier = Modifier
-                    .padding(bottom = Spacing.Spacing4)
                     .offset(x = -Spacing.Spacing8),
                 checkBoxData = CheckBoxData(
                     uid = checkBoxData.uid,

diff --git a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Text.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/Text.kt
@@ -65,7 +65,7 @@ internal fun InputShellLabelText(
 ) {
     Text(
         text,
-        modifier = modifier,
+        modifier = modifier.padding(vertical = Spacing.Spacing2),
         color = textColor,
         style = MaterialTheme.typography.bodyMedium,
         textAlign = TextAlign.Start,