Skip to content

fix(NcInputField): Bring input field height to 44px and fixes its focus feedback #4718

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
susnux merged 5 commits into from
Nov 7, 2023
Merged

fix(NcInputField): Bring input field height to 44px and fixes its focus feedback #4718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
3183c5d
Reduce select height
marcoambrosini Oct 27, 2023
f746879
Fix inputField height
marcoambrosini Oct 27, 2023
40fc38e
Fix text inputs focus feedback
marcoambrosini Oct 31, 2023
be2bddc
Fix selects appearance
marcoambrosini Oct 31, 2023
2efc94c
Fix text truncation
marcoambrosini Nov 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 20 additions & 41 deletions src/components/NcInputField/NcInputField.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -336,7 +336,7 @@ export default {
margin-block-start: 6px; // for the label in active state

&__main-wrapper {
height: 38px; // 44px - 6px margin
height: var(--default-clickable-area);
position: relative;
}

Expand All @@ -348,7 +348,7 @@ export default {
&__input {
margin: 0;
padding-inline: 12px 6px; // align with label 8px margin label + 6px padding label - 2px border input
height: 38px !important;
height: var(--default-clickable-area) !important;
width: 100%;

font-size: var(--default-font-size);
Expand All @@ -371,7 +371,13 @@ export default {
&:active:not([disabled]),
&:hover:not([disabled]),
&:focus:not([disabled]) {
border-color: var(--color-primary-element);
border-color: 2px solid var(--color-main-text) !important;
box-shadow: 0 0 0 2px var(--color-main-background) !important;
}

&: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)
Expand All @@ -392,56 +398,33 @@ export default {
}

&--leading-icon {
padding-inline-start: 32px;
padding-inline-start: var(--default-clickable-area);
}

&--trailing-icon {
padding-inline-end: 32px;
padding-inline-end: var(--default-clickable-area);
}

&--success {
border-color: var(--color-success) !important; //Override hover border color
&:focus-visible {
box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
}

// Align label text color with border color (on hover / focus)
&:focus + .input-field__label,
&:hover:not(:placeholder-shown) + .input-field__label {
color: var(--color-success-text);
}
}

&--error {
border-color: var(--color-error) !important; //Override hover border color
&:focus-visible {
box-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px
}

// Align label text color with border color (on hover / focus)
&:focus + .input-field__label,
&:hover:not(:placeholder-shown) + .input-field__label {
color: var(--color-error-text);
}
}

// Align label text color with border color (on hover / focus)
&:not(&--success, &--error) {
&:focus + .input-field__label,
&:hover:not(:placeholder-shown) + .input-field__label {
color: var(--color-primary-element);
}
}
}

&__label {
position: absolute;
margin-inline: 14px 0;
// fix height and line height to center label
height: 17px;
max-width: fit-content;
line-height: 1;
inset-block-start: 12px;
inset-block-start: 11px;
inset-inline: 0;
// Fix color so that users do not think the input already has content
color: var(--color-text-maxcontrast);
Expand All @@ -455,50 +438,46 @@ export default {
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 {
// 32px icon + 2px border
margin-inline-start: 34px;
margin-inline-start: var(--default-clickable-area);
}

&--trailing-icon {
// 32px icon + 2px border
margin-inline-end: 34px;
margin-inline-end: var(--default-clickable-area);
}
}

&__input:focus + &__label,
&__input:not(:placeholder-shown) + &__label {
inset-block-start: -8px;
inset-block-start: -10px;
font-size: 13px; // minimum allowed font size for accessibility
font-weight: 500;
border-radius: var(--default-grid-baseline) var(--default-grid-baseline) 0 0;
background-color: var(--color-main-background);
height: 16px;
padding-inline: 5px;
padding-block-start: 2px;
margin-inline-start: 9px;

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: 29px;
margin-inline-start: 41px;
}
}

&__icon {
position: absolute;
height: 32px;
width: 32px;
height: var(--default-clickable-area);
width: var(--default-clickable-area);
display: flex;
align-items: center;
justify-content: center;
opacity: 0.7;

&--leading {
inset-block-end: 3px;
inset-block-end: 0;
inset-inline-start: 2px;
}

&--trailing {
inset-block-end: 3px;
inset-block-end: 0;
inset-inline-end: 2px;
}
}
Expand Down
32 changes: 27 additions & 5 deletions src/components/NcSelect/NcSelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -486,6 +486,7 @@ export default {
<VueSelect class="select"
:class="{
'select--no-wrap': noWrap,
'user-select': userSelect,
}"
v-bind="propsToForward"
v-on="$listeners"
Expand All @@ -504,6 +505,7 @@ export default {
<template #option="option">
<NcListItemIcon v-if="userSelect"
v-bind="option"
:avatar-size="24"
:name="option[localLabel]"
:search="search" />
<NcEllipsisedOption v-else
Expand All @@ -513,6 +515,7 @@ export default {
<template #selected-option="selectedOption">
<NcListItemIcon v-if="userSelect"
v-bind="selectedOption"
:avatar-size="24"
:name="selectedOption[localLabel]"
:search="search" />
<NcEllipsisedOption v-else
Expand Down Expand Up @@ -1036,10 +1039,10 @@ body {
--vs-border-radius: var(--border-radius-large);

/* Component Controls: Clear, Open Indicator */
--vs-controls-color: var(--color-text-maxcontrast);
--vs-controls-color: var(--color-main-text);

/* Selected */
--vs-selected-bg: var(--color-background-dark);
--vs-selected-bg: var(--color-background-hover);
--vs-selected-color: var(--color-main-text);
--vs-selected-border-color: var(--vs-border-color);
--vs-selected-border-style: var(--vs-border-style);
Expand Down Expand Up @@ -1067,6 +1070,9 @@ body {

/* Transitions */
--vs-transition-duration: 0ms;

/* Actions */
--vs-actions-padding: 0 8px 0 4px;
}

.v-select.select {
Expand All @@ -1076,9 +1082,19 @@ body {
margin: 0;

.vs__selected {
min-height: 36px;
padding: 0 0.5em;
border-radius: calc(var(--vs-border-radius) - 4px) !important;
height: 32px;
padding: 0 8px 0 12px;
border-radius: 18px !important;
background: var(--color-primary-element-light);
border: none;
}

.vs__search, .vs__search:focus {
margin: 2px 0 0;
}

.vs__dropdown-toggle {
padding: 0;
}

.vs__clear {
Expand Down Expand Up @@ -1178,4 +1194,10 @@ body {
color: var(--color-text-lighter) !important;
}
}

// Selected users require slightly different padding
.user-select .vs__selected {
padding: 0 2px !important;
}

</style>