ANDROAPP-5721-mobile-ui-Supporting-text-visual-improvements-animations (

#166) * animate `InputShell` content This will animate the visibility of supporting text and other composable contents used inside `InputShell` * update `InputRadioButtonScreen` to test animation button added to show supporting text visibility with animation * fix lint error --------- Co-authored-by: Siddharth Agarwal <[email protected]>
dhis2 · Dec 22, 2023 · 4bebbcd · 4bebbcd
1 parent 03fad51
commit 4bebbcd
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 2 deletions.
diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt
@@ -92,7 +92,7 @@ fun App() {
 
 @Composable
 fun Main() {
-    val currentScreen = remember { mutableStateOf(Components.FULL_SCREEN_IMAGE) }
+    val currentScreen = remember { mutableStateOf(Components.INPUT_RADIO_BUTTON) }
     var expanded by remember { mutableStateOf(false) }
 
     Column(

diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputRadioButtonScreen.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputRadioButtonScreen.kt
@@ -8,12 +8,16 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import org.hisp.dhis.common.screens.previews.lorem
+import org.hisp.dhis.mobile.ui.designsystem.component.Button
 import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
 import org.hisp.dhis.mobile.ui.designsystem.component.InputRadioButton
 import org.hisp.dhis.mobile.ui.designsystem.component.InputShellState
 import org.hisp.dhis.mobile.ui.designsystem.component.Orientation
 import org.hisp.dhis.mobile.ui.designsystem.component.RadioButtonData
 import org.hisp.dhis.mobile.ui.designsystem.component.SubTitle
+import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextData
+import org.hisp.dhis.mobile.ui.designsystem.component.SupportingTextState
 import org.hisp.dhis.mobile.ui.designsystem.theme.Spacing
 
 @Composable
@@ -67,7 +71,12 @@ fun InputRadioButtonScreen() {
     var selectedItemHorizontal by remember {
         mutableStateOf<RadioButtonData?>(radioButtonDataItemsHorizontal[0])
     }
+    var showSupportingText by remember { mutableStateOf(false) }
     ColumnComponentContainer("Radio Buttons") {
+        Button(text = "Click to show/Hide supporting text") {
+            showSupportingText = !showSupportingText
+        }
+
         SubTitle("Vertical")
         InputRadioButton(
             title = "Label",
@@ -77,6 +86,14 @@ fun InputRadioButtonScreen() {
                 selectedItemVertical = it
             },
             state = InputShellState.UNFOCUSED,
+            supportingText = if (showSupportingText) {
+                listOf(
+                    SupportingTextData("Required", state = SupportingTextState.ERROR),
+                    SupportingTextData(lorem + lorem + lorem, state = SupportingTextState.WARNING),
+                )
+            } else {
+                emptyList()
+            },
         )
         Spacer(Modifier.size(Spacing.Spacing18))
         InputRadioButton(

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
@@ -1,5 +1,6 @@
 package org.hisp.dhis.mobile.ui.designsystem.component
 
+import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Arrangement
@@ -62,7 +63,12 @@ fun InputShell(
     isRequiredField: Boolean = false,
     modifier: Modifier = Modifier,
 ) {
-    Column(modifier = modifier.fillMaxWidth().clip(shape = RoundedCornerShape(Radius.XS, Radius.XS))) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .clip(shape = RoundedCornerShape(Radius.XS, Radius.XS))
+            .animateContentSize(),
+    ) {
         var indicatorColor by remember(state) { mutableStateOf(state.color) }
         var indicatorThickness by remember { mutableStateOf(Border.Thin) }
         val backgroundColor = if (state != InputShellState.DISABLED) SurfaceColor.Surface else SurfaceColor.DisabledSurface