Hello, As part of a project redesign, we are imple...

# compose-android

[Ismail BENABDALLAH]

Hello, As part of a project redesign, we are implementing a design system. I have a question: which approach do you prefer between the two proposals in the comments? Or if you have other recommendations.

[Chrimaeon]

Pleas don’t cross post to multiple channels, that’s considered spam and does not help others finding an answer for their question.
Also long code snippets should go to the posts thread so the main thread is not cluttered with code.

[Ismail BENABDALLAH]

ok sorry

[Ismail BENABDALLAH]

Cas 1 :

sealed class TopAppBarActionOld(val action: @Composable () -> Unit) {
    class Share(val onShare: () -> Unit) : TopAppBarActionOld(
        action = {
            IconButton(onClick = onShare) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_share),
                    contentDescription = null,
                )
            }
        }
    )

    class Save(val onSave: () -> Unit) : TopAppBarActionOld(
        action = {
            IconButton(onClick = onSave) {
                Icon(painter = painterResource(id = R.drawable.ic_save), contentDescription = null)
            }
        }
    )
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopAppBar(
    title: String,
    navIcon: Int,
    modifier: Modifier = Modifier,
    onBackPressed: () -> Unit,
    actions: List<TopAppBarActionOld>,
) {
    TopAppBar(
        title = { TopAppBarTitle(title = title) },
        modifier = modifier,
        navigationIcon = {
            TopAppBarNavigationIcon(
                icon = navIcon,
                onClick = onBackPressed
            )
        },
        actions = {
            actions.forEach {
                it.action()
            }
        },
    )
}

[Ismail BENABDALLAH]

Cas 2 :

data class TopAppBarActionData(
    val selected: Boolean,
    val defaultIcon: Int,
    val selectedIcon: Int,
    val onClick: () -> Unit,
)

data class TopAppBarData(
    val title: String?,
    val navIcon: Int?,
    val actions: List<TopAppBarActionData>?,
    val onNavClick: () -> Unit,
)

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopAppBar(
    data: TopAppBarData,
    modifier: Modifier = Modifier
) {
    TopAppBar(
        title = { data.title?.let { TopAppBarTitle(title = it) } },
        modifier = modifier,
        navigationIcon = {
            data.navIcon?.let {
                TopAppBarNavigationIcon(
                    icon = it,
                    onClick = data.onNavClick
                )
            }
        },
        actions = { data.actions?.let { TopAppBarActions(actions = it) } },
    )
}

@Composable
fun TopAppBarTitle(
    title: String,
    modifier: Modifier = Modifier
) {
    Text(
        text = title,
        modifier = modifier,
        maxLines = 1,
        overflow = TextOverflow.Ellipsis,
        style = MaterialTheme.typography.titleSmall,
        color = MaterialTheme.colorScheme.primary,
    )
}

@Composable
fun TopAppBarNavigationIcon(
    modifier: Modifier = Modifier,
    icon: Int = R.drawable.ic_chevron_left,
    onClick: () -> Unit
) {
    IconButton(onClick = onClick, modifier = modifier) {
        Icon(
            painter = painterResource(id = icon),
            contentDescription = null,
        )
    }
}

@Composable
fun TopAppBarActions(
    actions: List<TopAppBarActionData>
) {
    actions.forEach {
        NavButton(
            onClick = it.onClick,
            defaultIcon = it.defaultIcon,
            selectedIcon = it.selectedIcon,
            selected = it.selected,
        )
    }
}

[Tgo1014]

It’s two really long snippets, it’s kinda hard by eye to find what’s the diff. Maybe you could explain some point you want us to look and notice?