diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenMultiSelectButton.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenMultiSelectButton.kt index c84c7adc5..2c1d0fdf8 100644 --- a/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenMultiSelectButton.kt +++ b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/BitwardenMultiSelectButton.kt @@ -3,8 +3,14 @@ package com.x8bit.bitwarden.ui.platform.components import androidx.compose.foundation.clickable import androidx.compose.foundation.interaction.MutableInteractionSource import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width import androidx.compose.material3.Icon +import androidx.compose.material3.IconButton +import androidx.compose.material3.IconButtonDefaults import androidx.compose.material3.MaterialTheme import androidx.compose.material3.OutlinedTextField import androidx.compose.material3.OutlinedTextFieldDefaults @@ -22,8 +28,10 @@ import androidx.compose.ui.semantics.contentDescription import androidx.compose.ui.semantics.role import androidx.compose.ui.semantics.semantics import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.unit.dp import com.x8bit.bitwarden.R import com.x8bit.bitwarden.ui.platform.base.util.asText +import com.x8bit.bitwarden.ui.platform.components.model.TooltipData import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme /** @@ -39,6 +47,7 @@ import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme * is selected from the dropdown menu. * @param modifier A [Modifier] that you can use to apply custom modifications to the composable. * @param supportingText A optional supporting text that will appear below the text field. + * @param tooltip A nullable [TooltipData], representing the tooltip icon. */ @Suppress("LongMethod") @Composable @@ -49,6 +58,7 @@ fun BitwardenMultiSelectButton( onOptionSelected: (String) -> Unit, modifier: Modifier = Modifier, supportingText: String? = null, + tooltip: TooltipData? = null, ) { var shouldShowDialog by remember { mutableStateOf(false) } @@ -65,7 +75,6 @@ fun BitwardenMultiSelectButton( } .fillMaxWidth() .clickable( - // Disable the ripple indication = null, interactionSource = remember { MutableInteractionSource() }, ) { @@ -74,9 +83,24 @@ fun BitwardenMultiSelectButton( textStyle = MaterialTheme.typography.bodyLarge, readOnly = true, label = { - Text( - text = label, - ) + Row { + Text(text = label) + tooltip?.let { + Spacer(modifier = Modifier.width(3.dp)) + IconButton( + onClick = it.onClick, + colors = IconButtonDefaults.iconButtonColors( + contentColor = MaterialTheme.colorScheme.primary, + ), + modifier = Modifier.size(16.dp), + ) { + Icon( + painter = painterResource(id = R.drawable.ic_tooltip_small), + contentDescription = it.contentDescription, + ) + } + } + } }, value = selectedOption, onValueChange = onOptionSelected, diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/model/TooltipData.kt b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/model/TooltipData.kt new file mode 100644 index 000000000..2662c6347 --- /dev/null +++ b/app/src/main/java/com/x8bit/bitwarden/ui/platform/components/model/TooltipData.kt @@ -0,0 +1,13 @@ +package com.x8bit.bitwarden.ui.platform.components.model + +/** + * Data class representing the data needed to create a tooltip icon in a composable. + * + * @property onClick A lambda function that defines the action to be performed when the tooltip icon + * is clicked. + * @property contentDescription A text description of the icon for accessibility purposes. + */ +data class TooltipData( + val onClick: () -> Unit, + val contentDescription: String, +) diff --git a/app/src/main/java/com/x8bit/bitwarden/ui/tools/feature/generator/GeneratorScreen.kt b/app/src/main/java/com/x8bit/bitwarden/ui/tools/feature/generator/GeneratorScreen.kt index 95b22ae4a..f93298ac1 100644 --- a/app/src/main/java/com/x8bit/bitwarden/ui/tools/feature/generator/GeneratorScreen.kt +++ b/app/src/main/java/com/x8bit/bitwarden/ui/tools/feature/generator/GeneratorScreen.kt @@ -61,6 +61,7 @@ import com.x8bit.bitwarden.ui.platform.components.BitwardenStepper import com.x8bit.bitwarden.ui.platform.components.BitwardenTextField import com.x8bit.bitwarden.ui.platform.components.BitwardenWideSwitch import com.x8bit.bitwarden.ui.platform.components.model.IconResource +import com.x8bit.bitwarden.ui.platform.components.model.TooltipData import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme import com.x8bit.bitwarden.ui.tools.feature.generator.GeneratorState.MainType.Passcode.PasscodeType.Passphrase.Companion.PASSPHRASE_MAX_NUMBER_OF_WORDS import com.x8bit.bitwarden.ui.tools.feature.generator.GeneratorState.MainType.Passcode.PasscodeType.Passphrase.Companion.PASSPHRASE_MIN_NUMBER_OF_WORDS @@ -753,6 +754,12 @@ private fun UsernameOptionsItem( supportingText = currentSubState.selectedType.supportingStringResId?.let { stringResource(id = it) }, + tooltip = TooltipData( + onClick = { + // TODO: "?" icon redirects user to appropriate link (BIT-1087) + }, + contentDescription = stringResource(id = R.string.learn_more), + ), ) } diff --git a/app/src/main/res/drawable/ic_tooltip_small.xml b/app/src/main/res/drawable/ic_tooltip_small.xml new file mode 100644 index 000000000..34e1ece06 --- /dev/null +++ b/app/src/main/res/drawable/ic_tooltip_small.xml @@ -0,0 +1,21 @@ + + + + + + + +