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

fix(SW-2188): readonly for input fields

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


Approved-by: Anton Gunnarsson

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

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

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

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

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

@@ -13,12 +13,14 @@
   box-sizing: border-box;
   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: 2px solid var(--Border-Interactive-Focus);
   }
 
-  &:has(.input:disabled) {
+  &:has(.input:disabled),
+  &:has(.input:read-only) {
     background-color: var(--Surface-Primary-Disabled);
     border: transparent;
     cursor: unset;
@@ -50,8 +52,10 @@
     outline: none;
   }
 
-  &:disabled {
+  &:disabled,
+  &:read-only {
     color: var(--Text-Interactive-Disabled);
+    cursor: unset;
   }
 }
 

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

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