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

fix: update password and deprecated phone inputs to be consistent with other existing inputs in signup

Browse Source
This commit is contained in:
Christian Andolf
2025-06-05 10:32:16 +02:00
parent 89fe73c1bf
commit 5d89f6c465
4 changed files with 11 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/components/TempDesignSystem/Form/DeprecatedPhone/index.tsx
View File

@@ -34,7 +34,7 @@ export default function Phone({
disabled = false,
label,
name = "phoneNumber",
placeholder = "",
placeholder,
readOnly = false,
registerOptions = {
required: true,

6
apps/scandic-web/components/TempDesignSystem/Form/Input/input.module.css
View File

@@ -1,15 +1,15 @@
.helpText {
align-items: flex-start;
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.error {
align-items: center;
color: var(--Text-Interactive-Error);
display: flex;
gap: var(--Spacing-x-half);
margin: var(--Spacing-x1) 0 0;
gap: var(--Space-x05);
margin: var(--Space-x1) 0 0;
}
.error svg {

2
apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx
View File

@@ -24,7 +24,7 @@ export default function PasswordInput({
label,
"aria-label": ariaLabel,
disabled = false,
placeholder = "",
placeholder,
registerOptions = {},
visibilityToggleable = true,
isNewPassword = false,

69
apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/passwordInput.module.css
View File

@@ -1,79 +1,22 @@
.container {
align-content: center;
background-color: var(--Main-Grey-White);
border-color: var(--Scandic-Beige-40);
border-style: solid;
border-width: 1px;
border-radius: var(--Corner-radius-md);
display: grid;
height: 60px;
padding: var(--Spacing-x1) var(--Spacing-x2);
transition: border-color 200ms ease;
position: relative;
}
.container:has(.input:active, .input:focus) {
border-color: var(--Scandic-Blue-90);
}
.container:has(.input:disabled) {
background-color: var(--Main-Grey-10);
border: none;
color: var(--Main-Grey-40);
}
.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
border-color: var(--Scandic-Red-60);
}
.input {
background: none;
border: none;
color: var(--Main-Grey-100);
height: 18px;
margin: 0;
order: 2;
overflow: visible;
padding: 0;
}
.input:not(:active, :focus):placeholder-shown {
height: 0px;
transition: height 150ms ease;
}
.input:focus,
.input:focus:placeholder-shown,
.input:active,
.input:active:placeholder-shown {
height: 18px;
transition: height 150ms ease;
outline: none;
}
.input:disabled {
color: var(--Main-Grey-40);
}
.helpText {
align-items: flex-start;
display: flex;
gap: var(--Spacing-x-half);
gap: var(--Space-x05);
}
.error {
align-items: center;
color: var(--Scandic-Red-60);
color: var(--Text-Interactive-Error);
display: flex;
gap: var(--Spacing-x-half);
margin: var(--Spacing-x1) 0 0;
gap: var(--Space-x05);
margin: var(--Space-x1) 0 0;
}
.errors {
display: flex;
flex-wrap: wrap;
gap: var(--Spacing-x-one-and-half) var(--Spacing-x1);
padding-top: var(--Spacing-x1);
gap: var(--Space-x15) var(--Space-x1);
padding-top: var(--Space-x1);
}
.inputWrapper {