scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(SW-360): remove container queries to fix stacking context bug affecting dropdowns in signup

Browse Source
This commit is contained in:
Chuma McPhoy
2024-11-22 16:01:47 +01:00
parent 6f980fe9cd
commit 0d972367df
4 changed files with 75 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/Forms/Signup/index.tsx
View File

@@ -68,10 +68,11 @@ export default function SignupForm({ link, subtitle, title }: SignUpFormProps) {
password: "", password: "",
termsAccepted: false, termsAccepted: false,
}, },
mode: "onBlur", mode: "all",
criteriaMode: "all", criteriaMode: "all",
resolver: zodResolver(signUpSchema), resolver: zodResolver(signUpSchema),
reValidateMode: "onChange", reValidateMode: "onChange",
shouldFocusError: true,
}) })
async function onSubmit(data: SignUpSchema) { async function onSubmit(data: SignUpSchema) {

19
components/TempDesignSystem/Form/Date/date.module.css
View File

@@ -1,8 +1,3 @@
/* Leaving, will most likely get deleted */
.datePicker {
container-name: datePickerContainer;
container-type: inline-size;
}
.container { .container {
display: grid; display: grid;
gap: var(--Spacing-x2); gap: var(--Spacing-x2);
@@ -11,6 +6,13 @@
width: var(--width); width: var(--width);
} }
@media (max-width: 350px) {
.container {
display: flex;
flex-direction: column;
}
}
.day { .day {
grid-area: day; grid-area: day;
} }
@@ -31,10 +33,3 @@
.year.invalid > div > div { .year.invalid > div > div {
border-color: var(--Scandic-Red-60); border-color: var(--Scandic-Red-60);
} }
@container datePickerContainer (max-width: 350px) {
.container {
display: flex;
flex-direction: column;
}
}

120
components/TempDesignSystem/Form/Phone/index.tsx
View File

@@ -78,69 +78,67 @@ export default function Phone({
} }
return ( return (
<div className={`${styles.wrapper} ${className}`}> <div className={`${styles.phone} ${className}`}>
<div className={styles.phone}> <CountrySelector
<CountrySelector disabled={readOnly}
disabled={readOnly} dropdownArrowClassName={styles.arrow}
dropdownArrowClassName={styles.arrow} flagClassName={styles.flag}
flagClassName={styles.flag} onSelect={handleSelectCountry}
onSelect={handleSelectCountry} preferredCountries={["de", "dk", "fi", "no", "se", "gb"]}
preferredCountries={["de", "dk", "fi", "no", "se", "gb"]} selectedCountry={country.iso2}
selectedCountry={country.iso2} renderButtonWrapper={(props) => (
renderButtonWrapper={(props) => ( <button
<button {...props.rootProps}
{...props.rootProps} className={styles.select}
className={styles.select} tabIndex={0}
tabIndex={0} type="button"
type="button" data-testid="country-selector"
data-testid="country-selector" >
> <Label required={!!registerOptions.required} size="small">
<Label required={!!registerOptions.required} size="small"> {intl.formatMessage({ id: "Country code" })}
{intl.formatMessage({ id: "Country code" })} </Label>
</Label> <span className={styles.selectContainer}>
<span className={styles.selectContainer}> {props.children}
{props.children} <Body asChild fontOnly>
<Body asChild fontOnly> <DialCodePreview
<DialCodePreview className={styles.dialCode}
className={styles.dialCode} dialCode={country.dialCode}
dialCode={country.dialCode} prefix="+"
prefix="+"
/>
</Body>
<ChevronDownIcon
className={styles.chevron}
color="grey80"
height={18}
width={18}
/> />
</span> </Body>
</button> <ChevronDownIcon
)} className={styles.chevron}
/> color="grey80"
<TextField height={18}
aria-label={ariaLabel} width={18}
defaultValue={field.value} />
isDisabled={disabled ?? field.disabled} </span>
isInvalid={fieldState.invalid} </button>
isRequired={!!registerOptions?.required} )}
isReadOnly={readOnly} />
name={field.name} <TextField
aria-label={ariaLabel}
defaultValue={field.value}
isDisabled={disabled ?? field.disabled}
isInvalid={fieldState.invalid}
isRequired={!!registerOptions?.required}
isReadOnly={readOnly}
name={field.name}
type="tel"
>
<AriaInputWithLabel
{...field}
id={field.name}
label={label}
onChange={handleChange}
placeholder={placeholder}
readOnly={readOnly}
required={!!registerOptions.required}
type="tel" type="tel"
> value={inputValue}
<AriaInputWithLabel />
{...field} <ErrorMessage errors={formState.errors} name={field.name} />
id={field.name} </TextField>
label={label}
onChange={handleChange}
placeholder={placeholder}
readOnly={readOnly}
required={!!registerOptions.required}
type="tel"
value={inputValue}
/>
<ErrorMessage errors={formState.errors} name={field.name} />
</TextField>
</div>
</div> </div>
) )
} }

19
components/TempDesignSystem/Form/Phone/phone.module.css
View File

@@ -1,11 +1,7 @@
.wrapper {
container-name: phoneContainer;
container-type: inline-size;
}
.phone { .phone {
display: grid; display: grid;
grid-template-columns: 1fr;
gap: var(--Spacing-x2); gap: var(--Spacing-x2);
grid-template-columns: minmax(124px, 164px) 1fr;
--react-international-phone-background-color: var(--Main-Grey-White); --react-international-phone-background-color: var(--Main-Grey-White);
--react-international-phone-border-color: var(--Scandic-Beige-40); --react-international-phone-border-color: var(--Scandic-Beige-40);
@@ -28,6 +24,12 @@
); );
} }
@media (min-width: 385px) {
.phone {
grid-template-columns: minmax(124px, 164px) 1fr;
}
}
.phone:has(.input:active, .input:focus) { .phone:has(.input:active, .input:focus) {
--react-international-phone-border-color: var(--Scandic-Blue-90); --react-international-phone-border-color: var(--Scandic-Blue-90);
} }
@@ -104,10 +106,3 @@
justify-self: flex-start; justify-self: flex-start;
padding: 0; padding: 0;
} }
@container phoneContainer (max-width: 350px) {
.phone {
display: flex;
flex-direction: column;
}
}