PM-18292 - Update section headers for all items to align with V3 Design (#4729)

This commit is contained in:
Phil Cappelli
2025-02-17 14:09:51 -05:00
committed by GitHub
parent f0d6599eb3
commit be416f87de
5 changed files with 90 additions and 14 deletions

View File

@@ -3,6 +3,7 @@ package com.x8bit.bitwarden.ui.vault.feature.addedit
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
@@ -19,6 +20,7 @@ import com.x8bit.bitwarden.ui.platform.base.util.standardHorizontalMargin
import com.x8bit.bitwarden.ui.platform.components.dropdown.BitwardenMultiSelectButton
import com.x8bit.bitwarden.ui.platform.components.field.BitwardenPasswordField
import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextField
import com.x8bit.bitwarden.ui.platform.components.header.BitwardenListHeaderText
import com.x8bit.bitwarden.ui.platform.components.model.CardStyle
import com.x8bit.bitwarden.ui.vault.feature.addedit.handlers.VaultAddEditCardTypeHandlers
import com.x8bit.bitwarden.ui.vault.model.VaultCardBrand
@@ -34,6 +36,17 @@ fun LazyListScope.vaultAddEditCardItems(
cardState: VaultAddEditState.ViewState.Content.ItemType.Card,
cardHandlers: VaultAddEditCardTypeHandlers,
) {
item {
Spacer(modifier = Modifier.height(16.dp))
BitwardenListHeaderText(
label = stringResource(id = R.string.card_details),
modifier = Modifier
.fillMaxWidth()
.standardHorizontalMargin()
.padding(horizontal = 16.dp),
)
}
item {
Spacer(modifier = Modifier.height(8.dp))
BitwardenTextField(

View File

@@ -3,6 +3,7 @@ package com.x8bit.bitwarden.ui.vault.feature.addedit
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
@@ -14,6 +15,7 @@ import com.x8bit.bitwarden.R
import com.x8bit.bitwarden.ui.platform.base.util.standardHorizontalMargin
import com.x8bit.bitwarden.ui.platform.components.dropdown.BitwardenMultiSelectButton
import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextField
import com.x8bit.bitwarden.ui.platform.components.header.BitwardenListHeaderText
import com.x8bit.bitwarden.ui.platform.components.model.CardStyle
import com.x8bit.bitwarden.ui.vault.feature.addedit.handlers.VaultAddEditIdentityTypeHandlers
import com.x8bit.bitwarden.ui.vault.model.VaultIdentityTitle
@@ -27,6 +29,17 @@ fun LazyListScope.vaultAddEditIdentityItems(
identityState: VaultAddEditState.ViewState.Content.ItemType.Identity,
identityItemTypeHandlers: VaultAddEditIdentityTypeHandlers,
) {
item {
Spacer(modifier = Modifier.height(16.dp))
BitwardenListHeaderText(
label = stringResource(id = R.string.personal_details),
modifier = Modifier
.fillMaxWidth()
.standardHorizontalMargin()
.padding(horizontal = 16.dp),
)
}
item {
Spacer(modifier = Modifier.height(8.dp))
TitleMultiSelectButton(
@@ -92,19 +105,30 @@ fun LazyListScope.vaultAddEditIdentityItems(
value = identityState.company,
onValueChange = identityItemTypeHandlers.onCompanyTextChange,
textFieldTestTag = "IdentityCompanyEntry",
cardStyle = CardStyle.Middle(),
cardStyle = CardStyle.Bottom,
modifier = Modifier
.fillMaxWidth()
.standardHorizontalMargin(),
)
}
item {
Spacer(modifier = Modifier.height(height = 16.dp))
BitwardenListHeaderText(
label = stringResource(id = R.string.identification),
modifier = Modifier
.fillMaxWidth()
.standardHorizontalMargin()
.padding(horizontal = 16.dp),
)
Spacer(modifier = Modifier.height(height = 8.dp))
}
item {
BitwardenTextField(
label = stringResource(id = R.string.ssn),
value = identityState.ssn,
onValueChange = identityItemTypeHandlers.onSsnTextChange,
textFieldTestTag = "IdentitySsnEntry",
cardStyle = CardStyle.Middle(),
cardStyle = CardStyle.Top(),
modifier = Modifier
.fillMaxWidth()
.standardHorizontalMargin(),
@@ -128,19 +152,30 @@ fun LazyListScope.vaultAddEditIdentityItems(
value = identityState.licenseNumber,
onValueChange = identityItemTypeHandlers.onLicenseNumberTextChange,
textFieldTestTag = "IdentityLicenseNumberEntry",
cardStyle = CardStyle.Middle(),
cardStyle = CardStyle.Bottom,
modifier = Modifier
.fillMaxWidth()
.standardHorizontalMargin(),
)
}
item {
Spacer(modifier = Modifier.height(height = 16.dp))
BitwardenListHeaderText(
label = stringResource(id = R.string.contact_info),
modifier = Modifier
.fillMaxWidth()
.standardHorizontalMargin()
.padding(horizontal = 16.dp),
)
Spacer(modifier = Modifier.height(height = 8.dp))
}
item {
BitwardenTextField(
label = stringResource(id = R.string.email),
value = identityState.email,
onValueChange = identityItemTypeHandlers.onEmailTextChange,
textFieldTestTag = "IdentityEmailEntry",
cardStyle = CardStyle.Middle(),
cardStyle = CardStyle.Top(),
modifier = Modifier
.fillMaxWidth()
.standardHorizontalMargin(),
@@ -152,19 +187,30 @@ fun LazyListScope.vaultAddEditIdentityItems(
value = identityState.phone,
onValueChange = identityItemTypeHandlers.onPhoneTextChange,
textFieldTestTag = "IdentityPhoneEntry",
cardStyle = CardStyle.Middle(),
cardStyle = CardStyle.Bottom,
modifier = Modifier
.fillMaxWidth()
.standardHorizontalMargin(),
)
}
item {
Spacer(modifier = Modifier.height(height = 16.dp))
BitwardenListHeaderText(
label = stringResource(id = R.string.address),
modifier = Modifier
.fillMaxWidth()
.standardHorizontalMargin()
.padding(horizontal = 16.dp),
)
Spacer(modifier = Modifier.height(height = 8.dp))
}
item {
BitwardenTextField(
label = stringResource(id = R.string.address1),
value = identityState.address1,
onValueChange = identityItemTypeHandlers.onAddress1TextChange,
textFieldTestTag = "IdentityAddressOneEntry",
cardStyle = CardStyle.Middle(),
cardStyle = CardStyle.Top(),
modifier = Modifier
.fillMaxWidth()
.standardHorizontalMargin(),

View File

@@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.navigationBarsPadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListState
import androidx.compose.runtime.Composable
@@ -22,6 +23,7 @@ import com.x8bit.bitwarden.ui.platform.components.card.BitwardenInfoCalloutCard
import com.x8bit.bitwarden.ui.platform.components.coachmark.CoachMarkScope
import com.x8bit.bitwarden.ui.platform.components.dropdown.BitwardenMultiSelectButton
import com.x8bit.bitwarden.ui.platform.components.field.BitwardenTextField
import com.x8bit.bitwarden.ui.platform.components.header.BitwardenListHeaderText
import com.x8bit.bitwarden.ui.platform.components.model.CardStyle
import com.x8bit.bitwarden.ui.platform.manager.permissions.PermissionsManager
import com.x8bit.bitwarden.ui.vault.components.collectionItemsSelector
@@ -106,6 +108,17 @@ fun CoachMarkScope<AddEditItemCoachMark>.VaultAddEditContent(
}
}
if (isAddItemMode) {
item {
BitwardenListHeaderText(
label = stringResource(id = R.string.item_details),
modifier = Modifier
.fillMaxWidth()
.standardHorizontalMargin()
.padding(horizontal = 16.dp),
)
Spacer(modifier = Modifier.height(8.dp))
}
item {
TypeOptionsItem(
entries = typeOptions,
@@ -175,7 +188,7 @@ fun CoachMarkScope<AddEditItemCoachMark>.VaultAddEditContent(
val collections = state.common.selectedOwner?.collections.orEmpty()
item {
BitwardenMultiSelectButton(
label = stringResource(id = R.string.who_owns_this_item),
label = stringResource(id = R.string.owner),
options = state.common.availableOwners.map { it.name }.toImmutableList(),
selectedOption = state.common.selectedOwner?.name,
onOptionSelected = { selectedOwnerName ->

View File

@@ -315,6 +315,7 @@ Scanning will happen automatically.</string>
<string name="april">April</string>
<string name="august">August</string>
<string name="brand">Brand</string>
<string name="card_details">Card Details</string>
<string name="cardholder_name">Cardholder name</string>
<string name="city_town">City / Town</string>
<string name="company">Company</string>
@@ -415,8 +416,11 @@ Scanning will happen automatically.</string>
<string name="invalid_email">Invalid email address.</string>
<string name="cards">Cards</string>
<string name="identities">Identities</string>
<string name="identification">Identification</string>
<string name="logins">Logins</string>
<string name="secure_notes">Secure notes</string>
<string name="personal_details">Personal Details</string>
<string name="contact_info">Contact Info</string>
<string name="all_items">All items</string>
<string name="ur_is">URIs</string>
<string name="checking_password">Checking password...</string>
@@ -440,7 +444,7 @@ Scanning will happen automatically.</string>
<string name="move_up">Move Up</string>
<string name="miscellaneous">Miscellaneous</string>
<string name="ownership">Ownership</string>
<string name="who_owns_this_item">Who owns this item?</string>
<string name="owner">Owner</string>
<string name="no_collections_to_list">There are no collections to list.</string>
<string name="moved_item_to_org">%1$s moved to %2$s.</string>
<string name="item_shared">Item has been shared.</string>

View File

@@ -2369,7 +2369,7 @@ class VaultAddEditScreenTest : BaseComposeTest() {
// Opens the menu
composeTestRule
.onNodeWithContentDescriptionAfterScroll(
label = "placeholder@email.com. Who owns this item?",
label = "placeholder@email.com. Owner",
)
.performClick()
@@ -2398,7 +2398,7 @@ class VaultAddEditScreenTest : BaseComposeTest() {
updateStateWithOwners()
composeTestRule
.onNodeWithContentDescriptionAfterScroll(
label = "placeholder@email.com. Who owns this item?",
label = "placeholder@email.com. Owner",
)
.assertIsDisplayed()
@@ -2407,7 +2407,7 @@ class VaultAddEditScreenTest : BaseComposeTest() {
}
composeTestRule
.onNodeWithContentDescriptionAfterScroll(label = "mockOwnerName-2. Who owns this item?")
.onNodeWithContentDescriptionAfterScroll(label = "mockOwnerName-2. Owner")
.assertIsDisplayed()
}
@@ -2719,7 +2719,7 @@ class VaultAddEditScreenTest : BaseComposeTest() {
// Opens the menu
composeTestRule
.onNodeWithContentDescriptionAfterScroll(
label = "placeholder@email.com. Who owns this item?",
label = "placeholder@email.com. Owner",
)
.performClick()
@@ -2750,7 +2750,7 @@ class VaultAddEditScreenTest : BaseComposeTest() {
composeTestRule
.onNodeWithContentDescriptionAfterScroll(
label = "placeholder@email.com. Who owns this item?",
label = "placeholder@email.com. Owner",
)
.assertIsDisplayed()
@@ -2760,7 +2760,7 @@ class VaultAddEditScreenTest : BaseComposeTest() {
composeTestRule
.onNodeWithContentDescriptionAfterScroll(
label = "mockOwnerName-2. Who owns this item?",
label = "mockOwnerName-2. Owner",
)
.assertIsDisplayed()
}