diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css b/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css index 00bfc3754..b68e9cd50 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css +++ b/apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css @@ -12,7 +12,7 @@ transition: border-color 200ms ease; } -.container:has(.input:active, .input:focus) { +.container:has(.input:focus) { border-color: var(--Scandic-Blue-90); } @@ -37,20 +37,18 @@ padding: 0; } -.container:has(.input:not(:placeholder-shown)) { +.container:has(.input:placeholder-shown) { align-content: space-around; gap: var(--Spacing-x-half); } -.input:not(:active, :focus):placeholder-shown { - height: 0px; +.input:not(:focus):not(:placeholder-shown) { + height: 1px; transition: height 150ms ease; } .input:focus, -.input:focus:placeholder-shown, -.input:active, -.input:active:placeholder-shown { +.input:focus:placeholder-shown { height: 18px; transition: height 150ms ease; outline: none; diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx b/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx index d2dcb10db..18a737e44 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx +++ b/apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx @@ -26,7 +26,7 @@ const Input = forwardRef(function Input( label, maxLength, name, - placeholder = "", + placeholder, readOnly = false, registerOptions = {}, type = "text", diff --git a/apps/scandic-web/components/TempDesignSystem/Form/Label/label.module.css b/apps/scandic-web/components/TempDesignSystem/Form/Label/label.module.css index c12193b20..b2ebbd918 100644 --- a/apps/scandic-web/components/TempDesignSystem/Form/Label/label.module.css +++ b/apps/scandic-web/components/TempDesignSystem/Form/Label/label.module.css @@ -30,10 +30,8 @@ span.required:after { } /* Handle input and textarea fields */ -input:active ~ .label, -input:not(:placeholder-shown) ~ .label, -textarea:active ~ .label, -textarea:not(:placeholder-shown) ~ .label { +input:placeholder-shown ~ .label, +textarea:placeholder-shown ~ .label { display: block; font-size: 12px; } @@ -49,9 +47,7 @@ textarea:placeholder-shown ~ .label { } input:placeholder-shown:focus ~ .label, -input:placeholder-shown:active ~ .label, -textarea:placeholder-shown.label, -textarea:placeholder-shown:active ~ .label { +textarea:placeholder-shown.label { margin-bottom: var(--Spacing-x-half); } @@ -67,8 +63,7 @@ textarea:disabled ~ .label, } :global(.select-container)[data-open="true"] .label:not(.discreet), -:global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet), -:global(.select-button):active .label:not(.discreet) { +:global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet) { font-size: 12px; margin-bottom: var(--Spacing-x-half); } diff --git a/packages/design-system/lib/components/Select/SelectFilter.tsx b/packages/design-system/lib/components/Select/SelectFilter.tsx index c11e72656..473798b51 100644 --- a/packages/design-system/lib/components/Select/SelectFilter.tsx +++ b/packages/design-system/lib/components/Select/SelectFilter.tsx @@ -78,7 +78,7 @@ function ComboBoxInner({ } }, [inputRef, inputValue, isFocused, selectedItem?.textValue]) - return children + return
{children}
} export function SelectFilter({ @@ -123,7 +123,7 @@ export function SelectFilter({ {...props} > -