Skip to content
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

Add AccountChip #1590

Merged
merged 1 commit into from
Aug 19, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions auth/composables/api/current.api
Original file line number Diff line number Diff line change
@@ -1,6 +1,11 @@
// Signature format: 4.0
package com.google.android.horologist.auth.composables.chips {

public final class AccountChipKt {
method @androidx.compose.runtime.Composable public static void AccountChip(com.google.android.horologist.auth.composables.model.AccountUiModel account, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, optional androidx.compose.ui.Modifier modifier, optional Object? defaultAvatar, optional boolean largeAvatar, optional androidx.compose.ui.graphics.painter.Painter? placeholder, optional androidx.wear.compose.material.ChipColors colors, optional boolean enabled);
method @androidx.compose.runtime.Composable public static void AccountChip(String email, kotlin.jvm.functions.Function0<kotlin.Unit> onClick, optional androidx.compose.ui.Modifier modifier, optional Object? avatar, optional Object? defaultAvatar, optional boolean largeAvatar, optional androidx.compose.ui.graphics.painter.Painter? placeholder, optional androidx.wear.compose.material.ChipColors colors, optional boolean enabled);
}

public final class CreateAccountChipKt {
method @androidx.compose.runtime.Composable public static void CreateAccountChip(kotlin.jvm.functions.Function0<kotlin.Unit> onClick, optional androidx.compose.ui.Modifier modifier, optional String label, optional boolean largeIconSpace, optional androidx.wear.compose.material.ChipColors colors, optional boolean enabled);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
/*
* Copyright 2022 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package com.google.android.horologist.auth.composables.chips

import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview

@Preview(
backgroundColor = 0xff000000,
showBackground = true
)
@Composable
fun AccountChipPreview() {
AccountChip(
email = "maggie@example.com",
onClick = {}
)
}

@Preview(
backgroundColor = 0xff000000,
showBackground = true
)
@Composable
fun AccountChipPreviewNoAvatar() {
AccountChip(
email = "maggie@example.com",
onClick = {},
defaultAvatar = null
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
/*
* Copyright 2023 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package com.google.android.horologist.auth.composables.chips

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.text.style.LineBreak
import androidx.wear.compose.material.ChipColors
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.MaterialTheme
import com.google.android.horologist.auth.composables.model.AccountUiModel
import com.google.android.horologist.compose.material.Chip

/**
* A [Chip] to display the [AccountUiModel]'s email address and avatar.
*
* The email text has optimised line break parameters, in order to display as much text as it can.
*/
@Composable
public fun AccountChip(
account: AccountUiModel,
onClick: () -> Unit,
modifier: Modifier = Modifier,
defaultAvatar: Any? = Icons.Default.AccountCircle,
largeAvatar: Boolean = true,
placeholder: Painter? = null,
colors: ChipColors = ChipDefaults.primaryChipColors(),
enabled: Boolean = true
) {
AccountChip(
email = account.email,
onClick = onClick,
modifier = modifier,
avatar = account.avatar,
defaultAvatar = defaultAvatar,
largeAvatar = largeAvatar,
placeholder = placeholder,
colors = colors,
enabled = enabled
)
}

/**
* A [Chip] to display an email address and avatar.
*
* The email text has optimised line break parameters, in order to display as much text as it can.
*/
@Composable
public fun AccountChip(
email: String,
onClick: () -> Unit,
modifier: Modifier = Modifier,
avatar: Any? = null,
defaultAvatar: Any? = Icons.Default.AccountCircle,
largeAvatar: Boolean = true,
placeholder: Painter? = null,
colors: ChipColors = ChipDefaults.primaryChipColors(),
enabled: Boolean = true
) {
MaterialTheme(
typography = MaterialTheme.typography.copy(
button = MaterialTheme.typography.button.copy(
lineBreak = LineBreak(
strategy = LineBreak.Strategy.Balanced,
strictness = LineBreak.Strictness.Normal,
wordBreak = LineBreak.WordBreak.Default
)
)
)
) {
Chip(
label = email,
onClick = onClick,
modifier = modifier,
icon = avatar ?: defaultAvatar,
largeIcon = largeAvatar,
placeholder = placeholder,
colors = colors,
enabled = enabled
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -24,13 +24,15 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.LineBreak
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.MaterialTheme
import com.google.android.horologist.auth.composables.R
import com.google.android.horologist.auth.composables.chips.AccountChip
import com.google.android.horologist.auth.composables.model.AccountUiModel
import com.google.android.horologist.compose.layout.ScalingLazyColumn
import com.google.android.horologist.compose.layout.ScalingLazyColumnState
import com.google.android.horologist.compose.material.Chip
import com.google.android.horologist.compose.material.Title

private const val HORIZONTAL_PADDING_SCREEN_PERCENTAGE = 0.052
Expand Down Expand Up @@ -62,14 +64,24 @@ public fun SelectAccountScreen(

items(accounts.size) { index ->
val account = accounts[index]

Chip(
label = account.email,
icon = account.avatar ?: defaultAvatar,
largeIcon = true,
onClick = { onAccountClicked(index, account) },
colors = ChipDefaults.secondaryChipColors()
)
MaterialTheme(
typography = MaterialTheme.typography.copy(
button = MaterialTheme.typography.button.copy(
lineBreak = LineBreak(
strategy = LineBreak.Strategy.Balanced,
strictness = LineBreak.Strictness.Normal,
wordBreak = LineBreak.WordBreak.Default
)
)
)
) {
AccountChip(
account = account,
onClick = { onAccountClicked(index, account) },
colors = ChipDefaults.secondaryChipColors(),
defaultAvatar = defaultAvatar
)
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
/*
* Copyright 2022 The Android Open Source Project
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

package com.google.android.horologist.auth.composables.chips

import androidx.wear.compose.material.ChipDefaults
import com.google.android.horologist.screenshots.ScreenshotBaseTest
import org.junit.Test

class AccountChipTest : ScreenshotBaseTest() {

@Test
fun default() {
screenshotTestRule.setContent(isComponent = true, takeScreenshot = true) {
AccountChip(
email = "maggie@example.com",
onClick = {}
)
}
}

@Test
fun disabled() {
screenshotTestRule.setContent(isComponent = true, takeScreenshot = true) {
AccountChip(
email = "maggie@example.com",
onClick = {},
enabled = false
)
}
}

@Test
fun withSmallAvatar() {
screenshotTestRule.setContent(isComponent = true, takeScreenshot = true) {
AccountChip(
email = "maggie@example.com",
onClick = {},
largeAvatar = false
)
}
}

@Test
fun withSecondaryChipType() {
screenshotTestRule.setContent(isComponent = true, takeScreenshot = true) {
AccountChip(
email = "maggie@example.com",
onClick = {},
colors = ChipDefaults.secondaryChipColors()
)
}
}

@Test
fun withLongEmailAddress() {
screenshotTestRule.setContent(isComponent = true, takeScreenshot = true) {
AccountChip(
email = "thisisaverylongemailaddresssample@example.com",
onClick = {}
)
}
}

@Test
fun withEmailAddressStartingWithSingleLetterAndDot() {
screenshotTestRule.setContent(isComponent = true, takeScreenshot = true) {
AccountChip(
email = "p.thisisaverylongemailaddress@example.com",
onClick = {}
)
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,7 @@ class CreateAccountChipTest : ScreenshotBaseTest() {
screenshotTestRule.setContent(isComponent = true, takeScreenshot = true) {
CreateAccountChip(
onClick = {},
largeIconSpace = true,
colors = ChipDefaults.secondaryChipColors(),
enabled = false
largeIconSpace = true
)
}
}
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ import androidx.wear.compose.material.ChipColors
import androidx.wear.compose.material.ChipDefaults
import androidx.wear.compose.material.Icon
import androidx.wear.compose.material.LocalContentAlpha
import androidx.wear.compose.material.MaterialTheme
import androidx.wear.compose.material.Text
import coil.compose.rememberAsyncImagePainter
import com.google.android.horologist.annotations.ExperimentalHorologistApi
Expand Down Expand Up @@ -180,8 +179,7 @@ public fun Chip(
modifier = Modifier.fillMaxWidth(),
textAlign = if (hasSecondaryLabel || hasIcon) TextAlign.Start else TextAlign.Center,
overflow = TextOverflow.Ellipsis,
maxLines = if (hasSecondaryLabel) 1 else 2,
style = MaterialTheme.typography.button
maxLines = if (hasSecondaryLabel) 1 else 2
)
}

Expand All @@ -191,8 +189,7 @@ public fun Chip(
Text(
text = secondaryLabel,
overflow = TextOverflow.Ellipsis,
maxLines = 1,
style = MaterialTheme.typography.caption2
maxLines = 1
)
}
}
Expand Down