From 4d0e2b0731f5ad6eeb066f8120c444e20c154506 Mon Sep 17 00:00:00 2001 From: Siddharth Agarwal Date: Wed, 13 Dec 2023 20:40:43 +0530 Subject: [PATCH 1/3] animate `InputShell` content This will animate the visibility of supporting text and other composable contents used inside `InputShell` --- .../dhis/mobile/ui/designsystem/component/InputShell.kt | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputShell.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputShell.kt index 8ae1053d1..8a28a0530 100644 --- a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputShell.kt +++ b/designsystem/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 From 017c518a0162d8c6377685b8d57dd2e091efd8dd Mon Sep 17 00:00:00 2001 From: Siddharth Agarwal Date: Wed, 13 Dec 2023 20:54:59 +0530 Subject: [PATCH 2/3] update `InputRadioButtonScreen` to test animation button added to show supporting text visibility with animation --- .../commonMain/kotlin/org/hisp/dhis/common/App.kt | 2 +- .../dhis/common/screens/InputRadioButtonScreen.kt | 13 +++++++++++++ 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt b/common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt index 39d3f235b..ec09cce8d 100644 --- 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 index f189e1fb5..d15a07378 100644 --- 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(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,10 @@ 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( From 9d559b64432d37b7be8ade43ac09141d5a84e646 Mon Sep 17 00:00:00 2001 From: Siddharth Agarwal Date: Wed, 13 Dec 2023 20:56:44 +0530 Subject: [PATCH 3/3] fix lint error --- .../dhis/common/screens/InputRadioButtonScreen.kt | 12 ++++++++---- .../mobile/ui/designsystem/component/InputShell.kt | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) 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 index d15a07378..32e8656e8 100644 --- a/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputRadioButtonScreen.kt +++ b/common/src/commonMain/kotlin/org/hisp/dhis/common/screens/InputRadioButtonScreen.kt @@ -86,10 +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() + 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/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputShell.kt b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputShell.kt index 8a28a0530..1c9ed595e 100644 --- a/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputShell.kt +++ b/designsystem/src/commonMain/kotlin/org/hisp/dhis/mobile/ui/designsystem/component/InputShell.kt @@ -67,7 +67,7 @@ fun InputShell( modifier = modifier .fillMaxWidth() .clip(shape = RoundedCornerShape(Radius.XS, Radius.XS)) - .animateContentSize() + .animateContentSize(), ) { var indicatorColor by remember(state) { mutableStateOf(state.color) } var indicatorThickness by remember { mutableStateOf(Border.Thin) }