[PM-18067] Consolidate item name fields into ItemHeader (#4766)

Author: SaintPatrck

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/field/BitwardenTextField.kt

@@ -108,7 +108,7 @@ fun BitwardenTextField(
     label: String?,
     value: String,
     onValueChange: (String) -> Unit,
-    cardStyle: CardStyle,
+    cardStyle: CardStyle?,
     modifier: Modifier = Modifier,
     tooltip: TooltipData? = null,
     placeholder: String? = null,
@@ -207,7 +207,7 @@ fun BitwardenTextField(
     value: String,
     onValueChange: (String) -> Unit,
     supportingContent: (@Composable ColumnScope.() -> Unit)?,
-    cardStyle: CardStyle,
+    cardStyle: CardStyle?,
     modifier: Modifier = Modifier,
     tooltip: TooltipData? = null,
     supportingContentPadding: PaddingValues = PaddingValues(vertical = 12.dp, horizontal = 16.dp),
@@ -378,7 +378,7 @@ fun BitwardenTextField(
                             content = content,
                         )
                     }
-                    ?: Spacer(modifier = Modifier.height(height = 6.dp))
+                    ?: Spacer(modifier = Modifier.height(height = cardStyle?.let { 6.dp } ?: 0.dp))
             }
             val filteredAutoCompleteList = autoCompleteOptions
                 .filter { option ->

app/src/main/java/com/x8bit/bitwarden/ui/platform/components/header/BitwardenExpandingHeader.kt

@@ -1,7 +1,11 @@
 package com.x8bit.bitwarden.ui.platform.components.header
 
+import androidx.compose.animation.Crossfade
+import androidx.compose.animation.core.AnimationConstants
 import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Icon
@@ -12,6 +16,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.draw.rotate
+import androidx.compose.ui.graphics.Shape
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
@@ -21,44 +26,77 @@ import com.x8bit.bitwarden.ui.platform.theme.BitwardenTheme
 
 /**
  * Reusable header element that is clickable for expanding or collapsing content.
+ *
+ * @param collapsedText Text to display when the content is collapsed.
+ * @param expandedText Text to display when the content is expanded.
+ * @param showExpansionIndicator Whether to show an indicator to expand or collapse the content.
  */
 @Composable
 fun BitwardenExpandingHeader(
     isExpanded: Boolean,
     onClick: () -> Unit,
     modifier: Modifier = Modifier,
-    title: String = stringResource(id = R.string.additional_options),
+    collapsedText: String = stringResource(id = R.string.additional_options),
+    expandedText: String = collapsedText,
+    showExpansionIndicator: Boolean = true,
+    shape: Shape = BitwardenTheme.shapes.content,
+    insets: PaddingValues = PaddingValues(top = 16.dp, bottom = 8.dp),
 ) {
     Row(
         modifier = modifier
-            .clip(shape = BitwardenTheme.shapes.content)
+            .clip(shape = shape)
             .clickable(
                 onClickLabel = stringResource(
                     id = if (isExpanded) R.string.options_expanded else R.string.options_collapsed,
                 ),
                 onClick = onClick,
             )
             .minimumInteractiveComponentSize()
-            .padding(top = 16.dp, bottom = 8.dp)
             .padding(horizontal = 16.dp)
+            .padding(paddingValues = insets)
             .semantics(mergeDescendants = true) {},
         verticalAlignment = Alignment.CenterVertically,
     ) {
-        Text(
-            text = title,
-            color = BitwardenTheme.colorScheme.text.interaction,
-            style = BitwardenTheme.typography.labelLarge,
-            modifier = Modifier.padding(end = 8.dp),
-        )
-        val iconRotationDegrees = animateFloatAsState(
-            targetValue = if (isExpanded) 0f else 180f,
-            label = "expanderIconRotationAnimation",
-        )
-        Icon(
-            painter = rememberVectorPainter(id = R.drawable.ic_chevron_up_small),
-            contentDescription = null,
-            tint = BitwardenTheme.colorScheme.icon.secondary,
-            modifier = Modifier.rotate(degrees = iconRotationDegrees.value),
-        )
+        Crossfade(
+            targetState = isExpanded,
+            label = "BitwardenExpandingHeaderTitle_animation",
+            // Make the animation shorter when the text is the same to avoid crossfading the same
+            // text.
+            animationSpec = tween(
+                durationMillis = if (expandedText != collapsedText) {
+                    AnimationConstants.DefaultDurationMillis
+                } else {
+                    0
+                },
+            ),
+        ) { expanded ->
+            if (expanded) {
+                Text(
+                    text = expandedText,
+                    color = BitwardenTheme.colorScheme.text.interaction,
+                    style = BitwardenTheme.typography.labelLarge,
+                    modifier = Modifier.padding(end = 8.dp),
+                )
+            } else {
+                Text(
+                    text = collapsedText,
+                    color = BitwardenTheme.colorScheme.text.interaction,
+                    style = BitwardenTheme.typography.labelLarge,
+                    modifier = Modifier.padding(end = 8.dp),
+                )
+            }
+        }
+        if (showExpansionIndicator) {
+            val iconRotationDegrees = animateFloatAsState(
+                targetValue = if (isExpanded) 0f else 180f,
+                label = "expanderIconRotationAnimation",
+            )
+            Icon(
+                painter = rememberVectorPainter(id = R.drawable.ic_chevron_up_small),
+                contentDescription = null,
+                tint = BitwardenTheme.colorScheme.icon.secondary,
+                modifier = Modifier.rotate(degrees = iconRotationDegrees.value),
+            )
+        }
     }
 }

app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/color/BitwardenColorScheme.kt

@@ -17,6 +17,7 @@ data class BitwardenColorScheme(
     val toggleButton: ToggleButtonColors,
     val sliderButton: SliderButtonColors,
     val status: StatusColors,
+    val illustration: IllustrationColors,
 ) {
     /**
      * Defines all the text colors for the app.
@@ -124,4 +125,13 @@ data class BitwardenColorScheme(
         val weak2: Color,
         val error: Color,
     )
+
+    /**
+     * Defines all the illustration colors for the app.
+     */
+    @Immutable
+    data class IllustrationColors(
+        val outline: Color,
+        val backgroundPrimary: Color,
+    )
 }

app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/color/ColorScheme.kt

@@ -69,6 +69,10 @@ val darkBitwardenColorScheme: BitwardenColorScheme = BitwardenColorScheme(
         weak2 = PrimitiveColors.yellow200,
         error = PrimitiveColors.red200,
     ),
+    illustration = BitwardenColorScheme.IllustrationColors(
+        outline = PrimitiveColors.blue500,
+        backgroundPrimary = PrimitiveColors.blue200,
+    ),
 )
 
 /**
@@ -137,6 +141,10 @@ val lightBitwardenColorScheme: BitwardenColorScheme = BitwardenColorScheme(
         weak2 = PrimitiveColors.yellow300,
         error = PrimitiveColors.red300,
     ),
+    illustration = BitwardenColorScheme.IllustrationColors(
+        outline = PrimitiveColors.blue700,
+        backgroundPrimary = PrimitiveColors.blue100,
+    ),
 )
 
 /**
@@ -211,6 +219,10 @@ fun dynamicBitwardenColorScheme(
             weak2 = defaultTheme.status.weak2,
             error = defaultTheme.status.error,
         ),
+        illustration = BitwardenColorScheme.IllustrationColors(
+            outline = materialColorScheme.tertiaryContainer,
+            backgroundPrimary = materialColorScheme.onTertiaryContainer,
+        ),
     )
 }
 

app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/shape/BitwardenShapes.kt

@@ -22,4 +22,5 @@ data class BitwardenShapes(
     val progressIndicator: CornerBasedShape,
     val segmentedControl: CornerBasedShape,
     val snackbar: CornerBasedShape,
+    val favicon: CornerBasedShape,
 )

app/src/main/java/com/x8bit/bitwarden/ui/platform/theme/shape/Shapes.kt

@@ -22,4 +22,5 @@ val bitwardenShapes: BitwardenShapes = BitwardenShapes(
     progressIndicator = CircleShape,
     segmentedControl = CircleShape,
     snackbar = RoundedCornerShape(size = 8.dp),
+    favicon = CircleShape,
 )