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

Merged in fix/SW-2188-disabled-state (pull request #2597)

Browse Source 
fix(SW-2188): readonly for input fields

* fix(SW-2188): readonly for input fields


Approved-by: Anton Gunnarsson
This commit is contained in:
Bianca Widstam
2025-08-06 07:14:28 +00:00
parent 5f2e215508
commit 75ffd5d10b
4 changed files with 12 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/index.tsx
View File

@@ -155,7 +155,7 @@ export default function Details({ user }: DetailsProps) {
})} })}
maxLength={30} maxLength={30}
name="firstName" name="firstName"
disabled={!!user} readOnly={!!user}
registerOptions={{ required: true, onBlur: updateDetailsStore }} registerOptions={{ required: true, onBlur: updateDetailsStore }}
/> />
<Input <Input
@@ -165,7 +165,7 @@ export default function Details({ user }: DetailsProps) {
})} })}
maxLength={30} maxLength={30}
name="lastName" name="lastName"
disabled={!!user} readOnly={!!user}
registerOptions={{ required: true, onBlur: updateDetailsStore }} registerOptions={{ required: true, onBlur: updateDetailsStore }}
/> />
<CountrySelect <CountrySelect
@@ -190,7 +190,7 @@ export default function Details({ user }: DetailsProps) {
defaultMessage: "Email address", defaultMessage: "Email address",
})} })}
name="email" name="email"
disabled={!!user} readOnly={!!user}
registerOptions={{ required: true, onBlur: updateDetailsStore }} registerOptions={{ required: true, onBlur: updateDetailsStore }}
/> />
<Phone <Phone

1
apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
View File

@@ -54,6 +54,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
aria-label={ariaLabel} aria-label={ariaLabel}
className={className} className={className}
isDisabled={field.disabled} isDisabled={field.disabled}
isReadOnly={readOnly}
isInvalid={fieldState.invalid} isInvalid={fieldState.invalid}
isRequired={!!registerOptions.required} isRequired={!!registerOptions.required}
name={field.name} name={field.name}

10
packages/design-system/lib/components/Input/input.module.css
View File

@@ -13,12 +13,14 @@
box-sizing: border-box; box-sizing: border-box;
cursor: text; cursor: text;
&:has(.input:focus) { .container:has(.input:focus):not(:has(.input:disabled)),
.container:has(.input:focus):not(:has(.input:read-only)) {
outline-offset: -2px; outline-offset: -2px;
outline: 2px solid var(--Border-Interactive-Focus); outline: 2px solid var(--Border-Interactive-Focus);
} }
&:has(.input:disabled) { &:has(.input:disabled),
&:has(.input:read-only) {
background-color: var(--Surface-Primary-Disabled); background-color: var(--Surface-Primary-Disabled);
border: transparent; border: transparent;
cursor: unset; cursor: unset;
@@ -50,8 +52,10 @@
outline: none; outline: none;
} }
&:disabled { &:disabled,
&:read-only {
color: var(--Text-Interactive-Disabled); color: var(--Text-Interactive-Disabled);
cursor: unset;
} }
} }

1
packages/design-system/lib/components/Label/label.module.css
View File

@@ -62,6 +62,7 @@ textarea[value]:not([value='']) ~ .label,
} }
.label.disabled, .label.disabled,
input:read-only ~ .label,
input:disabled ~ .label, input:disabled ~ .label,
textarea:disabled ~ .label { textarea:disabled ~ .label {
color: var(--Text-Interactive-Disabled); color: var(--Text-Interactive-Disabled);