Skip to content

Commit

Permalink
Androapp 6035 mobile UI create dropdown menu component (#295)
Browse files Browse the repository at this point in the history
* Add data class for `MenuItem` component

* Add `MenuItem` component

* Add `MenuItemSnapshotTest`

* Add `MenuItemTest`

* Fix `MenuItem` Label and supporting text truncate

* Fix snapshot test

* add Enrolment menu to menu item showcase

* Add shadow to enrollment menu

---------

Co-authored-by: Siddharth Agarwal <[email protected]>
  • Loading branch information
siddh1004 and Siddharth Agarwal authored Sep 9, 2024
1 parent 33912d2 commit ec6f196
Show file tree
Hide file tree
Showing 9 changed files with 1,181 additions and 3 deletions.
2 changes: 2 additions & 0 deletions common/src/commonMain/kotlin/org/hisp/dhis/common/App.kt
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import org.hisp.dhis.common.screens.others.BadgesScreen
import org.hisp.dhis.common.screens.others.ChipsScreen
import org.hisp.dhis.common.screens.others.IndicatorScreen
import org.hisp.dhis.common.screens.others.LegendScreen
import org.hisp.dhis.common.screens.others.MenuItemScreen
import org.hisp.dhis.common.screens.others.MetadataAvatarScreen
import org.hisp.dhis.common.screens.others.NavigationBarScreen
import org.hisp.dhis.common.screens.others.ProgressScreen
Expand Down Expand Up @@ -101,6 +102,7 @@ fun Main(
Groups.TAGS -> TagsScreen()
Groups.SEARCH_BAR -> SearchBarScreen()
Groups.NAVIGATION_BAR -> NavigationBarScreen()
Groups.MENU -> MenuItemScreen()
Groups.NO_GROUP_SELECTED -> NoComponentSelectedScreen()
Groups.TOP_BAR -> TopBarScreen()
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,5 +19,6 @@ enum class Groups(val label: String) {
PARAMETER_SELECTOR("Parameter selector"),
NAVIGATION_BAR("Navigation Bar"),
TOP_BAR("Top Bar"),
MENU("Menu"),
NO_GROUP_SELECTED("No group selected"),
}

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
package org.hisp.dhis.mobile.ui.designsystem

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.material.icons.Icons
import androidx.compose.material.icons.automirrored.outlined.ArrowRight
import androidx.compose.material.icons.outlined.Done
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import org.hisp.dhis.mobile.ui.designsystem.component.ColumnComponentContainer
import org.hisp.dhis.mobile.ui.designsystem.component.ColumnScreenContainer
import org.hisp.dhis.mobile.ui.designsystem.component.menuItem.MenuItem
import org.hisp.dhis.mobile.ui.designsystem.component.menuItem.MenuItemData
import org.hisp.dhis.mobile.ui.designsystem.component.menuItem.MenuItemState
import org.hisp.dhis.mobile.ui.designsystem.component.menuItem.MenuItemStyle
import org.hisp.dhis.mobile.ui.designsystem.component.menuItem.MenuLeadingElement
import org.hisp.dhis.mobile.ui.designsystem.component.menuItem.MenuTrailingElement
import org.junit.Rule
import org.junit.Test

class MenuItemSnapshotTest {
@get:Rule
val paparazzi = paparazzi()

@Test
fun launchMenuItemTest() {
paparazzi.snapshot {
ColumnScreenContainer("Menu Item") {
ColumnComponentContainer("Menu item") {
Column(
modifier = Modifier.fillMaxWidth(),
verticalArrangement = Arrangement.spacedBy(20.dp),
) {
Row(
horizontalArrangement = Arrangement.spacedBy(20.dp),
) {
MenuItem(
modifier = Modifier.weight(1f),
menuItemData = MenuItemData(
label = "Label",
supportingText = "Support Text",
showDivider = true,
leadingElement = MenuLeadingElement.Icon(
icon = Icons.Outlined.Done,
),
trailingElement = MenuTrailingElement.Icon(
icon = Icons.AutoMirrored.Outlined.ArrowRight,
),
),
) {}

MenuItem(
modifier = Modifier.weight(1f),
menuItemData = MenuItemData(
label = "Label",
supportingText = "Support Text",
showDivider = true,
style = MenuItemStyle.ALERT,
leadingElement = MenuLeadingElement.Icon(
icon = Icons.Outlined.Done,
),
trailingElement = MenuTrailingElement.Icon(
icon = Icons.AutoMirrored.Outlined.ArrowRight,
),
),
) {}
}

Row(
horizontalArrangement = Arrangement.spacedBy(20.dp),
) {
MenuItem(
modifier = Modifier.weight(1f),
menuItemData = MenuItemData(
label = "Label",
supportingText = "Support Text",
showDivider = true,
state = MenuItemState.SELECTED,
leadingElement = MenuLeadingElement.Icon(
icon = Icons.Outlined.Done,
),
trailingElement = MenuTrailingElement.Icon(
icon = Icons.AutoMirrored.Outlined.ArrowRight,
),
),
) {}

MenuItem(
modifier = Modifier.weight(1f),
menuItemData = MenuItemData(
label = "Label",
supportingText = "Support Text",
showDivider = true,
state = MenuItemState.SELECTED,
style = MenuItemStyle.ALERT,
leadingElement = MenuLeadingElement.Icon(
icon = Icons.Outlined.Done,
),
trailingElement = MenuTrailingElement.Icon(
icon = Icons.AutoMirrored.Outlined.ArrowRight,
),
),
) {}
}

Row(
horizontalArrangement = Arrangement.spacedBy(20.dp),
) {
MenuItem(
modifier = Modifier.weight(1f),
menuItemData = MenuItemData(
label = "Label",
supportingText = "Support Text",
showDivider = true,
state = MenuItemState.DISABLED,
leadingElement = MenuLeadingElement.Icon(
icon = Icons.Outlined.Done,
),
trailingElement = MenuTrailingElement.Icon(
icon = Icons.AutoMirrored.Outlined.ArrowRight,
),
),
) {}

MenuItem(
modifier = Modifier.weight(1f),
menuItemData = MenuItemData(
label = "Label",
supportingText = "Support Text",
showDivider = true,
state = MenuItemState.DISABLED,
style = MenuItemStyle.ALERT,
leadingElement = MenuLeadingElement.Icon(
icon = Icons.Outlined.Done,
),
trailingElement = MenuTrailingElement.Icon(
icon = Icons.AutoMirrored.Outlined.ArrowRight,
),
),
) {}
}
}
}
}
}
}
}
Loading

0 comments on commit ec6f196

Please sign in to comment.