-
Notifications
You must be signed in to change notification settings - Fork 13
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add legends and secure checkout SVG to checkout #6002
Conversation
Size Change: +13 B (0%) Total Size: 1.98 MB ℹ️ View Unchanged
|
@@ -695,8 +696,8 @@ function CheckoutComponent({ geoId }: Props) { | |||
> | |||
<Box cssOverrides={shorterBoxMargin}> | |||
<BoxContents> | |||
<div css={personalDetailsFieldGroupStyles(true)}> | |||
<h2 css={personalDetailsHeader}>Your details</h2> | |||
<fieldset css={fieldset}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
As this css is related to a single fieldset and not all, would its be worth giving it a longer name like fieldsetPersonalDetails
?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've added this to payment fields too - but I am not sure we should as the CSS is using first-of-type, so I might try a refactor post-merge (so we can start demoing this).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice use of <fieldset>
to group related items in a box and <legend>
to apply caption. Much improvement on <div>
, will have to remember to use these more approriate tags
@paul-daniel-dempsey it's because forms drive so much interactivity on the web. Always work looking at MDN for reference! |
…ric-checkout-design
Seen on PROD (merged by @jamesgorrie 10 minutes and 51 seconds ago)
Sentry Release: support-client-side, support |
Part of #5722
fieldset
I know that the
1.
,2.
,n.
won't work when we have delivery fields, I will reach out to Helene and see if there is a generic design solution to this.Worth avoiding whitedspace check in the diff.