[Shipping Labels - Customs Form] UI 2 #14769
Conversation
toupper
added
type: task
Generated by 🚫 Danger |
|
|
…github.com/woocommerce/woocommerce-ios into issue/13784-shipping-labels-customs-form-2
| VStack { | ||
| ScrollViewReader { proxy in | ||
| ScrollView { | ||
| VStack(alignment: .leading, spacing: Constants.defaultVerticalSpacing) { |
There was a problem hiding this comment.
I'm seeing an issue with too much vertical spacing between the labels and their corresponding dropdown menu or text field in this VStack, compared to the designs:
| Design | Actual |
|---|---|
 |
 |
There was a problem hiding this comment.
That's true, I fixed it in 78df820
| } | ||
| }.renderedIf(isCollapsed) | ||
| .foregroundColor(.primary) | ||
| .subheadlineStyle() |
There was a problem hiding this comment.
Is this text supposed to be subheadline style? The design looks like it's using regular text styling here.
There was a problem hiding this comment.
Good catch! Fixed here bee9058
| } | ||
| .padding(.top, Layout.collapsibleViewTopPadding) | ||
| }, content: { | ||
| VStack(alignment: .leading, spacing: Layout.collapsibleViewVerticalSpacing) { |
There was a problem hiding this comment.
Similar to above, it looks like there's extra space between the labels and their corresponding text field/dropdown menu in this view, compared to the design.
There was a problem hiding this comment.
Good point, done in 111bf7b
| .foregroundColor(.primary) | ||
| .subheadlineStyle() | ||
| Spacer() | ||
| Image(systemName: "info.circle") |
There was a problem hiding this comment.
Is this info circle supposed to be a button?
There was a problem hiding this comment.
Indeed, done in 71cd530
| value: "Description", | ||
| comment: "Title for the customs items description text field for customs items") | ||
| static let HSTarriffNumber = NSLocalizedString("wooShipping.customsItems.hsTarriffNumber", | ||
| value: "HSTarriffNumber", |
There was a problem hiding this comment.
This is missing its spaces, and I think there's a typo in the design. It should be:
| value: "HSTarriffNumber", | |
| value: "HS tariff number", |
| value: "Optional", | ||
| comment: "Placeholder for the HS Tarriff Number text field for customs items") | ||
| static let HSTarriffNumberMoreInfo = NSLocalizedString("wooShipping.customsItems.hsTarriffNumber.moreInfoText", | ||
| value: "More info about HS tarriff", |
There was a problem hiding this comment.
I think there's a typo for this string in the design:
| value: "More info about HS tarriff", | |
| value: "More info about HS tariff", |
| .footnoteStyle() | ||
| } | ||
|
|
||
| HStack { |
There was a problem hiding this comment.
I think we should top-align this HStack so they remain aligned even if one of them is missing a value:
There was a problem hiding this comment.
Good point, done in 4ae10d7
| // TODO: Add right unit | ||
| Text("kg") |
There was a problem hiding this comment.
FYI the weight unit is set as an environment value, so you could access it with a property like @Environment(\.shippingWeightUnit) var weightUnit: String in this view.
There was a problem hiding this comment.
Awesome, thanks for the hint, added here 2456a91
| .padding(.trailing, Layout.extraPadding) | ||
| .padding(.bottom, Layout.extraPadding) | ||
| }) | ||
| .roundedBorder(cornerRadius: Layout.borderCornerRadius, lineColor: Color(.separator), lineWidth: Layout.borderLineWidth) |
There was a problem hiding this comment.
According to the design, the border around the collapsible view could be grey (when collapsed), red (when collapsed if there's an issue with the item), or purple (when expanded).
There was a problem hiding this comment.
Good catch! Done in 1215505
|
|
||
| let allCountries: [Country] | ||
|
|
||
| let hsTariffURL: URL? = .init(string: "https://woocommerce.com/document/woocommerce-shipping-and-tax/woocommerce-shipping/#section-29") |
There was a problem hiding this comment.
Should we add this to WooConstants.URLs since it's a known/trusted URL?
There was a problem hiding this comment.
Indeed, it looks much better there 00c7eb6
Part of: #13784
Description
With this PR we implement the second part of the Shipping Labels Customs forms: the Product Details and the button to save the Custom Details. Please note that we don't implement any data binding here.
Steps to reproduce
Testing information
N/A
Screenshots
Simulator.Screen.Recording.-.iPhone.16.-.2024-12-27.at.11.25.22.mp4
RELEASE-NOTES.txtif necessary.Reviewer (or Author, in the case of optional code reviews):
Please make sure these conditions are met before approving the PR, or request changes if the PR needs improvement: