Adding the tooltip icon to the UsernameType dropdown in the generator (#307)

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(
+                Row {
-                    text = label,
+                    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,

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,
+)

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),
+        ),
     )
 }
 

app/src/main/res/drawable/ic_tooltip_small.xml

@@ -0,0 +1,21 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="14dp"
+    android:height="14dp"
+    android:viewportWidth="14"
+    android:viewportHeight="14">
+  <group>
+    <clip-path
+        android:pathData="M0.333,0.333h13.333v13.333h-13.333z"/>
+    <path
+        android:pathData="M7,12.833C10.222,12.833 12.833,10.222 12.833,7C12.833,3.778 10.222,1.167 7,1.167C3.778,1.167 1.167,3.778 1.167,7C1.167,10.222 3.778,12.833 7,12.833ZM7,13.667C10.682,13.667 13.667,10.682 13.667,7C13.667,3.318 10.682,0.333 7,0.333C3.318,0.333 0.333,3.318 0.333,7C0.333,10.682 3.318,13.667 7,13.667Z"
+        android:fillColor="#175DDC"
+        android:fillType="evenOdd"/>
+    <path
+        android:pathData="M5.469,4.142C5.143,4.443 4.917,4.911 4.917,5.594C4.917,5.824 4.73,6.01 4.5,6.01C4.27,6.01 4.083,5.824 4.083,5.594C4.083,4.714 4.382,4.01 4.904,3.529C5.421,3.054 6.115,2.833 6.844,2.833C7.572,2.833 8.267,3.054 8.783,3.529C9.305,4.01 9.604,4.714 9.604,5.594C9.604,6.036 9.384,6.395 9.133,6.678C8.898,6.943 8.594,7.188 8.322,7.407C8.307,7.419 8.292,7.432 8.277,7.444C7.978,7.684 7.718,7.899 7.528,8.124C7.343,8.344 7.26,8.533 7.26,8.719V9.5C7.26,9.73 7.074,9.917 6.844,9.917C6.614,9.917 6.427,9.73 6.427,9.5V8.719C6.427,8.261 6.638,7.887 6.891,7.586C7.141,7.29 7.467,7.026 7.754,6.795C7.761,6.789 7.768,6.784 7.774,6.778C8.068,6.542 8.322,6.337 8.509,6.126C8.698,5.912 8.771,5.744 8.771,5.594C8.771,4.911 8.545,4.443 8.219,4.142C7.887,3.837 7.409,3.667 6.844,3.667C6.278,3.667 5.8,3.837 5.469,4.142Z"
+        android:fillColor="#175DDC"
+        android:fillType="evenOdd"/>
+    <path
+        android:pathData="M7.417,11.271C7.417,11.559 7.183,11.792 6.896,11.792C6.608,11.792 6.375,11.559 6.375,11.271C6.375,10.983 6.608,10.75 6.896,10.75C7.183,10.75 7.417,10.983 7.417,11.271Z"
+        android:fillColor="#175DDC"/>
+  </group>
+</vector>