-
-
Notifications
You must be signed in to change notification settings - Fork 1k
Add HAFloatingActionButton component #7204
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 3 commits
7b71946
593b06a
f4b6b35
ff62247
73cb05c
a1e1289
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,98 @@ | ||
| package io.homeassistant.companion.android.common.compose.composable | ||
|
|
||
| import androidx.compose.foundation.layout.Arrangement | ||
| import androidx.compose.foundation.layout.Column | ||
| import androidx.compose.foundation.layout.size | ||
| import androidx.compose.material.icons.Icons | ||
| import androidx.compose.material.icons.filled.Add | ||
| import androidx.compose.material3.FloatingActionButton | ||
| import androidx.compose.material3.Icon | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.ui.Modifier | ||
| import androidx.compose.ui.graphics.Color | ||
| import androidx.compose.ui.graphics.vector.ImageVector | ||
| import androidx.compose.ui.tooling.preview.PreviewLightDark | ||
| import io.homeassistant.companion.android.common.compose.theme.HAColorScheme | ||
| import io.homeassistant.companion.android.common.compose.theme.HADimens | ||
| import io.homeassistant.companion.android.common.compose.theme.HAThemeForPreview | ||
| import io.homeassistant.companion.android.common.compose.theme.LocalHAColorScheme | ||
|
|
||
| /** | ||
| * Displays a circular floating action button (FAB) with a single icon, themed with the Home | ||
| * Assistant color scheme. | ||
| * | ||
| * @param icon The [ImageVector] icon to be displayed in the button. | ||
| * @param onClick The lambda function to be executed when the button is clicked. | ||
| * @param contentDescription The content description for accessibility purposes. | ||
| * @param modifier Optional [androidx.compose.ui.Modifier] to be applied to the button. | ||
| * @param variant The [ButtonVariant] that determines the button's color scheme. Defaults to [ButtonVariant.PRIMARY]. | ||
| */ | ||
| @Composable | ||
| fun HAFloatingActionButton( | ||
| icon: ImageVector, | ||
| onClick: () -> Unit, | ||
| contentDescription: String?, | ||
| modifier: Modifier = Modifier, | ||
| variant: ButtonVariant = ButtonVariant.PRIMARY, | ||
|
hdcodedev marked this conversation as resolved.
|
||
| ) { | ||
| val colors = LocalHAColorScheme.current.fabColorsFromVariant(variant) | ||
| FloatingActionButton( | ||
| onClick = onClick, | ||
| modifier = modifier.size(ButtonSize.LARGE.value), | ||
|
hdcodedev marked this conversation as resolved.
Outdated
|
||
| containerColor = colors.containerColor, | ||
| contentColor = colors.contentColor, | ||
| content = { | ||
| Icon( | ||
| imageVector = icon, | ||
|
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I wonder if you should actually use the contentColor there? no or M3 is already handling this properly
Contributor
Author
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. It is needed because we are using variants. If we want this one to be primary only, then we could probably drop the explicit colors.
Member
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. The imageVector is tint with the |
||
| contentDescription = contentDescription, | ||
| modifier = Modifier.size(HADimens.SPACE6), | ||
| ) | ||
| }, | ||
| ) | ||
| } | ||
|
|
||
| private data class HAFabColors(val containerColor: Color, val contentColor: Color) | ||
|
|
||
| private fun HAColorScheme.fabColorsFromVariant(variant: ButtonVariant): HAFabColors = when (variant) { | ||
| ButtonVariant.PRIMARY -> HAFabColors( | ||
| containerColor = colorFillPrimaryLoudResting, | ||
| contentColor = colorOnPrimaryLoud, | ||
| ) | ||
|
|
||
| ButtonVariant.NEUTRAL -> HAFabColors( | ||
| containerColor = colorFillNeutralLoudResting, | ||
| contentColor = colorOnNeutralLoud, | ||
| ) | ||
|
|
||
| ButtonVariant.DANGER -> HAFabColors( | ||
| containerColor = colorFillDangerLoudResting, | ||
| contentColor = colorOnDangerLoud, | ||
| ) | ||
|
|
||
| ButtonVariant.WARNING -> HAFabColors( | ||
| containerColor = colorFillWarningLoudResting, | ||
| contentColor = colorOnWarningLoud, | ||
| ) | ||
|
|
||
| ButtonVariant.SUCCESS -> HAFabColors( | ||
| containerColor = colorFillSuccessLoudResting, | ||
| contentColor = colorOnSuccessLoud, | ||
| ) | ||
| } | ||
|
|
||
| @PreviewLightDark | ||
| @Composable | ||
| private fun HAFloatingActionButtonPreview() { | ||
| HAThemeForPreview { | ||
| Column(verticalArrangement = Arrangement.spacedBy(HADimens.SPACE2)) { | ||
| ButtonVariant.entries.forEach { variant -> | ||
| HAFloatingActionButton( | ||
| icon = Icons.Default.Add, | ||
| variant = variant, | ||
| contentDescription = null, | ||
| onClick = {}, | ||
| ) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| package io.homeassistant.companion.android.compose.composable | ||
|
|
||
| import androidx.compose.foundation.layout.Column | ||
| import androidx.compose.foundation.layout.Row | ||
| import androidx.compose.material.icons.Icons | ||
| import androidx.compose.material.icons.filled.Add | ||
| import androidx.compose.runtime.Composable | ||
| import androidx.compose.ui.tooling.preview.PreviewLightDark | ||
| import com.android.tools.screenshot.PreviewTest | ||
| import io.homeassistant.companion.android.common.compose.composable.ButtonVariant | ||
| import io.homeassistant.companion.android.common.compose.composable.HAFloatingActionButton | ||
| import io.homeassistant.companion.android.common.compose.theme.HAThemeForPreview | ||
|
|
||
| class HAFloatingActionButtonScreenshotTest { | ||
|
|
||
| @PreviewLightDark | ||
| @PreviewTest | ||
| @Composable | ||
| fun `HAFloatingActionButton variants`() { | ||
| HAThemeForPreview { | ||
| Column { | ||
| ButtonVariant.entries.forEach { variant -> | ||
| Row { | ||
| HAFloatingActionButton( | ||
| icon = Icons.Default.Add, | ||
| variant = variant, | ||
| contentDescription = null, | ||
| onClick = {}, | ||
| ) | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
|
hdcodedev marked this conversation as resolved.
|
Uh oh!
There was an error while loading. Please reload this page.