Skip to content

Commit

Permalink
fix(NcInputField): Make sure label and placeholder is not jumping
Browse files Browse the repository at this point in the history 
Rework layout logic to ensure the label is not jumping on focus.
This was caused as our border width changes when focusing.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
@susnux
susnux committed Jul 18, 2024
1 parent 30506f2 commit f2dc928
Showing 1 changed file with 65 additions and 64 deletions.
129 changes: 65 additions & 64 deletions src/components/NcInputField/NcInputField.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,13 @@ For a list of all available props and attributes, please check the [HTMLInputEle
</docs>

<template>
<div class="input-field" :class="{ 'input-field--disabled': disabled }">
<div class="input-field"
:class="{
'input-field--disabled': disabled,
'input-field--label-outside': labelOutside || !isValidLabel,
'input-field--leading-icon': hasLeadingIcon,
'input-field--trailing-icon': showTrailingButton || hasTrailingIcon,
}">
<div class="input-field__main-wrapper">
<input v-bind="$attrs"
:id="computedId"
Expand All @@ -30,9 +36,6 @@ For a list of all available props and attributes, please check the [HTMLInputEle
aria-live="polite"
:class="[inputClass,
{
'input-field__input--trailing-icon': showTrailingButton || hasTrailingIcon,
'input-field__input--leading-icon': hasLeadingIcon,
'input-field__input--label-outside': labelOutside,
'input-field__input--success': success,
'input-field__input--error': error,
'input-field__input--pill': pill,
Expand All @@ -43,10 +46,6 @@ For a list of all available props and attributes, please check the [HTMLInputEle
<!-- Label -->
<label v-if="!labelOutside && isValidLabel"
class="input-field__label"
:class="[{
'input-field__label--trailing-icon': showTrailingButton || hasTrailingIcon,
'input-field__label--leading-icon': hasLeadingIcon,
}]"
:for="computedId">
{{ label }}
</label>
Expand Down Expand Up @@ -329,62 +328,76 @@ export default {
<style lang="scss" scoped>
.input-field {
--input-radius: var(--border-radius-large);
// The padding before the input can start (leading button or border)
--input-padding-start: var(--border-radius-large);
// The padding where the input has to end (trailing button or border)
--input-padding-end: var(--border-radius-large);
// positional styles
position: relative;
width: 100%;
border-radius: var(--border-radius-large);
margin-block-start: 6px; // for the label in active state
&__main-wrapper {
height: var(--default-clickable-area);
position: relative;
}
&--disabled {
opacity: 0.4;
filter: saturate(0.4);
}
&__input {
margin: 0;
padding-inline: 12px 6px; // align with label 8px margin label + 6px padding label - 2px border input
height: var(--default-clickable-area) !important;
width: 100%;
// If there is no internal label we reset the margin reserved for it
&--label-outside {
margin-block-start: 0;
}
font-size: var(--default-font-size);
text-overflow: ellipsis;
&--leading-icon {
--input-padding-start: calc(var(--default-clickable-area) - var(--default-grid-baseline));
}
background-color: var(--color-main-background);
color: var(--color-main-text);
border: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);
border-radius: var(--border-radius-large);
&--trailing-icon {
--input-padding-end: calc(var(--default-clickable-area) - var(--default-grid-baseline));
}
&__main-wrapper {
height: var(--default-clickable-area);
position: relative;
}
&__input {
// If border width differes between focused and unfocused we need to compensate to prevent jumping
--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));
cursor: pointer;
-webkit-appearance: textfield !important;
-moz-appearance: textfield !important;
appearance: textfield !important;
// Center text if external label is used
&--label-outside {
padding-block: 0;
}
background-color: var(--color-main-background);
color: var(--color-main-text);
border: var(--border-width-input, 2px) solid var(--color-border-maxcontrast);
border-radius: var(--input-radius);
font-size: var(--default-font-size);
text-overflow: ellipsis;
height: calc(var(--default-clickable-area) - 2 * var(--input-border-width-offset)) !important;
width: 100%;
padding-inline: calc(var(--input-padding-start) + var(--input-border-width-offset)) calc(var(--input-padding-end) + var(--input-border-width-offset));
padding-block: var(--input-border-width-offset);
&:active:not([disabled]),
&:hover:not([disabled]),
&:focus:not([disabled]) {
border-width: var(--border-width-input-focused, 2px);
border-color: var(--color-main-text) !important;
box-shadow: 0 0 0 2px var(--color-main-background) !important;
// Reset padding offset when focused
--input-border-width-offset: 0px;
}
&:focus + .input-field__label,
&:hover:not(:placeholder-shown) + .input-field__label {
color: var(--color-main-text);
}
// Hide placeholder while not focussed -> show label instead (only if internal label is used)
&:not(:focus,&--label-outside)::placeholder {
opacity: 0;
}
&:focus {
cursor: text;
}
Expand All @@ -397,14 +410,6 @@ export default {
box-shadow: unset !important; // Override server rules
}
&--leading-icon {
padding-inline-start: var(--default-clickable-area);
}
&--trailing-icon {
padding-inline-end: var(--default-clickable-area);
}
&--success {
border-color: var(--color-success) !important; //Override hover border color
&:focus-visible {
Expand All @@ -420,16 +425,23 @@ export default {
}
&--pill {
border-radius: var(--border-radius-pill);
--input-radius: var(--border-radius-pill);
}
}
// Hide placeholder while not focussed -> show label instead (only if internal label is used)
&:not(&--label-outside) &__input:not(:focus)::placeholder {
opacity: 0;
}
&__label {
--input-label-font-size: var(--default-font-size);
position: absolute;
margin-inline: 14px 0;
margin-inline: var(--input-padding-start) var(--input-padding-end);
max-width: fit-content;
font-size: var(--input-label-font-size);
inset-block-start: calc((var(--default-clickable-area) - var(--default-line-height)) / 2); // center the label vertically
inset-inline: 0;
inset-inline: var(--border-width-input-focused, 2px);
// Fix color so that users do not think the input already has content
color: var(--color-text-maxcontrast);
// only one line labels are allowed
Expand All @@ -440,31 +452,20 @@ export default {
pointer-events: none;
// Position transition
transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);
&--leading-icon {
margin-inline-start: var(--default-clickable-area);
}
&--trailing-icon {
margin-inline-end: var(--default-clickable-area);
}
}
&__input:focus + &__label,
&__input:not(:placeholder-shown) + &__label {
inset-block-start: -10px;
--input-label-font-size: 13px; // minimum allowed font size for accessibility
line-height: 1.5; // minimum allowed line height for accessibility
font-size: 13px; // minimum allowed font size for accessibility
inset-block-start: calc(-1.5 * var(--input-label-font-size) / 2);
font-weight: 500;
border-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;
background-color: var(--color-main-background);
padding-inline: 5px;
margin-inline-start: 9px;
padding-inline: var(--default-grid-baseline);
margin-inline: calc(var(--input-padding-start) - var(--default-grid-baseline)) calc(var(--input-padding-end) - var(--default-grid-baseline));
transition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);
&--leading-icon {
margin-inline-start: 41px;
}
}
&__icon {
Expand All @@ -476,14 +477,14 @@ export default {
justify-content: center;
opacity: 0.7;
inset-block-end: 0;
&--leading {
inset-block-end: 0;
inset-inline-start: 2px;
inset-inline-start: 0px;
}
&--trailing {
inset-block-end: 0;
inset-inline-end: 2px;
inset-inline-end: 0px;
}
}
Expand Down

0 comments on commit f2dc928

Please sign in to comment.